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 ;