disconnect from App (#2)

* disconnect from App * example
2026-02-23 13:14:21 +01:00 · 2023-01-14 19:34:21 +01:00
parent 3c79cbbeec
commit e797a6994e
7 changed files with 117 additions and 87 deletions
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -33,11 +33,9 @@ const App = () => {
        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('');
@@ -58,56 +56,79 @@ const App = () => {
  }

  const sendMessage = async () => {
-    if (pubkey.length === 0) return;
+    try {
+      if (pubkey.length === 0) return;

-    const connect = new Connect({
-      secretKey,
-      target: pubkey,
-    });
+      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);
+      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);
+    } catch (error) {
+      console.error(error);
+    }

-    setEvent(event);
  }

  const isConnected = () => {
    return pubkey.length > 0;
  }

-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(connectURI.toString()).then(function() {
-      alert('Copied!');
-    }, function(err) {
-      console.error('Async: Could not copy text: ', err);
+  const disconnect = async () => {
+    const connect = new Connect({
+      secretKey,
+      target: pubkey,
    });
+    await connect.disconnect();
+    //cleanup
+    setEvent({});
+    setPubkey('');
+    setGetPublicKeyReply('');
+  }
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(connectURI.toString()).then(undefined,
+      function (err) {
+        console.error('Async: Could not copy text: ', err);
+      });
  }

  return (
-    <>
+    <div className='hero is-fullheight has-background-black has-text-white'>
      <section className="container">
        <div className='content'>
-          <h1 className='title'>Nostr Connect Playground</h1>
+          <h1 className='title has-text-white'>Nostr Connect Playground</h1>
        </div>
        <div className='content'>
-          <p className='subtitle is-6'><strong>Nostr ID</strong> {getPublicKey(secretKey)}</p>
+          <p className='subtitle is-6 has-text-white'><b>Nostr ID</b> {getPublicKey(secretKey)}</p>
        </div>
        <div className='content'>
-          <p className='subtitle is-6'><strong>Status</strong> {isConnected() ? '🟢 Connected' : '🔴 Disconnected'}</p>
+          <p className='subtitle is-6 has-text-white'><b>Status</b> {isConnected() ? '🟢 Connected' : '🔴 Disconnected'}</p>
        </div>
+       {
+       isConnected() && <div className='content'>
+          <button className='button is-danger' onClick={disconnect}>
+            <p className='subtitle is-6 has-text-white'>💤 <i>Disconnect</i></p>
+          </button>
+        </div>
+        }
        {!isConnected() && <div className='content has-text-centered'>
-          <div className='notification is-info'>
+          <div className='notification is-dark'>
            <h2 className='title is-5'>Connect with Nostr</h2>
-            
+
            <QRCodeSVG value={connectURI.toString()} />
            <input
              className='input is-info'
@@ -119,15 +140,14 @@ const App = () => {
              Copy to clipboard
            </button>
          </div>
-        </div>}
-      </section>
-      <section className="container mt-6">
+        </div>
+        }
        {
          isConnected() &&
-          <>
+          <div className='notification is-dark'>
            <div className='content'>
-              <h2 className='title is-5'>Get Public Key</h2>
-              <button className='button is-info' onClick={getPub}>
+              <h2 className='title is-5 has-text-white'>Get Public Key</h2>
+              <button className='button is-info has-text-white' onClick={getPub}>
                Get public key
              </button>
              {getPublicKeyReply.length > 0 && <input
@@ -138,9 +158,9 @@ const App = () => {
              />}
            </div>
            <div className='content'>
-              <h2 className='title is-5'>Send a message with text <b>Running Nostr Connect 🔌</b></h2>
+              <h2 className='title is-5 has-text-white'>Post a message on Damus relay with text <b>Running Nostr Connect 🔌</b></h2>
              <button className='button is-info' onClick={sendMessage}>
-                Send message to Nostr
+                Sign Event
              </button>
              {
                Object.keys(eventWithSig).length > 0 &&
@@ -152,10 +172,10 @@ const App = () => {
                />
              }
            </div>
-          </>
+          </div>
        }
      </section>
-    </>
+    </div>


  )
--- a/example/package.json
+++ b/example/package.json
@@ -8,7 +8,7 @@
    "build": "parcel build --public-url /connect index.html"
  },
  "dependencies": {
-    "@nostr-connect/connect": "^0.1.3",
+    "@nostr-connect/connect": "@nostr-connect/connect",
    "nostr-tools": "^1.1.1",
    "qrcode.react": "^3.1.0",
    "react": "^18.2.0",
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -159,13 +159,8 @@
  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.0.tgz#d15357f7c227e751d90aa06b05a0e5cf993ba8c1"
  integrity sha512-kbacwGSsH/CTout0ZnZWxnW1B+jH/7r/WAAKLBtrRJ/+CUH7lgmQzl3GTrQua3SGKWNSDsS6lmjnDpIJ5Dxyaw==

-"@nostr-connect/connect@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@nostr-connect/connect/-/connect-0.1.3.tgz#427d43cd799fd253009aab490573aba698774b7f"
-  integrity sha512-8BEolEbzWngU4CAGmWfHPxbnyAMXSR2hlww4da3a5NzGlySu22m/fxpy5ZuFybIbOgyerjY26KOuN67xx4Ai4A==
-  dependencies:
-    events "^3.3.0"
-    nostr-tools "^1.0.1"
+"@nostr-connect/connect@file:../src":
+  version "0.0.0"

 "@parcel/bundler-default@2.8.2":
  version "2.8.2"
@@ -1047,7 +1042,7 @@ escape-string-regexp@^1.0.5:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==

-events@^3.1.0, events@^3.3.0:
+events@^3.1.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -1268,7 +1263,7 @@ node-releases@^2.0.6:
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.8.tgz#0f349cdc8fcfa39a92ac0be9bc48b7706292b9ae"
  integrity sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==

-nostr-tools@^1.0.1, nostr-tools@^1.1.1:
+nostr-tools@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.1.1.tgz#2be4cd650bc0a4d20650b6cf46fee451c9f565b8"
  integrity sha512-mxgjbHR6nx2ACBNa2tBpeM/glsPWqxHPT1Kszx/XfzL+kUdi1Gm3Xz1UcaODQ2F84IFtCKNLO+aF31ZfTAhSYQ==