[SWAPS V2]: Add token search logic and ability to select assets

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

@@ -1,34 +1,53 @@
 import React, { useMemo } from 'react';
-import { Address } from 'viem';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Box, HitSlop, Inline, Stack, Text } from '@/design-system';
 import { TextColor } from '@/design-system/color/palettes';
-import { Network } from '@/networks/types';
 import { useTheme } from '@/theme';
 import { SwapCoinIcon } from './SwapCoinIcon';
 import { CoinRowButton } from './CoinRowButton';
 import { BalancePill } from './BalancePill';
+import { ChainId } from '../types/chains';
+import { ethereumUtils } from '@/utils';
+import { toggleFavorite, useFavorites } from '@/resources/favorites';
+import { ETH_ADDRESS } from '@/references';
 
 export const CoinRow = ({
   address,
+  mainnetAddress,
+  chainId,
   balance,
   isTrending,
   name,
   nativeBalance,
+  color,
+  iconUrl,
   onPress,
   output,
   symbol,
 }: {
-  address: Address | 'eth';
+  address: string;
+  mainnetAddress: string;
+  chainId: ChainId;
   balance: string;
   isTrending?: boolean;
   name: string;
   nativeBalance: string;
+  color: string | undefined;
+  iconUrl: string | undefined;
   onPress?: () => void;
   output?: boolean;
   symbol: string;
 }) => {
   const theme = useTheme();
+  const { favoritesMetadata } = useFavorites();
+
+  const favorites = Object.values(favoritesMetadata);
+
+  const isFavorite = (address: string) => {
+    return favorites.find(fav =>
+      fav.address === ETH_ADDRESS ? '0x0000000000000000000000000000000000000000' === address : fav.address === address
+    );
+  };
 
   const percentChange = useMemo(() => {
     if (isTrending) {
@@ -43,18 +62,27 @@ export const CoinRow = ({
   }, [isTrending]);
 
   return (
-    <ButtonPressAnimation onPress={onPress} scaleTo={0.95}>
+    <ButtonPressAnimation disallowInterruption onPress={onPress} scaleTo={0.95}>
       <HitSlop vertical="10px">
         <Box alignItems="center" flexDirection="row" justifyContent="space-between" width="full">
           <Inline alignVertical="center" space="10px">
-            <SwapCoinIcon address={address} large network={Network.mainnet} symbol={symbol} theme={theme} />
+            <SwapCoinIcon
+              iconUrl={iconUrl}
+              address={address}
+              mainnetAddress={mainnetAddress}
+              large
+              network={ethereumUtils.getNetworkFromChainId(chainId)}
+              symbol={symbol}
+              theme={theme}
+              color={color}
+            />
             <Stack space="10px">
               <Text color="label" size="17pt" weight="semibold">
                 {name}
               </Text>
               <Inline alignVertical="center" space={{ custom: 5 }}>
                 <Text color="labelTertiary" size="13pt" weight="semibold">
-                  {output ? symbol : `${balance} ${symbol}`}
+                  {output ? symbol : `${balance}`}
                 </Text>
                 {isTrending && percentChange && (
                   <Inline alignVertical="center" space={{ custom: 1 }}>
@@ -72,7 +100,12 @@ export const CoinRow = ({
           {output ? (
             <Inline space="8px">
               <CoinRowButton icon="􀅳" outline size="icon 14px" />
-              <CoinRowButton icon="􀋃" weight="black" />
+              <CoinRowButton
+                color={isFavorite(address) ? '#FFCB0F' : undefined}
+                onPress={() => toggleFavorite(address)}
+                icon="􀋃"
+                weight="black"
+              />
             </Inline>
           ) : (
             <BalancePill balance={nativeBalance} />

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

@@ -8,12 +8,14 @@ import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '../c
 import { opacity } from '../utils/swaps';
 
 export const CoinRowButton = ({
+  color,
   icon,
   onPress,
   outline,
   size,
   weight,
 }: {
+  color?: string;
   icon: string;
   onPress?: () => void;
   outline?: boolean;
@@ -26,23 +28,29 @@ export const CoinRowButton = ({
   const separatorTertiary = useForegroundColor('separatorTertiary');
 
   return (
-    <ButtonPressAnimation onPress={onPress} scaleTo={0.8}>
+    <ButtonPressAnimation disallowInterruption onPress={onPress} scaleTo={0.8}>
       <Box
         alignItems="center"
         borderRadius={14}
         height={{ custom: 28 }}
         justifyContent="center"
         style={{
-          backgroundColor: outline ? 'transparent' : isDarkMode ? fillQuaternary : opacity(fillTertiary, 0.04),
-          borderColor: outline ? (isDarkMode ? SEPARATOR_COLOR : LIGHT_SEPARATOR_COLOR) : separatorTertiary,
+          backgroundColor: outline
+            ? 'transparent'
+            : color
+              ? opacity(color, 0.25)
+              : isDarkMode
+                ? fillQuaternary
+                : opacity(fillTertiary, 0.04),
+          borderColor: outline ? (isDarkMode ? SEPARATOR_COLOR : LIGHT_SEPARATOR_COLOR) : color ? opacity(color, 0.1) : separatorTertiary,
           borderWidth: THICK_BORDER_WIDTH,
         }}
         width={{ custom: 28 }}
       >
         <TextIcon
-          color="labelQuaternary"
+          color={color ? { custom: color } : 'labelQuaternary'}
           containerSize={28}
-          opacity={isDarkMode ? 0.6 : 0.75}
+          opacity={isDarkMode ? 1 : 0.75}
           size={size || 'icon 12px'}
           weight={weight || 'heavy'}
         >

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

@@ -5,13 +5,19 @@ import { opacity } from '../utils/swaps';
 import { ButtonPressAnimation } from '@/components/animations';
 import Animated from 'react-native-reanimated';
 import { useSwapContext } from '../providers/swap-provider';
+import { useSwapAssetStore } from '../state/assets';
 
 export const ExchangeRateBubble = () => {
   const { isDarkMode } = useColorMode();
   const { AnimatedSwapStyles } = useSwapContext();
+  const { assetToBuy, assetToSell } = useSwapAssetStore();
 
   const fillTertiary = useForegroundColor('fillTertiary');
 
+  // TODO: Do proper exchange rate calculation once we receive the quote
+
+  if (!assetToSell || !assetToBuy) return null;
+
   return (
     <ButtonPressAnimation scaleTo={0.925} style={{ marginTop: 4 }}>
       <Box
@@ -32,7 +38,7 @@ export const ExchangeRateBubble = () => {
         >
           <Inline alignHorizontal="center" alignVertical="center" space="6px" wrap={false}>
             <Text align="center" color="labelQuaternary" size="13pt" style={{ opacity: isDarkMode ? 0.6 : 0.75 }} weight="heavy">
-              1 ETH
+              1 {assetToSell?.symbol}
             </Text>
             <Box
               borderRadius={10}
@@ -46,7 +52,7 @@ export const ExchangeRateBubble = () => {
               </TextIcon>
             </Box>
             <Text align="center" color="labelQuaternary" size="13pt" style={{ opacity: isDarkMode ? 0.6 : 0.75 }} weight="heavy">
-              1,624.04 USDC
+              1,624.04 {assetToBuy?.symbol}
             </Text>
           </Inline>
         </Box>

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

@@ -1,29 +1,56 @@
 /* eslint-disable no-nested-ternary */
 import c from 'chroma-js';
-import React from 'react';
+import React, { useCallback } from 'react';
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import SwapSpinner from '@/__swaps__/assets/swapSpinner.png';
 import { ButtonPressAnimation } from '@/components/animations';
 import { AnimatedSpinner, spinnerExitConfig } from '@/__swaps__/components/animations/AnimatedSpinner';
 import { Bleed, Box, IconContainer, Text, globalColors, useColorMode } from '@/design-system';
 import { colors } from '@/styles';
-import { SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '../constants';
+import { ETH_COLOR, ETH_COLOR_DARK, SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '../constants';
 import { opacity } from '../utils/swaps';
 import { IS_ANDROID, IS_IOS } from '@/env';
 import { AnimatedBlurView } from './AnimatedBlurView';
 import { useSwapContext } from '../providers/swap-provider';
 import { StyleSheet } from 'react-native';
+import { useSwapAssetStore } from '../state/assets';
 
 export const FlipButton = () => {
   const { isDarkMode } = useColorMode();
-  const { bottomColor, isFetching, AnimatedSwapStyles } = useSwapContext();
+
+  const { isFetching, AnimatedSwapStyles } = useSwapContext();
+  const { assetToBuy, assetToSell, setAssetToBuy, setAssetToSell } = useSwapAssetStore();
+
+  const bottomColor = (assetToBuy?.colors?.primary || assetToBuy?.colors?.fallback) ?? (isDarkMode ? ETH_COLOR_DARK : ETH_COLOR);
 
   const fetchingStyle = useAnimatedStyle(() => {
     return {
       borderWidth: isFetching ? withTiming(2, { duration: 300 }) : withTiming(THICK_BORDER_WIDTH, spinnerExitConfig),
     };
   });
 
+  const handleSwapAssets = useCallback(() => {
+    const prevAssetToSell = assetToSell;
+    const prevAssetToBuy = assetToBuy;
+
+    if (prevAssetToBuy) {
+      setAssetToSell(prevAssetToBuy);
+    }
+
+    if (prevAssetToSell) {
+      setAssetToBuy(prevAssetToSell);
+    }
+
+    // TODO: Fetch current prices of each asset and update the input and output values on the native thread
+    // runOnUI(() => {
+    //   SwapInputController.inputValues.modify(prev => ({
+    //     ...prev,
+    //     // inputNativeValue: prevAssetToBuy.native.price.amount,
+    //     outputNativeValue: prevAssetToSell.native.price.amount,
+    //   }));
+    // })();
+  }, [assetToBuy, assetToSell, setAssetToBuy, setAssetToSell]);
+
   return (
     <Box
       alignItems="center"
@@ -43,9 +70,7 @@ export const FlipButton = () => {
           shadowRadius: isDarkMode ? 6 : 8,
         }}
       >
-        <ButtonPressAnimation scaleTo={0.8} style={{ paddingHorizontal: 20, paddingVertical: 8 }}>
-          {/* TODO: Temp fix - rewrite to actually avoid type errors */}
-          {/* @ts-expect-error The conditional as={} is causing type errors */}
+        <ButtonPressAnimation onPress={handleSwapAssets} scaleTo={0.8} style={{ paddingHorizontal: 20, paddingVertical: 8 }}>
           <Box
             alignItems="center"
             as={IS_IOS ? AnimatedBlurView : Animated.View}

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

@@ -5,6 +5,8 @@ import { Input } from '@/components/inputs';
 import { Bleed, Box, Column, Columns, Text, useColorMode, useForegroundColor } from '@/design-system';
 import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '../constants';
 import { opacity } from '../utils/swaps';
+import { useSwapAssetStore } from '../state/assets';
+import { useAssetColors } from '../hooks/useAssetColors';
 
 export const SearchInput = ({
   color,
@@ -22,9 +24,10 @@ export const SearchInput = ({
   setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   const { isDarkMode } = useColorMode();
+  const { topColor, bottomColor } = useAssetColors();
+  const { searchFilter, setSearchFilter } = useSwapAssetStore();
 
   const inputRef = React.useRef<TextInput>(null);
-  const [query, setQuery] = React.useState('');
 
   const fillTertiary = useForegroundColor('fillTertiary');
   const label = useForegroundColor('label');
@@ -58,9 +61,10 @@ export const SearchInput = ({
                 <Input
                   onBlur={() => {
                     handleExitSearch();
+                    setSearchFilter('');
                     setIsFocused(false);
                   }}
-                  onChange={(value: string) => setQuery(value)}
+                  onChangeText={setSearchFilter}
                   onFocus={() => {
                     handleFocusSearch();
                     setIsFocused(true);
@@ -77,7 +81,7 @@ export const SearchInput = ({
                     height: 44,
                     zIndex: 10,
                   }}
-                  value={query}
+                  value={searchFilter}
                 />
               </Columns>
             </Box>
@@ -102,12 +106,12 @@ export const SearchInput = ({
               justifyContent="center"
               paddingHorizontal={{ custom: 12 - THICK_BORDER_WIDTH }}
               style={{
-                backgroundColor: opacity(color, isDarkMode ? 0.1 : 0.08),
-                borderColor: opacity(color, isDarkMode ? 0.06 : 0.01),
+                backgroundColor: opacity(output ? bottomColor : topColor, isDarkMode ? 0.1 : 0.08),
+                borderColor: opacity(output ? bottomColor : topColor, isDarkMode ? 0.06 : 0.01),
                 borderWidth: THICK_BORDER_WIDTH,
               }}
             >
-              <Text align="center" color={{ custom: color }} size="17pt" weight="heavy">
+              <Text align="center" color={{ custom: output ? bottomColor : topColor }} size="17pt" weight="heavy">
                 {isFocused ? 'Cancel' : 'Close'}
               </Text>
             </Box>

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

@@ -119,28 +119,30 @@ export const SwapActionButton = ({
               )}
             </Column>
           )}
-          <Column width="content">
-            {typeof label === 'string' ? (
-              <Text
-                align="center"
-                color={{ custom: outline ? color || fallbackColor : textColor }}
-                numberOfLines={1}
-                size={small ? '17pt' : '20pt'}
-                weight="heavy"
-              >
-                {label}
-              </Text>
-            ) : (
-              <AnimatedText
-                align="center"
-                color={{ custom: outline ? color || fallbackColor : textColor }}
-                numberOfLines={1}
-                size={small ? '17pt' : '20pt'}
-                text={label}
-                weight="heavy"
-              />
-            )}
-          </Column>
+          {typeof label !== 'undefined' && (
+            <Column width="content">
+              {typeof label === 'string' ? (
+                <Text
+                  align="center"
+                  color={{ custom: outline ? color || fallbackColor : textColor }}
+                  numberOfLines={1}
+                  size={small ? '17pt' : '20pt'}
+                  weight="heavy"
+                >
+                  {label}
+                </Text>
+              ) : (
+                <AnimatedText
+                  align="center"
+                  color={{ custom: outline ? color || fallbackColor : textColor }}
+                  numberOfLines={1}
+                  size={small ? '17pt' : '20pt'}
+                  text={label}
+                  weight="heavy"
+                />
+              )}
+            </Column>
+          )}
           {rightIcon && (
             <Column width="content">
               <Text

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

@@ -8,12 +8,12 @@ import { IS_ANDROID } from '@/env';
 import { ScreenCornerRadius } from 'react-native-screen-corner-radius';
 import { navbarHeight } from '@/components/navbar/Navbar';
 import { safeAreaInsetValues } from '@/utils';
-import { useSwapContext } from '../providers/swap-provider';
+import { useAssetColors } from '../hooks/useAssetColors';
 
 export const SwapBackground = ({ children }: { children: ReactNode }) => {
-  const { bottomColor, topColor } = useSwapContext();
   const { height: deviceHeight, width: deviceWidth } = useDimensions();
   const { isDarkMode } = useColorMode();
+  const { topColor, bottomColor } = useAssetColors();
 
   const fallbackColor = isDarkMode ? ETH_COLOR_DARK : ETH_COLOR;