coracle/flotilla
1
3
Fork 9
Code Issues 34 Pull Requests 1 Actions Packages Projects 5 Releases Wiki 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 cf823be669
4 changed files with 142 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Zap.svelte
+17 -40
View File
@@ -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}>
src/app/components/ZapInvoice.svelte
+17 -40
View File
@@ -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}>
src/app/settings.ts
+4
View File
@@ -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
src/routes/settings/wallet/+page.svelte
+104 -2
View File
@@ -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>