fix: cp-12.17.0 fix clean up fiat conversion logic

app/scripts/controller-init/assets/token-rates-controller-init.test.ts

@@ -3,25 +3,59 @@ import {
   TokenRatesControllerMessenger,
 } from '@metamask/assets-controllers';
 import { Messenger } from '@metamask/base-controller';
+import { PreferencesController } from '@metamask/preferences-controller';
 import { buildControllerInitRequestMock } from '../test/utils';
 import { ControllerInitRequest } from '../types';
 import { getTokenRatesControllerMessenger } from '../messengers/assets';
 import { TokenRatesControllerInit } from './token-rates-controller-init';
 
 jest.mock('@metamask/assets-controllers');
 
+/**
+ * Build a mock PreferencesController.
+ * This returns a partial mock that includes the state property expected by the TokenRatesController (for example, `useCurrencyRateCheck`).
+ *
+ * @param {Partial<PreferencesController>} partialMock - The partial mock to be merged with the default mock.
+ * @returns {PreferencesController} The mock PreferencesController.
+ */
+
+function buildControllerMock(
+  partialMock?: Partial<PreferencesController>,
+): PreferencesController {
+  const defaultPreferencesControllerMock = {
+    state: { useCurrencyRateCheck: true },
+  };
+
+  // @ts-expect-error Incomplete mock, just includes properties used by code-under-test.
+  return {
+    ...defaultPreferencesControllerMock,
+    ...partialMock,
+  };
+}
+
+/**
+ * Build a mock init request.
+ *
+ * Notice that we also mock the getController method to return the
+ * stubbed PreferencesController.
+ */
 function buildInitRequestMock(): jest.Mocked<
   ControllerInitRequest<TokenRatesControllerMessenger>
 > {
   const baseControllerMessenger = new Messenger();
 
-  return {
+  const requestMock = {
     ...buildControllerInitRequestMock(),
     controllerMessenger: getTokenRatesControllerMessenger(
       baseControllerMessenger,
     ),
     initMessenger: undefined,
   };
+
+  // @ts-expect-error Incomplete mock, just includes properties used by code-under-test.
+  requestMock.getController.mockReturnValue(buildControllerMock());
+
+  return requestMock;
 }
 
 describe('TokenRatesControllerInit', () => {

app/scripts/controller-init/assets/token-rates-controller-init.ts

@@ -16,12 +16,15 @@ import { TokenRatesControllerMessenger } from '../messengers/assets';
 export const TokenRatesControllerInit: ControllerInitFunction<
   TokenRatesController,
   TokenRatesControllerMessenger
-> = ({ controllerMessenger, persistedState }) => {
+> = (request) => {
+  const { controllerMessenger, getController, persistedState } = request;
+  const preferencesController = () => getController('PreferencesController');
+
   const controller = new TokenRatesController({
     messenger: controllerMessenger,
     state: persistedState.TokenRatesController,
     tokenPricesService: new CodefiTokenPricesServiceV2(),
-    disabled: !persistedState.PreferencesController?.useCurrencyRateCheck,
+    disabled: !preferencesController().state?.useCurrencyRateCheck,
   });
 
   return {

app/scripts/metamask-controller.js

@@ -1859,14 +1859,14 @@ export default class MetamaskController extends EventEmitter {
       NftController: NftControllerInit,
       AssetsContractController: AssetsContractControllerInit,
       NftDetectionController: NftDetectionControllerInit,
+      TokenRatesController: TokenRatesControllerInit,
       ///: BEGIN:ONLY_INCLUDE_IF(multichain)
       MultichainAssetsController: MultichainAssetsControllerInit,
       MultichainAssetsRatesController: MultichainAssetsRatesControllerInit,
       MultichainBalancesController: MultichainBalancesControllerInit,
       MultichainTransactionsController: MultichainTransactionsControllerInit,
       ///: END:ONLY_INCLUDE_IF
       MultichainNetworkController: MultichainNetworkControllerInit,
-      TokenRatesController: TokenRatesControllerInit,
       AuthenticationController: AuthenticationControllerInit,
       UserStorageController: UserStorageControllerInit,
       NotificationServicesController: NotificationServicesControllerInit,

ui/components/app/assets/hooks/useTokenDisplayInfo.tsx

@@ -50,7 +50,9 @@ export const useTokenDisplayInfo = ({
 
   // Format for fiat balance with currency style
   const secondary =
-    shouldShowFiat && token.tokenFiatAmount
+    shouldShowFiat &&
+    token.tokenFiatAmount !== null &&
+    token.tokenFiatAmount !== undefined
       ? formatWithThreshold(
           Number(token.tokenFiatAmount),
           secondaryThreshold,

ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap

@@ -516,7 +516,9 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
               <p
                 class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-default"
                 data-testid="multichain-token-list-item-secondary-value"
-              />
+              >
+                $0.00
+              </p>
             </div>
             <div
               class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
@@ -1008,7 +1010,9 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
               <p
                 class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-default"
                 data-testid="multichain-token-list-item-secondary-value"
-              />
+              >
+                $0.00
+              </p>
             </div>
             <div
               class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"

ui/selectors/selectors.js

@@ -937,17 +937,20 @@ export function getTargetAccount(state, targetAddress) {
   return accounts[targetAddress];
 }
 
-export const getTokenExchangeRates = (state) => {
-  const chainId = getCurrentChainId(state);
-  const contractMarketData = state.metamask.marketData?.[chainId] ?? {};
-  return Object.entries(contractMarketData).reduce(
-    (acc, [address, marketData]) => {
-      acc[address] = marketData?.price ?? null;
-      return acc;
-    },
-    {},
-  );
-};
+export const getTokenExchangeRates = createSelector(
+  (state) => getCurrentChainId(state),
+  (state) => state.metamask.marketData,
+  (chainId, marketData) => {
+    const contractMarketData = marketData?.[chainId] ?? {};
+    return Object.entries(contractMarketData).reduce(
+      (acc, [address, tokenData]) => {
+        acc[address] = tokenData?.price ?? null;
+        return acc;
+      },
+      {},
+    );
+  },
+);
 
 export const getCrossChainTokenExchangeRates = (state) => {
   const contractMarketData = state.metamask.marketData ?? {};