chore: add bridge SELECT_DEST_NETWORK action

app/scripts/controllers/bridge/bridge-controller.test.ts

@@ -32,6 +32,20 @@ describe('BridgeController', function () {
         'src-network-allowlist': [10, 534352],
         'dest-network-allowlist': [137, 42161],
       });
+    nock(BRIDGE_API_BASE_URL)
+      .get('/getTokens?chainId=10')
+      .reply(200, [
+        {
+          address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
+          symbol: 'ABC',
+          decimals: 16,
+        },
+        {
+          address: '0x1291478912',
+          symbol: 'DEF',
+          decimals: 16,
+        },
+      ]);
   });
 
   it('constructor should setup correctly', function () {
@@ -51,4 +65,22 @@ describe('BridgeController', function () {
       expectedFeatureFlagsResponse,
     );
   });
+
+  it('selectDestNetwork should set the bridge dest tokens', async function () {
+    await bridgeController.selectDestNetwork('0xa');
+    expect(bridgeController.state.bridgeState.destTokens).toStrictEqual({
+      '0x0000000000000000000000000000000000000000': {
+        address: '0x0000000000000000000000000000000000000000',
+        decimals: 18,
+        iconUrl: './images/eth_logo.svg',
+        name: 'Ether',
+        symbol: 'ETH',
+      },
+      '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': {
+        address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
+        symbol: 'ABC',
+        decimals: 16,
+      },
+    });
+  });
 });

app/scripts/controllers/bridge/bridge-controller.ts

@@ -1,5 +1,9 @@
 import { BaseController, StateMetadata } from '@metamask/base-controller';
-import { fetchBridgeFeatureFlags } from '../../../../ui/pages/bridge/bridge.util';
+import { Hex } from '@metamask/utils';
+import {
+  fetchBridgeFeatureFlags,
+  fetchBridgeTokens,
+} from '../../../../ui/pages/bridge/bridge.util';
 import {
   BRIDGE_CONTROLLER_NAME,
   DEFAULT_BRIDGE_CONTROLLER_STATE,
@@ -30,6 +34,10 @@ export default class BridgeController extends BaseController<
       `${BRIDGE_CONTROLLER_NAME}:setBridgeFeatureFlags`,
       this.setBridgeFeatureFlags.bind(this),
     );
+    this.messagingSystem.registerActionHandler(
+      `${BRIDGE_CONTROLLER_NAME}:selectDestNetwork`,
+      this.selectDestNetwork.bind(this),
+    );
   }
 
   resetState = () => {
@@ -47,4 +55,16 @@ export default class BridgeController extends BaseController<
       _state.bridgeState = { ...bridgeState, bridgeFeatureFlags };
     });
   };
+
+  selectDestNetwork = async (chainId: Hex) => {
+    await this.#setTokens(chainId, 'destTokens');
+  };
+
+  #setTokens = async (chainId: Hex, stateKey: 'srcTokens' | 'destTokens') => {
+    const { bridgeState } = this.state;
+    const tokens = await fetchBridgeTokens(chainId);
+    this.update((_state) => {
+      _state.bridgeState = { ...bridgeState, [stateKey]: tokens };
+    });
+  };
 }

app/scripts/controllers/bridge/constants.ts

@@ -8,4 +8,5 @@ export const DEFAULT_BRIDGE_CONTROLLER_STATE: BridgeControllerState = {
     [BridgeFeatureFlagsKey.NETWORK_SRC_ALLOWLIST]: [],
     [BridgeFeatureFlagsKey.NETWORK_DEST_ALLOWLIST]: [],
   },
+  destTokens: {},
 };

app/scripts/controllers/bridge/types.ts

@@ -3,6 +3,7 @@ import {
   RestrictedControllerMessenger,
 } from '@metamask/base-controller';
 import { Hex } from '@metamask/utils';
+import { SwapsTokenObject } from '../../../../shared/constants/swaps';
 import BridgeController from './bridge-controller';
 import { BRIDGE_CONTROLLER_NAME } from './constants';
 
