aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/components/Amount.svelte52
-rw-r--r--src/components/Balance.svelte4
-rw-r--r--src/components/InvoiceData.svelte35
-rw-r--r--src/components/LocaleSelector.svelte1
-rw-r--r--src/components/Numpad.svelte3
-rw-r--r--src/components/PasswordInput.svelte5
-rw-r--r--src/components/SetAmount.svelte10
-rw-r--r--src/lib/utils.ts86
-rw-r--r--src/routes/(app)/[username]/(profile)/+layout.svelte1
-rw-r--r--src/routes/(app)/[username]/receive/+page.svelte21
-rw-r--r--src/routes/(app)/invoice/[id]/+page.svelte4
-rw-r--r--src/routes/(app)/payments/[...page]/+page.server.ts23
-rw-r--r--src/routes/(app)/payments/[...page]/+page.svelte40
-rw-r--r--src/routes/(app)/reset/[code]/+page.svelte37
-rw-r--r--src/routes/(app)/send/lightning/[payreq]/+page.svelte3
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">&mdash;</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">