fix: reset bridge state on unmount

Author: infiniteflower

app/components/UI/Bridge/Views/BatchSellReview/BatchSellReview.test.tsx

@@ -61,6 +61,9 @@ jest.mock('@react-navigation/native', () => ({
 }));
 
 jest.mock('../../../../../core/redux/slices/bridge', () => ({
+  resetBridgeState: jest.fn(() => ({
+    type: 'bridge/resetBridgeState',
+  })),
   selectBatchSellSourceTokens: jest.fn(() => mockSelectedTokens),
   selectBatchSellDestStablecoins: jest.fn(() => mockDestinationTokens),
   selectBatchSellDestToken: jest.fn(() => mockSelectedDestinationToken),
@@ -234,6 +237,17 @@ describe('BatchSellReview', () => {
     });
   });
 
+  it('resets bridge state on unmount', () => {
+    const { unmount } = render(<BatchSellReview />);
+
+    mockDispatch.mockClear();
+    unmount();
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: 'bridge/resetBridgeState',
+    });
+  });
+
   it('removes a token when more than two source tokens are selected', () => {
     mockSelectedTokens = [...defaultSelectedTokens, thirdSelectedToken];
     const { getByTestId } = render(<BatchSellReview />);

app/components/UI/Bridge/Views/BatchSellReview/BatchSellReview.tsx

@@ -29,6 +29,7 @@ import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
 import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import {
+  resetBridgeState,
   selectBatchSellSlippages,
   selectBatchSellDestToken,
   selectBatchSellDestStablecoins,
@@ -125,6 +126,14 @@ export function BatchSellReview() {
     );
   }, [selectedTokens]);
 
+  // Reset bridge state when component unmounts.
+  useEffect(
+    () => () => {
+      dispatch(resetBridgeState());
+    },
+    [dispatch],
+  );
+
   useEffect(() => {
     // Keep Redux slippages aligned with selected tokens when the user removes tokens.
     const nextSlippage = selectedTokens.reduce<

app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.test.tsx

@@ -108,14 +108,13 @@ jest.mock('../../../../../selectors/networkController', () => ({
 }));
 
 jest.mock('../../../../../core/redux/slices/bridge', () => ({
+  resetBridgeState: jest.fn(() => ({
+    type: 'bridge/resetBridgeState',
+  })),
   selectBatchSellDestStablecoins: jest.fn(() => mockDestinationStablecoins),
   selectBatchSellDestStablecoinsByChain: jest.fn(
     () => mockDestinationStablecoinsByChain,
   ),
-  setBatchSellDestToken: jest.fn((token: BridgeToken | undefined) => ({
-    type: 'bridge/setBatchSellDestToken',
-    payload: token,
-  })),
   setBatchSellSourceTokens: jest.fn((tokens: BridgeToken[]) => ({
     type: 'bridge/setBatchSellSourceTokens',
     payload: tokens,
@@ -403,16 +402,17 @@ describe('BatchSellTokenSelect', () => {
     expect(queryByText('USDC')).not.toBeOnTheScreen();
   });
 
-  it('resets Batch Sell source and destination tokens on entry', () => {
-    render(<BatchSellTokenSelect />);
+  it('resets bridge state on unmount', () => {
+    const { unmount } = render(<BatchSellTokenSelect />);
 
-    expect(mockDispatch).toHaveBeenCalledWith({
-      type: 'bridge/setBatchSellSourceTokens',
-      payload: [],
+    expect(mockDispatch).not.toHaveBeenCalledWith({
+      type: 'bridge/resetBridgeState',
     });
+
+    unmount();
+
     expect(mockDispatch).toHaveBeenCalledWith({
-      type: 'bridge/setBatchSellDestToken',
-      payload: undefined,
+      type: 'bridge/resetBridgeState',
     });
   });
 

app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.tsx

@@ -31,9 +31,9 @@ import { CaipChainId } from '@metamask/utils';
 import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
 import {
+  resetBridgeState,
   selectBatchSellDestStablecoins,
   selectBatchSellDestStablecoinsByChain,
-  setBatchSellDestToken,
   setBatchSellSourceTokens,
 } from '../../../../../core/redux/slices/bridge';
 import { RootState } from '../../../../../reducers';
@@ -85,11 +85,13 @@ export function BatchSellTokenSelect() {
   >(() => sortedEligibleChains[0]?.chainId);
   const [selectedTokens, setSelectedTokens] = useState<BridgeToken[]>([]);
 
-  // Start each Batch Sell flow from a clean Redux handoff state.
-  useEffect(() => {
-    dispatch(setBatchSellSourceTokens([]));
-    dispatch(setBatchSellDestToken(undefined));
-  }, [dispatch]);
+  // Reset bridge state when component unmounts.
+  useEffect(
+    () => () => {
+      dispatch(resetBridgeState());
+    },
+    [dispatch],
+  );
 
   useEffect(() => {
     // Default to the highest-value chain once balances load, but preserve a