Use sheet instead of custom AbsolutePortal

src/components/DappBrowser/control-panel/ControlPanel.tsx

@@ -311,7 +311,7 @@ export const ControlPanel = () => {
   );
 };
 
-const TapToDismiss = memo(function TapToDismiss() {
+export const TapToDismiss = memo(function TapToDismiss() {
   const { goBack } = useNavigation();
   return (
     <TouchableWithoutFeedback onPress={goBack}>

src/components/Discover/TrendingTokens.tsx

@@ -7,7 +7,6 @@ import { analyticsV2 } from '@/analytics';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
 import { ChainImage } from '@/components/coin-icon/ChainImage';
-import { NetworkSelector } from '@/components/NetworkSwitcher';
 import Skeleton, { FakeAvatar, FakeText } from '@/components/skeleton/Skeleton';
 import { SortDirection, TrendingCategory, TrendingSort } from '@/graphql/__generated__/arc';
 import { formatCurrency, formatNumber } from '@/helpers/strings';
@@ -21,7 +20,7 @@ import { sortFilters, timeFilters, useTrendingTokensStore } from '@/state/trendi
 import { colors } from '@/styles';
 import { darkModeThemeColors } from '@/styles/colors';
 import { useTheme } from '@/theme';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import React, { Dimensions, FlatList, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
@@ -489,7 +488,6 @@ function NoResults() {
 }
 
 function NetworkFilter() {
-  const [isOpen, setOpen] = useState(false);
   const selected = useSharedValue<ChainId | undefined>(undefined);
 
   const { chainId, setChainId } = useTrendingTokensStore(state => ({
@@ -513,12 +511,14 @@ function NetworkFilter() {
     return <ChainImage chainId={chainId} size={16} />;
   }, [chainId]);
 
-  return (
-    <>
-      <FilterButton label={label} icon={icon} onPress={() => setOpen(true)} />
-      {isOpen && <NetworkSelector selected={selected} setSelected={setSelected} onClose={() => setOpen(false)} />}
-    </>
-  );
+  const navigateToNetworkSelector = useCallback(() => {
+    Navigation.handleAction(Routes.NETWORK_SELECTOR, {
+      selected,
+      setSelected,
+    });
+  }, [selected, setSelected]);
+
+  return <FilterButton label={label} icon={icon} onPress={navigateToNetworkSelector} />;
 }
 
 function TimeFilter() {

src/components/NetworkSwitcher.tsx

@@ -2,21 +2,21 @@
 import { getChainColorWorklet } from '@/__swaps__/utils/swaps';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
-import { AbsolutePortal } from '@/components/AbsolutePortal';
 import { AnimatedBlurView } from '@/components/AnimatedComponents/AnimatedBlurView';
 import { ButtonPressAnimation } from '@/components/animations';
-import { SPRING_CONFIGS } from '@/components/animations/animationConfigs';
+import { SPRING_CONFIGS, TIMING_CONFIGS } from '@/components/animations/animationConfigs';
 import { AnimatedChainImage, ChainImage } from '@/components/coin-icon/ChainImage';
-import { AnimatedText, DesignSystemProvider, globalColors, Separator, Text, useBackgroundColor, useColorMode } from '@/design-system';
+import { AnimatedText, Box, DesignSystemProvider, globalColors, Separator, Text, useBackgroundColor, useColorMode } from '@/design-system';
 import { useForegroundColor } from '@/design-system/color/useForegroundColor';
 import * as i18n from '@/languages';
 import { useTheme } from '@/theme';
-import { DEVICE_WIDTH } from '@/utils/deviceUtils';
+import deviceUtils, { DEVICE_WIDTH } from '@/utils/deviceUtils';
 import MaskedView from '@react-native-masked-view/masked-view';
 import chroma from 'chroma-js';
 import { PropsWithChildren, ReactElement, useEffect } from 'react';
-import React, { Pressable, View } from 'react-native';
-import { Gesture, GestureDetector, State, TapGesture } from 'react-native-gesture-handler';
+import React, { Pressable, StyleSheet, View } from 'react-native';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
   FadeIn,
@@ -44,6 +44,11 @@ import {
   networkSwitcherStore,
   shouldShowCustomizeNetworksBanner,
 } from '@/state/networkSwitcher/networkSwitcher';
+import { RootStackParamList } from '@/navigation/types';
+import { IS_IOS } from '@/env';
+import { safeAreaInsetValues } from '@/utils';
+import { noop } from 'lodash';
+import { TapToDismiss } from './DappBrowser/control-panel/ControlPanel';
 
 const t = i18n.l.network_switcher;
 
@@ -304,10 +309,10 @@ function AllNetworksSection({
   selected: SharedValue<ChainId | undefined>;
 }) {
   const style = useAnimatedStyle(() => ({
-    opacity: editing.value ? withTiming(0, { duration: 200 }) : withDelay(200, withTiming(1, { duration: 200 })),
+    opacity: editing.value ? withTiming(0, TIMING_CONFIGS.fastFadeConfig) : withTiming(1, TIMING_CONFIGS.fastFadeConfig),
     height: withTiming(
       editing.value ? 0 : ITEM_HEIGHT + 14, // 14 is the gap to the separator
-      { duration: 250 }
+      TIMING_CONFIGS.fastFadeConfig
     ),
     marginTop: editing.value ? 0 : 14,
     pointerEvents: editing.value ? 'none' : 'auto',
@@ -597,7 +602,7 @@ function NetworksGrid({
     const height = sectionsOffsets.value[Section.unpinned].y + unpinnedHeight;
     return height;
   });
-  const containerStyle = useAnimatedStyle(() => ({ height: containerHeight.value }));
+  const containerStyle = useAnimatedStyle(() => ({ height: withTiming(containerHeight.value, TIMING_CONFIGS.slowerFadeConfig) }));
 
   const dragNetwork = Gesture.Pan()
     .maxPointers(1)
@@ -708,80 +713,64 @@ function NetworksGrid({
   );
 }
 
-function SheetBackdrop({ onPress }: { onPress: VoidFunction }) {
-  const tapGesture = Gesture.Tap().onEnd(onPress);
-  return (
-    <GestureDetector gesture={tapGesture}>
-      <Animated.View
-        entering={FadeIn.delay(100)}
-        exiting={FadeOut}
-        style={{ flex: 1, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: '#000000B2' }}
-      />
-    </GestureDetector>
-  );
-}
-
-function Sheet({ children, header, onClose }: PropsWithChildren<{ header: ReactElement; onClose: VoidFunction }>) {
+function Sheet({ children, editing, onClose }: PropsWithChildren<{ editing: SharedValue<boolean>; onClose: VoidFunction }>) {
   const { isDarkMode } = useTheme();
   const surfacePrimary = useBackgroundColor('surfacePrimary');
   const backgroundColor = isDarkMode ? '#191A1C' : surfacePrimary;
   const separatorSecondary = useForegroundColor('separatorSecondary');
 
-  const translationY = useSharedValue<number>(0);
-
-  const swipeToClose = Gesture.Pan()
-    .onChange(event => {
-      if (event.translationY < 0) return;
-      translationY.value = event.translationY;
-    })
-    .onFinalize(() => {
-      if (translationY.value > 120) runOnJS(onClose)();
-      else translationY.value = withSpring(0);
-    });
-
-  const sheetStyle = useAnimatedStyle(() => ({ transform: [{ translateY: translationY.value }] }));
+  // make sure the onClose function is called when the sheet unmounts
+  useEffect(() => {
+    return () => onClose?.();
+  }, [onClose]);
 
   return (
-    <AbsolutePortal>
-      <View style={{ flex: 1 }}>
-        <SheetBackdrop onPress={onClose} />
-
-        <Animated.View
-          layout={LinearTransition.springify().mass(0.5)}
-          entering={SlideInDown.duration(200).springify().mass(0.4)}
-          exiting={SlideOutDown.duration(200)}
-          style={[
-            { position: 'absolute', bottom: 32, left: 8, right: 8 },
-            { paddingHorizontal: 16 },
-            { backgroundColor, borderColor: separatorSecondary },
-            { borderRadius: 42, borderWidth: 1.33 },
-            sheetStyle,
-          ]}
-        >
-          <GestureDetector gesture={swipeToClose}>{header}</GestureDetector>
-          {children}
-        </Animated.View>
-      </View>
-    </AbsolutePortal>
+    <>
+      <Box
+        style={[
+          sx.sheet,
+          {
+            backgroundColor,
+            borderColor: separatorSecondary,
+          },
+        ]}
+      >
+        <Header editing={editing} />
+        {children}
+      </Box>
+      <TapToDismiss />
+    </>
   );
 }
 
-export function NetworkSelector({
-  onClose,
-  selected,
-  setSelected,
-}: {
-  onClose: VoidFunction;
-  selected: SharedValue<ChainId | undefined>;
-  setSelected: (chainId: ChainId | undefined) => void;
-}) {
+export function NetworkSelector() {
+  const {
+    params: { onClose = noop, selected, setSelected },
+  } = useRoute<RouteProp<RootStackParamList, 'NetworkSelector'>>();
+
   const editing = useSharedValue(false);
 
   return (
-    <Sheet header={<Header editing={editing} />} onClose={onClose}>
+    <Sheet editing={editing} onClose={onClose}>
       <CustomizeNetworksBanner editing={editing} />
       <AllNetworksSection editing={editing} setSelected={setSelected} selected={selected} />
       <NetworksGrid editing={editing} setSelected={setSelected} selected={selected} />
     </Sheet>
   );
 }
+
+const sx = StyleSheet.create({
+  sheet: {
+    flex: 1,
+    width: deviceUtils.dimensions.width - 16,
+    bottom: Math.max(safeAreaInsetValues.bottom + 5, IS_IOS ? 8 : 30),
+    pointerEvents: 'box-none',
+    position: 'absolute',
+    zIndex: 30000,
+    left: 8,
+    right: 8,
+    paddingHorizontal: 16,
+    borderRadius: 42,
+    borderWidth: 1.33,
+  },
+});

src/featuresToUnlock/tokenGatedUtils.ts

@@ -79,4 +79,4 @@ export const checkIfWalletsOwnNft1155 = async (
   } catch (e) {
     return false;
   }
-};
+};

src/navigation/Routes.android.tsx

@@ -90,6 +90,7 @@ import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPane
 import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel';
 import { ClaimClaimablePanel } from '@/screens/claimables/ClaimPanel';
 import { RootStackParamList } from './types';
+import { NetworkSelector } from '@/components/NetworkSwitcher';
 
 const Stack = createStackNavigator();
 const OuterStack = createStackNavigator();
@@ -242,6 +243,7 @@ function BSNavigator() {
       <BSStack.Screen component={ConsoleSheet} name={Routes.CONSOLE_SHEET} options={consoleSheetPreset} />
       <BSStack.Screen component={AppIconUnlockSheet} name={Routes.APP_ICON_UNLOCK_SHEET} options={appIconUnlockSheetPreset} />
       <BSStack.Screen component={ControlPanel} name={Routes.DAPP_BROWSER_CONTROL_PANEL} />
+      <BSStack.Screen component={NetworkSelector} name={Routes.NETWORK_SELECTOR} />
       <BSStack.Screen component={ClaimRewardsPanel} name={Routes.CLAIM_REWARDS_PANEL} />
       <BSStack.Screen component={ClaimClaimablePanel} name={Routes.CLAIM_CLAIMABLE_PANEL} />
       <BSStack.Screen component={ChangeWalletSheet} name={Routes.CHANGE_WALLET_SHEET} options={{ ...bottomSheetPreset }} />

src/navigation/Routes.ios.tsx

@@ -70,6 +70,7 @@ import {
   swapConfig,
   checkIdentifierSheetConfig,
   recieveModalSheetConfig,
+  networkSelectorConfig,
 } from './config';
 import { addCashSheet, emojiPreset, emojiPresetWallet, overlayExpandedPreset, sheetPreset } from './effects';
 import { InitialRouteContext } from './initialRoute';
@@ -102,6 +103,7 @@ import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPane
 import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel';
 import { ClaimClaimablePanel } from '@/screens/claimables/ClaimPanel';
 import { RootStackParamList } from './types';
+import { NetworkSelector } from '@/components/NetworkSwitcher';
 
 const Stack = createStackNavigator();
 const NativeStack = createNativeStackNavigator();
@@ -273,6 +275,7 @@ function NativeStackNavigator() {
       <NativeStack.Screen name={Routes.MINTS_SHEET} component={MintsSheet} {...mintsSheetConfig} />
       <NativeStack.Screen component={ConsoleSheet} name={Routes.CONSOLE_SHEET} {...consoleSheetConfig} />
       <NativeStack.Screen component={AppIconUnlockSheet} name={Routes.APP_ICON_UNLOCK_SHEET} {...appIconUnlockSheetConfig} />
+      <NativeStack.Screen component={NetworkSelector} name={Routes.NETWORK_SELECTOR} {...networkSelectorConfig} />
       <NativeStack.Screen component={ControlPanel} name={Routes.DAPP_BROWSER_CONTROL_PANEL} {...panelConfig} />
       <NativeStack.Screen component={ClaimRewardsPanel} name={Routes.CLAIM_REWARDS_PANEL} {...panelConfig} />
       <NativeStack.Screen component={ClaimClaimablePanel} name={Routes.CLAIM_CLAIMABLE_PANEL} {...panelConfig} />

src/navigation/config.tsx

@@ -248,6 +248,20 @@ export const consoleSheetConfig = {
   }),
 };
 
+export const networkSelectorConfig = {
+  options: ({ route: { params = {} } }) => ({
+    ...buildCoolModalConfig({
+      ...params,
+      backgroundColor: '#000000B2',
+      backgroundOpacity: 0.7,
+      cornerRadius: 0,
+      springDamping: 1,
+      topOffset: 0,
+      transitionDuration: 0.3,
+    }),
+  }),
+};
+
 export const panelConfig = {
   options: ({ route: { params = {} } }) => ({
     ...buildCoolModalConfig({

src/navigation/routesNames.ts

@@ -100,6 +100,7 @@ const Routes = {
   SETTINGS_SECTION_NOTIFICATIONS: 'NotificationsSection',
   SETTINGS_SECTION_PRIVACY: 'PrivacySection',
   DAPP_BROWSER_CONTROL_PANEL: 'DappBrowserControlPanel',
+  NETWORK_SELECTOR: 'NetworkSelector',
   CLAIM_REWARDS_PANEL: 'ClaimRewardsPanel',
 } as const;
 

src/navigation/types.ts

@@ -11,6 +11,8 @@ import { WalletconnectApprovalSheetRouteParams, WalletconnectResultType } from '
 import { WalletConnectApprovalSheetType } from '@/helpers/walletConnectApprovalSheetTypes';
 import { RainbowPosition } from '@/resources/defi/types';
 import { Address } from 'viem';
+import { SharedValue } from 'react-native-reanimated';
+import { ChainId } from '@/state/backendNetworks/types';
 
 export type PartialNavigatorConfigOptions = Pick<Partial<Parameters<ReturnType<typeof createStackNavigator>['Screen']>[0]>, 'options'>;
 
@@ -105,4 +107,9 @@ export type RootStackParamList = {
   [Routes.POSITION_SHEET]: {
     position: RainbowPosition;
   };
+  [Routes.NETWORK_SELECTOR]: {
+    onClose?: VoidFunction;
+    selected: SharedValue<ChainId | undefined>;
+    setSelected: (chainId: ChainId | undefined) => void;
+  };
 };

src/state/assets/userAssets.ts

@@ -10,52 +10,7 @@ import { swapsStore } from '@/state/swaps/swapsStore';
 import { ChainId } from '@/state/backendNetworks/types';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { useSelector } from 'react-redux';
-<<<<<<< HEAD
 import { getUniqueId } from '@/utils/ethereumUtils';
-=======
-
-const SEARCH_CACHE_MAX_ENTRIES = 50;
-
-const escapeRegExp = (string: string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-const getSearchQueryKey = ({ filter, searchQuery }: { filter: UserAssetFilter; searchQuery: string }) => `${filter}${searchQuery}`;
-
-const getDefaultCacheKeys = (): Set<string> => {
-  const queryKeysToPreserve = new Set<string>();
-  queryKeysToPreserve.add('all');
-
-  for (const chainId of useBackendNetworksStore.getState().getSupportedChainIds()) {
-    queryKeysToPreserve.add(`${chainId}`);
-  }
-  return queryKeysToPreserve;
-};
-
-const CACHE_ITEMS_TO_PRESERVE = getDefaultCacheKeys();
-
-export interface UserAssetsState {
-  chainBalances: Map<ChainId, number>;
-  currentAbortController: AbortController;
-  filter: UserAssetFilter;
-  idsByChain: Map<UserAssetFilter, UniqueId[]>;
-  inputSearchQuery: string;
-  searchCache: Map<string, UniqueId[]>;
-  userAssets: Map<UniqueId, ParsedSearchAsset>;
-  getBalanceSortedChainList: () => ChainId[];
-  getChainsWithBalance: () => ChainId[];
-  getFilteredUserAssetIds: () => UniqueId[];
-  getHighestValueNativeAsset: () => ParsedSearchAsset | null;
-  getUserAsset: (uniqueId: UniqueId) => ParsedSearchAsset | null;
-  getUserAssets: () => ParsedSearchAsset[];
-  selectUserAssetIds: (selector: (asset: ParsedSearchAsset) => boolean, filter?: UserAssetFilter) => Generator<UniqueId, void, unknown>;
-  selectUserAssets: (selector: (asset: ParsedSearchAsset) => boolean) => Generator<[UniqueId, ParsedSearchAsset], void, unknown>;
-  setSearchCache: (queryKey: string, filteredIds: UniqueId[]) => void;
-  setSearchQuery: (query: string) => void;
-  setUserAssets: (userAssets: Map<UniqueId, ParsedSearchAsset> | ParsedSearchAsset[]) => void;
-
-  hiddenAssets: Set<UniqueId>;
-  getHiddenAssetsIds: () => UniqueId[];
-  setHiddenAssets: (uniqueIds: UniqueId[]) => void;
-}
->>>>>>> e67803ca7 (convert network accessors to functions (#6219))
 
 type UserAssetsStateToPersist = Omit<
   Partial<UserAssetsState>,