diff --git a/src/components/DappBrowser/search/SearchContext.tsx b/src/components/DappBrowser/search/SearchContext.tsx index f32b2ea6fde..b9659516601 100644 --- a/src/components/DappBrowser/search/SearchContext.tsx +++ b/src/components/DappBrowser/search/SearchContext.tsx @@ -10,6 +10,7 @@ interface SearchContextType { inputRef: AnimatedRef; isFocused: SharedValue; keyboardHeight: SharedValue; + shouldShowGoogleSearch: SharedValue; } const SearchContext = createContext(undefined); @@ -28,6 +29,7 @@ export const SearchContextProvider = ({ children }: { children: React.ReactNode const inputRef = useAnimatedRef(); const isFocused = useSharedValue(false); const keyboardHeight = useSharedValue(getDefaultKeyboardHeight()); + const shouldShowGoogleSearch = useSharedValue(true); return ( {children} diff --git a/src/components/DappBrowser/search/results/SearchResult.tsx b/src/components/DappBrowser/search/results/SearchResult.tsx index 90403cb4b51..0fbb2130274 100644 --- 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; +}) => { 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 ( - - - - - - - - - {animatedText} - - - Google - - - - - + + + + + + + + + + {animatedText} + + + Google + + + + + + ); }; diff --git a/src/components/DappBrowser/search/results/SearchResults.tsx b/src/components/DappBrowser/search/results/SearchResults.tsx index 80449e42355..c383e59eb1e 100644 --- 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({ - + {/* */} @@ -214,7 +220,7 @@ export const SearchResults = React.memo(function SearchResults({ - + diff --git a/src/resources/metadata/dapps.tsx b/src/resources/metadata/dapps.tsx index 93b8556e144..3ffcdade53b 100644 --- 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[];