From 1d0709735076e1422e5e8be722d2d68fd8aeccb6 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 7 Jul 2025 13:58:43 -0700
Subject: [PATCH] Fix some zap bugs

---
 .../components/ChannelMessageZapButton.svelte | 13 +++----
 src/app/components/InfoZapperError.svelte     | 36 +++++++++++++++++++
 src/app/components/ReactionSummary.svelte     | 12 +++----
 src/app/components/Zap.svelte                 |  1 -
 src/routes/settings/wallet/+page.svelte       | 12 +++----
 5 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 src/app/components/InfoZapperError.svelte

diff --git a/src/app/components/ChannelMessageZapButton.svelte b/src/app/components/ChannelMessageZapButton.svelte
index 96d6a5a..59272fb 100644
--- a/src/app/components/ChannelMessageZapButton.svelte
+++ b/src/app/components/ChannelMessageZapButton.svelte
@@ -3,6 +3,7 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Zap from "@app/components/Zap.svelte"
+  import InfoZapperError from "@app/components/InfoZapperError.svelte"
   import WalletConnect from "@app/components/WalletConnect.svelte"
   import {pushModal} from "@app/modal"
   import {wallet} from "@app/state"
@@ -12,7 +13,9 @@
   const zapper = deriveZapperForPubkey(event.pubkey)
 
   const onClick = () => {
-    if ($wallet) {
+    if (!$zapper?.allowsNostr) {
+      pushModal(InfoZapperError, {url, pubkey: event.pubkey, eventId: event.id})
+    } else if ($wallet) {
       pushModal(Zap, {url, pubkey: event.pubkey, eventId: event.id})
     } else {
       pushModal(WalletConnect)
@@ -20,8 +23,6 @@
   }
 </script>
 
-{#if $zapper?.allowsNostr}
-  <Button onclick={onClick} class="btn join-item btn-xs">
-    <Icon icon="bolt" size={4} />
-  </Button>
-{/if}
+<Button onclick={onClick} class="btn join-item btn-xs">
+  <Icon icon="bolt" size={4} />
+</Button>
diff --git a/src/app/components/InfoZapperError.svelte b/src/app/components/InfoZapperError.svelte
new file mode 100644
index 0000000..d1f8fc6
--- /dev/null
+++ b/src/app/components/InfoZapperError.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import {deriveZapperForPubkey} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
+
+  const {pubkey} = $props()
+
+  const zapper = deriveZapperForPubkey(pubkey)
+
+  const back = () => history.back()
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>Unable to Zap</div>
+    {/snippet}
+  </ModalHeader>
+  <p>
+    Zapping <ProfileLink {pubkey} class="!text-primary" /> isn't possible right now because
+    {#if $zapper}
+      their zap receiver isn't correctly set up.
+    {:else}
+      they don't currently have a zap receiver set up.
+    {/if}
+  </p>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+  </ModalFooter>
+</div>
diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte
index e4e263f..d7074f2 100644
--- a/src/app/components/ReactionSummary.svelte
+++ b/src/app/components/ReactionSummary.svelte
@@ -8,6 +8,7 @@
     getReplyFilters,
     getEmojiTags,
     getEmojiTag,
+    fromMsats,
     getTag,
     REPORT,
     DELETE,
@@ -84,12 +85,7 @@
     ),
   )
 
-  const groupedZaps = $derived(
-    groupBy(
-      e => getReactionKey(e.request),
-      uniqBy(e => `${e.request.pubkey}${getReactionKey(e.request)}`, $zaps),
-    ),
-  )
+  const groupedZaps = $derived(groupBy(e => getReactionKey(e.request), $zaps))
 
   onMount(() => {
     const controller = new AbortController()
@@ -128,8 +124,8 @@
       </button>
     {/if}
     {#each groupedZaps.entries() as [key, zaps]}
-      {@const amount = sum(zaps.map(zap => zap.invoiceAmount))}
-      {@const pubkeys = zaps.map(zap => zap.request.pubkey)}
+      {@const amount = fromMsats(sum(zaps.map(zap => zap.invoiceAmount)))}
+      {@const pubkeys = uniq(zaps.map(zap => zap.request.pubkey))}
       {@const isOwn = $pubkey && pubkeys.includes($pubkey)}
       {@const info = displayList(pubkeys.map(pubkey => displayProfileByPubkey(pubkey)))}
       {@const tooltip = `${info} zapped`}
diff --git a/src/app/components/Zap.svelte b/src/app/components/Zap.svelte
index 3f4218a..e9a8253 100644
--- a/src/app/components/Zap.svelte
+++ b/src/app/components/Zap.svelte
@@ -63,7 +63,6 @@
       const params = {pubkey, content, eventId, msats, relays, zapper}
       const event = await $signer!.sign(makeZapRequest(params))
       const res = await requestZap({zapper, event})
-      console.log({event, zapper, res})
 
       if (!res.invoice) {
         return pushToast({
diff --git a/src/routes/settings/wallet/+page.svelte b/src/routes/settings/wallet/+page.svelte
index 15bd930..8a4421d 100644
--- a/src/routes/settings/wallet/+page.svelte
+++ b/src/routes/settings/wallet/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {nwc} from "@getalby/sdk"
   import {LOCALE} from "@welshman/lib"
-  import {displayRelayUrl} from "@welshman/util"
+  import {displayRelayUrl, fromMsats} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import WalletConnect from "@app/components/WalletConnect.svelte"
@@ -22,7 +22,7 @@
         Wallet
       </strong>
       {#if $wallet}
-        <div class="flex items-center gap-2 text-sm">
+        <div class="flex items-center gap-2 text-sm text-success">
           <Icon icon="check-circle" size={4} />
           Connected
         </div>
@@ -42,14 +42,14 @@
               Connected to <strong>{node?.alias || version || "unknown wallet"}</strong>
               via <strong>{$wallet.type}</strong>
             </p>
-            <p class="flex items-center gap-2">
+            <p class="flex gap-2 whitespace-nowrap">
               Balance:
               {#await getWebLn()
                 ?.enable()
                 .then(() => getWebLn().getBalance())}
                 <span class="loading loading-spinner loading-sm"></span>
               {:then res}
-                {new Intl.NumberFormat(LOCALE).format(res?.balance || 0)}
+                {new Intl.NumberFormat(LOCALE).format(fromMsats(res?.balance || 0))}
               {:catch}
                 [unknown]
               {/await}
@@ -62,12 +62,12 @@
             <p>
               Connected to <strong>{lud16}</strong> via <strong>{displayRelayUrl(relayUrl)}</strong>
             </p>
-            <p class="flex items-center gap-2">
+            <p class="flex gap-2 whitespace-nowrap">
               Balance:
               {#await new nwc.NWCClient({nostrWalletConnectUrl}).getBalance()}
                 <span class="loading loading-spinner loading-sm"></span>
               {:then res}
-                {new Intl.NumberFormat(LOCALE).format(res?.balance || 0)}
+                {new Intl.NumberFormat(LOCALE).format(fromMsats(res?.balance || 0))}
               {:catch}
                 [unknown]
               {/await}