homepage design and currency toggling

15 files changed, 231 insertions, 144 deletions

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 19c0708d..3a399c3a 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -13,6 +13,8 @@
     password,
     pin,
     theme as themeStore,
+    fiat,
+    rate as rateStore,
   } from "$lib/store";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
@@ -20,7 +22,7 @@
   import AppHeader from "$comp/AppHeader.svelte";
   import Nostr from "$comp/Nostr.svelte";
   import Password from "$comp/Password.svelte";
-  import { s, success, post, getCookie, warning } from "$lib/utils";
+  import { s, f, toFiat, success, post, getCookie, warning } from "$lib/utils";
   import { t, locale, loading } from "$lib/translations";
   import { goto, invalidate, afterNavigate, preloadData } from "$app/navigation";
 
@@ -49,7 +51,11 @@
     let amount = notification.newVtxos.reduce((a, b) => a + b.value, 0);
     if (!amount) return;
 
-    success(`Received ⚡️${s(amount)}!`);
+    if ($fiat && $rateStore && user?.currency) {
+      success(`Received ${f(toFiat(amount, $rateStore), user.currency)}!`);
+    } else {
+      success(`Received ⚡️${s(amount)}!`);
+    }
 
     try {
       let inv = await post(`/invoice`, {
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 4a55c6e6..f929a602 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,14 +1,6 @@
 <script>
-  import {
-    copy,
-    f,
-    loc,
-    post,
-    s,
-    sats,
-    success,
-    fail,
-  } from "$lib/utils";
+  import { copy, f, loc, post, s, sats, success, fail } from "$lib/utils";
+  import { fiat } from "$lib/store";
   import { t } from "$lib/translations";
   import { bech32 } from "@scure/base";
   import { page } from "$app/stores";
@@ -17,13 +9,13 @@
   let { data, children } = $props();
 
   let { encode, toWords } = bech32;
+  let satsPerCurrency = $derived((1 * sats) / rate);
 
   let { events, rate, user, subject, src, text } = $derived(data);
 
   let { currency, npub, username: n, display } = $derived(subject);
   let locale = $derived(loc(user));
 
-
   let showBio = $state();
   let toggleBio = () => (showBio = !showBio);
 
@@ -76,7 +68,11 @@
         <iconify-icon noobserver icon="ph:list-bold" width="32"></iconify-icon>
       </button>
       {#if subject.id === user?.id}
-        <a href="/settings/profile" class="btn contents" aria-label="Edit profile">
+        <a
+          href="/settings/profile"
+          class="btn contents"
+          aria-label="Edit profile"
+        >
           <iconify-icon noobserver icon="ph:pencil-bold" width="32"
           ></iconify-icon>
         </a>
@@ -284,16 +280,28 @@
       </div>
       <div>&#61; {f(rate, currency, locale, 0, 0)}</div>
     </div>
-    <div class="text-secondary flex ml-auto">
-      <div class="flex items-center">
-        <iconify-icon
-          noobserver
-          icon="ph:lightning-fill"
-          class="text-yellow-300"
-        ></iconify-icon>
-        {s((1 * sats) / rate)} =
-        {f(1, currency, locale, 0, 0)}
-      </div>
+    <div class="text-secondary flex ml-auto items-center gap-1">
+      {#if satsPerCurrency >= 1}
+        <div>{f(1, currency, locale)} &#61; </div>
+        <div class="flex items-center">
+          <iconify-icon
+            noobserver
+            icon="ph:lightning-fill"
+            class="text-yellow-300"
+          ></iconify-icon>
+          {s(satsPerCurrency)}
+        </div>
+      {:else}
+        <div class="flex items-center">
+          <iconify-icon
+            noobserver
+            icon="ph:lightning-fill"
+            class="text-yellow-300"
+          ></iconify-icon>
+          1
+        </div>
+        <div>&#61; {f(1 / satsPerCurrency, currency, locale)}</div>
+      {/if}
     </div>
   </div>
 {/if}
diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
index bda81cbc..d3204a10 100644
--- a/src/routes/(app)/account/[id]/+page.svelte
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -8,21 +8,24 @@
   import { t } from "$lib/translations";
   import { entropyToMnemonic, mnemonicToSeed } from "@scure/bip39";
   import { wordlist } from "@scure/bip39/wordlists/english.js";
-  import {
-    PUBLIC_COINOS_PUBKEY as pk,
-    PUBLIC_COINOS_RELAY as relay,
-  } from "$env/static/public";
 
   let { data } = $props();
   let { account, user } = data;
-  let { id, name, seed } = account;
+  let { id, seed } = account;
+  let displayType = $derived(
+    account.type === "ark"
+      ? $t("accounts.ark")
+      : seed
+        ? $t("accounts.bitcoin")
+        : $t("accounts.custodial"),
+  );
+  let name = $state(account.name || displayType);
   let mnemonic = $state(),
     password = $state();
   let passwordPrompt = $state();
   let cancel = $state(() => (passwordPrompt = false));
   let toggle = () => (passwordPrompt = !passwordPrompt);
 
-  let lud16 = $derived(`${user.username}@${$page.url.host}`);
 
   let submit = $state(async () => {
     toggle();
@@ -40,11 +43,6 @@
     }
   };
 
-  let nwc = $state();
-  let revealNwc = () =>
-    (nwc = `nostr+walletconnect://${pk}?relay=${encodeURIComponent(
-      relay,
-    )}&secret=${user.nwc}&lud16=${lud16}`);
 </script>
 
 <div class="space-y-5">
@@ -54,6 +52,15 @@
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
     <form class="space-y-5" method="POST">
+      <div class="space-y-1">
+        <label for="name" class="font-bold block">{$t("accounts.name")}</label>
+        <label
+          class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2"
+        >
+          <input type="text" name="name" class="clean" bind:value={name} />
+        </label>
+      </div>
+
       <div class="space-y-2">
         {#if mnemonic}
           <Mnemonic {mnemonic} />
@@ -69,28 +76,6 @@
             ></iconify-icon>
             <div class="my-auto">{$t("accounts.revealMnemonic")}</div></button
           >
-        {:else if nwc}
-          <div class="break-all grow text-xl">
-            {nwc}
-          </div>
-          <button onclick={() => copy(nwc)} type="button" class="btn">
-            <iconify-icon noobserver icon="ph:copy-bold" width="32"
-            ></iconify-icon>
-            <div class="my-auto">{$t("accounts.copy")}</div></button
-          >
-          <a href={`/qr/${encodeURIComponent(nwc)}`} class="my-auto block">
-            <button onclick={() => copy(nwc)} type="button" class="btn">
-              <iconify-icon noobserver icon="ph:qr-code-bold" width="32"
-              ></iconify-icon>
-              <div class="my-auto">{$t("user.receive.showQR")}</div></button
-            >
-          </a>
-        {:else}
-          <button onclick={revealNwc} type="button" class="btn">
-            <iconify-icon noobserver icon="ph:eye-bold" width="32"
-            ></iconify-icon>
-            <div class="my-auto">{$t("accounts.revealNwc")}</div></button
-          >
         {/if}
 
         {#if seed}
@@ -102,7 +87,9 @@
         {/if}
       </div>
 
-      <div></div>
+      <button type="submit" class="btn btn-accent !w-full">
+        <div class="my-auto">{$t("accounts.submit")}</div>
+      </button>
     </form>
   </div>
 </div>
diff --git a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
index 530aa126..1f20820c 100644
--- a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
+++ b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
@@ -1,6 +1,8 @@
 <script>
   import { copy, sats, f, s } from "$lib/utils";
-  import { t } from "$lib/translations";  let { data, children } = $props();
+  import { t } from "$lib/translations";
+  import { fiat } from "$lib/store";
+  let { data, children } = $props();
 
   let { id, user, token, total, spent, external, mint, rate } = data;
   let currency = user?.currency || "USD";
@@ -18,14 +20,15 @@
 
   {#if amount > 0}
     <div class="text-center font-bold text-2xl">
-      <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>
   {/if}
 
@@ -36,15 +39,19 @@
 
   {#if spent > 0}
     <div class="text-center font-bold text-2xl">
-      <div>
-        {f(spentFiat, currency)}
-        <span class=" text-red-600">{$t("payments.spent")}</span>
-      </div>
-      <div>
-        <span class="text-secondary font-normal text-xl"
-          >⚡️{`${s(spent)}`}</span
-        >
-      </div>
+      {#if $fiat}
+        <div>
+          {f(spentFiat, currency)}
+          <span class=" text-red-600">{$t("payments.spent")}</span>
+        </div>
+      {:else}
+        <div>
+          <span class="text-secondary font-normal text-xl"
+            >⚡️{`${s(spent)}`}</span
+          >
+          <span class=" text-red-600">{$t("payments.spent")}</span>
+        </div>
+      {/if}
     </div>
   {/if}
 
diff --git a/src/routes/(app)/fund/[id]/withdraw/+page.svelte b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
index 42f7972e..5f10f9bf 100644
--- a/src/routes/(app)/fund/[id]/withdraw/+page.svelte
+++ b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
@@ -6,7 +6,7 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { loc, s } from "$lib/utils";
+  import { loc, s, f, sats } from "$lib/utils";
   import { fiat, pin } from "$lib/store";
 
   let { data, form } = $props();
@@ -54,7 +54,12 @@
         class="btn !w-auto grow"
         onclick={setMax}
         disabled={submitting}
-        onkeydown={setMax}>Max ⚡️{s(balance)}</button
+        onkeydown={setMax}
+        >{#if $fiat}
+          Max {f((balance * rate) / sats, currency, locale)}
+        {:else}
+          Max ⚡️{s(balance)}
+        {/if}</button
       >
 
       <button
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 4ac33471..41cc4636 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -2,8 +2,9 @@
   import { untrack } from "svelte";
 
   import { browser } from "$app/environment";
-  import { invoice as inv, request } from "$lib/store";
-  import { loc, copy, focus, f, sat, get, s, sats } from "$lib/utils";  import Slider from "$comp/Slider.svelte";
+  import { fiat, invoice as inv, request } from "$lib/store";
+  import { loc, copy, focus, f, sat, get, s, sats } from "$lib/utils";
+  import Slider from "$comp/Slider.svelte";
   import { goto } from "$app/navigation";
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
@@ -106,29 +107,33 @@
       <Slider handle={handleSlide} bind:value={tipPercent} />
 
       <div class="flex mb-8 text-lg">
-        <div>
-          <span class="mr-1">
-            {f(amountFiat, currency, locale)}
-            <span class="font-semibold">+{f(tipAmount, currency, locale)}</span>
-          </span>
-        </div>
-
-        <div class="ml-auto text-lg flex gap-2">
-          <div class="flex items-center">
-            <iconify-icon
-              noobserver
-              icon="ph:lightning-fill"
-              class="text-yellow-300"
-            ></iconify-icon>
-            <div>{s(amount, locale)}</div>
+        {#if $fiat}
+          <div>
+            <span class="mr-1">
+              {f(amountFiat, currency, locale)}
+              <span class="font-semibold"
+                >+{f(tipAmount, currency, locale)}</span
+              >
+            </span>
           </div>
+        {:else}
+          <div class="ml-auto text-lg flex gap-2">
+            <div class="flex items-center">
+              <iconify-icon
+                noobserver
+                icon="ph:lightning-fill"
+                class="text-yellow-300"
+              ></iconify-icon>
+              <div>{s(amount, locale)}</div>
+            </div>
 
-          <div class="flex items-center">
-            <div class="font-semibold">
-              +{s(tip, locale)}
+            <div class="flex items-center">
+              <div class="font-semibold">
+                +{s(tip, locale)}
+              </div>
             </div>
           </div>
-        </div>
+        {/if}
       </div>
 
       <div class="space-y-2">
diff --git a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
index daf5bc08..46f73506 100644
--- a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
+++ b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
@@ -6,6 +6,7 @@
   import Numpad from "$comp/Numpad.svelte";
   import { page } from "$app/stores";
   import { f, loc, fail, post, s, sat, sats } from "$lib/utils";
+  import { fiat as fiatStore } from "$lib/store";
   import { applyAction, deserialize } from "$app/forms";
 
   let { data, form } = $props();
@@ -69,7 +70,12 @@
         type="button"
         class="btn !w-auto grow"
         onclick={setMax}
-        onkeydown={setMax}>Max ⚡️{s(user.balance)}</button
+        onkeydown={setMax}
+        >{#if $fiatStore}
+          Max {f((user.balance * rate) / sats, currency, locale)}
+        {:else}
+          Max ⚡️{s(user.balance)}
+        {/if}</button
       >
     {/if}
 
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index f91f2f26..b4120adb 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -14,6 +14,13 @@
     success,
     types,
   } from "$lib/utils";
+  import { fiat } from "$lib/store";
+
+  const toggleFiat = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    $fiat = !$fiat;
+  };
   import Avatar from "$comp/Avatar.svelte";
   import { format } from "date-fns";
   import { PUBLIC_EXPLORER, PUBLIC_LIQUID_EXPLORER } from "$env/static/public";
@@ -79,18 +86,27 @@
 {#snippet field(title, amount)}
   <div>
     <span class="text-lg text-secondary">{$t(title)}</span>
-    <div class="flex gap-2 items-end">
-      <div class="flex items-center">
-        <iconify-icon
-          noobserver
-          icon="ph:lightning-fill"
-          class="text-yellow-300"
-        ></iconify-icon>{s(amount, userLocale)}
-      </div>
-      <span class="text-secondary text-lg">
-        {f(toFiat(amount, rate), currency, userLocale)}
-      </span>
-    </div>
+    <button
+      type="button"
+      class="flex gap-2 items-end"
+      onclick={toggleFiat}
+      aria-label="Toggle currency display"
+    >
+      {#if $fiat}
+        <div class="flex items-center gap-1">
+          {f(toFiat(amount, rate), currency, userLocale)}
+        </div>
+      {:else}
+        <div class="flex items-center gap-1">
+          <iconify-icon
+            noobserver
+            icon="ph:lightning-fill"
+            class="text-yellow-300"
+          ></iconify-icon>
+          {s(amount, userLocale)}
+        </div>
+      {/if}
+    </button>
   </div>
 {/snippet}
 
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
index 5dc82ce3..8e3fe8f3 100644
--- a/src/routes/(app)/payment/[id]/plain/+page.svelte
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -14,6 +14,7 @@
     success,
     types,
   } from "$lib/utils";
+  import { fiat } from "$lib/store";
   import Avatar from "$comp/Avatar.svelte";  import { format } from "date-fns";
   import { PUBLIC_EXPLORER as expl } from "$env/static/public";
 
@@ -40,7 +41,11 @@
   <div>
     <span class="text-lg text-secondary">Amount</span>
     <div>
-      {f(toFiat(a, rate), currency)}
+      {#if $fiat}
+        {f(toFiat(a, rate), currency)}
+      {:else}
+        {s(a)}
+      {/if}
     </div>
   </div>
 
@@ -48,7 +53,11 @@
     <div>
       <span class="text-lg text-secondary">Tip</span>
       <div>
-        {f(toFiat(tip, rate), currency)}
+        {#if $fiat}
+          {f(toFiat(tip, rate), currency)}
+        {:else}
+          {s(tip)}
+        {/if}
         ({Math.round((tip * 100) / Math.abs(a))}%)
       </div>
     </div>
@@ -56,7 +65,11 @@
     <div>
       <span class="text-lg text-secondary">Total</span>
       <div>
-        {f(toFiat(a + (tip || 0), rate), currency)}
+        {#if $fiat}
+          {f(toFiat(a + (tip || 0), rate), currency)}
+        {:else}
+          {s(a + (tip || 0))}
+        {/if}
       </div>
     </div>
   {/if}
diff --git a/src/routes/(app)/send/ark/[address]/+page.svelte b/src/routes/(app)/send/ark/[address]/+page.svelte
index 086cf989..140a2393 100644
--- a/src/routes/(app)/send/ark/[address]/+page.svelte
+++ b/src/routes/(app)/send/ark/[address]/+page.svelte
@@ -1,9 +1,10 @@
 <script>
   import { tick } from "svelte";
-  import { t } from "$lib/translations";  import Numpad from "$comp/Numpad.svelte";
+  import { t } from "$lib/translations";
+  import Numpad from "$comp/Numpad.svelte";
   import { page } from "$app/stores";
-  import { rate } from "$lib/store";
-  import { loc, fail, s } from "$lib/utils";
+  import { fiat as fiatStore, rate } from "$lib/store";
+  import { loc, fail, s, f, sats } from "$lib/utils";
   import { getWallet } from "$lib/ark";
 
   let { data } = $props();
@@ -60,7 +61,12 @@
       type="button"
       class="btn !w-auto grow"
       onclick={setMax}
-      onkeydown={setMax}>Max ⚡️{s(balance)}</button
+      onkeydown={setMax}
+      >{#if $fiatStore}
+        Max {f((balance * $rate) / sats, currency, locale)}
+      {:else}
+        Max ⚡️{s(balance)}
+      {/if}</button
     >
 
     <form
diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
index 4e0bb43d..fc93ba3c 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -1,9 +1,10 @@
 <script>
   import { tick } from "svelte";
-  import { t } from "$lib/translations";  import Numpad from "$comp/Numpad.svelte";
+  import { t } from "$lib/translations";
+  import Numpad from "$comp/Numpad.svelte";
   import { page } from "$app/stores";
-  import { rate } from "$lib/store";
-  import { loc, fail, s } from "$lib/utils";
+  import { fiat as fiatStore, rate } from "$lib/store";
+  import { loc, fail, s, f, sats } from "$lib/utils";
 
   let { data } = $props();
 
@@ -40,7 +41,12 @@
       type="button"
       class="btn !w-auto grow"
       onclick={setMax}
-      onkeydown={setMax}>Max ⚡️{s(balance)}</button
+      onkeydown={setMax}
+      >{#if $fiatStore}
+        Max {f((balance * $rate) / sats, currency, locale)}
+      {:else}
+        Max ⚡️{s(balance)}
+      {/if}</button
     >
 
     <form action={`/send/bitcoin/${address}/${amount}`} class="contents">
diff --git a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
index f6b8cb6d..9cedbf8a 100644
--- a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
@@ -4,9 +4,9 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { pin } from "$lib/store";
+  import { fiat as fiatStore, pin } from "$lib/store";
   import handler from "$lib/handler";
-  import { loc, s } from "$lib/utils";
+  import { loc, s, f, sats } from "$lib/utils";
   import { applyAction, deserialize } from "$app/forms";
 
   let { data, form } = $props();
@@ -68,7 +68,12 @@
         class="btn !w-auto grow"
         onclick={setMax}
         disabled={submitting}
-        onkeydown={setMax}>Max ⚡️{s(balance)}</button
+        onkeydown={setMax}
+        >{#if $fiatStore}
+          Max {f((balance * rate) / sats, currency, locale)}
+        {:else}
+          Max ⚡️{s(balance)}
+        {/if}</button
       >
 
       <button
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 187c13c5..9cc2f0a6 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -5,10 +5,11 @@
   import { onDestroy, onMount } from "svelte";
   import { t } from "$lib/translations";
   import { goto, invalidateAll } from "$app/navigation";
-  import { pin } from "$lib/store";
+  import { fiat as fiatStore, pin } from "$lib/store";
   import { enhance } from "$app/forms";
   import Amount from "$comp/Amount.svelte";
-  import Avatar from "$comp/Avatar.svelte";  import Numpad from "$comp/Numpad.svelte";
+  import Avatar from "$comp/Avatar.svelte";
+  import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
   import {
@@ -143,12 +144,15 @@
             <span class="mr-2">{i.quantity}</span>
             {i.name}
           </div>
-          <div class="font-semibold text-right">
-            {f(i.price * i.quantity, invoice.currency)}
-          </div>
-          <div class="text-secondary text-right text-lg my-auto">
-            {sat(btc(i.price * i.quantity, invoice.rate))}
-          </div>
+          {#if $fiatStore}
+            <div class="font-semibold text-right col-span-2">
+              {f(i.price * i.quantity, invoice.currency)}
+            </div>
+          {:else}
+            <div class="text-secondary text-right text-lg my-auto col-span-2">
+              {sat(btc(i.price * i.quantity, invoice.rate))}
+            </div>
+          {/if}
         </div>
       {/each}
     {/if}
@@ -189,7 +193,12 @@
           type="button"
           class="btn !w-auto grow"
           onclick={setMax}
-          onkeydown={setMax}>Max ⚡️{s(balance)}</button
+          onkeydown={setMax}
+          >{#if $fiatStore}
+            Max {f((balance * rate) / sats, currency, locale)}
+          {:else}
+            Max ⚡️{s(balance)}
+          {/if}</button
         >
 
         <button
diff --git a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
index bc9e72b6..4dfaabc2 100644
--- a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
@@ -7,7 +7,7 @@
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
   import { loc, back, toFiat, f, s, focus } from "$lib/utils";
-  import { rate, pin } from "$lib/store";
+  import { fiat, rate, pin } from "$lib/store";
 
   let { data, form } = $props();
 
@@ -64,10 +64,13 @@
 
         <div class="flex flex-wrap gap-4 justify-center">
           <div class="my-auto">
-            <h2 class="text-xl">
-              {f(toFiat(ourfee, $rate), currency)}
-            </h2>
-            <h3 class="text-secondary">⚡️{s(ourfee)}</h3>
+            {#if $fiat}
+              <h2 class="text-xl">
+                {f(toFiat(ourfee, $rate), currency)}
+              </h2>
+            {:else}
+              <h3 class="text-secondary">⚡️{s(ourfee)}</h3>
+            {/if}
           </div>
         </div>
       </div>
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index 06bc97d5..c61cda45 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -5,12 +5,12 @@
   import { page } from "$app/stores";
   import { tick } from "svelte";
   import { t } from "$lib/translations";
-  import { s, copy, fail } from "$lib/utils";
+  import { s, f, sats, copy, fail } from "$lib/utils";
   import {
     PUBLIC_COINOS_PUBKEY as pk,
     PUBLIC_COINOS_RELAY as relay,
   } from "$env/static/public";
-  import { signer, save } from "$lib/store";
+  import { fiat, rate, signer, save } from "$lib/store";
 
   let { data } = $props();
   let { apps, challenge, user } = $derived(data);
@@ -69,8 +69,13 @@
                     icon="ph:lightning-fill"
                     class="text-yellow-300"
                   ></iconify-icon>
-                  {s(app.spent, locale)} /
-                  {s(app.max_amount, locale)}
+                  {#if $fiat && $rate}
+                    {f((app.spent * $rate) / sats, user.currency, locale)} /
+                    {f((app.max_amount * $rate) / sats, user.currency, locale)}
+                  {:else}
+                    {s(app.spent, locale)} /
+                    {s(app.max_amount, locale)}
+                  {/if}
                 </div>
 
                 {#if app.budget_renewal !== "never"}