add support for multiple click targets

Also, removed the unnecessary nostr-zap-target id.
SamSamskies · May 23, 2023 · 7d62222 · 7d62222
1 parent 6014dfb
commit 7d62222
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -5,14 +5,13 @@ Zap any Nostr npub from anywhere.
 
 ## Usage
 
-Add a `nostr-zap-target` id to an element on your site and specify a target npub using a `data-npub` attribute. Optionally,
+Specify a target npub using a `data-npub` attribute on any HTML elements that you would like to turn into click targets. Optionally,
 you can specify relays that you'd like the zap receipt published to using a `data-relays` attribute. If you don't add a
 `data-relays` attribute, the zap receipt will be blasted out to the top 300 relays using Blastr (wss://nostr.mutinywallet.com).
 
 If the user doesn't have an ext that supports nip-07 installed or does not authorize signing the zap event, an anonymous zap will be sent.
 ```html
-<button 
-    id="nostr-zap-target"
+<button
     data-npub="npub1vp8fdcyejd4pqjyrjk9sgz68vuhq7pyvnzk8j0ehlljvwgp8n6eqsrnpsw"
     data-relays="wss://relay.damus.io,wss://relay.snort.social,wss://nostr.wine,wss://relay.nostr.band"
 >
@@ -22,9 +21,11 @@ If the user doesn't have an ext that supports nip-07 installed or does not autho
 
 Add this script tag right before the bottom closing body tag.
 ```js
-<script src="https://cdn.jsdelivr.net/npm/nostr-zap@0.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/nostr-zap@0.5.0"></script>
 ```
 
-Example Sandbox: https://codesandbox.io/s/nostr-zap-from-anywhere-poc-wiyzgm
+Example Sandbox with 1 button: https://codesandbox.io/s/nostr-zap-from-anywhere-poc-wiyzgm
+
+Example Sandbox with multiple buttons: https://codesandbox.io/s/nostr-zap-from-anywhere-multiple-buttons-6qp79r
 
 ![nostr-zap demo](https://nostr.build/p/nb8670.gif)
diff --git a/example/index.html b/example/index.html
@@ -11,12 +11,12 @@
   </head>
   <body>
     <button
-      id="nostr-zap-target"
       data-npub="npub17jql6yle662jshcw748h9xpkmvz8p70jqnt05up9emv9r4jxtlms3zm9ns"
       data-relays="wss://relay.damus.io,wss://relay.snort.social,wss://nostr.wine,wss://relay.nostr.band"
     >
-      Zap Me ⚡️
+      Zap Frenstr ⚡️
     </button>
+    <button data-npub="npub1f948ng6s3spk9wv990tuyh4dl0uujt6jq9uduanzt3yy653e6f6s77uvzg">Zap Fortune Cookie ⚡️</button>
     <script src="../dist/main.js"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import { injectCSS, initTarget } from "./view";
+import { injectCSS, initTargets } from "./view";
 
 injectCSS();
-initTarget();
+initTargets();
diff --git a/src/nostr.js b/src/nostr.js
@@ -8,11 +8,11 @@ import {
 
 export const decodeNpub = (npub) => nip19.decode(npub).data;
 
-let cachedProfileMetadata = null;
+let cachedProfileMetadata = {};
 
 export const getProfileMetadata = async (authorId) => {
-  if (cachedProfileMetadata) {
-    return cachedProfileMetadata;
+  if (cachedProfileMetadata[authorId]) {
+    return cachedProfileMetadata[authorId];
   }
 
   const metadata = await new Promise((resolve, reject) => {
@@ -26,7 +26,7 @@ export const getProfileMetadata = async (authorId) => {
         kinds: [0],
       });
 
-      cachedProfileMetadata = metadata;
+      cachedProfileMetadata[authorId] = metadata;
       resolve(metadata);
       relay.close();
     });

diff --git a/src/view.js b/src/view.js
@@ -257,29 +257,30 @@ const renderErrorDialog = (message, npub) => {
   return errorDialog;
 };
 
-export const initTarget = () => {
-  const targetEl = document.getElementById("nostr-zap-target");
-  const npub = targetEl.getAttribute("data-npub");
-  const relays = targetEl.getAttribute("data-relays");
-  let amountDialog = null;
-
-  targetEl.addEventListener("click", async function () {
-    try {
-      if (!amountDialog) {
-        amountDialog = await renderAmountDialog(npub, relays);
-      }
+export const initTargets = () => {
+  document.querySelectorAll("[data-npub]").forEach((targetEl) => {
+    const npub = targetEl.getAttribute("data-npub");
+    const relays = targetEl.getAttribute("data-relays");
+    let amountDialog = null;
+
+    targetEl.addEventListener("click", async function () {
+      try {
+        if (!amountDialog) {
+          amountDialog = await renderAmountDialog(npub, relays);
+        }
 
-      amountDialog.showModal();
-      amountDialog.querySelector('input[name="amount"]').focus();
-    } catch (error) {
-      if (amountDialog) {
-        amountDialog.close();
-      }
+        amountDialog.showModal();
+        amountDialog.querySelector('input[name="amount"]').focus();
+      } catch (error) {
+        if (amountDialog) {
+          amountDialog.close();
+        }
 
-      const errorDialog = renderErrorDialog(error, npub);
+        const errorDialog = renderErrorDialog(error, npub);
 
-      errorDialog.showModal();
-    }
+        errorDialog.showModal();
+      }
+    });
   });
 };
 export const injectCSS = () => {