userAdityaa/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

fix: replace zap slider with common amount pills

Browse Source
This commit is contained in:
Aditya Chaudhary
2026-06-09 11:29:18 +05:30
parent 926b31de78
commit cf6380a2a6
2 changed files with 32 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Zap.svelte
+16 -40
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import cx from "classnames"
import type {NativeEmoji} from "emoji-picker-element/shared" import type {NativeEmoji} from "emoji-picker-element/shared"
import {signer, deriveZapperForPubkey} from "@welshman/app" import {signer, deriveZapperForPubkey} from "@welshman/app"
import {load} from "@welshman/net" import {load} from "@welshman/net"
@@ -30,31 +31,15 @@
const {url, pubkey, eventId}: Props = $props() 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 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 back = () => history.back()
const selectAmount = (preset: number) => {
amount = preset
}
const onEmoji = (emoji: NativeEmoji) => { const onEmoji = (emoji: NativeEmoji) => {
content = emoji.unicode content = emoji.unicode
} }
@@ -97,21 +82,9 @@
} }
} }
let pos = $state(minPos) let amount = $state(zapAmounts[0])
let amount = $state(minVal)
let content = $state("⚡️") let content = $state("⚡️")
let loading = $state(false) let loading = $state(false)
$effect(() => {
amount = posToAmount(pos)
})
$effect(() => {
const newPos = amountToPos(amount)
if (newPos !== pos) {
pos = newPos
}
})
</script> </script>
<Modal> <Modal>
@@ -145,12 +118,15 @@
</div> </div>
{/snippet} {/snippet}
</FieldInline> </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> </ModalBody>
<ModalFooter> <ModalFooter>
<Button class="btn btn-link" onclick={back}> <Button class="btn btn-link" onclick={back}>
src/app/components/ZapInvoice.svelte
+16 -40
View File
@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import {onDestroy} from "svelte" import {onDestroy} from "svelte"
import cx from "classnames"
import type {NativeEmoji} from "emoji-picker-element/shared" import type {NativeEmoji} from "emoji-picker-element/shared"
import {signer, deriveZapperForPubkey} from "@welshman/app" import {signer, deriveZapperForPubkey} from "@welshman/app"
import {request} from "@welshman/net" import {request} from "@welshman/net"
@@ -34,31 +35,15 @@
const {url, pubkey, eventId}: Props = $props() 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 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 back = () => history.back()
const selectAmount = (preset: number) => {
amount = preset
}
const onEmoji = (emoji: NativeEmoji) => { const onEmoji = (emoji: NativeEmoji) => {
content = emoji.unicode content = emoji.unicode
} }
@@ -120,8 +105,7 @@
} }
} }
let pos = $state(minPos) let amount = $state(zapAmounts[0])
let amount = $state(minVal)
let content = $state("⚡️") let content = $state("⚡️")
let loading = $state(false) let loading = $state(false)
let invoice = $state<string>() let invoice = $state<string>()
@@ -130,17 +114,6 @@
onDestroy(() => { onDestroy(() => {
paymentController?.abort() paymentController?.abort()
}) })
$effect(() => {
amount = posToAmount(pos)
})
$effect(() => {
const newPos = amountToPos(amount)
if (newPos !== pos) {
pos = newPos
}
})
</script> </script>
<Modal> <Modal>
@@ -189,12 +162,15 @@
</div> </div>
{/snippet} {/snippet}
</FieldInline> </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"> <p class="card2 card-sm bg-alt text-center flex justify-between items-center">
Want to zap directly? Want to zap directly?
<Button class="btn btn-neutral btn-sm" onclick={connectWallet}> <Button class="btn btn-neutral btn-sm" onclick={connectWallet}>