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

trezor · Feb 18, 2025 · 17005ad · 17005ad
1 parent 57a2300
commit 17005ad
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 10 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/...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 {
@@ -169,17 +170,22 @@ export const TradingVerify = ({ tradingVerifyAccount, cryptoId }: TradingVerifyP
                     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 })}
                     />
                 )}
             </Column>

diff --git a/.../wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerifyDestinationTag.tsx b/.../wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerifyDestinationTag.tsx
@@ -0,0 +1,49 @@
+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;
+}
+
+export const TradingVerifyDestinationTag = ({
+    inputComponent,
+    onToggle,
+}: TradingVerifyDestinationTagProps) => {
+    const { openNodeById } = useGuideOpenNode();
+
+    const [enabled, setEnabled] = useState<boolean>(false);
+
+    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" />}
+                />
+                <Button variant="tertiary" type="button" size="tiny" onClick={handleOpenGuide}>
+                    <Translation id="DESTINATION_TAG_GUIDE_LINK" />
+                </Button>
+            </Row>
+
+            {enabled && inputComponent}
+        </Column>
+    );
+};