fix: label main and secondary balances

MetaMask · Feb 13, 2025 · 62f8e82 · 62f8e82
1 parent 85c526b
commit 62f8e82
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 105 deletions.
diff --git a/app/components/UI/AssetElement/index.constants.ts b/app/components/UI/AssetElement/index.constants.ts
@@ -1,2 +1,2 @@
-export const FIAT_BALANCE_TEST_ID = 'fiat-balance-test-id';
-export const MAIN_BALANCE_TEST_ID = 'main-balance-test-id';
+export const BALANCE_TEST_ID = 'balance-test-id';
+export const SECONDARY_BALANCE_TEST_ID = 'secondary-balance-test-id';
diff --git a/app/components/UI/AssetElement/index.test.tsx b/app/components/UI/AssetElement/index.test.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { render, fireEvent } from '@testing-library/react-native';
 import AssetElement from './';
 import { getAssetTestId } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
-import { FIAT_BALANCE_TEST_ID, MAIN_BALANCE_TEST_ID } from './index.constants';
+import { BALANCE_TEST_ID, SECONDARY_BALANCE_TEST_ID } from './index.constants';
 
 describe('AssetElement', () => {
   const onPressMock = jest.fn();
@@ -28,7 +28,7 @@ describe('AssetElement', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('renders the asset balance if provided', () => {
+  it('renders the main balance if provided', () => {
     const { getByText } = render(
       <AssetElement asset={erc20Token} balance={erc20Token.balance} />,
     );
@@ -56,33 +56,33 @@ describe('AssetElement', () => {
     expect(onLongPressMock).toHaveBeenCalledWith(erc20Token);
   });
 
-  it('renders the fiat and token balance', () => {
+  it('renders the main and secondary balance', () => {
     const { getByTestId } = render(
       <AssetElement
         balance={erc20Token.balance}
-        mainBalance={erc20Token.balance}
+        secondaryBalance={erc20Token.balance}
         asset={erc20Token}
       />,
     );
 
-    expect(getByTestId(FIAT_BALANCE_TEST_ID)).toBeDefined();
-    expect(getByTestId(MAIN_BALANCE_TEST_ID)).toBeDefined();
+    expect(getByTestId(BALANCE_TEST_ID)).toBeDefined();
+    expect(getByTestId(SECONDARY_BALANCE_TEST_ID)).toBeDefined();
   });
 
-  it('renders the fiat balance with privacy mode', () => {
+  it('renders the main and secondary balance with privacy mode', () => {
     const { getByTestId } = render(
       <AssetElement
         asset={erc20Token}
         balance={erc20Token.balance}
-        mainBalance={erc20Token.balance}
+        secondaryBalance={erc20Token.balance}
         privacyMode
       />,
     );
 
-    const fiatBalance = getByTestId(FIAT_BALANCE_TEST_ID);
-    const mainBalance = getByTestId(MAIN_BALANCE_TEST_ID);
+    const mainBalance = getByTestId(BALANCE_TEST_ID);
+    const secondaryBalance = getByTestId(SECONDARY_BALANCE_TEST_ID);
 
-    expect(fiatBalance.props.children).toBe('•••••••••');
-    expect(mainBalance.props.children).toBe('••••••');
+    expect(mainBalance.props.children).toBe('•••••••••');
+    expect(secondaryBalance.props.children).toBe('••••••');
   });
 });
diff --git a/app/components/UI/AssetElement/index.tsx b/app/components/UI/AssetElement/index.tsx
@@ -16,15 +16,15 @@ import { useTheme } from '../../../util/theme';
 import SensitiveText, {
   SensitiveTextLength,
 } from '../../../component-library/components/Texts/SensitiveText';
-import { FIAT_BALANCE_TEST_ID, MAIN_BALANCE_TEST_ID } from './index.constants';
+import { BALANCE_TEST_ID, SECONDARY_BALANCE_TEST_ID } from './index.constants';
 
 interface AssetElementProps {
   children?: React.ReactNode;
   asset: TokenI;
   onPress?: (asset: TokenI) => void;
   onLongPress?: ((asset: TokenI) => void) | null;
   balance?: string;
-  mainBalance?: string | null;
+  secondaryBalance?: string;
   privacyMode?: boolean;
 }
 
@@ -48,7 +48,7 @@ const createStyles = (colors: Colors) =>
     skeleton: {
       width: 50,
     },
-    balanceFiat: {
+    secondaryBalance: {
       color: colors.text.alternative,
       paddingHorizontal: 0,
       ...fontStyles.normal,
@@ -62,8 +62,8 @@ const createStyles = (colors: Colors) =>
 const AssetElement: React.FC<AssetElementProps> = ({
   children,
   balance,
+  secondaryBalance,
   asset,
-  mainBalance = null,
   onPress,
   onLongPress,
   privacyMode = false,
@@ -101,7 +101,7 @@ const AssetElement: React.FC<AssetElementProps> = ({
             }
             isHidden={privacyMode}
             length={SensitiveTextLength.Medium}
-            testID={FIAT_BALANCE_TEST_ID}
+            testID={BALANCE_TEST_ID}
           >
             {balance === TOKEN_BALANCE_LOADING ? (
               <SkeletonText thin style={styles.skeleton} />
@@ -110,18 +110,18 @@ const AssetElement: React.FC<AssetElementProps> = ({
             )}
           </SensitiveText>
         )}
-        {mainBalance ? (
+        {secondaryBalance ? (
           <SensitiveText
             variant={TextVariant.BodyMD}
-            style={styles.balanceFiat}
+            style={styles.secondaryBalance}
             isHidden={privacyMode}
             length={SensitiveTextLength.Short}
-            testID={MAIN_BALANCE_TEST_ID}
+            testID={SECONDARY_BALANCE_TEST_ID}
           >
-            {mainBalance === TOKEN_BALANCE_LOADING ? (
+            {secondaryBalance === TOKEN_BALANCE_LOADING ? (
               <SkeletonText thin style={styles.skeleton} />
             ) : (
-              mainBalance
+              secondaryBalance
             )}
           </SensitiveText>
         ) : null}

diff --git a/app/components/UI/AssetOverview/Balance/Balance.tsx b/app/components/UI/AssetOverview/Balance/Balance.tsx
@@ -144,8 +144,8 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
       </Text>
       <AssetElement
         asset={asset}
-        mainBalance={mainBalance}
-        balance={secondaryBalance}
+        balance={mainBalance}
+        secondaryBalance={secondaryBalance}
         onPress={() =>
           !asset.isETH &&
           !asset.isNative &&

diff --git a/app/components/UI/AssetOverview/Balance/__snapshots__/index.test.tsx.snap b/app/components/UI/AssetOverview/Balance/__snapshots__/index.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Balance should render correctly with a fiat balance 1`] = `
+exports[`Balance should render correctly with main and secondary balance 1`] = `
 <View
   style={
     {
@@ -199,9 +199,9 @@ exports[`Balance should render correctly with a fiat balance 1`] = `
             "lineHeight": 24,
           }
         }
-        testID="fiat-balance-test-id"
+        testID="balance-test-id"
       >
-        456
+        123
       </Text>
       <Text
         accessibilityRole="text"
@@ -217,16 +217,16 @@ exports[`Balance should render correctly with a fiat balance 1`] = `
             "textTransform": "uppercase",
           }
         }
-        testID="main-balance-test-id"
+        testID="secondary-balance-test-id"
       >
-        123
+        456
       </Text>
     </View>
   </TouchableOpacity>
 </View>
 `;
 
-exports[`Balance should render correctly without a fiat balance 1`] = `
+exports[`Balance should render correctly without a secondary balance 1`] = `
 <View
   style={
     {
@@ -417,17 +417,15 @@ exports[`Balance should render correctly without a fiat balance 1`] = `
         accessibilityRole="text"
         style={
           {
-            "color": "#6a737d",
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 14,
-            "fontWeight": "400",
+            "color": "#141618",
+            "fontFamily": "EuclidCircularB-Medium",
+            "fontSize": 16,
+            "fontWeight": "500",
             "letterSpacing": 0,
-            "lineHeight": 22,
-            "paddingHorizontal": 0,
-            "textTransform": "uppercase",
+            "lineHeight": 24,
           }
         }
-        testID="main-balance-test-id"
+        testID="balance-test-id"
       >
         123
       </Text>

diff --git a/app/components/UI/AssetOverview/Balance/index.test.tsx b/app/components/UI/AssetOverview/Balance/index.test.tsx
@@ -152,7 +152,7 @@ describe('Balance', () => {
   });
 
   if (!isPortfolioViewEnabled()) {
-    it('should render correctly with a fiat balance', () => {
+    it('should render correctly with main and secondary balance', () => {
       const wrapper = render(
         <Balance asset={mockDAI} mainBalance="123" secondaryBalance="456" />,
       );
@@ -161,7 +161,7 @@ describe('Balance', () => {
   }
 
   if (!isPortfolioViewEnabled()) {
-    it('should render correctly without a fiat balance', () => {
+    it('should render correctly without a secondary balance', () => {
       const wrapper = render(
         <Balance
           asset={mockDAI}

diff --git a/app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap b/app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap
@@ -1102,17 +1102,15 @@ exports[`AssetOverview should render correctly 1`] = `
             accessibilityRole="text"
             style={
               {
-                "color": "#6a737d",
-                "fontFamily": "EuclidCircularB-Regular",
-                "fontSize": 14,
-                "fontWeight": "400",
+                "color": "#141618",
+                "fontFamily": "EuclidCircularB-Medium",
+                "fontSize": 16,
+                "fontWeight": "500",
                 "letterSpacing": 0,
-                "lineHeight": 22,
-                "paddingHorizontal": 0,
-                "textTransform": "uppercase",
+                "lineHeight": 24,
               }
             }
-            testID="main-balance-test-id"
+            testID="balance-test-id"
           >
             0 ETH
           </Text>
@@ -2241,9 +2239,9 @@ exports[`AssetOverview should render correctly when portfolio view is enabled 1`
                 "lineHeight": 24,
               }
             }
-            testID="fiat-balance-test-id"
+            testID="balance-test-id"
           >
-            1500
+            0 ETH
           </Text>
           <Text
             accessibilityRole="text"
@@ -2259,9 +2257,9 @@ exports[`AssetOverview should render correctly when portfolio view is enabled 1`
                 "textTransform": "uppercase",
               }
             }
-            testID="main-balance-test-id"
+            testID="secondary-balance-test-id"
           >
-            0 ETH
+            1500
           </Text>
         </View>
       </TouchableOpacity>

diff --git a/app/components/UI/NonEvmTokens/__snapshots__/index.test.tsx.snap b/app/components/UI/NonEvmTokens/__snapshots__/index.test.tsx.snap
@@ -554,7 +554,7 @@ exports[`NonEvmTokens should render correctly 1`] = `
                                     "lineHeight": 24,
                                   }
                                 }
-                                testID="fiat-balance-test-id"
+                                testID="balance-test-id"
                               >
                                 5.5 SOL
                               </Text>
@@ -572,7 +572,7 @@ exports[`NonEvmTokens should render correctly 1`] = `
                                     "textTransform": "uppercase",
                                   }
                                 }
-                                testID="main-balance-test-id"
+                                testID="secondary-balance-test-id"
                               >
                                 <View
                                   style={

diff --git a/app/components/UI/NonEvmTokens/index.test.tsx b/app/components/UI/NonEvmTokens/index.test.tsx
@@ -101,6 +101,7 @@ const initialState = {
   },
   settings: {
     showTestNetworks: true,
+    primaryCurrency: 'ETH',
   },
 };
 
@@ -128,14 +129,14 @@ describe('NonEvmTokens', () => {
   it('should display the Solana token with correct balance', async () => {
     const { getByTestId, getByText } = renderComponent();
     expect(getByText('Solana')).toBeDefined();
-    const balanceText = getByTestId('fiat-balance-test-id');
+    const balanceText = getByTestId('balance-test-id');
     expect(balanceText.props.children).toBe('5.5 SOL');
   });
 
   it('should show fiat value', async () => {
     const { getByTestId } = renderComponent();
     // With balance 5.5 and conversion rate 100, fiat value should be $550.00
-    const balanceText = getByTestId('main-balance-test-id');
+    const balanceText = getByTestId('secondary-balance-test-id');
     expect(balanceText).toBeDefined();
   });
 

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx
@@ -207,7 +207,7 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
       {hasEthToUnstake && !isLoadingPooledStakesData && (
         <AssetElement
           asset={asset}
-          mainBalance={stakedBalanceETH}
+          secondaryBalance={stakedBalanceETH}
           balance={stakedBalanceFiat}
         >
           <BadgeWrapper

diff --git a/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx b/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx
@@ -324,8 +324,8 @@ export const TokenListItem = React.memo(
         onPress={onItemPress}
         onLongPress={asset.isETH || asset.isNative ? null : showRemoveMenu}
         asset={asset}
-        balance={secondaryBalance}
-        mainBalance={mainBalance}
+        balance={mainBalance}
+        secondaryBalance={secondaryBalance}
         privacyMode={privacyMode}
       >
         {showNetworkBadge ? (