[CHORE]: Convert Discover to Typescript + cleanup discover context

src/components/ens-profile/ActionButtons/MoreButton.tsx

@@ -29,9 +29,6 @@ export default function MoreButton({ address, ensName }: { address?: string; ens
   const { navigate } = useNavigation();
   const { setClipboard } = useClipboard();
   const { contacts, onRemoveContact } = useContacts();
-  const {
-    params: { setIsSearchModeEnabled },
-  } = useRoute<any>();
   const isSelectedWallet = useMemo(() => {
     const visibleWallet = selectedWallet.addresses?.find((wallet: { visible: boolean }) => wallet.visible);
 
@@ -106,7 +103,6 @@ export default function MoreButton({ address, ensName }: { address?: string; ens
     async ({ nativeEvent: { actionKey } }) => {
       if (actionKey === ACTIONS.OPEN_WALLET) {
         if (!isSelectedWallet) {
-          setIsSearchModeEnabled?.(false);
           switchToWalletWithAddress(address!);
         }
         navigate(Routes.WALLET_SCREEN);
@@ -140,17 +136,7 @@ export default function MoreButton({ address, ensName }: { address?: string; ens
         Share.share(android ? { message: shareLink } : { url: shareLink });
       }
     },
-    [
-      address,
-      contact,
-      ensName,
-      isSelectedWallet,
-      navigate,
-      onRemoveContact,
-      setClipboard,
-      setIsSearchModeEnabled,
-      switchToWalletWithAddress,
-    ]
+    [address, contact, ensName, isSelectedWallet, navigate, onRemoveContact, setClipboard, switchToWalletWithAddress]
   );
 
   const menuConfig = useMemo(() => ({ menuItems, ...(ios && { menuTitle: '' }) }), [menuItems]);

src/components/exchange/ExchangeAssetList.tsx

@@ -2,12 +2,11 @@ import { useIsFocused } from '@react-navigation/native';
 import React, {
   forwardRef,
   ForwardRefRenderFunction,
+  MutableRefObject,
   ReactElement,
   useCallback,
-  useContext,
   useImperativeHandle,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import { InteractionManager, Keyboard, SectionList, SectionListData } from 'react-native';
@@ -16,14 +15,12 @@ import { ButtonPressAnimation } from '../animations';
 import useAccountSettings from '../../hooks/useAccountSettings';
 import FastCurrencySelectionRow from '../asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow';
 import { ContactRow } from '../contacts';
-import DiscoverSheetContext from '../../screens/discover/DiscoverScreenContext';
 import { GradientText } from '../text';
 import { CopyToast, ToastPositionContainer } from '../toasts';
 import contextMenuProps from './exchangeAssetRowContextMenuProps';
 import { TokenSectionTypes } from '@/helpers';
 import { useAndroidScrollViewGestureHandler, usePrevious } from '@/hooks';
 import { useNavigation } from '@/navigation';
-import store from '@/redux/store';
 import Routes from '@/navigation/routesNames';
 import styled from '@/styled-thing';
 import { useTheme } from '@/theme';
@@ -115,10 +112,7 @@ const ExchangeAssetList: ForwardRefRenderFunction<SectionList, ExchangeAssetList
   { footerSpacer, keyboardDismissMode = 'none', itemProps, items, onLayout, query, testID, isExchangeList },
   ref
 ) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { sectionListRef = useRef<SectionList>(null) } = useContext(DiscoverSheetContext) || {
-    sectionListRef: undefined,
-  };
+  const sectionListRef = ref as MutableRefObject<SectionList>;
   useImperativeHandle(ref, () => sectionListRef.current as SectionList);
   const prevQuery = usePrevious(query);
   const { getParent: dangerouslyGetParent, navigate } = useNavigation();

src/components/exchange/ExchangeSearch.tsx

@@ -1,10 +1,9 @@
 import lang from 'i18n-js';
 import { isEmpty } from 'lodash';
-import React, { ForwardRefRenderFunction, MutableRefObject, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import React, { ForwardRefRenderFunction, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import Spinner from '../../assets/chartSpinner.png';
-import DiscoverSheetContext from '../../screens/discover/DiscoverScreenContext';
 import { ClearInputDecorator, Input } from '../inputs';
 import { analytics } from '@/analytics';
 import { ImgixImage } from '@/components/images';
@@ -17,7 +16,6 @@ import { useTheme } from '@/theme';
 import { Box, Text } from '@/design-system';
 import { Source } from 'react-native-fast-image';
 import { IS_TEST } from '@/env';
-import { ChainId } from '@rainbow-me/swaps';
 
 export const ExchangeSearchHeight = 40;
 const DoneButtonWidth = 52;
@@ -132,9 +130,6 @@ const ExchangeSearch: ForwardRefRenderFunction<TextInput, ExchangeSearchProps> =
 
   const spinnerRotation = useSharedValue(0);
   const spinnerScale = useSharedValue(0);
-  const { isSearchModeEnabled = true } = useContext(DiscoverSheetContext) ?? {
-    isSearchModeEnabled: true,
-  };
 
   const spinnerTimeout = useRef<NodeJS.Timeout>();
   const { colors } = useTheme();
@@ -173,18 +168,18 @@ const ExchangeSearch: ForwardRefRenderFunction<TextInput, ExchangeSearchProps> =
       borderRadius={ExchangeSearchHeight / 2}
       height={ExchangeSearchHeight}
       shadows={shadows}
-      width={isSearchModeEnabled ? ExchangeSearchWidthFocused : ExchangeSearchWidth}
+      width={ExchangeSearchWidthFocused}
     >
       <Box
         flexDirection="row"
         borderRadius={ExchangeSearchHeight / 2}
         height={{ custom: ExchangeSearchHeight }}
-        paddingLeft={isSearchModeEnabled ? '12px' : undefined}
-        paddingRight={isSearchModeEnabled ? '36px' : undefined}
+        paddingLeft={'12px'}
+        paddingRight={'36px'}
       >
         <BackgroundGradient />
 
-        {isSearchModeEnabled && !IS_TEST && (
+        {!IS_TEST && (
           <>
             <Box as={Animated.View} paddingTop={{ custom: 14 }} style={searchIconStyle}>
               <Text weight="semibold" size="17pt" color={{ custom: colors.alpha(colors.blueGreyDark, 0.6) }}>
@@ -213,7 +208,7 @@ const ExchangeSearch: ForwardRefRenderFunction<TextInput, ExchangeSearchProps> =
         )}
         <SearchInput
           clearTextOnFocus={clearTextOnFocus}
-          isSearchModeEnabled={isSearchModeEnabled}
+          isSearchModeEnabled
           onChangeText={onChangeText}
           onFocus={onFocus}
           placeholder={placeholderText}

src/components/native-context-menu/contextMenu.tsx

@@ -20,7 +20,7 @@ import {
 // eslint-disable-next-line @typescript-eslint/ban-types
 type IconConfig = { iconType: 'ASSET' | 'SYSTEM' | (string & {}); iconValue: string; iconTint?: string | DynamicColor };
 
-type MenuActionConfig = Readonly<
+export type MenuActionConfig = Readonly<
   {
     actionSubtitle?: string;
     // eslint-disable-next-line @typescript-eslint/ban-types

src/components/showcase/ShowcaseHeader.js

@@ -135,9 +135,6 @@ export function Header() {
   const { handleSetSeedPhrase, handlePressImportButton } = useImportingWallet();
 
   const onWatchAddress = useCallback(() => {
-    if (contextValue?.setIsSearchModeEnabled) {
-      contextValue.setIsSearchModeEnabled(false);
-    }
     handleSetSeedPhrase(contextValue.address);
     handlePressImportButton(color, contextValue.address, contextValue?.data?.profile?.accountSymbol);
   }, [contextValue, handleSetSeedPhrase, handlePressImportButton, color]);

src/hooks/useOnAvatarPress.ts

@@ -25,7 +25,7 @@ import { ETH_ADDRESS } from '@/references';
 import { isZero } from '@/helpers/utilities';
 import { IS_IOS } from '@/env';
 import { buildRainbowUrl } from '@/utils/buildRainbowUrl';
-import { MenuConfig } from '@/components/native-context-menu/contextMenu';
+import { MenuConfig, MenuActionConfig } from '@/components/native-context-menu/contextMenu';
 
 type UseOnAvatarPressProps = {
   /** Is the avatar selection being used on the wallet or transaction screen? */
@@ -224,7 +224,7 @@ export default ({ screenType = 'transaction' }: UseOnAvatarPressProps = {}) => {
             actionKey: 'removePhoto',
             actionTitle: lang.t('profiles.profile_avatar.remove_photo'),
           },
-    ].filter(Boolean),
+    ].filter(Boolean) as readonly MenuActionConfig[],
   };
 
   const avatarActionSheetOptions = avatarContextMenuConfig.menuItems.map(item => item && item.actionTitle).concat(ios ? ['Cancel'] : []);

src/navigation/SwipeNavigator.tsx

@@ -7,7 +7,6 @@ import { TestnetToast } from '@/components/toasts';
 import { DAPP_BROWSER, POINTS, useExperimentalFlag } from '@/config';
 import { Box, Columns, globalColors, Stack, useForegroundColor, Text, Cover, useColorMode } from '@/design-system';
 import { IS_ANDROID, IS_IOS, IS_TEST } from '@/env';
-import { isUsingButtonNavigation } from '@/utils/deviceUtils';
 import { useAccountAccentColor, useAccountSettings, useCoinListEdited, useDimensions, usePendingTransactions } from '@/hooks';
 import { useRemoteConfig } from '@/model/remoteConfig';
 import RecyclerListViewScrollToTopProvider, {
@@ -227,13 +226,11 @@ const TabBar = ({ descriptors, jumpTo, navigation, state }: TabBarProps) => {
         }, 5);
       } else if (isFocused && tabBarIcon === 'tabDiscover') {
         if (delta < DOUBLE_PRESS_DELAY) {
-          // @ts-expect-error No call signatures
           discoverOpenSearchFnRef?.();
           return;
         }
 
         if (discoverScrollToTopFnRef?.() === 0) {
-          // @ts-expect-error No call signatures
           discoverOpenSearchFnRef?.();
           return;
         }
@@ -261,7 +258,6 @@ const TabBar = ({ descriptors, jumpTo, navigation, state }: TabBarProps) => {
       if (tabBarIcon === 'tabDiscover') {
         navigation.navigate(Routes.DISCOVER_SCREEN);
         InteractionManager.runAfterInteractions(() => {
-          // @ts-expect-error No call signatures
           discoverOpenSearchFnRef?.();
         });
       }

src/resources/reservoir/mints.ts

@@ -17,7 +17,11 @@ const showAlert = () => {
   );
 };
 
-export const navigateToMintCollection = async (contractAddress: EthereumAddress, pricePerMint: BigNumberish, chainId: ChainId) => {
+export const navigateToMintCollection = async (
+  contractAddress: EthereumAddress,
+  pricePerMint: BigNumberish | undefined,
+  chainId: ChainId
+) => {
   logger.debug('[mints]: Navigating to Mint Collection', {
     contractAddress,
     chainId,

src/screens/CurrencySelectModal.tsx

@@ -36,7 +36,7 @@ import { Box, Row, Rows } from '@/design-system';
 import { useTheme } from '@/theme';
 import { IS_TEST } from '@/env';
 import { useSortedUserAssets } from '@/resources/assets/useSortedUserAssets';
-import DiscoverSearchInput from '@/components/discover/DiscoverSearchInput';
+import DiscoverSearchInput from '@/screens/discover/components/DiscoverSearchInput';
 import { externalTokenQueryKey, fetchExternalToken } from '@/resources/assets/externalAssetsQuery';
 import { queryClient } from '@/react-query/queryClient';
 import { ChainId, Network } from '@/chains/types';

src/screens/ShowcaseSheet.js

@@ -42,7 +42,9 @@ const LoadingWrapper = styled.View({
 });
 
 export default function ShowcaseScreen() {
-  const { params: { address: addressOrDomain, setIsSearchModeEnabled } = {} } = useRoute();
+  const {
+    params: { address: addressOrDomain },
+  } = useRoute();
 
   const theme = useTheme();
 
@@ -100,9 +102,8 @@ export default function ShowcaseScreen() {
       ...userData,
       address: accountAddress,
       addressOrDomain,
-      setIsSearchModeEnabled,
     }),
-    [userData, accountAddress, addressOrDomain, setIsSearchModeEnabled]
+    [userData, accountAddress, addressOrDomain]
   );
 
   const loading = userData === null || isInitialLoading;

src/screens/discover/DiscoverScreen.tsx

@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Keyboard } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import { Box } from '@/design-system';
 import { Page } from '@/components/layout';
 import { Navbar } from '@/components/navbar/Navbar';
 import DiscoverScreenContent from './components/DiscoverScreenContent';
-import DiscoverSheetContext from './DiscoverScreenContext';
 import { ButtonPressAnimation } from '@/components/animations';
 import { ContactAvatar } from '@/components/contacts';
 import ImageAvatar from '@/components/contacts/ImageAvatar';
@@ -15,42 +14,27 @@ import { useNavigation } from '@/navigation';
 import { safeAreaInsetValues } from '@/utils';
 import * as i18n from '@/languages';
 import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+import DiscoverScreenProvider, { useDiscoverScreenContext } from './DiscoverScreenContext';
 
 export let discoverScrollToTopFnRef: () => number | null = () => null;
-export default function DiscoverScreen() {
-  const ref = React.useRef<Animated.ScrollView>(null);
+
+const Content = () => {
   const { navigate } = useNavigation();
   const isFocused = useIsFocused();
   const { accountSymbol, accountColor, accountImage } = useAccountProfile();
 
+  const { isSearching, scrollToTop, scrollViewRef } = useDiscoverScreenContext();
   const scrollY = useSharedValue(0);
-  const [isSearchModeEnabled, setIsSearchModeEnabled] = React.useState(false);
 
   const onChangeWallet = React.useCallback(() => {
     navigate(Routes.CHANGE_WALLET_SHEET);
   }, [navigate]);
 
   React.useEffect(() => {
-    if (isSearchModeEnabled && !isFocused) {
+    if (isSearching && !isFocused) {
       Keyboard.dismiss();
     }
-  }, [isFocused, isSearchModeEnabled]);
-
-  const scrollToTop = useCallback(() => {
-    if (!ref.current) return -1;
-
-    // detect if scroll was already at top and return 0;
-    if (scrollY.value === 0) {
-      return 0;
-    }
-
-    ref.current?.scrollTo({
-      y: 0,
-      animated: true,
-    });
-
-    return 1;
-  }, [scrollY]);
+  }, [isFocused, isSearching]);
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
@@ -60,43 +44,46 @@ export default function DiscoverScreen() {
 
   useEffect(() => {
     discoverScrollToTopFnRef = scrollToTop;
-  }, [ref, scrollToTop]);
+  }, [scrollToTop]);
 
   return (
-    <DiscoverSheetContext.Provider
-      // @ts-expect-error – JS component
-      value={{ isSearchModeEnabled, setIsSearchModeEnabled }}
-    >
-      <Box as={Page} flex={1}>
-        <Navbar
-          hasStatusBarInset
-          leftComponent={
-            <ButtonPressAnimation onPress={onChangeWallet} scaleTo={0.8} overflowMargin={50}>
-              {accountImage ? (
-                <ImageAvatar image={accountImage} marginRight={10} size="header" />
-              ) : (
-                <ContactAvatar color={accountColor} marginRight={10} size="small" value={accountSymbol} />
-              )}
-            </ButtonPressAnimation>
-          }
-          testID={isSearchModeEnabled ? 'discover-header-search' : 'discover-header'}
-          title={isSearchModeEnabled ? i18n.t(i18n.l.discover.search.search) : i18n.t(i18n.l.discover.search.discover)}
-        />
-        <Box
-          ref={ref}
-          as={Animated.ScrollView}
-          automaticallyAdjustsScrollIndicatorInsets={false}
-          contentContainerStyle={isSearchModeEnabled ? { height: '100%' } : {}}
-          onScroll={scrollHandler}
-          scrollEnabled={!isSearchModeEnabled}
-          bounces={!isSearchModeEnabled}
-          removeClippedSubviews
-          scrollIndicatorInsets={{ bottom: safeAreaInsetValues.bottom + 167 }}
-          testID="discover-sheet"
-        >
-          <DiscoverScreenContent />
-        </Box>
+    <Box as={Page} flex={1}>
+      <Navbar
+        hasStatusBarInset
+        leftComponent={
+          <ButtonPressAnimation onPress={onChangeWallet} scaleTo={0.8} overflowMargin={50}>
+            {accountImage ? (
+              <ImageAvatar image={accountImage} marginRight={10} size="header" />
+            ) : (
+              <ContactAvatar color={accountColor} marginRight={10} size="small" value={accountSymbol} />
+            )}
+          </ButtonPressAnimation>
+        }
+        testID={isSearching ? 'discover-header-search' : 'discover-header'}
+        title={isSearching ? i18n.t(i18n.l.discover.search.search) : i18n.t(i18n.l.discover.search.discover)}
+      />
+      <Box
+        ref={scrollViewRef}
+        as={Animated.ScrollView}
+        automaticallyAdjustsScrollIndicatorInsets={false}
+        contentContainerStyle={isSearching ? { height: '100%' } : {}}
+        onScroll={scrollHandler}
+        scrollEnabled={!isSearching}
+        bounces={!isSearching}
+        removeClippedSubviews
+        scrollIndicatorInsets={{ bottom: safeAreaInsetValues.bottom + 167 }}
+        testID="discover-sheet"
+      >
+        <DiscoverScreenContent />
       </Box>
-    </DiscoverSheetContext.Provider>
+    </Box>
+  );
+};
+
+export default function DiscoverScreen() {
+  return (
+    <DiscoverScreenProvider>
+      <Content />
+    </DiscoverScreenProvider>
   );
 }