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 ++++++-
 7 files changed, 48 insertions(+), 62 deletions(-)

(limited to 'src/components')

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