Hook up shared TokenRatesController (#12066)

app/scripts/controllers/swaps.js

@@ -580,8 +580,7 @@ export default class SwapsController {
   }
 
   async _findTopQuoteAndCalculateSavings(quotes = {}) {
-    const tokenConversionRates = this.tokenRatesStore.getState()
+    const tokenConversionRates = this.tokenRatesStore.contractExchangeRates;
-      .contractExchangeRates;
     const {
       swapsState: { customGasPrice, customMaxPriorityFeePerGas },
     } = this.store.getState();

app/scripts/controllers/swaps.test.js

@@ -4,7 +4,6 @@ import sinon from 'sinon';
 import { ethers } from 'ethers';
 import { mapValues } from 'lodash';
 import BigNumber from 'bignumber.js';
-import { ObservableStore } from '@metamask/obs-store';
 import {
   ROPSTEN_NETWORK_ID,
   MAINNET_NETWORK_ID,
@@ -83,12 +82,12 @@ const MOCK_FETCH_METADATA = {
   chainId: MAINNET_CHAIN_ID,
 };
 
-const MOCK_TOKEN_RATES_STORE = new ObservableStore({
+const MOCK_TOKEN_RATES_STORE = {
   contractExchangeRates: {
     '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48': 2,
     '0x1111111111111111111111111111111111111111': 0.1,
   },
-});
+};
 
 const MOCK_GET_PROVIDER_CONFIG = () => ({ type: 'FAKE_NETWORK' });
 
@@ -816,9 +815,9 @@ describe('SwapsController', function () {
           .stub(swapsController, '_getERC20Allowance')
           .resolves(ethers.BigNumber.from(1));
 
-        swapsController.tokenRatesStore.updateState({
+        swapsController.tokenRatesStore = {
           contractExchangeRates: {},
-        });
+        };
         const [newQuotes, topAggId] = await swapsController.fetchAndSetQuotes(
           MOCK_FETCH_PARAMS,
           MOCK_FETCH_METADATA,

app/scripts/metamask-controller.js

@@ -26,6 +26,7 @@ import {
   GasFeeController,
   TokenListController,
   TokensController,
+  TokenRatesController,
 } from '@metamask/controllers';
 import { TRANSACTION_STATUSES } from '../../shared/constants/transaction';
 import {
@@ -66,7 +67,6 @@ import TransactionController from './controllers/transactions';
 import DetectTokensController from './controllers/detect-tokens';
 import SwapsController from './controllers/swaps';
 import { PermissionsController } from './controllers/permissions';
-import TokenRatesController from './controllers/token-rates';
 import { NOTIFICATION_NAMES } from './controllers/permissions/enums';
 import getRestrictedMethods from './controllers/permissions/restrictedMethods';
 import nodeify from './lib/nodeify';
@@ -282,12 +282,26 @@ export default class MetamaskController extends EventEmitter {
       initState.NotificationController,
     );
 
+    // token exchange rate tracker
     this.tokenRatesController = new TokenRatesController({
-      tokensController: this.tokensController,
+      onTokensStateChange: (listener) =>
-      getNativeCurrency: () => {
+        this.tokensController.subscribe(listener),
-        const { ticker } = this.networkController.getProviderConfig();
+      onCurrencyRateStateChange: (listener) =>
-        return ticker ?? 'ETH';
+        this.controllerMessenger.subscribe(
+          `${this.currencyRateController.name}:stateChange`,
+          listener,
+        ),
+      onNetworkStateChange: (cb) =>
+        this.networkController.store.subscribe((networkState) => {
+          const modifiedNetworkState = {
+            ...networkState,
+            provider: {
+              ...networkState.provider,
+              chainId: hexToDecimal(networkState.provider.chainId),
             },
+          };
+          return cb(modifiedNetworkState);
+        }),
     });
 
     this.ensController = new EnsController({
@@ -328,13 +342,11 @@ export default class MetamaskController extends EventEmitter {
       if (activeControllerConnections > 0) {
         this.accountTracker.start();
         this.incomingTransactionsController.start();
-        this.tokenRatesController.start();
         this.currencyRateController.start();
         this.tokenListController.start();
       } else {
         this.accountTracker.stop();
         this.incomingTransactionsController.stop();
-        this.tokenRatesController.stop();
         this.currencyRateController.stop();
         this.tokenListController.stop();
       }
@@ -525,7 +537,7 @@ export default class MetamaskController extends EventEmitter {
       getProviderConfig: this.networkController.getProviderConfig.bind(
         this.networkController,
       ),
-      tokenRatesStore: this.tokenRatesController.store,
+      tokenRatesStore: this.tokenRatesController.state,
       getCurrentChainId: this.networkController.getCurrentChainId.bind(
         this.networkController,
       ),
@@ -581,7 +593,7 @@ export default class MetamaskController extends EventEmitter {
         AccountTracker: this.accountTracker.store,
         TxController: this.txController.memStore,
         CachedBalancesController: this.cachedBalancesController.store,
-        TokenRatesController: this.tokenRatesController.store,
+        TokenRatesController: this.tokenRatesController,
         MessageManager: this.messageManager.memStore,
         PersonalMessageManager: this.personalMessageManager.memStore,
         DecryptMessageManager: this.decryptMessageManager.memStore,

ui/selectors/confirm-transaction.js

@@ -22,6 +22,7 @@ import {
   getMaximumGasTotalInHexWei,
   getMinimumGasTotalInHexWei,
 } from '../../shared/modules/gas.utils';
+import { isEqualCaseInsensitive } from '../helpers/utils/util';
 import { getAveragePriceEstimateInHexWEI } from './custom-gas';
 import { getCurrentChainId, deprecatedGetCurrentNetworkId } from './selectors';
 import { checkNetworkAndAccountSupports1559 } from '.';
@@ -222,7 +223,12 @@ export const sendTokenTokenAmountAndToAddressSelector = createSelector(
 export const contractExchangeRateSelector = createSelector(
   contractExchangeRatesSelector,
   tokenAddressSelector,
-  (contractExchangeRates, tokenAddress) => contractExchangeRates[tokenAddress],
+  (contractExchangeRates, tokenAddress) =>
+    contractExchangeRates[
+      Object.keys(contractExchangeRates).find((address) =>
+        isEqualCaseInsensitive(address, tokenAddress),
+      )
+    ],
 );
 
 export const transactionFeeSelector = function (state, txData) {