Swaps: logic, data flow, and performance fixes

src/__swaps__/screens/Swap/Swap.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, StatusBar } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import { ScreenCornerRadius } from 'react-native-screen-corner-radius';
 
 import { IS_ANDROID } from '@/env';
@@ -19,8 +19,13 @@ import { SwapNavbar } from '@/__swaps__/screens/Swap/components/SwapNavbar';
 import { SliderAndKeyboard } from '@/__swaps__/screens/Swap/components/SliderAndKeyboard';
 import { SwapBottomPanel } from '@/__swaps__/screens/Swap/components/SwapBottomPanel';
 import { SwapWarning } from './components/SwapWarning';
-import { useSwapContext } from './providers/swap-provider';
-import { UserAssetsSync } from './components/UserAssetsSync';
+import { SwapProvider, useSwapContext } from './providers/swap-provider';
+import { useSwapsStore } from '@/state/swaps/swapsStore';
+import { userAssetsStore } from '@/state/assets/userAssets';
+import { parseSearchAsset } from '@/__swaps__/utils/assets';
+import { SwapAssetType } from '@/__swaps__/types/swap';
+import { ChainId } from '@/__swaps__/types/chains';
+import { useDelayedMount } from '@/hooks/useDelayedMount';
 
 /** README
  * This prototype is largely driven by Reanimated and Gesture Handler, which
@@ -60,38 +65,126 @@ import { UserAssetsSync } from './components/UserAssetsSync';
  */
 
 export function SwapScreen() {
-  const { AnimatedSwapStyles } = useSwapContext();
   return (
-    <SwapSheetGestureBlocker>
-      <Box as={Page} style={styles.rootViewBackground} testID="swap-screen" width="full">
-        <SwapBackground />
-        <Box alignItems="center" height="full" paddingTop={{ custom: safeAreaInsetValues.top + (navbarHeight - 12) + 29 }} width="full">
-          <SwapInputAsset />
-          <FlipButton />
-          <SwapOutputAsset />
-          <Box as={Animated.View} width="full" position="absolute" bottom="0px" style={AnimatedSwapStyles.hideWhenInputsExpanded}>
-            <SliderAndKeyboard />
-            <SwapBottomPanel />
-          </Box>
-          <Box
-            as={Animated.View}
-            alignItems="center"
-            justifyContent="center"
-            style={[styles.swapWarningAndExchangeWrapper, AnimatedSwapStyles.hideWhileReviewingOrConfiguringGas]}
-          >
-            <ExchangeRateBubble />
-            <SwapWarning />
+    <SwapProvider>
+      <MountAndUnmountHandlers />
+      <SwapSheetGestureBlocker>
+        <Box as={Page} style={styles.rootViewBackground} testID="swap-screen" width="full">
+          <SwapBackground />
+          <Box alignItems="center" height="full" paddingTop={{ custom: safeAreaInsetValues.top + (navbarHeight - 12) + 29 }} width="full">
+            <SwapInputAsset />
+            <FlipButton />
+            <SwapOutputAsset />
+            <SliderAndKeyboardAndBottomControls />
+            <ExchangeRateBubbleAndWarning />
           </Box>
+          <SwapNavbar />
         </Box>
-        <SwapNavbar />
-
-        {/* NOTE: The components below render null and are solely for keeping react-query and Zustand in sync */}
-        <UserAssetsSync />
-      </Box>
-    </SwapSheetGestureBlocker>
+      </SwapSheetGestureBlocker>
+      <WalletAddressObserver />
+    </SwapProvider>
   );
 }
 
