browser: fix direct search (#5719)

rainbow-me · May 14, 2024 · 0a1511e · 0a1511e
1 parent a19d714
commit 0a1511e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git a/src/components/DappBrowser/search/SearchContext.tsx b/src/components/DappBrowser/search/SearchContext.tsx
@@ -10,6 +10,7 @@ interface SearchContextType {
   inputRef: AnimatedRef<TextInput>;
   isFocused: SharedValue<boolean>;
   keyboardHeight: SharedValue<number>;
+  shouldShowGoogleSearch: SharedValue<boolean>;
 }
 
 const SearchContext = createContext<SearchContextType | undefined>(undefined);
@@ -28,6 +29,7 @@ export const SearchContextProvider = ({ children }: { children: React.ReactNode
   const inputRef = useAnimatedRef<TextInput>();
   const isFocused = useSharedValue<boolean>(false);
   const keyboardHeight = useSharedValue<number>(getDefaultKeyboardHeight());
+  const shouldShowGoogleSearch = useSharedValue(true);
 
   return (
     <SearchContext.Provider
@@ -37,6 +39,7 @@ export const SearchContextProvider = ({ children }: { children: React.ReactNode
         inputRef,
         isFocused,
         keyboardHeight,
+        shouldShowGoogleSearch,
       }}
     >
       {children}

diff --git a/src/components/DappBrowser/search/results/SearchResult.tsx b/src/components/DappBrowser/search/results/SearchResult.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import { Source } from 'react-native-fast-image';
-import Animated, { SharedValue, useAnimatedProps, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
+import Animated, { DerivedValue, SharedValue, useAnimatedProps, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
 import GoogleSearchIcon from '@/assets/googleSearchIcon.png';
 import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFasterImage';
 import { ButtonPressAnimation } from '@/components/animations';
@@ -96,7 +96,13 @@ export const SearchResult = ({ index, goToUrl }: { index: number; goToUrl: (url:
 
 const searchText = i18n.t(i18n.l.dapp_browser.search.search);
 
-export const GoogleSearchResult = ({ goToUrl }: { goToUrl: (url: string) => void }) => {
+export const GoogleSearchResult = ({
+  goToUrl,
+  shouldShowGoogleSearch,
+}: {
+  goToUrl: (url: string) => void;
+  shouldShowGoogleSearch: DerivedValue<boolean>;
+}) => {
   const { searchQuery } = useSearchContext();
   const { width: deviceWidth } = useDimensions();
 
@@ -107,31 +113,39 @@ export const GoogleSearchResult = ({ goToUrl }: { goToUrl: (url: string) => void
     [goToUrl, searchQuery]
   );
 
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      display: shouldShowGoogleSearch?.value ? 'flex' : 'none',
+    };
+  });
+
   return (
-    <Box as={ButtonPressAnimation} padding="8px" borderRadius={18} scaleTo={0.95} onPress={onPress}>
-      <Inline space="12px" alignVertical="center" wrap={false}>
-        <Box
-          alignItems="center"
-          justifyContent="center"
-          style={{ backgroundColor: globalColors.white100 }}
-          width={{ custom: 40 }}
-          height={{ custom: 40 }}
-          borderRadius={10}
-        >
-          <ImgixImage source={GoogleSearchIcon as Source} style={{ width: 30, height: 30 }} size={30} />
-        </Box>
-        <Box width={{ custom: deviceWidth - 100 }}>
-          <Stack space="10px">
-            <AnimatedText size="17pt" weight="bold" color="label" numberOfLines={1}>
-              {animatedText}
-            </AnimatedText>
-            <Text size="13pt" weight="bold" color="labelTertiary">
-              Google
-            </Text>
-          </Stack>
-        </Box>
-      </Inline>
-    </Box>
+    <Animated.View style={animatedStyle}>
+      <Box as={ButtonPressAnimation} padding="8px" borderRadius={18} scaleTo={0.95} onPress={onPress}>
+        <Inline space="12px" alignVertical="center" wrap={false}>
+          <Box
+            alignItems="center"
+            justifyContent="center"
+            style={{ backgroundColor: globalColors.white100 }}
+            width={{ custom: 40 }}
+            height={{ custom: 40 }}
+            borderRadius={10}
+          >
+            <ImgixImage source={GoogleSearchIcon as Source} style={{ width: 30, height: 30 }} size={30} />
+          </Box>
+          <Box width={{ custom: deviceWidth - 100 }}>
+            <Stack space="10px">
+              <AnimatedText size="17pt" weight="bold" color="label" numberOfLines={1}>
+                {animatedText}
+              </AnimatedText>
+              <Text size="13pt" weight="bold" color="labelTertiary">
+                Google
+              </Text>
+            </Stack>
+          </Box>
+        </Inline>
+      </Box>
+    </Animated.View>
   );
 };
 

diff --git a/src/components/DappBrowser/search/results/SearchResults.tsx b/src/components/DappBrowser/search/results/SearchResults.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
-import Animated, { SharedValue, useAnimatedReaction, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import Animated, { SharedValue, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Box, Inline, Inset, Stack, Text, TextIcon, globalColors, useColorMode } from '@/design-system';
 import { Dapp, useDappsContext } from '@/resources/metadata/dapps';
@@ -67,8 +67,8 @@ const search = (query: string, dapps: Dapp[], numberOfResults = 4): Dapp[] => {
     .slice(0, numberOfResults);
 
   // if the query is a valid URL and is not already in the results, add it to the results
-  if (isValidURLWorklet(query) && !filteredDapps.some(dapp => dapp?.url.includes(query))) {
-    return [{ url: query, urlDisplay: query, name: query } as Dapp, ...(filteredDapps as Dapp[])];
+  if (isValidURLWorklet(query) && !filteredDapps.some(dapp => dapp?.url === query)) {
+    return [{ url: query, urlDisplay: query, name: query, isDirect: true } as unknown as Dapp, ...(filteredDapps as Dapp[])];
   }
 
   // @ts-expect-error: Same here
@@ -84,7 +84,7 @@ export const SearchResults = React.memo(function SearchResults({
 }) {
   const { isDarkMode } = useColorMode();
   const { searchViewProgress } = useBrowserContext();
-  const { inputRef, keyboardHeight, searchQuery, searchResults } = useSearchContext();
+  const { inputRef, keyboardHeight, searchQuery, searchResults, shouldShowGoogleSearch } = useSearchContext();
   const { dapps } = useDappsContext();
 
   const backgroundStyle = useAnimatedStyle(() => ({
@@ -101,7 +101,13 @@ export const SearchResults = React.memo(function SearchResults({
     (result, previous) => {
       if (result !== previous && isFocused.value) {
         searchResults.modify(value => {
-          const results = search(result, dapps);
+          const results = search(result, dapps, 4);
+          // If the first result is a direct match, don't show the google search
+          if (results[0]?.isDirect) {
+            shouldShowGoogleSearch.value = false;
+          } else {
+            shouldShowGoogleSearch.value = true;
+          }
           value.splice(0, value.length);
           value.push(...results);
           return value;
@@ -119,7 +125,7 @@ export const SearchResults = React.memo(function SearchResults({
   }));
 
   const suggestedGoogleSearchAnimatedStyle = useAnimatedStyle(() => ({
-    display: searchResults.value.length ? 'none' : 'flex',
+    display: searchResults.value.length || !shouldShowGoogleSearch.value ? 'none' : 'flex',
   }));
 
   const closeButtonAnimatedStyle = useAnimatedStyle(() => ({
@@ -197,7 +203,7 @@ export const SearchResults = React.memo(function SearchResults({
               <Box paddingTop={{ custom: 42 }}>
                 <SearchResult index={0} goToUrl={goToUrl} />
                 <Animated.View style={suggestedGoogleSearchAnimatedStyle}>
-                  <GoogleSearchResult goToUrl={goToUrl} />
+                  <GoogleSearchResult goToUrl={goToUrl} shouldShowGoogleSearch={shouldShowGoogleSearch} />
                 </Animated.View>
               </Box>
               {/* </Box> */}
@@ -214,7 +220,7 @@ export const SearchResults = React.memo(function SearchResults({
                     </Inline>
                   </Inset>
                   <Box gap={6}>
-                    <GoogleSearchResult goToUrl={goToUrl} />
+                    <GoogleSearchResult goToUrl={goToUrl} shouldShowGoogleSearch={shouldShowGoogleSearch} />
                     <SearchResult index={1} goToUrl={goToUrl} />
                     <SearchResult index={2} goToUrl={goToUrl} />
                     <SearchResult index={3} goToUrl={goToUrl} />

diff --git a/src/resources/metadata/dapps.tsx b/src/resources/metadata/dapps.tsx
@@ -20,6 +20,7 @@ export type Dapp = {
     shadow?: string | null;
   };
   report: { url: string };
+  isDirect?: boolean;
   search: {
     normalizedName: string;
     normalizedNameTokens: string[];