Add zaps

src/app/components/ChannelMessage.svelte

@@ -11,6 +11,7 @@
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
+  import ChannelMessageZapButton from "@app/components/ChannelMessageZapButton.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
   import ChannelMessageMenuMobile from "@app/components/ChannelMessageMenuMobile.svelte"
@@ -94,6 +95,7 @@
     <button
       class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
       class:group-hover:opacity-100={!isMobile}>
+      <ChannelMessageZapButton {url} {event} />
       <ChannelMessageEmojiButton {url} {event} />
       {#if replyTo}
         <Button class="btn join-item btn-xs" onclick={reply}>

src/app/components/ChannelMessageZapButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import {deriveZapperForPubkey} from "@welshman/app"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Zap from "@app/components/Zap.svelte"
+  import WalletConnect from "@app/components/WalletConnect.svelte"
+  import {pushModal} from "@app/modal"
+  import {wallet} from "@app/state"
+
+  const {url, event} = $props()
+
+  const zapper = deriveZapperForPubkey(event.pubkey)
+
+  const onClick = () => {
+    if ($wallet) {
+      pushModal(Zap, {url, pubkey: event.pubkey, eventId: event.id})
+    } else {
+      pushModal(WalletConnect)
+    }
+  }
+</script>
+
+{#if $zapper?.allowsNostr}
+  <Button onclick={onClick} class="btn join-item btn-xs">
+    <Icon icon="bolt" size={4} />
+  </Button>
+{/if}

src/app/components/ProfileLink.svelte

@@ -9,14 +9,15 @@
   type Props = {
     pubkey: string
     url?: string
+    class?: string
     unstyled?: boolean
   }
 
-  const {pubkey, url, unstyled}: Props = $props()
+  const {pubkey, url, unstyled, ...props}: Props = $props()
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
 </script>
 
-<Button onclick={preventDefault(openProfile)} class={cx({"link-content": !unstyled})}>
+<Button onclick={preventDefault(openProfile)} class={cx(props.class, {"link-content": !unstyled})}>
   @<ProfileName {pubkey} {url} />
 </Button>

src/app/components/ReactionSummary.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {Snippet} from "svelte"
-  import {groupBy, uniq, uniqBy, batch, displayList} from "@welshman/lib"
+  import {groupBy, sum, uniq, uniqBy, batch, displayList} from "@welshman/lib"
   import {
     REACTION,
+    ZAP_RESPONSE,
     getReplyFilters,
     getEmojiTags,
     getEmojiTag,
@@ -11,10 +12,10 @@
     REPORT,
     DELETE,
   } from "@welshman/util"
-  import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
+  import type {TrustedEvent, EventContent, Zap} from "@welshman/util"
+  import {deriveEvents, deriveEventsMapped} from "@welshman/store"
   import {load} from "@welshman/net"
-  import {pubkey, repository, displayProfileByPubkey} from "@welshman/app"
+  import {pubkey, repository, getValidZap, displayProfileByPubkey} from "@welshman/app"
   import {isMobile, preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Reaction from "@app/components/Reaction.svelte"
@@ -49,6 +50,12 @@
     filters: [{kinds: [REACTION], "#e": [event.id]}],
   })
 
+  const zaps = deriveEventsMapped<Zap>(repository, {
+    filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}],
+    itemToEvent: item => item.response,
+    eventToItem: (response: TrustedEvent) => getValidZap(response, event),
+  })
+
   const onReactionClick = (events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
 
@@ -77,6 +84,13 @@
     ),
   )
 
