swap button states

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

@@ -1,10 +1,10 @@
+import { ButtonPressAnimation } from '@/components/animations';
+import { IS_IOS } from '@/env';
 import ConditionalWrap from 'conditional-wrap';
 import React from 'react';
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { TapGestureHandler, TapGestureHandlerGestureEvent } from 'react-native-gesture-handler';
 import Animated, { AnimatedStyle, runOnJS, useAnimatedGestureHandler } from 'react-native-reanimated';
-import { ButtonPressAnimation } from '@/components/animations';
-import { IS_IOS } from '@/env';
 
 export type GestureHandlerButtonProps = {
   buttonPressWrapperStyleIOS?: StyleProp<ViewStyle>;

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

@@ -1,13 +1,15 @@
 /* eslint-disable no-nested-ternary */
 import React from 'react';
 import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native';
-import Animated, { DerivedValue, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
+import Animated, { DerivedValue, useAnimatedProps, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
 
-import { AnimatedText, Box, Column, Columns, globalColors, useColorMode, useForegroundColor } from '@/design-system';
 import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
 import { getColorValueForThemeWorklet } from '@/__swaps__/utils/swaps';
+import { AnimatedText, Box, Column, Columns, globalColors, useColorMode, useForegroundColor } from '@/design-system';
 import { GestureHandlerV1Button } from './GestureHandlerV1Button';
 
+const AnimatedGestureHandlerV1Button = Animated.createAnimatedComponent(GestureHandlerV1Button);
+
 export const SwapActionButton = ({
   asset,
   borderRadius,
@@ -23,6 +25,8 @@ export const SwapActionButton = ({
   scaleTo,
   small,
   style,
+  disabled,
+  isLoading,
 }: {
   asset: DerivedValue<ExtendedAnimatedAssetWithColors | null>;
   borderRadius?: number;
@@ -38,6 +42,8 @@ export const SwapActionButton = ({
   scaleTo?: number;
   small?: boolean;
   style?: ViewStyle;
+  disabled?: DerivedValue<boolean | undefined>;
+  isLoading?: DerivedValue<boolean | undefined>;
 }) => {
   const { isDarkMode } = useColorMode();
   const fallbackColor = useForegroundColor('label');
@@ -80,6 +86,8 @@ export const SwapActionButton = ({
       },
       shadowOpacity: isDarkMode ? 0.2 : small ? 0.2 : 0.36,
       shadowRadius: isDarkMode ? 26 : small ? 9 : 15,
+      // we don't want to change the opacity when it's loading
+      opacity: !isLoading?.value && disabled?.value ? 0.6 : 1,
     };
   });
 
@@ -97,15 +105,19 @@ export const SwapActionButton = ({
     return rightIcon;
   });
 
+  const buttonAnimatedProps = useAnimatedProps(() => {
+    return {
+      disabled: disabled?.value,
+      scaleTo: disabled?.value ? 1 : scaleTo || (hugContent ? undefined : 0.925),
+    };
+  });
+
   return (
-    <GestureHandlerV1Button
+    <AnimatedGestureHandlerV1Button
+      animatedProps={buttonAnimatedProps}
+      onPressStartWorklet={onPressWorklet}
       onPressJS={onPressJS}
-      onPressWorklet={onPressWorklet}
-      scaleTo={scaleTo || (hugContent ? undefined : 0.925)}
-      style={{
-        ...(hugContent && feedActionButtonStyles.buttonWrapper),
-        ...(style || {}),
-      }}
+      style={[hugContent && feedActionButtonStyles.buttonWrapper, style]}
     >
       <Box
         as={Animated.View}
@@ -138,7 +150,7 @@ export const SwapActionButton = ({
           )}
         </Columns>
       </Box>
-    </GestureHandlerV1Button>
+    </AnimatedGestureHandlerV1Button>
   );
 };
 

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

@@ -1,35 +1,28 @@
 import React from 'react';
-import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
 import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';
 
 import { Box, Column, Columns, Separator, globalColors, useColorMode } from '@/design-system';
 import { safeAreaInsetValues } from '@/utils';
 
 import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
+import { NavigationSteps, useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
 import { IS_ANDROID } from '@/env';
-import { useSwapContext, NavigationSteps } from '@/__swaps__/screens/Swap/providers/swap-provider';
 
 import { opacity } from '@/__swaps__/utils/swaps';
+import { SPRING_CONFIGS } from '@/components/animations/animationConfigs';
 import { useBottomPanelGestureHandler } from '../hooks/useBottomPanelGestureHandler';
 import { GasButton } from './GasButton';
 import { GasPanel } from './GasPanel';
 import { ReviewPanel } from './ReviewPanel';
 import { SwapActionButton } from './SwapActionButton';
-import { SPRING_CONFIGS } from '@/components/animations/animationConfigs';
 
 export function SwapBottomPanel() {
   const { isDarkMode } = useColorMode();
-  const {
-    confirmButtonIcon,
-    confirmButtonIconStyle,
-    confirmButtonLabel,
-    internalSelectedOutputAsset,
-    AnimatedSwapStyles,
-    SwapNavigation,
-    configProgress,
-  } = useSwapContext();
+  const { confirmButtonIconStyle, confirmButtonProps, internalSelectedOutputAsset, AnimatedSwapStyles, SwapNavigation, configProgress } =
+    useSwapContext();
 
   const { swipeToDismissGestureHandler, gestureY } = useBottomPanelGestureHandler();
 
@@ -50,6 +43,11 @@ export function SwapBottomPanel() {
     };
   });
 
+  const icon = useDerivedValue(() => confirmButtonProps.value.icon);
+  const label = useDerivedValue(() => confirmButtonProps.value.label);
+  const disabled = useDerivedValue(() => confirmButtonProps.value.disabled);
+  const isLoading = useDerivedValue(() => confirmButtonProps.value.isLoading);
+
   return (
     // @ts-expect-error Property 'children' does not exist on type
     <PanGestureHandler maxPointers={1} onGestureEvent={swipeToDismissGestureHandler}>
@@ -80,11 +78,13 @@ export function SwapBottomPanel() {
             </Box>
           </Column>
           <SwapActionButton
+            onPressWorklet={SwapNavigation.handleSwapAction}
             asset={internalSelectedOutputAsset}
-            icon={confirmButtonIcon}
+            icon={icon}
             iconStyle={confirmButtonIconStyle}
-            label={confirmButtonLabel}
-            onPressWorklet={SwapNavigation.handleSwapAction}
+            label={label}
+            disabled={disabled}
+            isLoading={isLoading}
             scaleTo={0.9}
           />
         </Columns>

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

@@ -1,20 +1,20 @@
 import MaskedView from '@react-native-masked-view/masked-view';
 import React from 'react';
-import { StyleSheet, StatusBar } from 'react-native';
+import { StatusBar, StyleSheet } from 'react-native';
 import Animated, { useDerivedValue } from 'react-native-reanimated';
 import { ScreenCornerRadius } from 'react-native-screen-corner-radius';
 
 import { AnimatedText, Box, Column, Columns, Stack, useColorMode } from '@/design-system';
 
+import { BalanceBadge } from '@/__swaps__/screens/Swap/components/BalanceBadge';
+import { FadeMask } from '@/__swaps__/screens/Swap/components/FadeMask';
 import { GestureHandlerV1Button } from '@/__swaps__/screens/Swap/components/GestureHandlerV1Button';
 import { SwapActionButton } from '@/__swaps__/screens/Swap/components/SwapActionButton';
-import { FadeMask } from '@/__swaps__/screens/Swap/components/FadeMask';
 import { SwapInput } from '@/__swaps__/screens/Swap/components/SwapInput';
-import { BalanceBadge } from '@/__swaps__/screens/Swap/components/BalanceBadge';
 import { TokenList } from '@/__swaps__/screens/Swap/components/TokenList/TokenList';
 import { BASE_INPUT_WIDTH, INPUT_INNER_WIDTH, INPUT_PADDING, THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
-import { IS_ANDROID } from '@/env';
 import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
+import { IS_ANDROID } from '@/env';
 import { AnimatedSwapCoinIcon } from './AnimatedSwapCoinIcon';
 import * as i18n from '@/languages';
 

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

@@ -1,25 +1,26 @@
+import { AnimatedText, Box, Column, Columns, Stack, useColorMode } from '@/design-system';
 import MaskedView from '@react-native-masked-view/masked-view';
 import React, { useCallback } from 'react';
-import { StyleSheet, StatusBar } from 'react-native';
+import { StatusBar, StyleSheet } from 'react-native';
 import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
 import { ScreenCornerRadius } from 'react-native-screen-corner-radius';
-import { AnimatedText, Box, Column, Columns, Stack, useColorMode } from '@/design-system';
+
+import { AnimatedSwapCoinIcon } from '@/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon';
+import { BalanceBadge } from '@/__swaps__/screens/Swap/components/BalanceBadge';
+import { FadeMask } from '@/__swaps__/screens/Swap/components/FadeMask';
 import { GestureHandlerV1Button } from '@/__swaps__/screens/Swap/components/GestureHandlerV1Button';
 import { SwapActionButton } from '@/__swaps__/screens/Swap/components/SwapActionButton';
-import { FadeMask } from '@/__swaps__/screens/Swap/components/FadeMask';
 import { SwapInput } from '@/__swaps__/screens/Swap/components/SwapInput';
-import { BalanceBadge } from '@/__swaps__/screens/Swap/components/BalanceBadge';
-import { AnimatedSwapCoinIcon } from '@/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon';
 import { TokenList } from '@/__swaps__/screens/Swap/components/TokenList/TokenList';
 import { BASE_INPUT_WIDTH, INPUT_INNER_WIDTH, INPUT_PADDING, THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
-import { IS_ANDROID } from '@/env';
 import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
+import { ChainId } from '@/__swaps__/types/chains';
+import { IS_ANDROID } from '@/env';
+import * as i18n from '@/languages';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
 import { useSwapsStore } from '@/state/swaps/swapsStore';
 import { ethereumUtils } from '@/utils';
-import { ChainId } from '@/__swaps__/types/chains';
-import * as i18n from '@/languages';
 
 const SELECT_LABEL = i18n.t(i18n.l.swap.select);
 const NO_BALANCE_LABEL = i18n.t(i18n.l.swap.no_balance);

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

@@ -0,0 +1,32 @@
+import { lessThanOrEqualToWorklet, toScaledIntegerWorklet } from '@/__swaps__/safe-math/SafeMath';
+import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
+import { CrosschainQuote, Quote, QuoteError } from '@rainbow-me/swaps';
+import { SharedValue, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { GasSettings } from './useCustomGas';
+
+export function useCanPerformSwap({
+  quote,
+  inputAsset,
+}: {
+  inputAsset: SharedValue<ExtendedAnimatedAssetWithColors | null>;
+  quote: SharedValue<Quote | CrosschainQuote | QuoteError | null>;
+}) {
+  const gasSettings = useSharedValue<GasSettings | undefined>(undefined);
+  const estimatedGasLimit = useSharedValue<string | undefined>(undefined);
+  const enoughFundsForGas = useSharedValue<boolean>(true);
+
+  const enoughFundsForSwap = useDerivedValue(() => {
+    if (!quote.value || 'error' in quote.value || !inputAsset.value) return true;
+    return lessThanOrEqualToWorklet(
+      quote.value.sellAmount.toString(),
+      toScaledIntegerWorklet(inputAsset.value.balance.amount, inputAsset.value.decimals)
+    );
+  });
+
+  return {
+    gasSettings,
+    estimatedGasLimit,
+    enoughFundsForGas,
+    enoughFundsForSwap,
+  };
+}

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

@@ -2,15 +2,13 @@ import { ChainId } from '@/__swaps__/types/chains';
 import { weiToGwei } from '@/__swaps__/utils/ethereum';
 import { add, multiply } from '@/__swaps__/utils/numbers';
 import ethereumUtils, { useNativeAssetForNetwork } from '@/utils/ethereumUtils';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { formatUnits } from 'viem';
+
+import { useSyncedSwapQuoteStore } from '../providers/SyncSwapStateAndSharedValues';
 import { formatCurrency, formatNumber } from './formatNumber';
 import { GasSettings } from './useCustomGas';
 import { useSwapEstimatedGasLimit } from './useSwapEstimatedGasLimit';
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
-import { useDebouncedCallback } from 'use-debounce';
-import { useSwapContext } from '../providers/swap-provider';
-import { greaterThanWorklet, toScaledIntegerWorklet } from '@/__swaps__/safe-math/SafeMath';
 
 function safeBigInt(value: string) {
   try {
@@ -20,6 +18,11 @@ function safeBigInt(value: string) {
   }
 }
 
+export function calculateGasFee(gasSettings: GasSettings, gasLimit: string) {
+  const amount = gasSettings.isEIP1559 ? add(gasSettings.maxBaseFee, gasSettings.maxPriorityFee) : gasSettings.gasPrice;
+  return multiply(gasLimit, amount);
+}
+
 export function useEstimatedGasFee({
   chainId,
   gasLimit,
@@ -35,66 +38,23 @@ export function useEstimatedGasFee({
   return useMemo(() => {
     if (!gasLimit || !gasSettings || !nativeNetworkAsset?.price) return;
 
-    const amount = gasSettings.isEIP1559 ? add(gasSettings.maxBaseFee, gasSettings.maxPriorityFee) : gasSettings.gasPrice;
-
-    const totalWei = multiply(gasLimit, amount);
+    const fee = calculateGasFee(gasSettings, gasLimit);
     const networkAssetPrice = nativeNetworkAsset.price.value?.toString();
 
-    if (!networkAssetPrice) return `${formatNumber(weiToGwei(totalWei))} Gwei`;
+    if (!networkAssetPrice) return `${formatNumber(weiToGwei(fee))} Gwei`;
 
-    const gasAmount = formatUnits(safeBigInt(totalWei), nativeNetworkAsset.decimals).toString();
-    const feeInUserCurrency = multiply(networkAssetPrice, gasAmount);
+    const feeFormatted = formatUnits(safeBigInt(fee), nativeNetworkAsset.decimals).toString();
+    const feeInUserCurrency = multiply(networkAssetPrice, feeFormatted);
 
     return formatCurrency(feeInUserCurrency);
   }, [gasLimit, gasSettings, nativeNetworkAsset]);
 }
 
 export function useSwapEstimatedGasFee(gasSettings: GasSettings | undefined) {
-  const { internalSelectedInputAsset: assetToSell, internalSelectedOutputAsset: assetToBuy, quote } = useSwapContext();
-
-  const [state, setState] = useState({
-    assetToBuy: assetToBuy.value,
-    assetToSell: assetToSell.value,
-    chainId: assetToSell.value?.chainId ?? ChainId.mainnet,
-    quote: quote.value,
-  });
-
-  const debouncedStateSet = useDebouncedCallback(setState, 100, { leading: false, trailing: true });
-
-  // Updates the state as a single block in response to quote changes to ensure the gas fee is cleanly updated once
-  useAnimatedReaction(
-    () => quote.value,
-    (current, previous) => {
-      if (!assetToSell.value || !assetToBuy.value || !current || !previous || 'error' in current) return;
-
-      const isSwappingMoreThanAvailableBalance = greaterThanWorklet(
-        current.sellAmount.toString(),
-        toScaledIntegerWorklet(assetToSell.value.balance.amount, assetToSell.value.decimals)
-      );
-
-      // Skip gas fee recalculation if the user is trying to swap more than their available balance, as it isn't
-      // needed and was previously resulting in errors in useEstimatedGasFee.
-      if (isSwappingMoreThanAvailableBalance) return;
-
-      if (current !== previous) {
-        runOnJS(debouncedStateSet)({
-          assetToBuy: assetToBuy.value,
-          assetToSell: assetToSell.value,
-          chainId: assetToSell.value?.chainId ?? ChainId.mainnet,
-          quote: current,
-        });
-      }
-    }
-  );
-
-  const { data: gasLimit, isFetching } = useSwapEstimatedGasLimit(
-    { chainId: state.chainId, quote: state.quote, assetToSell: state.assetToSell },
-    {
-      enabled: !!state.quote && !!state.assetToSell && !!state.assetToBuy && !('error' in quote),
-    }
-  );
+  const { assetToSell, chainId = ChainId.mainnet, quote } = useSyncedSwapQuoteStore();
+  const { data: estimatedGasLimit, isFetching } = useSwapEstimatedGasLimit({ chainId, assetToSell, quote });
 
-  const estimatedFee = useEstimatedGasFee({ chainId: state.chainId, gasLimit, gasSettings });
+  const estimatedFee = useEstimatedGasFee({ chainId, gasLimit: estimatedGasLimit, gasSettings });
 
   return useMemo(() => ({ isLoading: isFetching, data: estimatedFee }), [estimatedFee, isFetching]);
 }