feat(suite): display multitoken value and adjust styles

packages/components/src/components/typography/Link/Link.tsx

@@ -22,12 +22,13 @@ type AllowedLinkTextProps = Pick<TextPropsCommon, (typeof allowedLinkTextProps)[
 
 type AProps = TransientProps<AllowedLinkTextProps> & {
     $variant?: 'default' | 'nostyle' | 'underline';
+    $color?: string;
 };
 
 const A = styled.a<AProps>`
     text-decoration: none;
     cursor: pointer;
-    color: ${({ theme }) => theme.textDefault};
+    color: ${({ $color, theme }) => $color || theme.textDefault};
     font-weight: 500;
     display: inline-flex;
     align-items: center;
@@ -68,6 +69,7 @@ type LinkProps = AllowedLinkTextProps & {
     className?: string;
     variant?: 'default' | 'nostyle' | 'underline'; // Todo: refactor, variant has different meaning in our design system
     icon?: IconName;
+    color?: string;
     'data-testid'?: string;
 };
 
@@ -78,6 +80,7 @@ const Link = ({
     onClick,
     'data-testid': dataTest,
     children,
+    color,
     className,
     variant,
     typographyStyle = 'body',
@@ -99,6 +102,7 @@ const Link = ({
             $variant={variant}
             className={className}
             {...textProps}
+            $color={color}
         >
             {children}
             {icon && <Icon size={iconSize} name={icon} />}

packages/suite/src/components/suite/FormattedCryptoAmount.tsx

@@ -8,6 +8,8 @@ import {
     networkAmountToSmallestUnit,
 } from '@suite-common/wallet-utils';
 import { isSignValuePositive } from '@suite-common/formatters';
+import { Row } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
 import { useBitcoinAmountUnit } from 'src/hooks/wallet/useBitcoinAmountUnit';
 import { useSelector } from 'src/hooks/suite';
@@ -17,10 +19,6 @@ import { BlurUrls } from 'src/views/wallet/tokens/common/BlurUrls';
 
 import { RedactNumericalValue } from './RedactNumericalValue';
 
-const Container = styled.span`
-    max-width: 100%;
-`;
-
 const Value = styled.span`
     font-variant-numeric: tabular-nums;
     overflow: hidden;
@@ -45,8 +43,8 @@ export const FormattedCryptoAmount = ({
     signValue,
     disableHiddenPlaceholder,
     isRawString,
-    'data-testid': dataTest,
     className,
+    'data-testid': dataTest,
 }: FormattedCryptoAmountProps) => {
     const locale = useSelector(selectLanguage);
 
@@ -97,23 +95,25 @@ export const FormattedCryptoAmount = ({
     }
 
     const content = (
-        <Container className={className}>
-            {!!signValue && <Sign value={signValue} />}
-            <Value data-testid={dataTest}>
-                <RedactNumericalValue value={formattedValue} />
-            </Value>
+        <Row width="100%" gap={spacings.xxs} className={className}>
+            <Row>
+                {!!signValue && <Sign value={signValue} />}
+                <Value data-testid={dataTest}>
+                    <RedactNumericalValue value={formattedValue} />
+                </Value>
+            </Row>
             {formattedSymbol && (
                 <>
                     {' '}
                     <BlurUrls text={formattedSymbol} />
                 </>
             )}
-        </Container>
+        </Row>
     );
 
     if (disableHiddenPlaceholder) {
         return content;
     }
 
-    return <HiddenPlaceholder className={className}>{content}</HiddenPlaceholder>;
+    return <HiddenPlaceholder>{content}</HiddenPlaceholder>;
 };

packages/suite/src/components/suite/FormattedNftAmount.tsx

@@ -1,89 +1,128 @@
-import styled from 'styled-components';
+import { useTheme } from 'styled-components';
 
 import { SignValue } from '@suite-common/suite-types';
-import { getNftTokenId } from '@suite-common/wallet-utils';
+import { isNftMultitokenTransfer } from '@suite-common/wallet-utils';
 import { TokenTransfer } from '@trezor/connect';
-import { variables } from '@trezor/components';
+import { Box, Column, Row, Text } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
-import { HiddenPlaceholder, Sign } from 'src/components/suite';
+import { HiddenPlaceholder, Sign, Translation } from 'src/components/suite';
 // importing directly, otherwise unit tests fail, seems to be a styled-components issue
 import { TrezorLink } from 'src/components/suite/TrezorLink';
 import { useSelector } from 'src/hooks/suite/useSelector';
-
-const Container = styled.div`
-    max-width: 100%;
-    display: flex;
-`;
-
-const Symbol = styled.div`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 120px;
-`;
-
-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;
-`;
-
-const NoLink = styled.div`
-    display: flex;
-`;
-
-const Id = styled.div`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 145px;
-`;
+import { useTranslation } from 'src/hooks/suite';
+import { BlurUrls } from 'src/views/wallet/tokens/common/BlurUrls';
 
 export interface FormattedNftAmountProps {
     transfer: TokenTransfer;
     signValue?: SignValue;
     className?: string;
     isWithLink?: boolean;
+    alignMultitoken?: 'flex-end' | 'flex-start';
 }
 
 export const FormattedNftAmount = ({
     transfer,
     signValue,
     className,
     isWithLink,
+    alignMultitoken = 'flex-end',
 }: FormattedNftAmountProps) => {
-    const id = getNftTokenId(transfer);
-
+    const theme = useTheme();
+    const { translationString } = useTranslation();
     const { selectedAccount } = useSelector(state => state.wallet);
     const { network } = selectedAccount;
-    const explorerUrl =
-        network?.networkType === 'ethereum'
-            ? `${network?.explorer.nft}/${transfer.contract}/${id}`
-            : undefined;
 
-    const idComponent = <Id>{id}</Id>;
-    const symbolComponent = transfer.symbol ? <Symbol>&nbsp;{transfer.symbol}</Symbol> : null;
+    const symbolComponent = transfer.symbol ? (
+        <Text maxWidth={120} ellipsisLineCount={1}>
+            {transfer.symbol}
+        </Text>
+    ) : null;
+
+    const isMultitoken = isNftMultitokenTransfer(transfer);
+
+    if (isMultitoken) {
+        const tokens = transfer.multiTokenValues;
+
+        return (
+            <HiddenPlaceholder>
+                <Column alignItems={alignMultitoken}>
+                    {tokens?.map((token, index) => (
+                        <Row key={`${token.id}-${index}`} gap={spacings.xxs}>
+                            <Row>
+                                {signValue ? <Sign value={signValue} /> : null}
+                                {transfer.name ? (
+                                    <BlurUrls
+                                        text={translationString('TR_COLLECTION_NAME_OF_TOKEN_ID', {
+                                            tokenValue: token.value,
+                                            collectionName: transfer.name,
+                                        })}
+                                    />
+                                ) : (
+                                    <Row gap={spacings.xxs}>
+                                        <Row>{token.value}x</Row>
+                                        <Translation id="TR_TOKEN_ID" />
+                                    </Row>
+                                )}
+                            </Row>
+                            {isWithLink && network?.networkType === 'ethereum' ? (
+                                <TrezorLink
+                                    href={`${network?.explorer.nft}/${transfer.contract}/${token.id}`}
+                                    color={theme.textSecondaryHighlight}
+                                    variant="underline"
+                                    typographyStyle="label"
+                                >
+                                    <Text maxWidth={145} ellipsisLineCount={1}>
+                                        {token.id}
+                                    </Text>
+                                </TrezorLink>
+                            ) : (
+                                <Text maxWidth={145} ellipsisLineCount={1}>
+                                    {token.id}
+                                </Text>
+                            )}
+                        </Row>
+                    ))}
+                </Column>
+            </HiddenPlaceholder>
+        );
+    }
 
     return (
         <HiddenPlaceholder>
-            <Container className={className}>
+            <Row className={className}>
                 {signValue ? <Sign value={signValue} /> : null}
-                ID:&nbsp;
+                <Box margin={{ right: spacings.xxs }}>
+                    <Translation id="TR_TOKEN_ID" />
+                </Box>
                 {isWithLink ? (
-                    <StyledTrezorLink href={explorerUrl}>
-                        {idComponent}
-                        {symbolComponent}
-                    </StyledTrezorLink>
+                    <TrezorLink
+                        href={
+                            network?.networkType === 'ethereum'
+                                ? `${network?.explorer.nft}/${transfer.contract}/${transfer.amount}`
+                                : undefined
+                        }
+                        color={theme.textSecondaryHighlight}
+                        variant="underline"
+                        typographyStyle="label"
+                    >
+                        <Row gap={spacings.zero}>
+                            <Text maxWidth={145} ellipsisLineCount={1}>
+                                {transfer.amount}
+                            </Text>
+                            &nbsp;
+                            {symbolComponent}
+                        </Row>
+                    </TrezorLink>
                 ) : (
-                    <NoLink>
-                        {idComponent}
+                    <Row gap={spacings.xxs}>
+                        <Text maxWidth={145} ellipsisLineCount={1}>
+                            {transfer.amount}
+                        </Text>
                         {symbolComponent}
-                    </NoLink>
+                    </Row>
                 )}
-            </Container>
+            </Row>
         </HiddenPlaceholder>
     );
 };

packages/suite/src/components/suite/graph/TransactionsGraph/GraphTooltipAccount.tsx

@@ -1,20 +1,17 @@
-import styled from 'styled-components';
 import { TooltipProps } from 'recharts';
 
 import { NetworkSymbol } from '@suite-common/wallet-config';
 import { Formatters, useFormatters } from '@suite-common/formatters';
 import { SignOperator } from '@suite-common/suite-types';
+import { Row } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
 import { FormattedCryptoAmount } from 'src/components/suite/FormattedCryptoAmount';
 import { CommonAggregatedHistory, GraphRange } from 'src/types/wallet/graph';
 
 import type { CryptoGraphProps } from './TransactionsGraph';
 import { GraphTooltipBase } from './GraphTooltipBase';
 
-const StyledCryptoAmount = styled(FormattedCryptoAmount)`
-    margin-right: 2px;
-`;
-
 const formatAmount = (
     amount: string | undefined,
     symbol: NetworkSymbol,
@@ -26,14 +23,16 @@ const formatAmount = (
     const { FiatAmountFormatter } = formatters;
 
     return (
-        <>
+        <Row>
             {amount && (
-                <StyledCryptoAmount
-                    value={amount}
-                    symbol={symbol}
-                    signValue={sign}
-                    disableHiddenPlaceholder
-                />
+                <Row margin={{ right: spacings.xxs }}>
+                    <FormattedCryptoAmount
+                        value={amount}
+                        symbol={symbol}
+                        signValue={sign}
+                        disableHiddenPlaceholder
+                    />
+                </Row>
             )}
 
             {fiatAmount && localCurrency && (
@@ -42,7 +41,7 @@ const formatAmount = (
                     <FiatAmountFormatter currency={localCurrency} value={fiatAmount} />)
                 </>
             )}
-        </>
+        </Row>
     );
 };