fix: label main and secondary balances

MetaMask · Feb 14, 2025 · 2b5f232 · 2b5f232
1 parent caa5cde
commit 2b5f232
Show file tree

Hide file tree

Showing 14 changed files with 829 additions and 137 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/AssetOverview.test.tsx b/app/components/UI/AssetOverview/AssetOverview.test.tsx
@@ -46,17 +46,16 @@ const mockInitialState = {
       AccountTrackerController: {
         accountsByChainId: {
           [MOCK_CHAIN_ID]: {
-            [MOCK_ADDRESS_2]: { balance: '0x1' },
+            [MOCK_ADDRESS_2]: { balance: '0xDE0B6B3A7640000' },
           },
         },
       } as const,
-    },
-    CurrencyRateController: {
-      conversionRate: {
-        ETH: {
-          conversionDate: 1732572535.47,
-          conversionRate: 3432.53,
-          usdConversionRate: 3432.53,
+      CurrencyRateController: {
+        currentCurrency: 'USD',
+        currencyRates: {
+          ETH: {
+            conversionRate: 1000,
+          },
         },
       },
     },
@@ -105,6 +104,15 @@ jest.mock('../../../core/Engine', () => ({
         .fn()
         .mockReturnValue(mockNetworkConfiguration),
       setActiveNetwork: jest.fn().mockResolvedValue(undefined),
+      findNetworkClientIdByChainId: jest.fn().mockReturnValue('mainnet'),
+      getNetworkClientById: () => ({
+        configuration: {
+          chainId: '0x1',
+          rpcUrl: 'https://mainnet.infura.io/v3',
+          ticker: 'ETH',
+          type: 'custom',
+        },
+      }),
     },
   },
 }));
@@ -116,10 +124,10 @@ const asset = {
   logo: 'https://upload.wikimedia.org/wikipedia/commons/0/05/Ethereum_logo_2014.svg',
   symbol: 'ETH',
   name: 'Ethereum',
-  isETH: undefined,
+  isETH: true,
   hasBalanceError: false,
   decimals: 18,
-  address: '0x123',
+  address: zeroAddress(),
   aggregators: [],
   image: '',
 };
@@ -338,4 +346,47 @@ describe('AssetOverview', () => {
     const buyButton = queryByTestId(TokenOverviewSelectorsIDs.BUY_BUTTON);
     expect(buyButton).toBeNull();
   });
+
+  it('should render native balance as primary when the primaryCurrency setting is ETH', async () => {
+    const { getByTestId } = renderWithProvider(
+      <AssetOverview
+        asset={asset}
+        displayBuyButton
+        displaySwapsButton
+        swapsIsLive
+      />,
+      { state: mockInitialState },
+    );
+
+    const balance = getByTestId('balance-test-id');
+    const secondaryBalance = getByTestId('secondary-balance-test-id');
+
+    expect(balance.props.children).toEqual('1 ETH');
+    expect(secondaryBalance.props.children).toEqual('$1000');
+  });
+
+  it('should render fiat balance as primary when the primaryCurrency setting is fiat', async () => {
+    const { getByTestId } = renderWithProvider(
+      <AssetOverview
+        asset={asset}
+        displayBuyButton
+        displaySwapsButton
+        swapsIsLive
+      />,
+      {
+        state: {
+          ...mockInitialState,
+          settings: {
+            primaryCurrency: 'fiat',
+          },
+        },
+      },
+    );
+
+    const balance = getByTestId('balance-test-id');
+    const secondaryBalance = getByTestId('secondary-balance-test-id');
+
+    expect(balance.props.children).toEqual('$1000');
+    expect(secondaryBalance.props.children).toEqual('1 ETH');
+  });
 });
diff --git a/app/components/UI/AssetOverview/AssetOverview.tsx b/app/components/UI/AssetOverview/AssetOverview.tsx
@@ -376,19 +376,15 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   }
 
   let mainBalance, secondaryBalance;
-  if (!isPortfolioViewEnabled()) {
-    if (primaryCurrency === 'ETH') {
-      mainBalance = `${balance} ${asset.symbol}`;
-      secondaryBalance = balanceFiat;
-    } else {
-      mainBalance = !balanceFiat ? `${balance} ${asset.symbol}` : balanceFiat;
-      secondaryBalance = !balanceFiat
-        ? balanceFiat
-        : `${balance} ${asset.symbol}`;
-    }
+  const formattedAssetBalance = `${balance} ${
+    (asset.isETH && asset.ticker) || asset.symbol
+  }`;
+  if (primaryCurrency === 'ETH' || !balanceFiat) {
+    mainBalance = formattedAssetBalance;
+    secondaryBalance = balanceFiat;
   } else {
-    mainBalance = `${balance} ${asset.isETH ? asset.ticker : asset.symbol}`;
-    secondaryBalance = asset.balanceFiat || '';
+    mainBalance = balanceFiat;
+    secondaryBalance = formattedAssetBalance;
   }
 
   let currentPrice = 0;

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}