accounts redesign

3 files changed, 46 insertions, 40 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 12fa8100..33c769de 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -9,7 +9,7 @@
   import { t } from "$lib/translations";
   import { arkkey } from "$lib/ark";
 
-  let { user, rate, account, last } = $props();
+  let { user, rate, account } = $props();
   let {
     name,
     seed,
@@ -53,43 +53,45 @@
   };
 
   let displayType = $derived(
-    accountType === "ark" ? "Ark" : seed ? "Savings" : "Cash",
+    accountType === "ark" ? "Ark" : seed ? "Bitcoin" : "Custodial",
   );
   let isArk = $derived(accountType === "ark");
 </script>
 
-<div
-  class="block space-y-2 border-primary py-4"
-  class:border-b-8={!last}
-  aria-label="Payments"
->
-  <div class="flex">
-    <Balance {balance} {user} {rate} {id} />
+<div class="rounded-2xl bg-base-200 p-5 shadow space-y-4" aria-label="Payments">
+  <div class="flex items-center gap-3">
+    {#if isArk}
+      <img src="/images/ark.png" class="w-8 h-8 rounded-full object-cover" alt="Ark" />
+    {:else if seed}
+      <iconify-icon noobserver icon="cryptocurrency-color:btc" width="32"></iconify-icon>
+    {:else}
+      <img src="/images/icon.png" class="w-8 h-8" />
+    {/if}
+    <span class="font-bold text-lg">{displayType}</span>
     {#if id !== user.id}
       <a
-        href={id === user.id ? "/settings/nostr" : `/account/${id}`}
-        class="contents"
+        href={`/account/${id}`}
+        class="ml-auto opacity-40 hover:opacity-100 transition-opacity"
         aria-label="Settings"
       >
-        <button class="flex gap-1 mb-auto pb-4 pl-4 ml-auto" aria-label="Settings">
-          <iconify-icon
-            noobserver
-            icon="ph:gear-bold"
-            width="32"
-            aria-label="Settings"
-          ></iconify-icon>
-        </button>
+        <iconify-icon
+          noobserver
+          icon="ph:gear-bold"
+          width="24"
+        ></iconify-icon>
       </a>
     {/if}
   </div>
 
-  <div class="flex justify-center w-full text-xl gap-2">
+  <Balance {balance} {user} {rate} {id} />
+
+  <div class="flex w-full text-xl gap-2">
     <a
       href={"/invoice"}
       class="contents"
       onclick={(e) => setAccount(e, "/invoice")}
     >
-      <button class="btn !w-auto flex-grow">
+      <button class="btn !w-auto flex-1">
         <iconify-icon
           noobserver
           icon="ph:hand-coins-bold"
@@ -100,27 +102,27 @@
       </button>
     </a>
 
-    <!-- <a -->
-    <!--   href={"/payments"} -->
-    <!--   class="contents" -->
-    <!--   onclick={(e) => setAccount(e, "/payments")} -->
-    <!-- > -->
-    <!--   <button class="btn !w-auto flex-grow"> -->
-    <!--     <iconify-icon -->
-    <!--       noobserver -->
-    <!--       icon="ph:clock-bold" -->
-    <!--       width="32" -->
-    <!--       flip="horizontal" -->
-    <!--     ></iconify-icon> -->
-    <!--   </button> -->
-    <!-- </a> -->
+    <a
+      href={"/payments"}
+      class="contents"
+      onclick={(e) => setAccount(e, "/payments")}
+    >
+      <button class="btn !w-auto flex-1">
+        <iconify-icon
+          noobserver
+          icon="ph:clock-bold"
+          width="32"
+        ></iconify-icon>
+        <div class="my-auto">{$t("user.dashboard.history")}</div>
+      </button>
+    </a>
 
     <a
       href={`/send`}
-      class="contents grow"
+      class="contents"
       onclick={(e) => setAccount(e, "/send")}
     >
-      <button type="button" class="btn !w-auto flex-grow">
+      <button type="button" class="btn !w-auto flex-1">
         <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"
         ></iconify-icon>
         <div class="my-auto">{$t("user.dashboard.send")}</div>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 9b8839ca..3d45b543 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -8,7 +8,7 @@
   let show = $state();
   let { id, user, rate, balance } = $props();
   let { currency, locked } = $derived(user);
-  let locale = $derived(() => loc(user));
+  let locale = $derived(loc(user));
   let toggleShow = (e) => {
     e.preventDefault();
     e.stopPropagation();
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index c321e0bc..5e3e8fa6 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -27,10 +27,14 @@
   let position = $state("before");
 
   function getCurrencyInfo(locale = "en-US", currency) {
-    const formatter = new Intl.NumberFormat(locale, {
+    const l = typeof locale === "function" ? locale() : locale || "en-US";
+    const region = l.length >= 2 ? l.slice(-2) : "";
+    const currencyDisplay =
+      region && currency.startsWith(region) ? "narrowSymbol" : "symbol";
+    const formatter = new Intl.NumberFormat(l, {
       style: "currency",
       currency,
-      currencyDisplay: "symbol",
+      currencyDisplay,
       minimumFractionDigits: 2,
       maximumFractionDigits: 2,
     });