feat(trading): added new UI for memo/destination tag

trezor · Feb 27, 2025 · 0598bb8 · 0598bb8
1 parent f266fb6
commit 0598bb8
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 16 deletions.
diff --git a/packages/components/src/components/form/Switch/Switch.tsx b/packages/components/src/components/form/Switch/Switch.tsx
@@ -63,7 +63,7 @@ const Container = styled.div<{
                     : theme.backgroundNeutralDisabled};
             }
 
-            :hover {
+            &:hover {
                 background: ${$isChecked
                     ? theme.backgroundPrimaryPressed
                     : theme.backgroundNeutralSubdued};

diff --git a/packages/suite/src/views/wallet/trading/common/ConfirmedOnTrezor.tsx b/packages/suite/src/views/wallet/trading/common/ConfirmedOnTrezor.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { TrezorDevice } from '@suite-common/suite-types';
 import { variables } from '@trezor/components';
 import { RotateDeviceImage } from '@trezor/product-components';
+import { borders } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite';
 
@@ -18,6 +19,7 @@ const Confirmed = styled.div`
     justify-content: center;
     margin-top: 27px;
     gap: 10px;
+    border-radius: ${borders.radii.sm};
 `;
 
 // reason: set size of RotateDeviceImage

diff --git a/...uite/src/views/wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerify.tsx b/...uite/src/views/wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerify.tsx
@@ -23,6 +23,7 @@ import {
 } from 'src/utils/wallet/trading/tradingTypingUtils';
 import { ConfirmedOnTrezor } from 'src/views/wallet/trading/common/ConfirmedOnTrezor';
 import { TradingAddressOptions } from 'src/views/wallet/trading/common/TradingAddressOptions';
+import { TradingVerifyDestinationTag } from 'src/views/wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerifyDestinationTag';
 import { TradingVerifyOptions } from 'src/views/wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerifyOptions';
 
 interface TradingVerifyProps {
@@ -163,25 +164,31 @@ export const TradingVerify = ({ tradingVerifyAccount, cryptoId }: TradingVerifyP
                     />
                 )}
 
-                {device?.connected &&
-                    device.available &&
-                    addressVerified &&
-                    addressVerified === address && <ConfirmedOnTrezor device={device} />}
-
                 {exchangeQuote?.extraFieldDescription && (
-                    <Input
-                        label={
-                            <Translation
-                                id="TR_EXCHANGE_EXTRA_FIELD"
-                                values={extraFieldDescription}
+                    <TradingVerifyDestinationTag
+                        inputComponent={
+                            <Input
+                                label={
+                                    <Translation
+                                        id="TR_EXCHANGE_EXTRA_FIELD"
+                                        values={extraFieldDescription}
+                                    />
+                                }
+                                inputState={form.formState.errors.extraField ? 'error' : undefined}
+                                bottomText={form.formState.errors.extraField?.message || null}
+                                innerRef={descriptionRef}
+                                {...descriptionField}
                             />
                         }
-                        inputState={form.formState.errors.extraField ? 'error' : undefined}
-                        bottomText={form.formState.errors.extraField?.message || null}
-                        innerRef={descriptionRef}
-                        {...descriptionField}
+                        onToggle={() => form.setValue('extraField', '', { shouldValidate: true })}
+                        required={exchangeQuote.extraFieldDescription.required}
                     />
                 )}
+
+                {device?.connected &&
+                    device.available &&
+                    addressVerified &&
+                    addressVerified === address && <ConfirmedOnTrezor device={device} />}
             </Column>
             {selectedAccountOption && (
                 <Column>
@@ -226,7 +233,13 @@ export const TradingVerify = ({ tradingVerifyAccount, cryptoId }: TradingVerifyP
                                     confirmTrade(address, extraField);
                                 }
                             }}
-                            isDisabled={!form.formState.isValid || address === '' || callInProgress}
+                            isDisabled={
+                                !form.formState.isValid ||
+                                address === '' ||
+                                callInProgress ||
+                                (exchangeQuote?.extraFieldDescription?.required &&
+                                    extraField === '')
+                            }
                         >
                             <Translation id="TR_BUY_GO_TO_PAYMENT" />
                         </Button>

diff --git a/.../wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerifyDestinationTag.tsx b/.../wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerifyDestinationTag.tsx
@@ -0,0 +1,52 @@
+import { ReactNode, useState } from 'react';
+
+import { Button, Column, Row, Switch } from '@trezor/components';
+import { spacings } from '@trezor/theme';
+
+import { Translation } from 'src/components/suite';
+import { useGuideOpenNode } from 'src/hooks/guide';
+import { DESTINATION_TAG_GUIDE_PATH } from 'src/views/wallet/send/Options/RippleOptions/DestinationTag';
+
+export interface TradingVerifyDestinationTagProps {
+    inputComponent: ReactNode;
+    onToggle?: (toggled: boolean) => void;
+    required: boolean;
+}
+
+export const TradingVerifyDestinationTag = ({
+    inputComponent,
+    onToggle,
+    required,
+}: TradingVerifyDestinationTagProps) => {
+    const { openNodeById } = useGuideOpenNode();
+
+    const [enabled, setEnabled] = useState<boolean>(required);
+
+    const handleToggle = (isChecked: boolean) => {
+        setEnabled(isChecked);
+        onToggle?.(isChecked);
+    };
+
+    const handleOpenGuide = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        openNodeById(DESTINATION_TAG_GUIDE_PATH);
+    };
+
+    return (
+        <Column gap={spacings.md}>
+            <Row justifyContent="space-between">
+                <Switch
+                    isChecked={enabled}
+                    onChange={handleToggle}
+                    label={<Translation id="DESTINATION_TAG_SWITCH" />}
+                    isDisabled={required}
+                />
+                <Button variant="tertiary" type="button" size="tiny" onClick={handleOpenGuide}>
+                    <Translation id="DESTINATION_TAG_GUIDE_LINK" />
+                </Button>
+            </Row>
+
+            {enabled && inputComponent}
+        </Column>
+    );
+};