chore: Cherry-pick for solution in main to token rates (#8002)

## **Description**

Cherry-pick for solution in main to token rates 

## **Related issues**

Fixes: #7991

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Co-authored-by: metamaskbot <metamaskbot@users.noreply.github.com>

app/components/UI/Tokens/index.tsx

@@ -401,7 +401,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
         TokenDetectionController.detectTokens(),
         AccountTrackerController.refresh(),
         CurrencyRateController.start(),
-        TokenRatesController.poll(),
+        TokenRatesController.updateExchangeRates(),
       ];
       await Promise.all(actions);
       setRefreshing(false);

app/components/Views/Wallet/index.tsx

@@ -147,11 +147,6 @@ const Wallet = ({ navigation }: any) => {
   }, [navigate, providerConfig.chainId]);
   const { colors: themeColors } = useTheme();
 
-  useEffect(() => {
-    const { TokenRatesController } = Engine.context;
-    TokenRatesController.poll();
-  }, [tokens]);
-
   /**
    * Check to see if we need to show What's New modal
    */

app/core/Engine.ts

@@ -531,25 +531,20 @@ class Engine {
         },
         { interval: 10000 },
       ),
-      new TokenRatesController(
-        {
-          onTokensStateChange: (listener) =>
-            tokensController.subscribe(listener),
-          onCurrencyRateStateChange: (listener) =>
-            this.controllerMessenger.subscribe(
-              `${currencyRateController.name}:stateChange`,
-              listener,
-            ),
-          onNetworkStateChange: (listener) =>
-            this.controllerMessenger.subscribe(
-              AppConstants.NETWORK_STATE_CHANGE_EVENT,
-              listener,
-            ),
-        },
-        {
-          chainId: networkController.state.providerConfig.chainId,
-        },
-      ),
+      new TokenRatesController({
+        onTokensStateChange: (listener) => tokensController.subscribe(listener),
+        onNetworkStateChange: (listener) =>
+          this.controllerMessenger.subscribe(
+            AppConstants.NETWORK_STATE_CHANGE_EVENT,
+            listener,
+          ),
+        onPreferencesStateChange: (listener) =>
+          preferencesController.subscribe(listener),
+        chainId: networkController.state.providerConfig.chainId,
+        ticker: networkController.state.providerConfig.ticker ?? 'ETH',
+        selectedAddress: preferencesController.state.selectedAddress,
+        coinGeckoHeader: process.env.COIN_GECKO_HEADER as string,
+      }),
       new TransactionController({
         blockTracker:
           networkController.getProviderAndBlockTracker().blockTracker,
@@ -790,12 +785,14 @@ class Engine {
       TokenDetectionController,
       TokenListController,
       TransactionController,
+      TokenRatesController,
     } = this.context;
 
     TokenListController.start();
     NftDetectionController.start();
     TokenDetectionController.start();
     TransactionController.startIncomingTransactionPolling();
+    TokenRatesController.start();
   }
 
   configureControllersOnNetworkChange() {