fix: replace zap slider with common amount pills

src/app/components/Zap.svelte

@@ -21,7 +21,6 @@
   import {errorMessage} from "@lib/util"
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import {payInvoice} from "@app/lightning"
-  import {zapAmounts} from "@app/settings"
   import {pushToast} from "@app/toast"
 
   type Props = {
@@ -32,6 +31,7 @@
 
   const {url, pubkey, eventId}: Props = $props()
 
+  const zapAmounts = [21, 100, 1000, 10000]
   const zapperStore = deriveZapperForPubkey(pubkey)
 
   const back = () => history.back()
@@ -82,7 +82,7 @@
     }
   }
 
-  let amount = $state(zapAmounts.get()[0])
+  let amount = $state(zapAmounts[0])
   let content = $state("⚡️")
   let loading = $state(false)
 </script>
@@ -119,7 +119,7 @@
       {/snippet}
     </FieldInline>
     <div class="flex flex-wrap justify-end gap-2">
-      {#each $zapAmounts as preset}
+      {#each zapAmounts as preset}
         <Button
           class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
           onclick={() => selectAmount(preset)}>

src/app/components/ZapInvoice.svelte

@@ -25,7 +25,6 @@
   import QRCode from "@app/components/QRCode.svelte"
   import WalletConnect from "@app/components/WalletConnect.svelte"
   import {pushModal} from "@app/modal"
-  import {zapAmounts} from "@app/settings"
   import {clip, pushToast} from "@app/toast"
 
   type Props = {
@@ -36,6 +35,7 @@
 
   const {url, pubkey, eventId}: Props = $props()
 
+  const zapAmounts = [21, 100, 1000, 10000]
   const zapperStore = deriveZapperForPubkey(pubkey)
 
   const back = () => history.back()
@@ -105,7 +105,7 @@
     }
   }
 
-  let amount = $state(zapAmounts.get()[0])
+  let amount = $state(zapAmounts[0])
   let content = $state("⚡️")
   let loading = $state(false)
   let invoice = $state<string>()
@@ -163,7 +163,7 @@
         {/snippet}
       </FieldInline>
       <div class="flex flex-wrap justify-end gap-2">
-        {#each $zapAmounts as preset}
+        {#each zapAmounts as preset}
           <Button
             class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
             onclick={() => selectAmount(preset)}>

src/app/settings.ts

@@ -109,10 +109,6 @@ export const notificationSettings = withGetter(
   }),
 )
 
-export const defaultZapAmounts = [21, 210, 2100, 21000]
-
-export const zapAmounts = withGetter(writable([...defaultZapAmounts]))
-
 export const makeSettings = async (params: Partial<SettingsValues>) => {
   const json = JSON.stringify({...get(userSettingsValues), ...params})
   const content = await signer.get().nip44.encrypt(pubkey.get()!, json)

src/routes/+layout.svelte

@@ -35,7 +35,7 @@
   import {authPolicy, blockPolicy, trustPolicy, mostlyRestrictedPolicy} from "@app/policies"
   import {db, kv, ss} from "@app/storage"
   import {device} from "@app/device"
-  import {getSetting, userSettingsValues, notificationSettings, zapAmounts} from "@app/settings"
+  import {getSetting, userSettingsValues, notificationSettings} from "@app/settings"
   import {DUFFLEPUD_URL, INDEXER_RELAYS, POMADE_SIGNERS} from "@app/env"
   import {pushState} from "@app/push/adapters/common"
   import {syncApplicationData} from "@app/sync"
@@ -200,11 +200,6 @@
         store: notificationSettings,
         storage: kv,
       }),
