diff options
| -rw-r--r-- | src/components/Amount.svelte | 52 | ||||
| -rw-r--r-- | src/components/Balance.svelte | 4 | ||||
| -rw-r--r-- | src/components/InvoiceData.svelte | 35 | ||||
| -rw-r--r-- | src/components/LocaleSelector.svelte | 1 | ||||
| -rw-r--r-- | src/components/Numpad.svelte | 3 | ||||
| -rw-r--r-- | src/components/PasswordInput.svelte | 5 | ||||
| -rw-r--r-- | src/components/SetAmount.svelte | 10 | ||||
| -rw-r--r-- | src/lib/utils.ts | 86 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/+layout.svelte | 1 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/receive/+page.svelte | 21 | ||||
| -rw-r--r-- | src/routes/(app)/invoice/[id]/+page.svelte | 4 | ||||
| -rw-r--r-- | src/routes/(app)/payments/[...page]/+page.server.ts | 23 | ||||
| -rw-r--r-- | src/routes/(app)/payments/[...page]/+page.svelte | 40 | ||||
| -rw-r--r-- | src/routes/(app)/reset/[code]/+page.svelte | 37 | ||||
| -rw-r--r-- | src/routes/(app)/send/lightning/[payreq]/+page.svelte | 3 |
15 files changed, 195 insertions, 130 deletions
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte index de432400..46aa2d1b 100644 --- a/src/components/Amount.svelte +++ b/src/components/Amount.svelte @@ -1,31 +1,35 @@ <script> import { s, f, toFiat } from "$lib/utils"; import { fiat } from "$lib/store"; - const { amount, tip, rate, currency } = $props(); + const { amount, locale, tip, rate, currency } = $props(); </script> -<div> - <h2 class="text-2xl md:text-3xl font-semibold flex justify-center items-end"> - <div class="flex items-center"> - <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" - ></iconify-icon>{s(amount)} - </div> - - {#if tip} - <div class="flex items-center text-lg ml-2"> - <div>+</div> +{#if amount} + <div> + <h2 + class="text-2xl md:text-3xl font-semibold flex justify-center items-end" + > + <div class="flex items-center"> <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" - ></iconify-icon> - <div>{s(tip)}</div> + ></iconify-icon>{s(amount)} </div> - {/if} - </h2> - <h3 class="text-secondary md:text-lg"> - {f(toFiat(amount, rate), currency)} - {#if tip} - <span class="text-base"> - + {f(toFiat(tip, rate), currency)} - </span> - {/if} - </h3> -</div> + + {#if tip} + <div class="flex items-center text-lg ml-2"> + <div>+</div> + <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" + ></iconify-icon> + <div>{s(tip)}</div> + </div> + {/if} + </h2> + <h3 class="flex text-secondary md:text-lg justify-center"> + {f(toFiat(amount, rate), currency, locale)} + {#if tip} + <span class="text-base"> + + {f(toFiat(tip, rate), currency, locale)} + </span> + {/if} + </h3> + </div> +{/if} diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte index 3451a9af..33597c18 100644 --- a/src/components/Balance.svelte +++ b/src/components/Balance.svelte @@ -1,6 +1,6 @@ <script> import Pin from "$comp/Pin.svelte"; - import { f, toFiat, s, si, sat, sats } from "$lib/utils"; + import { loc, f, toFiat, s, si, sat, sats } from "$lib/utils"; import { pin } from "$lib/store"; import { t } from "$lib/translations"; @@ -34,7 +34,7 @@ {#if isNaN(rate)} <div class="text-gray-200">—</div> {:else} - {f(toFiat(balance, rate), user.currency)} + {f(toFiat(balance, rate), user.currency, loc(user))} {/if} </div> {/if} diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte index b511c599..de93c08e 100644 --- a/src/components/InvoiceData.svelte +++ b/src/components/InvoiceData.svelte @@ -1,4 +1,6 @@ <script> + import Amount from "$comp/Amount.svelte"; + import { btc, f, sat, s, sats } from "$lib/utils"; let { showQr, @@ -9,6 +11,7 @@ amount, amountFiat, currency, + locale, tip, rate, } = $props(); @@ -47,34 +50,4 @@ </div> {/each} -{#if amount > 0} - <div class="text-center font-bold text-2xl"> - <div class="flex justify-center items-end gap-2"> - <div>{f(amountFiat, currency)}</div> - - {#if tip} - <div class="text-base flex items-center gap-1"> - <div>+</div> - <div>{f(tip * (rate / sats), currency)}</div> - </div> - {/if} - </div> - <div class="flex justify-center items-end text-secondary font-normal text-xl gap-2"> - <div class="flex items-center"> - <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" - ></iconify-icon> - <div> - {`${s(amount)}`} - </div> - </div> - {#if tip} - <div class="text-base flex items-center"> - <div>+</div> - <iconify-icon icon="ph:lightning-fill" class="text-yellow-300" - ></iconify-icon> - <div>{s(tip)}</div> - </div> - {/if} - </div> - </div> -{/if} +<Amount {amount} {currency} {rate} {locale} /> diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte index e5d1fdec..b3930829 100644 --- a/src/components/LocaleSelector.svelte +++ b/src/components/LocaleSelector.svelte @@ -8,7 +8,6 @@ const handleChange = ({ currentTarget }) => { const { value } = currentTarget; document.cookie = `lang=${value}; path=/`; - console.log("settinglocale", value); $locale = value; l = value; }; diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte index 7cda6a4f..7cad585d 100644 --- a/src/components/Numpad.svelte +++ b/src/components/Numpad.svelte @@ -10,6 +10,7 @@ currency, element, rate, + locale, submit = undefined; export let amountFiat = 0; @@ -229,7 +230,7 @@ ></iconify-icon> {s(amount)} {:else} - {f(amountFiat, currency)} {currency} + {f(amountFiat, currency, locale)} {/if} </div> </div> diff --git a/src/components/PasswordInput.svelte b/src/components/PasswordInput.svelte index eb5b0d6c..483b473d 100644 --- a/src/components/PasswordInput.svelte +++ b/src/components/PasswordInput.svelte @@ -1,5 +1,6 @@ <script> let { + name = $bindable("password"), show = $bindable(), value = $bindable(), focus = () => {}, @@ -14,10 +15,10 @@ class="input flex items-center justify-center gap-2 w-full" > {#if show} - <input name="password" type="text" bind:value class="clean" {placeholder} /> + <input {name} type="text" bind:value class="clean" {placeholder} /> {:else} <input - name="password" + {name} type="password" bind:value class="clean" diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte index 5b703896..ddf90a17 100644 --- a/src/components/SetAmount.svelte +++ b/src/components/SetAmount.svelte @@ -6,6 +6,7 @@ let { currency = $bindable(), fiat = $bindable(), + locale = $bindable(), rate = $bindable(), submit = $bindable(), settingAmount, @@ -24,7 +25,14 @@ class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5" > <form onsubmit={setAmount} class="space-y-5"> - <Numpad bind:amount={newAmount} bind:fiat {currency} {rate} {submit} /> + <Numpad + bind:amount={newAmount} + bind:fiat + {currency} + {rate} + {submit} + {locale} + /> <div class="w-full flex flex-wrap gap-2"> <button bind:this={submit} diff --git a/src/lib/utils.ts b/src/lib/utils.ts index dc7182e3..641cec31 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -200,15 +200,89 @@ export const fd = async (req: Request): Promise<any> => { return obj; }; -export const f = (s: number, currency: string): string => - new Intl.NumberFormat("en-US", { +const map = { + en: { + CAD: "en-CA", + USD: "en-US", + GBP: "en-GB", + AUD: "en-AU", + EUR: "en-IE", // Eurozone English (Ireland) + NZD: "en-NZ", + JPY: "en-JP", // English in Japan + INR: "en-IN", // English in India + ZAR: "en-ZA", // South Africa + }, + fr: { + CAD: "fr-CA", // French Canada + EUR: "fr-FR", // France + CHF: "fr-CH", // French Switzerland + XOF: "fr-SN", // Francophone West Africa + }, + de: { + EUR: "de-DE", // Germany + CHF: "de-CH", // German Switzerland + USD: "de-US", // German for the US + }, + es: { + EUR: "es-ES", // Spain + USD: "es-US", // Spanish for the US + MXN: "es-MX", // Mexico + ARS: "es-AR", // Argentina + CLP: "es-CL", // Chile + }, + pt: { + EUR: "pt-PT", // Portugal + BRL: "pt-BR", // Brazil + }, + zh: { + CNY: "zh-CN", // Simplified Chinese (Mainland China) + HKD: "zh-HK", // Traditional Chinese (Hong Kong) + TWD: "zh-TW", // Traditional Chinese (Taiwan) + USD: "zh-US", // Chinese for the US + }, + ja: { + JPY: "ja-JP", // Japan + USD: "ja-US", // Japanese for the US + }, + ru: { + RUB: "ru-RU", // Russia + USD: "ru-US", // Russian for the US + }, + el: { + EUR: "el-GR", // Greece + }, + fa: { + IRR: "fa-IR", // Iran + }, + // Global currency mappings (fallbacks) + CAD: "en-CA", + USD: "en-US", + GBP: "en-GB", + AUD: "en-AU", + EUR: "en-IE", + NZD: "en-NZ", + JPY: "ja-JP", + INR: "en-IN", + ZAR: "en-ZA", + CHF: "de-CH", + MXN: "es-MX", + BRL: "pt-BR", + CNY: "zh-CN", + HKD: "zh-HK", + TWD: "zh-TW", + RUB: "ru-RU", + IRR: "fa-IR", +}; + +export const loc = ({ currency: c, language: l }) => map[l]?.[c] || map[c]; + +export const f = (s: number, currency: string, locale = "en-US") => + new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 2, - }) - .format(s) - .replace("CA", ""); + }).format(s); export const s = (s: number): string => new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(s); @@ -367,3 +441,5 @@ export const versions = { public: 0x043587cf, }, }[PUBLIC_COINOS_NETWORK]; + +export const str = (s) => s.toString(); diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte index f6a9edae..55ea9f2d 100644 --- a/src/routes/(app)/[username]/(profile)/+layout.svelte +++ b/src/routes/(app)/[username]/(profile)/+layout.svelte @@ -288,7 +288,6 @@ ></iconify-icon> {s((1 * sats) / rates[currency])} = {f(1, currency)} - {currency} </div> </div> </div> diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte index 89f3a1f3..e8092c11 100644 --- a/src/routes/(app)/[username]/receive/+page.svelte +++ b/src/routes/(app)/[username]/receive/+page.svelte @@ -1,6 +1,17 @@ <script> import { run } from "svelte/legacy"; - import { btc, post, copy, f, get, types, sat, s, sats } from "$lib/utils"; + import { + btc, + loc, + post, + copy, + f, + get, + types, + sat, + s, + sats, + } from "$lib/utils"; import { tick, onMount, onDestroy } from "svelte"; import { browser } from "$app/environment"; import { last, showQr, amountPrompt } from "$lib/store"; @@ -18,6 +29,7 @@ let { id, rates, subject, user, text } = $state(data); let { src } = $derived(data); + let locale = loc(user); let { currency, username } = subject; let rate = rates[currency]; @@ -48,7 +60,10 @@ user: { username, currency }, })); - goto(`/invoice/${id}?options=true`, { invalidateAll: true, noScroll: true }); + goto(`/invoice/${id}?options=true`, { + invalidateAll: true, + noScroll: true, + }); } }; @@ -95,6 +110,7 @@ <div class="invoice container mx-auto max-w-xl px-4 space-y-2"> <InvoiceData {src} + {locale} {link} {qr} {txt} @@ -127,6 +143,7 @@ bind:newAmount bind:fiat {currency} + locale={loc(user)} {rate} {submit} {settingAmount} diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte index 3b7b33ef..b66e394a 100644 --- a/src/routes/(app)/invoice/[id]/+page.svelte +++ b/src/routes/(app)/invoice/[id]/+page.svelte @@ -2,7 +2,7 @@ import { untrack } from "svelte"; import { enhance } from "$app/forms"; import { send } from "$lib/socket"; - import { btc, post, copy, f, get, types, sat, s, sats } from "$lib/utils"; + import { btc, loc, post, copy, f, get, types, sat, s, sats } from "$lib/utils"; import { tick, onMount, onDestroy } from "svelte"; import { browser } from "$app/environment"; import { last, showQr, amountPrompt } from "$lib/store"; @@ -29,6 +29,7 @@ let { invoice, src } = $derived(data); let { aid, amount, rate, tip, hash, text, type } = $derived(invoice); let { username, currency } = $derived(invoice.user); + let locale = loc(user); let tipPercent = $derived(tip ? (tip / amount) * 100 : 0); @@ -119,6 +120,7 @@ {amount} {amountFiat} {currency} + {locale} {tip} {rate} showQr={$showQr} diff --git a/src/routes/(app)/payments/[...page]/+page.server.ts b/src/routes/(app)/payments/[...page]/+page.server.ts index 05ed2d64..6b9f47e2 100644 --- a/src/routes/(app)/payments/[...page]/+page.server.ts +++ b/src/routes/(app)/payments/[...page]/+page.server.ts @@ -1,6 +1,6 @@ -import { auth, get } from "$lib/utils"; +import { auth, get, str } from "$lib/utils"; -const limit = 25; +const limit = 5; export async function load({ cookies, depends, params }) { depends("app:payments"); @@ -17,15 +17,22 @@ export async function load({ cookies, depends, params }) { if (!parseInt(page)) page = 1; const offset = (page - 1) * limit; - if (!start) start = Date.now() / 1000 - 24 * 60 * 60; - let url = `/payments?aid=${aid}&start=${ - start * 1000 - }&limit=${limit}&offset=${offset}`; - if (end) url += `&end=${end * 1000}`; + const q = new URLSearchParams(); + q.set("limit", str(limit)); + q.set("offset", str(offset)); + if (aid) q.set("aid", aid); + if (start) q.set("start", str(start * 1000)); + if (end) q.set("end", str(end * 1000)); - const { count, payments, incoming, outgoing } = await get(url, auth(cookies)); + const { count, payments, incoming, outgoing } = await get( + `/payments?${str(q)}`, + auth(cookies), + ); + + console.log("payments", payments.length); const pages = new Array(Math.ceil(count / limit)); + console.log("pages", pages); return { payments, page, pages, start, end, incoming, outgoing }; } diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte index 146a286d..529c8c63 100644 --- a/src/routes/(app)/payments/[...page]/+page.svelte +++ b/src/routes/(app)/payments/[...page]/+page.svelte @@ -5,14 +5,23 @@ import { format } from "date-fns"; import { newPayment } from "$lib/store"; import { t } from "$lib/translations"; - import { get, f, s, si, sat, sats, types } from "$lib/utils"; + import { get, f, s, si, sat, loc, sats, types } from "$lib/utils"; import { page } from "$app/stores"; import { differenceInDays, getUnixTime, sub } from "date-fns"; import { goto, invalidate } from "$app/navigation"; import locales from "$lib/locales"; let { data } = $props(); - let { start, end, user, rates, payments, incoming, outgoing } = - $derived(data); + let { + start, + end, + user, + rates, + payments, + incoming, + outgoing, + pages, + page: p, + } = $derived(data); let locale = locales[user.language]; @@ -55,9 +64,6 @@ : 0, ); - let p = $state(), - pages = $state([]); - $effect(() => { if ($newPayment) { $newPayment = false; @@ -135,7 +141,8 @@ } }; - let showPage = $derived((i) => { + let showPage = (i) => { + console.log("SHOW", i); const currentPage = parseInt(p); const maxVisiblePages = 10; @@ -153,13 +160,10 @@ } return i >= start && i <= end; - }); + }; - let isEllipsis = $derived((i) => { - return ( - (i === 1 && !showPage(i)) || (i === pages.length - 2 && !showPage(i)) - ); - }); + let isEllipsis = (i) => + (i === 1 && !showPage(i)) || (i === pages.length - 2 && !showPage(i)); </script> <div class="space-y-5"> @@ -218,7 +222,7 @@ </div> <div class="text-secondary flex items-center text-base"> - {f(Math.abs(p.amount) * (p.rate / sats), p.currency)} + {f(Math.abs(p.amount) * (p.rate / sats), p.currency, loc(user))} {#if p.tip} <span class="text-sm text-secondary"> @@ -322,15 +326,15 @@ >{$t("payments.income")}</span > <!-- <span><b>{subtotalIn ? f(subtotalIn, c) : "-"}</b></span> --> - <span><b>{tipsIn ? f(tipsIn, c) : "-"}</b></span> - <span><b>{totalIn ? f(totalIn, c) : "-"}</b></span> + <span><b>{tipsIn ? f(tipsIn, c, loc(user)) : "-"}</b></span> + <span><b>{totalIn ? f(totalIn, c, loc(user)) : "-"}</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) : "-"}</b></span> - <span><b>{totalOut ? f(totalOut, c) : "-"}</b></span> + <span><b>{tipsOut ? f(tipsOut, c, loc(user)) : "-"}</b></span> + <span><b>{totalOut ? f(totalOut, c, loc(user)) : "-"}</b></span> {/each} </div> </div> diff --git a/src/routes/(app)/reset/[code]/+page.svelte b/src/routes/(app)/reset/[code]/+page.svelte index 144c73a9..df9d1144 100644 --- a/src/routes/(app)/reset/[code]/+page.svelte +++ b/src/routes/(app)/reset/[code]/+page.svelte @@ -1,5 +1,6 @@ <script> import { t } from "$lib/translations"; + import PasswordInput from "$comp/PasswordInput.svelte"; import Icon from "$comp/Icon.svelte"; import Spinner from "$comp/Spinner.svelte"; import { fly } from "svelte/transition"; @@ -8,7 +9,6 @@ let { form } = $props(); let email; let loading; - let revealPassword = $state(); </script> <div class="pt-10"> @@ -31,37 +31,10 @@ {/if} <form class="space-y-5" method="POST"> - <div class="relative"> - <label for="password" class="block font-semibold" - >{$t("login.newPassword")}</label - > - {#if revealPassword} - <input - name="password" - type="text" - required - class="bg-primary" - bind:value={$password} - autocapitalize="none" - /> - {:else} - <input - name="password" - type="password" - required - class="bg-primary" - bind:value={$password} - autocapitalize="none" - /> - {/if} - <button - type="button" - onclick={() => (revealPassword = !revealPassword)} - class="absolute right-5 top-10" - > - <Icon icon={revealPassword ? "eye" : "eye-off"} /> - </button> - </div> + <PasswordInput + bind:value={$password} + placeholder={$t("login.password")} + /> <div class="text-secondary"> A new seed phrase will be generated for your account. You'll need to diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte index 2d981326..a4474fe0 100644 --- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte +++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte @@ -1,4 +1,5 @@ <script> + import { untrack } from "svelte"; import { t } from "$lib/translations"; import { enhance } from "$app/forms"; import Amount from "$comp/Amount.svelte"; @@ -30,7 +31,7 @@ let next = $state(); let toggle = () => (show = !show); let amount = $derived(form?.amount || data.amount); - let maxfee = $state(Math.max(5, Math.round(amount * 0.005))); + let maxfee = $state(Math.max(5, Math.round(untrack(amount) * 0.005))); </script> <div class="container px-4 max-w-xl mx-auto text-center space-y-2"> |
