diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx index b31dc03fe68..4a9838cbdf6 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx +++ b/packages/suite/src/components/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/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx index e0a82b627bc..d2c6150c520 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutput.tsx +++ b/packages/suite/src/components/suite/modals/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/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx index b6216eff0c0..85f21557ece 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/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 ( @@ -158,6 +166,7 @@ export const TransactionReviewOutputList = ({ state={getState(index, buttonRequestsCount, !!signedTx)} account={account} isRbf={isRbfAction} + isTrading={isTradingAction} stakeType={stakeType} /> diff --git a/packages/suite/src/hooks/wallet/useTradingRecomposeAndSign.ts b/packages/suite/src/hooks/wallet/useTradingRecomposeAndSign.ts index 316be9c49e2..a81566c6eea 100644 --- 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/packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormSwitcherExchangeRates.tsx b/packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormSwitcherExchangeRates.tsx index 16ebd2513e8..3c44c8a1747 100644 --- a/packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormSwitcherExchangeRates.tsx +++ b/packages/suite/src/views/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,14 +12,6 @@ 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; @@ -29,27 +19,18 @@ type ItemProps = { label: TranslationKey; }; -const Item = ({ isSelected, onClick, title, label }: ItemProps) => { - const { elevation } = useElevation(); - - return ( - - - - - - - - - - - - - ); -}; +const Item = ({ isSelected, onClick, title, label }: ItemProps) => ( + + + + + + + + + + +); type TradingFormSwitcherExchangeRatesProps = { rateType: RateType; @@ -65,26 +46,20 @@ export const TradingFormSwitcherExchangeRates = ({ return ( - - - setValue(FORM_RATE_TYPE, FORM_RATE_FIXED)} - title="TR_TRADING_FIX_RATE" - label="TR_TRADING_FIX_RATE_DESCRIPTION" - /> - setValue(FORM_RATE_TYPE, FORM_RATE_FLOATING)} - title="TR_TRADING_FLOATING_RATE" - label="TR_TRADING_FLOATING_RATE_DESCRIPTION" - /> - - + + setValue(FORM_RATE_TYPE, FORM_RATE_FIXED)} + title="TR_TRADING_FIX_RATE" + label="TR_TRADING_FIX_RATE_DESCRIPTION" + /> + setValue(FORM_RATE_TYPE, FORM_RATE_FLOATING)} + title="TR_TRADING_FLOATING_RATE" + label="TR_TRADING_FLOATING_RATE_DESCRIPTION" + /> + ); }; diff --git a/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSend.tsx b/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSend.tsx index cba556ffa57..ee9887dc6ff 100644 --- a/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSend.tsx +++ b/packages/suite/src/views/wallet/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 = () => { } > - {sendAddress} +
diff --git a/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendApproval.tsx b/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendApproval.tsx index 1cfa118d9fb..256edeef3ff 100644 --- a/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendApproval.tsx +++ b/packages/suite/src/views/wallet/trading/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} +
{selectedQuote.approvalSendTxHash && ( }> @@ -283,7 +283,7 @@ export const TradingOfferExchangeSendApproval = () => { )} - + {(selectedQuote.status === 'APPROVAL_REQ' || (selectedQuote.status === 'CONFIRM' && approvalType === 'ZERO')) && ( diff --git a/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendSwap.tsx b/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendSwap.tsx index c3c3ccfb689..d9f7f1a1bcf 100644 --- a/packages/suite/src/views/wallet/trading/common/TradingSelectedOffer/TradingOfferExchange/TradingOfferExchangeSendSwap.tsx +++ b/packages/suite/src/views/wallet/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 = () => { } > - {dexTx.to} +
{ {dexTx.data} - +