chore: set bridge src network, tokens and top assets

app/scripts/constants/sentry-state.ts

@@ -104,6 +104,8 @@ export const SENTRY_BACKGROUND_STATE = {
       },
       destTokens: {},
       destTopAssets: [],
+      srcTokens: {},
+      srcTopAssets: [],
     },
   },
   CronjobController: {

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

@@ -95,4 +95,28 @@ describe('BridgeController', function () {
       { address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', symbol: 'ABC' },
     ]);
   });
+
+  it('selectSrcNetwork should set the bridge src tokens and top assets', async function () {
+    await bridgeController.selectSrcNetwork('0xa');
+    expect(bridgeController.state.bridgeState.srcTokens).toStrictEqual({
+      '0x0000000000000000000000000000000000000000': {
+        address: '0x0000000000000000000000000000000000000000',
+        decimals: 18,
+        iconUrl: './images/eth_logo.svg',
+        name: 'Ether',
+        symbol: 'ETH',
+      },
+      '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': {
+        address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
+        symbol: 'ABC',
+        decimals: 16,
+      },
+    });
+    expect(bridgeController.state.bridgeState.srcTopAssets).toStrictEqual([
+      {
+        address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
+        symbol: 'ABC',
+      },
+    ]);
+  });
 });

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

@@ -39,6 +39,10 @@ export default class BridgeController extends BaseController<
       `${BRIDGE_CONTROLLER_NAME}:setBridgeFeatureFlags`,
       this.setBridgeFeatureFlags.bind(this),
     );
+    this.messagingSystem.registerActionHandler(
+      `${BRIDGE_CONTROLLER_NAME}:selectSrcNetwork`,
+      this.selectSrcNetwork.bind(this),
+    );
     this.messagingSystem.registerActionHandler(
       `${BRIDGE_CONTROLLER_NAME}:selectDestNetwork`,
       this.selectDestNetwork.bind(this),
@@ -61,6 +65,11 @@ export default class BridgeController extends BaseController<
     });
   };
 
+  selectSrcNetwork = async (chainId: Hex) => {
+    await this.#setTopAssets(chainId, 'srcTopAssets');
+    await this.#setTokens(chainId, 'srcTokens');
+  };
+
   selectDestNetwork = async (chainId: Hex) => {
     await this.#setTopAssets(chainId, 'destTopAssets');
     await this.#setTokens(chainId, 'destTokens');

app/scripts/controllers/bridge/constants.ts

@@ -8,6 +8,8 @@ export const DEFAULT_BRIDGE_CONTROLLER_STATE: BridgeControllerState = {
     [BridgeFeatureFlagsKey.NETWORK_SRC_ALLOWLIST]: [],
     [BridgeFeatureFlagsKey.NETWORK_DEST_ALLOWLIST]: [],
   },
+  srcTokens: {},
+  srcTopAssets: [],
   destTokens: {},
   destTopAssets: [],
 };

app/scripts/controllers/bridge/types.ts

@@ -21,11 +21,14 @@ export type BridgeFeatureFlags = {
 
 export type BridgeControllerState = {
   bridgeFeatureFlags: BridgeFeatureFlags;
+  srcTokens: Record<string, SwapsTokenObject>;
+  srcTopAssets: { address: string }[];
   destTokens: Record<string, SwapsTokenObject>;
   destTopAssets: { address: string }[];
 };
 
 export enum BridgeUserAction {
+  SELECT_SRC_NETWORK = 'selectSrcNetwork',
   SELECT_DEST_NETWORK = 'selectDestNetwork',
 }
 export enum BridgeBackgroundAction {
@@ -40,6 +43,7 @@ type BridgeControllerAction<FunctionName extends keyof BridgeController> = {
 // Maps to BridgeController function names
 type BridgeControllerActions =
   | BridgeControllerAction<BridgeBackgroundAction.SET_FEATURE_FLAGS>
+  | BridgeControllerAction<BridgeUserAction.SELECT_SRC_NETWORK>
   | BridgeControllerAction<BridgeUserAction.SELECT_DEST_NETWORK>;
 
 type BridgeControllerEvents = ControllerStateChangeEvent<

app/scripts/metamask-controller.js

@@ -3891,6 +3891,10 @@ export default class MetamaskController extends EventEmitter {
           this.controllerMessenger,
           `${BRIDGE_CONTROLLER_NAME}:${BridgeBackgroundAction.SET_FEATURE_FLAGS}`,
         ),
+      [BridgeUserAction.SELECT_SRC_NETWORK]: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        `${BRIDGE_CONTROLLER_NAME}:${BridgeUserAction.SELECT_SRC_NETWORK}`,
+      ),
       [BridgeUserAction.SELECT_DEST_NETWORK]:
         this.controllerMessenger.call.bind(
           this.controllerMessenger,

test/e2e/default-fixture.js

@@ -129,6 +129,8 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
           },
           destTokens: {},
           destTopAssets: [],
+          srcTokens: {},
+          srcTopAssets: [],
         },
       },
       CurrencyController: {

test/e2e/fixture-builder.js

@@ -402,6 +402,8 @@ class FixtureBuilder {
         },
         destTokens: {},
         destTopAssets: [],
+        srcTokens: {},
+        srcTopAssets: [],
       },
     };
     return this;

