From ab0374d48a2002034692a2f9a05af3d3590cb96d Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Wed, 21 Jun 2023 03:44:45 +0530
Subject: [PATCH] Part of #18714: Replacing deprecated constants with enums
 (#19516)

* replacing deprecated constants with enums

* Removing redundant properties
---
 .../advanced-gas-fee-defaults.js              |  9 +++--
 .../contract-details-modal.js                 | 33 +++++++++----------
 .../network-account-balance-header.js         | 28 +++++++---------
 3 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
index c4a57667d..033145d8a 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
@@ -6,8 +6,8 @@ import { EditGasModes } from '../../../../../shared/constants/gas';
 import Box from '../../../ui/box';
 import CheckBox from '../../../ui/check-box';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
@@ -72,8 +72,8 @@ const AdvancedGasFeeDefaults = () => {
 
   return (
     <Box
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.ROW}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Row}
       marginTop={4}
       marginLeft={2}
       marginRight={2}
@@ -90,7 +90,6 @@ const AdvancedGasFeeDefaults = () => {
           variant={TextVariant.bodySm}
           as="h6"
           color={TextColor.textAlternative}
-          margin={0}
         >
           {isDefaultSettingsSelected
             ? t('advancedGasFeeDefaultOptOut')
diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
index e6250a280..db14cb8bc 100644
--- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js
+++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -12,7 +12,7 @@ import Popover from '../../../ui/popover';
 import {
   FontWeight,
   TextVariant,
-  DISPLAY,
+  Display,
   Size,
   BorderStyle,
   BorderColor,
@@ -65,17 +65,16 @@ export default function ContractDetailsModal({
           fontWeight={FontWeight.Bold}
           variant={TextVariant.bodyMd}
           as="h5"
-          display={DISPLAY.FLEX}
-          boxProps={{ marginTop: 0, marginBottom: 0 }}
+          display={Display.Flex}
         >
           {t('contractTitle')}
         </Text>
         <Text
           variant={TextVariant.bodySm}
           as="h6"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           color={TextColor.textAlternative}
-          boxProps={{ marginTop: 2, marginBottom: 0 }}
+          marginTop={2}
         >
           {t('contractDescription')}
         </Text>
@@ -84,14 +83,14 @@ export default function ContractDetailsModal({
             <Text
               variant={TextVariant.bodySm}
               as="h6"
-              display={DISPLAY.FLEX}
+              display={Display.Flex}
               marginTop={4}
               marginBottom={2}
             >
               {nft ? t('contractNFT') : t('contractToken')}
             </Text>
             <Box
-              display={DISPLAY.FLEX}
+              display={Display.Flex}
               borderRadius={Size.SM}
               borderStyle={BorderStyle.solid}
               borderColor={BorderColor.borderDefault}
@@ -124,9 +123,8 @@ export default function ContractDetailsModal({
                   <Text
                     variant={TextVariant.bodySm}
                     as="h6"
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     color={TextColor.textAlternative}
-                    marginTop={0}
                     marginBottom={4}
                   >
                     {ellipsify(tokenAddress)}
@@ -148,7 +146,7 @@ export default function ContractDetailsModal({
                   }
                 >
                   <ButtonIcon
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     iconName={
                       copiedTokenAddress ? IconName.CopySuccess : IconName.Copy
                     }
@@ -163,7 +161,7 @@ export default function ContractDetailsModal({
                 </Tooltip>
                 <Tooltip position="top" title={t('openInBlockExplorer')}>
                   <ButtonIcon
-                    display={DISPLAY.FLEX}
+                    display={Display.Flex}
                     iconName={IconName.Export}
                     color={Color.iconMuted}
                     onClick={() => {
@@ -189,7 +187,7 @@ export default function ContractDetailsModal({
         <Text
           variant={TextVariant.bodySm}
           as="h6"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           marginTop={4}
           marginBottom={2}
         >
@@ -200,7 +198,7 @@ export default function ContractDetailsModal({
             t('contractRequestingSpendingCap')}
         </Text>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           borderRadius={Size.SM}
           borderStyle={BorderStyle.solid}
           borderColor={BorderColor.borderDefault}
@@ -224,9 +222,8 @@ export default function ContractDetailsModal({
               <Text
                 variant={TextVariant.bodySm}
                 as="h6"
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
                 color={TextColor.textAlternative}
-                marginTop={0}
                 marginBottom={4}
               >
                 {ellipsify(toAddress)}
@@ -246,7 +243,7 @@ export default function ContractDetailsModal({
               }
             >
               <ButtonIcon
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
                 iconName={
                   copiedToAddress ? IconName.CopySuccess : IconName.Copy
                 }
@@ -261,7 +258,7 @@ export default function ContractDetailsModal({
             </Tooltip>
             <Tooltip position="top" title={t('openInBlockExplorer')}>
               <ButtonIcon
-                display={DISPLAY.FLEX}
+                display={Display.Flex}
                 iconName={IconName.Export}
                 color={Color.iconMuted}
                 onClick={() => {
@@ -284,7 +281,7 @@ export default function ContractDetailsModal({
         </Box>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         paddingTop={6}
         paddingRight={4}
         paddingBottom={6}
diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.js b/ui/components/app/network-account-balance-header/network-account-balance-header.js
index 79953f3d6..98c91acfe 100644
--- a/ui/components/app/network-account-balance-header/network-account-balance-header.js
+++ b/ui/components/app/network-account-balance-header/network-account-balance-header.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import IconWithFallback from '../../ui/icon-with-fallback';
 import Identicon from '../../ui/identicon';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextVariant,
   FontWeight,
   AlignItems,
@@ -33,22 +33,22 @@ export default function NetworkAccountBalanceHeader({
 
   return (
     <Box
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.ROW}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Row}
       padding={4}
       className="network-account-balance-header"
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.spaceBetween}
     >
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         alignItems={AlignItems.center}
         gap={2}
       >
         <Box
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.ROW}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Row}
           alignItems={AlignItems.center}
         >
           <Identicon address={accountAddress} diameter={32} />
@@ -60,15 +60,14 @@ export default function NetworkAccountBalanceHeader({
           />
         </Box>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.flexStart}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+          flexDirection={FlexDirection.Column}
         >
           <Text
             variant={TextVariant.bodySm}
             as="h6"
             color={TextColor.textAlternative}
-            marginBottom={0}
           >
             {networkName}
           </Text>
@@ -78,22 +77,20 @@ export default function NetworkAccountBalanceHeader({
             as="h6"
             color={TextColor.textDefault}
             fontWeight={FontWeight.Bold}
-            marginTop={0}
           >
             {accountName}
           </Text>
         </Box>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.flexEnd}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        flexDirection={FlexDirection.Column}
       >
         <Text
           variant={TextVariant.bodySm}
           as="h6"
           color={TextColor.textAlternative}
-          marginBottom={0}
         >
           {t('balance')}
         </Text>
@@ -103,7 +100,6 @@ export default function NetworkAccountBalanceHeader({
           as="h6"
           color={TextColor.textDefault}
           fontWeight={FontWeight.Bold}
-          marginTop={0}
           align={TextAlign.End}
         >
           {accountBalance} {tokenName}