Merge branch 'develop' into @matthew/APP-1593

rainbow-me · Jun 12, 2024 · 7601623 · 7601623
2 parents 2d400b6 + d9ad21d
commit 7601623
Show file tree

Hide file tree

Showing 25 changed files with 1,019 additions and 698 deletions.
diff --git a/src/__swaps__/screens/Swap/Swap.tsx b/src/__swaps__/screens/Swap/Swap.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, StatusBar } from 'react-native';
 import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import { ScreenCornerRadius } from 'react-native-screen-corner-radius';
@@ -165,8 +165,15 @@ const WalletAddressObserver = () => {
   return null;
 };
 
+const areBothAssetsPrefilled = () => {
+  const { inputAsset, outputAsset } = useSwapsStore.getState();
+  return !!inputAsset && !!outputAsset;
+};
+
 const SliderAndKeyboardAndBottomControls = () => {
-  const shouldMount = useDelayedMount();
+  const skipDelayedMount = useMemo(() => areBothAssetsPrefilled(), []);
+  const shouldMount = useDelayedMount({ skipDelayedMount });
+
   const { AnimatedSwapStyles } = useSwapContext();
 
   return shouldMount ? (

diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.tsx
@@ -73,7 +73,7 @@ export function AnimatedChainImage({
     const base = {
       source: {
         ...DEFAULT_FASTER_IMAGE_CONFIG,
-        borderRadius: IS_ANDROID ? (size / 2) * PIXEL_RATIO : undefined,
+        borderRadius: IS_ANDROID ? (size / 2) * PIXEL_RATIO : size / 2,
         url: '',
       },
     };

diff --git a/src/__swaps__/screens/Swap/components/CoinRow.tsx b/src/__swaps__/screens/Swap/components/CoinRow.tsx
@@ -1,11 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Box, Column, Columns, HitSlop, Inline, Text } from '@/design-system';
-import { TextColor } from '@/design-system/color/palettes';
 import { CoinRowButton } from '@/__swaps__/screens/Swap/components/CoinRowButton';
 import { BalancePill } from '@/__swaps__/screens/Swap/components/BalancePill';
-import { toggleFavorite, useFavorites } from '@/resources/favorites';
-import { StyleSheet } from 'react-native';
+import { toggleFavorite } from '@/resources/favorites';
 import { SwapCoinIcon } from './SwapCoinIcon';
 import { ethereumUtils, haptics, showActionSheetWithOptions } from '@/utils';
 import { ContextMenuButton, OnPressMenuItemEventObject } from 'react-native-ios-context-menu';
@@ -15,59 +13,56 @@ import { setClipboard } from '@/hooks/useClipboard';
 import { RainbowNetworks } from '@/networks';
 import * as i18n from '@/languages';
 import { ETH_ADDRESS } from '@/references';
-import { trimTrailingZeros } from '@/__swaps__/utils/swaps';
 import { ParsedSearchAsset } from '@/__swaps__/types/assets';
 import { userAssetsStore } from '@/state/assets/userAssets';
 import { SearchAsset } from '@/__swaps__/types/search';
 import { ChainId } from '@/__swaps__/types/chains';
 
+export const COIN_ROW_WITH_PADDING_HEIGHT = 56;
+
 interface InputCoinRowProps {
+  isFavorite?: boolean;
   isTrending?: boolean;
+  nativePriceChange?: string;
   onPress: (asset: ParsedSearchAsset | null) => void;
   output?: false | undefined;
   uniqueId: string;
 }
 
-type PartialAsset = Pick<SearchAsset, 'address' | 'mainnetAddress' | 'chainId' | 'icon_url' | 'name' | 'colors' | 'symbol' | 'uniqueId'>;
+type PartialAsset = Pick<SearchAsset, 'address' | 'chainId' | 'colors' | 'icon_url' | 'mainnetAddress' | 'name' | 'symbol' | 'uniqueId'>;
 
 interface OutputCoinRowProps extends PartialAsset {
+  isFavorite: boolean;
   onPress: () => void;
   output: true;
+  nativePriceChange?: string;
   isTrending?: boolean;
 }
 
 type CoinRowProps = InputCoinRowProps | OutputCoinRowProps;
 
-export const CoinRow = React.memo(function CoinRow({ onPress, output, uniqueId, isTrending, ...assetProps }: CoinRowProps) {
-  const { favoritesMetadata } = useFavorites();
-
+export const CoinRow = memo(function CoinRow({ isFavorite, onPress, output, uniqueId, ...assetProps }: CoinRowProps) {
   const inputAsset = userAssetsStore(state => (output ? undefined : state.getUserAsset(uniqueId)));
   const outputAsset = output ? (assetProps as PartialAsset) : undefined;
 
   const asset = output ? outputAsset : inputAsset;
   const { address, chainId, colors, icon_url, mainnetAddress, name, symbol } = asset || {};
 
-  const percentChange = useMemo(() => {
-    if (isTrending) {
-      const rawChange = Math.random() * 30;
-      const isNegative = Math.random() < 0.2;
-      const prefix = isNegative ? '-' : '+';
-      const color: TextColor = isNegative ? 'red' : 'green';
-      const change = `${trimTrailingZeros(Math.abs(rawChange).toFixed(1))}%`;
-
-      return { change, color, prefix };
-    }
-  }, [isTrending]);
-
-  const isFavorite = useMemo(() => {
-    return Object.values(favoritesMetadata).find(fav => {
-      if (mainnetAddress?.toLowerCase() === ETH_ADDRESS) {
-        return fav.address.toLowerCase() === ETH_ADDRESS;
-      }
-
-      return fav.address?.toLowerCase() === address?.toLowerCase();
-    });
-  }, [favoritesMetadata, address, mainnetAddress]);
+  /**
+* ⚠️ TODO: Re-enable when trending tokens are added
+*
+* const percentChange = useMemo(() => {
+*   if (isTrending && nativePriceChange) {
+*     const rawChange = parseFloat(nativePriceChange);
+*     const isNegative = rawChange < 0;
+*     const prefix = isNegative ? '-' : '+';
+*     const color: TextColor = isNegative ? 'red' : 'green';
+*     const change = `${trimTrailingZeros(Math.abs(rawChange).toFixed(1))}%`;
+
+*     return { change, color, prefix };
+*   }
+* }, [isTrending, nativePriceChange]);
+*/
 
   const favoritesIconColor = useMemo(() => {
     return isFavorite ? '#FFCB0F' : undefined;
@@ -76,14 +71,14 @@ export const CoinRow = React.memo(function CoinRow({ onPress, output, uniqueId,
   const handleToggleFavorite = useCallback(() => {
     // NOTE: It's important to always fetch ETH favorite on mainnet
     if (address) {
-      return toggleFavorite(address, mainnetAddress === ETH_ADDRESS ? 1 : chainId);
+      return toggleFavorite(address, mainnetAddress === ETH_ADDRESS ? ChainId.mainnet : chainId);
     }
   }, [address, mainnetAddress, chainId]);
 
   if (!address || !chainId) return null;
 
   return (
-    <Box>
+    <Box style={{ height: COIN_ROW_WITH_PADDING_HEIGHT, width: '100%' }}>
       <Columns alignVertical="center">
         <Column>
           <ButtonPressAnimation disallowInterruption onPress={output ? onPress : () => onPress(inputAsset || null)} scaleTo={0.95}>
@@ -116,7 +111,7 @@ export const CoinRow = React.memo(function CoinRow({ onPress, output, uniqueId,
                       <Text color="labelTertiary" numberOfLines={1} size="13pt" weight="semibold">
                         {output ? symbol : `${inputAsset?.balance.display}`}
                       </Text>
-                      {isTrending && percentChange && (
+                      {/* {nativePriceChange && percenChange && (
                         <Inline alignVertical="center" space={{ custom: 1 }} wrap={false}>
                           <Text align="center" color={percentChange.color} size="12pt" weight="bold">
                             {percentChange.prefix}
@@ -125,7 +120,7 @@ export const CoinRow = React.memo(function CoinRow({ onPress, output, uniqueId,
                             {percentChange.change}
                           </Text>
                         </Inline>
-                      )}
+                      )} */}
                     </Inline>
                   </Box>
                 </Box>
@@ -137,7 +132,7 @@ export const CoinRow = React.memo(function CoinRow({ onPress, output, uniqueId,
         {output && (
           <Column width="content">
             <Box paddingLeft="12px" paddingRight="20px">
-              <Inline space="8px">
+              <Inline space="10px">
                 <InfoButton address={address} chainId={chainId} />
                 <CoinRowButton color={favoritesIconColor} onPress={handleToggleFavorite} icon="􀋃" weight="black" />
               </Inline>
@@ -225,10 +220,10 @@ const InfoButton = ({ address, chainId }: { address: string; chainId: ChainId })
   return (
     <ContextMenuButton
       activeOpacity={0}
+      isMenuPrimaryAction
       // @ts-expect-error Types of property 'menuItems' are incompatible
       menuConfig={menuConfig}
       onPress={IS_ANDROID ? onPressAndroid : undefined}
-      isMenuPrimaryAction
       onPressMenuItem={handlePressMenuItem}
       useActionSheetFallback={false}
       wrapNativeComponent={false}
@@ -237,9 +232,3 @@ const InfoButton = ({ address, chainId }: { address: string; chainId: ChainId })
     </ContextMenuButton>
   );
 };
-
-export const styles = StyleSheet.create({
-  solidColorCoinIcon: {
-    opacity: 0.4,
-  },
-});
diff --git a/src/__swaps__/screens/Swap/components/CoinRowButton.tsx b/src/__swaps__/screens/Swap/components/CoinRowButton.tsx
@@ -40,7 +40,7 @@ export const CoinRowButton = ({
           backgroundColor: outline
             ? 'transparent'
             : color
-              ? opacity(color, 0.25)
+              ? opacity(color, isDarkMode ? 0.16 : 0.25)
               : isDarkMode
                 ? fillQuaternary
                 : opacity(fillTertiary, 0.04),

diff --git a/src/__swaps__/screens/Swap/components/SearchInput.tsx b/src/__swaps__/screens/Swap/components/SearchInput.tsx
@@ -77,10 +77,7 @@ export const SearchInput = ({
     };
   });
 
-  const onInputSearchQueryChange = useDebouncedCallback((text: string) => userAssetsStore.getState().setSearchQuery(text), 50, {
-    leading: true,
-    trailing: true,
-  });
+  const onInputSearchQueryChange = userAssetsStore(state => state.setSearchQuery);
 
   const onOutputSearchQueryChange = useDebouncedCallback((text: string) => useSwapsStore.setState({ outputSearchQuery: text }), 100, {
     leading: false,
@@ -114,7 +111,7 @@ export const SearchInput = ({
   );
 
   return (
-    <Box width="full">
+    <Box paddingHorizontal="20px" width="full">
       <Columns alignHorizontal="justify" alignVertical="center" space="20px">
         <Box>
           <Bleed horizontal="8px" vertical="24px">

diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx
@@ -127,7 +127,7 @@ export function SwapInputAsset() {
       </Box>
       <Box
         as={Animated.View}
-        padding={{ custom: INPUT_PADDING }}
+        paddingTop={{ custom: INPUT_PADDING }}
         paddingBottom={{ custom: 14.5 }}
         position="absolute"
         style={AnimatedSwapStyles.inputTokenListStyle}
@@ -181,9 +181,6 @@ export const styles = StyleSheet.create({
     overflow: 'hidden',
     marginTop: StatusBar.currentHeight ?? 0,
   },
-  solidColorCoinIcon: {
-    opacity: 0.4,
-  },
   staticInputContainerStyles: {
     shadowOffset: { width: 0, height: 6 },
     shadowOpacity: 0.1,

diff --git a/src/__swaps__/screens/Swap/components/SwapNavbar.tsx b/src/__swaps__/screens/Swap/components/SwapNavbar.tsx
@@ -24,17 +24,13 @@ export function SwapNavbar() {
   const { isDarkMode } = useColorMode();
   const { navigate, goBack } = useNavigation();
 
-  const { AnimatedSwapStyles, internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
+  const { AnimatedSwapStyles, swapInfo } = useSwapContext();
 
   // const separatorSecondary = useForegroundColor('separatorSecondary');
   // const separatorTertiary = useForegroundColor('separatorTertiary');
 
   const swapOrBridgeLabel = useDerivedValue(() => {
-    const areBothAssetsSelected = internalSelectedInputAsset.value && internalSelectedOutputAsset.value;
-    const isBridging =
-      areBothAssetsSelected && internalSelectedInputAsset.value?.mainnetAddress === internalSelectedOutputAsset.value?.mainnetAddress;
-
-    return isBridging ? BRIDGE_TITLE_LABEL : SWAP_TITLE_LABEL;
+    return swapInfo.value.isBridging ? BRIDGE_TITLE_LABEL : SWAP_TITLE_LABEL;
   });
 
   const onChangeWallet = React.useCallback(() => {
@@ -125,17 +121,17 @@ export function SwapNavbar() {
   );
 }
 
-export const styles = StyleSheet.create({
-  headerButton: {
-    borderRadius: 18,
-    borderWidth: THICK_BORDER_WIDTH,
-    height: 36,
-    width: 36,
-  },
-  headerTextShadow: {
-    padding: 12,
-    textShadowColor: 'rgba(0, 0, 0, 0.2)',
-    textShadowOffset: { width: 0, height: 2 },
-    textShadowRadius: 6,
-  },
-});
+// export const styles = StyleSheet.create({
+//   headerButton: {
+//     borderRadius: 18,
+//     borderWidth: THICK_BORDER_WIDTH,
+//     height: 36,
+//     width: 36,
+//   },
+//   headerTextShadow: {
+//     padding: 12,
+//     textShadowColor: 'rgba(0, 0, 0, 0.2)',
+//     textShadowOffset: { width: 0, height: 2 },
+//     textShadowRadius: 6,
+//   },
+// });
diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx
@@ -156,7 +156,7 @@ export function SwapOutputAsset() {
       <Box
         as={Animated.View}
         height="full"
-        padding={{ custom: INPUT_PADDING }}
+        paddingTop={{ custom: INPUT_PADDING }}
         paddingBottom={{ custom: 14.5 }}
         position="absolute"
         style={AnimatedSwapStyles.outputTokenListStyle}
@@ -210,9 +210,6 @@ export const styles = StyleSheet.create({
     overflow: 'hidden',
     marginTop: StatusBar.currentHeight ?? 0,
   },
-  solidColorCoinIcon: {
-    opacity: 0.4,
-  },
   staticInputContainerStyles: {
     shadowOffset: { width: 0, height: 6 },
     shadowOpacity: 0.1,