test/e2e/tests/bridge/bridge-test-utils.ts

@@ -120,7 +120,17 @@ const mockServer =
             };
           }),
     );
-    return Promise.all(featureFlagMocks);
+    const portfolioMock = async () =>
+      await mockServer_
+        .forGet('https://portfolio.metamask.io/bridge')
+        .always()
+        .thenCallback(() => {
+          return {
+            statusCode: 200,
+            json: {},
+          };
+        });
+    return Promise.all([...featureFlagMocks, portfolioMock]);
   };
 
 export const getBridgeFixtures = (

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

@@ -67,7 +67,9 @@
         "destNetworkAllowlist": { "0": "string", "1": "string", "2": "string" }
       },
       "destTokens": {},
-      "destTopAssets": {}
+      "destTopAssets": {},
+      "srcTokens": {},
+      "srcTopAssets": {}
     }
   },
   "CronjobController": { "jobs": "object" },

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

@@ -254,7 +254,9 @@
         "destNetworkAllowlist": { "0": "string", "1": "string", "2": "string" }
       },
       "destTokens": {},
-      "destTopAssets": {}
+      "destTopAssets": {},
+      "srcTokens": {},
+      "srcTopAssets": {}
     },
     "ensEntries": "object",
     "ensResolutionsByAddress": "object",

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

@@ -155,7 +155,9 @@
           }
         },
         "destTokens": {},
-        "destTopAssets": {}
+        "destTopAssets": {},
+        "srcTokens": {},
+        "srcTopAssets": {}
       }
     },
     "SubjectMetadataController": { "subjectMetadata": "object" },

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

@@ -164,7 +164,9 @@
           }
         },
         "destTokens": {},
-        "destTopAssets": {}
+        "destTopAssets": {},
+        "srcTokens": {},
+        "srcTopAssets": {}
       }
     },
     "TransactionController": { "transactions": "object" },

ui/ducks/bridge/actions.ts

@@ -42,6 +42,16 @@ export const setBridgeFeatureFlags = () => {
 };
 
 // User actions