-      sync({
-        key: "zapAmounts",
-        store: zapAmounts,
-        storage: kv,
-      }),
       sync({
         key: "notificationState",
         store: pushState,

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

@@ -1,17 +1,12 @@
 <script lang="ts">
   import cx from "classnames"
-  import {LOCALE, always, call, removeAt, replaceAt, sleep} from "@welshman/lib"
+  import {LOCALE, always, call, sleep} from "@welshman/lib"
   import {WalletType, displayRelayUrl, isNWCWallet, fromMsats} from "@welshman/util"
   import {session, pubkey, profilesByPubkey} from "@welshman/app"
   import DownloadMinimalistic from "@assets/icons/download-minimalistic.svg?dataurl"
   import UploadMinimalistic from "@assets/icons/upload-minimalistic.svg?dataurl"
-  import Bolt from "@assets/icons/bolt.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
-  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
   import WalletPay from "@app/components/WalletPay.svelte"
   import WalletReceive from "@app/components/WalletReceive.svelte"
   import WalletConnect from "@app/components/WalletConnect.svelte"
@@ -19,10 +14,9 @@
   import WalletUpdateReceivingAddress from "@app/components/WalletUpdateReceivingAddress.svelte"
   import {pushModal} from "@app/modal"
   import {getNwcClient, getWebLn} from "@app/lightning"
-  import {zapAmounts} from "@app/settings"
-  import {pushToast} from "@app/toast"
   import Wallet2 from "@assets/icons/wallet.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
 
@@ -84,52 +78,6 @@
   $effect(() => {
     startWalletStatusCheck($session?.wallet)
   })
-
-  const resetZapAmounts = () => {
-    zapAmountDraft = [...zapAmounts.get()]
-  }
-
-  const addZapAmount = () => {
-    zapAmountDraft = [...zapAmountDraft, zapAmountDraft.at(-1) || 21]
-  }
-
-  const removeZapAmount = (index: number) => {
-    if (zapAmountDraft.length > 1) {
-      zapAmountDraft = removeAt(index, zapAmountDraft)
-    }
-  }
-
-  const onZapAmountInput = (e: Event) => {
-    const target = e.currentTarget as HTMLInputElement
-    const index = Number(target.dataset.index)
-
-    zapAmountDraft = replaceAt(index, Number(target.value), zapAmountDraft)
-  }
-
-  const onZapAmountsSubmit = preventDefault(() => {
-    zapAmountsLoading = true
-
-    try {
-      const amounts = zapAmountDraft.filter(amount => amount > 0)
-
-      if (amounts.length === 0) {
-        return pushToast({
-          theme: "error",
-          message: "Add at least one zap amount greater than zero.",
-        })
-      }
-
-      zapAmounts.set(amounts)
-      zapAmountDraft = [...amounts]
-
-      pushToast({message: "Your zap amounts have been saved!"})
-    } finally {
-      zapAmountsLoading = false
-    }
-  })
-
-  let zapAmountDraft = $state([...zapAmounts.get()])
-  let zapAmountsLoading = $state(false)
 </script>
 
 <div class="content column gap-4">
@@ -258,50 +206,4 @@
       </div>
     {/if}
   </div>
-  <form class="card2 bg-alt flex flex-col gap-6 shadow-md" onsubmit={onZapAmountsSubmit}>
-    <strong class="flex items-center gap-3 text-lg">
-      <Icon icon={Bolt} />
-      Zap Amounts
-    </strong>
-    <p class="text-sm opacity-75">Preset amounts shown when sending a zap.</p>
-    <div class="flex flex-col gap-2">
-      {#each zapAmountDraft as amount, index}
-        <div class="flex items-center gap-2">
-          <Button
-            class="btn btn-ghost btn-sm"
-            type="button"
-            onclick={() => removeZapAmount(index)}
-            disabled={zapAmountDraft.length === 1}>
-            <Icon icon={TrashBin2} />
-          </Button>
-          <label class="input input-bordered flex grow items-center gap-2">
-            <Icon icon={Bolt} />
-            <input
-              type="number"
-              class="grow"
-              min="1"
-              data-index={index}
-              value={amount}
-              oninput={onZapAmountInput} />
-          </label>
-        </div>
-      {/each}
-      <Button class="btn btn-link w-fit px-0" type="button" onclick={addZapAmount}>
-        <Icon icon={AddCircle} size={5} />
-        Add amount
-      </Button>
-    </div>
-    <div class="flex flex-row items-center justify-between gap-4">
-      <Button
-        class="btn btn-neutral"
-        type="button"
-        onclick={resetZapAmounts}
-        disabled={zapAmountsLoading}>
-        Discard Changes
-      </Button>
-      <Button type="submit" class="btn btn-primary" disabled={zapAmountsLoading}>
-        <Spinner loading={zapAmountsLoading}>Save Changes</Spinner>
-      </Button>
-    </div>
-  </form>
 </div>