diff options
| author | Adam Soltys <[email protected]> | 2026-03-12 13:33:17 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-03-12 13:33:17 -0700 |
| commit | 7e0dab611ea6d6a6f764470af9b0c53055e05d74 (patch) | |
| tree | 14e58d2c97443a6751635a26b0f8f53e2900c72c /src | |
| parent | 2e8898d6f5498d3bcc18a42d75db11460ad8d6d5 (diff) | |
| download | coinos-ui-7e0dab611ea6d6a6f764470af9b0c53055e05d74.tar.gz coinos-ui-7e0dab611ea6d6a6f764470af9b0c53055e05d74.zip | |
fee ui
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Amount.svelte | 5 | ||||
| -rw-r--r-- | src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte | 32 |
2 files changed, 21 insertions, 16 deletions
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte index 48ac9f08..cdd4b2e8 100644 --- a/src/components/Amount.svelte +++ b/src/components/Amount.svelte @@ -11,6 +11,7 @@ rate, currency, locked = false, + small = false, }: any = $props(); const canShowFiat = $derived($fiat && rate && currency); @@ -25,7 +26,7 @@ {#if typeof amount !== "undefined"} <div> <h2 - class="text-2xl md:text-3xl font-semibold flex items-end" + class="{small ? 'text-base' : 'text-2xl md:text-3xl'} font-semibold flex items-end" class:justify-center={align !== "left"} > <button @@ -38,7 +39,7 @@ {#if locked} <PhLockFill width="20" class="text-yellow-300" /> {:else} - <PhLightningFill width="20" class="text-yellow-300" /> + <PhLightningFill width={small ? 14 : 20} class="text-yellow-300" /> {/if} {/if} <span class:hidden={!canShowFiat}>{f(toFiat(amount, rate), currency, locale)}</span> diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte index 76c05251..86bad61c 100644 --- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte +++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte @@ -230,42 +230,46 @@ {#if fees} <div class="text-center space-y-2"> {#if !subtract} - <h2 class="text-secondary text-lg">{$t("payments.feeRate")}</h2> + <h2 class="text-secondary text-lg">{$t("payments.networkFee")}</h2> <div class="px-2"> <div class="relative"> <Slider bind:value={sliderValue} handle={handleSlide} min={0} max={100} /> <div class="absolute inset-0 pointer-events-none"> <span - class="absolute top-1/2 -translate-y-1/2 text-sm font-semibold whitespace-nowrap" - style="left: calc({sliderValue}% + 20px)" + class="absolute top-1/2 -translate-y-1/2 text-sm font-semibold whitespace-nowrap {sliderValue >= 50 ? 'text-white dark:text-black' : 'text-black dark:text-white'}" + style={sliderValue >= 50 + ? `right: calc(${100 - sliderValue}% + 28px); text-align: right` + : `left: calc(${sliderValue}% + 28px); text-align: left`} >{feeRate} sat/vB</span> </div> </div> <div class="flex justify-between text-secondary mt-1 px-1"> <span>{$t("payments.slow")}</span> - <span>{$t("payments.medium")}</span> <span>{$t("payments.fast")}</span> </div> </div> {/if} - <h2 class="text-secondary text-lg">{$t("payments.networkFee")}</h2> {#if feeLoading} <Spinner class="text-secondary" /> {:else} - <Amount amount={fee} rate={$rate} {currency} {locale} /> + <div class="flex justify-center gap-6"> + <div class="text-center"> + <Amount amount={fee} rate={$rate} {currency} {locale} /> + <div class="text-sm text-secondary -mt-1">Paid now</div> + </div> + + {#if bumpReserve > 0} + <div class="text-center"> + <Amount amount={bumpReserve} rate={$rate} {currency} {locale} /> + <div class="text-sm text-secondary -mt-1">Refundable reserve</div> + </div> + {/if} + </div> {/if} </div> - {#if bumpReserve > 0} - <div class="text-center"> - <h2 class="text-secondary text-lg">Bump Reserve</h2> - <div class="text-sm text-secondary">Refundable on confirmation</div> - <Amount amount={bumpReserve} rate={$rate} {currency} {locale} /> - </div> - {/if} - {#if ourfee} <div class="text-center"> <h2 class="text-secondary text-lg">{$t("payments.platformFee")}</h2> |