fix: present hw pairing sheet during swap (#6275)

rainbow-me · Dec 3, 2024 · e30b444 · e30b444
1 parent f9217b7
commit e30b444
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/src/__swaps__/screens/Swap/components/SwapBottomPanel.tsx b/src/__swaps__/screens/Swap/components/SwapBottomPanel.tsx
@@ -2,10 +2,18 @@ import { LIGHT_SEPARATOR_COLOR, SEPARATOR_COLOR, THICK_BORDER_WIDTH } from '@/__
 import { NavigationSteps, useSwapContext } from '@/__swaps__/screens/Swap/providers/swap-provider';
 import { opacity } from '@/__swaps__/utils/swaps';
 import { Box, Separator, globalColors, useColorMode } from '@/design-system';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import { PanGestureHandler } from 'react-native-gesture-handler';
-import Animated, { Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
 import { triggerHaptics } from 'react-native-turbo-haptics';
 import { useBottomPanelGestureHandler } from '../hooks/useBottomPanelGestureHandler';
 import { GasButton } from './GasButton';
@@ -14,6 +22,10 @@ import { ReviewPanel } from './ReviewPanel';
 import { SwapActionButton } from './SwapActionButton';
 import { SettingsPanel } from './SettingsPanel';
 import { SPRING_CONFIGS } from '@/components/animations/animationConfigs';
+import { useWallets } from '@/hooks';
+import { useNavigation } from '@/navigation';
+import Routes from '@/navigation/routesNames';
+import { logger, RainbowError } from '@/logger';
 
 const HOLD_TO_SWAP_DURATION_MS = 400;
 
@@ -56,6 +68,24 @@ export function SwapBottomPanel() {
   const opacity = useDerivedValue(() => confirmButtonProps.value.opacity);
   const type = useDerivedValue(() => confirmButtonProps.value.type);
 
+  const { isHardwareWallet } = useWallets();
+  const { navigate } = useNavigation();
+  const handleHwConnectionAndSwap = useCallback(() => {
+    try {
+      if (isHardwareWallet && configProgress.value === NavigationSteps.SHOW_REVIEW) {
+        navigate(Routes.HARDWARE_WALLET_TX_NAVIGATOR, {
+          submit: SwapNavigation.handleSwapAction,
+        });
+      } else {
+        SwapNavigation.handleSwapAction();
+      }
+    } catch (e) {
+      logger.error(new RainbowError('[SwapBottomPanel.tsx]: handleHwConnectionAndSwap Error: '), {
+        message: (e as Error).message,
+      });
+    }
+  }, [configProgress.value, navigate, isHardwareWallet, SwapNavigation]);
+
   return (
     <PanGestureHandler maxPointers={1} onGestureEvent={swipeToDismissGestureHandler}>
       <Animated.View
@@ -102,7 +132,7 @@ export function SwapBottomPanel() {
               onPressWorklet={() => {
                 'worklet';
                 if (type.value !== 'hold') {
-                  SwapNavigation.handleSwapAction();
+                  runOnJS(handleHwConnectionAndSwap)();
                 }
               }}
               onLongPressEndWorklet={success => {
@@ -116,7 +146,7 @@ export function SwapBottomPanel() {
                 'worklet';
                 if (type.value === 'hold') {
                   triggerHaptics('notificationSuccess');
-                  SwapNavigation.handleSwapAction();
+                  runOnJS(handleHwConnectionAndSwap)();
                 }
               }}
               onPressStartWorklet={() => {

diff --git a/src/__swaps__/screens/Swap/providers/swap-provider.tsx b/src/__swaps__/screens/Swap/providers/swap-provider.tsx
@@ -238,6 +238,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
           },
         },
       });
+      const isHardwareWallet = wallet instanceof LedgerSigner;
 
       if (!wallet) {
         isSwapping.value = false;
@@ -306,7 +307,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
           degenMode: isDegenModeEnabled,
           isSwappingToPopularAsset,
           errorMessage,
-          isHardwareWallet: wallet instanceof LedgerSigner,
+          isHardwareWallet,
         });
 
         if (errorMessage !== 'handled') {
@@ -338,7 +339,12 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
       performanceTracking.getState().executeFn({
         fn: () => {
           const { routes, index } = Navigation.getState();
-          if (index === 0 || routes[index - 1].name === Routes.EXPANDED_ASSET_SHEET) {
+          const activeRoute = Navigation.getActiveRoute();
+          if (
+            index === 0 ||
+            routes[index - 1].name === Routes.EXPANDED_ASSET_SHEET ||
+            activeRoute.name === Routes.PAIR_HARDWARE_WALLET_AGAIN_SHEET
+          ) {
             Navigation.handleAction(Routes.WALLET_SCREEN, {});
           } else {
             Navigation.goBack();
@@ -372,7 +378,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
         tradeAmountUSD: parameters.quote.tradeAmountUSD,
         degenMode: isDegenModeEnabled,
         isSwappingToPopularAsset,
-        isHardwareWallet: wallet instanceof LedgerSigner,
+        isHardwareWallet,
       });
     } catch (error) {
       isSwapping.value = false;