number formatting

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">&mdash;</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>&#61; {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>