Add zaps

src/routes/settings/+layout.svelte

@@ -28,6 +28,11 @@
         <Icon icon="user-circle" /> Profile
       </SecondaryNavItem>
     </div>
+    <div in:fly|local>
+      <SecondaryNavItem href="/settings/wallet">
+        <Icon icon="wallet" /> Wallet
+      </SecondaryNavItem>
+    </div>
     <div in:fly|local={{delay: 50}}>
       <SecondaryNavItem href="/settings/relays">
         <Icon icon="server" /> Relays

src/routes/settings/wallet/+page.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import {nwc} from "@getalby/sdk"
+  import {LOCALE} from "@welshman/lib"
+  import {displayRelayUrl} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import WalletConnect from "@app/components/WalletConnect.svelte"
+  import WalletDisconnect from "@app/components/WalletDisconnect.svelte"
+  import {pushModal} from "@app/modal"
+  import {wallet, getWebLn} from "@app/state"
+
+  const connect = () => pushModal(WalletConnect)
+
+  const disconnect = () => pushModal(WalletDisconnect)
+</script>
+
+<div class="content column gap-4">
+  <div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
+    <div class="flex items-center justify-between">
+      <strong class="flex items-center gap-3">
+        <Icon icon="wallet" />
+        Wallet
+      </strong>
+      {#if $wallet}
+        <div class="flex items-center gap-2 text-sm">
+          <Icon icon="check-circle" size={4} />
+          Connected
+        </div>
+      {:else}
+        <Button class="btn btn-primary btn-sm" onclick={connect}>
+          <Icon icon="add-circle" />
+          Connect Wallet
+        </Button>
+      {/if}
+    </div>
+    <div class="col-4">
+      {#if $wallet}
+        {#if $wallet?.type === "webln"}
+          {@const {node, version} = $wallet.info}
+          <div class="flex flex-col justify-between gap-2 lg:flex-row">
+            <p>
+              Connected to <strong>{node?.alias || version || "unknown wallet"}</strong>
+              via <strong>{$wallet.type}</strong>
+            </p>
+            <p class="flex items-center gap-2">
+              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)}
+              {:catch}
+                [unknown]
+              {/await}
+              sats
+            </p>
+          </div>
+        {:else if $wallet.type === "nwc"}
+          {@const {lud16, relayUrl, nostrWalletConnectUrl} = $wallet.info}
+          <div class="flex flex-col justify-between gap-2 lg:flex-row">
+            <p>
+              Connected to <strong>{lud16}</strong> via <strong>{displayRelayUrl(relayUrl)}</strong>
+            </p>
+            <p class="flex items-center gap-2">
+              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)}
+              {:catch}
+                [unknown]
+              {/await}
+              sats
+            </p>
+          </div>
+        {/if}
+        <Button class="btn btn-neutral btn-sm" onclick={disconnect}>
+          <Icon icon="close-circle" />
+          Disconnect Wallet
+        </Button>
+      {:else}
+        <p class="py-12 text-center opacity-75">No wallet connected</p>
+      {/if}
+    </div>
+  </div>
+</div>

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -13,6 +13,7 @@
     MESSAGE,
     DELETE,
     REACTION,
+    ZAP_RESPONSE,
     ROOM_ADD_USER,
     ROOM_REMOVE_USER,
   } from "@welshman/util"
@@ -226,7 +227,9 @@
       element: element!,
       relays: [url],
       feedFilters: [filter],
-      subscriptionFilters: [{kinds: [DELETE, REACTION, MESSAGE], "#h": [room], since: now()}],
+      subscriptionFilters: [
+        {kinds: [DELETE, REACTION, ZAP_RESPONSE, MESSAGE], "#h": [room], since: now()},
+      ],
       initialEvents: getEventsForUrl(url, [{...filter, limit: 20}]),
       onExhausted: () => {
         loadingEvents = false

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -5,7 +5,7 @@
   import {page} from "$app/stores"
   import {now, last, formatTimestampAsDate} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {REACTION, DELETE, EVENT_TIME, getTagValue} from "@welshman/util"
+  import {REACTION, ZAP_RESPONSE, DELETE, EVENT_TIME, getTagValue} from "@welshman/util"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -93,7 +93,9 @@
 
   onMount(() => {
     const feedFilters = [{kinds: [EVENT_TIME]}]
-    const subscriptionFilters = [{kinds: [DELETE, REACTION, EVENT_TIME], since: now()}]
+    const subscriptionFilters = [
+      {kinds: [DELETE, REACTION, ZAP_RESPONSE, EVENT_TIME], since: now()},
+    ]
 
     ;({events, cleanup} = makeCalendarFeed({
       element: element!,

src/routes/spaces/[relay]/chat/+page.svelte

@@ -5,7 +5,7 @@
   import type {Readable} from "svelte/store"
   import {now, formatTimestampAsDate} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {makeEvent, MESSAGE, DELETE, REACTION} from "@welshman/util"
+  import {makeEvent, MESSAGE, DELETE, REACTION, ZAP_RESPONSE} from "@welshman/util"
   import {pubkey, publishThunk} from "@welshman/app"
   import {slide, fade, fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -174,7 +174,7 @@
       element: element!,
       relays: [url],
       feedFilters: [filter],
-      subscriptionFilters: [{kinds: [DELETE, REACTION, MESSAGE], since: now()}],
+      subscriptionFilters: [{kinds: [DELETE, REACTION, ZAP_RESPONSE, MESSAGE], since: now()}],
       initialEvents: getEventsForUrl(url, [{...filter, limit: 20}]),
       onExhausted: () => {
         loadingEvents = false

src/routes/spaces/[relay]/threads/+page.svelte

@@ -3,7 +3,15 @@
   import {page} from "$app/stores"
   import {sortBy, max, nthEq} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {THREAD, REACTION, DELETE, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
+  import {
+    THREAD,
+    REACTION,
+    ZAP_RESPONSE,
+    DELETE,
+    COMMENT,
+    getListTags,
+    getPubkeyTagValues,
+  } from "@welshman/util"
   import {userMutes} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -49,7 +57,7 @@
       relays: [url],
       feedFilters: [{kinds: [THREAD, COMMENT]}],
       subscriptionFilters: [
-        {kinds: [THREAD, REACTION, DELETE]},
+        {kinds: [THREAD, REACTION, ZAP_RESPONSE, DELETE]},
         {kinds: [COMMENT], "#K": [String(THREAD)]},
       ],
       initialEvents: getEventsForUrl(url, [{kinds: [THREAD, COMMENT], limit: 10}]),