feat(suite): add guide link to the destination tag

trezor · Feb 5, 2025 · 07d9da1 · 07d9da1
1 parent 8d03473
commit 07d9da1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/...ages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx b/...ages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx
@@ -7,6 +7,7 @@ import {
     Banner,
     Card,
     Column,
+    Link,
     NewModal,
     NewModalProps,
     Paragraph,
@@ -20,9 +21,11 @@ import { palette, spacings } from '@trezor/theme';
 import { MODAL } from 'src/actions/suite/constants';
 import { Translation } from 'src/components/suite';
 import { QrCode } from 'src/components/suite/QrCode';
+import { useGuideOpenNode } from 'src/hooks/guide';
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { selectIsActionAbortable } from 'src/reducers/suite/suiteReducer';
 import { ThunkAction } from 'src/types/suite';
+import { DESTINATION_TAG_GUIDE_PATH } from 'src/views/wallet/send/Options/RippleOptions/DestinationTag';
 
 import {
     OutputElementLine,
@@ -57,6 +60,7 @@ export const ConfirmValueModal = ({
     const isActionAbortable = useSelector(selectIsActionAbortable);
     const deviceLabel = useSelector(selectSelectedDeviceLabelOrName);
     const dispatch = useDispatch();
+    const { openNodeById } = useGuideOpenNode();
 
     const canConfirmOnDevice = !!(device?.connected && device?.available);
     const addressConfirmed = isConfirmed || !canConfirmOnDevice;
@@ -85,6 +89,11 @@ export const ConfirmValueModal = ({
         return null;
     };
 
+    const handleOpenGuide = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        openNodeById(DESTINATION_TAG_GUIDE_PATH);
+    };
+
     // Device connected while the modal is open -> validate on device.
     useEffect(() => {
         if (canConfirmOnDevice && modalContext === MODAL.CONTEXT_USER && !isConfirmed) {
@@ -127,7 +136,21 @@ export const ConfirmValueModal = ({
                     )}
                     {account.networkType === 'ripple' && (
                         <Banner variant="info" icon="info">
-                            <Translation id="DESTINATION_TAG_BANNER_RECEIVE" />
+                            <Translation
+                                id="DESTINATION_TAG_BANNER_RECEIVE"
+                                values={{
+                                    a: chunks => (
+                                        <Link
+                                            variant="nostyle"
+                                            icon="arrowUpRight"
+                                            typographyStyle="hint"
+                                            onClick={handleOpenGuide}
+                                        >
+                                            {chunks}
+                                        </Link>
+                                    ),
+                                }}
+                            />
                         </Banner>
                     )}
                     <Row gap={spacings.xl} alignItems="stretch">

diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
@@ -5465,6 +5465,10 @@ export default defineMessages({
         defaultMessage: 'Add Memo/Destination tag',
         id: 'DESTINATION_TAG_SWITCH',
     },
+    DESTINATION_TAG_GUIDE_LINK: {
+        defaultMessage: 'What is this?',
+        id: 'DESTINATION_TAG_GUIDE_LINK',
+    },
     DESTINATION_TAG_NOTE: {
         defaultMessage:
             'Online exchanges require this to identify your account. Get your destination tag from your online exchange.',

diff --git a/packages/suite/src/views/wallet/send/Options/RippleOptions/DestinationTag.tsx b/packages/suite/src/views/wallet/send/Options/RippleOptions/DestinationTag.tsx
@@ -1,14 +1,18 @@
 import { formInputsMaxLength } from '@suite-common/validators';
 import { U_INT_32 } from '@suite-common/wallet-constants';
 import { getInputState, isInteger } from '@suite-common/wallet-utils';
-import { Banner, Column, Input, Note, Switch } from '@trezor/components';
+import { Banner, Button, Column, Input, Note, Row, Switch } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 
 import { Translation } from 'src/components/suite';
+import { useGuideOpenNode } from 'src/hooks/guide';
 import { useTranslation } from 'src/hooks/suite';
 import { useSendFormContext } from 'src/hooks/wallet';
 
+export const DESTINATION_TAG_GUIDE_PATH =
+    '/3_send-and-receive/transactions-in-depth/destination-tags.md';
+
 export const DestinationTag = () => {
     const {
         register,
@@ -20,6 +24,7 @@ export const DestinationTag = () => {
     } = useSendFormContext();
 
     const { translationString } = useTranslation();
+    const { openNodeById } = useGuideOpenNode();
 
     const options = getDefaultValue('options', []);
     const destinationEnabled = options.includes('rippleDestinationTag');
@@ -50,13 +55,23 @@ export const DestinationTag = () => {
         composeTransaction();
     };
 
+    const handleOpenGuide = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        openNodeById(DESTINATION_TAG_GUIDE_PATH);
+    };
+
     return (
         <Column gap={spacings.md}>
-            <Switch
-                isChecked={destinationEnabled}
-                onChange={handleToggleOption}
-                label={<Translation id="DESTINATION_TAG_SWITCH" />}
-            />
+            <Row justifyContent="space-between">
+                <Switch
+                    isChecked={destinationEnabled}
+                    onChange={handleToggleOption}
+                    label={<Translation id="DESTINATION_TAG_SWITCH" />}
+                />
+                <Button variant="tertiary" type="button" size="tiny" onClick={handleOpenGuide}>
+                    <Translation id="DESTINATION_TAG_GUIDE_LINK" />
+                </Button>
+            </Row>
             {destinationEnabled ? (
                 <>
                     <Input