address more swaps nuances

rainbow-me · Dec 17, 2024 · 7903783 · 7903783
1 parent df53969
commit 7903783
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 33 deletions.
diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx
@@ -5,31 +5,29 @@ import { Image, StyleSheet, View } from 'react-native';
 import { ChainId } from '@/state/backendNetworks/types';
 import { globalColors } from '@/design-system';
 import { PIXEL_RATIO } from '@/utils/deviceUtils';
-import { useSwapsStore } from '@/state/swaps/swapsStore';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { DerivedValue } from 'react-native-reanimated';
 
 export function AnimatedChainImage({
-  assetType,
+  chainId,
   showMainnetBadge = false,
   size = 20,
 }: {
-  assetType: 'input' | 'output';
+  chainId: DerivedValue<ChainId | undefined>;
   showMainnetBadge?: boolean;
   size?: number;
 }) {
-  const chainIdState = useSwapsStore(state => state[assetType === 'input' ? 'inputAsset' : 'outputAsset']?.chainId);
-
   const iconSource = useMemo(() => {
     let source = { uri: '' };
-
-    if (chainIdState !== undefined && !(!showMainnetBadge && chainIdState === ChainId.mainnet)) {
-      source = { uri: useBackendNetworksStore.getState().getChainsBadge()[chainIdState] };
+    const value = typeof chainId === 'number' ? chainId : chainId?.value;
+    if (value !== undefined && !(!showMainnetBadge && value === ChainId.mainnet)) {
+      source = { uri: useBackendNetworksStore.getState().getChainsBadge()[value] };
     } else {
       source = { uri: '' };
     }
 
     return source;
-  }, [chainIdState, showMainnetBadge]);
+  }, [chainId, showMainnetBadge]);
 
   return (
     <View style={[sx.badge, { borderRadius: size / 2, height: size, width: size, bottom: -size / 2 + 2, left: -size / 2 + 2 }]}>

diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx
@@ -2,34 +2,30 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { ChainId } from '@/state/backendNetworks/types';
-import { useAnimatedProps, useDerivedValue } from 'react-native-reanimated';
+import { DerivedValue, 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';
 import { getChainsBadgeWorklet, useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 
 export function AnimatedChainImage({
-  assetType,
+  chainId,
   showMainnetBadge = false,
   size = 20,
 }: {
-  assetType: 'input' | 'output';
+  chainId: DerivedValue<ChainId | undefined>;
   showMainnetBadge?: boolean;
   size?: number;
 }) {
   const backendNetworks = useBackendNetworksStore(state => state.backendNetworksSharedValue);
-  const { internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
 
   const url = useDerivedValue(() => {
-    const asset = assetType === 'input' ? internalSelectedInputAsset : internalSelectedOutputAsset;
-    const chainId = asset?.value?.chainId;
+    const value = typeof chainId === 'number' ? chainId : chainId?.value;
 
     let url = 'eth';
-
-    if (chainId !== undefined && !(!showMainnetBadge && chainId === ChainId.mainnet)) {
-      url = getChainsBadgeWorklet(backendNetworks)[chainId];
+    if (value !== undefined && !(!showMainnetBadge && value === ChainId.mainnet)) {
+      url = getChainsBadgeWorklet(backendNetworks)[value];
     }
     return url;
   });

diff --git a/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx
@@ -3,7 +3,14 @@ import React, { memo } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import { borders } from '@/styles';
 import { useTheme } from '@/theme';
-import Animated, { useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, {
+  SharedValue,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { DEFAULT_FASTER_IMAGE_CONFIG } from '@/components/images/ImgixImage';
 import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFasterImage';
 import { AnimatedChainImage } from './AnimatedChainImage';
@@ -12,28 +19,26 @@ import { SwapCoinIconTextFallback } from './SwapCoinIconTextFallback';
 import { Box } from '@/design-system';
 import { IS_ANDROID, IS_IOS } from '@/env';
 import { PIXEL_RATIO } from '@/utils/deviceUtils';
-import { useSwapContext } from '../providers/swap-provider';
+import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
 
 export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
-  assetType,
+  asset,
   size = 32,
   chainSize = size / 2,
   showBadge = true,
 }: {
-  assetType: 'input' | 'output';
+  asset: SharedValue<ExtendedAnimatedAssetWithColors | null>;
   size?: number;
   chainSize?: number;
   showBadge?: boolean;
 }) {
   const { isDarkMode, colors } = useTheme();
-  const { internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
-
-  const asset = assetType === 'input' ? internalSelectedInputAsset : internalSelectedOutputAsset;
 
   const didErrorForUniqueId = useSharedValue<string | undefined>(undefined);
 
   // Shield animated props from unnecessary updates to avoid flicker
   const coinIconUrl = useDerivedValue(() => asset.value?.icon_url || '');
+  const chainId = useDerivedValue(() => asset.value?.chainId);
 
   const animatedIconSource = useAnimatedProps(() => {
     return {
@@ -110,7 +115,7 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
         />
       </Animated.View>
 
-      {showBadge && <AnimatedChainImage assetType={assetType} size={chainSize} />}
+      {showBadge && <AnimatedChainImage chainId={chainId} size={chainSize} />}
     </View>
   );
 });

diff --git a/src/__swaps__/screens/Swap/components/CoinRow.tsx b/src/__swaps__/screens/Swap/components/CoinRow.tsx
@@ -138,6 +138,7 @@ export function CoinRow({ isFavorite, onPress, output, uniqueId, testID, ...asse
                       x: -12,
                       y: -6,
                     }}
+                    showBadge={chainId !== ChainId.mainnet}
                   />
                   <Box gap={10} flexShrink={1} justifyContent="center">
                     <Text color="label" size="17pt" weight="semibold" numberOfLines={1} ellipsizeMode="tail">

diff --git a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
@@ -29,6 +29,7 @@ import React, { useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
   runOnJS,
+  SharedValue,
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
@@ -43,6 +44,7 @@ import { EstimatedSwapGasFee, EstimatedSwapGasFeeSlot } from './EstimatedSwapGas
 import { UnmountOnAnimatedReaction } from './UnmountOnAnimatedReaction';
 import { getChainsLabelWorklet, useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
+import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
 
 const UNKNOWN_LABEL = i18n.t(i18n.l.swap.unknown);
 const REVIEW_LABEL = i18n.t(i18n.l.expanded_state.swap_details.review);
@@ -242,6 +244,17 @@ export const SlippageRow = () => {
   );
 };
 
+type ChainImageProps = {
+  asset: SharedValue<ExtendedAnimatedAssetWithColors | null>;
+  showMainnetBadge?: boolean;
+  size?: number;
+};
+
+const ChainImage = ({ asset, size = 24, showMainnetBadge = false }: ChainImageProps) => {
+  const chainId = useDerivedValue(() => asset?.value?.chainId);
+  return <AnimatedChainImage chainId={chainId} size={size} showMainnetBadge={showMainnetBadge} />;
+};
+
 export function ReviewPanel() {
   const { navigate } = useNavigation();
   const { isDarkMode } = useColorMode();
@@ -324,7 +337,7 @@ export function ReviewPanel() {
 
             <Inline alignVertical="center" horizontalSpace="6px" wrap={false}>
               <View style={sx.chainBadgeContainer}>
-                <AnimatedChainImage showMainnetBadge assetType="input" size={24} />
+                <ChainImage showMainnetBadge asset={internalSelectedInputAsset} />
               </View>
               <AnimatedText
                 align="right"
@@ -385,7 +398,7 @@ export function ReviewPanel() {
               <Stack space="10px">
                 <Inline alignVertical="center" horizontalSpace="6px" wrap={false}>
                   <View style={sx.chainBadgeContainer}>
-                    <AnimatedChainImage showMainnetBadge assetType="input" size={24} />
+                    <ChainImage asset={internalSelectedInputAsset} showMainnetBadge />
                   </View>
                   <UnmountOnAnimatedReaction
                     isMountedWorklet={() => {
@@ -434,6 +447,6 @@ const sx = StyleSheet.create({
     height: 8,
     left: 8,
     justifyContent: 'center',
-    width: 20,
+    width: 16,
   },
 });
diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx
@@ -94,9 +94,11 @@ function SwapInputAmount() {
 }
 
 function SwapInputIcon() {
+  const { internalSelectedInputAsset } = useSwapContext();
+
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon assetType={'input'} size={36} chainSize={28} />
+      <AnimatedSwapCoinIcon asset={internalSelectedInputAsset} size={36} chainSize={28} />
     </Box>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx
@@ -106,9 +106,11 @@ function SwapOutputAmount({ handleTapWhileDisabled }: { handleTapWhileDisabled:
 }
 
 function SwapOutputIcon() {
+  const { internalSelectedOutputAsset } = useSwapContext();
+
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon assetType="output" size={36} chainSize={28} />
+      <AnimatedSwapCoinIcon asset={internalSelectedOutputAsset} size={36} chainSize={28} />
     </Box>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/SwapSlider.tsx b/src/__swaps__/screens/Swap/components/SwapSlider.tsx
@@ -412,7 +412,7 @@ export const SwapSlider = ({
               <Columns alignHorizontal="justify" alignVertical="center">
                 <Inline alignVertical="center" space="6px" wrap={false}>
                   <Bleed vertical="4px">
-                    <AnimatedSwapCoinIcon showBadge={false} assetType={'input'} size={16} />
+                    <AnimatedSwapCoinIcon showBadge={false} asset={internalSelectedInputAsset} size={16} />
                   </Bleed>
                   <Inline alignVertical="bottom" wrap={false}>
                     <AnimatedText

diff --git a/src/components/expanded-state/chart/ChartExpandedStateHeader.js b/src/components/expanded-state/chart/ChartExpandedStateHeader.js
@@ -11,6 +11,7 @@ import { useAccountSettings, useBooleanState } from '@/hooks';
 import styled from '@/styled-thing';
 import { padding } from '@/styles';
 import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
+import { ChainId } from '@/state/backendNetworks/types';
 
 const noPriceData = lang.t('expanded_state.chart.no_price_data');
 
@@ -114,6 +115,7 @@ export default function ChartExpandedStateHeader({
           symbol={asset?.symbol}
           color={asset?.colors?.primary || asset?.colors?.fallback || undefined}
           chainBadgePosition={{ x: -12, y: -6 }}
+          showBadge={asset?.chainId !== ChainId.mainnet}
         />
 
         <ChartContextButton asset={asset} color={color} />
-Original file line number
+Diff line change
@@ Expand Up @@
                           x: -12,
                           y: -6,
                         }}
+                        showBadge={chainId !== ChainId.mainnet}
                       />
                       <Box gap={10} flexShrink={1} justifyContent="center">
                         <Text color="label" size="17pt" weight="semibold" numberOfLines={1} ellipsizeMode="tail">
@@ Expand Down @@