amount component

9 files changed, 36 insertions, 64 deletions

diff --git a/src/routes/(app)/fund/[id]/sweep/+page.svelte b/src/routes/(app)/fund/[id]/sweep/+page.svelte
index a34a8610..cd89f6ae 100644
--- a/src/routes/(app)/fund/[id]/sweep/+page.svelte
+++ b/src/routes/(app)/fund/[id]/sweep/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { scale } from "svelte/transition";
-  import { fiat, f, s } from "$lib/utils";
+  import { toFiat, f, s } from "$lib/utils";
   import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
 
@@ -25,7 +25,7 @@
     {$t("payments.fundsClaimed")}
   </h1>
   <h2 class="text-2xl md:text-3xl font-semibold">
-    {f(fiat(amount, rate), currency)}
+    {f(toFiat(amount, rate), currency)}
   </h2>
   <h3 class="text-secondary md:text-lg mb-6 mt-1">
     ⚡️{s(amount)}
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 54e71071..15dc97ae 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -28,9 +28,8 @@
 
   let { id, subject, user } = $state(data);
   let { invoice, src } = $derived(data);
-  let { hash, text } = $derived(invoice);
-  let { aid, amount, type, rate, tip } = $state(invoice);
-  let { username, currency } = invoice.user;
+  let { aid, amount, rate, tip, hash, text, type } = $derived(invoice);
+  let { username, currency } = $derived(invoice.user);
 
   let tipPercent = $derived(tip ? (tip / amount) * 100 : 0);
 
