feat(suite): link on formatedMultitokenAmount

trezor · Nov 21, 2024 · e0890af · e0890af
1 parent 08a4624
commit e0890af
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git 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 ? <Sign value={signValue} /> : null;
+    const { selectedAccount } = useSelector(state => state.wallet);
+    const { network } = selectedAccount;
 
     return (
         <HiddenPlaceholder>
             <Column className={className} alignItems="flex-start">
                 {tokens?.map(token => (
-                    <Row key={token.id} gap={4}>
+                    <Row key={`${token.id}-${token.value}`} gap={4}>
                         <Row>
                             {SignValueComponent}
                             {token.value}x
                         </Row>
                         <Row gap={4}>
-                            ID:
-                            <Id>{token.id}</Id>
+                            {withLink && network?.networkType === 'ethereum' && contract ? (
+                                <StyledTrezorLink
+                                    href={`${network?.explorer.nft}/${contract}/${token.id}`}
+                                >
+                                    ID:
+                                    <Id>{token.id}</Id>
+                                </StyledTrezorLink>
+                            ) : (
+                                <>
+                                    ID:
+                                    <Id>{token.id}</Id>
+                                </>
+                            )}
                         </Row>
                     </Row>
                 ))}

diff --git a/...uite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/AmountDetails.tsx b/...uite/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={
                                 <FiatValue

diff --git a/packages/suite/src/components/wallet/getAmountComponent.tsx b/packages/suite/src/components/wallet/getAmountComponent.tsx
@@ -19,17 +19,25 @@ type GetAmountComponentProps = {
     transfer: TokenTransfer;
     useStyled?: boolean;
     withLink?: boolean;
+    contract?: string;
 };
 
 export const getAmountComponent = ({
     transfer,
     useStyled = false,
     withLink = false,
+    contract,
 }: GetAmountComponentProps) => {
     const operation = getTxOperation(transfer.type);
     if (isNftTokenTransfer(transfer)) {
         if (isMultitoken(transfer)) {
-            return <FormattedMultitokenAmount tokens={transfer.multiTokenValues} />;
+            return (
+                <FormattedMultitokenAmount
+                    tokens={transfer.multiTokenValues}
+                    contract={contract}
+                    withLink={withLink}
+                />
+            );
         }
         if (useStyled) {
             return <StyledFormattedNftAmount transfer={transfer} isWithLink={withLink} />;