diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Account.svelte | 3 | ||||
| -rw-r--r-- | src/components/Amount.svelte | 10 | ||||
| -rw-r--r-- | src/components/Balance.svelte | 15 | ||||
| -rw-r--r-- | src/components/Numpad.svelte | 5 |
4 files changed, 16 insertions, 17 deletions
diff --git a/src/components/Account.svelte b/src/components/Account.svelte index e075b130..b87a5022 100644 --- a/src/components/Account.svelte +++ b/src/components/Account.svelte @@ -18,9 +18,8 @@ </script> <div - class="block space-y-2 border-primary py-4 cursor-pointer" + class="block space-y-2 border-primary py-4" class:border-b-8={!last} - onclick={go} aria-label="Payments" > <div class="flex"> diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte index 035152d1..7efafca8 100644 --- a/src/components/Amount.svelte +++ b/src/components/Amount.svelte @@ -1,13 +1,14 @@ <script> import { s, f, toFiat } from "$lib/utils"; import { fiat } from "$lib/store"; - const { amount, locale, tip, rate, currency } = $props(); + const { align, amount, locale, tip, rate, currency } = $props(); </script> {#if amount} <div> <h2 - class="text-2xl md:text-3xl font-semibold flex justify-center items-end" + class="text-2xl md:text-3xl font-semibold flex items-end" + class:justify-center={align !== "left"} > <div class="flex items-center"> <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" @@ -23,7 +24,10 @@ </div> {/if} </h2> - <h3 class="flex text-secondary md:text-lg justify-center"> + <h3 + class="flex text-secondary md:text-lg" + class:justify-center={align !== "left"} + > {f(toFiat(amount, rate), currency, locale)} {#if tip} <span class="text-base"> diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte index 28bd69b3..a80664dc 100644 --- a/src/components/Balance.svelte +++ b/src/components/Balance.svelte @@ -1,4 +1,5 @@ <script> + import Amount from "$comp/Amount.svelte"; import Pin from "$comp/Pin.svelte"; import { loc, f, toFiat, s, si, sat, sats } from "$lib/utils"; import { pin } from "$lib/store"; @@ -6,6 +7,7 @@ let show = $state(); let { user, rate, balance } = $props(); + let { currency } = $derived(user); let locale = loc(user); let toggleShow = (e) => { e.preventDefault(); @@ -25,18 +27,7 @@ <div class="my-auto">{$t("user.showBalance")}</div> </button> {:else} - <div class="text-4xl font-bold flex items-center"> - <iconify-icon icon="ph:lightning-fill" width="32" class="text-yellow-300" - ></iconify-icon> - {s(balance, locale)} - </div> - <div class="text-secondary text-xl"> - {#if isNaN(rate)} - <div class="text-gray-200">—</div> - {:else} - {f(toFiat(balance, rate), user.currency, locale)} - {/if} - </div> + <Amount amount={balance} {rate} {currency} {locale} align="left" /> {/if} </div> diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte index 85f4b07f..a0c5260f 100644 --- a/src/components/Numpad.svelte +++ b/src/components/Numpad.svelte @@ -15,6 +15,10 @@ export let amountFiat = 0; + let pasted = async () => { + html = (await navigator.clipboard.readText()).replace(/,/g, ""); + }; + function getCurrencyInfo(locale = "en-US", currency) { const formatter = new Intl.NumberFormat(locale, { style: "currency", @@ -207,6 +211,7 @@ use:focus contenteditable bind:innerHTML={html} + on:paste={pasted} on:focus={select} on:blur={blur} on:input={input} |