fix(suite-native): send confirm on device bottom sheet

trezor · Sep 23, 2024 · c50c4c5 · c50c4c5
1 parent 0b34230
commit c50c4c5
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 18 deletions.
diff --git a/suite-native/device/src/components/ConfirmOnTrezorBottomSheet.tsx b/suite-native/device/src/components/ConfirmOnTrezorBottomSheet.tsx
@@ -1,13 +1,18 @@
 import { BottomSheet, Button, VStack, Box, Text } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
+import { ReactNode } from 'react';
+
+type ConfirmOnTrezorBottomSheetProps = {
+    isOpened: boolean;
+    onClose: () => void;
+    text: ReactNode;
+};
 
 export const ConfirmOnTrezorBottomSheet = ({
     isOpened,
     onClose,
-}: {
-    isOpened: boolean;
-    onClose: () => void;
-}) => {
+    text,
+}: ConfirmOnTrezorBottomSheetProps) => {
     return (
         <BottomSheet
             isVisible={isOpened}
@@ -18,10 +23,10 @@ export const ConfirmOnTrezorBottomSheet = ({
             <VStack spacing="large">
                 <VStack alignItems="center">
                     <Text textAlign="center" variant="titleSmall">
-                        <Translation id="moduleReceive.bottomSheets.confirmOnTrezor.title" />
+                        <Translation id="moduleDevice.confirmOnDeviceSheetTitle" />
                     </Text>
                     <Text textAlign="center" color="textSubdued">
-                        <Translation id="moduleReceive.bottomSheets.confirmOnTrezor.description" />
+                        {text}
                     </Text>
                 </VStack>
 

diff --git a/suite-native/device/src/components/ConfirmOnTrezorImage.tsx b/suite-native/device/src/components/ConfirmOnTrezorImage.tsx
@@ -1,19 +1,23 @@
 import { Image, Pressable } from 'react-native';
 import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
-import React, { useMemo, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { ConfirmOnTrezorBottomSheet } from './ConfirmOnTrezorBottomSheet';
 
+type ConfirmOnTrezorImageProps = {
+    bottomSheetText: ReactNode;
+};
+
 const imageContainerStyle = prepareNativeStyle(utils => ({
     position: 'absolute',
     bottom: -utils.spacings.extraSmall, // Hides a part of the image under bottom screen edge.
     width: '100%',
     alignItems: 'center',
 }));
 
-export const ConfirmOnTrezorImage = () => {
+export const ConfirmOnTrezorImage = ({ bottomSheetText }: ConfirmOnTrezorImageProps) => {
     const [isBottomSheetOpened, setIsBottomSheetOpened] = useState(false);
     const { applyStyle } = useNativeStyles();
 
@@ -39,6 +43,7 @@ export const ConfirmOnTrezorImage = () => {
                 </Pressable>
             </Animated.View>
             <ConfirmOnTrezorBottomSheet
+                text={bottomSheetText}
                 isOpened={isBottomSheetOpened}
                 onClose={handleCloseBottomSheet}
             />

diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -334,6 +334,7 @@ export const en = {
                 },
             },
         },
+        confirmOnDeviceSheetTitle: 'Confirm on Trezor',
     },
     moduleReceive: {
         screenTitle: '{coinSymbol} Receive address',
@@ -374,11 +375,8 @@ export const en = {
             },
         },
         bottomSheets: {
-            confirmOnTrezor: {
-                title: 'Confirm on Trezor',
-                description:
-                    'Go to your device and verify that the receive address on your Trezor matches the one displayed here.',
-            },
+            confirmOnDeviceMessage:
+                'Go to your device and verify that the receive address on your Trezor matches the one displayed here.',
             addressMismatch: {
                 title: "Address doesn't match?",
                 description:
@@ -886,6 +884,7 @@ export const en = {
             submitButton: 'Review and sign',
         },
         review: {
+            confirmOnDeviceMessage: 'Go to your Trezor and confirm the amounts & recipients.',
             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/src/components/OutputsReviewFooter.tsx b/suite-native/module-send/src/components/OutputsReviewFooter.tsx
@@ -15,8 +15,8 @@ import { Button } from '@suite-native/atoms';
 import { RootStackRoutes, AppTabsRoutes, RootStackParamList } from '@suite-native/navigation';
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import { ConfirmOnTrezorImage } from '@suite-native/device';
 
+import { SendConfirmOnDeviceImage } from '../components/SendConfirmOnDeviceImage';
 import { sendTransactionAndCleanupSendFormThunk } from '../sendFormThunks';
 
 const navigateToAccountDetail = ({
@@ -64,7 +64,7 @@ export const OutputsReviewFooter = ({ accountKey }: { accountKey: AccountKey })
     {
         /* TODO: improve the illustration: https://github.com/trezor/trezor-suite/issues/13965 */
     }
-    if (!signedTransaction || !account) return <ConfirmOnTrezorImage />;
+    if (!signedTransaction || !account) return <SendConfirmOnDeviceImage />;
 
     const handleSendTransaction = async () => {
         setIsSendInProgress(true);

diff --git a/suite-native/module-send/src/components/SendConfirmOnDeviceImage.tsx b/suite-native/module-send/src/components/SendConfirmOnDeviceImage.tsx
@@ -0,0 +1,10 @@
+import { ConfirmOnTrezorImage } from '@suite-native/device';
+import { Translation } from '@suite-native/intl';
+
+export const SendConfirmOnDeviceImage = () => {
+    return (
+        <ConfirmOnTrezorImage
+            bottomSheetText={<Translation id="moduleSend.review.confirmOnDeviceMessage" />}
+        />
+    );
+};
diff --git a/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx b/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx
@@ -10,7 +10,6 @@ import {
     SendRootState,
     cancelSignSendFormTransactionThunk,
 } from '@suite-common/wallet-core';
-import { ConfirmOnTrezorImage } from '@suite-native/device';
 import { Text } from '@suite-native/atoms';
 
 import {
@@ -20,6 +19,7 @@ import {
 import { AddressReviewStepList } from '../components/AddressReviewStepList';
 import { SendScreen } from '../components/SendScreen';
 import { SendScreenSubHeader } from '../components/SendScreenSubHeader';
+import { SendConfirmOnDeviceImage } from '../components/SendConfirmOnDeviceImage';
 
 export const SendAddressReviewScreen = ({
     route,
@@ -68,7 +68,7 @@ export const SendAddressReviewScreen = ({
                 />
             }
             // TODO: improve the illustration: https://github.com/trezor/trezor-suite/issues/13965
-            footer={isReviewInProgress && <ConfirmOnTrezorImage />}
+            footer={isReviewInProgress && <SendConfirmOnDeviceImage />}
         >
             <Box flex={1} justifyContent="space-between" marginTop="medium">
                 <VStack justifyContent="center" alignItems="center" spacing="large">

diff --git a/suite-native/receive/src/components/ReceiveAccount.tsx b/suite-native/receive/src/components/ReceiveAccount.tsx
@@ -68,7 +68,13 @@ export const ReceiveAccount = ({ accountKey, tokenContract }: AccountReceiveProp
                 />
             </VStack>
 
-            {isConfirmOnTrezorReady && <ConfirmOnTrezorImage />}
+            {isConfirmOnTrezorReady && (
+                <ConfirmOnTrezorImage
+                    bottomSheetText={
+                        <Translation id="moduleReceive.bottomSheets.confirmOnDeviceMessage" />
+                    }
+                />
+            )}
         </Box>
     );
 };