feat(suite-native): send review cancelation dialog

trezor · Sep 27, 2024 · 2d4271f · 2d4271f
1 parent 3c68b56
commit 2d4271f
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 58 deletions.
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -898,6 +898,10 @@ export const en = {
         },
         review: {
             confirmOnDeviceMessage: 'Go to your Trezor and confirm the amounts & recipients.',
+            cancelAlert: {
+                title: 'Are you sure you’d like to cancel sending the transaction?',
+                continueButton: 'Continue editing',
+            },
             address: {
                 title: 'Check the address on your Trezor against the original to make sure it’s correct.',
                 step1: 'Go to the app or place where you originally got the address.',

diff --git a/suite-native/module-send/package.json b/suite-native/module-send/package.json
@@ -37,7 +37,6 @@
         "@suite-native/navigation": "workspace:*",
         "@suite-native/qr-code": "workspace:*",
         "@suite-native/settings": "workspace:*",
-        "@suite-native/toasts": "workspace:*",
         "@trezor/react-utils": "workspace:*",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",

diff --git a/suite-native/module-send/src/components/AddressReviewStepList.tsx b/suite-native/module-send/src/components/AddressReviewStepList.tsx
@@ -15,7 +15,6 @@ import {
 } from '@suite-native/navigation';
 import { Button, VStack } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
-import { useToast } from '@suite-native/toasts';
 import { AccountsRootState, DeviceRootState, SendRootState } from '@suite-common/wallet-core';
 import { nativeSpacings } from '@trezor/theme';
 
@@ -40,7 +39,6 @@ type NavigationProps = StackToStackCompositeNavigationProps<
 export const AddressReviewStepList = () => {
     const route = useRoute<RouteProps>();
     const navigation = useNavigation<NavigationProps>();
-    const { showToast } = useToast();
     const dispatch = useDispatch();
 
     const [childHeights, setChildHeights] = useState<number[]>([]);
@@ -83,13 +81,6 @@ export const AddressReviewStepList = () => {
             );
 
             if (isRejected(response)) {
-                // TODO: display error message based on the error code
-                showToast({
-                    variant: 'error',
-                    message: 'Something went wrong',
-                    icon: 'closeCircle',
-                });
-
                 navigation.navigate(RootStackRoutes.AccountDetail, {
                     accountKey,
                     closeActionType: 'back',

diff --git a/suite-native/module-send/src/components/CryptoAmountInput.tsx b/suite-native/module-send/src/components/CryptoAmountInput.tsx
@@ -11,7 +11,7 @@ import { Color } from '@trezor/theme';
 import { useDebounce } from '@trezor/react-utils';
 
 import { SendAmountInputProps } from '../types';
-import { useSendAmountTransformers } from '../useSendAmountTransformers';
+import { useSendAmountTransformers } from '../hooks/useSendAmountTransformers';
 import { getOutputFieldName } from '../utils';
 
 export const sendAmountInputWrapperStyle = prepareNativeStyle<{ isDisabled: boolean }>(

diff --git a/suite-native/module-send/src/components/FiatAmountInput.tsx b/suite-native/module-send/src/components/FiatAmountInput.tsx
@@ -10,7 +10,7 @@ import { selectFiatCurrencyCode } from '@suite-native/settings';
 
 import { SendAmountCurrencyLabelWrapper, sendAmountInputWrapperStyle } from './CryptoAmountInput';
 import { SendAmountInputProps } from '../types';
-import { useSendAmountTransformers } from '../useSendAmountTransformers';
+import { useSendAmountTransformers } from '../hooks/useSendAmountTransformers';
 import { getOutputFieldName } from '../utils';
 
 export const FiatAmountInput = ({

diff --git a/...ule-send/src/useSendAmountTransformers.ts → ...nd/src/hooks/useSendAmountTransformers.ts b/...ule-send/src/useSendAmountTransformers.ts → ...nd/src/hooks/useSendAmountTransformers.ts
diff --git a/suite-native/module-send/src/hooks/useShowReviewCancellationAlert.tsx b/suite-native/module-send/src/hooks/useShowReviewCancellationAlert.tsx
@@ -0,0 +1,33 @@
+import { useDispatch } from 'react-redux';
+
+import { useAlert } from '@suite-native/alerts';
+import { Translation } from '@suite-native/intl';
+import { cancelSignSendFormTransactionThunk } from '@suite-common/wallet-core';
+
+type AlertResolveValue = { wasReviewCanceled: boolean };
+
+export const useShowReviewCancellationAlert = () => {
+    const { showAlert } = useAlert();
+    const dispatch = useDispatch();
+
+    const showReviewCancellationAlert = () =>
+        new Promise<AlertResolveValue>(resolve =>
+            showAlert({
+                title: <Translation id="moduleSend.review.cancelAlert.title" />,
+                primaryButtonTitle: <Translation id="generic.buttons.cancel" />,
+                primaryButtonVariant: 'redBold',
+                secondaryButtonVariant: 'redElevation0',
+                secondaryButtonTitle: (
+                    <Translation id="moduleSend.review.cancelAlert.continueButton" />
+                ),
+                onPressPrimaryButton: () => {
+                    dispatch(cancelSignSendFormTransactionThunk());
+
+                    return resolve({ wasReviewCanceled: true });
+                },
+                onPressSecondaryButton: () => resolve({ wasReviewCanceled: false }),
+            }),
+        );
+
+    return showReviewCancellationAlert;
+};
diff --git a/suite-native/module-send/src/navigation/SendStackNavigator.tsx b/suite-native/module-send/src/navigation/SendStackNavigator.tsx
@@ -22,13 +22,19 @@ export const SendStackNavigator = () => (
         <SendStack.Screen name={SendStackRoutes.SendAccounts} component={SendAccountsScreen} />
         <SendStack.Screen name={SendStackRoutes.SendOutputs} component={SendOutputsScreen} />
         <SendStack.Screen name={SendStackRoutes.SendFees} component={SendFeesScreen} />
-        <SendStack.Screen
-            name={SendStackRoutes.SendAddressReview}
-            component={SendAddressReviewScreen}
-        />
-        <SendStack.Screen
-            name={SendStackRoutes.SendOutputsReview}
-            component={SendOutputsReviewScreen}
-        />
+        <SendStack.Group
+            screenOptions={{
+                gestureEnabled: false, // To not interrupt send review by back navigation.
+            }}
+        >
+            <SendStack.Screen
+                name={SendStackRoutes.SendAddressReview}
+                component={SendAddressReviewScreen}
+            />
+            <SendStack.Screen
+                name={SendStackRoutes.SendOutputsReview}
+                component={SendOutputsReviewScreen}
+            />
+        </SendStack.Group>
     </SendStack.Navigator>
 );
diff --git a/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx b/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx
@@ -1,15 +1,10 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useEffect } from 'react';
 
 import { SendStackParamList, SendStackRoutes, StackProps } from '@suite-native/navigation';
 import { Box, VStack } from '@suite-native/atoms';
 import { Translation, useTranslate } from '@suite-native/intl';
-import {
-    AccountsRootState,
-    DeviceRootState,
-    SendRootState,
-    cancelSignSendFormTransactionThunk,
-} from '@suite-common/wallet-core';
+import { AccountsRootState, DeviceRootState, SendRootState } from '@suite-common/wallet-core';
 import { Text } from '@suite-native/atoms';
 
 import {
@@ -20,15 +15,17 @@ import { AddressReviewStepList } from '../components/AddressReviewStepList';
 import { SendScreen } from '../components/SendScreen';
 import { SendScreenSubHeader } from '../components/SendScreenSubHeader';
 import { SendConfirmOnDeviceImage } from '../components/SendConfirmOnDeviceImage';
+import { useShowReviewCancellationAlert } from '../hooks/useShowReviewCancellationAlert';
 
 export const SendAddressReviewScreen = ({
     route,
     navigation,
 }: StackProps<SendStackParamList, SendStackRoutes.SendAddressReview>) => {
     const { accountKey } = route.params;
-    const dispatch = useDispatch();
     const { translate } = useTranslate();
 
+    const showReviewCancellationAlert = useShowReviewCancellationAlert();
+
     const isAddressConfirmed = useSelector(
         (state: AccountsRootState & DeviceRootState & SendRootState) =>
             selectIsFirstTransactionAddressConfirmed(state, accountKey),
@@ -48,9 +45,8 @@ export const SendAddressReviewScreen = ({
     useEffect(() => {
         const unsubscribe = navigation.addListener('beforeRemove', e => {
             if (isReviewInProgress) {
-                //Navigation is handled by signTransactionThunk response.
-                dispatch(cancelSignSendFormTransactionThunk());
                 e.preventDefault();
+                showReviewCancellationAlert();
 
                 return;
             }

diff --git a/suite-native/module-send/src/screens/SendOutputsReviewScreen.tsx b/suite-native/module-send/src/screens/SendOutputsReviewScreen.tsx
@@ -1,7 +1,6 @@
-import { useDispatch } from 'react-redux';
 import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 
-import { isFulfilled } from '@reduxjs/toolkit';
 import { useNavigation } from '@react-navigation/native';
 
 import {
@@ -13,15 +12,15 @@ import {
     StackToStackCompositeNavigationProps,
 } from '@suite-native/navigation';
 import { VStack } from '@suite-native/atoms';
-import { cancelSignSendFormTransactionThunk } from '@suite-common/wallet-core';
 import { useTranslate } from '@suite-native/intl';
 
 import { ReviewOutputItemList } from '../components/ReviewOutputItemList';
 import { OutputsReviewFooter } from '../components/OutputsReviewFooter';
 import { SignSuccessMessage } from '../components/SignSuccessMessage';
-import { cleanupSendFormThunk } from '../sendFormThunks';
 import { SendScreen } from '../components/SendScreen';
 import { SendScreenSubHeader } from '../components/SendScreenSubHeader';
+import { useShowReviewCancellationAlert } from '../hooks/useShowReviewCancellationAlert';
+import { cleanupSendFormThunk } from '../sendFormThunks';
 
 type NavigationProps = StackToStackCompositeNavigationProps<
     SendStackParamList,
@@ -34,25 +33,26 @@ export const SendOutputsReviewScreen = ({
 }: StackProps<SendStackParamList, SendStackRoutes.SendOutputsReview>) => {
     const { accountKey } = route.params;
     const { translate } = useTranslate();
-    const dispatch = useDispatch();
     const navigation = useNavigation<NavigationProps>();
+    const showReviewCancellationAlert = useShowReviewCancellationAlert();
+    const dispatch = useDispatch();
 
     useEffect(() => {
         const unsubscribe = navigation.addListener('beforeRemove', async e => {
-            if (e.data.action.type === 'GO_BACK') {
-                e.preventDefault();
-            }
-            const response = await dispatch(cancelSignSendFormTransactionThunk());
-            if (isFulfilled(response)) {
-                // If success navigation is handled by signTransactionThunk call on SendAddressReviewScreen.
+            // We want to modify only behavior of back button actions.
+            if (e.data.action.type !== 'GO_BACK') return;
+
+            e.preventDefault();
+
+            const { wasReviewCanceled } = await showReviewCancellationAlert();
 
-                return;
+            if (wasReviewCanceled) {
+                dispatch(cleanupSendFormThunk({ accountKey, shouldDeleteDraft: false }));
+                navigation.navigate(RootStackRoutes.AccountDetail, {
+                    accountKey,
+                    closeActionType: 'back',
+                });
             }
-            dispatch(cleanupSendFormThunk({ accountKey }));
-            navigation.navigate(RootStackRoutes.AccountDetail, {
-                accountKey,
-                closeActionType: 'back',
-            });
         });
 
         return unsubscribe;

diff --git a/suite-native/module-send/src/screens/SendOutputsScreen.tsx b/suite-native/module-send/src/screens/SendOutputsScreen.tsx
@@ -27,7 +27,6 @@ import {
 import { getNetwork } from '@suite-common/wallet-config';
 import { Box, Button } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
-import { useToast } from '@suite-native/toasts';
 import { useDebounce } from '@trezor/react-utils';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { FormState } from '@suite-common/wallet-types';
@@ -79,7 +78,6 @@ export const SendOutputsScreen = ({
     const dispatch = useDispatch();
     const { applyStyle } = useNativeStyles();
     const debounce = useDebounce();
-    const { showToast } = useToast();
     const navigation =
         useNavigation<StackNavigationProps<SendStackParamList, SendStackRoutes.SendOutputs>>();
 
@@ -187,11 +185,6 @@ export const SendOutputsScreen = ({
 
             return;
         }
-
-        // TODO: display error message based on the error code saved in the redux state
-        showToast({ variant: 'error', message: 'Something went wrong', icon: 'closeCircle' });
-
-        navigation.navigate(SendStackRoutes.SendAccounts);
     });
 
     return (

diff --git a/suite-native/module-send/src/sendFormThunks.ts b/suite-native/module-send/src/sendFormThunks.ts
@@ -85,11 +85,19 @@ export const signTransactionNativeThunk = createThunk(
 
 export const cleanupSendFormThunk = createThunk(
     `${SEND_MODULE_PREFIX}/cleanupSendFormThunk`,
-    ({ accountKey }: { accountKey: AccountKey }, { dispatch, getState }) => {
+    (
+        {
+            accountKey,
+            shouldDeleteDraft = true,
+        }: { accountKey: AccountKey; shouldDeleteDraft?: boolean },
+        { dispatch, getState },
+    ) => {
         const device = selectDevice(getState());
 
         dispatch(sendFormActions.dispose());
-        dispatch(sendFormActions.removeDraft({ accountKey }));
+
+        if (shouldDeleteDraft) dispatch(sendFormActions.removeDraft({ accountKey }));
+
         dispatch(deviceActions.removeButtonRequests({ device }));
     },
 );

diff --git a/suite-native/module-send/tsconfig.json b/suite-native/module-send/tsconfig.json
@@ -42,7 +42,6 @@
         { "path": "../navigation" },
         { "path": "../qr-code" },
         { "path": "../settings" },
-        { "path": "../toasts" },
         { "path": "../../packages/react-utils" },
         { "path": "../../packages/styles" },
         { "path": "../../packages/theme" },

diff --git a/yarn.lock b/yarn.lock
@@ -10353,7 +10353,6 @@ __metadata:
     "@suite-native/navigation": "workspace:*"
     "@suite-native/qr-code": "workspace:*"
     "@suite-native/settings": "workspace:*"
-    "@suite-native/toasts": "workspace:*"
     "@trezor/react-utils": "workspace:*"
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"