fix: replace zap slider with common amount pills (#296)

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>
2026-06-10 20:00:59 +00:00
parent 7bfbb17479
commit 2e8304e851
4 changed files with 142 additions and 82 deletions
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import cx from "classnames"
+  import {first} from "@welshman/lib"
  import type {NativeEmoji} from "emoji-picker-element/shared"
  import {signer, deriveZapperForPubkey} from "@welshman/app"
  import {load} from "@welshman/net"
@@ -20,6 +22,7 @@
  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 = {
@@ -30,31 +33,14 @@

  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 selectAmount = (preset: number) => {
+    amount = preset
+  }
+
  const onEmoji = (emoji: NativeEmoji) => {
    content = emoji.unicode
  }
@@ -97,21 +83,9 @@
    }
  }

-  let pos = $state(minPos)
-  let amount = $state(minVal)
+  let amount = $state<number>(first($zapAmounts) ?? 21)
  let content = $state("⚡️")
  let loading = $state(false)
-
-  $effect(() => {
-    amount = posToAmount(pos)
-  })
-
-  $effect(() => {
-    const newPos = amountToPos(amount)
-    if (newPos !== pos) {
-      pos = newPos
-    }
-  })
 </script>

 <Modal>
@@ -145,12 +119,15 @@
        </div>
      {/snippet}
    </FieldInline>
-    <input
-      class="range range-primary -mt-2"
-      type="range"
-      min={minPos}
-      max={maxPos}
-      bind:value={pos} />
+    <div class="flex flex-wrap justify-end gap-2">
+      {#each $zapAmounts as preset}
+        <Button
+          class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
+          onclick={() => selectAmount(preset)}>
+          {preset}
+        </Button>
+      {/each}
+    </div>
  </ModalBody>
  <ModalFooter>
    <Button class="btn btn-link" onclick={back}>
@@ -1,5 +1,7 @@
 <script lang="ts">
  import {onDestroy} from "svelte"
+  import cx from "classnames"
+  import {first} from "@welshman/lib"
  import type {NativeEmoji} from "emoji-picker-element/shared"
  import {signer, deriveZapperForPubkey} from "@welshman/app"
  import {request} from "@welshman/net"
@@ -24,6 +26,7 @@
  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 = {
@@ -34,31 +37,14 @@

  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 selectAmount = (preset: number) => {
+    amount = preset
+  }
+
  const onEmoji = (emoji: NativeEmoji) => {
    content = emoji.unicode
  }
@@ -120,8 +106,7 @@
    }
  }

-  let pos = $state(minPos)
-  let amount = $state(minVal)
+  let amount = $state<number>(first($zapAmounts) ?? 21)
  let content = $state("⚡️")
  let loading = $state(false)
  let invoice = $state<string>()
@@ -130,17 +115,6 @@
  onDestroy(() => {
    paymentController?.abort()
  })
-
-  $effect(() => {
-    amount = posToAmount(pos)
-  })
-
-  $effect(() => {
-    const newPos = amountToPos(amount)
-    if (newPos !== pos) {
-      pos = newPos
-    }
-  })
 </script>

 <Modal>
@@ -189,12 +163,15 @@
          </div>
        {/snippet}
      </FieldInline>
-      <input
-        class="range range-primary -mt-2"
-        type="range"
-        min={minPos}
-        max={maxPos}
-        bind:value={pos} />
+      <div class="flex flex-wrap justify-end gap-2">
+        {#each $zapAmounts as preset}
+          <Button
+            class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
+            onclick={() => selectAmount(preset)}>
+            {preset}
+          </Button>
+        {/each}
+      </div>
      <p class="card2 card-sm bg-alt text-center flex justify-between items-center">
        Want to zap directly?
        <Button class="btn btn-neutral btn-sm" onclick={connectWallet}>
@@ -37,6 +37,7 @@ export type SettingsValues = {
  send_delay: number
  font_size: number
  alerts: SpaceNotificationSettings[]
+  zap_amounts: number[]
 }

 export type Settings = {
@@ -54,6 +55,7 @@ export const defaultSettings: SettingsValues = {
  send_delay: 0,
  font_size: 1.1,
  alerts: [],
+  zap_amounts: [21, 210, 2100, 21000],
 }

 export const settingsByPubkey = deriveItemsByKey({
@@ -80,6 +82,8 @@ export const loadUserSettings = makeUserLoader(loadSettings)

 export const userSettingsValues = derived(userSettings, $s => $s?.values || defaultSettings)

+export const zapAmounts = derived(userSettingsValues, $settings => $settings.zap_amounts)
+
 export const getSettings = getter(userSettingsValues)

 export const getSetting = <T>(key: keyof Settings["values"]) => getSettings()[key] as T
@@ -1,12 +1,17 @@
 <script lang="ts">
  import cx from "classnames"
-  import {LOCALE, always, call, sleep} from "@welshman/lib"
+  import {LOCALE, always, call, removeAt, replaceAt, 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"
@@ -14,9 +19,10 @@
  import WalletUpdateReceivingAddress from "@app/components/WalletUpdateReceivingAddress.svelte"
  import {pushModal} from "@app/modal"
  import {getNwcClient, getWebLn} from "@app/lightning"
+  import {userSettingsValues, publishSettings} 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"

@@ -78,6 +84,56 @@
  $effect(() => {
    startWalletStatusCheck($session?.wallet)
  })
+
+  const resetZapAmounts = () => {
+    zapAmountDraft = [...$userSettingsValues.zap_amounts]
+  }
+
+  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(async () => {
+    zapAmountsLoading = true
+
+    try {
+      if (zapAmountDraft.length === 0) {
+        return pushToast({
+          theme: "error",
+          message: "Add at least one zap amount.",
+        })
+      }
+
+      if (zapAmountDraft.some(amount => amount <= 0)) {
+        return pushToast({
+          theme: "error",
+          message: "Zap amounts must be greater than zero.",
+        })
+      }
+
+      await publishSettings({zap_amounts: zapAmountDraft})
+
+      pushToast({message: "Your zap amounts have been saved!"})
+    } finally {
+      zapAmountsLoading = false
+    }
+  })
+
+  let zapAmountDraft = $state([...$userSettingsValues.zap_amounts])
+  let zapAmountsLoading = $state(false)
 </script>

 <div class="content column gap-4">
@@ -206,4 +262,50 @@
      </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>