cleanup

src/components/DappBrowser/search-input/SearchInput.tsx

@@ -1,64 +1,125 @@
-import React, { RefObject } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { Box, globalColors, useColorMode, useForegroundColor } from '@/design-system';
 import { ButtonPressAnimation } from '@/components/animations';
-import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { BlurView } from '@react-native-community/blur';
 import Input from '@/components/inputs/Input';
 import * as i18n from '@/languages';
-import { NativeSyntheticEvent, TextInput, TextInputSubmitEditingEventData } from 'react-native';
+import { NativeSyntheticEvent, TextInputSubmitEditingEventData } from 'react-native';
 import { ToolbarIcon } from '../BrowserToolbar';
 import { IS_IOS } from '@/env';
 import { FadeMask } from '@/__swaps__/screens/Swap/components/FadeMask';
 import { THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
 import { opacity } from '@/__swaps__/screens/Swap/utils';
 import { DappBrowserShadows } from '../DappBrowserShadows';
-import { useBrowserContext } from '../BrowserContext';
-
-const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
-
-export const SearchInput = ({
-  inputValue,
-  onPress,
-  onBlur,
-  onFocus,
-  onChangeText,
-  onSubmitEditing,
-  tabViewProgress,
-  shouldShowMenuButton,
-  shouldShowRefreshButton,
-  onRefresh,
-}: {
-  inputValue: string | undefined;
-  onPress: () => void;
-  onBlur: () => void;
-  onFocus: () => void;
-  onChangeText: (newUrl: string) => void;
-  onSubmitEditing: (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
-  tabViewProgress: SharedValue<number> | undefined;
-  shouldShowMenuButton: boolean;
-  shouldShowRefreshButton: boolean;
-  onRefresh: () => void;
-}) => {
-  const { isSearchInputFocused, searchInputRef } = useBrowserContext();
+import { RAINBOW_HOME, useBrowserContext } from '../BrowserContext';
+import isValidDomain from 'is-valid-domain';
+
+const GOOGLE_SEARCH_URL = 'https://www.google.com/search?q=';
+const HTTP = 'http://';
+const HTTPS = 'https://';
+
+const AnimatedInput = Animated.createAnimatedComponent(Input);
+
+export const SearchInput = () => {
+  const {
+    isSearchInputFocused,
+    searchInputRef,
+    tabStates,
+    activeTabIndex,
+    tabViewVisible,
+    searchViewProgress,
+    setIsSearchInputFocused,
+    updateActiveTabState,
+    onRefresh,
+  } = useBrowserContext();
   const { isDarkMode } = useColorMode();
 
   const fillSecondary = useForegroundColor('fillSecondary');
   const labelSecondary = useForegroundColor('labelSecondary');
   const labelQuaternary = useForegroundColor('labelQuaternary');
   const separatorSecondary = useForegroundColor('separatorSecondary');
 
+  const [url, setUrl] = useState<string>(tabStates[activeTabIndex].url);
+
+  const handleUrlSubmit = (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+    let newUrl = event.nativeEvent.text;
+
+    let urlForValidation = newUrl.replace(/^https?:\/\//, '');
+    if (urlForValidation.endsWith('/')) {
+      urlForValidation = urlForValidation.slice(0, -1);
+    }
+
+    if (!isValidDomain(urlForValidation, { wildcard: true })) {
+      newUrl = GOOGLE_SEARCH_URL + newUrl;
+    } else if (!newUrl.startsWith(HTTP) && !newUrl.startsWith(HTTPS)) {
+      newUrl = HTTPS + newUrl;
+    }
+
+    updateActiveTabState(activeTabIndex, { url: newUrl });
+  };
+
+  const formattedUrl = useMemo(() => {
+    try {
+      const { hostname, pathname, search } = new URL(url);
+      if (hostname === 'www.google.com' && pathname === '/search') {
+        const params = new URLSearchParams(search);
+        return params.get('q') || url;
+      }
+      return hostname.startsWith('www.') ? hostname.slice(4) : hostname;
+    } catch {
+      return url;
+    }
+  }, [url]);
+
+  // url handling needs work
+  useEffect(() => {
+    if (tabStates[activeTabIndex].url !== url) {
+      setUrl(tabStates[activeTabIndex].url);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeTabIndex, tabStates]);
+
+  const onUrlChange = (newUrl: string) => {
+    setUrl(newUrl);
+  };
+
+  const isGoogleSearch = url.startsWith(GOOGLE_SEARCH_URL);
+  const isHome = formattedUrl === RAINBOW_HOME;
+  // eslint-disable-next-line no-nested-ternary
+  const inputValue = isHome ? undefined : isSearchInputFocused && !isGoogleSearch ? url : formattedUrl;
+
   const buttonColorIOS = isDarkMode ? fillSecondary : opacity(globalColors.white100, 0.9);
   const buttonColorAndroid = isDarkMode ? globalColors.blueGrey100 : globalColors.white100;
   const buttonColor = IS_IOS ? buttonColorIOS : buttonColorAndroid;
 
+  const isOnHomepage = tabStates[activeTabIndex].url === RAINBOW_HOME;
+
   const inputStyle = useAnimatedStyle(() => ({
-    pointerEvents: (tabViewProgress?.value ?? 0) < 1 ? 'auto' : 'none',
+    paddingLeft: 16 + (searchViewProgress?.value ?? 0) * 24,
   }));
 
+  const onPress = useCallback(() => {
+    if (!isSearchInputFocused) {
+      setIsSearchInputFocused(true);
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 50);
+    }
+  }, [isSearchInputFocused, searchInputRef, setIsSearchInputFocused]);
+
+  const onBlur = useCallback(() => {
+    setIsSearchInputFocused(false);
+  }, [setIsSearchInputFocused]);
+
+  const onFocus = useCallback(() => {
+    setIsSearchInputFocused(true);
+  }, [setIsSearchInputFocused]);
+
   return (
     <DappBrowserShadows>
-      <Box as={Animated.View} justifyContent="center" style={inputStyle}>
+      <Box justifyContent="center" pointerEvents={tabViewVisible ? 'none' : 'auto'}>
         <ButtonPressAnimation
           onPress={onPress}
           pointerEvents={isSearchInputFocused ? 'auto' : 'box-only'}
@@ -83,76 +144,79 @@ export const SearchInput = ({
               zIndex: 99,
             }}
           >
-            <Input
+            <AnimatedInput
               clearButtonMode="while-editing"
               enablesReturnKeyAutomatically
               keyboardType="web-search"
               // i18n
               placeholder={i18n.t(i18n.l.dapp_browser.address_bar.input_placeholder)}
               placeholderTextColor={labelQuaternary}
               onBlur={onBlur}
-              onChangeText={onChangeText}
+              onChangeText={onUrlChange}
               onFocus={onFocus}
-              onSubmitEditing={onSubmitEditing}
+              onSubmitEditing={handleUrlSubmit}
               ref={searchInputRef}
               returnKeyType="go"
               selectTextOnFocus
               spellCheck={false}
-              style={{
-                color: labelSecondary,
-                flex: 1,
-                fontSize: 17,
-                fontWeight: '700',
-                height: 48,
-                marginRight: 8,
-                paddingLeft: 16,
-                paddingRight: 8,
-                paddingVertical: 10,
-                pointerEvents: isSearchInputFocused ? 'auto' : 'none',
-                textAlign: isSearchInputFocused ? 'left' : 'center',
-                elevation: 99,
-              }}
+              style={[
+                inputStyle,
+                {
+                  color: labelSecondary,
+                  flex: 1,
+                  fontSize: 17,
+                  fontWeight: '700',
+                  height: 48,
+                  marginRight: 8,
+                  paddingRight: 8,
+                  paddingVertical: 10,
+                  pointerEvents: isSearchInputFocused ? 'auto' : 'none',
+                  textAlign: isSearchInputFocused ? 'left' : 'center',
+                  elevation: 99,
+                },
+              ]}
               value={inputValue}
             />
           </MaskedView>
           {IS_IOS && (
             <Box
-              as={AnimatedBlurView}
+              as={BlurView}
               blurAmount={20}
               blurType={isDarkMode ? 'dark' : 'light'}
               height={{ custom: 48 }}
               position="absolute"
-              style={[{ borderRadius: 18 }, inputStyle]}
+              style={[{ borderRadius: 18 }]}
+              pointerEvents={tabViewVisible ? 'none' : 'auto'}
               width="full"
             />
           )}
           <Box
-            as={Animated.View}
             borderRadius={18}
             height={{ custom: 48 }}
             position="absolute"
             style={[
               { backgroundColor: buttonColor, borderColor: separatorSecondary, borderWidth: IS_IOS && isDarkMode ? THICK_BORDER_WIDTH : 0 },
-              inputStyle,
             ]}
+            pointerEvents={tabViewVisible ? 'none' : 'auto'}
             width="full"
           />
         </ButtonPressAnimation>
-        {shouldShowMenuButton && (
+        {(isSearchInputFocused || !isOnHomepage) && (
           <Box position="absolute" style={{ left: 14 }}>
             <ToolbarIcon
-              color="labelSecondary"
-              icon="􀍡"
+              color="labelTertiary"
+              disabled={isSearchInputFocused}
+              icon={isSearchInputFocused ? '􀊫' : '􀍡'}
               onPress={() => {
                 return;
               }}
               size="icon 17px"
             />
           </Box>
         )}
-        {shouldShowRefreshButton && (
+        {!isSearchInputFocused && !isOnHomepage && (
           <Box position="absolute" style={{ right: 14 }}>
-            <ToolbarIcon color="labelSecondary" icon="􀅈" onPress={onRefresh} size="icon 17px" />
+            <ToolbarIcon color="labelTertiary" icon="􀅈" onPress={onRefresh} size="icon 17px" />
           </Box>
         )}
       </Box>

src/components/DappBrowser/search-input/TabButton.tsx

@@ -5,8 +5,7 @@ import { Box, Text, globalColors, useColorMode, useForegroundColor } from '@/des
 import { IS_IOS } from '@/env';
 import position from '@/styles/position';
 import { BlurView } from '@react-native-community/blur';
-import React, { useCallback, RefObject } from 'react';
-import { TextInput } from 'react-native';
+import React, { useCallback } from 'react';
 import { DappBrowserShadows } from '../DappBrowserShadows';
 import { useBrowserContext } from '../BrowserContext';
 

src/components/DappBrowser/search/Search.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SearchBar } from './SearchBar';
-import { SearchResults } from './SearchResults';
+import { SearchResults } from './search-results/SearchResults';
 
 export const Search = () => {
   return (