Fix some zap bugs

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">
-  <Button onclick={onClick} class="btn join-item btn-xs">
+  <Icon icon="bolt" size={4} />
-    <Icon icon="bolt" size={4} />
+</Button>
-  </Button>
-{/if}

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>

src/app/components/ReactionSummary.svelte

@@ -8,6 +8,7 @@
     getReplyFilters,
     getEmojiTags,
     getEmojiTag,
+    fromMsats,
     getTag,
     REPORT,
     DELETE,
@@ -84,12 +85,7 @@
     ),
   )
 
-  const groupedZaps = $derived(
+  const groupedZaps = $derived(groupBy(e => getReactionKey(e.request), $zaps))
-    groupBy(
-      e => getReactionKey(e.request),
-      uniqBy(e => `${e.request.pubkey}${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 amount = fromMsats(sum(zaps.map(zap => zap.invoiceAmount)))}
-      {@const pubkeys = zaps.map(zap => zap.request.pubkey)}
+      {@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`}

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({

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}