fix(suite): display black-box for opreturn and data for Ethereum, als…

…o fix the order (data are first to confirm on Ethereum)
trezor · May 7, 2024 · c6d791c · c6d791c
1 parent 39ad328
commit c6d791c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/ConfirmAddressModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/ConfirmAddressModal.tsx
@@ -20,7 +20,7 @@ export const ConfirmAddressModal = ({ addressPath, value, ...props }: ConfirmAdd
     const receiveSymbol = useSelector(
         state => state.wallet.coinmarket.exchange.quotesRequest?.receive,
     );
-    const displayMode = useDisplayMode();
+    const displayMode = useDisplayMode({ type: 'address' });
 
     const validateAddress = useCallback(
         () => showAddress(addressPath, value),

diff --git a/...ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx b/...ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx
@@ -61,7 +61,7 @@ export const TransactionReviewOutput = forwardRef<HTMLDivElement, TransactionRev
         let outputLabel: ReactNode = label;
         const { networkType } = account;
         const { translationString } = useTranslation();
-        const displayMode = useDisplayMode(ethereumStakeType);
+        const displayMode = useDisplayMode({ ethereumStakeType, type });
 
         if (type === 'locktime') {
             const isTimestamp = new BigNumber(value).gte(BTC_LOCKTIME_VALUE);

diff --git a/...dal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputElement.tsx b/...dal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputElement.tsx
@@ -11,6 +11,8 @@ import { zIndices } from '@trezor/theme';
 import { DeviceDisplay } from '../../../../DeviceDisplay/DeviceDisplay';
 import { DisplayMode } from 'src/types/suite';
 
+const TYPES_TO_BE_DISPLAYED_IN_SCREEN_BOX = ['address', 'regular_legacy', 'data', 'opreturn'];
+
 const OutputWrapper = styled.div`
     display: flex;
     margin-top: 32px;
@@ -192,7 +194,7 @@ export const TransactionReviewOutputElement = forwardRef<
                             <OutputValue>
                                 {isActive &&
                                 displayMode &&
-                                (line.id === 'address' || line.id === 'regular_legacy') ? (
+                                TYPES_TO_BE_DISPLAYED_IN_SCREEN_BOX.includes(line.id) ? (
                                     <DeviceDisplay displayMode={displayMode} address={line.value} />
                                 ) : (
                                     <OutputValueWrapper>

diff --git a/packages/suite/src/hooks/suite/useDisplayMode.ts b/packages/suite/src/hooks/suite/useDisplayMode.ts
@@ -6,15 +6,22 @@ import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReduce
 import { useSelector } from './useSelector';
 import { StakeType } from '@suite-common/wallet-types';
 import { DisplayMode } from 'src/types/suite';
+import { ReviewOutput } from '../../types/wallet/transaction';
 
-export const useDisplayMode = (ethereumStakeType?: StakeType) => {
+type UseDisplayModeProps = {
+    type: ReviewOutput['type'];
+    ethereumStakeType?: StakeType;
+};
+
+export const useDisplayMode = ({ type, ethereumStakeType }: UseDisplayModeProps) => {
     const account = useSelector(selectSelectedAccount);
     const unavailableCapabilities = useSelector(selectDeviceUnavailableCapabilities);
     const addressDisplayType = useSelector(selectAddressDisplayType);
 
-    if (ethereumStakeType) {
+    if (ethereumStakeType || ['data', 'opreturn'].includes(type)) {
         return DisplayMode.SINGLE_WRAPPED_TEXT;
     }
+
     if (
         addressDisplayType === AddressDisplayOptions.CHUNKED &&
         !unavailableCapabilities?.chunkify &&

diff --git a/packages/suite/src/utils/wallet/reviewTransactionUtils.ts b/packages/suite/src/utils/wallet/reviewTransactionUtils.ts
@@ -197,7 +197,11 @@ const constructNewFlow = ({
     const hasBitcoinLockTime = 'bitcoinLockTime' in precomposedForm;
     const hasRippleDestinationTag = 'rippleDestinationTag' in precomposedForm;
 
-    // used in the bumb fee flow
+    if (precomposedForm.ethereumDataHex && !precomposedTx.token) {
+        outputs.push({ type: 'data', value: precomposedForm.ethereumDataHex });
+    }
+
+    // used in the bump fee flow
     if (typeof precomposedTx.useNativeRbf === 'boolean' && precomposedTx.useNativeRbf) {
         outputs.push(
             {
@@ -293,10 +297,6 @@ const constructNewFlow = ({
         outputs.push({ type: 'locktime', value: precomposedForm.bitcoinLockTime });
     }
 
-    if (precomposedForm.ethereumDataHex && !precomposedTx.token) {
-        outputs.push({ type: 'data', value: precomposedForm.ethereumDataHex });
-    }
-
     if (
         networkType === 'ripple' &&
         hasRippleDestinationTag &&