From f4626d39816da0b94fa6d7da75443f766e2b2da1 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 7 Nov 2024 09:04:02 +0100
Subject: [PATCH] frontend: fix estimate symbol
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The estimate (≈) symbol should be placed before the amount and sign
separated by a white-space.

Example:

    ≈ +100.-
---
 .../web/src/components/amount/amount.tsx      | 10 +---------
 .../transactions/transaction.module.css       |  1 +
 .../components/transactions/transaction.tsx   | 19 ++++++++++++++++---
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontends/web/src/components/amount/amount.tsx b/frontends/web/src/components/amount/amount.tsx
index dae45d56c8..7f2a1b8755 100644
--- a/frontends/web/src/components/amount/amount.tsx
+++ b/frontends/web/src/components/amount/amount.tsx
@@ -28,7 +28,6 @@ type TProps = {
   removeBtcTrailingZeroes?: boolean;
   alwaysShowAmounts?: boolean
   allowRotateCurrencyOnMobile?: boolean;
-  estimated?: boolean;
 };
 
 const formatSats = (amount: string): JSX.Element => {
@@ -99,7 +98,6 @@ export const Amount = ({
   removeBtcTrailingZeroes,
   alwaysShowAmounts = false,
   allowRotateCurrencyOnMobile = false,
-  estimated = false
 }: TProps) => {
   const { rotateDefaultCurrency } = useContext(RatesContext);
   const isMobile = useMediaQuery('(max-width: 768px)');
@@ -118,7 +116,6 @@ export const Amount = ({
         unit={unit}
         removeBtcTrailingZeroes={removeBtcTrailingZeroes}
         alwaysShowAmounts={alwaysShowAmounts}
-        estimated={estimated}
       />
     </span>
   );
@@ -129,7 +126,6 @@ export const FormattedAmount = ({
   unit,
   removeBtcTrailingZeroes,
   alwaysShowAmounts = false,
-  estimated = false,
 }: TProps) => {
   const { hideAmounts } = useContext(AppContext);
   const { decimal, group } = useContext(LocalizationContext);
@@ -161,9 +157,5 @@ export const FormattedAmount = ({
     return formatSats(amount);
   }
 
-  let prefix = '';
-  if (estimated) {
-    prefix = '\u2248'; //≈
-  }
-  return prefix + formatLocalizedAmount(amount, group, decimal);
+  return formatLocalizedAmount(amount, group, decimal);
 };
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index 0582f1829b..870f31c5ed 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/frontends/web/src/components/transactions/transaction.module.css
@@ -95,6 +95,7 @@
   color: var(--color-green);
 }
 
+.txPrefix,
 .txUnit {
   color: var(--color-secondary);
   font-size: 14px;
diff --git a/frontends/web/src/components/transactions/transaction.tsx b/frontends/web/src/components/transactions/transaction.tsx
index af108be551..f1c83dd716 100644
--- a/frontends/web/src/components/transactions/transaction.tsx
+++ b/frontends/web/src/components/transactions/transaction.tsx
@@ -157,12 +157,16 @@ const Amounts = ({
   const conversion = amount?.conversions && amount?.conversions[defaultCurrency];
   const sign = getTxSign(type);
   const txTypeClass = `txAmount-${type}`;
+  const conversionPrefix = amount.estimated ? '\u2248' : null; // ≈
   return (
     <span className={`${styles.txAmountsColumn} ${styles[txTypeClass]}`}>
       {/* <data value={amount.amount}> */}
       <span className={styles.txAmount}>
         {sign}
-        <Amount amount={amount.amount} unit={amount.unit} />
+        <Amount
+          amount={amount.amount}
+          unit={amount.unit}
+        />
         <span className={styles.txUnit}>
           {' '}
           {amount.unit}
@@ -170,8 +174,17 @@ const Amounts = ({
       </span>
       {/* </data> */}
       <span className={styles.txConversionAmount}>
-        {sign}
-        <Amount amount={conversion || ''} unit={defaultCurrency} estimated={amount.estimated}/>
+        {conversionPrefix && (
+          <span className={styles.txPrefix}>
+            {conversionPrefix}
+            {' '}
+          </span>
+        )}
+        {conversion && sign}
+        <Amount
+          amount={conversion || ''}
+          unit={defaultCurrency}
+        />
         <span className={styles.txUnit}>
           {' '}
           {defaultCurrency}