swap button states (#5785)

* wip * fix gesture button states * Safemath pt 2 (#5778) * add more fns * accept string or number * update errors * fix dynamic island overlap on recieve modal (#5672) * . * oop * oop * okay ty ben * change background opacity to 1 * . * oop * . * Gas optimizations (#5779) * perf * ✨ * useWhyDidYouUpdate * EstimatedSwapGasFee * keepPreviousData * AnimatedText * isSameAddress * fix other networks section (#5784) * Swaps: fix favorite button press (#5782) * fix * android fix * todo * remove console logs * Insufficient Funds * remove todo * move cache getter closer to fetcher implentation * fix * :) * 🍕 * or equal 🤌 * remove unused isSameAddress util * just reordering declarations * error i18n * useGasSharedValues * remove estimating * fix label flickering * fix review panel not prompting * Revert "Lint on pre-commit (#5836)" This reverts commit d56ed46. * fix a bunch of shit --------- Co-authored-by: Matthew Wall <[email protected]> Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: brdy <[email protected]> Co-authored-by: Ben Goldberg <[email protected]>
rainbow-me · Jun 14, 2024 · fc0ff05 · fc0ff05
1 parent e7a70ed
commit fc0ff05
Show file tree

Hide file tree

Showing 13 changed files with 292 additions and 169 deletions.
diff --git a/src/__swaps__/screens/Swap/components/GestureHandlerV1Button.tsx b/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>;

diff --git a/src/__swaps__/screens/Swap/components/SwapActionButton.tsx b/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 { StyleProp, StyleSheet, TextStyle, ViewProps, ViewStyle } from 'react-native';
+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,20 @@ export const SwapActionButton = ({
     return rightIcon;
   });
 
+  const buttonAnimatedProps = useAnimatedProps(() => {
+    return {
+      pointerEvents: (disabled?.value ? 'none' : 'box-only') as ViewProps['pointerEvents'],
+      disableButtonPressWrapper: disabled?.value,
+      scaleTo: 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 +151,7 @@ export const SwapActionButton = ({
           )}
         </Columns>
       </Box>
-    </GestureHandlerV1Button>
+    </AnimatedGestureHandlerV1Button>
   );
 };
 

diff --git a/src/__swaps__/screens/Swap/components/SwapBottomPanel.tsx b/src/__swaps__/screens/Swap/components/SwapBottomPanel.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
 import { PanGestureHandler } from 'react-native-gesture-handler';
-import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';
 
 import { Box, Column, Columns, Separator, globalColors, useColorMode } from '@/design-system';
 import { safeAreaInsetValues } from '@/utils';
@@ -21,15 +21,8 @@ import { SwapActionButton } from './SwapActionButton';
 
 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>

diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/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';
 

diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/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);

diff --git a/src/__swaps__/screens/Swap/hooks/useEstimatedGasFee.ts b/src/__swaps__/screens/Swap/hooks/useEstimatedGasFee.ts
@@ -1,13 +1,11 @@
-import { greaterThanWorklet, toScaledIntegerWorklet } from '@/__swaps__/safe-math/SafeMath';
 import { ChainId } from '@/__swaps__/types/chains';
 import { weiToGwei } from '@/__swaps__/utils/ethereum';
 import { add, convertAmountToNativeDisplayWorklet, formatNumber, multiply } from '@/__swaps__/utils/numbers';
 import ethereumUtils, { useNativeAssetForNetwork } from '@/utils/ethereumUtils';
-import { useMemo, useState } from 'react';
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
-import { useDebouncedCallback } from 'use-debounce';
+import { useMemo } from 'react';
 import { formatUnits } from 'viem';
-import { useSwapContext } from '../providers/swap-provider';
+
+import { useSyncedSwapQuoteStore } from '../providers/SyncSwapStateAndSharedValues';
 import { GasSettings } from './useCustomGas';
 import { useSwapEstimatedGasLimit } from './useSwapEstimatedGasLimit';
 import { useAccountSettings } from '@/hooks';
@@ -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,
@@ -36,66 +39,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 convertAmountToNativeDisplayWorklet(feeInUserCurrency, nativeCurrency);
   }, [gasLimit, gasSettings, nativeCurrency, 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]);
 }