+  const groupedZaps = $derived(
+    groupBy(
+      e => getReactionKey(e.request),
+      uniqBy(e => `${e.request.pubkey}${getReactionKey(e.request)}`, $zaps),
+    ),
+  )
+
   onMount(() => {
     const controller = new AbortController()
 
@@ -84,7 +98,7 @@
       load({
         relays: [url],
         signal: controller.signal,
-        filters: getReplyFilters([event], {kinds: [REACTION, REPORT, DELETE]}),
+        filters: getReplyFilters([event], {kinds: [REACTION, REPORT, DELETE, ZAP_RESPONSE]}),
         onEvent: batch(300, (events: TrustedEvent[]) => {
           load({
             relays: [url],
@@ -100,7 +114,7 @@
   })
 </script>
 
-{#if $reactions.length > 0 || $reports.length > 0}
+{#if $reactions.length > 0 || $zaps.length || $reports.length > 0}
   <div class="flex min-w-0 flex-wrap gap-2">
     {#if url && $reports.length > 0}
       <button
@@ -113,6 +127,24 @@
         <span>{$reports.length}</span>
       </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 isOwn = $pubkey && pubkeys.includes($pubkey)}
+      {@const info = displayList(pubkeys.map(pubkey => displayProfileByPubkey(pubkey)))}
+      {@const tooltip = `${info} zapped`}
+      <button
+        type="button"
+        data-tip={tooltip}
+        class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full {reactionClass}"
+        class:tooltip={!noTooltip && !isMobile}
+        class:border={isOwn}
+        class:border-solid={isOwn}
+        class:border-primary={isOwn}>
+        <Reaction event={zaps[0].request} />
+        <span>{amount}</span>
+      </button>
+    {/each}
     {#each groupedReactions.entries() as [key, events]}
       {@const pubkeys = events.map(e => e.pubkey)}
       {@const isOwn = $pubkey && pubkeys.includes($pubkey)}

src/app/components/WalletConnect.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import {nwc} from "@getalby/sdk"
+  import {sleep} from "@welshman/lib"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import type {NWCInfo} from "@app/state"
+  import {wallet, getWebLn} from "@app/state"
+  import {pushToast} from "@app/toast"
+
+  const back = () => history.back()
+
+  const connectWithWebLn = async () => {
+    loading = true
+
+    try {
+      await Promise.all([sleep(800), getWebLn().enable()])
+      const info = await getWebLn().getInfo()
+
+      if (!info?.supports?.includes("lightning")) {
+        pushToast({
+          theme: "error",
+          message: "Your extension does not support lightning payments",
+        })
+      } else {
+        wallet.set({type: "webln", info})
+        pushToast({message: "Wallet successfully connected!"})
+
+        await sleep(400)
+
+        back()
+      }
+    } catch (e) {
+      console.error(e)
+      pushToast({
+        theme: "error",
+        message: "Wallet failed to connect",
+      })
+    } finally {
+      loading = false
+    }
+  }
+
+  const connectWithNWC = async () => {
+    loading = true
+
+    try {
+      const client = new nwc.NWCClient({nostrWalletConnectUrl})
+      const [_, info] = await Promise.all([sleep(800), client.getInfo()])
+
+      if (!info) {
+        pushToast({
+          theme: "error",
+          message: "Wallet failed to connect",
+        })
+      } else {
+        wallet.set({type: "nwc", info: client.options as unknown as NWCInfo})
+        pushToast({message: "Wallet successfully connected!"})
+
+        await sleep(400)
+
+        back()
+      }
+    } catch (e) {
+      console.error(e)
+      pushToast({
+        theme: "error",
+        message: "Wallet failed to connect",
+      })
+    } finally {
+      loading = false
+    }
+  }
+
+  let nostrWalletConnectUrl = $state("")
+  let loading = $state(false)
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>Connect a Wallet</div>
+    {/snippet}
+    {#snippet info()}
+      Use Nostr Wallet Connect to send Bitcoin payments over Lightning.
+    {/snippet}
+  </ModalHeader>
+  {#if getWebLn()}
+    <Button
+      class="btn btn-primary"
+      disabled={Boolean(nostrWalletConnectUrl || loading)}
+      onclick={connectWithWebLn}>
+      <Spinner loading={!nostrWalletConnectUrl && loading}>
+        {#if !nostrWalletConnectUrl && loading}
+          Connecting...
+        {:else}
+          <div class="flex items-center gap-2">
+            <Icon icon="cpu" />
+            Connect with WebLN
+          </div>
+        {/if}
+      </Spinner>
+    </Button>
+    <Divider>Or</Divider>
+  {/if}
+  <Field>
+    {#snippet label()}
+      Connection Secret*
+    {/snippet}
+    {#snippet input()}
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon="lock" />
+        <input
+          bind:value={nostrWalletConnectUrl}
+          autocomplete="off"
+          name="flotilla-nwc"
+          class="grow"
+          type="password" />
+        <Icon icon="qr-code" />
+      </label>
+    {/snippet}
+    {#snippet info()}
+      You can find this in any wallet that supports
+      <Link external href="https://nwc.getalby.com/about" class="text-primary"
+        >Nostr Wallet Connect</Link
+      >.
+    {/snippet}
+  </Field>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button
+      class="btn btn-primary"
+      disabled={!nostrWalletConnectUrl || loading}
+      onclick={connectWithNWC}>
+      <Spinner loading={Boolean(nostrWalletConnectUrl && loading)}>
+        {#if nostrWalletConnectUrl && loading}
+          Connecting...
+        {:else}
+          <div class="flex items-center gap-2">
+            Connect Wallet
+            <Icon icon="alt-arrow-right" />
+          </div>
+        {/if}
+      </Spinner>
+    </Button>
+  </ModalFooter>
+</div>

src/app/components/WalletDisconnect.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Confirm from "@lib/components/Confirm.svelte"
+  import {wallet} from "@app/state"
+  import {clearModals} from "@app/modal"
+
+  const confirm = async () => {
+    wallet.set(undefined)
+
+    clearModals()
+  }
+</script>
+
+<Confirm
+  {confirm}
+  title="Disconnect Wallet"
+  message="Are you sure you want to disconnect your bitcoin wallet?" />

src/app/components/Zap.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import type {NativeEmoji} from "emoji-picker-element/shared"
+  import {signer, deriveZapperForPubkey} from "@welshman/app"
+  import {load} from "@welshman/net"
+  import {Router} from "@welshman/router"
+  import {requestZap, makeZapRequest, getZapResponseFilter} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
+  import {payInvoice} from "@app/commands"
+  import {pushToast} from "@app/toast"
+
+  type Props = {
+    url: string
+    pubkey: string
+    eventId?: string
+  }
+
+  const {url, pubkey, eventId}: Props = $props()
+
+  const minPos = 1
+  const maxPos = 1000
+  const minVal = 21
+  const maxVal = 1000000
+  const zapperStore = deriveZapperForPubkey(pubkey)
+
+  const posToAmount = (pos: number) => {
+    const normalizedPos = (pos - minPos) / (maxPos - minPos)
+    const logMin = Math.log(minVal)
+    const logMax = Math.log(maxVal)
+    const logValue = logMin + normalizedPos * (logMax - logMin)
+    return Math.round(Math.exp(logValue))
+  }
+
+  const amountToPos = (amount: number) => {
+    const clampedAmount = Math.max(minVal, Math.min(maxVal, amount))
+    const logMin = Math.log(minVal)
+    const logMax = Math.log(maxVal)
+    const logValue = Math.log(clampedAmount)
+    const normalizedPos = (logValue - logMin) / (logMax - logMin)
+    return Math.round(minPos + normalizedPos * (maxPos - minPos))
+  }
+
+  const back = () => history.back()
+
+  const onEmoji = (emoji: NativeEmoji) => {
+    content = emoji.unicode
+  }
+
+  const sendZap = async () => {
+    loading = true
+
+    try {
+      const zapper = $zapperStore!
+      const msats = amount * 1000
+      const relays = url ? [url] : Router.get().ForPubkey(pubkey).getUrls()
+      const filters = [getZapResponseFilter({zapper, pubkey, eventId})]
+      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({
+          theme: "error",
+          message: `Failed to zap: ${res.error || "no error given"}`,
+        })
+      }
+
+      await payInvoice(res.invoice)
+      await load({relays, filters})
+
+      pushToast({message: "Zap successfully sent!"})
+      back()
+    } catch (e) {
+      console.error(e)
+
+      const message = String(e).replace(/^.*Error: /, "")
+
+      pushToast({
+        theme: "error",
+        message: `Failed to zap: ${message}`,
+      })
+    } finally {
+      loading = false
+    }
+  }
+
+  let pos = $state(minPos)
+  let amount = $state(minVal)
+  let content = $state("⚡️")
+  let loading = $state(false)
+
+  $effect(() => {
+    amount = posToAmount(pos)
+  })
+
+  $effect(() => {
+    const newPos = amountToPos(amount)
+    if (newPos !== pos) {
+      pos = newPos
+    }
+  })
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>Send a Zap</div>
+    {/snippet}
+    {#snippet info()}
+      <div>To <ProfileLink {pubkey} class="!text-primary" /></div>
+    {/snippet}
+  </ModalHeader>
+  <FieldInline>
+    {#snippet label()}
+      Emoji Reaction
+    {/snippet}
+    {#snippet input()}
+      <div class="flex flex-grow items-center justify-end gap-4">
+        <EmojiButton {onEmoji} class="btn btn-neutral">
+          {content}
+        </EmojiButton>
+      </div>
+    {/snippet}
+  </FieldInline>
+  <FieldInline>
+    {#snippet label()}
+      Amount
+    {/snippet}
+    {#snippet input()}
+      <div class="flex flex-grow justify-end">
+        <label class="input input-bordered flex items-center gap-2">
+          <Icon icon="bolt" />
+          <input bind:value={amount} type="number" class="w-24" />
+        </label>
+      </div>
+    {/snippet}
+  </FieldInline>
+  <input
+    class="range range-primary -mt-2"
+    type="range"
+    min={minPos}
+    max={maxPos}
+    bind:value={pos} />
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" onclick={sendZap} disabled={loading}>
+      <Spinner {loading}>
+        <div class="flex items-center gap-2">
+          {#if !loading}
+            <Icon icon="bolt" />
+          {/if}
+          Send Zap
+        </div>
+      </Spinner>
+    </Button>
+  </ModalFooter>
+</div>