Improve hold to press reliability (#5967)

* Improve hold to press reliability * Fix isFetching || isLoadingGas condition * Remove need to cast button types
rainbow-me · Jul 30, 2024 · 552a660 · 552a660
1 parent 8c7edd9
commit 552a660
Showing 1 changed file with 24 additions and 21 deletions.
diff --git a/src/__swaps__/screens/Swap/providers/swap-provider.tsx b/src/__swaps__/screens/Swap/providers/swap-provider.tsx
@@ -111,15 +111,13 @@ interface SwapContextType {
   SwapNavigation: ReturnType<typeof useSwapNavigation>;
   SwapWarning: ReturnType<typeof useSwapWarning>;
 
-  confirmButtonProps: Readonly<
-    SharedValue<{
-      label: string;
-      icon?: string;
-      disabled?: boolean;
-      opacity?: number;
-      type?: 'tap' | 'hold';
-    }>
-  >;
+  confirmButtonProps: DerivedValue<{
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    opacity?: number;
+    type: 'tap' | 'hold';
+  }>;
   confirmButtonIconStyle: StyleProp<TextStyle>;
 
   hasEnoughFundsForGas: SharedValue<boolean | undefined>;
@@ -628,22 +626,22 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
     }
   );
 
-  const confirmButtonProps = useDerivedValue(() => {
+  const confirmButtonProps: SwapContextType['confirmButtonProps'] = useDerivedValue(() => {
     if (isSwapping.value) {
-      return { label: swapping, disabled: true };
+      return { label: swapping, disabled: true, type: 'hold' };
     }
 
     if (configProgress.value === NavigationSteps.SHOW_GAS) {
-      return { label: done, disabled: false };
+      return { label: done, disabled: false, type: 'tap' };
     }
 
     if (configProgress.value === NavigationSteps.SHOW_SETTINGS) {
-      return { label: done, disabled: false };
+      return { label: done, disabled: false, type: 'tap' };
     }
 
     const hasSelectedAssets = internalSelectedInputAsset.value && internalSelectedOutputAsset.value;
     if (!hasSelectedAssets) {
-      return { label: selectToken, disabled: true };
+      return { label: selectToken, disabled: true, type: 'hold' };
     }
 
     const isInputZero = equalWorklet(SwapInputController.inputValues.value.inputAmount, 0);
@@ -654,51 +652,56 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
     const userHasNotMovedSlider = SwapInputController.inputMethod.value === 'slider' && SwapInputController.percentageToSwap.value === 0;
 
     if (userHasNotEnteredAmount || userHasNotMovedSlider) {
-      return { label: enterAmount, disabled: true, opacity: 1 };
+      return { label: enterAmount, disabled: true, opacity: 1, type: 'hold' };
     }
 
     if (
       [SwapWarningType.no_quote_available, SwapWarningType.no_route_found, SwapWarningType.insufficient_liquidity].includes(
         SwapWarning.swapWarning.value.type
       )
     ) {
-      return { icon: '􀕹', label: review, disabled: true };
+      return { icon: '􀕹', label: review, disabled: true, type: 'hold' };
     }
 
     const sellAsset = internalSelectedInputAsset.value;
     const enoughFundsForSwap =
       sellAsset && lessThanOrEqualToWorklet(SwapInputController.inputValues.value.inputAmount, sellAsset.maxSwappableAmount);
 
     if (!enoughFundsForSwap) {
-      return { label: insufficientFunds, disabled: true };
+      return { label: insufficientFunds, disabled: true, type: 'hold' };
     }
 
     const isQuoteError = quote.value && 'error' in quote.value;
     const isLoadingGas = !isQuoteError && hasEnoughFundsForGas.value === undefined;
     const isReviewSheetOpen = configProgress.value === NavigationSteps.SHOW_REVIEW || SwapSettings.degenMode.value;
 
     if ((isFetching.value || isLoadingGas) && !isQuoteError) {
-      return { label: fetchingPrices, disabled: (isReviewSheetOpen && isFetching.value) || !quote.value };
+      const disabled = (isReviewSheetOpen && (isFetching.value || isLoadingGas)) || !quote.value;
+      const buttonType = isReviewSheetOpen ? 'hold' : 'tap';
+      return { label: fetchingPrices, disabled, type: buttonType };
     }
 
+    const reviewLabel = SwapSettings.degenMode.value ? holdToSwap : review;
+
     if (isQuoteError) {
       const icon = isReviewSheetOpen ? undefined : '􀕹';
-      return { icon, label: isReviewSheetOpen ? quoteError : review, disabled: true };
+      return { icon, label: isReviewSheetOpen ? quoteError : reviewLabel, disabled: true, type: 'hold' };
     }
 
     if (!hasEnoughFundsForGas.value) {
       const nativeCurrency = RainbowNetworkByChainId[sellAsset?.chainId || ChainId.mainnet].nativeCurrency;
       return {
         label: `${insufficient} ${nativeCurrency.symbol}`,
         disabled: true,
+        type: 'hold',
       };
     }
 
     if (isReviewSheetOpen) {
-      return { icon: '􀎽', label: holdToSwap, disabled: false, type: 'hold' as const };
+      return { icon: '􀎽', label: holdToSwap, disabled: false, type: 'hold' };
     }
 
-    return { icon: '􀕹', label: review, disabled: false };
+    return { icon: '􀕹', label: reviewLabel, disabled: false, type: 'tap' };
   });
 
   const confirmButtonIconStyle = useAnimatedStyle(() => {