fix amount toggles

5 files changed, 25 insertions, 47 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>