chore: reset bridge input fields on page unload

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 = <T>(

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,
+      });
+    });
+  });
 });

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,

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();

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,

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({