@@ -20,8 +21,12 @@ export type BridgeFeatureFlags = {
 
 export type BridgeControllerState = {
   bridgeFeatureFlags: BridgeFeatureFlags;
+  destTokens: Record<string, SwapsTokenObject>;
 };
 
+export enum BridgeUserAction {
+  SELECT_DEST_NETWORK = 'selectDestNetwork',
+}
 export enum BridgeBackgroundAction {
   SET_FEATURE_FLAGS = 'setBridgeFeatureFlags',
 }
@@ -33,7 +38,8 @@ type BridgeControllerAction<FunctionName extends keyof BridgeController> = {
 
 // Maps to BridgeController function names
 type BridgeControllerActions =
-  BridgeControllerAction<BridgeBackgroundAction.SET_FEATURE_FLAGS>;
+  | BridgeControllerAction<BridgeBackgroundAction.SET_FEATURE_FLAGS>
+  | BridgeControllerAction<BridgeUserAction.SELECT_DEST_NETWORK>;
 
 type BridgeControllerEvents = ControllerStateChangeEvent<
   typeof BRIDGE_CONTROLLER_NAME,

app/scripts/lib/setupSentry.js

@@ -134,6 +134,7 @@ export const SENTRY_BACKGROUND_STATE = {
         destNetworkAllowlist: [],
         srcNetworkAllowlist: [],
       },
+      destTokens: {},
     },
   },
   CronjobController: {

app/scripts/metamask-controller.js

@@ -329,7 +329,10 @@ import { updateSecurityAlertResponse } from './lib/ppom/ppom-util';
 import createEvmMethodsToNonEvmAccountReqFilterMiddleware from './lib/createEvmMethodsToNonEvmAccountReqFilterMiddleware';
 import { isEthAddress } from './lib/multichain/address';
 import { decodeTransactionData } from './lib/transaction/decode/util';
-import { BridgeBackgroundAction } from './controllers/bridge/types';
+import {
+  BridgeUserAction,
+  BridgeBackgroundAction,
+} from './controllers/bridge/types';
 import BridgeController from './controllers/bridge/bridge-controller';
 import { BRIDGE_CONTROLLER_NAME } from './controllers/bridge/constants';
 
@@ -3682,6 +3685,11 @@ export default class MetamaskController extends EventEmitter {
           this.controllerMessenger,
           `${BRIDGE_CONTROLLER_NAME}:${BridgeBackgroundAction.SET_FEATURE_FLAGS}`,
         ),
+      [BridgeUserAction.SELECT_DEST_NETWORK]:
+        this.controllerMessenger.call.bind(
+          this.controllerMessenger,
+          `${BRIDGE_CONTROLLER_NAME}:${BridgeUserAction.SELECT_DEST_NETWORK}`,
+        ),
 
       // Smart Transactions
       fetchSmartTransactionFees: smartTransactionsController.getFees.bind(

test/e2e/default-fixture.js

@@ -123,6 +123,7 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
             srcNetworkAllowlist: ['0x1', '0xa', '0xe708'],
             destNetworkAllowlist: ['0x1', '0xa', '0xe708'],
           },
+          destTokens: {},
         },
       },
       CurrencyController: {

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -73,7 +73,8 @@
           "1": "string",
           "2": "string"
         }
-      }
+      },
+      "destTokens": {}
     }
   },
   "CronjobController": { "jobs": "object" },

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -264,7 +264,8 @@
           "1": "string",
           "2": "string"
         }
-      }
+      },
+      "destTokens": {}
     },
     "ensEntries": "object",
     "ensResolutionsByAddress": "object",

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json

@@ -156,7 +156,8 @@
             "1": "string",
             "2": "string"
           }
-        }
+        },
+        "destTokens": {}
       }
     },
     "SubjectMetadataController": { "subjectMetadata": "object" },

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json

@@ -165,7 +165,8 @@
             "1": "string",
             "2": "string"
           }
-        }
+        },
+        "destTokens": {}
       }
     },
     "TransactionController": { "transactions": "object" },

test/jest/mock-store.js

@@ -672,6 +672,7 @@ export const createBridgeMockStore = (
   featureFlagOverrides = {},
   bridgeSliceOverrides = {},
   swapsSliceOverrides = {},
+  bridgeStateOverrides = {},
 ) => {
   const swapsStore = createSwapsMockStore();
   return {
@@ -694,6 +695,7 @@ export const createBridgeMockStore = (
           destNetworkAllowlist: [],
           ...featureFlagOverrides,
         },
+        ...bridgeStateOverrides,
       },
     },
   };

ui/ducks/bridge/actions.ts

@@ -1,18 +1,24 @@
-import { BridgeBackgroundAction } from '../../../app/scripts/controllers/bridge/types';
+import { ProviderConfig } from '@metamask/network-controller';
+import { Hex } from '@metamask/utils';
+import {
+  BridgeBackgroundAction,
+  BridgeUserAction,
+} from '../../../app/scripts/controllers/bridge/types';
 import { forceUpdateMetamaskState } from '../../store/actions';
 import { submitRequestToBackground } from '../../store/background-connection';
-import { MetaMaskReduxDispatch } from '../../store/store';
 import { swapsSlice } from '../swaps/swaps';
+import { RPCDefinition } from '../../../shared/constants/network';
+import { MetaMaskReduxDispatch } from '../../store/store';
 import { bridgeSlice } from './bridge';
 
 // Proxied swaps actions
 export const { setFromToken, setToToken, setFromTokenInputValue } =
   swapsSlice.actions;
 
