fix: replace zap slider with common amount pills #296

2026-06-09T06:01:14Z

userAdityaa commented

2026-06-09 06:01:14 +00:00

Summary

Replaces the log-scale zap amount slider with preset amount pills in both zap modals.

Before: Zap and ZapInvoice modals used a logarithmic range slider (21–1,000,000 sats) synced bidirectionally with a number input via $effect hooks.

After: Common Nostr zap amounts (21, 100, 1,000, 10,000 sats) are shown as selectable pills. The number input remains for custom amounts. Default is still 21 sats.

Closes #295.

### Summary Replaces the log-scale zap amount slider with preset amount pills in both zap modals. **Before:** Zap and ZapInvoice modals used a logarithmic range slider (21–1,000,000 sats) synced bidirectionally with a number input via `$effect` hooks. <img width="583" alt="Screenshot 2026-06-09 at 11.30.53 AM.png" src="attachments/f0145a1b-eb26-470b-b908-6f253dbe61bd"> **After:** Common Nostr zap amounts (21, 100, 1,000, 10,000 sats) are shown as selectable pills. The number input remains for custom amounts. Default is still 21 sats. <img width="665" alt="Screenshot 2026-06-09 at 11.27.02 AM.png" src="attachments/ab65ebb2-042a-4b24-a63d-56674faf1fb4"> Closes #295.

Screenshot 2026-06-09 at 11.27.02 AM.png

170 KiB

Screenshot 2026-06-09 at 11.30.53 AM.png

121 KiB

hodlbod commented

2026-06-09 16:46:35 +00:00

Let's also add custom zap amounts as a setting under "wallet". Default to 21, 210, 2100, 21000, and allow the user to add/remove options.

👍 1

userAdityaa force-pushed 295-zap-amount-pills from cf6380a2a6 to 954df262e7

2026-06-09 19:58:59 +00:00

Compare

userAdityaa commented

2026-06-09 19:59:47 +00:00

ok, added a custom zap amounts as setting under "wallet".

ok, added a custom zap amounts as setting under "wallet". <img width="807" alt="Screenshot 2026-06-10 at 1.28.11 AM.png" src="attachments/88bc25e4-38c0-4b95-9b78-0e54b9bf2839">

Screenshot 2026-06-10 at 1.28.11 AM.png

115 KiB

hodlbod reviewed 2026-06-09 21:03:34 +00:00

src/app/components/ZapInvoice.svelte Outdated

						
				@@ -122,3 +107,2 @@

				  let pos = $state(minPos)

				  let amount = $state(minVal)

				  let amount = $state(zapAmounts.get()[0])

hodlbod commented

2026-06-09 21:00:31 +00:00

first($zapAmounts) ?? 21.

`first($zapAmounts) ?? 21`.

👍 1

src/app/settings.ts Outdated

						
				@@ -111,1 +111,4 @@

				export const defaultZapAmounts = [21, 210, 2100, 21000]

				export const zapAmounts = withGetter(writable([...defaultZapAmounts]))

hodlbod commented

2026-06-09 21:01:32 +00:00

Add this to defaultSettings.

👍 1

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

						
				@@ -81,0 +115,4 @@

				      if (amounts.length === 0) {

				        return pushToast({

				          theme: "error",

				          message: "Add at least one zap amount greater than zero.",

hodlbod commented

2026-06-09 21:03:32 +00:00

Separate this out into length and >0 checks so the message can be tailored to each case.

👍 1

userAdityaa added 1 commit 2026-06-10 07:14:40 +00:00

fix: replace zap slider with common amount pills cf823be669

userAdityaa force-pushed 295-zap-amount-pills from 954df262e7 to cf823be669

2026-06-10 07:14:40 +00:00

Compare

This pull request can be merged automatically.

This branch is out-of-date with the base branch

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u https://gitea.coracle.social/userAdityaa/flotilla 295-zap-amount-pills:userAdityaa-295-zap-amount-pills

git checkout userAdityaa-295-zap-amount-pills

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: coracle/flotilla#296

Allow edits from maintainers