fix: replace zap slider with common amount pills

src/app/components/Zap.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {signer, deriveZapperForPubkey} from "@welshman/app"
   import {load} from "@welshman/net"
@@ -30,31 +31,15 @@
 
   const {url, pubkey, eventId}: Props = $props()
 
-  const minPos = 1
+  const zapAmounts = [21, 100, 1000, 10000]
-  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 +82,9 @@
     }
   }
 
-  let pos = $state(minPos)
+  let amount = $state(zapAmounts[0])
-  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>
 
 <Modal>
@@ -145,12 +118,15 @@
         </div>
       {/snippet}
     </FieldInline>
-    <input
+    <div class="flex flex-wrap justify-end gap-2">
-      class="range range-primary -mt-2"
+      {#each zapAmounts as preset}
-      type="range"
+        <Button
-      min={minPos}
+          class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
-      max={maxPos}
+          onclick={() => selectAmount(preset)}>
-      bind:value={pos} />
+          {preset}
+        </Button>
+      {/each}
+    </div>
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>

src/app/components/ZapInvoice.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {onDestroy} from "svelte"
+  import cx from "classnames"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {signer, deriveZapperForPubkey} from "@welshman/app"
   import {request} from "@welshman/net"
@@ -34,31 +35,15 @@
 
   const {url, pubkey, eventId}: Props = $props()
 
-  const minPos = 1
+  const zapAmounts = [21, 100, 1000, 10000]
-  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 +105,7 @@
     }
   }
 
-  let pos = $state(minPos)
+  let amount = $state(zapAmounts[0])
-  let amount = $state(minVal)
   let content = $state("⚡️")
   let loading = $state(false)
   let invoice = $state<string>()
@@ -130,17 +114,6 @@
   onDestroy(() => {
     paymentController?.abort()
   })
-
-  $effect(() => {
-    amount = posToAmount(pos)
-  })
-
-  $effect(() => {
-    const newPos = amountToPos(amount)
-    if (newPos !== pos) {
-      pos = newPos
-    }
-  })
 </script>
 
 <Modal>
@@ -189,12 +162,15 @@
           </div>
         {/snippet}
       </FieldInline>
-      <input
+      <div class="flex flex-wrap justify-end gap-2">
-        class="range range-primary -mt-2"
+        {#each zapAmounts as preset}
-        type="range"
+          <Button
-        min={minPos}
+            class={cx("btn btn-sm rounded-full", preset === amount ? "btn-primary" : "btn-neutral")}
-        max={maxPos}
+            onclick={() => selectAmount(preset)}>
-        bind:value={pos} />
+            {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}>