feat(suite-native): send review cancelation dialog

suite-native/intl/src/en.ts

@@ -878,6 +878,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.',

suite-native/module-send/package.json

@@ -36,7 +36,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:*",

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',

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 }>(

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 = ({

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;
+};

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>
 );

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;
  }

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;

suite-native/module-send/src/screens/SendOutputsScreen.tsx

@@ -27,7 +27,6 @@ import {
 import { getNetworkCompatible } from '@suite-common/wallet-utils';
 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 (

suite-native/module-send/src/sendFormThunks.ts

@@ -83,11 +83,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 }));
  },
 );

suite-native/module-send/tsconfig.json

@@ -41,7 +41,6 @@
  { "path": "../navigation" },
  { "path": "../qr-code" },
  { "path": "../settings" },
- { "path": "../toasts" },
  { "path": "../../packages/react-utils" },
  { "path": "../../packages/styles" },
  { "path": "../../packages/theme" },

yarn.lock

@@ -10327,7 +10327,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:*"