feat(suite): update send modal in trading context to not use address …

…confirmation step
trezor · Feb 5, 2025 · 4c07e51 · 4c07e51
1 parent 1b30739
commit 4c07e51
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 65 deletions.
diff --git a/...mponents/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx b/...mponents/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx
@@ -65,6 +65,7 @@ export const TransactionReviewModalContent = ({
             : selectPrecomposedSendForm(state),
     );
 
+    const isTradingAction = !!precomposedForm?.isTrading;
     const isRbfAction = precomposedTx !== undefined && isRbfTransaction(precomposedTx);
 
     const decreaseOutputId =
@@ -232,6 +233,7 @@ export const TransactionReviewModalContent = ({
                         outputs={outputs}
                         buttonRequestsCount={buttonRequestsCount}
                         isRbfAction={isRbfAction}
+                        isTradingAction={isTradingAction}
                         isSending={isSending}
                         stakeType={stakeType || undefined}
                     />

diff --git a/...ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx b/...ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx
@@ -218,6 +218,7 @@ export type TransactionReviewOutputProps = {
     account: Account;
     isRbf: boolean;
     stakeType?: StakeType;
+    isTrading?: boolean;
 } & ReviewOutput;
 
 export const TransactionReviewOutput = ({
@@ -230,6 +231,7 @@ export const TransactionReviewOutput = ({
     account,
     stakeType,
     isRbf,
+    isTrading,
 }: TransactionReviewOutputProps) => {
     const { networkType, symbol } = account;
     const accounts = useSelector(state => state.wallet.accounts);
@@ -255,7 +257,7 @@ export const TransactionReviewOutput = ({
             return {
                 ...line,
                 type:
-                    relevantAccounts.length > 0
+                    isTrading || relevantAccounts.length > 0
                         ? ('safe-address' as OutputElementLine['type'])
                         : line.type,
             };

diff --git a/...xModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx b/...xModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx
@@ -23,6 +23,7 @@ export type TransactionReviewOutputListProps = {
     outputs: ReviewOutput[];
     buttonRequestsCount: number;
     isRbfAction: boolean;
+    isTradingAction: boolean;
     isSending?: boolean;
     stakeType?: StakeType;
 };
@@ -69,6 +70,7 @@ export const TransactionReviewOutputList = ({
     outputs,
     buttonRequestsCount,
     isRbfAction,
+    isTradingAction,
     isSending,
     stakeType,
 }: TransactionReviewOutputListProps) => {
@@ -79,7 +81,7 @@ export const TransactionReviewOutputList = ({
     const isMultirecipient = outputs.filter(({ type }) => type === 'address').length > 1;
     const isFirstOutputAddress = outputs[0].type === 'address';
     const isFirstStep = buttonRequestsCount === 1;
-    const isNotStaking = !stakeType;
+    const isStaking = stakeType;
     const isInternalTransfer =
         isFirstOutputAddress &&
         findAccountsByAddress(symbol, outputs[0].value, accounts).length > 0;
@@ -97,7 +99,13 @@ export const TransactionReviewOutputList = ({
         }
     }, [buttonRequestsCount, outputs.length, signedTx]);
 
-    if (isFirstOutputAddress && isFirstStep && isNotStaking && !isInternalTransfer) {
+    if (
+        isFirstOutputAddress &&
+        isFirstStep &&
+        !isStaking &&
+        !isTradingAction &&
+        !isInternalTransfer
+    ) {
         return (
             <Card>
                 <Column gap={spacings.xxxl}>
@@ -158,6 +166,7 @@ export const TransactionReviewOutputList = ({
                                 state={getState(index, buttonRequestsCount, !!signedTx)}
                                 account={account}
                                 isRbf={isRbfAction}
+                                isTrading={isTradingAction}
                                 stakeType={stakeType}
                             />
                         </Column>

diff --git a/packages/suite/src/hooks/wallet/useTradingRecomposeAndSign.ts b/packages/suite/src/hooks/wallet/useTradingRecomposeAndSign.ts
@@ -77,6 +77,7 @@ export const useTradingRecomposeAndSign = () => {
                 ethereumDataHex,
                 ethereumAdjustGasLimit,
                 selectedUtxos: [],
+                isTrading: true,
             };
 
             // prepare form state for composeAction

diff --git a/...s/wallet/trading/common/TradingForm/TradingFormInput/TradingFormSwitcherExchangeRates.tsx b/...s/wallet/trading/common/TradingForm/TradingFormInput/TradingFormSwitcherExchangeRates.tsx
@@ -1,9 +1,7 @@
 import { UseFormSetValue } from 'react-hook-form';
 
-import styled from 'styled-components';
-
-import { Card, Column, Grid, Paragraph, Radio, useElevation } from '@trezor/components';
-import { Elevation, borders, mapElevationToBackground, spacings, spacingsPx } from '@trezor/theme';
+import { Column, Grid, Paragraph, RadioCard } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite';
 import { TranslationKey } from 'src/components/suite/Translation';
@@ -14,42 +12,25 @@ import {
 } from 'src/constants/wallet/trading/form';
 import { RateType, TradingExchangeFormProps } from 'src/types/trading/tradingForm';
 
-const ItemWrapper = styled.div<{ $isSelected: boolean; $elevation: Elevation }>`
-    padding: ${spacingsPx.sm} ${spacingsPx.md};
-    border-radius: ${borders.radii.sm};
-    background: ${mapElevationToBackground};
-
-    ${({ $isSelected }) => !$isSelected && 'background: none;'}
-`;
-
 type ItemProps = {
     isSelected: boolean;
     onClick: () => void;
     title: TranslationKey;
     label: TranslationKey;
 };
 
-const Item = ({ isSelected, onClick, title, label }: ItemProps) => {
-    const { elevation } = useElevation();
-
-    return (
-        <ItemWrapper $isSelected={isSelected} $elevation={elevation}>
-            <Radio labelAlignment="left" isChecked={isSelected} onClick={onClick}>
-                <Column alignItems="flex-start" gap={spacings.xxxs}>
-                    <Paragraph variant={isSelected ? 'default' : 'disabled'}>
-                        <Translation id={title} />
-                    </Paragraph>
-                    <Paragraph
-                        typographyStyle="hint"
-                        variant={isSelected ? 'tertiary' : 'disabled'}
-                    >
-                        <Translation id={label} />
-                    </Paragraph>
-                </Column>
-            </Radio>
-        </ItemWrapper>
-    );
-};
+const Item = ({ isSelected, onClick, title, label }: ItemProps) => (
+    <RadioCard isActive={isSelected} onClick={onClick}>
+        <Column alignItems="flex-start" gap={spacings.xxxs}>
+            <Paragraph typographyStyle="highlight">
+                <Translation id={title} />
+            </Paragraph>
+            <Paragraph typographyStyle="hint">
+                <Translation id={label} />
+            </Paragraph>
+        </Column>
+    </RadioCard>
+);
 
 type TradingFormSwitcherExchangeRatesProps = {
     rateType: RateType;
@@ -65,26 +46,20 @@ export const TradingFormSwitcherExchangeRates = ({
     return (
         <Column gap={spacings.xs}>
             <Translation id="TR_TRADING_RATE" />
-            <Card paddingType="none">
-                <Grid
-                    columns={2}
-                    margin={{ vertical: spacings.xs, horizontal: spacings.xs }}
-                    gap={spacings.xs}
-                >
-                    <Item
-                        isSelected={!floatingRateSelected}
-                        onClick={() => setValue(FORM_RATE_TYPE, FORM_RATE_FIXED)}
-                        title="TR_TRADING_FIX_RATE"
-                        label="TR_TRADING_FIX_RATE_DESCRIPTION"
-                    />
-                    <Item
-                        isSelected={floatingRateSelected}
-                        onClick={() => setValue(FORM_RATE_TYPE, FORM_RATE_FLOATING)}
-                        title="TR_TRADING_FLOATING_RATE"
-                        label="TR_TRADING_FLOATING_RATE_DESCRIPTION"
-                    />
-                </Grid>
-            </Card>
+            <Grid columns={2} gap={spacings.md}>
+                <Item
+                    isSelected={!floatingRateSelected}
+                    onClick={() => setValue(FORM_RATE_TYPE, FORM_RATE_FIXED)}
+                    title="TR_TRADING_FIX_RATE"
+                    label="TR_TRADING_FIX_RATE_DESCRIPTION"
+                />
+                <Item
+                    isSelected={floatingRateSelected}
+                    onClick={() => setValue(FORM_RATE_TYPE, FORM_RATE_FLOATING)}
+                    title="TR_TRADING_FLOATING_RATE"
+                    label="TR_TRADING_FLOATING_RATE_DESCRIPTION"
+                />
+            </Grid>
         </Column>
     );
 };
diff --git a/...let/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSend.tsx b/...let/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSend.tsx
@@ -4,7 +4,7 @@ import type { TradingExchangeType } from '@suite-common/trading';
 import { Button, Column, Divider, InfoItem, Spinner, Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
-import { AccountLabeling, Translation } from 'src/components/suite';
+import { AccountLabeling, Address, Translation } from 'src/components/suite';
 import { useTradingFormContext } from 'src/hooks/wallet/trading/form/useTradingCommonForm';
 import { useTradingWatchTrade } from 'src/hooks/wallet/trading/useTradingWatchTrade';
 import { useTradingNavigation } from 'src/hooks/wallet/useTradingNavigation';
@@ -43,7 +43,7 @@ export const TradingOfferExchangeSend = () => {
                     <InfoItem
                         label={<Translation id="TR_EXCHANGE_SEND_TO" values={{ providerName }} />}
                     >
-                        {sendAddress}
+                        <Address value={sendAddress} />
                     </InfoItem>
                     <Column margin={{ top: 'auto' }}>
                         <Divider margin={{ top: spacings.xs, bottom: spacings.lg }} />

diff --git a/...ing/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendApproval.tsx b/...ing/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendApproval.tsx
@@ -19,7 +19,7 @@ import {
 import { spacings } from '@trezor/theme';
 
 import { saveSelectedQuote } from 'src/actions/wallet/tradingExchangeActions';
-import { AccountLabeling, Translation } from 'src/components/suite';
+import { AccountLabeling, Address, Translation } from 'src/components/suite';
 import { IOAddress } from 'src/components/suite/copy/IOAddress';
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { useTradingFormContext } from 'src/hooks/wallet/trading/form/useTradingCommonForm';
@@ -141,7 +141,7 @@ export const TradingOfferExchangeSendApproval = () => {
                     />
                 }
             >
-                {dexTx.to}
+                <Address value={dexTx.to} />
             </InfoItem>
             {selectedQuote.approvalSendTxHash && (
                 <InfoItem label={<Translation id="TR_EXCHANGE_APPROVAL_TXID" />}>
@@ -283,7 +283,7 @@ export const TradingOfferExchangeSendApproval = () => {
                 </InfoItem>
             )}
 
-            <Column alignItems="center">
+            <Column>
                 <Divider margin={{ top: spacings.xxs, bottom: spacings.lg }} />
                 {(selectedQuote.status === 'APPROVAL_REQ' ||
                     (selectedQuote.status === 'CONFIRM' && approvalType === 'ZERO')) && (

diff --git a/...trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendSwap.tsx b/...trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendSwap.tsx
@@ -23,7 +23,7 @@ import { BottomText } from '@trezor/components/src/components/form/BottomText';
 import { spacings } from '@trezor/theme';
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 
-import { AccountLabeling, FormattedCryptoAmount, Translation } from 'src/components/suite';
+import { AccountLabeling, Address, FormattedCryptoAmount, Translation } from 'src/components/suite';
 import { FORM_SEND_CRYPTO_CURRENCY_SELECT } from 'src/constants/wallet/trading/form';
 import { useTradingFormContext } from 'src/hooks/wallet/trading/form/useTradingCommonForm';
 import { useTradingInfo } from 'src/hooks/wallet/trading/useTradingInfo';
@@ -192,7 +192,7 @@ export const TradingOfferExchangeSendSwap = () => {
             <InfoItem
                 label={<Translation id="TR_EXCHANGE_SWAP_SEND_TO" values={translationValues} />}
             >
-                {dexTx.to}
+                <Address value={dexTx.to} />
             </InfoItem>
 
             <Card
@@ -278,7 +278,7 @@ export const TradingOfferExchangeSendSwap = () => {
                 <BreakableValue>{dexTx.data}</BreakableValue>
             </InfoItem>
 
-            <Column alignItems="center">
+            <Column>
                 <Divider margin={{ top: spacings.xs, bottom: spacings.lg }} />
                 <Button
                     isLoading={callInProgress}

diff --git a/...uite/src/views/wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerify.tsx b/...uite/src/views/wallet/trading/common/TradingSelectedOffer/TradingVerify/TradingVerify.tsx
@@ -184,7 +184,7 @@ export const TradingVerify = ({ tradingVerifyAccount, cryptoId }: TradingVerifyP
                 )}
             </Column>
             {selectedAccountOption && (
-                <Column alignItems="center">
+                <Column>
                     <Divider margin={{ top: spacings.xs, bottom: spacings.lg }} />
                     {(!addressVerified || addressVerified !== address) &&
                         selectedAccountOption.account && (

diff --git a/suite-common/wallet-types/src/sendForm.ts b/suite-common/wallet-types/src/sendForm.ts
@@ -42,4 +42,5 @@ export interface FormState {
     anonymityWarningChecked?: boolean;
     selectedUtxos: AccountUtxo[];
     utxoSorting?: UtxoSorting;
+    isTrading?: boolean;
 }