swap button states

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

@@ -76,11 +76,14 @@ export const GestureHandlerV1Button = React.forwardRef(function GestureHandlerV1
       if (onPressStartWorklet) onPressStartWorklet();
     },
     onActive: () => {
+      console.log('here');
       if (onPressWorklet) onPressWorklet();
       if (onPressJS) runOnJS(onPressJS)();
     },
   });
 
+  console.log({ disabled });
+
   return (
     <ConditionalWrap
       condition={IS_IOS && !disableButtonPressWrapper}

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

@@ -1,12 +1,14 @@
 /* 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 { ButtonPressAnimation } from '@/components/animations';
-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,
@@ -16,13 +18,13 @@ export const SwapActionButton = ({
   icon,
   iconStyle,
   label,
-  onLongPress,
-  onPress,
+  onPressWorklet,
   outline,
   rightIcon,
   scaleTo,
   small,
   style,
+  disabled,
 }: {
   asset: DerivedValue<ExtendedAnimatedAssetWithColors | null>;
   borderRadius?: number;
@@ -31,13 +33,13 @@ export const SwapActionButton = ({
   icon?: string | DerivedValue<string | undefined>;
   iconStyle?: StyleProp<TextStyle>;
   label: string | DerivedValue<string | undefined>;
-  onLongPress?: () => void;
-  onPress?: () => void;
+  onPressWorklet?: () => void;
   outline?: boolean;
   rightIcon?: string;
   scaleTo?: number;
   small?: boolean;
   style?: ViewStyle;
+  disabled?: DerivedValue<boolean | undefined>;
 }) => {
   const { isDarkMode } = useColorMode();
   const fallbackColor = useForegroundColor('label');
@@ -80,6 +82,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 +100,18 @@ export const SwapActionButton = ({
     return rightIcon;
   });
 
+  const buttonAnimatedProps = useAnimatedProps(() => {
+    return {
+      disabled: disabled?.value,
+      scaleTo: disabled?.value ? 1 : scaleTo || (hugContent ? undefined : 0.925),
+    };
+  });
+
   return (
-    <ButtonPressAnimation
-      onLongPress={onLongPress}
-      onPress={onPress}
-      scaleTo={scaleTo || (hugContent ? undefined : 0.925)}
-      style={{
-        ...(hugContent && feedActionButtonStyles.buttonWrapper),
-        ...(style || {}),
-      }}
+    <AnimatedGestureHandlerV1Button
+      animatedProps={buttonAnimatedProps}
+      onPressStartWorklet={onPressWorklet}
+      style={[hugContent && feedActionButtonStyles.buttonWrapper, style]}
     >
       <Box
         as={Animated.View}
@@ -145,7 +151,7 @@ export const SwapActionButton = ({
           )}
         </Columns>
       </Box>
-    </ButtonPressAnimation>
+    </AnimatedGestureHandlerV1Button>
   );
 };
 

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import Animated, { runOnUI, 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, springConfig } 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 { useBottomPanelGestureHandler } from '../hooks/useBottomPanelGestureHandler';
@@ -20,15 +20,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();
 
@@ -44,6 +37,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}>
@@ -74,11 +71,12 @@ export function SwapBottomPanel() {
             </Box>
           </Column>
           <SwapActionButton
-            onPress={() => runOnUI(SwapNavigation.handleSwapAction)()}
+            onPressWorklet={SwapNavigation.handleSwapAction}
             asset={internalSelectedOutputAsset}
-            icon={confirmButtonIcon}
+            icon={icon}
             iconStyle={confirmButtonIconStyle}
-            label={confirmButtonLabel}
+            label={label}
+            disabled={disabled}
             scaleTo={0.9}
           />
         </Columns>

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

@@ -1,22 +1,22 @@
 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, { runOnUI, 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 { useAssetsToSell } from '@/__swaps__/screens/Swap/hooks/useAssetsToSell';
+import { useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
 import { isSameAssetWorklet } from '@/__swaps__/utils/assets';
+import { IS_ANDROID } from '@/env';
 import { AmimatedSwapCoinIcon } from './AnimatedSwapCoinIcon';
 
 function SwapInputActionButton() {
@@ -34,7 +34,7 @@ function SwapInputActionButton() {
       disableShadow={isDarkMode}
       hugContent
       label={label}
-      onPress={runOnUI(SwapNavigation.handleInputPress)}
+      onPressWorklet={SwapNavigation.handleInputPress}
       rightIcon={'􀆏'}
       small
     />

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

@@ -34,7 +34,7 @@ function SwapOutputActionButton() {
       disableShadow={isDarkMode}
       hugContent
       label={label}
-      onPress={runOnUI(SwapNavigation.handleOutputPress)}
+      onPressWorklet={SwapNavigation.handleOutputPress}
       rightIcon={'􀆏'}
       small
     />

src/__swaps__/screens/Swap/providers/swap-provider.tsx

@@ -58,8 +58,13 @@ interface SwapContextType {
   SwapNavigation: ReturnType<typeof useSwapNavigation>;
   SwapWarning: ReturnType<typeof useSwapWarning>;
 
-  confirmButtonIcon: Readonly<SharedValue<string>>;
-  confirmButtonLabel: Readonly<SharedValue<string>>;
+  confirmButtonProps: Readonly<
+    SharedValue<{
+      label: string;
+      icon?: string;
+      disabled?: boolean;
+    }>
+  >;
   confirmButtonIconStyle: StyleProp<TextStyle>;
 }
 
@@ -244,53 +249,34 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
     runOnUI(updateAssetValue)({ type, asset: parseAssetAndExtend({ asset }) });
   };
 
-  const confirmButtonIcon = useDerivedValue(() => {
+  const confirmButtonProps = useDerivedValue(() => {
     if (configProgress.value === NavigationSteps.SHOW_REVIEW) {
-      return '􀎽';
-    } else if (configProgress.value === NavigationSteps.SHOW_GAS) {
-      return '􀆅';
+      return { icon: '􀎽', label: 'Hold to Swap', disabled: false };
+    }
+
+    if (configProgress.value === NavigationSteps.SHOW_GAS) {
+      return { icon: '􀆅', label: 'Save', disabled: false };
     }
 
     if (isFetching.value) {
-      return '';
+      return { label: 'Fetching...', disabled: true };
     }
 
+    const hasSelectedAssets = internalSelectedInputAsset.value && internalSelectedOutputAsset.value;
+    if (!hasSelectedAssets) return { label: 'Select Token', disabled: true };
+
     const isInputZero = Number(SwapInputController.inputValues.value.inputAmount) === 0;
     const isOutputZero = Number(SwapInputController.inputValues.value.outputAmount) === 0;
 
-    if (SwapInputController.inputMethod.value !== 'slider' && (isInputZero || isOutputZero) && !isFetching.value) {
-      return '';
-    } else if (SwapInputController.inputMethod.value === 'slider' && SwapInputController.percentageToSwap.value === 0) {
-      return '';
-    } else {
-      return '􀕹';
+    if (SwapInputController.percentageToSwap.value === 0 || isInputZero || isOutputZero) {
+      return { label: 'Enter Amount', disabled: true };
     }
-  });
 
-  const confirmButtonLabel = useDerivedValue(() => {
-    if (configProgress.value === NavigationSteps.SHOW_REVIEW) {
-      return 'Hold to Swap';
-    } else if (configProgress.value === NavigationSteps.SHOW_GAS) {
-      return 'Save';
-    }
+    if (quote.value && 'error' in quote.value) return { label: 'Error', disabled: true };
 
-    if (isFetching.value) {
-      return 'Fetching prices';
-    }
-
-    const isInputZero = Number(SwapInputController.inputValues.value.inputAmount) === 0;
-    const isOutputZero = Number(SwapInputController.inputValues.value.outputAmount) === 0;
+    // TODO: after the tx is built, we should check if the user has enough balance to cover the tx
 
-    if (SwapInputController.inputMethod.value !== 'slider' && (isInputZero || isOutputZero) && !isFetching.value) {
-      return 'Enter Amount';
-    } else if (
-      SwapInputController.inputMethod.value === 'slider' &&
-      (SwapInputController.percentageToSwap.value === 0 || isInputZero || isOutputZero)
-    ) {
-      return 'Enter Amount';
-    } else {
-      return 'Review';
-    }
+    return { icon: '􀕹', label: 'Review', disabled: false };
   });
 
   const confirmButtonIconStyle = useAnimatedStyle(() => {
@@ -356,8 +342,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
         SwapNavigation,
         SwapWarning,
 
-        confirmButtonIcon,
-        confirmButtonLabel,
+        confirmButtonProps,
         confirmButtonIconStyle,
       }}
     >