1 files changed, 28 insertions, 24 deletions
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}