[WIP] Swaps token search optimizations

src/__swaps__/screens/Swap/Swap.tsx

@@ -30,6 +30,7 @@ import { clearCustomGasSettings } from './hooks/useCustomGas';
 import { SwapProvider, useSwapContext } from './providers/swap-provider';
 import { useAccountSettings } from '@/hooks';
 import { NavigateToSwapSettingsTrigger } from './components/NavigateToSwapSettingsTrigger';
+import { useSwapsSearchStore } from './resources/search/searchV2';
 
 /** README
  * This prototype is largely driven by Reanimated and Gesture Handler, which
@@ -101,7 +102,11 @@ const MountAndUnmountHandlers = () => {
 
 const useMountSignal = () => {
   useEffect(() => {
-    useSwapsStore.setState({ isSwapsOpen: true });
+    useSwapsStore.setState(state => ({
+      ...state,
+      isSwapsOpen: true,
+      selectedOutputChainId: state?.inputAsset?.chainId ?? state?.preferredNetwork ?? state?.selectedOutputChainId ?? ChainId.mainnet,
+    }));
   }, []);
 };
 
@@ -122,11 +127,11 @@ const useCleanupOnUnmount = () => {
         inputAsset: parsedAsset,
         isSwapsOpen: false,
         outputAsset: null,
-        outputSearchQuery: '',
         quote: null,
         selectedOutputChainId: parsedAsset?.chainId ?? preferredNetwork ?? ChainId.mainnet,
       });
 
+      useSwapsSearchStore.setState({ searchQuery: '' });
       userAssetsStore.setState({ filter: 'all', inputSearchQuery: '' });
 
       clearCustomGasSettings();

src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx

@@ -92,12 +92,5 @@ const sx = StyleSheet.create({
     bottom: 0,
     left: -8,
     position: 'absolute',
-    shadowColor: globalColors.grey100,
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 6,
   },
 });

src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx

@@ -5,7 +5,6 @@ import { ChainId } from '@/state/backendNetworks/types';
 import { useAnimatedProps, useDerivedValue } from 'react-native-reanimated';
 import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFasterImage';
 import { DEFAULT_FASTER_IMAGE_CONFIG } from '@/components/images/ImgixImage';
-import { globalColors } from '@/design-system';
 import { useSwapContext } from '../providers/swap-provider';
 import { BLANK_BASE64_PIXEL } from '@/components/DappBrowser/constants';
 
@@ -105,12 +104,5 @@ const sx = StyleSheet.create({
     bottom: 0,
     left: -8,
     position: 'absolute',
-    shadowColor: globalColors.grey100,
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 6,
   },
 });

src/__swaps__/screens/Swap/components/SearchInput.tsx

@@ -5,7 +5,6 @@ import { Input } from '@/components/inputs';
 import { Bleed, Box, Column, Columns, Text, useColorMode, useForegroundColor } from '@/design-system';
 import * as i18n from '@/languages';
 import { userAssetsStore, useUserAssetsStore } from '@/state/assets/userAssets';
-import { useSwapsStore } from '@/state/swaps/swapsStore';
 import React from 'react';
 import Animated, {
   runOnJS,
@@ -16,6 +15,7 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 import { useDebouncedCallback } from 'use-debounce';
+import { useSwapsSearchStore } from '../resources/search/searchV2';
 import { SearchInputButton } from './SearchInputButton';
 
 const AnimatedInput = Animated.createAnimatedComponent(Input);
@@ -40,11 +40,13 @@ export const SearchInput = ({
   const labelQuaternary = useForegroundColor('labelQuaternary');
 
   const onInputSearchQueryChange = useUserAssetsStore(state => state.setSearchQuery);
+  const onOutputSearchQueryChange = (text: string) => useSwapsSearchStore.setState({ searchQuery: text });
 
-  const onOutputSearchQueryChange = useDebouncedCallback((text: string) => useSwapsStore.setState({ outputSearchQuery: text }), 100, {
-    leading: false,
-    trailing: true,
-  });
+  // ⚠️ TODO: Should probably restore this — disabling to test raw query performance
+  // const onOutputSearchQueryChange = useDebouncedCallback((text: string) => useSwapsSearchStore.setState({ searchQuery: text }), 100, {
+  //   leading: false,
+  //   trailing: true,
+  // });
 
   const isSearchFocused = useDerivedValue(
     () =>
@@ -105,8 +107,8 @@ export const SearchInput = ({
                   onBlur={() => {
                     if (isSearchFocused.value) {
                       if (output) {
-                        if (useSwapsStore.getState().outputSearchQuery !== '') {
-                          useSwapsStore.setState({ outputSearchQuery: '' });
+                        if (useSwapsSearchStore.getState().searchQuery !== '') {
+                          useSwapsSearchStore.setState({ searchQuery: '' });
                         }
                       } else {
                         if (userAssetsStore.getState().inputSearchQuery !== '') {

src/__swaps__/screens/Swap/components/SearchInputButton.tsx

@@ -5,9 +5,9 @@ import Animated, { SharedValue, runOnJS, useAnimatedStyle, useDerivedValue, with
 import { triggerHaptics } from 'react-native-turbo-haptics';
 import { NavigationSteps, useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { useSwapsStore } from '@/state/swaps/swapsStore';
 import * as i18n from '@/languages';
 import { THICK_BORDER_WIDTH } from '../constants';
+import { useSwapsSearchStore } from '../resources/search/searchV2';
 import { useClipboard } from '@/hooks';
 import { TIMING_CONFIGS } from '@/components/animations/animationConfigs';
 import { IS_ANDROID } from '@/env';
@@ -59,7 +59,7 @@ export const SearchInputButton = ({
       // Slice the pasted text to the length of an ETH address
       const v = text.trim().slice(0, 42);
       pastedSearchInputValue.value = v;
-      useSwapsStore.setState({ outputSearchQuery: v });
+      useSwapsSearchStore.setState({ searchQuery: v });
     });
   }, [pastedSearchInputValue]);
 

src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import EthIcon from '@/assets/eth-icon.png';
 import { ChainImage } from '@/components/coin-icon/ChainImage';
-import { globalColors } from '@/design-system';
 import { borders, fonts } from '@/styles';
 import { useTheme } from '@/theme';
 import { FallbackIcon as CoinIconTextFallback, isETH } from '@/utils';
@@ -91,7 +90,14 @@ export const SwapCoinIcon = React.memo(function FeedCoinIcon({
           <FastImage source={EthIcon as Source} style={styles.coinIcon(size)} />
         </Animated.View>
       ) : (
-        <FastFallbackCoinIconImage size={size} icon={iconUrl} shadowColor={shadowColor} symbol={symbol} theme={theme}>
+        <FastFallbackCoinIconImage
+          disableShadow={disableShadow}
+          size={size}
+          icon={iconUrl}
+          shadowColor={shadowColor}
+          symbol={symbol}
+          theme={theme}
+        >
           {() => (
             <CoinIconTextFallback
               color={color}
@@ -133,13 +139,6 @@ const sx = StyleSheet.create({
     bottom: -0,
     left: -8,
     position: 'absolute',
-    shadowColor: globalColors.grey100,
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowRadius: 6,
-    shadowOpacity: 0.2,
   },
   reactCoinIconContainer: {
     alignItems: 'center',

src/__swaps__/screens/Swap/components/TokenList/TokenToBuyList.tsx

@@ -1,5 +1,5 @@
-import { FlatList } from 'react-native';
 import { COIN_ROW_WITH_PADDING_HEIGHT, CoinRow } from '@/__swaps__/screens/Swap/components/CoinRow';
+import { FlatList } from 'react-native';
 import { ListEmpty } from '@/__swaps__/screens/Swap/components/TokenList/ListEmpty';
 import { AssetToBuySectionId, useSearchCurrencyLists } from '@/__swaps__/screens/Swap/hooks/useSearchCurrencyLists';
 import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
@@ -16,12 +16,12 @@ import { Box, Inline, Stack, Text, TextIcon, useColorMode } from '@/design-syste
 import { palettes } from '@/design-system/color/palettes';
 import * as i18n from '@/languages';
 import { userAssetsStore } from '@/state/assets/userAssets';
-import { swapsStore } from '@/state/swaps/swapsStore';
 import { DEVICE_WIDTH } from '@/utils/deviceUtils';
 import React, { memo, useCallback, useMemo } from 'react';
 import Animated, { runOnUI, useAnimatedProps, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { EXPANDED_INPUT_HEIGHT, FOCUSED_INPUT_HEIGHT } from '../../constants';
 import { ChainSelection } from './ChainSelection';
+import { useSwapsSearchStore } from '../../resources/search/searchV2';
 
 export const BUY_LIST_HEADER_HEIGHT = 20 + 10 + 8; // paddingTop + height + paddingBottom
 
@@ -118,12 +118,12 @@ export const TokenToBuyList = () => {
         asset: parsedAsset,
       });
 
-      const { outputSearchQuery } = swapsStore.getState();
+      const { searchQuery } = useSwapsSearchStore.getState();
 
       // track what search query the user had prior to selecting an asset
-      if (outputSearchQuery.trim().length) {
+      if (searchQuery.trim().length) {
         analyticsV2.track(analyticsV2.event.swapsSearchedForToken, {
-          query: outputSearchQuery,
+          query: searchQuery,
           type: 'output',
         });
       }
@@ -167,7 +167,6 @@ export const TokenToBuyList = () => {
           }
           return (
             <CoinRow
-              testID={getFormattedTestId(item.name, item.chainId)}
               address={item.address}
               chainId={item.chainId}
               colors={item.colors}
@@ -179,6 +178,7 @@ export const TokenToBuyList = () => {
               onPress={() => handleSelectToken(item)}
               output
               symbol={item.symbol}
+              testID={getFormattedTestId(item.name, item.chainId)}
               uniqueId={item.uniqueId}
             />
           );

src/__swaps__/screens/Swap/components/TokenList/TokenToSellList.tsx

@@ -1,5 +1,5 @@
-import { FlatList } from 'react-native';
 import { COIN_ROW_WITH_PADDING_HEIGHT, CoinRow } from '@/__swaps__/screens/Swap/components/CoinRow';
+import { FlatList } from 'react-native';
 import { ListEmpty } from '@/__swaps__/screens/Swap/components/TokenList/ListEmpty';
 import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
 import { ParsedSearchAsset } from '@/__swaps__/types/assets';