diff --git a/packages/suite/src/components/FormattedMultitokenAmount.tsx b/packages/suite/src/components/FormattedMultitokenAmount.tsx index f24d4b806d2..f3d389e2dc3 100644 --- a/packages/suite/src/components/FormattedMultitokenAmount.tsx +++ b/packages/suite/src/components/FormattedMultitokenAmount.tsx @@ -2,9 +2,10 @@ import styled from 'styled-components'; import { SignValue } from '@suite-common/suite-types'; import { TokenTransfer } from '@trezor/connect'; -import { Column, Row } from '@trezor/components'; +import { Column, Row, variables } from '@trezor/components'; -import { HiddenPlaceholder, Sign } from 'src/components/suite'; +import { HiddenPlaceholder, Sign, TrezorLink } from 'src/components/suite'; +import { useSelector } from 'src/hooks/suite'; const Id = styled.div` white-space: nowrap; @@ -13,31 +14,57 @@ const Id = styled.div` max-width: 145px; `; +const StyledTrezorLink = styled(TrezorLink)` + color: ${({ theme }) => theme.legacy.TYPE_GREEN}; + text-decoration: underline; + display: flex; + font-size: ${variables.FONT_SIZE.TINY}; + line-height: initial; + align-items: center; +`; + export interface FormattedMultitokenAmountProps { tokens: TokenTransfer['multiTokenValues']; signValue?: SignValue; className?: string; + contract?: string; + withLink?: boolean; } export const FormattedMultitokenAmount = ({ tokens, signValue, className, + contract, + withLink = false, }: FormattedMultitokenAmountProps) => { const SignValueComponent = signValue ? : null; + const { selectedAccount } = useSelector(state => state.wallet); + const { network } = selectedAccount; return ( {tokens?.map(token => ( - + {SignValueComponent} {token.value}x - ID: - {token.id} + {withLink && network?.networkType === 'ethereum' && contract ? ( + + ID: + {token.id} + + ) : ( + <> + ID: + {token.id} + + )} ))} diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/AmountDetails.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/AmountDetails.tsx index 0572edb0d0c..bac743b3235 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/AmountDetails.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/AmountDetails.tsx @@ -235,6 +235,7 @@ export const AmountDetails = ({ tx, isTestnet }: AmountDetailsProps) => { secondColumn={getAmountComponent({ transfer: token, withLink: true, + contract: token.contract, })} thirdColumn={ { const operation = getTxOperation(transfer.type); if (isNftTokenTransfer(transfer)) { if (isMultitoken(transfer)) { - return ; + return ( + + ); } if (useStyled) { return ;