fix: fix asset picker bug

shared/modules/currency-display.utils.test.ts

@@ -1,38 +1,118 @@
-import {
-  showPrimaryCurrency,
-  showSecondaryCurrency,
-} from './currency-display.utils';
-
-describe('showPrimaryCurrency', () => {
-  it('should return true when useNativeCurrencyAsPrimaryCurrency is true', () => {
-    const result = showPrimaryCurrency(true, true);
-    expect(result).toBe(true);
-  });
+import * as currencyDisplayUtils from './currency-display.utils';
+import { getPrimaryValue, getSecondaryValue } from './currency-display.utils';
 
-  it('should return true when isOriginalNativeSymbol is true', () => {
-    const result = showPrimaryCurrency(true, false);
-    expect(result).toBe(true);
+describe('Currency Display Functions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  it('should return false when useNativeCurrencyAsPrimaryCurrency and isOriginalNativeSymbol are false', () => {
-    const result = showPrimaryCurrency(false, false);
-    expect(result).toBe(false);
+  describe('showPrimaryCurrency', () => {
+    it('should return true when useNativeCurrencyAsPrimaryCurrency is true', () => {
+      const result = currencyDisplayUtils.showPrimaryCurrency(true, true);
+      expect(result).toBe(true);
+    });
+
+    it('should return true when isOriginalNativeSymbol is true', () => {
+      const result = currencyDisplayUtils.showPrimaryCurrency(true, false);
+      expect(result).toBe(true);
+    });
+
+    it('should return false when useNativeCurrencyAsPrimaryCurrency and isOriginalNativeSymbol are false', () => {
+      const result = currencyDisplayUtils.showPrimaryCurrency(false, false);
+      expect(result).toBe(false);
+    });
   });
-});
 
-describe('showSecondaryCurrency', () => {
-  it('should return true when useNativeCurrencyAsPrimaryCurrency is false', () => {
-    const result = showSecondaryCurrency(true, false);
-    expect(result).toBe(true);
+  describe('showSecondaryCurrency', () => {
+    it('should return true when useNativeCurrencyAsPrimaryCurrency is false', () => {
+      const result = currencyDisplayUtils.showSecondaryCurrency(true, false);
+      expect(result).toBe(true);
+    });
+
+    it('should return true when isOriginalNativeSymbol is true', () => {
+      const result = currencyDisplayUtils.showSecondaryCurrency(true, true);
+      expect(result).toBe(true);
+    });
+
+    it('should return false when useNativeCurrencyAsPrimaryCurrency is true and isOriginalNativeSymbol is false', () => {
+      const result = currencyDisplayUtils.showSecondaryCurrency(false, true);
+      expect(result).toBe(false);
+    });
   });
 
-  it('should return true when isOriginalNativeSymbol is true', () => {
-    const result = showSecondaryCurrency(true, true);
-    expect(result).toBe(true);
+  describe('getPrimaryValue', () => {
+    it('should return primaryCurrencyDisplay when useNativeCurrencyAsPrimaryCurrency is true and showPrimaryCurrency returns true', () => {
+      const result = getPrimaryValue({
+        useNativeCurrencyAsPrimaryCurrency: true,
+        primaryCurrencyDisplay: 'ETH',
+        showFiat: true,
+        secondaryCurrencyDisplay: 'USD',
+        isOriginalNativeSymbol: true,
+      });
+
+      expect(result).toBe('ETH');
+    });
+
+    it('should return secondaryCurrencyDisplay when useNativeCurrencyAsPrimaryCurrency is false, showFiat is true, and showSecondaryCurrency returns true', () => {
+      const result = getPrimaryValue({
+        useNativeCurrencyAsPrimaryCurrency: false,
+        primaryCurrencyDisplay: 'ETH',
+        showFiat: true,
+        secondaryCurrencyDisplay: 'USD',
+        isOriginalNativeSymbol: true,
+      });
+
+      expect(result).toBe('USD');
+    });
+
+    it('should return undefined when useNativeCurrencyAsPrimaryCurrency is false and showFiat is false', () => {
+      const result = getPrimaryValue({
+        useNativeCurrencyAsPrimaryCurrency: false,
+        primaryCurrencyDisplay: 'ETH',
+        showFiat: false,
+        secondaryCurrencyDisplay: 'USD',
+        isOriginalNativeSymbol: true,
+      });
+
+      expect(result).toBeUndefined();
+    });
   });
 
-  it('should return false when useNativeCurrencyAsPrimaryCurrency is true and isOriginalNativeSymbol is false', () => {
-    const result = showSecondaryCurrency(false, true);
-    expect(result).toBe(false);
+  describe('getSecondaryValue', () => {
+    it('should return secondaryCurrencyDisplay when useNativeCurrencyAsPrimaryCurrency is true and showSecondaryCurrency returns true', () => {
+      const result = getSecondaryValue({
+        useNativeCurrencyAsPrimaryCurrency: true,
+        primaryCurrencyDisplay: 'ETH',
+        showFiat: true,
+        secondaryCurrencyDisplay: 'USD',
+        isOriginalNativeSymbol: true,
+      });
+
+      expect(result).toBe('USD');
+    });
+
+    it('should return primaryCurrencyDisplay when useNativeCurrencyAsPrimaryCurrency is false, showFiat is true, and showPrimaryCurrency returns true', () => {
+      const result = getSecondaryValue({
+        useNativeCurrencyAsPrimaryCurrency: false,
+        primaryCurrencyDisplay: 'ETH',
+        showFiat: true,
+        secondaryCurrencyDisplay: 'USD',
+        isOriginalNativeSymbol: true,
+      });
+
+      expect(result).toBe('ETH');
+    });
+
+    it('should return undefined when useNativeCurrencyAsPrimaryCurrency is false and showFiat is false', () => {
+      const result = getSecondaryValue({
+        useNativeCurrencyAsPrimaryCurrency: false,
+        primaryCurrencyDisplay: 'ETH',
+        showFiat: false,
+        secondaryCurrencyDisplay: 'USD',
+        isOriginalNativeSymbol: true,
+      });
+
+      expect(result).toBeUndefined();
+    });
   });
 });

shared/modules/currency-display.utils.ts

@@ -29,3 +29,80 @@ export const showSecondaryCurrency = (
 
   return false;
 };
+
+type CurrencyDisplayProps = {
+  useNativeCurrencyAsPrimaryCurrency: boolean;
+  primaryCurrencyDisplay: string;
+  showFiat: boolean;
+  secondaryCurrencyDisplay: string;
+  isOriginalNativeSymbol: boolean;
+};
+
+const determineCurrencyDisplay = (
+  useNativeCurrencyAsPrimaryCurrency: boolean,
+  showCurrency: (
+    isOriginalNativeSymbol: boolean,
+    useNativeCurrencyAsPrimaryCurrency: boolean,
+  ) => boolean,
+  displayValue: string,
+  isOriginalNativeSymbol: boolean,
+) => {
+  return showCurrency(
+    isOriginalNativeSymbol,
+    useNativeCurrencyAsPrimaryCurrency,
+  )
+    ? displayValue
+    : undefined;
+};
+
+export const getPrimaryValue = ({
+  useNativeCurrencyAsPrimaryCurrency,
+  primaryCurrencyDisplay,
+  showFiat,
+  secondaryCurrencyDisplay,
+  isOriginalNativeSymbol,
+}: CurrencyDisplayProps) => {
+  if (useNativeCurrencyAsPrimaryCurrency) {
+    return determineCurrencyDisplay(
+      useNativeCurrencyAsPrimaryCurrency,
+      showPrimaryCurrency,
+      primaryCurrencyDisplay,
+      isOriginalNativeSymbol,
+    );
+  }
+
+  return showFiat
+    ? determineCurrencyDisplay(
+        useNativeCurrencyAsPrimaryCurrency,
+        showSecondaryCurrency,
+        secondaryCurrencyDisplay,
+        isOriginalNativeSymbol,
+      )
+    : undefined;
+};
+
+export const getSecondaryValue = ({
+  useNativeCurrencyAsPrimaryCurrency,
+  primaryCurrencyDisplay,
+  showFiat,
+  secondaryCurrencyDisplay,
+  isOriginalNativeSymbol,
+}: CurrencyDisplayProps) => {
+  if (useNativeCurrencyAsPrimaryCurrency) {
+    return determineCurrencyDisplay(
+      useNativeCurrencyAsPrimaryCurrency,
+      showSecondaryCurrency,
+      secondaryCurrencyDisplay,
+      isOriginalNativeSymbol,
+    );
+  }
+
+  return showFiat
+    ? determineCurrencyDisplay(
+        useNativeCurrencyAsPrimaryCurrency,
+        showPrimaryCurrency,
+        primaryCurrencyDisplay,
+        isOriginalNativeSymbol,
+      )
+    : undefined;
+};

ui/components/app/asset-list/asset-list.js

@@ -36,8 +36,8 @@ import {
 import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
 import { useIsOriginalNativeTokenSymbol } from '../../../hooks/useIsOriginalNativeTokenSymbol';
 import {
-  showPrimaryCurrency,
-  showSecondaryCurrency,
+  getPrimaryValue,
+  getSecondaryValue,
 } from '../../../../shared/modules/currency-display.utils';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../helpers/utils/util';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
@@ -104,6 +104,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
     // token.string is the balance displayed in the TokenList UI
     token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
   });
+
   const balanceIsZero = Number(totalFiatBalance) === 0;
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const isBuyableChain = useSelector(getIsNativeTokenBuyable);
@@ -142,28 +143,25 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
         title={nativeCurrency}
         // The primary and secondary currencies are subject to change based on the user's settings
         // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting
-        primary={
-          showSecondaryCurrency(
-            isOriginalNativeSymbol,
-            useNativeCurrencyAsPrimaryCurrency,
-          )
-            ? secondaryCurrencyDisplay
-            : undefined
-        }
+        primary={getPrimaryValue({
+          useNativeCurrencyAsPrimaryCurrency,
+          primaryCurrencyDisplay,
+          showFiat,
+          secondaryCurrencyDisplay,
+          isOriginalNativeSymbol,
+        })}
         tokenSymbol={
           useNativeCurrencyAsPrimaryCurrency
             ? primaryCurrencyProperties.suffix
             : secondaryCurrencyProperties.suffix
         }
-        secondary={
-          showFiat &&
-          showPrimaryCurrency(
-            isOriginalNativeSymbol,
-            useNativeCurrencyAsPrimaryCurrency,
-          )
-            ? primaryCurrencyDisplay
-            : undefined
-        }
+        secondary={getSecondaryValue({
+          useNativeCurrencyAsPrimaryCurrency,
+          primaryCurrencyDisplay,
+          showFiat,
+          secondaryCurrencyDisplay,
+          isOriginalNativeSymbol,
+        })}
         tokenImage={balanceIsLoading ? null : primaryTokenImage}
         isOriginalTokenSymbol={isOriginalNativeSymbol}
         isNativeCurrency

ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx

@@ -55,6 +55,7 @@ export default function Asset({
       secondary={formattedFiat}
       title={title}
       tooltipText={tooltipText}
+      hidePercentage
     />
   );
 }

ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.test.tsx

@@ -2,10 +2,15 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { useSelector } from 'react-redux';
 import { getSelectedAccountCachedBalance } from '../../../../selectors';
-import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
+import {
+  getNativeCurrency,
+  getProviderConfig,
+} from '../../../../ducks/metamask/metamask';
 import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
 import { useCurrencyDisplay } from '../../../../hooks/useCurrencyDisplay';
 import { AssetType } from '../../../../../shared/constants/transaction';
+import { getMultichainCurrentNetwork } from '../../../../selectors/multichain';
+import { PRIMARY } from '../../../../helpers/constants/common';
 import AssetList from './AssetList';
 
 jest.mock('react-redux', () => ({
@@ -14,6 +19,8 @@ jest.mock('react-redux', () => ({
 
 jest.mock('../../../../selectors', () => ({
   getSelectedAccountCachedBalance: jest.fn(),
+  getMultichainCurrentNetwork: jest.fn(),
+  getProviderConfig: jest.fn(),
 }));
 
 jest.mock('../../../../ducks/metamask/metamask', () => ({
@@ -78,22 +85,44 @@ describe('AssetList', () => {
       if (selector === getSelectedAccountCachedBalance) {
         return balanceValue;
       }
+      if (selector === getMultichainCurrentNetwork) {
+        return {
+          chainId: '0x1',
+          ticker: 'ETH',
+          type: '',
+        };
+      }
+      if (selector === getProviderConfig) {
+        return {
+          rpcUrl: 'test',
+        };
+      }
       return undefined;
     });
 
-    (useUserPreferencedCurrency as jest.Mock)
-      .mockReturnValueOnce({
-        currency: primaryCurrency,
-        numberOfDecimals: 4,
-      })
-      .mockReturnValueOnce({
+    (useUserPreferencedCurrency as jest.Mock).mockImplementation((args) => {
+      if (args === PRIMARY) {
+        return {
+          currency: primaryCurrency,
+          numberOfDecimals: 4,
+        };
+      }
+      return {
         currency: secondaryCurrency,
         numberOfDecimals: 4,
-      });
+      };
+    });
 
-    (useCurrencyDisplay as jest.Mock)
-      .mockReturnValueOnce(['100 USD', { value: '100', suffix: 'USD' }])
-      .mockReturnValueOnce(['1 ETH', { value: '1', suffix: 'ETH' }]);
+    (useCurrencyDisplay as jest.Mock).mockImplementation((_, args) => {
+      if (args.currency === primaryCurrency) {
+        return ['100 USD', { value: '100', suffix: 'USD' }];
+      }
+      return ['1 ETH', { value: '1', suffix: 'ETH' }];
+    });
+
+    // (useCurrencyDisplay as jest.Mock)
+    //   .mockReturnValueOnce(['100 USD', { value: '100', suffix: 'USD' }])
+    //   .mockReturnValueOnce(['1 ETH', { value: '1', suffix: 'ETH' }]);
 
     handleAssetChangeMock.mockClear();
   });
@@ -136,6 +165,18 @@ describe('AssetList', () => {
         if (selector === getSelectedAccountCachedBalance) {
           return balanceValue;
         }
+        if (selector === getMultichainCurrentNetwork) {
+          return {
+            chainId: '0x1',
+            ticker: 'ETH',
+            type: '',
+          };
+        }
+        if (selector === getProviderConfig) {
+          return {
+            rpcUrl: 'test',
+          };
+        }
         return undefined;
       });