From a12eddb47b3375d968deacd7671b72c6597cbfe6 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 17 Jul 2025 15:29:26 -0700
Subject: [PATCH] Fix zaps on mobile

---
 .../components/ChannelMessageMenuMobile.svelte |  8 ++++++++
 src/app/components/Zap.svelte                  |  4 ++--
 src/app/components/ZapButton.svelte            | 18 ++++++++++++++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/components/ChannelMessageMenuMobile.svelte b/src/app/components/ChannelMessageMenuMobile.svelte
index 6453ae38..10dd013e 100644
--- a/src/app/components/ChannelMessageMenuMobile.svelte
+++ b/src/app/components/ChannelMessageMenuMobile.svelte
@@ -5,8 +5,10 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
+  import ZapButton from "@app/components/ZapButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
+  import {ENABLE_ZAPS} from "@app/state"
   import {publishReaction} from "@app/commands"
   import {pushModal} from "@app/modal"
 
@@ -40,6 +42,12 @@
     <Icon size={4} icon="smile-circle" />
     Send Reaction
   </Button>
+  {#if ENABLE_ZAPS}
+    <ZapButton replaceState {url} {event} class="btn btn-secondary w-full">
+      <Icon size={4} icon="bolt" />
+      Send Zap
+    </ZapButton>
+  {/if}
   <Button class="btn btn-neutral w-full" onclick={sendReply}>
     <Icon size={4} icon="reply" />
     Send Reply
diff --git a/src/app/components/Zap.svelte b/src/app/components/Zap.svelte
index e9a8253c..df28a3f7 100644
--- a/src/app/components/Zap.svelte
+++ b/src/app/components/Zap.svelte
@@ -116,7 +116,7 @@
       <div>To <ProfileLink {pubkey} class="!text-primary" /></div>
     {/snippet}
   </ModalHeader>
-  <FieldInline>
+  <FieldInline class="!grid-cols-3">
     {#snippet label()}
       Emoji Reaction
     {/snippet}
@@ -128,7 +128,7 @@
       </div>
     {/snippet}
   </FieldInline>
-  <FieldInline>
+  <FieldInline class="!grid-cols-3">
     {#snippet label()}
       Amount
     {/snippet}
diff --git a/src/app/components/ZapButton.svelte b/src/app/components/ZapButton.svelte
index 91539de2..faeb97b8 100644
--- a/src/app/components/ZapButton.svelte
+++ b/src/app/components/ZapButton.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+  import type {TrustedEvent} from "@welshman/util"
   import {deriveZapperForPubkey} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import Zap from "@app/components/Zap.svelte"
@@ -7,17 +9,25 @@
   import {pushModal} from "@app/modal"
   import {wallet} from "@app/state"
 
-  const {url, event, children, ...props} = $props()
+  type Props = {
+    url: string
+    event: TrustedEvent
+    children: Snippet
+    replaceState?: boolean
+    class?: string
+  }
+
+  const {url, event, children, replaceState, ...props}: Props = $props()
 
   const zapper = deriveZapperForPubkey(event.pubkey)
 
   const onClick = () => {
     if (!$zapper?.allowsNostr) {
-      pushModal(InfoZapperError, {url, pubkey: event.pubkey, eventId: event.id})
+      pushModal(InfoZapperError, {url, pubkey: event.pubkey, eventId: event.id}, {replaceState})
     } else if ($wallet) {
-      pushModal(Zap, {url, pubkey: event.pubkey, eventId: event.id})
+      pushModal(Zap, {url, pubkey: event.pubkey, eventId: event.id}, {replaceState})
     } else {
-      pushModal(WalletConnect)
+      pushModal(WalletConnect, {}, {replaceState})
     }
   }
 </script>