From e3285639a719165ff6ff46074a3cfe7b7c685c8f Mon Sep 17 00:00:00 2001
From: Sam Samskies <samsamskies@gmail.com>
Date: Sat, 22 Jul 2023 17:15:24 -0500
Subject: [PATCH] add wallet selector
---
README.md | 2 +-
src/view.js | 48 +++++++++++++++++++++++++++++++++++++++++++++---
2 files changed, 46 insertions(+), 4 deletions(-)
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
-<script src="https://cdn.jsdelivr.net/npm/nostr-zap@0.19.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/nostr-zap@0.20.0"></script>
```
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 }) => {
<div class="overlay">copied invoice to clipboard</div>
</div>
<p>click QR code to copy invoice</p>
- <a href="lightning:${invoice}">
- <button class="cta-button">Open Wallet</button>
- </a>
+ <select name="lightning-wallet">
+ <option value="lightning:">Default Wallet</option>
+ <option value="strike:lightning:">Strike</option>
+ <option value="https://cash.app/launch/lightning/">Cash App</option>
+ <option value="muun:">Muun</option>
+ <option value="bluewallet:lightning:">Blue Wallet</option>
+ <option value="walletofsatoshi:lightning:">Wallet of Satoshi</option>
+ <option value="zebedee:lightning:">Zebedee</option>
+ <option value="zeusln:lightning:">Zeus LN</option>
+ <option value="phoenix://">Phoenix</option>
+ <option value="breez:">Breez</option>
+ <option value="bitcoinbeach://">Bitcoin Beach</option>
+ <option value="blixtwallet:lightning:">Blixt Wallet</option>
+ <option value="river://">River</option>
+ </select>
+ <button class="cta-button">Open Wallet</button>
`);
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,<svg xmlns="http://www.w3.org/2000/svg" fill="%232D3748" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></svg>');
+ 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;