@@ -69,7 +68,6 @@
   let setAmount = $state(async () => {
     if (typeof $amountPrompt === "undefined") $amountPrompt = true;
     settingAmount = false;
-    amount = newAmount;
     invoice.amount = newAmount;
     invoice.tip = 0;
     ({ id } = await post(`/invoice`, {
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 1bbba082..d6cfaa46 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -1,15 +1,22 @@
 <script>
-  import { run } from 'svelte/legacy';
+  import { run } from "svelte/legacy";
 
   import { scale } from "svelte/transition";
   import Icon from "$comp/Icon.svelte";
   import { toast } from "@zerodevx/svelte-toast";
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
-  import { fiat, f, s, sat, sats } from "$lib/utils";
+  import { toFiat, f, s, sat, sats } from "$lib/utils";
 
   let { data } = $props();
-  let amount, currency = $state(), rate = $state(), received = $state(), pending = $state(), tip = $state(), user = $state(), id;
+  let amount,
+    currency = $state(),
+    rate = $state(),
+    received = $state(),
+    pending = $state(),
+    tip = $state(),
+    user = $state(),
+    id;
   let update = (data) => {
     ({ amount, currency, rate, received, pending, tip, user, id } =
       data.invoice);
@@ -35,10 +42,10 @@
     </h1>
 
     <h2 class="text-2xl md:text-3xl font-semibold">
-      {f(fiat(received - tip, rate), currency)}
+      {f(toFiat(received - tip, rate), currency)}
       {#if tip}
         <span class="text-lg">
-          + {f(fiat(tip, rate), currency)}
+          + {f(toFiat(tip, rate), currency)}
         </span>
       {/if}
     </h2>
@@ -63,9 +70,9 @@
 
     <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
     <h2 class="text-2xl md:text-3xl font-semibold">
-      {f(fiat(pending - tip, rate), currency)}
+      {f(toFiat(pending - tip, rate), currency)}
       {#if tip}
-        + {f(fiat(tip, rate), currency)}
+        + {f(toFiat(tip, rate), currency)}
       {/if}
     </h2>
 
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 498a3f2e..45dc8642 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -8,7 +8,7 @@
     copy,
     f,
     s,
-    fiat,
+    toFiat,
     post,
     sats,
     fail,
@@ -114,7 +114,7 @@
         ></iconify-icon>{amount}
       </div>
       <span class="text-secondary text-lg">
-        {f(fiat(amount, rate), currency)}
+        {f(toFiat(amount, rate), currency)}
       </span>
     </div>
   </div>
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
index 7d5c09aa..24031e1e 100644
--- a/src/routes/(app)/payment/[id]/plain/+page.svelte
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -8,7 +8,7 @@
     copy,
     f,
     s,
-    fiat,
+    toFiat,
     post,
     sats,
     success,
@@ -42,7 +42,7 @@
   <div>
     <span class="text-lg text-secondary">Amount</span>
     <div>
-      {f(fiat(a, rate), currency)}
+      {f(toFiat(a, rate), currency)}
     </div>
   </div>
 
@@ -50,7 +50,7 @@
     <div>
       <span class="text-lg text-secondary">Tip</span>
       <div>
-        {f(fiat(tip, rate), currency)}
+        {f(toFiat(tip, rate), currency)}
         ({Math.round((tip * 100) / Math.abs(a))}%)
       </div>
     </div>
@@ -58,7 +58,7 @@
     <div>
       <span class="text-lg text-secondary">Total</span>
       <div>
-        {f(fiat(a + (tip || 0), rate), currency)}
+        {f(toFiat(a + (tip || 0), rate), currency)}
       </div>
     </div>
   {/if}
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index e967022f..d2f9782b 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -258,7 +258,8 @@
               {:else}
                 <div class="text-secondary flex gap-2">
                   {#if p.type === types.lightning}
-                    <div class="text-3xl">⚡️</div>
+                    <div class="text-3xl"><iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon></div>
                   {:else if p.type === types.ecash}
                     <img src="/images/cash.png" class="w-12" />
                   {:else if p.type === types.reconcile}
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 57f33f24..f5259170 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -7,6 +7,7 @@
   import { goto, invalidateAll } from "$app/navigation";
   import { pin } from "$lib/store";
   import { enhance } from "$app/forms";
+  import Amount from "$comp/Amount.svelte";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
   import Numpad from "$comp/Numpad.svelte";
@@ -18,7 +19,7 @@
     post,
     back,
     f,
-    fiat as toFiat,
+    toFiat,
     s,
     sats,
     focus,
@@ -99,25 +100,8 @@
     <h1 class="text-4xl font-bold">
       {$t("payments.send")}
     </h1>
-    <div>
-      <h2 class="text-2xl md:text-3xl font-semibold">
-        {f(toFiat(amount, rate), currency)}
-        {#if tip}
-          <span class="text-lg">
-            + {f(toFiat(tip, rate), currency)}
-          </span>
-        {/if}
-      </h2>
-      <h3 class="text-secondary md:text-lg mt-1">
-        ⚡️{s(amount)}
 
-        {#if tip}
-          <span class="text-lg">
-            + ⚡️{s(tip)}
-          </span>
-        {/if}
-      </h3>
-    </div>
+    <Amount {amount} {tip} {rate} {currency} />
 
     <h1 class="text-xl md:text-2xl text-secondary">
       {$t("payments.to")}
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index 6b9fe4e2..af3e09f4 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -7,7 +7,7 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { back, fiat, f, s, focus } from "$lib/utils";
+  import { back, toFiat, f, s, focus } from "$lib/utils";
   import { rate, pin } from "$lib/store";
 
   let { data, form } = $props();
@@ -68,10 +68,7 @@
         {$t("payments.send")}
       </h1>
 
-      <h2 class="text-3xl font-semibold">
-        {f(fiat(amount, $rate), currency)}
-      </h2>
-      <h3 class="text-secondary text-xl">⚡️{s(amount)}</h3>
+      <Amount {amount} rate={$rate} {currency} />
     </div>
 
     <div class="text-xl">
@@ -86,7 +83,7 @@
         <div class="flex flex-wrap gap-4 justify-center">
           <div class="my-auto">
             <h2 class="text-xl">
-              {f(fiat(ourfee, $rate), currency)}
+              {f(toFiat(ourfee, $rate), currency)}
             </h2>
             <h3 class="text-secondary">⚡️{s(ourfee)}</h3>
           </div>
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
index 615638c7..f2f14fef 100644
--- a/src/routes/(app)/sent/[id]/+page.svelte
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { fiat, f, focus, s, sat, sats } from "$lib/utils";
+  import { f, focus, s, sat, sats } from "$lib/utils";
   import { scale } from "svelte/transition";
+  import Amount from "$comp/Amount.svelte";
   import Icon from "$comp/Icon.svelte";
   import { toast } from "@zerodevx/svelte-toast";
   import { t } from "$lib/translations";
@@ -18,29 +19,13 @@
     <Icon icon="check" style="mx-auto" />
   </div>
   <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t("payments.sent")}!</h1>
-  <h2 class="text-2xl md:text-3xl font-semibold">
-    {f(fiat(amount, rate), currency)}
-    {#if tip}
-      <span class="text-lg">
-        + {f(fiat(tip, rate), currency)}
-      </span>
-    {/if}
-  </h2>
-  <h3 class="text-secondary md:text-lg mb-6 mt-1">
-    ⚡️{s(amount)}
-
-    {#if tip}
-      <span class="text-lg">
-        + ⚡️{s(tip)}
-      </span>
-    {/if}
-  </h3>
+  <Amount {amount} {tip} {rate} {currency} />
 </div>
 
 <a href={`/${username}`} use:focus>
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>
 
-<div class="flex justify-center">
+<div class="flex justify-center mt-4">
   {$t("payments.tapAnywhere")}
 </div>