feat: Add clear confirmation on back swipe for transfer confirmations

app/components/Views/confirmations/components/info/transfer/transfer.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { transferConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import useClearConfirmationOnBackSwipe from '../../../hooks/ui/useClearConfirmationOnBackSwipe';
 import { useConfirmActions } from '../../../hooks/useConfirmActions';
 import { useConfirmationMetricEvents } from '../../../hooks/metrics/useConfirmationMetricEvents';
 import { getNavbar } from '../../UI/navbar/navbar';
@@ -34,6 +35,11 @@ jest.mock('../../../hooks/metrics/useConfirmationMetricEvents', () => ({
   useConfirmationMetricEvents: jest.fn(),
 }));
 
+jest.mock('../../../hooks/ui/useClearConfirmationOnBackSwipe', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
 const noop = () => undefined;
 jest.mock('@react-navigation/native', () => {
   const actualNav = jest.requireActual('@react-navigation/native');
@@ -48,6 +54,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('Transfer', () => {
+  const mockUseClearConfirmationOnBackSwipe = jest.mocked(useClearConfirmationOnBackSwipe);
   const mockTrackPageViewedEvent = jest.fn();
   const mockUseConfirmActions = jest.mocked(useConfirmActions);
   const mockUseConfirmationMetricEvents = jest.mocked(
@@ -77,6 +84,7 @@ describe('Transfer', () => {
       state: transferConfirmationState,
     });
 
+    expect(mockUseClearConfirmationOnBackSwipe).toHaveBeenCalled();
     expect(getByText('0xDc477...0c164')).toBeDefined();
     expect(getByText('Network Fee')).toBeDefined();
     expect(getNavbar).toHaveBeenCalled();

app/components/Views/confirmations/components/info/transfer/transfer.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 import { strings } from '../../../../../../../locales/i18n';
 import { useStyles } from '../../../../../../component-library/hooks';
 import { SimulationDetails } from '../../../../../UI/SimulationDetails/SimulationDetails';
+import useClearConfirmationOnBackSwipe from '../../../hooks/ui/useClearConfirmationOnBackSwipe';
 import { useConfirmationMetricEvents } from '../../../hooks/metrics/useConfirmationMetricEvents';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import useNavbar from '../../../hooks/ui/useNavbar';
@@ -17,6 +18,7 @@ const Transfer = () => {
   const { styles } = useStyles(styleSheet, {});
   const { trackPageViewedEvent } = useConfirmationMetricEvents();
 
+  useClearConfirmationOnBackSwipe();
   useNavbar(strings('confirm.review'));
 
   useEffect(trackPageViewedEvent, [trackPageViewedEvent]);

app/components/Views/confirmations/hooks/ui/useClearConfirmationOnBackSwipe.test.ts

@@ -2,8 +2,9 @@ import { renderHook } from '@testing-library/react-hooks';
 import { useNavigation } from '@react-navigation/native';
 import { BackHandler } from 'react-native';
 import Device from '../../../../../util/device';
-import useClearConfirmationOnBackSwipe from './useClearConfirmationOnBackSwipe';
 import { useConfirmActions } from '../useConfirmActions';
+import { useStandaloneConfirmation } from './useStandaloneConfirmation';
+import useClearConfirmationOnBackSwipe from './useClearConfirmationOnBackSwipe';
 
 jest.mock('@react-navigation/native', () => ({
   useNavigation: jest.fn(),
@@ -18,6 +19,10 @@ jest.mock('../../../../../util/device', () => ({
   isAndroid: jest.fn(),
 }));
 
+jest.mock('./useStandaloneConfirmation', () => ({
+  useStandaloneConfirmation: jest.fn(),
+}));
+
 describe('useClearConfirmationOnBackSwipe', () => {
   const mockUnsubscribe = jest.fn();
   const mockAddListener = jest.fn().mockReturnValue(mockUnsubscribe);
@@ -40,35 +45,52 @@ describe('useClearConfirmationOnBackSwipe', () => {
     });
   });
 
+  it('does not set up back handler if confirmation is not standalone', () => {
+    (useStandaloneConfirmation as jest.Mock).mockReturnValue({
+      isStandaloneConfirmation: false,
+    });
+
+    renderHook(() => useClearConfirmationOnBackSwipe());
+
+    expect(mockAddListener).not.toHaveBeenCalled();
+    expect(mockOnReject).not.toHaveBeenCalled();
+  });
+
   describe('iOS behavior', () => {
     beforeEach(() => {
       (Device.isIos as jest.Mock).mockReturnValue(true);
       (Device.isAndroid as jest.Mock).mockReturnValue(false);
+      (useStandaloneConfirmation as jest.Mock).mockReturnValue({
+        isStandaloneConfirmation: true,
+      });
     });
 
-    it('should add a gestureEnd listener when mounted', () => {
+    it('adds a gestureEnd listener when mounted', () => {
       renderHook(() => useClearConfirmationOnBackSwipe());
 
       expect(mockAddListener).toHaveBeenCalledTimes(1);
-      expect(mockAddListener).toHaveBeenCalledWith('gestureEnd', expect.any(Function));
+      expect(mockAddListener).toHaveBeenCalledWith(
+        'gestureEnd',
+        expect.any(Function),
+      );
     });
 
-    it('should call onReject when gestureEnd event is triggered', () => {
+    it('calls onReject when gestureEnd event is triggered', () => {
       renderHook(() => useClearConfirmationOnBackSwipe());
       const gestureEndCallback = mockAddListener.mock.calls[0][1];
       gestureEndCallback();
 
       expect(mockOnReject).toHaveBeenCalledTimes(1);
     });
 
-    it('should call unsubscribe when unmounted', () => {
+    it('calls unsubscribe when unmounted', () => {
       const { unmount } = renderHook(() => useClearConfirmationOnBackSwipe());
       unmount();
 
       expect(mockUnsubscribe).toHaveBeenCalledTimes(1);
     });
 
-    it('should not set up Android back handler', () => {
+    it('does not set up Android back handler', () => {
       renderHook(() => useClearConfirmationOnBackSwipe());
 
       expect(BackHandler.addEventListener).not.toHaveBeenCalled();
@@ -79,34 +101,38 @@ describe('useClearConfirmationOnBackSwipe', () => {
     beforeEach(() => {
       (Device.isIos as jest.Mock).mockReturnValue(false);
       (Device.isAndroid as jest.Mock).mockReturnValue(true);
+      (useStandaloneConfirmation as jest.Mock).mockReturnValue({
+        isStandaloneConfirmation: true,
+      });
     });
 
-    it('should add a hardware back press listener when mounted', () => {
+    it('adds a hardware back press listener when mounted', () => {
       renderHook(() => useClearConfirmationOnBackSwipe());
 
       expect(BackHandler.addEventListener).toHaveBeenCalledWith(
         'hardwareBackPress',
-        expect.any(Function)
+        expect.any(Function),
       );
     });
 
-    it('should call onReject when hardware back press is triggered', () => {
+    it('calls onReject when hardware back press is triggered', () => {
       renderHook(() => useClearConfirmationOnBackSwipe());
-      const backHandlerCallback = (BackHandler.addEventListener as jest.Mock).mock.calls[0][1];
+      const backHandlerCallback = (BackHandler.addEventListener as jest.Mock)
+        .mock.calls[0][1];
       const result = backHandlerCallback();
 
       expect(mockOnReject).toHaveBeenCalledTimes(1);
       expect(result).toBe(true);
     });
 
-    it('should remove back handler listener when unmounted', () => {
+    it('removes back handler listener when unmounted', () => {
       const { unmount } = renderHook(() => useClearConfirmationOnBackSwipe());
       unmount();
 
       expect(mockBackHandlerRemove).toHaveBeenCalledTimes(1);
     });
 
-    it('should not set up iOS gesture listener', () => {
+    it('does not set up iOS gesture listener', () => {
       renderHook(() => useClearConfirmationOnBackSwipe());
 
       expect(mockAddListener).not.toHaveBeenCalled();

app/components/Views/confirmations/hooks/ui/useClearConfirmationOnBackSwipe.ts

@@ -5,36 +5,39 @@ import { BackHandler } from 'react-native';
 import Device from '../../../../../util/device';
 import { StakeNavigationParamsList } from '../../../../UI/Stake/types';
 import { useConfirmActions } from '../useConfirmActions';
+import { useStandaloneConfirmation } from './useStandaloneConfirmation';
 
 const useClearConfirmationOnBackSwipe = () => {
-  const navigation = useNavigation<StackNavigationProp<StakeNavigationParamsList>>();
+  const navigation =
+    useNavigation<StackNavigationProp<StakeNavigationParamsList>>();
+  const { isStandaloneConfirmation } = useStandaloneConfirmation();
   const { onReject } = useConfirmActions();
 
   useEffect(() => {
-    if (Device.isIos()) {
+    if (isStandaloneConfirmation && Device.isIos()) {
       const unsubscribe = navigation.addListener('gestureEnd', () => {
         onReject();
       });
 
-    return unsubscribe;
+      return unsubscribe;
     }
-  }, [navigation, onReject]);
+  }, [isStandaloneConfirmation, navigation, onReject]);
 
   useEffect(() => {
-    if (Device.isAndroid()) {
+    if (isStandaloneConfirmation && Device.isAndroid()) {
       const backHandlerSubscription = BackHandler.addEventListener(
         'hardwareBackPress',
         () => {
           onReject();
           return true;
-        }
+        },
       );
 
       return () => {
         backHandlerSubscription.remove();
       };
     }
-  }, [onReject]);
+  }, [isStandaloneConfirmation, onReject]);
 };
 
 export default useClearConfirmationOnBackSwipe;