fix amount toggles

13 files changed, 79 insertions, 135 deletions

diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index f368e96c..1f2b1f29 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -33,25 +33,17 @@
         onclick={toggleFiat}
         aria-label="Toggle currency display"
       >
-        {#if !canShowFiat}
-          <iconify-icon noobserver {icon} class="text-yellow-300"></iconify-icon>
-        {/if}
-        {#if canShowFiat}
-          {f(toFiat(amount, rate), currency, locale)}
-        {:else}
-          {s(amount, locale)}
-        {/if}
+        <iconify-icon noobserver {icon} class="text-yellow-300" class:hidden={canShowFiat}></iconify-icon>
+        <span class:hidden={!canShowFiat}>{f(toFiat(amount, rate), currency, locale)}</span>
+        <span class:hidden={canShowFiat}>{s(amount, locale)}</span>
       </button>
 
       {#if tip}
         <div class="flex items-center text-lg ml-2">
           <div>+</div>
           <div class="font-semibold">
-            {#if canShowFiat}
-              {f(toFiat(tip, rate), currency, locale)}
-            {:else}
-              {s(tip, locale)}
-            {/if}
+            <span class:hidden={!canShowFiat}>{f(toFiat(tip, rate), currency, locale)}</span>
+            <span class:hidden={canShowFiat}>{s(tip, locale)}</span>
           </div>
         </div>
       {/if}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 105eb471..b572ed93 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -66,11 +66,8 @@
   <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>
-    {#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 class="col-span-4 font-semibold text-right my-auto" class:hidden={!$fiat}>{f(itemTotal, currency)}</div>
+    <div class="col-span-4 font-semibold text-right my-auto" class:hidden={$fiat}>{sat(btc(itemTotal, rate))}</div>
   </div>
 {/each}
 
diff --git a/src/components/Lnurlw.svelte b/src/components/Lnurlw.svelte
index 0cc6f824..b952b082 100644
--- a/src/components/Lnurlw.svelte
+++ b/src/components/Lnurlw.svelte
@@ -48,13 +48,10 @@
 
   {#if minWithdrawable === maxWithdrawable}
     <div class="text-center font-bold text-2xl mb-4">
-      {#if $fiat}
-        <div>{f(amountFiat, currency)}</div>
-      {:else}
-        <div>
-          <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span>
-        </div>
-      {/if}
+      <div class:hidden={!$fiat}>{f(amountFiat, currency)}</div>
+      <div class:hidden={$fiat}>
+        <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span>
+      </div>
     </div>
   {:else}
     <Numpad bind:amount {currency} {rate} {locale} />
@@ -78,11 +75,8 @@
           disabled={submitting}
           onkeydown={setMax}
         >
-          {#if $fiat}
-            Max {f((Math.floor(maxWithdrawable / 1000) * rate) / sats, currency)}
-          {:else}
-            Max ⚡️{s(Math.floor(maxWithdrawable / 1000))}
-          {/if}
+          <span class:hidden={!$fiat}>Max {f((Math.floor(maxWithdrawable / 1000) * rate) / sats, currency)}</span>
+          <span class:hidden={$fiat}>Max ⚡️{s(Math.floor(maxWithdrawable / 1000))}</span>
         </button>
       {/if}
 
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 5ba6e244..8e4cba13 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -255,12 +255,11 @@
     <div class="text-center">
       <div class="text-5xl md:text-6xl font-semibold tracking-widest flex justify-center">
         <div class="my-auto" class:text-5xl={!fiat}>
-          {#if fiat}
+          <span class:hidden={!fiat}>
             {#if position === "before"}{symbol}{/if}
-          {:else}
-            <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
-            ></iconify-icon>
-          {/if}
+          </span>
+          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300" class:hidden={fiat}
+          ></iconify-icon>
         </div>
 
         <!-- contenteditable input -->
@@ -302,12 +301,11 @@
           swap();
         }}
       >
-        {#if fiat}
+        <span class="flex items-center" class:hidden={!fiat}>
           <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
           {s(amount, locale)}
-        {:else}
-          {f(amountFiat, currency, locale)}
-        {/if}
+        </span>
+        <span class:hidden={fiat}>{f(amountFiat, currency, locale)}</span>
       </button>
     </div>
 
diff --git a/src/components/Payments.svelte b/src/components/Payments.svelte
index b616742f..a16bf4ea 100644
--- a/src/components/Payments.svelte
+++ b/src/components/Payments.svelte
@@ -24,14 +24,11 @@
     >
       <div class="whitespace-nowrap my-auto col-span-3">
         <button class="font-bold flex items-center" onclick={(e) => { e.stopPropagation(); $fiat = !$fiat; }}>
-          <div class="flex items-center">
-            {#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 class:hidden={!$fiat}>{f(Math.abs(amount) * (p.rate / sats), p.currency, locale)}</div>
+          <div class="flex items-center" class:hidden={$fiat}>
+            <iconify-icon noobserver icon="ph:lightning-fill" width="24" class="text-yellow-300"
+            ></iconify-icon>
+            <div>{s(Math.abs(amount), locale)}</div>
           </div>
         </button>
 
diff --git a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
index 5da0c1c3..217b9ced 100644
--- a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
+++ b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
@@ -27,13 +27,10 @@
 
   {#if amount > 0}
     <div class="text-center font-bold text-2xl">
-      {#if $fiat}
-        <div>{f(amountFiat, currency)}</div>
-      {:else}
-        <div>
-          <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span>
-        </div>
-      {/if}
+      <div class:hidden={!$fiat}>{f(amountFiat, currency)}</div>
+      <div class:hidden={$fiat}>
+        <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span>
+      </div>
     </div>
   {/if}
 
@@ -44,17 +41,14 @@
 
   {#if spent > 0}
     <div class="text-center font-bold text-2xl">
-      {#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 class:hidden={!$fiat}>
+        {f(spentFiat, currency)}
+        <span class=" text-red-600">{$t("payments.spent")}</span>
+      </div>
+      <div class:hidden={$fiat}>
+        <span class="text-secondary font-normal text-xl">⚡️{`${s(spent)}`}</span>
+        <span class=" text-red-600">{$t("payments.spent")}</span>
+      </div>
     </div>
   {/if}
 
diff --git a/src/routes/(app)/fund/[id]/withdraw/+page.svelte b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
index 64597d53..4ef2ad62 100644
--- a/src/routes/(app)/fund/[id]/withdraw/+page.svelte
+++ b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
@@ -56,11 +56,8 @@
         disabled={submitting}
         onkeydown={setMax}
       >
-        {#if $fiat}
-          Max {f((balance * rate) / sats, currency, locale)}
-        {:else}
-          Max ⚡️{s(balance)}
-        {/if}
+        <span class:hidden={!$fiat}>Max {f((balance * rate) / sats, currency, locale)}</span>
+        <span class:hidden={$fiat}>Max ⚡️{s(balance)}</span>
       </button>
 
       <button bind:this={submit} type="submit" class="btn btn-accent !w-auto grow" disabled={submitting || !amount}>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 54475f2f..475aac02 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -103,26 +103,22 @@
       <Slider handle={handleSlide} bind:value={tipPercent} />
 
       <div class="flex mb-8 text-lg">
-        {#if $fiat}
-          <div>
-            <span class="mr-1">
-              {f(amountFiat, currency, locale)}
-              <span class="font-semibold">+{f(tipAmount, currency, locale)}</span>
-            </span>
+        <div class:hidden={!$fiat}>
+          <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" class:hidden={$fiat}>
+          <div class="flex items-center">
+            <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
+            ></iconify-icon>
+            <div>{s(amount, locale)}</div>
           </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>
-            </div>
+          <div class="flex items-center">
+            <div class="font-semibold">+{s(tip, locale)}</div>
           </div>
-        {/if}
+        </div>
       </div>
 
       <div class="space-y-2">
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 80474a55..225baa69 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -82,14 +82,11 @@
       onclick={toggleFiat}
       aria-label="Toggle currency display"
     >
-      {#if $fiat}
-        <div>{f(toFiat(amount, rate), currency, userLocale)}</div>
-      {:else}
-        <div class="flex items-center">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
-          {s(amount, userLocale)}
-        </div>
-      {/if}
+      <div class:hidden={!$fiat}>{f(toFiat(amount, rate), currency, userLocale)}</div>
+      <div class="flex items-center" class:hidden={$fiat}>
+        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+        {s(amount, userLocale)}
+      </div>
     </button>
   </div>
 {/snippet}
@@ -144,14 +141,11 @@
       onclick={toggleFiat}
       aria-label="Toggle currency display"
     >
-      {#if $fiat}
-        {f(toFiat(a, rate), currency, userLocale)}
-      {:else}
-        <span class="flex items-center">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
-          {s(a, userLocale)}
-        </span>
-      {/if}
+      <span class:hidden={!$fiat}>{f(toFiat(a, rate), currency, userLocale)}</span>
+      <span class="flex items-center" class:hidden={$fiat}>
+        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+        {s(a, userLocale)}
+      </span>
     </button>
     <div class="text-secondary">
       {format(new Date(created), "MMM d, yyyy", { locale })}<span class="mx-3">{format(new Date(created), "h:mmaaa", { locale })}</span>
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
index 41cdd25b..1efe2c32 100644
--- a/src/routes/(app)/payment/[id]/plain/+page.svelte
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -40,11 +40,8 @@
   <div>
     <span class="text-lg text-secondary">Amount</span>
     <div>
-      {#if $fiat}
-        {f(toFiat(a, rate), currency)}
-      {:else}
-        {s(a)}
-      {/if}
+      <span class:hidden={!$fiat}>{f(toFiat(a, rate), currency)}</span>
+      <span class:hidden={$fiat}>{s(a)}</span>
     </div>
   </div>
 
@@ -52,11 +49,8 @@
     <div>
       <span class="text-lg text-secondary">Tip</span>
       <div>
-        {#if $fiat}
-          {f(toFiat(tip, rate), currency)}
-        {:else}
-          {s(tip)}
-        {/if}
+        <span class:hidden={!$fiat}>{f(toFiat(tip, rate), currency)}</span>
+        <span class:hidden={$fiat}>{s(tip)}</span>
         ({Math.round((tip * 100) / Math.abs(a))}%)
       </div>
     </div>
@@ -64,11 +58,8 @@
     <div>
       <span class="text-lg text-secondary">Total</span>
       <div>
-        {#if $fiat}
-          {f(toFiat(a + (tip || 0), rate), currency)}
-        {:else}
-          {s(a + (tip || 0))}
-        {/if}
+        <span class:hidden={!$fiat}>{f(toFiat(a + (tip || 0), rate), currency)}</span>
+        <span class:hidden={$fiat}>{s(a + (tip || 0))}</span>
       </div>
     </div>
   {/if}
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index bc207aad..1d5a0407 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -151,11 +151,11 @@
   <h1 class="text-center text-3xl md:text-4xl font-semibold">{$t("payments.header")}</h1>
 
   <div class="container w-full mx-auto text-lg px-2 max-w-xl space-y-2">
-    <div class="mx-auto flex justify-center w-full gap-1">
+    <div class="flex w-full gap-1">
       {#each presets as { start, end, title }, i}
         <a
           href={`/payments/${getUnixTime(start)}/1`}
-          class="btn !w-auto"
+          class="btn !w-auto flex-1"
           class:!btn-active={selection === i}
         >
           {title}
@@ -163,17 +163,17 @@
       {/each}
     </div>
 
-    <div class="join flex flex-wrap justify-center">
+    <div class="join flex flex-wrap w-full">
       {#if pages.length > 1}
         {#each pages as _, i}
           {#if showPage(i)}
-            <a href={`${path}/${i + 1}`}>
-              <div class="join-item btn !btn-sm" class:btn-active={parseInt(p) === i + 1}>
+            <a href={`${path}/${i + 1}`} class="flex-1">
+              <div class="join-item btn !btn-sm w-full" class:btn-active={parseInt(p) === i + 1}>
                 {i + 1}
               </div>
             </a>
           {:else if isEllipsis(i)}
-            <div class="join-item btn !w-auto !btn-sm btn-disabled !bg-base-200">...</div>
+            <div class="join-item btn !w-auto !btn-sm btn-disabled !bg-base-200 flex-1">...</div>
           {/if}
         {/each}
       {/if}
diff --git a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
index 38407a0d..fc80e161 100644
--- a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
@@ -120,11 +120,8 @@
 
         <div class="flex flex-wrap gap-4 justify-center">
           <div class="my-auto">
-            {#if $fiat}
-              <h2 class="text-xl">{f(toFiat(ourfee as number, $rate as number), currency)}</h2>
-            {:else}
-              <h3 class="text-secondary">⚡️{s(ourfee)}</h3>
-            {/if}
+            <h2 class="text-xl" class:hidden={!$fiat}>{f(toFiat(ourfee as number, $rate as number), currency)}</h2>
+            <h3 class="text-secondary" class:hidden={$fiat}>⚡️{s(ourfee)}</h3>
           </div>
         </div>
       </div>
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index 844433c3..90c7bf1e 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -70,11 +70,8 @@
                 <div class="flex items-center">
                   <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
                   ></iconify-icon>
-                  {#if $fiat && $rate}
-                    {f((app.spent * ($rate as number)) / sats, user.currency, locale)} / {f((app.max_amount * ($rate as number)) / sats, user.currency, locale)}
-                  {:else}
-                    {s(app.spent, locale)} / {s(app.max_amount, locale)}
-                  {/if}
+                  <span class:hidden={!($fiat && $rate)}>{f((app.spent * ($rate as number)) / sats, user.currency, locale)} / {f((app.max_amount * ($rate as number)) / sats, user.currency, locale)}</span>
+                  <span class:hidden={$fiat && $rate}>{s(app.spent, locale)} / {s(app.max_amount, locale)}</span>
                 </div>
 
                 {#if app.budget_renewal !== "never"}