fix(suite): fix typography style of link and blur urls

Author: enjojoy

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

@@ -4,7 +4,7 @@ import { SignValue } from '@suite-common/suite-types';
 import { isNftMultitokenTransfer } from '@suite-common/wallet-utils';
 import { TokenTransfer } from '@trezor/connect';
 import { Box, Column, Row, Text } from '@trezor/components';
-import { spacings } from '@trezor/theme';
+import { spacings, TypographyStyle } from '@trezor/theme';
 
 import { HiddenPlaceholder, Sign, Translation } from 'src/components/suite';
 // importing directly, otherwise unit tests fail, seems to be a styled-components issue
@@ -19,6 +19,7 @@ export interface FormattedNftAmountProps {
     className?: string;
     isWithLink?: boolean;
     alignMultitoken?: 'flex-end' | 'flex-start';
+    linkTypographyStyle?: TypographyStyle;
 }
 
 export const FormattedNftAmount = ({
@@ -27,15 +28,16 @@ export const FormattedNftAmount = ({
     className,
     isWithLink,
     alignMultitoken = 'flex-end',
+    linkTypographyStyle,
 }: FormattedNftAmountProps) => {
     const theme = useTheme();
     const { translationString } = useTranslation();
     const { selectedAccount } = useSelector(state => state.wallet);
     const { network } = selectedAccount;
 
     const symbolComponent = transfer.symbol ? (
-        <Text maxWidth={120} ellipsisLineCount={1}>
-            {transfer.symbol}
+        <Text ellipsisLineCount={1}>
+            <BlurUrls text={transfer.symbol} />
         </Text>
     ) : null;
 
@@ -70,7 +72,7 @@ export const FormattedNftAmount = ({
                                     href={`${network?.explorer.nft}/${transfer.contract}/${token.id}`}
                                     color={theme.textSecondaryHighlight}
                                     variant="underline"
-                                    typographyStyle="label"
+                                    typographyStyle={linkTypographyStyle}
                                 >
                                     <Text maxWidth={145} ellipsisLineCount={1}>
                                         {token.id}
@@ -104,7 +106,7 @@ export const FormattedNftAmount = ({
                         }
                         color={theme.textSecondaryHighlight}
                         variant="underline"
-                        typographyStyle="label"
+                        typographyStyle={linkTypographyStyle}
                     >
                         <Row gap={spacings.zero}>
                             <Text maxWidth={145} ellipsisLineCount={1}>

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/AmountDetails.tsx

@@ -185,6 +185,7 @@ export const AmountDetails = ({ tx, isTestnet }: AmountDetailsProps) => {
                                         withLink={true}
                                         withSign={true}
                                         alignMultitoken="flex-start"
+                                        linkTypographyStyle="hint"
                                     />
                                 </Text>
                             </Table.Cell>

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx

@@ -208,6 +208,7 @@ const EthereumSpecificBalanceDetailsRow = ({
                                 transfer={transfer}
                                 isWithLink
                                 alignMultitoken="flex-start"
+                                linkTypographyStyle="label"
                             />
                         ) : (
                             formatAmount(transfer.amount, transfer.decimals)

packages/suite/src/components/wallet/AmountComponent.tsx

@@ -1,5 +1,6 @@
 import { isNftTokenTransfer, formatAmount, getTxOperation } from '@suite-common/wallet-utils';
 import { TokenTransfer } from '@trezor/connect';
+import { TypographyStyle } from '@trezor/theme';
 
 import { FormattedNftAmount } from 'src/components/suite/FormattedNftAmount';
 import { FormattedCryptoAmount } from 'src/components/suite/FormattedCryptoAmount';
@@ -9,13 +10,15 @@ type AmountComponentProps = {
     withLink?: boolean;
     withSign?: boolean;
     alignMultitoken?: 'flex-end' | 'flex-start';
+    linkTypographyStyle?: TypographyStyle;
 };
 
 export const AmountComponent = ({
     transfer,
     withLink = false,
     withSign = false,
     alignMultitoken,
+    linkTypographyStyle,
 }: AmountComponentProps): React.ReactNode => {
     const operation = getTxOperation(transfer.type);
 
@@ -26,6 +29,7 @@ export const AmountComponent = ({
                 isWithLink={withLink}
                 signValue={withSign ? operation : null}
                 alignMultitoken={alignMultitoken}
+                linkTypographyStyle={linkTypographyStyle}
             />
         );
     }