display locked balance

3 files changed, 37 insertions, 35 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 4edd659c..a30766ce 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -24,35 +24,6 @@
 >
   <div class="flex">
     <Balance {balance} {user} {rate} />
-    <a
-      href={`/payments`}
-      class="contents"
-      onclick={setAccount}
-      aria-label="Payments"
-    >
-      <button class="ml-auto flex gap-1 mb-auto pb-4 pl-4">
-        <iconify-icon
-          noobserver
-          icon="ph:clock-bold"
-          width="32"
-          aria-label="Payments"
-        ></iconify-icon>
-      </button>
-    </a>
-    <a
-      href={id === user.id ? "/settings/nostr" : `/account/${id}`}
-      class="contents"
-      aria-label="Settings"
-    >
-      <button class="flex gap-1 mb-auto pb-4 pl-4">
-        <iconify-icon
-          noobserver
-          icon="ph:gear-bold"
-          width="32"
-          aria-label="Settings"
-        ></iconify-icon>
-      </button>
-    </a>
   </div>
 
   <div class="flex justify-center w-full text-xl gap-2">
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>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index da26f6de..8420b74c 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -7,7 +7,7 @@
 
   let show = $state();
   let { user, rate, balance } = $props();
-  let { currency } = $derived(user);
+  let { currency, locked } = $derived(user);
   let locale = loc(user);
   let toggleShow = (e) => {
     e.preventDefault();
@@ -23,11 +23,32 @@
 <div>
   {#if user.haspin && !$pin}
     <button onclick={toggleShow} class="flex gap-2 text-xl">
-      <iconify-icon noobserver icon="ph:eye-slash-bold" width="32"></iconify-icon>
+      <iconify-icon noobserver icon="ph:eye-slash-bold" width="32"
+      ></iconify-icon>
       <div class="my-auto">{$t("user.showBalance")}</div>
     </button>
   {:else if !isNaN(rate)}
-    <Amount amount={balance} {rate} {currency} {locale} align="left" />
+    <div class="flex gap-4">
+      <Amount
+        amount={balance - (locked || 0)}
+        {rate}
+        {currency}
+        {locale}
+        align="left"
+      />
+      {#if locked}
+        <div class="text-red-600">
+          <Amount
+            amount={locked}
+            {rate}
+            {currency}
+            {locale}
+            align="left"
+            locked={true}
+          />
+        </div>
+      {/if}
+    </div>
   {:else}
     <div class="text-gray-200">&mdash;</div>
   {/if}