homepage design and currency toggling

7 files changed, 123 insertions, 103 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 898f94c9..86eb0f74 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -29,6 +29,7 @@
 
   let setAccount = (event, url) => {
     event.preventDefault();
+    event.stopPropagation();
     document.cookie = `aid=${id}; path=/; max-age=86400`;
     if (isArk) {
       pendingUrl = url;
@@ -51,45 +52,63 @@
   };
 
   let displayType = $derived(
-    accountType === "ark" ? "Ark" : seed ? "Bitcoin" : "Custodial",
+    accountType === "ark"
+      ? $t("accounts.ark")
+      : seed
+        ? $t("accounts.bitcoin")
+        : $t("accounts.custodial"),
   );
+  let displayName = $derived(name || displayType);
   let isArk = $derived(accountType === "ark");
+
+  let goPayments = (e) => {
+    e.preventDefault();
+    setAccount(e, "/payments");
+  };
 </script>
 
-<div class="shadow-lg space-y-4 p-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={`/account/${id}`}
-        class="ml-auto opacity-40 hover:opacity-100 transition-opacity"
-        aria-label="Settings"
-      >
+<div
+  class="shadow-lg space-y-4 p-4 cursor-pointer hover:bg-base-200"
+  aria-label="Payments"
+  role="button"
+  tabindex="0"
+  onclick={goPayments}
+  onkeydown={(e) => (e.key === "Enter" || e.key === " ") && goPayments(e)}
+>
+  <div class="flex items-start justify-between gap-4">
+    <Balance {balance} {user} {rate} {id} />
+    <a
+      href={`/account/${id}`}
+      class="font-bold text-lg opacity-60 hover:opacity-100 transition-opacity flex items-center gap-2 shrink-0"
+      aria-label="Account settings"
+      onclick={(e) => e.stopPropagation()}
+    >
+      {#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="ph:gear-bold"
-          width="24"
+          icon="cryptocurrency-color:btc"
+          width="32"
         ></iconify-icon>
-      </a>
-    {/if}
+      {:else}
+        <img src="/images/icon.png" class="w-8 h-8" />
+      {/if}
+      {displayName}
+    </a>
   </div>
 
-  <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-1">
+      <button class="btn !w-auto flex-1 !bg-base-300">
         <iconify-icon
           noobserver
           icon="ph:hand-coins-bold"
@@ -101,26 +120,11 @@
     </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 hidden sm:block">{$t("user.dashboard.history")}</div>
-      </button>
-    </a>
-
-    <a
       href={`/send`}
       class="contents"
       onclick={(e) => setAccount(e, "/send")}
     >
-      <button type="button" class="btn !w-auto flex-1">
+      <button type="button" class="btn !w-auto flex-1 !bg-base-300">
         <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"
         ></iconify-icon>
         <div class="my-auto hidden sm:block">{$t("user.dashboard.send")}</div>
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index e5aeabde..7dea7cf1 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -9,56 +9,57 @@
     rate,
     currency,
     locked = false,
-    showFiat = true,
   } = $props();
 
   const icon = $derived(locked ? "ph:lock-fill" : "ph:lightning-fill");
+  const canShowFiat = $derived($fiat && rate && currency);
+
+  const toggleFiat = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    $fiat = !$fiat;
+  };
+
 </script>
 
 {#if typeof amount !== "undefined"}
   <div>
     <h2
-      class="text-2xl md:text-3xl font-semibold flex items-end cursor-copy"
+      class="text-2xl md:text-3xl font-semibold flex items-end"
       class:justify-center={align !== "left"}
     >
       <button
         type="button"
         class="flex items-center"
-        onclick={() => copy(amount)}
-        aria-label="Copy amount"
+        onclick={toggleFiat}
+        aria-label="Toggle currency display"
       >
-        <iconify-icon noobserver {icon} class="text-yellow-300"
-        ></iconify-icon>{s(amount, locale)}
+        {#if !canShowFiat}
+          <iconify-icon
+            noobserver
+            icon={icon}
+            class="text-yellow-300"
+          ></iconify-icon>
+        {/if}
+        {#if canShowFiat}
+          {f(toFiat(amount, rate), currency, locale)}
+        {:else}
+          {s(amount, locale)}
+        {/if}
       </button>
 
       {#if tip}
         <div class="flex items-center text-lg ml-2">
           <div>+</div>
-          <iconify-icon noobserver {icon} class="text-yellow-300"
-          ></iconify-icon>
-          <div>{s(tip, locale)}</div>
+          <div class="font-semibold">
+            {#if canShowFiat}
+              {f(toFiat(tip, rate), currency, locale)}
+            {:else}
+              {s(tip, locale)}
+            {/if}
+          </div>
         </div>
       {/if}
     </h2>
-    {#if showFiat}
-      <h3
-        class="flex text-secondary md:text-lg cursor-copy items-center gap-1"
-        class:justify-center={align !== "left"}
-      >
-        <button
-          type="button"
-          class="flex items-center gap-1"
-          onclick={() => copy(toFiat(amount, rate).toFixed(2))}
-          aria-label="Copy fiat amount"
-        >
-          {f(toFiat(amount, rate), currency, locale)}
-          {#if tip}
-            <span class="text-base">
-              +{f(toFiat(tip, rate), currency, locale)}
-            </span>
-          {/if}
-        </button>
-      </h3>
-    {/if}
   </div>
 {/if}
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index f499d587..0bdd6907 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -27,6 +27,11 @@
       icon: "ph:house-bold",
       label: "Home",
     },
+    {
+      href: `/scan`,
+      icon: "ph:camera-bold",
+      label: "Scan",
+    },
     // {
     //   href: `/${user?.username}/receive`,
     //   icon: "ph:hand-coins-bold",
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 38037eaa..cf61e0b0 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -34,7 +34,6 @@
         {rate}
         {currency}
         {locale}
-        showFiat={false}
         align="left"
       />
       {#if locked && id === user.id}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 58348962..e0ec0f3e 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -1,7 +1,8 @@
 <script>
   import Amount from "$comp/Amount.svelte";
 
-  import { btc, copy, f, sat, s, sats, types } from "$lib/utils";
+  import { btc, copy, f, sat, sats, types } from "$lib/utils";
+  import { fiat } from "$lib/store";
   let {
     showQr,
     link,
@@ -66,17 +67,21 @@
 {/if}
 
 {#each invoice.items as i}
+  {@const itemTotal = i.price * i.quantity}
   <div class="grid grid-cols-12 text-xl">
     <div class="col-span-1 my-auto">{i.quantity}</div>
     <div class="mr-auto grow col-span-7 my-auto">
       {i.name}
     </div>
-    <div class="col-span-2 font-semibold text-right my-auto">
-      {f(i.price * i.quantity, currency)}
-    </div>
-    <div class="col-span-2 text-secondary text-right text-lg my-auto">
-      {sat(btc(i.price * i.quantity, rate))}
-    </div>
+    {#if $fiat}
+      <div class="col-span-4 font-semibold text-right my-auto">
+        {f(itemTotal, currency)}
+      </div>
+    {:else}
+      <div class="col-span-4 font-semibold text-right my-auto">
+        {sat(btc(itemTotal, rate))}
+      </div>
+    {/if}
   </div>
 {/each}
 
diff --git a/src/components/Lnurlw.svelte b/src/components/Lnurlw.svelte
index 5dc980c2..9cf30f0c 100644
--- a/src/components/Lnurlw.svelte
+++ b/src/components/Lnurlw.svelte
@@ -52,14 +52,15 @@
 
   {#if minWithdrawable === maxWithdrawable}
     <div class="text-center font-bold text-2xl mb-4">
-      <div>
-        {f(amountFiat, currency)}
-      </div>
-      <div>
-        <span class="text-secondary font-normal text-xl"
-          >⚡️{`${s(amount)}`}</span
-        >
-      </div>
+      {#if $fiat}
+        <div>{f(amountFiat, currency)}</div>
+      {:else}
+        <div>
+          <span class="text-secondary font-normal text-xl"
+            >⚡️{`${s(amount)}`}</span
+          >
+        </div>
+      {/if}
     </div>
   {:else}
     <Numpad bind:amount {currency} {rate} />
@@ -88,7 +89,11 @@
           onclick={setMax}
           disabled={submitting}
           onkeydown={setMax}
-          >Max ⚡️{s(Math.floor(maxWithdrawable / 1000))}</button
+          >{#if $fiat}
+            Max {f((Math.floor(maxWithdrawable / 1000) * rate) / sats, currency)}
+          {:else}
+            Max ⚡️{s(Math.floor(maxWithdrawable / 1000))}
+          {/if}</button
         >
       {/if}
 
diff --git a/src/components/Payments.svelte b/src/components/Payments.svelte
index dd153ec6..16033959 100644
--- a/src/components/Payments.svelte
+++ b/src/components/Payments.svelte
@@ -5,6 +5,7 @@
   import { format } from "date-fns";
   import { t } from "$lib/translations";
   import locales from "$lib/locales";
+  import { fiat } from "$lib/store";
   const { fund, locale, user, payments } = $props();
   const language = $derived(user?.language || "en");
 </script>
@@ -24,26 +25,26 @@
     >
       <div class="whitespace-nowrap my-auto col-span-3">
         <div class="font-bold flex items-center">
-          <div class="flex items-center">
-            <iconify-icon
-              noobserver
-              icon="ph:lightning-fill"
-              width="24"
-              class="text-yellow-300"
-            ></iconify-icon>
-            <div>{s(Math.abs(amount), locale)}</div>
+          <div class="flex items-center gap-1">
+            {#if $fiat}
+              <div>{f(Math.abs(amount) * (p.rate / sats), p.currency, locale)}</div>
+            {:else}
+              <iconify-icon
+                noobserver
+                icon="ph:lightning-fill"
+                width="24"
+                class="text-yellow-300"
+              ></iconify-icon>
+              <div>{s(Math.abs(amount), locale)}</div>
+            {/if}
           </div>
         </div>
 
-        <div class="text-secondary flex items-center text-base">
-          {f(Math.abs(amount) * (p.rate / sats), p.currency, locale)}
-
-          {#if p.tip}
-            <span class="text-sm text-secondary">
-              &nbsp;+{Math.round((p.tip / Math.abs(amount)) * 100)}%
-            </span>
-          {/if}
-        </div>
+        {#if p.tip}
+          <div class="text-secondary flex items-center text-sm">
+            +{Math.round((p.tip / Math.abs(amount)) * 100)}%
+          </div>
+        {/if}
       </div>
 
       <div