From 3e0084e926f22d847e2deab42ea30c71785b3105 Mon Sep 17 00:00:00 2001
From: Ananyamadhu08 <78725970+Ananyamadhu08@users.noreply.github.com>
Date: Tue, 4 Apr 2023 04:13:52 +0530
Subject: [PATCH 1/2] feat: replaced typography with text comp

---
 .../detected-token-address.js                     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/ui/components/app/detected-token/detected-token-address/detected-token-address.js b/ui/components/app/detected-token/detected-token-address/detected-token-address.js
index 9ae894aafc1b..41b91803e664 100644
--- a/ui/components/app/detected-token/detected-token-address/detected-token-address.js
+++ b/ui/components/app/detected-token/detected-token-address/detected-token-address.js
@@ -6,16 +6,16 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 
 import Box from '../../../ui/box';
 import Button from '../../../ui/button';
-import Typography from '../../../ui/typography';
 import Tooltip from '../../../ui/tooltip';
 
 import {
   DISPLAY,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 
 import { shortenAddress } from '../../../../helpers/utils/util';
+import { Text } from '../../../component-library';
 
 const DetectedTokenAddress = ({ tokenAddress }) => {
   const t = useI18nContext();
@@ -23,17 +23,18 @@ const DetectedTokenAddress = ({ tokenAddress }) => {
 
   return (
     <Box display={DISPLAY.INLINE_FLEX} className="detected-token-address">
-      <Typography variant={TypographyVariant.H7} color={TextColor.textDefault}>
+      <Text variant={TextVariant.bodySm} as="h7" color={TextColor.textDefault}>
         {`${t('tokenAddress')}:`}
-      </Typography>
-      <Typography
-        variant={TypographyVariant.H7}
+      </Text>
+      <Text
+        variant={TextVariant.bodySm}
+        as="h7"
         color={TextColor.primaryDefault}
         marginLeft={2}
         marginRight={2}
       >
         {shortenAddress(tokenAddress)}
-      </Typography>
+      </Text>
       <Tooltip
         position="bottom"
         title={copied ? t('copiedExclamation') : t('copyToClipboard')}

From 5c37c18d17d3d0645adabcd375f799b502ddd340 Mon Sep 17 00:00:00 2001
From: Ananyamadhu08 <78725970+Ananyamadhu08@users.noreply.github.com>
Date: Fri, 7 Apr 2023 22:27:08 +0530
Subject: [PATCH 2/2] fix: changed h7 to h6

---
 .../detected-token-address/detected-token-address.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/detected-token/detected-token-address/detected-token-address.js b/ui/components/app/detected-token/detected-token-address/detected-token-address.js
index 41b91803e664..2e752bce1948 100644
--- a/ui/components/app/detected-token/detected-token-address/detected-token-address.js
+++ b/ui/components/app/detected-token/detected-token-address/detected-token-address.js
@@ -23,12 +23,12 @@ const DetectedTokenAddress = ({ tokenAddress }) => {
 
   return (
     <Box display={DISPLAY.INLINE_FLEX} className="detected-token-address">
-      <Text variant={TextVariant.bodySm} as="h7" color={TextColor.textDefault}>
+      <Text variant={TextVariant.bodySm} as="h6" color={TextColor.textDefault}>
         {`${t('tokenAddress')}:`}
       </Text>
       <Text
         variant={TextVariant.bodySm}
-        as="h7"
+        as="h6"
         color={TextColor.primaryDefault}
         marginLeft={2}
         marginRight={2}