Cleanup Review Panel + formatting issues

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

@@ -2,15 +2,15 @@
 import React from 'react';
 
 import { AnimatedText, Box, Inline, globalColors, useColorMode, useForegroundColor } from '@/design-system';
-import Animated, { DerivedValue, useAnimatedStyle, useDerivedValue, withSpring, withTiming } from 'react-native-reanimated';
+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';
 
 type AnimatedSwitchProps = {
   onToggle: () => void;
-  value: DerivedValue<boolean>;
+  value: SharedValue<boolean>;
   activeLabel?: string;
   inactiveLabel?: string;
 } & Omit<GestureHandlerButtonProps, 'children'>;
@@ -55,13 +55,14 @@ export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, ..
 
   if (labelItem.value) {
     return (
-      <Inline alignVertical="center" horizontalSpace="6px">
-        <AnimatedText align="right" color={isDarkMode ? 'labelSecondary' : 'label'} size="15pt" weight="heavy" text={labelItem} />
-        {/* TODO: Small switch, so let's move this out to be the whole row */}
-        <GestureHandlerV1Button onPressWorklet={onToggle} style={[styles.containerStyles, containerStyles]} {...props}>
-          <Box style={[styles.circleStyles, circleStyles]} as={Animated.View} />
-        </GestureHandlerV1Button>
-      </Inline>
+      <GestureHandlerV1Button onPressWorklet={onToggle} {...props}>
+        <Inline alignVertical="center" horizontalSpace="6px">
+          <AnimatedText align="right" color={isDarkMode ? 'labelSecondary' : 'label'} size="15pt" weight="heavy" text={labelItem} />
+          <Box as={Animated.View} style={[styles.containerStyles, containerStyles]}>
+            <Box style={[styles.circleStyles, circleStyles]} as={Animated.View} />
+          </Box>
+        </Inline>
+      </GestureHandlerV1Button>
     );
   }
 

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

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
-import Animated, { runOnUI, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { AnimatedText, Box, Inline, TextIcon, useColorMode, useForegroundColor } from '@/design-system';
 import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH, fadeConfig } from '@/__swaps__/screens/Swap/constants';
 import { opacity, valueBasedDecimalFormatter } from '@/__swaps__/utils/swaps';
-import { ButtonPressAnimation } from '@/components/animations';
 import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
 import { AddressZero } from '@ethersproject/constants';
 import { ETH_ADDRESS } from '@/references';
+import { GestureHandlerV1Button } from './GestureHandlerV1Button';
 
 export const ExchangeRateBubble = () => {
   const { isDarkMode } = useColorMode();
@@ -139,7 +139,7 @@ export const ExchangeRateBubble = () => {
   }));
 
   return (
-    <ButtonPressAnimation onPress={() => runOnUI(onChangeIndex)()} scaleTo={0.925}>
+    <GestureHandlerV1Button onPressWorklet={onChangeIndex} scaleTo={0.925}>
       <Box
         as={Animated.View}
         alignItems="center"
@@ -188,6 +188,6 @@ export const ExchangeRateBubble = () => {
           </Inline>
         </Box>
       </Box>
-    </ButtonPressAnimation>
+    </GestureHandlerV1Button>
   );
 };

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

