2 files changed, 33 insertions, 2 deletions
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
new file mode 100644
index 00000000..de432400
--- /dev/null
+++ b/src/components/Amount.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { s, f, toFiat } from "$lib/utils";
+  import { fiat } from "$lib/store";
+  const { amount, 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>
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon>
+        <div>{s(tip)}</div>
+      </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>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index ebd46f44..3451a9af 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -1,6 +1,6 @@
 <script>
   import Pin from "$comp/Pin.svelte";
-  import { f, fiat, s, si, sat, sats } from "$lib/utils";
+  import { 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(fiat(balance, rate), user.currency)}
+        {f(toFiat(balance, rate), user.currency)}
       {/if}
     </div>
   {/if}