feat: Start browser tab in token discovery mode

app/components/UI/BrowserUrlBar/BrowserUrlBar.test.tsx

@@ -60,7 +60,6 @@ describe('BrowserUrlBar', () => {
     onSubmitEditing: jest.fn(),
     onCancel: jest.fn(),
     onFocus: jest.fn(),
-    onBlur: jest.fn(),
     onChangeText: jest.fn(),
     connectedAccounts: ['0x123'],
     activeUrl: 'https://example.com',
@@ -72,7 +71,6 @@ describe('BrowserUrlBar', () => {
     onSubmitEditing: jest.fn(),
     onCancel: jest.fn(),
     onFocus: jest.fn(),
-    onBlur: jest.fn(),
     onChangeText: jest.fn(),
     connectedAccounts: ['0x123'],
     activeUrl: 'https://example.com',
@@ -213,6 +211,5 @@ describe('BrowserUrlBar', () => {
 
     fireEvent(urlInput, 'blur');
     expect(defaultProps.setIsUrlBarFocused).toHaveBeenCalledWith(false);
-    expect(defaultProps.onBlur).toHaveBeenCalled();
   });
 });

app/components/UI/BrowserUrlBar/BrowserUrlBar.tsx

@@ -41,7 +41,6 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
       onSubmitEditing,
       onCancel,
       onFocus,
-      onBlur,
       onChangeText,
       connectedAccounts,
       activeUrl,
@@ -110,7 +109,6 @@ const BrowserUrlBar = forwardRef<BrowserUrlBarRef, BrowserUrlBarProps>(
         return;
       }
       unfocusInput();
-      onBlur();
     };
 
     const onFocusInput = () => {

app/components/UI/BrowserUrlBar/BrowserUrlBar.types.ts

@@ -27,7 +27,6 @@ export type BrowserUrlBarProps = {
   onSubmitEditing: (text: string) => void;
   onCancel: () => void;
   onFocus: () => void;
-  onBlur: () => void;
   onChangeText: (text: string) => void;
   connectedAccounts: string[];
   activeUrl: string;

app/components/UI/UrlAutocomplete/index.test.tsx

@@ -116,7 +116,7 @@ describe('UrlAutocomplete', () => {
 
   it('should show sites from dapp list', async () => {
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('uni');
@@ -128,7 +128,7 @@ describe('UrlAutocomplete', () => {
 
   it('should show sites from bookmarks', async () => {
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('MyBook');
@@ -140,7 +140,7 @@ describe('UrlAutocomplete', () => {
 
   it('should show sites from recents/history', async () => {
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('Goog');
@@ -152,7 +152,7 @@ describe('UrlAutocomplete', () => {
 
   it('should show history and bookmarks when searching for an empty string', async () => {
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('');
@@ -165,7 +165,7 @@ describe('UrlAutocomplete', () => {
 
   it('should not show Recents and Favorites when nothing is found', async () => {
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('nothing');
@@ -177,7 +177,7 @@ describe('UrlAutocomplete', () => {
 
   it('should delete a bookmark when pressing the trash icon', async () => {
     const ref = React.createRef<UrlAutocompleteRef>();
-    const { store } = render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    const { store } = render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
     store.dispatch = jest.fn();
 
     act(() => {
@@ -198,7 +198,7 @@ describe('UrlAutocomplete', () => {
       searchTokens: jest.fn(),
     });
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('doge');
@@ -237,7 +237,7 @@ describe('UrlAutocomplete', () => {
       searchTokens: jest.fn(),
     });
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('dog');
@@ -266,7 +266,7 @@ describe('UrlAutocomplete', () => {
       searchTokens: jest.fn(),
     });
     const ref = React.createRef<UrlAutocompleteRef>();
-    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} />, {state: defaultState});
+    render(<UrlAutocomplete ref={ref} onSelect={noop} onDismiss={noop} onSwap={noop} />, {state: defaultState});
 
     act(() => {
       ref.current?.search('dog');
@@ -277,4 +277,46 @@ describe('UrlAutocomplete', () => {
     fireEvent.press(swapButton);
     expect(mockNavigate).toHaveBeenCalled();
   });
+
+  it('should call onSelect when a bookmark is selected', async () => {
+    const onSelect = jest.fn();
+    const ref = React.createRef<UrlAutocompleteRef>();
+    render(<UrlAutocomplete ref={ref} onSelect={onSelect} onDismiss={noop} onSwap={noop} />, {state: defaultState});
+
+    const result = await screen.findByText('MyBookmark', {includeHiddenElements: true});
+    fireEvent.press(result);
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it('should call onSelect when a token is selected', async () => {
+    mockUseTSDReturnValue({
+      results: [
+        {
+          tokenAddress: '0x123',
+          chainId: '0x1',
+          name: 'Dogecoin',
+          symbol: 'DOGE',
+          usdPrice: 1,
+          usdPricePercentChange: {
+            oneDay: 1,
+          },
+        },
+      ],
+      isLoading: false,
+      reset: jest.fn(),
+      searchTokens: jest.fn(),
+    });
+    const onSelect = jest.fn();
+    const ref = React.createRef<UrlAutocompleteRef>();
+    render(<UrlAutocomplete ref={ref} onSelect={onSelect} onDismiss={noop} onSwap={noop} />, {state: defaultState});
+
+    act(() => {
+      ref.current?.search('dog');
+      jest.runAllTimers();
+    });
+
+    const result = await screen.findByText('Dogecoin', {includeHiddenElements: true});
+    fireEvent.press(result);
+    expect(onSelect).toHaveBeenCalled();
+  });
 });

app/components/UI/UrlAutocomplete/index.tsx

@@ -56,8 +56,13 @@ interface ResultsWithCategory {
 const UrlAutocomplete = forwardRef<
   UrlAutocompleteRef,
   UrlAutocompleteComponentProps
->(({ onSelect, onDismiss }, ref) => {
-  const [fuseResults, setFuseResults] = useState<FuseSearchResult[]>([]);
+>(({ onSelect, onDismiss, onSwap }, ref) => {
+  const browserHistory = useSelector(selectBrowserHistoryWithType);
+  const bookmarks = useSelector(selectBrowserBookmarksWithType);
+  const [fuseResults, setFuseResults] = useState<FuseSearchResult[]>([
+    ...browserHistory,
+    ...bookmarks,
+  ]);
   const {searchTokens, results: tokenSearchResults, reset: resetTokenSearch, isLoading: isTokenSearchLoading} = useTokenSearchDiscovery();
   const usdConversionRate = useSelector(selectUsdConversionRate);
   const tokenResults: TokenSearchResult[] = useMemo(
@@ -117,8 +122,6 @@ const UrlAutocomplete = forwardRef<
     })
   ), [fuseResults, tokenResults, isTokenSearchLoading]);
 
-  const browserHistory = useSelector(selectBrowserHistoryWithType);
-  const bookmarks = useSelector(selectBrowserBookmarksWithType);
   const fuseRef = useRef<Fuse<FuseSearchResult> | null>(null);
   const resultsRef = useRef<View | null>(null);
   const { styles } = useStyles(styleSheet, {});
@@ -213,13 +216,12 @@ const UrlAutocomplete = forwardRef<
 
   const goToSwaps = useCallback(async (result: TokenSearchResult) => {
     try {
+      onSwap();
       await goToSwapsHook(result);
     } catch (error) {
       return;
     }
-    hide();
-    onDismiss();
-  }, [hide, onDismiss, goToSwapsHook]);
+  }, [goToSwapsHook, onSwap]);
 
   const renderSectionHeader = useCallback(({section: { category }}: {section: ResultsWithCategory}) => (
     <View style={styles.categoryWrapper}>
@@ -234,7 +236,9 @@ const UrlAutocomplete = forwardRef<
     <Result
       result={item}
       onPress={() => {
-        hide();
+        if (item.category !== UrlAutocompleteCategory.Tokens) {
+            hide();
+        }
         onSelect(item);
       }}
       onSwapPress={goToSwaps}

app/components/UI/UrlAutocomplete/types.ts

@@ -16,6 +16,11 @@ export type UrlAutocompleteComponentProps = {
    * tapping on the background
    */
   onDismiss: () => void;
+  /**
+   * Callback that is triggered while
+   * swapping a token
+   */
+  onSwap: () => void;
 };
 
 export enum UrlAutocompleteCategory {

app/components/Views/Browser/index.js

@@ -34,7 +34,8 @@ import BrowserTab from '../BrowserTab/BrowserTab';
 import URL from 'url-parse';
 import { useMetrics } from '../../hooks/useMetrics';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { appendURLParams } from '../../../util/browser';
+
+import { appendURLParams, isTokenDiscoveryBrowserEnabled } from '../../../util/browser';
 import {
   THUMB_WIDTH,
   THUMB_HEIGHT,
@@ -100,6 +101,18 @@ export const Browser = (props) => {
     [isEnabled, isDataCollectionForMarketingEnabled],
   );
 
+  const newTab = useCallback((url, linkType) => {
+    // if tabs.length > MAX_BROWSER_TABS, show the max browser tabs modal
+    if (tabs.length >= MAX_BROWSER_TABS) {
+      navigation.navigate(Routes.MODAL.MAX_BROWSER_TABS_MODAL);
+    } else if (isTokenDiscoveryBrowserEnabled()) {
+      // When a new tab is created, a new tab is rendered, which automatically sets the url source on the webview
+      createNewTab(url, linkType);
+    } else {
+      createNewTab(url || homePageUrl(), linkType);
+    }
+  }, [tabs, navigation, createNewTab, homePageUrl]);
+
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   // TODO remove after we release Solana dapp connectivity
   useFocusEffect(
@@ -127,19 +140,6 @@ export const Browser = (props) => {
   );
   ///: END:ONLY_INCLUDE_IF
 
-  const newTab = useCallback(
-    (url, linkType) => {
-      // if tabs.length > MAX_BROWSER_TABS, show the max browser tabs modal
-      if (tabs.length >= MAX_BROWSER_TABS) {
-        navigation.navigate(Routes.MODAL.MAX_BROWSER_TABS_MODAL);
-      } else {
-        // When a new tab is created, a new tab is rendered, which automatically sets the url source on the webview
-        createNewTab(url || homePageUrl(), linkType);
-      }
-    },
-    [tabs, navigation, homePageUrl, createNewTab],
-  );
-
   const updateTabInfo = useCallback(
     (tabID, info) => {
       updateTab(tabID, info);

app/components/Views/Browser/index.test.tsx

@@ -14,6 +14,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import { act } from '@testing-library/react';
+import { isTokenDiscoveryBrowserEnabled } from '../../../util/browser';
 import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../util/test/accountsControllerTestUtils';
 
 jest.mock('../../hooks/useAccounts', () => ({
@@ -85,6 +86,11 @@ jest.mock('../../../util/phishingDetection', () => ({
   getPhishingTestResult: jest.fn().mockReturnValue({ result: false }),
 }));
 
+jest.mock('../../../util/browser', () => ({
+  ...jest.requireActual('../../../util/browser'),
+  isTokenDiscoveryBrowserEnabled: jest.fn().mockReturnValue(false),
+}));
+
 const Stack = createStackNavigator();
 const mockStore = configureMockStore();
 
@@ -130,6 +136,72 @@ describe('Browser', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('should create a new homepage tab when rendered with no tabs', () => {
+    let passedUrl = '';
+    const mockCreateNewTab = jest.fn((url) => {
+      passedUrl = url;
+    });
+    renderWithProvider(
+      <Provider store={mockStore(mockInitialState)}>
+        <NavigationContainer independent>
+          <Stack.Navigator>
+            <Stack.Screen name={Routes.BROWSER.VIEW}>
+              {() => (
+                <Browser
+                  route={routeMock}
+                  tabs={[]}
+                  activeTab={1}
+                  navigation={mockNavigation}
+                  createNewTab={mockCreateNewTab}
+                  closeAllTabs={jest.fn}
+                  closeTab={jest.fn}
+                  setActiveTab={jest.fn}
+                  updateTab={jest.fn}
+                />
+              )}
+            </Stack.Screen>
+          </Stack.Navigator>
+        </NavigationContainer>
+      </Provider>,
+      { state: { ...mockInitialState } },
+    );
+
+    expect(mockCreateNewTab).toHaveBeenCalled();
+    expect(passedUrl).toMatch(/^https:\/\//);
+  });
+
+  it('should create a new token discovery tab when rendered with no tabs and token discovery browser is enabled', () => {
+    jest.mocked(isTokenDiscoveryBrowserEnabled).mockReturnValue(true);
+    const mockCreateNewTab = jest.fn();
+    renderWithProvider(
+      <Provider store={mockStore(mockInitialState)}>
+        <NavigationContainer independent>
+          <Stack.Navigator>
+            <Stack.Screen name={Routes.BROWSER.VIEW}>
+              {() => (
+                <Browser
+                  route={routeMock}
+                  tabs={[]}
+                  activeTab={1}
+                  navigation={mockNavigation}
+                  createNewTab={mockCreateNewTab}
+                  closeAllTabs={jest.fn}
+                  closeTab={jest.fn}
+                  setActiveTab={jest.fn}
+                  updateTab={jest.fn}
+                />
+              )}
+            </Stack.Screen>
+          </Stack.Navigator>
+        </NavigationContainer>
+      </Provider>,
+      { state: { ...mockInitialState } },
+    );
+
+    expect(mockCreateNewTab).toHaveBeenCalledWith(undefined, undefined);
+    jest.mocked(isTokenDiscoveryBrowserEnabled).mockReturnValue(false);
+  });
+
   it('should call navigate when route param `newTabUrl` and `timestamp` are added', () => {
     // Render the component with an initial prop value
     const { rerender } = renderWithProvider(