@@ -1,7 +1,6 @@
-import React, { useCallback, useState } from 'react';
-import * as i18n from '@/languages';
+import React, { useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
 
-import { AnimatedText, Box, Inline, Separator, Stack, Text, globalColors, useColorMode } from '@/design-system';
 import Animated, {
   runOnJS,
   useAnimatedReaction,
@@ -10,24 +9,76 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { NavigationSteps, useSwapContext } from '../providers/swap-provider';
-import { fadeConfig } from '../constants';
-import { ethereumUtils } from '@/utils';
-import { ChainImage } from '@/components/coin-icon/ChainImage';
+
+import { AnimatedText, Box, Inline, Separator, Stack, Text, globalColors, useColorMode } from '@/design-system';
+import * as i18n from '@/languages';
+import { CrosschainQuote, Quote, QuoteError } from '@rainbow-me/swaps';
+import { useAccountSettings } from '@/hooks';
+
+import { NavigationSteps, useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
+import { fadeConfig } from '@/__swaps__/screens/Swap/constants';
 import { ChainId } from '@/__swaps__/types/chains';
-import { chainNameFromChainIdWorklet } from '@/__swaps__/utils/chains';
-import { AnimatedSwitch } from './AnimatedSwitch';
+import { chainNameForChainIdWithMainnetSubstitutionWorklet } from '@/__swaps__/utils/chains';
+import { AnimatedSwitch } from '@/__swaps__/screens/Swap/components/AnimatedSwitch';
 import { GasButton } from '@/__swaps__/screens/Swap/components/GasButton';
-import { GestureHandlerV1Button } from './GestureHandlerV1Button';
-import { StyleSheet, View } from 'react-native';
-import { AnimatedChainImage } from './AnimatedChainImage';
+import { GestureHandlerV1Button } from '@/__swaps__/screens/Swap/components/GestureHandlerV1Button';
+import { AnimatedChainImage } from '@/__swaps__/screens/Swap/components/AnimatedChainImage';
+import { convertRawAmountToBalance, convertRawAmountToNativeDisplay, handleSignificantDecimals, multiply } from '@/__swaps__/utils/numbers';
+import { useNativeAssetForChain } from '@/__swaps__/screens/Swap/hooks/useNativeAssetForChain';
+
+const unknown = i18n.t(i18n.l.swap.unknown);
 
 const RainbowFee = () => {
+  const { nativeCurrency } = useAccountSettings();
   const { isDarkMode } = useColorMode();
+  const { quote, internalSelectedInputAsset } = useSwapContext();
+
+  const { nativeAsset } = useNativeAssetForChain({ inputAsset: internalSelectedInputAsset });
 
-  const rainbowFee = useSharedValue(i18n.t(i18n.l.swap.unknown));
+  const index = useSharedValue(0);
+  const rainbowFee = useSharedValue<string[]>([unknown, unknown]);
+
+  const feeToDisplay = useDerivedValue(() => {
+    return rainbowFee.value[index.value];
+  });
 
-  return <AnimatedText align="right" color={isDarkMode ? 'labelSecondary' : 'label'} size="15pt" weight="heavy" text={rainbowFee} />;
+  const swapIndex = () => {
+    'worklet';
+    index.value = 1 - index.value;
+  };
+
+  const calculateRainbowFeeFromQuoteData = useCallback(
+    (quote: Quote | CrosschainQuote) => {
+      const feePercentage = convertRawAmountToBalance(quote.feePercentageBasisPoints, {
+        decimals: 18,
+      }).amount;
+
+      const feeInEth = convertRawAmountToNativeDisplay(
+        quote.feeInEth.toString(),
+        nativeAsset?.value?.decimals || 18,
+        nativeAsset?.value?.price?.value || '0',
+        nativeCurrency
+      ).display;
+
+      rainbowFee.value = [feeInEth, `${handleSignificantDecimals(multiply(feePercentage, 100), 2)}%`];
+    },
+    [nativeAsset?.value?.decimals, nativeAsset?.value?.price?.value, nativeCurrency, rainbowFee]
+  );
+
+  useAnimatedReaction(
+    () => quote.value,
+    (current, previous) => {
+      if (current && previous !== current && !(current as QuoteError)?.error) {
+        runOnJS(calculateRainbowFeeFromQuoteData)(current as Quote | CrosschainQuote);
+      }
+    }
+  );
+
+  return (
+    <GestureHandlerV1Button onPressWorklet={swapIndex}>
+      <AnimatedText align="right" color={isDarkMode ? 'labelSecondary' : 'label'} size="15pt" weight="heavy" text={feeToDisplay} />
+    </GestureHandlerV1Button>
+  );
 };
 
 export function ReviewPanel() {
@@ -37,32 +88,26 @@ export function ReviewPanel() {
   const unknown = i18n.t(i18n.l.swap.unknown);
 
   const chainName = useDerivedValue(() =>
-    internalSelectedOutputAsset.value?.chainId === ChainId.mainnet
-      ? 'ethereum'
-      : chainNameFromChainIdWorklet(internalSelectedOutputAsset.value?.chainId ?? ChainId.mainnet)
+    chainNameForChainIdWithMainnetSubstitutionWorklet(internalSelectedOutputAsset.value?.chainId ?? ChainId.mainnet)
   );
 
-  const [chain, setChain] = useState(ethereumUtils.getNetworkFromChainId(internalSelectedOutputAsset.value?.chainId ?? ChainId.mainnet));
-
   const minimumReceived = useDerivedValue(() => {
-    if (!SwapInputController.inputValues.value.outputAmount || !internalSelectedOutputAsset.value) {
+    if (!SwapInputController.formattedOutputAmount.value || !internalSelectedOutputAsset.value?.symbol) {
       return unknown;
     }
-    return `${SwapInputController.inputValues.value.outputAmount} ${internalSelectedOutputAsset.value.symbol}`;
+
+    return `${SwapInputController.formattedOutputAmount.value} ${internalSelectedOutputAsset.value.symbol}`;
   });
 
-  const updateChainFromNetwork = useCallback((chainId: ChainId) => {
-    setChain(ethereumUtils.getNetworkFromChainId(chainId));
-  }, []);
+  const handleDecrementSlippage = () => {
+    'worklet';
+    SwapSettings.onUpdateSlippage('minus');
+  };
 
-  useAnimatedReaction(
-    () => internalSelectedInputAsset.value?.chainId ?? ChainId.mainnet,
-    (current, previous) => {
-      if (!previous || previous !== current) {
-        runOnJS(updateChainFromNetwork)(current);
-      }
-    }
-  );
+  const handleIncrementSlippage = () => {
+    'worklet';
+    SwapSettings.onUpdateSlippage('plus');
+  };
 
   // TODO: Comes from gas store
   const estimatedGasFee = useSharedValue('$2.25');
@@ -182,7 +227,7 @@ export function ReviewPanel() {
             </Inline>
 
             <Inline wrap={false} horizontalSpace="8px" alignVertical="center">
-              <GestureHandlerV1Button onPressWorklet={() => SwapSettings.onUpdateSlippage('minus')}>
+              <GestureHandlerV1Button onPressWorklet={handleDecrementSlippage}>
                 <Box
                   style={{
                     justifyContent: 'center',
@@ -218,7 +263,7 @@ export function ReviewPanel() {
                 </Text>
               </Inline>
 
-              <GestureHandlerV1Button onPressWorklet={() => SwapSettings.onUpdateSlippage('plus')}>
+              <GestureHandlerV1Button onPressWorklet={handleIncrementSlippage}>
                 <Box
                   style={{
                     justifyContent: 'center',

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 
@@ -10,7 +10,7 @@ import { GasButton } from './GasButton';
 import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH, springConfig } from '@/__swaps__/screens/Swap/constants';
 import { IS_ANDROID } from '@/env';
 import { useSwapContext, NavigationSteps } from '@/__swaps__/screens/Swap/providers/swap-provider';
-import Animated, { runOnJS, runOnUI, useAnimatedReaction, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import Animated, { runOnUI, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native';
 import { opacity } from '@/__swaps__/utils/swaps';
 import { ReviewPanel } from './ReviewPanel';
@@ -30,20 +30,6 @@ export function SwapBottomPanel() {
   } = useSwapContext();
 
   const { swipeToDismissGestureHandler, gestureY } = useBottomPanelGestureHandler();
-  const [enabled, setEnabled] = useState(false);
-
-  useAnimatedReaction(
-    () => ({
-      configProgress: configProgress.value,
-    }),
-    ({ configProgress }) => {
-      if (configProgress === NavigationSteps.SHOW_REVIEW || configProgress === NavigationSteps.SHOW_GAS) {
-        runOnJS(setEnabled)(true);
-      } else {
-        runOnJS(setEnabled)(false);
-      }
-    }
-  );
 
   const gestureHandlerStyles = useAnimatedStyle(() => {
     return {
@@ -59,7 +45,7 @@ export function SwapBottomPanel() {
 
   return (
     // @ts-expect-error Property 'children' does not exist on type
-    <PanGestureHandler maxPointers={1} onGestureEvent={swipeToDismissGestureHandler} enabled={enabled}>
+    <PanGestureHandler maxPointers={1} onGestureEvent={swipeToDismissGestureHandler}>
       <Box
         as={Animated.View}
         paddingBottom={{

src/__swaps__/screens/Swap/hooks/useNativeAssetForChain.ts

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+
+import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
+import { ChainId } from '@/__swaps__/types/chains';
+
+import { SharedValue, runOnJS, runOnUI, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { ParsedAddressAsset } from '@/entities';
+import { ethereumUtils } from '@/utils';
+
+export const useNativeAssetForChain = ({ inputAsset }: { inputAsset: SharedValue<ExtendedAnimatedAssetWithColors | null> }) => {
+  const chainId = useDerivedValue(() => inputAsset.value?.chainId ?? ChainId.mainnet);
+  const nativeAsset = useSharedValue<ParsedAddressAsset | undefined>(
+    ethereumUtils.getNetworkNativeAsset(ethereumUtils.getNetworkFromChainId(chainId.value))
+  );
+
+  const getNativeAssetForNetwork = useCallback(
+    (chainId: ChainId) => {
+      const network = ethereumUtils.getNetworkFromChainId(chainId);
+      const asset = ethereumUtils.getNetworkNativeAsset(network);
+      nativeAsset.value = asset;
+    },
+    [nativeAsset]
+  );
+
+  useAnimatedReaction(
+    () => chainId.value,
+    (currentChainId, previoudChainId) => {
+      if (currentChainId !== previoudChainId) {
+        runOnJS(getNativeAssetForNetwork)(currentChainId);
+      }
+    }
+  );
+
+  return {
+    nativeAsset,
+  };
+};