From 6a80d9e0653004ac389a036aa6b602057e46f8e5 Mon Sep 17 00:00:00 2001
From: vetalcore <vetalcore@gmail.com>
Date: Wed, 18 Dec 2024 16:02:31 +0200
Subject: [PATCH] fix: [lw-12001, lw-12005] fix token input symbol (#1605)

---
 .../Form/CoinInput/__tests__/useSelectedCoins.test.ts       | 4 ++--
 .../components/Form/CoinInput/useSelectedCoins.tsx          | 4 ++--
 .../staking/components/StakingInfo/StakingInfo.module.scss  | 6 ++++++
 .../features/staking/components/StakingInfo/StakingInfo.tsx | 4 +++-
 .../staking/components/StakingInfo/Stats.module.scss        | 1 +
 .../overview/StakingInfoCard/StakingInfoCard.module.scss    | 6 ++++++
 .../features/overview/StakingInfoCard/StakingInfoCard.tsx   | 4 +++-
 .../src/features/overview/StakingInfoCard/Stats.module.scss | 1 +
 8 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/__tests__/useSelectedCoins.test.ts b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/__tests__/useSelectedCoins.test.ts
index 752fd88848..de4f738f60 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/__tests__/useSelectedCoins.test.ts
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/__tests__/useSelectedCoins.test.ts
@@ -242,8 +242,8 @@ describe('useSelectedCoin', () => {
       const { result } = renderUseSelectedCoins(props);
 
       expect(result.current.selectedCoins).toHaveLength(1);
-      expect(result.current.selectedCoins[0].fiatValue).toEqual('= 2000000.00 usd');
-      expect(result.current.selectedCoins[0].formattedFiatValue).toEqual('= 2.00M usd');
+      expect(result.current.selectedCoins[0].fiatValue).toEqual('≈ 2000000.00 usd');
+      expect(result.current.selectedCoins[0].formattedFiatValue).toEqual('≈ 2.00M usd');
       expect(result.current.selectedCoins[0].maxDecimals).toEqual(6);
       expect(result.current.selectedCoins[0].allowFloat).toEqual(true);
     });
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx
index b5307933b0..61f1e48a75 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx
@@ -218,8 +218,8 @@ export const useSelectedCoins = ({
             })
           })
         },
-        formattedFiatValue: `= ${compactNumberWithUnit(fiatValue)} ${fiatCurrency?.code}`,
-        fiatValue: `= ${fiatValue} ${fiatCurrency?.code}`,
+        formattedFiatValue: `≈ ${compactNumberWithUnit(fiatValue)} ${fiatCurrency?.code}`,
+        fiatValue: `≈ ${fiatValue} ${fiatCurrency?.code}`,
         maxDecimals: cardanoCoin.decimals
       } as AssetInputListProps['rows'][number];
     }
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.module.scss
index d6438ccd28..682779f3ea 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.module.scss
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.module.scss
@@ -49,6 +49,12 @@
       padding: 0 size_unit(2);
     }
   }
+
+  .colContent {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .suffix {
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.tsx
index 0f7d5a94eb..6f22f780a4 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakingInfo.tsx
@@ -149,7 +149,9 @@ export const StakingInfo = ({
                 text={t('browserView.staking.stakingInfo.stats.stakeKey')}
                 value={
                   <Tooltip content={rewardAccount.address}>
-                    {popupView ? addEllipsis(rewardAccount.address, 14, 9) : rewardAccount.address}
+                    <div className={styles.colContent}>
+                      {popupView ? addEllipsis(rewardAccount.address, 14, 9) : rewardAccount.address}
+                    </div>
                   </Tooltip>
                 }
                 dataTestid="stats-stake-key"
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/Stats.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/Stats.module.scss
index a41c5b1212..4cbadefd22 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/Stats.module.scss
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/Stats.module.scss
@@ -3,6 +3,7 @@
 .stat {
   display: flex;
   flex-direction: column;
+  max-width: 100%;
 
   .title {
     color: var(--text-color-secondary);
diff --git a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.module.scss b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.module.scss
index 22aac13dc5..3e58f77429 100644
--- a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.module.scss
+++ b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.module.scss
@@ -41,6 +41,12 @@
       padding: 0 size_unit(2);
     }
   }
+
+  .colContent {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .marker {
diff --git a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
index 7e2532e55e..edebd3771f 100644
--- a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
+++ b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
@@ -190,7 +190,9 @@ export const StakingInfoCard = ({
             <Stats
               text={t('overview.stakingInfoCard.stakeKey')}
               value={
-                <Tooltip content={stakeAddress}>{popupView ? addEllipsis(stakeAddress, 14, 9) : stakeAddress}</Tooltip>
+                <Tooltip content={stakeAddress}>
+                  <div className={styles.colContent}>{popupView ? addEllipsis(stakeAddress, 14, 9) : stakeAddress}</div>
+                </Tooltip>
               }
               dataTestid="stats-stake-key"
             />
diff --git a/packages/staking/src/features/overview/StakingInfoCard/Stats.module.scss b/packages/staking/src/features/overview/StakingInfoCard/Stats.module.scss
index a9897aa9d9..18a4aed24e 100644
--- a/packages/staking/src/features/overview/StakingInfoCard/Stats.module.scss
+++ b/packages/staking/src/features/overview/StakingInfoCard/Stats.module.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   white-space: nowrap;
+  max-width: 100%;
 
   .title {
     color: var(--text-color-secondary);