From 380da842ffdb597eebb88f217f89a9268cbfaf6a Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Thu, 28 Nov 2024 08:04:46 -0800
Subject: currency locale

---
 src/components/Amount.svelte                       | 52 +++++++------
 src/components/Balance.svelte                      |  4 +-
 src/components/InvoiceData.svelte                  | 35 +--------
 src/components/LocaleSelector.svelte               |  1 -
 src/components/Numpad.svelte                       |  3 +-
 src/components/PasswordInput.svelte                |  5 +-
 src/components/SetAmount.svelte                    | 10 ++-
 src/lib/utils.ts                                   | 86 ++++++++++++++++++++--
 .../(app)/[username]/(profile)/+layout.svelte      |  1 -
 src/routes/(app)/[username]/receive/+page.svelte   | 21 +++++-
 src/routes/(app)/invoice/[id]/+page.svelte         |  4 +-
 .../(app)/payments/[...page]/+page.server.ts       | 23 ++++--
 src/routes/(app)/payments/[...page]/+page.svelte   | 40 +++++-----
 src/routes/(app)/reset/[code]/+page.svelte         | 37 ++--------
 .../(app)/send/lightning/[payreq]/+page.svelte     |  3 +-
 15 files changed, 195 insertions(+), 130 deletions(-)

(limited to 'src')

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">
-- 
cgit v1.2.3