wss:// URL to query. You can add several and this tool will query them in parallel.
+
+ ),
+ },
+ {
+ label: 'Step 02 / 03',
+ title: 'Filter by Kind or NIP',
+ render: () => (
+ <>
+ Each event has a numeric kind. If you know it, use Kind. If not,
+ search by NIP — the spec number — and we'll resolve its kinds automatically.
+ Then narrow with author, tags, or time range.
+
+ ),
+ },
+ {
+ label: 'Step 03 / 03',
+ title: 'Search vs Stream',
+ render: () => (
+ <>
+ Search fetches a snapshot (past events, bounded by limit).{' '}
+ Stream keeps a live socket open and prints new events as they land.
+ Use Stream to debug relays or watch a kind in real time.
+
+ ),
+ },
+];
+
+export function Walkthrough({ onClose }: WalkthroughProps) {
+ const [step, setStep] = useState(0);
+ const s = steps[step];
+ const isLast = step === steps.length - 1;
+ const primaryBtnRef = useRef{s.render()}
+
+ Pick a relay below or paste your own wss:// endpoint in the Relay field above.
+ Then run a query or start streaming.
+
- {validRelays.length > 0 ? 'No events found' : 'Enter a relay URL to start monitoring'} -
- {validRelays.length > 0 && ( -Connected to {validRelays.length} relay{validRelays.length !== 1 ? 's' : ''}:
-{relay}
- ))}
- Searching for event kinds:
- {filters.kinds.filter(k => k.trim() !== '').join(', ') || 'all kinds'}
-
💡 Troubleshooting tips:
-No events found
+Connected to {validRelays.length} relay{validRelays.length !== 1 ? 's' : ''}:
+{relay}
+ ))}
Searching for event kinds:
+ {filters.kinds.filter(k => k.trim() !== '').join(', ') || 'all kinds'}
+
💡 Troubleshooting tips:
+