display locked balance

1 files changed, 13 insertions, 3 deletions

diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index f13949c6..2df2f702 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -1,7 +1,17 @@
 <script>
   import { copy, s, f, toFiat } from "$lib/utils";
   import { fiat } from "$lib/store";
-  const { align, amount, locale, tip, rate, currency } = $props();
+  const {
+    align,
+    amount,
+    locale,
+    tip,
+    rate,
+    currency,
+    locked = false,
+  } = $props();
+
+  const icon = $derived(locked ? "ph:lock-fill" : "ph:lightning-fill");
 </script>
 
 {#if typeof amount !== "undefined"}
@@ -11,14 +21,14 @@
       class:justify-center={align !== "left"}
     >
       <div class="flex items-center" onclick={() => copy(amount)}>
-        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
+        <iconify-icon noobserver {icon} class="text-yellow-300"
         ></iconify-icon>{s(amount, locale)}
       </div>
 
       {#if tip}
         <div class="flex items-center text-lg ml-2">
           <div>+</div>
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
+          <iconify-icon noobserver {icon} class="text-yellow-300"
           ></iconify-icon>
           <div>{s(tip, locale)}</div>
         </div>