+const MountAndUnmountHandlers = () => {
+  useMountSignal();
+  useCleanupOnUnmount();
+
+  return null;
+};
+
+const useMountSignal = () => {
+  useEffect(() => {
+    useSwapsStore.setState({ isSwapsOpen: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+const useCleanupOnUnmount = () => {
+  useEffect(() => {
+    return () => {
+      const highestValueAsset = userAssetsStore.getState().getHighestValueAsset();
+      const parsedAsset = highestValueAsset
+        ? parseSearchAsset({
+            assetWithPrice: undefined,
+            searchAsset: highestValueAsset,
+            userAsset: highestValueAsset,
+          })
+        : null;
+
+      useSwapsStore.setState({
+        inputAsset: parsedAsset,
+        isSwapsOpen: false,
+        outputAsset: null,
+        outputSearchQuery: '',
+        quote: null,
+        selectedOutputChainId: parsedAsset?.chainId ?? ChainId.mainnet,
+      });
+
+      userAssetsStore.setState({ filter: 'all', inputSearchQuery: '' });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+const WalletAddressObserver = () => {
+  const currentWalletAddress = userAssetsStore(state => state.associatedWalletAddress);
+  const { setAsset } = useSwapContext();
+
+  const setNewInputAsset = useCallback(() => {
+    const newHighestValueAsset = userAssetsStore.getState().getHighestValueAsset();
+
+    if (userAssetsStore.getState().filter !== 'all') {
+      userAssetsStore.setState({ filter: 'all' });
+    }
+
+    setAsset({
+      type: SwapAssetType.inputAsset,
+      asset: newHighestValueAsset,
+    });
+  }, [setAsset]);
+
+  useAnimatedReaction(
+    () => currentWalletAddress,
+    (current, previous) => {
+      const didWalletAddressChange = previous && current !== previous;
+
+      if (didWalletAddressChange) {
+        runOnJS(setNewInputAsset)();
+      }
+    }
+  );
+
+  return null;
+};
+
+const SliderAndKeyboardAndBottomControls = () => {
+  const shouldMount = useDelayedMount();
+  const { AnimatedSwapStyles } = useSwapContext();
+
+  return shouldMount ? (
+    <Box as={Animated.View} width="full" position="absolute" bottom="0px" style={AnimatedSwapStyles.hideWhenInputsExpanded}>
+      <SliderAndKeyboard />
+      <SwapBottomPanel />
+    </Box>
+  ) : null;
+};
+
+const ExchangeRateBubbleAndWarning = () => {
+  const { AnimatedSwapStyles } = useSwapContext();
+  return (
+    <Box
+      as={Animated.View}
+      alignItems="center"
+      justifyContent="center"
+      style={[styles.swapWarningAndExchangeWrapper, AnimatedSwapStyles.hideWhileReviewingOrConfiguringGas]}
+    >
+      <ExchangeRateBubble />
+      <SwapWarning />
+    </Box>
+  );
+};
+
 export const styles = StyleSheet.create({
   rootViewBackground: {
     borderRadius: IS_ANDROID ? 20 : ScreenCornerRadius,

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

@@ -101,9 +101,10 @@ export function AnimatedChainImage({
   });
 
   return (
-    <View style={[sx.badge, { bottom: 0, borderRadius: size / 2, width: size, height: size }]}>
-      {/* @ts-expect-error source prop is missing */}
-      <AnimatedFasterImage style={{ borderRadius: size / 2, width: size, height: size }} animatedProps={animatedIconSource} />
+    <View style={[sx.badge, { borderRadius: size / 2, height: size, width: size }]}>
+      {/* ⚠️ TODO: This works but we should figure out how to type this correctly to avoid this error */}
+      {/* @ts-expect-error: Doesn't pick up that it's getting a source prop via animatedProps */}
+      <AnimatedFasterImage style={{ height: size, width: size }} animatedProps={animatedIconSource} />
     </View>
   );
 }
@@ -118,7 +119,7 @@ const sx = StyleSheet.create({
       height: 4,
       width: 0,
     },
-    shadowRadius: 6,
     shadowOpacity: 0.2,
+    shadowRadius: 6,
   },
 });

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

@@ -10,6 +10,7 @@ import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFas
 import { AnimatedChainImage } from './AnimatedChainImage';
 import { fadeConfig } from '../constants';
 import { SwapCoinIconTextFallback } from './SwapCoinIconTextFallback';
+import { Box } from '@/design-system';
 
 const fallbackIconStyle = {
   ...borders.buildCircleAsObject(32),
@@ -26,9 +27,9 @@ const smallFallbackIconStyle = {
   position: 'absolute' as ViewStyle['position'],
 };
 
-export const AmimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
+export const AnimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
   asset,
-  large,
+  large = true,
   small,
   showBadge = true,
 }: {
@@ -39,13 +40,13 @@ export const AmimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
 }) {
   const { isDarkMode, colors } = useTheme();
 
-  const imageLoadingError = useSharedValue(false);
+  const didErrorForUniqueId = useSharedValue<string | undefined>(undefined);
 
   const animatedIconSource = useAnimatedProps(() => {
     return {
       source: {
         ...DEFAULT_FASTER_IMAGE_CONFIG,
-        borderRadius: (small ? 16 : large ? 36 : 32) / 2,
+        transitionDuration: 0,
         url: asset.value?.icon_url ?? '',
       },
     };
@@ -58,17 +59,29 @@ export const AmimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
   });
 
   const animatedCoinIconStyles = useAnimatedStyle(() => {
-    const showFallback = imageLoadingError.value || !asset.value?.icon_url;
+    const showEmptyState = !asset.value?.uniqueId;
+    const showFallback = didErrorForUniqueId.value === asset.value?.uniqueId;
+    const shouldDisplay = !showFallback && !showEmptyState;
 
     return {
-      display: showFallback ? 'none' : 'flex',
-      pointerEvents: showFallback ? 'none' : 'auto',
-      opacity: withTiming(showFallback ? 0 : 1, fadeConfig),
+      display: shouldDisplay ? 'flex' : 'none',
+      pointerEvents: shouldDisplay ? 'auto' : 'none',
+      opacity: withTiming(shouldDisplay ? 1 : 0, fadeConfig),
+    };
+  });
+
+  const animatedEmptyStateStyles = useAnimatedStyle(() => {
+    const showEmptyState = !asset.value?.uniqueId;
+
+    return {
+      display: showEmptyState ? 'flex' : 'none',
+      opacity: withTiming(showEmptyState ? 1 : 0, fadeConfig),
     };
   });
 
   const animatedFallbackStyles = useAnimatedStyle(() => {
-    const showFallback = imageLoadingError.value || !asset.value?.icon_url;
+    const showEmptyState = !asset.value?.uniqueId;
+    const showFallback = !showEmptyState && didErrorForUniqueId.value === asset.value?.uniqueId;
 
     return {
       display: showFallback ? 'flex' : 'none',
@@ -88,23 +101,22 @@ export const AmimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
         ]}
       >
         <Animated.View style={animatedCoinIconStyles}>
-          {/* @ts-expect-error missing props "source" */}
+          {/* ⚠️ TODO: This works but we should figure out how to type this correctly to avoid this error */}
+          {/* @ts-expect-error: Doesn't pick up that it's getting a source prop via animatedProps */}
           <AnimatedFasterImage
             animatedProps={animatedIconSource}
             onError={() => {
-              'worklet';
-              imageLoadingError.value = true;
+              didErrorForUniqueId.value = asset.value?.uniqueId;
             }}
             onSuccess={() => {
-              'worklet';
-              imageLoadingError.value = false;
+              didErrorForUniqueId.value = undefined;
             }}
             style={[
               sx.coinIcon,
               {
+                borderRadius: (small ? 16 : large ? 36 : 32) / 2,
                 height: small ? 16 : large ? 36 : 32,
                 width: small ? 16 : large ? 36 : 32,
-                borderRadius: (small ? 16 : large ? 36 : 32) / 2,
               },
             ]}
           />
@@ -120,6 +132,20 @@ export const AmimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
             style={small ? smallFallbackIconStyle : large ? largeFallbackIconStyle : fallbackIconStyle}
           />
         </Animated.View>
+
+        <Box
+          as={Animated.View}
+          background="fillQuaternary"
+          style={[
+            animatedEmptyStateStyles,
+            small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
+            {
+              borderRadius: (small ? 16 : large ? 36 : 32) / 2,
+              height: small ? 16 : large ? 36 : 32,
+              width: small ? 16 : large ? 36 : 32,
+            },
+          ]}
+        />
       </Animated.View>
 
       {showBadge && <AnimatedChainImage asset={asset} size={16} />}
@@ -164,6 +190,9 @@ const sx = StyleSheet.create({
     height: 16,
     overflow: 'visible',
   },
+  emptyState: {
+    pointerEvents: 'none',
+  },
   reactCoinIconContainer: {
     position: 'relative',
     alignItems: 'center',

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

@@ -1,12 +1,11 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-
 import { AnimatedText, Box, Inline, globalColors, useColorMode, useForegroundColor } from '@/design-system';
 import Animated, { SharedValue, useAnimatedStyle, useDerivedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { fadeConfig, springConfig } from '../constants';
 import { opacityWorklet } from '@/__swaps__/utils/swaps';
 import { GestureHandlerButtonProps, GestureHandlerV1Button } from './GestureHandlerV1Button';
 import { StyleSheet } from 'react-native';
+import { SPRING_CONFIGS, TIMING_CONFIGS } from '@/components/animations/animationConfigs';
 
 type AnimatedSwitchProps = {
   onToggle: () => void;
@@ -25,8 +24,8 @@ export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, ..
   const containerStyles = useAnimatedStyle(() => {
     return {
       backgroundColor: !value.value
-        ? withTiming(opacityWorklet(inactiveBg, 0.12), fadeConfig)
-        : withTiming(opacityWorklet(activeBg, 0.64), fadeConfig),
+        ? withTiming(opacityWorklet(inactiveBg, 0.12), TIMING_CONFIGS.fadeConfig)
+        : withTiming(opacityWorklet(activeBg, 0.64), TIMING_CONFIGS.fadeConfig),
       borderColor: opacityWorklet(border, 0.06),
     };
   });
@@ -35,7 +34,7 @@ export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, ..
     return {
       transform: [
         {
-          translateX: withSpring(value.value ? 11 : 1, springConfig),
+          translateX: withSpring(value.value ? 11 : 1, SPRING_CONFIGS.springConfig),
         },
       ],
     };
@@ -57,7 +56,9 @@ export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, ..
     return (
       <GestureHandlerV1Button onPressWorklet={onToggle} {...props}>
         <Inline alignVertical="center" horizontalSpace="6px">
-          <AnimatedText align="right" color={isDarkMode ? 'labelSecondary' : 'label'} size="15pt" weight="heavy" text={labelItem} />
+          <AnimatedText align="right" color={isDarkMode ? 'labelSecondary' : 'label'} size="15pt" weight="heavy">
+            {labelItem}
+          </AnimatedText>
           <Box as={Animated.View} style={[styles.containerStyles, containerStyles]}>
             <Box style={[styles.circleStyles, circleStyles]} as={Animated.View} />
           </Box>