chore: set src network on Bridge page load

MetaMask · Aug 22, 2024 · 275a9d1 · 275a9d1
1 parent 42aff78
commit 275a9d1
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 15 deletions.
diff --git a/ui/ducks/bridge/actions.ts b/ui/ducks/bridge/actions.ts
@@ -43,7 +43,6 @@ export const setBridgeFeatureFlags = () => {
 };
 
 // User actions
-// TODO call this in useBridging as well to preload src tokens
 export const setFromChain = (network: ProviderConfig | RPCDefinition) => {
   return async (dispatch: MetaMaskReduxDispatch) => {
     const { chainId } = network;

diff --git a/ui/hooks/bridge/useBridging.test.ts b/ui/hooks/bridge/useBridging.test.ts
@@ -13,9 +13,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';
@@ -78,9 +85,8 @@ describe('useBridging', () => {
         const { result } = renderUseBridging({
           metamask: {
             useExternalServices: true,
-            providerConfig: {
-              chainId: '0x1',
-            },
+            providerConfig: { chainId: '0x1', type: 'test-id' },
+            networkConfigurations: [{ chainId: '0x1', id: 'test-id' }],
             metaMetricsId: MOCK_METAMETRICS_ID,
             bridgeState: {
               bridgeFeatureFlags: {
@@ -94,6 +100,8 @@ describe('useBridging', () => {
           },
         });
 
+        expect(mockDispatch.mock.calls).toHaveLength(1);
+
         expect(nock(BRIDGE_API_BASE_URL).isDone()).toBe(true);
         result.current.openBridgeExperience(location, token, urlSuffix);
 
@@ -149,9 +157,8 @@ describe('useBridging', () => {
         const { result } = renderUseBridging({
           metamask: {
             useExternalServices: true,
-            providerConfig: {
-              chainId: '0x1',
-            },
+            providerConfig: { chainId: '0x1', type: 'test-id' },
+            networkConfigurations: [{ chainId: '0x1', id: 'test-id' }],
             metaMetricsId: MOCK_METAMETRICS_ID,
             bridgeState: {
               bridgeFeatureFlags: {
@@ -167,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();

diff --git a/ui/hooks/bridge/useBridging.ts b/ui/hooks/bridge/useBridging.ts
@@ -1,9 +1,11 @@
 import { useCallback, useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { setBridgeFeatureFlags } from '../../ducks/bridge/actions';
 import {
-  getCurrentChainId,
+  setBridgeFeatureFlags,
+  setFromChain,
+} from '../../ducks/bridge/actions';
+import {
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getCurrentKeyring,
   getDataCollectionForMarketing,
@@ -31,6 +33,7 @@ import { isHardwareKeyring } from '../../helpers/utils/hardware';
 import { getPortfolioUrl } from '../../helpers/utils/portfolio';
 import { setSwapsFromToken } from '../../ducks/swaps/swaps';
 import { SwapsTokenObject } from '../../../shared/constants/swaps';
+import { getProviderConfig } from '../../ducks/metamask/metamask';
 ///: END:ONLY_INCLUDE_IF
 
 const useBridging = () => {
@@ -41,7 +44,7 @@ const useBridging = () => {
   const metaMetricsId = useSelector(getMetaMetricsId);
   const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
   const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
-  const chainId = useSelector(getCurrentChainId);
+  const providerConfig = useSelector(getProviderConfig);
   const keyring = useSelector(getCurrentKeyring);
   const usingHardwareWallet = isHardwareKeyring(keyring.type);
 
@@ -52,13 +55,19 @@ const useBridging = () => {
     dispatch(setBridgeFeatureFlags());
   }, [dispatch, setBridgeFeatureFlags]);
 
+  useEffect(() => {
+    isBridgeChain &&
+      isBridgeSupported &&
+      dispatch(setFromChain(providerConfig));
+  }, []);
+
   const openBridgeExperience = useCallback(
     (
       location: string,
       token: SwapsTokenObject | SwapsEthToken,
       portfolioUrlSuffix?: string,
     ) => {
-      if (!isBridgeChain) {
+      if (!isBridgeChain || !providerConfig) {
         return;
       }
 
@@ -70,7 +79,7 @@ const useBridging = () => {
             token_symbol: token.symbol,
             location,
             text: 'Bridge',
-            chain_id: chainId,
+            chain_id: providerConfig.chainId,
           },
         });
         dispatch(
@@ -105,7 +114,7 @@ const useBridging = () => {
             location,
             text: 'Bridge',
             url: portfolioUrl,
-            chain_id: chainId,
+            chain_id: providerConfig.chainId,
             token_symbol: token.symbol,
           },
         });
@@ -114,7 +123,6 @@ const useBridging = () => {
     [
       isBridgeSupported,
       isBridgeChain,
-      chainId,
       setSwapsFromToken,
       dispatch,
       usingHardwareWallet,
@@ -123,6 +131,7 @@ const useBridging = () => {
       trackEvent,
       isMetaMetricsEnabled,
       isMarketingEnabled,
+      providerConfig,
     ],
   );
 

diff --git a/ui/pages/bridge/index.test.tsx b/ui/pages/bridge/index.test.tsx
@@ -22,6 +22,8 @@ setBackgroundConnection({
   getNetworkConfigurationByNetworkClientId: jest
     .fn()
     .mockResolvedValue({ chainId: '0x1' }),
+  setBridgeFeatureFlags: jest.fn(),
+  selectSrcNetwork: jest.fn(),
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 } as any);
 

diff --git a/ui/pages/bridge/index.tsx b/ui/pages/bridge/index.tsx
@@ -28,10 +28,14 @@ import {
   BlockSize,
 } from '../../helpers/constants/design-system';
 import { getIsBridgeEnabled } from '../../selectors';
+import useBridging from '../../hooks/bridge/useBridging';
 import { PrepareBridgePage } from './prepare/prepare-bridge-page';
 
 const CrossChainSwap = () => {
   const t = useContext(I18nContext);
+
+  useBridging();
+
   const history = useHistory();
   const dispatch = useDispatch();