From 275a9d1d22a1d293ddc8708bf87042ddc65dbb9c Mon Sep 17 00:00:00 2001 From: Micaela Estabillo Date: Fri, 12 Jul 2024 16:55:12 -0700 Subject: [PATCH] chore: set src network on Bridge page load --- ui/ducks/bridge/actions.ts | 1 - ui/hooks/bridge/useBridging.test.ts | 22 +++++++++++++++------- ui/hooks/bridge/useBridging.ts | 23 ++++++++++++++++------- ui/pages/bridge/index.test.tsx | 2 ++ ui/pages/bridge/index.tsx | 4 ++++ 5 files changed, 37 insertions(+), 15 deletions(-) diff --git a/ui/ducks/bridge/actions.ts b/ui/ducks/bridge/actions.ts index f05b0a4d2dd2..350dd780909d 100644 --- 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 index 9701ca4732d8..c64296cc27c4 100644 --- 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 index d11aaeb821a9..464b607591be 100644 --- 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 index 4352ff359742..a73cfa370681 100644 --- 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 index f216a52ec71d..ae3e5ddd9965 100644 --- 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();