-export const { setToChain } = bridgeSlice.actions;
+const { setToChain: setToChain_ } = bridgeSlice.actions;
 
 const callBridgeControllerMethod = <T>(
-  bridgeAction: BridgeBackgroundAction,
+  bridgeAction: BridgeUserAction | BridgeBackgroundAction,
   args?: T[],
 ) => {
   return async (dispatch: MetaMaskReduxDispatch) => {
@@ -21,8 +27,6 @@ const callBridgeControllerMethod = <T>(
   };
 };
 
-// User actions
-
 // Background actions
 export const setBridgeFeatureFlags = () => {
   return async (dispatch: MetaMaskReduxDispatch) => {
@@ -31,3 +35,16 @@ export const setBridgeFeatureFlags = () => {
     );
   };
 };
+
+// User actions
+export const setToChain = (network: ProviderConfig | RPCDefinition) => {
+  return async (dispatch: MetaMaskReduxDispatch) => {
+    const { chainId } = network;
+    dispatch(setToChain_(network));
+    dispatch(
+      callBridgeControllerMethod<Hex>(BridgeUserAction.SELECT_DEST_NETWORK, [
+        chainId,
+      ]),
+    );
+  };
+};

ui/ducks/bridge/bridge.test.ts

@@ -3,7 +3,10 @@ import thunk from 'redux-thunk';
 import { createBridgeMockStore } from '../../../test/jest/mock-store';
 import { CHAIN_IDS } from '../../../shared/constants/network';
 import { setBackgroundConnection } from '../../store/background-connection';
-import { BridgeBackgroundAction } from '../../../app/scripts/controllers/bridge/types';
+import {
+  BridgeUserAction,
+  BridgeBackgroundAction,
+} from '../../../app/scripts/controllers/bridge/types';
 import bridgeReducer from './bridge';
 import { setBridgeFeatureFlags, setToChain } from './actions';
 
@@ -14,14 +17,28 @@ describe('Ducks - Bridge', () => {
   const store = configureMockStore<any>(middleware)(createBridgeMockStore());
 
   describe('setToChain', () => {
-    it('calls the "bridge/setToChain" action', () => {
+    it('calls the "bridge/setToChain" action and the selectDestNetwork background action', () => {
       const state = store.getState().bridge;
-      const actionPayload = CHAIN_IDS.BSC;
-      store.dispatch(setToChain(actionPayload));
+      const actionPayload = { chainId: CHAIN_IDS.OPTIMISM, id: '2313-314njk' };
+
+      const mockSelectDestNetwork = jest.fn().mockReturnValue({});
+      setBackgroundConnection({
+        [BridgeUserAction.SELECT_DEST_NETWORK]: mockSelectDestNetwork,
+      } as never);
+
+      store.dispatch(setToChain(actionPayload as never) as never);
+
+      // Check redux state
       const actions = store.getActions();
       expect(actions[0].type).toBe('bridge/setToChain');
       const newState = bridgeReducer(state, actions[0]);
       expect(newState.toChain).toBe(actionPayload);
+      // Check background state
+      expect(mockSelectDestNetwork).toHaveBeenCalledTimes(1);
+      expect(mockSelectDestNetwork).toHaveBeenCalledWith(
+        '0xa',
+        expect.anything(),
+      );
     });
   });
 

ui/ducks/bridge/selectors.test.ts

@@ -14,6 +14,7 @@ import {
   getToChain,
   getToChains,
   getToToken,
+  getToTokens,
 } from './selectors';
 
 describe('Bridge selectors', () => {
@@ -376,4 +377,36 @@ describe('Bridge selectors', () => {
       expect(result).toStrictEqual('0');
     });
   });
+
+  describe('getToTokens', () => {
+    it('returns dest tokens from controller state when toChain is defined', () => {
+      const state = createBridgeMockStore(
+        {},
+        { toChain: { chainId: '0x1' } },
+        {},
+        {
+          destTokens: { '0x00': { address: '0x00', symbol: 'TEST' } },
+        },
+      );
+      const result = getToTokens(state as never);
+
+      expect(result).toStrictEqual({
+        '0x00': { address: '0x00', symbol: 'TEST' },
+      });
+    });
+
+    it('returns empty dest tokens from controller state when toChain is undefined', () => {
+      const state = createBridgeMockStore(
+        {},
+        {},
+        {},
+        {
+          destTokens: { '0x00': { address: '0x00', symbol: 'TEST' } },
+        },
+      );
+      const result = getToTokens(state as never);
+
+      expect(result).toStrictEqual({});
+    });
+  });
 });

ui/ducks/bridge/selectors.ts

@@ -81,6 +81,9 @@ export const getFromToken = (state: BridgeAppState) => {
 export const getToToken = (state: BridgeAppState) => {
   return swapsSlice.getToToken(state);
 };
+export const getToTokens = (state: BridgeAppState) => {
+  return state.bridge.toChain ? state.metamask.bridgeState.destTokens : {};
+};
 
 export const getFromAmount = (state: BridgeAppState) =>
   swapsSlice.getFromTokenInputValue(state);