From f65474a8edd778de15a1c1f208552bf20cd1a844 Mon Sep 17 00:00:00 2001
From: pablof7z <pfer@me.com>
Date: Sun, 9 Apr 2023 15:08:15 +0300
Subject: [PATCH] add support for mobile (non-webln) zaps

---
 src/NostrNote.svelte       | 46 +++++++++++++++++++++++---------------
 src/ZapAmountButton.svelte | 26 ++++++++++++++++-----
 2 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/NostrNote.svelte b/src/NostrNote.svelte
index 704ca08..2b961bb 100644
--- a/src/NostrNote.svelte
+++ b/src/NostrNote.svelte
@@ -14,6 +14,7 @@
     let npub;
     let zappingIt;
     let hovering;
+    let mobilePR;
 
     let zappedAmount = 0;
 
@@ -114,26 +115,35 @@
                 }
                 flex items-center absolute ml-5 mt-10 z-10">
                 {#if zappingIt}
-                    <div class="flex flex-row items-stretch justify-between w-full">
-                        <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
-                            <ZapAmountButton icon="👍" amount={500} {event} />
+                    {#if mobilePR}
+                        <div class="flex flex-col gap-3 w-full">
+                            <a href={`lightning:${mobilePR}`} class="text-center w-full p-3 bg-black text-white rounded-t-xl">Open in wallet</a>
+                            <button class="bg-white rounder-b-xl p-3" on:click={() => { $zappingMessage = null; }}>
+                                Cancel
+                            </button>
                         </div>
-                        <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
-                            <ZapAmountButton icon="🤙" amount={2500} amountDisplay={'2.5k'} {event} />
+                    {:else}
+                        <div class="flex flex-row items-stretch justify-between w-full">
+                            <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
+                                <ZapAmountButton icon="👍" amount={500} {event} bind:mobilePR={mobilePR} />
+                            </div>
+                            <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
+                                <ZapAmountButton icon="🤙" amount={2500} amountDisplay={'2.5k'} {event} bind:mobilePR={mobilePR} />
+                            </div>
+                            <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
+                                <ZapAmountButton icon="🙌" amount={5000} amountDisplay={'5k'} {event} bind:mobilePR={mobilePR} />
+                            </div>
+                            <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
+                                <ZapAmountButton icon="🧡" amount={10000} amountDisplay={'10k'} {event} bind:mobilePR={mobilePR} />
+                            </div>
+                            <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
+                                <ZapAmountButton icon="🤯" amount={100000} amountDisplay={'100k'} {event} bind:mobilePR={mobilePR} />
+                            </div>
+                            <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
+                                <ZapAmountButton icon="😎" amount={1000000} amountDisplay={'1M'} {event} bind:mobilePR={mobilePR} />
+                            </div>
                         </div>
-                        <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
-                            <ZapAmountButton icon="🙌" amount={5000} amountDisplay={'5k'} {event} />
-                        </div>
-                        <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
-                            <ZapAmountButton icon="🧡" amount={10000} amountDisplay={'10k'} {event} />
-                        </div>
-                        <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
-                            <ZapAmountButton icon="🤯" amount={100000} amountDisplay={'100k'} {event} />
-                        </div>
-                        <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
-                            <ZapAmountButton icon="😎" amount={1000000} amountDisplay={'1M'} {event} />
-                        </div>
-                    </div>
+                    {/if}
                 {/if}
             </div>
 
diff --git a/src/ZapAmountButton.svelte b/src/ZapAmountButton.svelte
index fcdce89..8b76005 100644
--- a/src/ZapAmountButton.svelte
+++ b/src/ZapAmountButton.svelte
@@ -1,5 +1,5 @@
 <script>
-    export let icon, amount, amountDisplay, event;
+    export let icon, amount, amountDisplay, event, mobilePR;
     import { zappingMessage } from './lib/store';
     import NDK, { NDKEvent, NDKNip07Signer } from 'nostr-dev-kit';
     import { requestProvider } from 'webln';
@@ -12,16 +12,30 @@
         const ndk = new NDK({ explicitRelayUrls: ['wss://nos.lol', 'wss://relay.nostr.band', 'wss://relay.damus.io', 'wss://nostr.mom', 'wss://no.str.cr'] });
         ndk.signer = signer;
         await ndk.connect();
-        const ndkEvent = new NDKEvent(ndk, event);
-        const pr = await ndkEvent.zap(amount * 1000);
+        let pr;
+        try {
+            const ndkEvent = new NDKEvent(ndk, event);
+            pr = await ndkEvent.zap(amount * 1000);
+        } catch (e) {
+            alert(e)
+            return;
+        }
+
+
+        let webln;
+
+        try {
+            webln = await requestProvider();
+        } catch (err) {
+            mobilePR = pr;
+            return;
+        }
 
         try {
-            const webln = await requestProvider();
             await webln.sendPayment(pr);
             $zappingMessage = null;
         } catch (err) {
-            $zappingMessage = null;
-            console.log(err);
+            mobilePR = pr;
         }
     }
 </script>