diff options
| -rw-r--r-- | src/components/Amount.svelte | 4 | ||||
| -rw-r--r-- | src/components/Balance.svelte | 5 | ||||
| -rw-r--r-- | src/components/Numpad.svelte | 67 | ||||
| -rw-r--r-- | src/lib/utils.ts | 16 | ||||
| -rw-r--r-- | src/locales/en.json | 4 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/+layout.svelte | 2 | ||||
| -rw-r--r-- | src/routes/(app)/payment/[id]/+page.svelte | 6 | ||||
| -rw-r--r-- | src/routes/(app)/payments/[...page]/+page.svelte | 15 |
8 files changed, 37 insertions, 82 deletions
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte index 46aa2d1b..035152d1 100644 --- a/src/components/Amount.svelte +++ b/src/components/Amount.svelte @@ -11,7 +11,7 @@ > <div class="flex items-center"> <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" - ></iconify-icon>{s(amount)} + ></iconify-icon>{s(amount, locale)} </div> {#if tip} @@ -19,7 +19,7 @@ <div>+</div> <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" ></iconify-icon> - <div>{s(tip)}</div> + <div>{s(tip, locale)}</div> </div> {/if} </h2> diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte index 33597c18..28bd69b3 100644 --- a/src/components/Balance.svelte +++ b/src/components/Balance.svelte @@ -6,6 +6,7 @@ let show = $state(); let { user, rate, balance } = $props(); + let locale = loc(user); let toggleShow = (e) => { e.preventDefault(); e.stopPropagation(); @@ -27,14 +28,14 @@ <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)} + {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, loc(user))} + {f(toFiat(balance, rate), user.currency, locale)} {/if} </div> {/if} diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte index e813a24b..f694679a 100644 --- a/src/components/Numpad.svelte +++ b/src/components/Numpad.svelte @@ -72,65 +72,9 @@ ]; const handleInput = (value) => { - if (selecting) amount = 0; - selecting = false; - - if ($fiat) { - if ( - amountFiat === 0 && - value !== decimal && - value !== "<" && - value !== "0" - ) { - amountFiat = value; - } else if ((amountFiat === 0 || amountFiat === "0") && value === "0") { - return; - } else if (amountFiat === 0 && value === decimal) { - amountFiat = `0${decimal}`; - } else if ( - amountFiat !== 0 && - amountFiat.includes(decimal) && - value === decimal - ) { - return; - } else if (value === "<") { - if (amountFiat !== 0) { - amountFiat = amountFiat.slice(0, amountFiat.length - 1); - if (amountFiat.length === 0) { - amountFiat = 0; - amount = 0; - } - } - } else if ( - value !== decimal && - value !== "<" && - parseInt(amountFiat + value) > rate - ) { - warning($t("user.receive.lessThan1BTCWarning")); - } else if (amountFiat !== 0 && amountFiat.match(/\.../)) { - return; - } else { - amountFiat = amountFiat + value; - } - } else { - if (value === decimal) { - return; - } else if (!amount && value !== "<" && value !== "0") { - amount = parseInt(value); - } else if (value === "<") { - if (amount !== 0) { - amount = Math.floor(amount / 10); - if (amount.length === 0) { - amount = 0; - amountFiat = 0; - } - } - } else if (value !== "<" && parseInt(amount + value) > sats) { - warning($t("user.receive.lessThan1BTCWarning")); - } else { - amount = parseInt(amount.toString() + value); - } - } + if (value === "<") html = html.substr(0, html.length - 1); + else html += value; + input(); }; $: html = $fiat ? amountFiat : s(amount); @@ -196,10 +140,11 @@ if (html.length < prev.length && p === 1 && i > 1) i--; } - let node = e.target.childNodes[0]; + let node = element.childNodes[0]; let range = document.createRange(); if (node) { + if (i > node.length) i = node.length; range.setStart(node, i); range.setEnd(node, i); @@ -280,7 +225,7 @@ {#if $fiat} <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" ></iconify-icon> - {s(amount)} + {s(amount, locale)} {:else} {f(amountFiat, currency, locale)} {/if} diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 60e30fe5..cb18d32c 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -280,16 +280,22 @@ export const loc = (user) => { return map[l]?.[c] || map[c]; }; -export const f = (s: number, currency: string, locale = "en-US") => +export const f = ( + s: number, + currency: string, + locale = "en-US", + minimumFractionDigits = 2, + maximumFractionDigits = 2, +) => new Intl.NumberFormat(locale, { style: "currency", currency, - minimumFractionDigits: 2, - maximumFractionDigits: 2, + minimumFractionDigits, + maximumFractionDigits, }).format(s); -export const s = (s: number): string => - new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(s); +export const s = (s: number, locale = "en-US"): string => + new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(s); export const sat = (s: number): string => `${si(Math.abs(s)).toString()}`; diff --git a/src/locales/en.json b/src/locales/en.json index 10bccaba..282d2f19 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -344,9 +344,9 @@ "enterWalletPass": "Wallet password", "legacyVersion": "Legacy version", "newVersion": "New version", - "income": "Income", + "income": "Received", "subtotal": "Subtotal", - "expenditure": "Expenditure", + "expenditure": "Spent", "spent": "Already spent", "mint": "Mint", "ecash": "Ecash", diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte index 2ce8aa7a..76a0c8f5 100644 --- a/src/routes/(app)/[username]/(profile)/+layout.svelte +++ b/src/routes/(app)/[username]/(profile)/+layout.svelte @@ -292,7 +292,7 @@ <div class="my-auto mr-1">1</div> <img src="/images/bitcoin.svg" class="w-5 my-auto" alt="Bitcoin" /> </div> - <div>= {f(rates[currency], currency, locale)}</div> + <div>= {f(rates[currency], currency, locale, 0, 0)}</div> </div> <div class="text-secondary flex ml-auto"> <div class="flex items-center"> diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte index 85821fee..279b87e7 100644 --- a/src/routes/(app)/payment/[id]/+page.svelte +++ b/src/routes/(app)/payment/[id]/+page.svelte @@ -6,6 +6,7 @@ copy, f, s, + loc, toFiat, post, sats, @@ -23,6 +24,7 @@ let { data } = $props(); let { user, payment: p } = $state(data); let locale = user ? locales[user.language] : locales["en"]; + let userLocale = loc(user); let { id, @@ -79,10 +81,10 @@ <div class="flex gap-2 items-end"> <div class="flex items-center"> <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" - ></iconify-icon>{s(amount)} + ></iconify-icon>{s(amount, userLocale)} </div> <span class="text-secondary text-lg"> - {f(toFiat(amount, rate), currency)} + {f(toFiat(amount, rate), currency, userLocale)} </span> </div> </div> diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte index 91b74d98..5625c8de 100644 --- a/src/routes/(app)/payments/[...page]/+page.svelte +++ b/src/routes/(app)/payments/[...page]/+page.svelte @@ -24,6 +24,7 @@ } = $derived(data); let locale = locales[user.language]; + let userLocale = loc(user); let change = ({ target: { value } }) => goto(value); let link = (p) => { @@ -216,12 +217,12 @@ width="24" class="text-yellow-300" ></iconify-icon> - <div>{s(Math.abs(p.amount))}</div> + <div>{s(Math.abs(p.amount), userLocale)}</div> </div> </div> <div class="text-secondary flex items-center text-base"> - {f(Math.abs(p.amount) * (p.rate / sats), p.currency, loc(user))} + {f(Math.abs(p.amount) * (p.rate / sats), p.currency, userLocale)} {#if p.tip} <span class="text-sm text-secondary"> @@ -311,7 +312,7 @@ <span class="text-base text-secondary"> {#if tipsIn || tipsOut}{$t("payments.tips")}{/if} </span> - <span class="text-base text-secondary">{$t("payments.total")}</span> + <span class="text-base text-secondary text-right">{$t("payments.total")}</span> {@const totalIn = incoming[c]?.fiat || 0} {@const tipsIn = incoming[c]?.fiatTips || 0} @@ -325,15 +326,15 @@ >{$t("payments.income")}</span > <!-- <span><b>{subtotalIn ? f(subtotalIn, c) : "-"}</b></span> --> - <span><b>{tipsIn ? f(tipsIn, c, loc(user)) : "-"}</b></span> - <span><b>{totalIn ? f(totalIn, c, loc(user)) : "-"}</b></span> + <span><b>{tipsIn > 0 ? f(tipsIn, c, userLocale) : "-"}</b></span> + <span class="text-right"><b>{totalIn > 0 ? f(totalIn, c, userLocale) : "-"}</b></span> <span class="text-left text-base text-secondary" >{$t("payments.expenditure")}</span > <!-- <span><b>{subtotalOut ? f(subtotalOut, c) : "-"}</b></span> --> - <span><b>{tipsOut ? f(tipsOut, c, loc(user)) : "-"}</b></span> - <span><b>{totalOut ? f(totalOut, c, loc(user)) : "-"}</b></span> + <span><b>{tipsOut > 0 ? f(tipsOut, c, userLocale) : "-"}</b></span> + <span class="text-right"><b>{totalOut > 0 ? f(totalOut, c, userLocale) : "-"}</b></span> {/each} </div> </div> |