pass locale around

5 files changed, 29 insertions, 18 deletions

diff --git a/src/components/Success.svelte b/src/components/Success.svelte
index 973e2d35..6cbe990e 100644
--- a/src/components/Success.svelte
+++ b/src/components/Success.svelte
@@ -3,7 +3,7 @@
   import { scale } from "svelte/transition";
   import Amount from "$comp/Amount.svelte";
   import { Confetti } from "svelte-confetti";
-  const { amount, tip, rate, currency, title } = $props();
+  const { amount, tip, rate, currency, locale, title } = $props();
 
   let loaded = $state(false);
   $effect(() => {
@@ -55,5 +55,5 @@
     ></iconify-icon>
   {/if}
   <h1 class="text-3xl md:text-4xl font-bold mb-6">{title}</h1>
-  <Amount {amount} {tip} {rate} {currency} />
+  <Amount {amount} {tip} {rate} {currency} {locale} />
 </div>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 7999030e..5cab71d8 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -3,7 +3,7 @@
 
   import { browser } from "$app/environment";
   import { invoice as inv, request } from "$lib/store";
-  import { copy, focus, f, sat, get, s, sats } from "$lib/utils";
+  import { loc, copy, focus, f, sat, get, s, sats } from "$lib/utils";
   import Icon from "$comp/Icon.svelte";
   import Slider from "$comp/Slider.svelte";
   import { goto } from "$app/navigation";
@@ -76,6 +76,7 @@
     tip,
     user: { username },
   } = $state(invoice);
+  let locale = $derived(loc(user));
 
   let qr;
   let tipPercent = $state((tip / amount) * 100);
@@ -119,14 +120,23 @@
       <div class="flex mb-8 text-lg">
         <div>
           <span class="mr-1">
-            {f(amountFiat, currency)}
-            <span class="font-semibold">+{f(tipAmount, currency)}</span>
+            {f(amountFiat, currency, locale)}
+            <span class="font-semibold">+{f(tipAmount, currency, locale)}</span>
           </span>
         </div>
 
-        <div class="ml-auto text-lg">
-          {sat(amount)}
-          <span class="font-semibold">+{sat(tip)}</span>
+        <div class="ml-auto text-lg flex gap-2">
+          <div class="flex items-center">
+            <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+            ></iconify-icon>
+            <div>{s(amount, locale)}</div>
+          </div>
+
+          <div class="flex items-center">
+            <div class="font-semibold">
+              +{s(tip, locale)}
+            </div>
+          </div>
         </div>
       </div>
 
diff --git a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
index ab96e7c2..b22e3c1f 100644
--- a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
+++ b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
@@ -1,17 +1,16 @@
 <script>
-  import { run } from "svelte/legacy";
-
   import { t } from "$lib/translations";
   import { goto } from "$app/navigation";
   import { enhance } from "$app/forms";
   import Numpad from "$comp/Numpad.svelte";
   import { page } from "$app/stores";
-  import { f, fail, post, s, sat, sats } from "$lib/utils";
+  import { f, loc, fail, post, s, sat, sats } from "$lib/utils";
 
   let { data, form } = $props();
 
   let { subject, rate, user } = $state(data);
   let currency = subject?.currency || "USD";
+  let locale = $derived(loc(subject));
   let next = $state();
 
   let initialAmount = form?.amount || data.amount;
@@ -26,7 +25,7 @@
 {/if}
 
 <div class="container px-4 mt-20 max-w-xl mx-auto space-y-2">
-  <Numpad bind:amount bind:fiat {currency} {rate} submit={next} />
+  <Numpad bind:amount bind:fiat {currency} {locale} {rate} submit={next} />
 
   <form method="POST" use:enhance>
     <input name="amount" value={amount} type="hidden" />
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index d3603d64..5a446dbb 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -12,12 +12,13 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { btc, sat, post, back, f, toFiat, s, sats, focus } from "$lib/utils";
+  import { btc, sat, post, back, f, toFiat, s, sats, focus, loc } from "$lib/utils";
   let { data, form } = $props();
 
   let { invoice, user } = $state(data);
   let { address, hash, payreq, user: recipient, tip } = $state(invoice);
-  let { currency } = $state(user);
+  let { currency } = $derived(user);
+  let locale = $derived(loc(user));
   let { amount } = $state(form || invoice);
 
   let rate = $derived(invoice.rate * (data.rate / data.invoiceRate));
@@ -89,7 +90,7 @@
       {$t("payments.send")}
     </h1>
 
-    <Amount {amount} {tip} {rate} {currency} />
+    <Amount {amount} {tip} {rate} {currency} {locale} />
 
     <h1 class="text-xl text-secondary">
       {$t("payments.to")}
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
index d973d35d..fb6849f0 100644
--- a/src/routes/(app)/sent/[id]/+page.svelte
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -1,15 +1,16 @@
 <script>
-  import { focus } from "$lib/utils";
+  import { loc, focus } from "$lib/utils";
   import { t } from "$lib/translations";
   import Success from "$comp/Success.svelte";
 
   let { data } = $props();
   let { rate, tip, user } = $state(data);
-  let { currency, username } = user;
+  let { currency, username } = $derived(user);
   let amount = $state(Math.abs(data.amount));
+  let locale = $derived(loc(user));
 </script>
 
-<Success {amount} {rate} {tip} {currency} title={`${$t("payments.sent")}!`} />
+<Success {amount} {rate} {tip} {currency} {locale} title={`${$t("payments.sent")}!`} />
 <a href={`/${username}`} use:focus aria-label="Continue">
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>