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,7 @@ export const SwapActionButton = ({
   scaleTo,
   small,
   style,
+  disabled,
 }: {
   asset: DerivedValue<ExtendedAnimatedAssetWithColors | null>;
   borderRadius?: number;
@@ -38,6 +41,7 @@ export const SwapActionButton = ({
   scaleTo?: number;
   small?: boolean;
   style?: ViewStyle;
+  disabled?: DerivedValue<boolean | undefined>;
 }) => {
   const { isDarkMode } = useColorMode();
   const fallbackColor = useForegroundColor('label');
@@ -80,6 +84,7 @@ export const SwapActionButton = ({
       },
       shadowOpacity: isDarkMode ? 0.2 : small ? 0.2 : 0.36,
       shadowRadius: isDarkMode ? 26 : small ? 9 : 15,
+      opacity: disabled?.value ? 0.6 : 1,
     };
   });
 
@@ -97,15 +102,20 @@ 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}
+      style={[hugContent && feedActionButtonStyles.buttonWrapper, style]}
       scaleTo={scaleTo || (hugContent ? undefined : 0.925)}
-      style={{
-        ...(hugContent && feedActionButtonStyles.buttonWrapper),
-        ...(style || {}),
-      }}
     >
       <Box
         as={Animated.View}
@@ -138,7 +148,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,10 @@ export function SwapBottomPanel() {
     };
   });
 
+  const icon = useDerivedValue(() => confirmButtonProps.value.icon);
+  const label = useDerivedValue(() => confirmButtonProps.value.label);
+  const disabled = useDerivedValue(() => confirmButtonProps.value.disabled);
+
   return (
     // @ts-expect-error Property 'children' does not exist on type
     <PanGestureHandler maxPointers={1} onGestureEvent={swipeToDismissGestureHandler}>
@@ -80,11 +77,12 @@ 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}
             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/useEstimatedGasFee.ts

@@ -1,16 +1,19 @@
+import { greaterThanWorklet, toScaledIntegerWorklet } from '@/__swaps__/safe-math/SafeMath';
 import { ChainId } from '@/__swaps__/types/chains';
 import { weiToGwei } from '@/__swaps__/utils/ethereum';
-import { add, multiply } from '@/__swaps__/utils/numbers';
+import { add, lessThan, multiply } from '@/__swaps__/utils/numbers';
 import ethereumUtils, { useNativeAssetForNetwork } from '@/utils/ethereumUtils';
-import { useMemo, useState } from 'react';
+import { isSameAddress } from '@/utils/isSameAddress';
+import { CrosschainQuote, Quote, QuoteError } from '@rainbow-me/swaps';
+import { useEffect, useMemo, useState } from 'react';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { useDebouncedCallback } from 'use-debounce';
 import { formatUnits } from 'viem';
+import { useSwapContext } from '../providers/swap-provider';
+import { getUserNativeNetworkAsset } from '../resources/assets/userAssets';
 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 +23,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,20 +43,68 @@ 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]);
 }
 