+export const setFromChain = (chainId: Hex) => {
+  return async (dispatch: MetaMaskReduxDispatch) => {
+    dispatch(
+      callBridgeControllerMethod<Hex>(BridgeUserAction.SELECT_SRC_NETWORK, [
+        chainId,
+      ]),
+    );
+  };
+};
+
 export const setToChain = (chainId: Hex) => {
   return async (dispatch: MetaMaskReduxDispatch) => {
     dispatch(setToChainId_(chainId));

ui/ducks/bridge/bridge.test.ts

@@ -16,6 +16,7 @@ import {
   setFromTokenInputValue,
   setToChain,
   setToToken,
+  setFromChain,
 } from './actions';
 
 const middleware = [thunk];
@@ -100,4 +101,21 @@ describe('Ducks - Bridge', () => {
       expect(mockSetBridgeFeatureFlags).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('setFromChain', () => {
+    it('calls the selectSrcNetwork background action', async () => {
+      const mockSelectSrcNetwork = jest.fn().mockReturnValue({});
+      setBackgroundConnection({
+        [BridgeUserAction.SELECT_SRC_NETWORK]: mockSelectSrcNetwork,
+      } as never);
+
+      await store.dispatch(setFromChain(CHAIN_IDS.MAINNET) as never);
+
+      expect(mockSelectSrcNetwork).toHaveBeenCalledTimes(1);
+      expect(mockSelectSrcNetwork).toHaveBeenCalledWith(
+        '0x1',
+        expect.anything(),
+      );
+    });
+  });
 });

ui/ducks/bridge/selectors.test.ts

@@ -12,6 +12,8 @@ import {
   getFromChain,
   getFromChains,
   getFromToken,
+  getFromTokens,
+  getFromTopAssets,
   getIsBridgeTx,
   getToAmount,
   getToChain,
@@ -456,4 +458,37 @@ describe('Bridge selectors', () => {
       expect(result).toStrictEqual([]);
     });
   });
+
+  describe('getFromTokens', () => {
+    it('returns src tokens from controller state', () => {
+      const state = createBridgeMockStore(
+        {},
+        { toChainId: '0x1' },
+        {
+          srcTokens: { '0x00': { address: '0x00', symbol: 'TEST' } },
+        },
+      );
+      const result = getFromTokens(state as never);
+
+      expect(result).toStrictEqual({
+        '0x00': { address: '0x00', symbol: 'TEST' },
+      });
+    });
+  });
+
+  describe('getFromTopAssets', () => {
+    it('returns src top assets from controller state', () => {
+      const state = createBridgeMockStore(
+        {},
+        { toChainId: '0x1' },
+        {
+          srcTokens: { '0x00': { address: '0x00', symbol: 'TEST' } },
+          srcTopAssets: [{ address: '0x00', symbol: 'TEST' }],
+        },
+      );
+      const result = getFromTopAssets(state as never);
+
+      expect(result).toStrictEqual([{ address: '0x00', symbol: 'TEST' }]);
+    });
+  });
 });

ui/ducks/bridge/selectors.ts

@@ -92,6 +92,14 @@ export const getToChain = createDeepEqualSelector(
     toChains.find(({ chainId }) => chainId === toChainId),
 );
 
+export const getFromTokens = (state: BridgeAppState) => {
+  return state.metamask.bridgeState.srcTokens ?? {};
+};
+
+export const getFromTopAssets = (state: BridgeAppState) => {
+  return state.metamask.bridgeState.srcTopAssets ?? [];
+};
+
 export const getToTopAssets = (state: BridgeAppState) => {
   return state.bridge.toChainId ? state.metamask.bridgeState.destTopAssets : [];
 };

ui/hooks/bridge/useBridging.test.ts

@@ -15,9 +15,16 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
+const mockDispatch = jest.fn().mockReturnValue(() => jest.fn());
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
-  useDispatch: jest.fn().mockReturnValue(() => jest.fn()),
+  useDispatch: () => mockDispatch,
+}));
+
+const mockSetFromChain = jest.fn();
+jest.mock('../../ducks/bridge/actions', () => ({
+  ...jest.requireActual('../../ducks/bridge/actions'),
+  setFromChain: () => mockSetFromChain(),
 }));
 
 const MOCK_METAMETRICS_ID = '0xtestMetaMetricsId';
@@ -94,6 +101,8 @@ describe('useBridging', () => {
           },
         });
 
+        expect(mockDispatch.mock.calls).toHaveLength(1);
+
         expect(nock(BRIDGE_API_BASE_URL).isDone()).toBe(true);
         result.current.openBridgeExperience(location, token, urlSuffix);
 
@@ -165,6 +174,7 @@ describe('useBridging', () => {
 
         result.current.openBridgeExperience(location, token, urlSuffix);
 
+        expect(mockDispatch.mock.calls).toHaveLength(3);
         expect(mockHistoryPush.mock.calls).toHaveLength(1);
         expect(mockHistoryPush).toHaveBeenCalledWith(expectedUrl);
         expect(openTabSpy).not.toHaveBeenCalled();