Fix zaps on mobile

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

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}

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>