support for connect & disconnect

example/index.tsx

@@ -1,57 +1,151 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import { useStatePersist } from 'use-state-persist';
 
 import * as ReactDOM from 'react-dom';
-import { NostrRPC } from '../src/rpc';
+import { broadcastToRelay, Connect, connectToRelay, ConnectURI } from '../src';
 
+import { QRCodeSVG } from 'qrcode.react';
+import { getEventHash, getPublicKey, Event } from 'nostr-tools';
 
-class Server extends NostrRPC {
-  async ping(): Promise<string> {
-    return 'pong';
-  }
-}
-const server = new Server({
-  secretKey:
-    'ed779ff047f99c95f732b22c9f8f842afb870c740aab591776ebc7b64e83cf6c',
-});
-const client = new NostrRPC({
-  secretKey:
-    '5acff99d1ad3e1706360d213fd69203312d9b5e91a2d5f2e06100cc6f686e5b3',
+const secretKey = "5acff99d1ad3e1706360d213fd69203312d9b5e91a2d5f2e06100cc6f686e5b3";
+const connectURI = new ConnectURI({
+  target: getPublicKey(secretKey),
+  relayURL: 'wss://nostr.vulpem.com',
+  metadata: {
+    name: 'Example',
+    description: '🔉🔉🔉',
+    url: 'https://example.com',
+    icons: ['https://example.com/icon.png'],
+  },
 });
 
 const App = () => {
-
-  const [response, setResponse] = useState('');
+  const [pubkey, setPubkey] = useStatePersist('@pubkey', '');
+  const [getPublicKeyReply, setGetPublicKeyReply] = useState('');
+  const [eventWithSig, setEvent] = useState({});
 
   useEffect(() => {
     (async () => {
-      const sub = await server.listen();
-      sub.on('event', (evt) => {
-        console.log('server received message', evt);
+      const target = pubkey.length > 0 ? pubkey : undefined;
+      const connect = new Connect({
+        secretKey,
+        target,
       });
+      connect.events.on('connect', (pubkey: string) => {
+        console.log('We are connected to ' + pubkey)
+        setPubkey(pubkey);
+      });
+      connect.events.on('disconnect', () => {
+        console.log('We got disconnected')
+        setEvent({});
+        setPubkey('');
+        setGetPublicKeyReply('');
+      });
+      await connect.init();
     })();
   }, []);
 
 
-  const makeCall = async () => {
-    const result = await client.call({
-      target: server.self.pubkey,
-      request: { method: 'ping' },
+  const getPub = async () => {
+    if (pubkey.length === 0) return;
+    const connect = new Connect({
+      secretKey,
+      target: pubkey,
     });
-    setResponse(result);
+    const pk = await connect.getPublicKey();
+    setGetPublicKeyReply(pk);
   }
 
+  const sendMessage = async () => {
+    if (pubkey.length === 0) return;
+
+    const connect = new Connect({
+      secretKey,
+      target: pubkey,
+    });
+
+    let event: Event = {
+      kind: 1,
+      pubkey: pubkey,
+      created_at: Math.floor(Date.now() / 1000),
+      tags: [],
+      content: "Running Nostr Connect 🔌"
+    };
+    event.id = getEventHash(event)
+    event.sig = await connect.signEvent(event);
+    const relay = await connectToRelay('wss://relay.damus.io');
+    await broadcastToRelay(relay, event);
+
+    setEvent(event);
+  }
+
+  const isConnected = () => {
+    return pubkey.length > 0;
+  }
 
   return (
-    <div>
-      <h1>Nostr Connect Playground</h1>
-      <p>Server pubkey: {server.self.pubkey}</p>
-      <p>Client pubkey: {client.self.pubkey}</p>
-      <hr />
-      <button onClick={makeCall}>Ping</button>
-      <br />
-      <p> {response} </p>
-    </div>
+    <>
+      <section className="container">
+        <div className='content'>
+          <h1 className='title'>Nostr Connect Playground</h1>
+        </div>
+        <div className='content'>
+          <p className='subtitle is-6'><strong>Nostr ID</strong> {getPublicKey(secretKey)}</p>
+        </div>
+        <div className='content'>
+          <p className='subtitle is-6'><strong>Status</strong> {isConnected() ? '🟢 Connected' : '🔴 Disconnected'}</p>
+        </div>
+        {!isConnected() && <div className='content has-text-centered'>
+          <div className='notification is-info'>
+            <h2 className='title is-5'>Connect with Nostr</h2>
+            <QRCodeSVG value={connectURI.toString()} />
+            <input
+              className='input is-info'
+              type='text'
+              value={connectURI.toString()}
+              readOnly
+            />
+          </div>
+        </div>}
+      </section>
+      <section className="container mt-6">
+        {
+          isConnected() &&
+          <>
+            <div className='content'>
+              <h2 className='title is-5'>Get Public Key</h2>
+              <button className='button is-info' onClick={getPub}>
+                Get public key
+              </button>
+              {getPublicKeyReply.length > 0 && <input
+                className='input is-info mt-3'
+                type='text'
+                value={getPublicKeyReply}
+                readOnly
+              />}
+            </div>
+            <div className='content'>
+              <h2 className='title is-5'>Send a message with text <b>Running Nostr Connect 🔌</b></h2>
+              <button className='button is-info' onClick={sendMessage}>
+                Send message to Nostr
+              </button>
+              {
+                Object.keys(eventWithSig).length > 0 &&
+                <textarea
+                  className="textarea"
+                  readOnly
+                  rows={12}
+                  defaultValue={JSON.stringify(eventWithSig, null, 2)}
+                />
+              }
+            </div>
+          </>
+        }
+      </section>
+    </>
+
+
   )
 }
 ReactDOM.render(<App />, document.getElementById('root'));