From 944d39ed3ae06e4030428b72b7a72cbf2fd1b9b9 Mon Sep 17 00:00:00 2001
From: Harsh Shukla <125105825+PrgrmrHarshShukla@users.noreply.github.com>
Date: Fri, 5 May 2023 16:45:39 +0530
Subject: [PATCH] Part of #17670: Replace Typography with Text component in
 smart-transaction-status.js (#18743)

* Update smart-transaction-status.js

* Update smart-transaction-status.js

* Update smart-transaction-status.js again.

* Update smart-transaction-status.js

* Update smart-transaction-status.js

* Update ui/pages/swaps/smart-transaction-status/smart-transaction-status.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update smart-transaction-status.js

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
---
 .../smart-transaction-status.js               | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
index a1fee0351..f926ac30b 100644
--- a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
+++ b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
@@ -3,7 +3,6 @@ import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { getBlockExplorerLink } from '@metamask/etherscan-link';
 import { isEqual } from 'lodash';
-
 import { I18nContext } from '../../../contexts/i18n';
 import {
   getFetchParams,
@@ -40,7 +39,7 @@ import {
   TextVariant,
   JustifyContent,
   DISPLAY,
-  FONT_WEIGHT,
+  FontWeight,
   AlignItems,
   TextColor,
 } from '../../../helpers/constants/design-system';
@@ -330,13 +329,19 @@ export default function SmartTransactionStatusPage() {
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
         >
-          <Text color={TextColor.textAlternative} variant={TextVariant.bodySm}>
+          <Text
+            color={TextColor.textAlternative}
+            variant={TextVariant.bodySm}
+            as="h6"
+          >
             {`${fetchParams?.value && Number(fetchParams.value).toFixed(5)} `}
           </Text>
           <Text
             color={TextColor.textAlternative}
             variant={TextVariant.bodySmBold}
-            boxProps={{ marginLeft: 1, marginRight: 2 }}
+            as="h6"
+            marginLeft={1}
+            marginRight={2}
           >
             {fetchParamsSourceTokenInfo.symbol ??
               latestSmartTransaction?.sourceTokenSymbol}
@@ -369,14 +374,16 @@ export default function SmartTransactionStatusPage() {
           <Text
             color={TextColor.textAlternative}
             variant={TextVariant.bodySm}
-            boxProps={{ marginLeft: 2 }}
+            as="h6"
+            marginLeft={2}
           >
             {`~${destinationValue && Number(destinationValue).toFixed(5)} `}
           </Text>
           <Text
             color={TextColor.textAlternative}
             variant={TextVariant.bodySmBold}
-            boxProps={{ marginLeft: 1 }}
+            as="h6"
+            marginLeft={1}
           >
             {fetchParamsDestinationTokenInfo.symbol ??
               latestSmartTransaction?.destinationTokenSymbol}
@@ -403,14 +410,16 @@ export default function SmartTransactionStatusPage() {
             <Text
               color={TextColor.textAlternative}
               variant={TextVariant.bodySm}
-              boxProps={{ marginLeft: 1 }}
+              as="h6"
+              marginLeft={1}
             >
               {`${t('stxSwapCompleteIn')} `}
             </Text>
             <Text
               color={TextColor.textAlternative}
               variant={TextVariant.bodySmBold}
-              boxProps={{ marginLeft: 1 }}
+              as="h6"
+              marginLeft={1}
               className="smart-transaction-status__remaining-time"
             >
               {showRemainingTimeInMinAndSec(timeLeftForPendingStxInSec)}
@@ -420,7 +429,8 @@ export default function SmartTransactionStatusPage() {
         <Text
           color={TextColor.textDefault}
           variant={TextVariant.headingSm}
-          fontWeight={FONT_WEIGHT.BOLD}
+          as="h4"
+          fontWeight={FontWeight.Bold}
         >
           {headerText}
         </Text>
@@ -441,7 +451,8 @@ export default function SmartTransactionStatusPage() {
         {description && (
           <Text
             variant={TextVariant.bodySm}
-            boxProps={{ ...(blockExplorerUrl && { margin: [1, 0, 0] }) }}
+            as="h6"
+            marginTop={blockExplorerUrl && 1}
             color={TextColor.textAlternative}
           >
             {description}
@@ -460,7 +471,8 @@ export default function SmartTransactionStatusPage() {
         {subDescription && (
           <Text
             variant={TextVariant.bodySm}
-            boxProps={{ marginTop: 8 }}
+            as="h6"
+            marginTop={8}
             color={TextColor.textAlternative}
           >
             {subDescription}