From bc45a18755a614401a664812786bf39d2c54fa62 Mon Sep 17 00:00:00 2001
From: Albina Nikiforova <albina.nikiforova.5670@gmail.com>
Date: Mon, 2 Dec 2024 13:58:24 +0100
Subject: [PATCH] fix(suite): fix typography style of link and blur urls

---
 .../src/components/suite/FormattedNftAmount.tsx      | 12 +++++++-----
 .../AdvancedTxDetails/AmountDetails.tsx              |  1 +
 .../AdvancedTxDetails/IODetails/IODetails.tsx        |  1 +
 .../suite/src/components/wallet/AmountComponent.tsx  |  4 ++++
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/suite/src/components/suite/FormattedNftAmount.tsx b/packages/suite/src/components/suite/FormattedNftAmount.tsx
index 0f3f3578d2e6..90a36e95a2fd 100644
--- a/packages/suite/src/components/suite/FormattedNftAmount.tsx
+++ b/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,6 +28,7 @@ export const FormattedNftAmount = ({
     className,
     isWithLink,
     alignMultitoken = 'flex-end',
+    linkTypographyStyle,
 }: FormattedNftAmountProps) => {
     const theme = useTheme();
     const { translationString } = useTranslation();
@@ -34,8 +36,8 @@ export const FormattedNftAmount = ({
     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}>
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 6736223d2853..e1e3113d8f44 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
@@ -185,6 +185,7 @@ export const AmountDetails = ({ tx, isTestnet }: AmountDetailsProps) => {
                                         withLink={true}
                                         withSign={true}
                                         alignMultitoken="flex-start"
+                                        linkTypographyStyle="hint"
                                     />
                                 </Text>
                             </Table.Cell>
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx
index 5e9a7711e210..d79fa5df77fb 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx
+++ b/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)
diff --git a/packages/suite/src/components/wallet/AmountComponent.tsx b/packages/suite/src/components/wallet/AmountComponent.tsx
index 1fc4d2cc7348..0e9e09fdd6db 100644
--- a/packages/suite/src/components/wallet/AmountComponent.tsx
+++ b/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,6 +10,7 @@ type AmountComponentProps = {
     withLink?: boolean;
     withSign?: boolean;
     alignMultitoken?: 'flex-end' | 'flex-start';
+    linkTypographyStyle?: TypographyStyle;
 };
 
 export const AmountComponent = ({
@@ -16,6 +18,7 @@ export const AmountComponent = ({
     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}
             />
         );
     }