@kane/prince of hill

src/components/Discover/DiscoverHome.tsx

@@ -8,6 +8,7 @@ import useExperimentalFlag, {
   NFT_OFFERS,
   FEATURED_RESULTS,
   TRENDING_TOKENS,
+  KING_OF_THE_HILL,
 } from '@rainbow-me/config/experimentalHooks';
 import { Inline, Inset, Stack, Box, Separator, useColorMode } from '@/design-system';
 import { useAccountSettings, useWallets } from '@/hooks';
@@ -31,15 +32,22 @@ import { AirdropsCard } from '@/components/cards/skia-cards/AirdropsCard';
 import { LaunchCard } from '@/components/cards/skia-cards/LaunchCard';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
-import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR } from '@/__swaps__/screens/Swap/constants';
 import { DiscoverFeaturedResultsCard } from './DiscoverFeaturedResultsCard';
 import { isTestnetChain } from '@/handlers/web3';
+import { KingOfTheHill } from './KingOfTheHill';
 
 export const HORIZONTAL_PADDING = 20;
 
 export default function DiscoverHome() {
-  const { profiles_enabled, mints_enabled, op_rewards_enabled, featured_results, trending_tokens_enabled, new_discover_cards_enabled } =
-    useRemoteConfig();
+  const {
+    profiles_enabled,
+    mints_enabled,
+    op_rewards_enabled,
+    featured_results,
+    trending_tokens_enabled,
+    new_discover_cards_enabled,
+    king_of_the_hill_enabled,
+  } = useRemoteConfig();
   const { isDarkMode } = useColorMode();
   const profilesEnabledLocalFlag = useExperimentalFlag(PROFILES);
   const profilesEnabledRemoteFlag = profiles_enabled;
@@ -51,6 +59,8 @@ export default function DiscoverHome() {
   const opRewardsLocalFlag = useExperimentalFlag(OP_REWARDS);
   const opRewardsRemoteFlag = op_rewards_enabled;
   const trendingTokensEnabled = (useExperimentalFlag(TRENDING_TOKENS) || trending_tokens_enabled) && !IS_TEST;
+  const kingOfTheHillEnabled = (useExperimentalFlag(KING_OF_THE_HILL) || king_of_the_hill_enabled) && !IS_TEST;
+
   const { chainId } = useAccountSettings();
   const testNetwork = isTestnetChain({ chainId });
   const { navigate } = useNavigation();
@@ -84,13 +94,9 @@ export default function DiscoverHome() {
               {isProfilesEnabled && <ENSSearchCard />}
             </Inline>
           )}
-          <Separator color={{ custom: isDarkMode ? SEPARATOR_COLOR : LIGHT_SEPARATOR_COLOR }} thickness={1} />
-          {trendingTokensEnabled && (
-            <>
-              <TrendingTokens />
-              <Separator color={{ custom: isDarkMode ? SEPARATOR_COLOR : LIGHT_SEPARATOR_COLOR }} thickness={1} />
-            </>
-          )}
+          {kingOfTheHillEnabled && <KingOfTheHill />}
+          <Separator color={isDarkMode ? 'separatorSecondary' : 'separatorTertiary'} thickness={1} />
+          {trendingTokensEnabled && <TrendingTokens />}
           <RemoteCardCarousel />
           {mintsEnabled && (
             <Stack space="20px">

src/components/Discover/DiscoverScreenContent.tsx

@@ -1,36 +1,23 @@
 import React from 'react';
 import { View } from 'react-native';
-import { FlexItem, Page } from '@/components/layout';
 import DiscoverHome from '@/components/Discover/DiscoverHome';
 import DiscoverSearch from '@/components/Discover/DiscoverSearch';
-import DiscoverSearchContainer from '@/components/Discover/DiscoverSearchContainer';
 import { Box, Inset } from '@/design-system';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDiscoverSearchQueryStore } from '@/__swaps__/screens/Swap/resources/search/searchV2';
 
-function Switcher({ children }: { children: React.ReactNode[] }) {
-  const isSearching = useDiscoverSearchQueryStore(state => state.isSearching);
-
-  return (
-    <>
-      <View style={{ display: isSearching ? 'flex' : 'none' }}>{isSearching ? children[0] : <FlexItem />}</View>
-      <View style={{ display: isSearching ? 'none' : 'flex' }}>{children[1]}</View>
-    </>
-  );
-}
-
-export default function DiscoverScreenContent() {
+export function DiscoverScreenContent() {
   const insets = useSafeAreaInsets();
+  const isSearching = useDiscoverSearchQueryStore(state => state.isSearching);
 
   return (
-    <Box as={Page} flex={1} testID="discover-home">
-      <Inset top="8px" bottom={{ custom: insets.bottom }}>
-        <DiscoverSearchContainer>
-          <Switcher>
-            <DiscoverSearch />
-            <DiscoverHome />
-          </Switcher>
-        </DiscoverSearchContainer>
+    <Box style={{ flex: 1 }} testID="discover-home">
+      <Inset bottom={{ custom: insets.bottom }}>
+        {/* TODO: without this empty view, the app crashes with no error. Something in the discover search cannot handle display: none */}
+        <View>{isSearching ? <DiscoverSearch /> : <View />}</View>
+        <View style={{ display: isSearching ? 'none' : 'flex' }}>
+          <DiscoverHome />
+        </View>
       </Inset>
     </Box>
   );

src/components/Discover/DiscoverScreenContext.tsx

@@ -1,10 +1,13 @@
 import { analytics } from '@/analytics';
-import React, { createContext, RefObject, useRef, useCallback } from 'react';
+import React, { createContext, RefObject, useRef, useCallback, useEffect } from 'react';
 import { SectionList, TextInput } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useDiscoverSearchQueryStore } from '@/__swaps__/screens/Swap/resources/search/searchV2';
 import { useTrackDiscoverScreenTime } from './useTrackDiscoverScreenTime';
 
+export let discoverScrollToTopFnRef: () => number | null = () => null;
+export let discoverOpenSearchFnRef: () => void = () => null;
+
 type DiscoverScreenContextType = {
   scrollViewRef: RefObject<Animated.ScrollView>;
   sectionListRef: RefObject<SectionList>;
@@ -53,6 +56,14 @@ const DiscoverScreenProvider = ({ children }: { children: React.ReactNode }) =>
     }
   }, [isSearching, scrollToTop]);
 
+  useEffect(() => {
+    discoverScrollToTopFnRef = scrollToTop;
+  }, [scrollToTop]);
+
+  useEffect(() => {
+    discoverOpenSearchFnRef = onTapSearch;
+  }, [onTapSearch]);
+
   const cancelSearch = useCallback(() => {
     searchInputRef.current?.blur();
     useDiscoverSearchQueryStore.setState({ searchQuery: '', isSearching: false });

src/components/Discover/DiscoverSearch.tsx

@@ -1,20 +1,18 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { InteractionManager, View } from 'react-native';
+import { Dimensions, InteractionManager, View } from 'react-native';
 import { useDebounce } from 'use-debounce';
 
 import * as lang from '@/languages';
 import deviceUtils from '@/utils/deviceUtils';
 import CurrencySelectionList from '@/components/CurrencySelectionList';
-import { Row } from '@/components/layout';
 import { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
 import { analytics } from '@/analytics';
 import { PROFILES, useExperimentalFlag } from '@/config';
-import { useAccountSettings, useSearchCurrencyList, usePrevious, useHardwareBackOnFocus } from '@/hooks';
+import { useAccountSettings, useSearchCurrencyList, usePrevious, useHardwareBackOnFocus, useDimensions } from '@/hooks';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
 import { fetchSuggestions } from '@/handlers/ens';
-import styled from '@/styled-thing';
-import { ethereumUtils, safeAreaInsetValues } from '@/utils';
+import { ethereumUtils } from '@/utils';
 import { getPoapAndOpenSheetWithQRHash, getPoapAndOpenSheetWithSecretWord } from '@/utils/poaps';
 import { navigateToMintCollection } from '@/resources/reservoir/mints';
 import { TAB_BAR_HEIGHT } from '@/navigation/SwipeNavigator';
@@ -26,10 +24,7 @@ import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks
 import { ChainId, Network } from '@/state/backendNetworks/types';
 import { useTimeoutEffect } from '@/hooks/useTimeout';
 import { useDiscoverSearchQueryStore, useDiscoverSearchStore } from '@/__swaps__/screens/Swap/resources/search/searchV2';
-
-export const SearchContainer = styled(Row)({
-  height: '100%',
-});
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type EnsResult = {
   address: string;
@@ -52,6 +47,7 @@ export default function DiscoverSearch() {
   const { navigate } = useNavigation();
   const { accountAddress } = useAccountSettings();
   const { colors } = useTheme();
+  const safeAreaInsets = useSafeAreaInsets();
 
   const [isFetchingEns, setIsFetchingEns] = useState(false);
   const { cancelSearch, searchInputRef, sectionListRef } = useDiscoverScreenContext();
@@ -71,8 +67,8 @@ export default function DiscoverSearch() {
   const { swapCurrencyList, swapCurrencyListLoading } = useSearchCurrencyList();
 
   const profilesEnabled = useExperimentalFlag(PROFILES);
-  const marginBottom = TAB_BAR_HEIGHT + safeAreaInsetValues.bottom + 16;
-  const TOP_OFFSET = safeAreaInsetValues.top + navbarHeight;
+  const MARGIN_BOTTOM = TAB_BAR_HEIGHT;
+  const TOP_OFFSET = safeAreaInsets.top + navbarHeight;
 
   const currencyList = useMemo(() => {
     // order:
@@ -263,24 +259,22 @@ export default function DiscoverSearch() {
   return (
     <View
       key={currencyListDataKey}
-      style={{ height: deviceUtils.dimensions.height - TOP_OFFSET - marginBottom }}
+      style={{ height: deviceUtils.dimensions.height - TOP_OFFSET - MARGIN_BOTTOM }}
       testID="discover-search-list"
     >
-      <SearchContainer>
-        <CurrencySelectionList
-          footerSpacer
-          fromDiscover
-          itemProps={itemProps}
-          keyboardDismissMode="on-drag"
-          // @ts-expect-error - FIXME: ens results / rainbow token results are not compatible with one another
-          listItems={currencyList}
-          loading={swapCurrencyListLoading || isFetchingEns}
-          query={searchQueryForSearch}
-          ref={sectionListRef}
-          showList
-          testID="discover-currency-select-list"
-        />
-      </SearchContainer>
+      <CurrencySelectionList
+        footerSpacer
+        fromDiscover
+        itemProps={itemProps}
+        keyboardDismissMode="on-drag"
+        // @ts-expect-error - FIXME: ens results / rainbow token results are not compatible with one another
+        listItems={currencyList}
+        loading={swapCurrencyListLoading || isFetchingEns}
+        query={searchQueryForSearch}
+        ref={sectionListRef}
+        showList
+        testID="discover-currency-select-list"
+      />
     </View>
   );
 }

src/components/Discover/DiscoverSearchBar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import * as i18n from '@/languages';
+import { ButtonPressAnimation } from '@/components/animations';
+import { Box, Inline, Text } from '@/design-system';
+import DiscoverSearchInput from '@/components/Discover/DiscoverSearchInput';
+import { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
+import { deviceUtils } from '@/utils';
+import { useDelayedValueWithLayoutAnimation } from '@/hooks';
+import { useDiscoverSearchQueryStore } from '@/__swaps__/screens/Swap/resources/search/searchV2';
+import { NAVBAR_HORIZONTAL_INSET, navbarHeight } from '../navbar/Navbar';
+import { useTheme } from '@/theme';
+
+const placeholderText = deviceUtils.isNarrowPhone
+  ? i18n.t(i18n.l.discover.search.search_ethereum_short)
+  : i18n.t(i18n.l.discover.search.search_ethereum);
+
+export function DiscoverSearchBar() {
+  const { colors } = useTheme();
+  const { onTapSearch, cancelSearch } = useDiscoverScreenContext();
+  const isSearching = useDiscoverSearchQueryStore(state => state.isSearching);
+  const delayedShowSearch = useDelayedValueWithLayoutAnimation(isSearching);
+
+  return (
+    <Box height={navbarHeight} width="full" justifyContent="center" paddingHorizontal={{ custom: NAVBAR_HORIZONTAL_INSET }}>
+      <Inline alignVertical="center" space={'16px'}>
+        <Box justifyContent="center" style={{ flex: 1 }}>
+          <DiscoverSearchInput
+            clearTextOnFocus={false}
+            isDiscover
+            onFocus={onTapSearch}
+            placeholderText={placeholderText}
+            testID="discover-search"
+          />
+        </Box>
+        <ButtonPressAnimation onPress={cancelSearch} testID="done-button">
+          {delayedShowSearch && (
+            <Text color={{ custom: colors.appleBlue }} size="17pt" weight="semibold">
+              {i18n.t(i18n.l.button.done)}
+            </Text>
+          )}
+        </ButtonPressAnimation>
+      </Inline>
+    </Box>
+  );
+}