fix: select correct swap source asset when navigating from browser (#23534)

GeorgeGkas · web-flow · commit 08fdc9c90a1c · 2025-12-03T18:15:55.000Z
## **Description** This PR fixes an issue where when users selected the swap button for an asset presented in browser URL bar, that asset was not selected as source when navigating to swap page.  ## **Changelog**  CHANGELOG entry: fixes an issue where when users selected the swap button for an asset presented in browser URL bar, that asset was not selected as source when navigating to swap page. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3487 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings**  ### **Before** https://github.com/user-attachments/assets/2b9a5836-77da-41b7-899d-86fe73469021  ### **After** https://github.com/user-attachments/assets/1c1ad351-da97-49c7-a64c-47f63fd0f345  ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  --- > [!NOTE] > Pass the selected token from URL Autocomplete to Swaps navigation and update the navigation hook to accept a token override with proper chain handling and fallbacks. > > - **Swaps/Bridge Navigation**: > - Update `useSwapBridgeNavigation` to accept an optional `tokenOverride` in `goToNativeBridge` and `goToSwaps`. > - Use the override (or provided `sourceToken`) to determine the effective chain ID, format chain IDs, and select the candidate source token. > - Add fallback to mainnet native token when the source chain isn’t bridge-enabled. > - Expand tests to cover token override, mainnet fallback, home-page filter network, Solana CAIP handling, and analytics events. > - **URL Autocomplete**: > - On swap button press, construct a `BridgeToken` from `TokenSearchResult` and invoke `goToSwaps` with it. > - Adjust tests to assert `goToSwaps` is called with the correct token, plus additional tests for loading indicator, result de-duplication, recents limiting, and reset on hide. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 37e7967. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>
diff --git a/app/components/UI/Bridge/hooks/useSwapBridgeNavigation/index.ts b/app/components/UI/Bridge/hooks/useSwapBridgeNavigation/index.ts
@@ -57,12 +57,15 @@ export const useSwapBridgeNavigation = ({
 
   // Unified swaps/bridge UI
   const goToNativeBridge = useCallback(
-    (bridgeViewMode: BridgeViewMode) => {
+    (bridgeViewMode: BridgeViewMode, tokenOverride?: BridgeToken) => {
+      // Use tokenOverride if provided, otherwise fall back to tokenBase
+      const effectiveTokenBase = tokenOverride ?? tokenBase;
+
       // Determine effective chain ID - use home page filter network when no sourceToken provided
       const getEffectiveChainId = (): CaipChainId | Hex => {
-        if (tokenBase) {
+        if (effectiveTokenBase) {
           // If specific token provided, use its chainId
-          return tokenBase.chainId;
+          return effectiveTokenBase.chainId;
         }
 
         // No token provided - check home page filter network
@@ -82,7 +85,7 @@ export const useSwapBridgeNavigation = ({
 
       let bridgeSourceNativeAsset;
       try {
-        if (!tokenBase) {
+        if (!effectiveTokenBase) {
           bridgeSourceNativeAsset = getNativeAssetForChainId(effectiveChainId);
         }
       } catch (error) {
@@ -104,7 +107,7 @@ export const useSwapBridgeNavigation = ({
           : undefined;
 
       const candidateSourceToken =
-        tokenBase ?? bridgeNativeSourceTokenFormatted;
+        effectiveTokenBase ?? bridgeNativeSourceTokenFormatted;
       const isBridgeEnabledSource = getIsBridgeEnabledSource(effectiveChainId);
       let sourceToken = isBridgeEnabledSource
         ? candidateSourceToken
@@ -167,9 +170,12 @@ export const useSwapBridgeNavigation = ({
   );
   const { networkModal } = useAddNetwork();
 
-  const goToSwaps = useCallback(() => {
-    goToNativeBridge(BridgeViewMode.Unified);
-  }, [goToNativeBridge]);
+  const goToSwaps = useCallback(
+    (tokenOverride?: BridgeToken) => {
+      goToNativeBridge(BridgeViewMode.Unified, tokenOverride);
+    },
+    [goToNativeBridge],
+  );
 
   return {
     goToSwaps,
diff --git a/app/components/UI/Bridge/hooks/useSwapBridgeNavigation/useSwapBridgeNavigation.test.ts b/app/components/UI/Bridge/hooks/useSwapBridgeNavigation/useSwapBridgeNavigation.test.ts
@@ -37,9 +37,12 @@ jest.mock('../../../../hooks/useMetrics', () => {
   };
 });
 
+const mockGetIsBridgeEnabledSource = jest.fn(() => true);
 jest.mock('../../../../../core/redux/slices/bridge', () => ({
   ...jest.requireActual('../../../../../core/redux/slices/bridge'),
-  selectIsBridgeEnabledSourceFactory: jest.fn(() => () => true),
+  selectIsBridgeEnabledSourceFactory: jest.fn(
+    () => mockGetIsBridgeEnabledSource,
+  ),
 }));
 
 const mockGoToPortfolioBridge = jest.fn();
@@ -140,6 +143,9 @@ describe('useSwapBridgeNavigation', () => {
 
     // Reset selectChainId mock to default
     (selectChainId as unknown as jest.Mock).mockReturnValue(mockChainId);
+
+    // Reset bridge enabled mock to default (enabled)
+    mockGetIsBridgeEnabledSource.mockReturnValue(true);
   });
 
   it('uses native token when no token is provided', () => {
@@ -202,6 +208,93 @@ describe('useSwapBridgeNavigation', () => {
     });
   });
 
+  it('uses tokenOverride when passed to goToSwaps', () => {
+    const configuredToken: BridgeToken = {
+      address: '0x0000000000000000000000000000000000000001',
+      symbol: 'TOKEN',
+      name: 'Test Token',
+      decimals: 18,
+      chainId: mockChainId,
+    };
+
+    const overrideToken: BridgeToken = {
+      address: '0x0000000000000000000000000000000000000002',
+      symbol: 'OVERRIDE',
+      name: 'Override Token',
+      decimals: 18,
+      chainId: '0x89' as Hex,
+    };
+
+    const { result } = renderHookWithProvider(
+      () =>
+        useSwapBridgeNavigation({
+          location: mockLocation,
+          sourcePage: mockSourcePage,
+          sourceToken: configuredToken,
+        }),
+      { state: initialState },
+    );
+
+    result.current.goToSwaps(overrideToken);
+
+    expect(mockNavigate).toHaveBeenCalledWith('Bridge', {
+      screen: 'BridgeView',
+      params: {
+        sourceToken: overrideToken,
+        sourcePage: mockSourcePage,
+        bridgeViewMode: BridgeViewMode.Unified,
+      },
+    });
+  });
+
+  it('falls back to ETH on mainnet when bridge is not enabled for source chain', () => {
+    mockGetIsBridgeEnabledSource.mockReturnValue(false);
+
+    // Mock that getNativeAssetForChainId returns ETH for mainnet fallback
+    (getNativeAssetForChainId as jest.Mock).mockReturnValue({
+      address: '0x0000000000000000000000000000000000000000',
+      name: 'Ether',
+      symbol: 'ETH',
+      decimals: 18,
+    });
+
+    const unsupportedToken: BridgeToken = {
+      address: '0x0000000000000000000000000000000000000001',
+      symbol: 'UNSUPPORTED',
+      name: 'Unsupported Token',
+      decimals: 18,
+      chainId: '0x999' as Hex,
+    };
+
+    const { result } = renderHookWithProvider(
+      () =>
+        useSwapBridgeNavigation({
+          location: mockLocation,
+          sourcePage: mockSourcePage,
+          sourceToken: unsupportedToken,
+        }),
+      { state: initialState },
+    );
+
+    result.current.goToSwaps();
+
+    expect(mockNavigate).toHaveBeenCalledWith('Bridge', {
+      screen: 'BridgeView',
+      params: {
+        sourceToken: {
+          address: '0x0000000000000000000000000000000000000000',
+          name: 'Ether',
+          symbol: 'ETH',
+          image: '',
+          decimals: 18,
+          chainId: '0x1',
+        },
+        sourcePage: mockSourcePage,
+        bridgeViewMode: BridgeViewMode.Unified,
+      },
+    });
+  });
+
   it('navigates to Bridge when goToSwaps is called and bridge UI is enabled', () => {
     const { result } = renderHookWithProvider(
       () =>
diff --git a/app/components/UI/UrlAutocomplete/index.test.tsx b/app/components/UI/UrlAutocomplete/index.test.tsx
@@ -147,11 +147,35 @@ jest.mock('../../../selectors/tokenSearchDiscoveryDataController', () => {
   };
 });
 
+const mockGoToSwaps = jest.fn();
+jest.mock('../Bridge/hooks/useSwapBridgeNavigation', () => ({
+  ...jest.requireActual('../Bridge/hooks/useSwapBridgeNavigation'),
+  useSwapBridgeNavigation: jest.fn(() => ({
+    goToSwaps: mockGoToSwaps,
+    networkModal: null,
+  })),
+}));
+
+// Mock useFavicon to prevent async state updates warning
+jest.mock('../../hooks/useFavicon/useFavicon', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    isLoading: false,
+    isLoaded: true,
+    error: null,
+    favicon: null,
+  })),
+}));
+
 describe('UrlAutocomplete', () => {
   beforeAll(() => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   afterAll(() => {
     jest.useFakeTimers({ legacyFakeTimers: true });
   });
@@ -331,7 +355,7 @@ describe('UrlAutocomplete', () => {
     ).toBeDefined();
   });
 
-  it('should swap a token when the swap button is pressed', async () => {
+  it('calls goToSwaps when the swap button is pressed', async () => {
     mockUseTSDReturnValue({
       results: [
         {
@@ -364,7 +388,7 @@ describe('UrlAutocomplete', () => {
       { includeHiddenElements: true },
     );
     fireEvent.press(swapButton);
-    expect(mockNavigate).toHaveBeenCalled();
+    expect(mockGoToSwaps).toHaveBeenCalled();
   });
 
   it('should call onSelect when a bookmark is selected', async () => {
@@ -416,4 +440,167 @@ describe('UrlAutocomplete', () => {
     fireEvent.press(result);
     expect(onSelect).toHaveBeenCalled();
   });
+
+  it('calls goToSwaps with correct BridgeToken when swap button is pressed', async () => {
+    mockUseTSDReturnValue({
+      results: [
+        {
+          tokenAddress: '0x123',
+          chainId: '0x1',
+          name: 'Dogecoin',
+          symbol: 'DOGE',
+          usdPrice: 1,
+          usdPricePercentChange: {
+            oneDay: 1,
+          },
+          logoUrl: 'https://example.com/doge.png',
+        },
+      ],
+      isLoading: false,
+      reset: jest.fn(),
+      searchTokens: jest.fn(),
+    });
+    const ref = React.createRef<UrlAutocompleteRef>();
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {
+      state: defaultState,
+    });
+
+    act(() => {
+      ref.current?.search('dog');
+      jest.runAllTimers();
+    });
+
+    const swapButton = await screen.findByTestId(
+      'autocomplete-result-swap-button',
+      { includeHiddenElements: true },
+    );
+    fireEvent.press(swapButton);
+
+    expect(mockGoToSwaps).toHaveBeenCalledWith({
+      address: '0x123',
+      name: 'Dogecoin',
+      symbol: 'DOGE',
+      chainId: '0x1',
+      image: 'https://example.com/doge.png',
+      decimals: 18,
+    });
+  });
+
+  it('resets token search when hide method is called via ref', async () => {
+    const resetMock = jest.fn();
+    mockUseTSDReturnValue({
+      results: [
+        {
+          tokenAddress: '0x123',
+          chainId: '0x1',
+          name: 'Dogecoin',
+          symbol: 'DOGE',
+          usdPrice: 1,
+          usdPricePercentChange: {
+            oneDay: 1,
+          },
+        },
+      ],
+      isLoading: false,
+      reset: resetMock,
+      searchTokens: jest.fn(),
+    });
+    const ref = React.createRef<UrlAutocompleteRef>();
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {
+      state: defaultState,
+    });
+
+    act(() => {
+      ref.current?.search('dog');
+      jest.runAllTimers();
+    });
+
+    expect(
+      await screen.findByText('Dogecoin', { includeHiddenElements: true }),
+    ).toBeDefined();
+
+    act(() => {
+      ref.current?.hide();
+    });
+
+    expect(resetMock).toHaveBeenCalled();
+  });
+
+  it('displays token section header with loading indicator when loading', async () => {
+    mockUseTSDReturnValue({
+      results: [],
+      isLoading: true,
+      reset: jest.fn(),
+      searchTokens: jest.fn(),
+    });
+    const ref = React.createRef<UrlAutocompleteRef>();
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {
+      state: defaultState,
+    });
+
+    act(() => {
+      ref.current?.search('token');
+      jest.runAllTimers();
+    });
+
+    expect(
+      await screen.findByText('Tokens', { includeHiddenElements: true }),
+    ).toBeDefined();
+    expect(
+      await screen.findByTestId('loading-indicator', {
+        includeHiddenElements: true,
+      }),
+    ).toBeDefined();
+  });
+
+  it('removes duplicate results with same url and category', async () => {
+    const ref = React.createRef<UrlAutocompleteRef>();
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {
+      state: {
+        ...defaultState,
+        browser: {
+          history: [
+            { url: 'https://www.google.com', name: 'Google' },
+            { url: 'https://www.google.com', name: 'Google Duplicate' },
+          ],
+        },
+      },
+    });
+
+    act(() => {
+      ref.current?.search('google');
+      jest.runAllTimers();
+    });
+
+    const googleResults = await screen.findAllByText(/Google/, {
+      includeHiddenElements: true,
+    });
+    expect(googleResults.length).toBe(1);
+  });
+
+  it('limits recent results to MAX_RECENTS', async () => {
+    const historyItems = Array.from({ length: 10 }, (_, i) => ({
+      url: `https://www.site${i}.com`,
+      name: `Site${i}`,
+    }));
+    const ref = React.createRef<UrlAutocompleteRef>();
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {
+      state: {
+        ...defaultState,
+        browser: { history: historyItems },
+        bookmarks: [],
+      },
+    });
+
+    act(() => {
+      ref.current?.search('Site');
+      jest.runAllTimers();
+    });
+
+    // MAX_RECENTS is 5, so with 10 items, only 5 should show
+    const recentsHeader = await screen.findByText('Recents', {
+      includeHiddenElements: true,
+    });
+    expect(recentsHeader).toBeDefined();
+  });
 });
diff --git a/app/components/UI/UrlAutocomplete/index.tsx b/app/components/UI/UrlAutocomplete/index.tsx
