diff --git a/ui/ducks/bridge/actions.ts b/ui/ducks/bridge/actions.ts index fed8c6dca7f0..5e50b004b774 100644 --- a/ui/ducks/bridge/actions.ts +++ b/ui/ducks/bridge/actions.ts @@ -18,6 +18,7 @@ const { setFromToken, setToToken, setFromTokenInputValue, + resetInputFields, switchToAndFromTokens, } = bridgeSlice.actions; @@ -26,6 +27,7 @@ export { setToToken, setFromTokenInputValue, switchToAndFromTokens, + resetInputFields, }; const callBridgeControllerMethod = ( diff --git a/ui/ducks/bridge/bridge.test.ts b/ui/ducks/bridge/bridge.test.ts index b8d2e09eb0ea..c203c5074c87 100644 --- a/ui/ducks/bridge/bridge.test.ts +++ b/ui/ducks/bridge/bridge.test.ts @@ -17,6 +17,7 @@ import { setToChain, setToToken, setFromChain, + resetInputFields, } from './actions'; const middleware = [thunk]; @@ -43,9 +44,9 @@ describe('Ducks - Bridge', () => { // Check redux state const actions = store.getActions(); - expect(actions[0].type).toBe('bridge/setToChainId'); + expect(actions[0].type).toStrictEqual('bridge/setToChainId'); const newState = bridgeReducer(state, actions[0]); - expect(newState.toChainId).toBe(actionPayload); + expect(newState.toChainId).toStrictEqual(actionPayload); // Check background state expect(mockSelectDestNetwork).toHaveBeenCalledTimes(1); expect(mockSelectDestNetwork).toHaveBeenCalledWith( @@ -61,9 +62,9 @@ describe('Ducks - Bridge', () => { const actionPayload = { symbol: 'SYMBOL', address: '0x13341432' }; store.dispatch(setFromToken(actionPayload)); const actions = store.getActions(); - expect(actions[0].type).toBe('bridge/setFromToken'); + expect(actions[0].type).toStrictEqual('bridge/setFromToken'); const newState = bridgeReducer(state, actions[0]); - expect(newState.fromToken).toBe(actionPayload); + expect(newState.fromToken).toStrictEqual(actionPayload); }); }); @@ -73,9 +74,9 @@ describe('Ducks - Bridge', () => { const actionPayload = { symbol: 'SYMBOL', address: '0x13341431' }; store.dispatch(setToToken(actionPayload)); const actions = store.getActions(); - expect(actions[0].type).toBe('bridge/setToToken'); + expect(actions[0].type).toStrictEqual('bridge/setToToken'); const newState = bridgeReducer(state, actions[0]); - expect(newState.toToken).toBe(actionPayload); + expect(newState.toToken).toStrictEqual(actionPayload); }); }); @@ -85,9 +86,9 @@ describe('Ducks - Bridge', () => { const actionPayload = '10'; store.dispatch(setFromTokenInputValue(actionPayload)); const actions = store.getActions(); - expect(actions[0].type).toBe('bridge/setFromTokenInputValue'); + expect(actions[0].type).toStrictEqual('bridge/setFromTokenInputValue'); const newState = bridgeReducer(state, actions[0]); - expect(newState.fromTokenInputValue).toBe(actionPayload); + expect(newState.fromTokenInputValue).toStrictEqual(actionPayload); }); }); @@ -118,4 +119,20 @@ describe('Ducks - Bridge', () => { ); }); }); + + describe('resetInputFields', () => { + it('resets to initalState', async () => { + const state = store.getState().bridge; + store.dispatch(resetInputFields()); + const actions = store.getActions(); + expect(actions[0].type).toStrictEqual('bridge/resetInputFields'); + const newState = bridgeReducer(state, actions[0]); + expect(newState).toStrictEqual({ + toChainId: null, + fromToken: null, + toToken: null, + fromTokenInputValue: null, + }); + }); + }); }); diff --git a/ui/ducks/bridge/bridge.ts b/ui/ducks/bridge/bridge.ts index 0443fe0f130d..9ec744d9e953 100644 --- a/ui/ducks/bridge/bridge.ts +++ b/ui/ducks/bridge/bridge.ts @@ -36,6 +36,9 @@ const bridgeSlice = createSlice({ setFromTokenInputValue: (state, action) => { state.fromTokenInputValue = action.payload; }, + resetInputFields: () => ({ + ...initialState, + }), switchToAndFromTokens: (state, { payload }) => ({ toChainId: payload, fromToken: state.toToken, diff --git a/ui/hooks/bridge/useBridging.test.ts b/ui/hooks/bridge/useBridging.test.ts index df8bbb940f4e..6e3f3b534e35 100644 --- a/ui/hooks/bridge/useBridging.test.ts +++ b/ui/hooks/bridge/useBridging.test.ts @@ -174,7 +174,7 @@ describe('useBridging', () => { result.current.openBridgeExperience(location, token, urlSuffix); - expect(mockDispatch.mock.calls).toHaveLength(3); + expect(mockDispatch.mock.calls).toHaveLength(2); 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 ce4b8c48b89c..a68aeb361bdd 100644 --- a/ui/hooks/bridge/useBridging.ts +++ b/ui/hooks/bridge/useBridging.ts @@ -1,10 +1,7 @@ import { useCallback, useContext, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; -import { - setBridgeFeatureFlags, - setFromChain, -} from '../../ducks/bridge/actions'; +import { setBridgeFeatureFlags } from '../../ducks/bridge/actions'; import { ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) getCurrentKeyring, @@ -55,13 +52,6 @@ const useBridging = () => { dispatch(setBridgeFeatureFlags()); }, [dispatch, setBridgeFeatureFlags]); - useEffect(() => { - isBridgeChain && - isBridgeSupported && - providerConfig && - dispatch(setFromChain(providerConfig.chainId)); - }, []); - const openBridgeExperience = useCallback( ( location: string, diff --git a/ui/pages/bridge/index.tsx b/ui/pages/bridge/index.tsx index a3471b9d7c9f..82f5379543d7 100644 --- a/ui/pages/bridge/index.tsx +++ b/ui/pages/bridge/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Switch, useHistory } from 'react-router-dom'; import { I18nContext } from '../../contexts/i18n'; @@ -16,13 +16,15 @@ import { ButtonIconSize, IconName, } from '../../components/component-library'; -import { getIsBridgeEnabled } from '../../selectors'; +import { getIsBridgeChain, getIsBridgeEnabled } from '../../selectors'; import useBridging from '../../hooks/bridge/useBridging'; import { Content, Footer, Header, } from '../../components/multichain/pages/page'; +import { getProviderConfig } from '../../ducks/metamask/metamask'; +import { resetInputFields, setFromChain } from '../../ducks/bridge/actions'; import PrepareBridgePage from './prepare/prepare-bridge-page'; import { BridgeCTAButton } from './prepare/bridge-cta-button'; @@ -35,6 +37,19 @@ const CrossChainSwap = () => { const dispatch = useDispatch(); const isBridgeEnabled = useSelector(getIsBridgeEnabled); + const providerConfig = useSelector(getProviderConfig); + const isBridgeChain = useSelector(getIsBridgeChain); + + useEffect(() => { + isBridgeChain && + isBridgeEnabled && + providerConfig && + dispatch(setFromChain(providerConfig.chainId)); + + return () => { + dispatch(resetInputFields()); + }; + }, [isBridgeChain, isBridgeEnabled, providerConfig]); const redirectToDefaultRoute = async () => { history.push({