diff --git a/README.md b/README.md index 054fada..9e936c2 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ 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 - + ``` Example Sandbox with 1 button: https://codesandbox.io/s/nostr-zap-from-anywhere-poc-wiyzgm diff --git a/src/view.js b/src/view.js index c4b141e..e136b3f 100644 --- a/src/view.js +++ b/src/view.js @@ -45,11 +45,28 @@ const renderInvoiceDialog = ({ dialogHeader, invoice, relays }) => {
click QR code to copy invoice
- - - + + `); const qrCodeEl = invoiceDialog.querySelector(".qrcode"); + const lightningWalletEl = invoiceDialog.querySelector( + 'select[name="lightning-wallet"]' + ); + const ctaButtonEl = invoiceDialog.querySelector(".cta-button"); const overlayEl = qrCodeEl.querySelector(".overlay"); const closePool = listenForZapReceipt({ relays, @@ -67,6 +84,10 @@ const renderInvoiceDialog = ({ dialogHeader, invoice, relays }) => { setTimeout(() => overlayEl.classList.remove("show"), 2000); }); + ctaButtonEl.addEventListener("click", function () { + window.location.href = `${lightningWalletEl.value}${invoice}`; + }); + invoiceDialog.addEventListener("close", function () { closePool(); invoiceDialog.remove(); @@ -489,6 +510,27 @@ export const injectCSS = () => { height: 28px; width: 300px; } + .nostr-zap-dialog select[name="lightning-wallet"] { + appearance: none; + background-color: white; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 0.7rem center; + background-size: 16px; + border: 1px solid #CBD5E0; + padding: 0.5rem 1rem; + font-size: 1rem; + border-radius: 0.25rem; + width: 100%; + margin-top: 24px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: pointer; + } + .nostr-zap-dialog select[name="lightning-wallet"]:focus { + outline: none; + border-color: #4FD1C5; + box-shadow: 0 0 0 2px #4FD1C5; + } @media only screen and (max-width: 480px) { .nostr-zap-dialog { padding: 18px;