diff --git a/example/index.html b/example/index.html index 19850f0..07635e5 100644 --- a/example/index.html +++ b/example/index.html @@ -5,9 +5,10 @@ Playground + - +
diff --git a/example/index.old.tsx b/example/index.old.tsx deleted file mode 100644 index d0937eb..0000000 --- a/example/index.old.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import 'react-app-polyfill/ie11'; -import * as React from 'react'; -import { useEffect } from 'react'; -import * as ReactDOM from 'react-dom'; -import { Session } from '../src/index'; -import { generatePrivateKey, getPublicKey, nip04, relayInit } from 'nostr-tools' - -const App = () => { - /* useEffect(() => { - (async () => { - })(); - }, []); */ - - const [walletKey, setWalletKey] = React.useState<{ pk: string; sk: string }>(); - const [sessionHolder, setSession] = React.useState(); - const [request, setRequest] = React.useState(); - - - const newWallet = () => { - //this is the wallet public key - let sk = generatePrivateKey() - let pk = getPublicKey(sk) - setWalletKey({ pk, sk }); - } - - const newSession = async () => { - - const session = new Session({ - name: 'Auth', - description: 'lorem ipsum dolor sit amet', - url: 'https://vulpem.com', - icons: ['https://vulpem.com/1000x860-p-500.422be1bc.png'], - }); - - await session.pair(walletKey?.pk); - setSession(session); - }; - - const listen = async () => { - if (!sessionHolder) return; - - // let's query for an event to this wallet pub key - const relay = relayInit('wss://nostr.vulpem.com'); - await relay.connect() - - relay.on('connect', () => { - console.log(`wallet: connected to ${relay.url}`) - }) - relay.on('error', () => { - console.log(`wallet: failed to connect to ${relay.url}`) - }) - - let sub = relay.sub([{ kinds: [4] }]) - // on the receiver side - sub.on('event', async (event) => { - if (!walletKey) return; - - const mention = event.tags.find(([k, v]) => k === 'p' && v && v !== '')[1] - if (mention !== walletKey.pk) return; - - const plaintext = await nip04.decrypt(walletKey?.sk, sessionHolder.pubKey, event.content); - console.log('wallet', event.id, event.pubkey, JSON.parse(plaintext)); - setRequest(JSON.parse(plaintext)); - }) - - sub.on('eose', () => { - sub.unsub() - }) - } - - return ( -
-

💸 Wallet

- {walletKey &&

🔎 Wallet Pub: {walletKey?.pk}

} - - - {request &&
-

📨 Incoming Request

- -

- Name {request?.name} -

-

- Description {request?.description} -

-

- URL: {request?.url} -

-
} -
-

App

- -
- ); -}; - -ReactDOM.render(, document.getElementById('root')); diff --git a/example/index.tsx b/example/index.tsx index d9b4aee..b01648b 100644 --- a/example/index.tsx +++ b/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 { - 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 ( -
-

Nostr Connect Playground

-

Server pubkey: {server.self.pubkey}

-

Client pubkey: {client.self.pubkey}

-
- -
-

{response}

-
+ <> +
+
+

Nostr Connect Playground

+
+
+

Nostr ID {getPublicKey(secretKey)}

+
+
+

Status {isConnected() ? '🟢 Connected' : '🔴 Disconnected'}

+
+ {!isConnected() &&
+
+

Connect with Nostr

+ + +
+
} +
+
+ { + isConnected() && + <> +
+

Get Public Key

+ + {getPublicKeyReply.length > 0 && } +
+
+

Send a message with text Running Nostr Connect 🔌

+ + { + Object.keys(eventWithSig).length > 0 && +