+const getUserHasEnoughFundsForTx = (quote: Quote, gasFee: string) => {
+  const nativeAsset = getUserNativeNetworkAsset(quote.chainId);
+  if (!nativeAsset) return false;
+  const userBalance = nativeAsset.balance.amount || '0';
+
+  const nativeAmountSelling = isSameAddress(nativeAsset.address, quote.sellTokenAddress) ? quote.sellAmount.toString() : '0';
+  const totalNativeSpentInTx = formatUnits(
+    safeBigInt(add(add(quote.value?.toString() || '0', gasFee), nativeAmountSelling)),
+    nativeAsset.decimals
+  );
+
+  return lessThan(totalNativeSpentInTx, userBalance);
+};
+
+function useSyncSwapTransactionSharedValues({
+  quote,
+  gasSettings,
+  estimatedGasLimit,
+}: {
+  quote: Quote | CrosschainQuote | QuoteError | null;
+  gasSettings: GasSettings | undefined;
+  estimatedGasLimit: string | undefined;
+}) {
+  const {
+    estimatedGasLimit: estimatedGasLimitSharedValue,
+    gasSettings: gasSettingsSharedValue,
+    userHasEnoughFundsForTx,
+  } = useSwapContext();
+
+  useEffect(() => {
+    if (!gasSettings || !estimatedGasLimit || !quote || 'error' in quote) {
+      estimatedGasLimitSharedValue.value = undefined;
+      gasSettingsSharedValue.value = undefined;
+      return;
+    }
+
+    estimatedGasLimitSharedValue.value = estimatedGasLimit;
+    gasSettingsSharedValue.value = gasSettings;
+
+    const gasFee = calculateGasFee(gasSettings, estimatedGasLimit);
+
+    userHasEnoughFundsForTx.value = getUserHasEnoughFundsForTx(quote, gasFee);
+
+    return () => {
+      estimatedGasLimitSharedValue.value = undefined;
+      gasSettingsSharedValue.value = undefined;
+    };
+  }, [estimatedGasLimitSharedValue, estimatedGasLimit, gasSettings, gasSettingsSharedValue, userHasEnoughFundsForTx, quote]);
+}
+
 export function useSwapEstimatedGasFee(gasSettings: GasSettings | undefined) {
   const { internalSelectedInputAsset: assetToSell, internalSelectedOutputAsset: assetToBuy, quote } = useSwapContext();
 
@@ -65,7 +121,7 @@ export function useSwapEstimatedGasFee(gasSettings: GasSettings | undefined) {
   useAnimatedReaction(
     () => quote.value,
     (current, previous) => {
-      if (!assetToSell.value || !assetToBuy.value || !current || !previous || 'error' in current) return;
+      if (!assetToSell.value || !assetToBuy.value || !current || 'error' in current) return;
 
       const isSwappingMoreThanAvailableBalance = greaterThanWorklet(
         current.sellAmount.toString(),
@@ -76,7 +132,7 @@ export function useSwapEstimatedGasFee(gasSettings: GasSettings | undefined) {
       // needed and was previously resulting in errors in useEstimatedGasFee.
       if (isSwappingMoreThanAvailableBalance) return;
 
-      if (current !== previous) {
+      if (!previous || current !== previous) {
         runOnJS(debouncedStateSet)({
           assetToBuy: assetToBuy.value,
           assetToSell: assetToSell.value,
@@ -87,14 +143,16 @@ export function useSwapEstimatedGasFee(gasSettings: GasSettings | undefined) {
     }
   );
 
-  const { data: gasLimit, isFetching } = useSwapEstimatedGasLimit(
+  const { data: estimatedGasLimit, isFetching } = useSwapEstimatedGasLimit(
     { chainId: state.chainId, quote: state.quote, assetToSell: state.assetToSell },
     {
       enabled: !!state.quote && !!state.assetToSell && !!state.assetToBuy && !('error' in quote),
     }
   );
 
-  const estimatedFee = useEstimatedGasFee({ chainId: state.chainId, gasLimit, gasSettings });
+  useSyncSwapTransactionSharedValues({ quote: state.quote, gasSettings, estimatedGasLimit });
+
+  const estimatedFee = useEstimatedGasFee({ chainId: state.chainId, gasLimit: estimatedGasLimit, gasSettings });
 
   return useMemo(() => ({ isLoading: isFetching, data: estimatedFee }), [estimatedFee, isFetching]);
 }

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

@@ -103,3 +103,7 @@ export function useSwapEstimatedGasLimit(
     }
   );
 }
+
+export const getSwapEstimatedGasLimitCachedData = (args: EstimateSwapGasLimitArgs) => {
+  return queryClient.getQueryData<EstimateSwapGasLimitResult>(estimateSwapGasLimitQueryKey(args));
+};