From b048c2f4b341d5a6b6778bd58bec1174be434b35 Mon Sep 17 00:00:00 2001
From: jainex17 <jainexp017@gmail.com>
Date: Sat, 1 Jul 2023 21:53:16 +0530
Subject: [PATCH] Replacing deprecated constants with enums

---
 .../confirmation-network-switch.js            | 30 +++++++++----------
 .../templates/add-ethereum-chain.js           | 30 +++++++++----------
 .../list-with-search/list-with-search.js      | 14 ++++-----
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js b/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js
index 7f0775e382c0..4af4e9e1c582 100644
--- a/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js
+++ b/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js
@@ -6,12 +6,12 @@ import SiteIcon from '../../../../components/ui/site-icon';
 import Typography from '../../../../components/ui/typography/typography';
 import {
   TypographyVariant,
-  FONT_WEIGHT,
-  DISPLAY,
+  FontWeight,
+  Display,
   JustifyContent,
-  BLOCK_SIZES,
+  BlockSize,
   AlignItems,
-  TEXT_ALIGN,
+  TextAlign,
   TextColor,
 } from '../../../../helpers/constants/design-system';
 import {
@@ -26,14 +26,14 @@ export default function ConfirmationNetworkSwitch({ newNetwork }) {
   return (
     <Box
       className="confirmation-network-switch"
-      display={DISPLAY.FLEX}
-      height={BLOCK_SIZES.FULL}
+      display={Display.Flex}
+      height={BlockSize.Full}
       justifyContent={JustifyContent.center}
       marginTop={8}
     >
       <Box
         className="confirmation-network-switch__icon"
-        display={DISPLAY.BLOCK}
+        display={Display.Block}
       >
         {chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
           <SiteIcon
@@ -49,10 +49,10 @@ export default function ConfirmationNetworkSwitch({ newNetwork }) {
         <Typography
           color={TextColor.textDefault}
           variant={TypographyVariant.H6}
-          fontWeight={FONT_WEIGHT.NORMAL}
-          align={TEXT_ALIGN.CENTER}
+          fontWeight={FontWeight.Normal}
+          align={TextAlign.Center}
           boxProps={{
-            display: DISPLAY.FLEX,
+            display: Display.Flex,
             justifyContent: JustifyContent.center,
           }}
         >
@@ -61,7 +61,7 @@ export default function ConfirmationNetworkSwitch({ newNetwork }) {
       </Box>
       <Box
         className="confirmation-network-switch__center-icon"
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
       >
@@ -70,7 +70,7 @@ export default function ConfirmationNetworkSwitch({ newNetwork }) {
       </Box>
       <Box
         className="confirmation-network-switch__icon"
-        display={DISPLAY.BLOCK}
+        display={Display.Block}
       >
         {newNetwork.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
           <SiteIcon
@@ -86,10 +86,10 @@ export default function ConfirmationNetworkSwitch({ newNetwork }) {
         <Typography
           color={TextColor.textDefault}
           variant={TypographyVariant.H6}
-          fontWeight={FONT_WEIGHT.NORMAL}
-          align={TEXT_ALIGN.CENTER}
+          fontWeight={FontWeight.Normal}
+          align={TextAlign.Center}
           boxProps={{
-            display: DISPLAY.FLEX,
+            display: Display.Flex,
             justifyContent: JustifyContent.center,
           }}
         >
diff --git a/ui/pages/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmation/templates/add-ethereum-chain.js
index 362a8d797956..6bf2d3cd9d98 100644
--- a/ui/pages/confirmation/templates/add-ethereum-chain.js
+++ b/ui/pages/confirmation/templates/add-ethereum-chain.js
@@ -2,11 +2,11 @@ import { ethErrors } from 'eth-rpc-errors';
 import React from 'react';
 import { infuraProjectId } from '../../../../shared/constants/network';
 import {
-  SEVERITIES,
+  Severity,
   TypographyVariant,
-  TEXT_ALIGN,
-  DISPLAY,
-  FLEX_DIRECTION,
+  TextAlign,
+  Display,
+  FlexDirection,
   AlignItems,
   JustifyContent,
   BackgroundColor,
@@ -18,7 +18,7 @@ import { jsonRpcRequest } from '../../../../shared/modules/rpc.utils';
 
 const UNRECOGNIZED_CHAIN = {
   id: 'UNRECOGNIZED_CHAIN',
-  severity: SEVERITIES.WARNING,
+  severity: Severity.Warning,
   content: {
     element: 'span',
     children: {
@@ -32,7 +32,7 @@ const UNRECOGNIZED_CHAIN = {
 
 const MISMATCHED_CHAIN_RECOMMENDATION = {
   id: 'MISMATCHED_CHAIN_RECOMMENDATION',
-  severity: SEVERITIES.WARNING,
+  severity: Severity.Warning,
   content: {
     element: 'span',
     children: {
@@ -63,7 +63,7 @@ const MISMATCHED_CHAIN_RECOMMENDATION = {
 
 const MISMATCHED_NETWORK_NAME = {
   id: 'MISMATCHED_NETWORK_NAME',
-  severity: SEVERITIES.WARNING,
+  severity: Severity.Warning,
   content: {
     element: 'span',
     children: {
@@ -77,7 +77,7 @@ const MISMATCHED_NETWORK_NAME = {
 
 const MISMATCHED_NETWORK_SYMBOL = {
   id: 'MISMATCHED_NETWORK_SYMBOL',
-  severity: SEVERITIES.DANGER,
+  severity: Severity.Danger,
   content: {
     element: 'span',
     children: {
@@ -91,7 +91,7 @@ const MISMATCHED_NETWORK_SYMBOL = {
 
 const MISMATCHED_NETWORK_RPC = {
   id: 'MISMATCHED_NETWORK_RPC',
-  severity: SEVERITIES.DANGER,
+  severity: Severity.Danger,
   content: {
     element: 'span',
     children: {
@@ -105,7 +105,7 @@ const MISMATCHED_NETWORK_RPC = {
 
 const MISMATCHED_NETWORK_RPC_CHAIN_ID = {
   id: 'MISMATCHED_NETWORK_RPC_CHAIN_ID',
-  severity: SEVERITIES.DANGER,
+  severity: Severity.Danger,
   content: {
     element: 'span',
     children: {
@@ -119,7 +119,7 @@ const MISMATCHED_NETWORK_RPC_CHAIN_ID = {
 
 const ERROR_CONNECTING_TO_RPC = {
   id: 'ERROR_CONNECTING_TO_RPC',
-  severity: SEVERITIES.DANGER,
+  severity: Severity.Danger,
   content: {
     element: 'span',
     children: {
@@ -192,8 +192,8 @@ function getValues(pendingApproval, t, actions, history) {
         element: 'Box',
         key: 'network-box',
         props: {
-          textAlign: TEXT_ALIGN.CENTER,
-          display: DISPLAY.FLEX,
+          textAlign: TextAlign.Center,
+          display: Display.Flex,
           justifyContent: JustifyContent.center,
           marginTop: 4,
           marginBottom: 2,
@@ -318,8 +318,8 @@ function getValues(pendingApproval, t, actions, history) {
           variant: TypographyVariant.H7,
           boxProps: {
             margin: originIsMetaMask ? [0, 8] : 0,
-            display: DISPLAY.FLEX,
-            flexDirection: FLEX_DIRECTION.COLUMN,
+            display: Display.Flex,
+            flexDirection: FlexDirection.Column,
             alignItems: AlignItems.center,
           },
         },
diff --git a/ui/pages/swaps/list-with-search/list-with-search.js b/ui/pages/swaps/list-with-search/list-with-search.js
index 64223da180b4..aeddbacb1592 100644
--- a/ui/pages/swaps/list-with-search/list-with-search.js
+++ b/ui/pages/swaps/list-with-search/list-with-search.js
@@ -6,12 +6,12 @@ import log from 'loglevel';
 
 import Box from '../../../components/ui/box';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   JustifyContent,
   AlignItems,
   TextVariant,
-  BLOCK_SIZES,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 import { TextFieldSearch, Text } from '../../../components/component-library';
 import ItemList from '../searchable-item-list/item-list';
@@ -112,11 +112,11 @@ export default function ListWithSearch({
   };
 
   return (
-    <Box className="list-with-search" width={BLOCK_SIZES.FULL} tabIndex="0">
+    <Box className="list-with-search" width={BlockSize.Full} tabIndex="0">
       <Box
         style={{ gridColumnStart: 1, gridColumnEnd: 3 }}
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
       >
         <TextFieldSearch
           id="list-with-search__text-search"
@@ -150,7 +150,7 @@ export default function ListWithSearch({
         <Box
           marginTop={1}
           marginBottom={5}
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
         >