From 7d622226c46253199f9b5b73cbe510bf2b7d2280 Mon Sep 17 00:00:00 2001 From: Sam Samskies Date: Tue, 23 May 2023 16:41:11 -0500 Subject: [PATCH] add support for multiple click targets Also, removed the unnecessary nostr-zap-target id. --- README.md | 11 ++++++----- example/index.html | 4 ++-- src/index.js | 4 ++-- src/nostr.js | 8 ++++---- src/view.js | 41 +++++++++++++++++++++-------------------- 5 files changed, 35 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index df5a348..f873fc9 100644 --- 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 - + diff --git a/src/index.js b/src/index.js index 715563d..f6acd30 100644 --- 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 index 461ccd1..c9c4806 100644 --- 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 index 0096528..d0b2377 100644 --- 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 = () => {