From 98c571e90ddf913cc64f3767f903b7fd72dfa579 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 4 Jul 2023 10:17:05 -0500
Subject: [PATCH] UX: Multichain: Use new Box component (#19794)

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
---
 .../__snapshots__/nft-details.test.js.snap           |  4 ++--
 .../account-details/account-details-authenticate.js  |  2 +-
 .../account-details/account-details-display.js       |  2 +-
 .../account-details/account-details-key.js           |  2 +-
 .../multichain/account-details/account-details.js    |  2 +-
 .../app-header/__snapshots__/app-header.test.js.snap | 12 ++++++------
 ui/components/multichain/app-header/app-header.js    |  2 +-
 .../multichain/create-account/create-account.js      |  2 +-
 .../import-account/__snapshots__/json.test.tsx.snap  |  2 +-
 .../multichain/import-account/bottom-buttons.js      |  2 +-
 .../multichain/import-account/import-account.js      |  3 +--
 .../__snapshots__/import-token-link.test.js.snap     | 12 ++++++------
 .../import-token-link/import-token-link.js           |  3 +--
 .../__snapshots__/network-list-item.test.js.snap     |  4 ++--
 .../network-list-item/network-list-item.js           |  2 +-
 .../network-list-menu/network-list-menu.js           |  2 +-
 ui/components/multichain/nft-item/nft-item.js        |  2 +-
 17 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
index 152b24ab7..d3e4cd315 100644
--- a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
+++ b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
@@ -46,7 +46,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         class="box nft-details__nft-item box--flex-direction-row"
       >
         <button
-          class="box nft-item__container box--flex-direction-row"
+          class="mm-box nft-item__container"
           data-testid="nft-item"
         >
           <div
@@ -54,7 +54,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           >
             <img
               alt="MUNK #1 1"
-              class="box nft-item__item nft-item__item-image box--display-block box--flex-direction-row box--justify-content-center"
+              class="mm-box nft-item__item nft-item__item-image mm-box--display-block mm-box--justify-content-center"
               data-testid="nft-image"
               src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
             />
diff --git a/ui/components/multichain/account-details/account-details-authenticate.js b/ui/components/multichain/account-details/account-details-authenticate.js
index 6094f6f5a..ba0b1236b 100644
--- a/ui/components/multichain/account-details/account-details-authenticate.js
+++ b/ui/components/multichain/account-details/account-details-authenticate.js
@@ -13,8 +13,8 @@ import {
   ButtonSecondary,
   FormTextField,
   Text,
+  Box,
 } from '../../component-library';
-import Box from '../../ui/box/box';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { exportAccount, hideWarning } from '../../../store/actions';
 
diff --git a/ui/components/multichain/account-details/account-details-display.js b/ui/components/multichain/account-details/account-details-display.js
index dfceec94d..7e70bfaae 100644
--- a/ui/components/multichain/account-details/account-details-display.js
+++ b/ui/components/multichain/account-details/account-details-display.js
@@ -15,6 +15,7 @@ import { isAbleToExportAccount } from '../../../helpers/utils/util';
 import {
   BUTTON_SECONDARY_SIZES,
   ButtonSecondary,
+  Box,
 } from '../../component-library';
 import {
   AlignItems,
@@ -29,7 +30,6 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Box from '../../ui/box/box';
 
 export const AccountDetailsDisplay = ({
   accounts,
diff --git a/ui/components/multichain/account-details/account-details-key.js b/ui/components/multichain/account-details/account-details-key.js
index 9eb4ba28c..50e3517b1 100644
--- a/ui/components/multichain/account-details/account-details-key.js
+++ b/ui/components/multichain/account-details/account-details-key.js
@@ -6,6 +6,7 @@ import {
   ButtonPrimary,
   IconName,
   Text,
+  Box,
 } from '../../component-library';
 import {
   AlignItems,
@@ -17,7 +18,6 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Box from '../../ui/box/box';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 
 export const AccountDetailsKey = ({ accountName, onClose, privateKey }) => {
diff --git a/ui/components/multichain/account-details/account-details.js b/ui/components/multichain/account-details/account-details.js
index 8ba53230f..c42401d1d 100644
--- a/ui/components/multichain/account-details/account-details.js
+++ b/ui/components/multichain/account-details/account-details.js
@@ -15,8 +15,8 @@ import {
   IconName,
   PopoverHeader,
   Text,
+  Box,
 } from '../../component-library';
-import Box from '../../ui/box/box';
 import { getMetaMaskAccountsOrdered } from '../../../selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index bb44e6a6f..2af5703ba 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -3,7 +3,7 @@
 exports[`App Header should match snapshot 1`] = `
 <div>
   <div
-    class="box multichain-app-header-logo box--margin-2 box--display-none box--sm:display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    class="mm-box multichain-app-header-logo mm-box--margin-2 mm-box--display-none mm-box--sm:display-flex mm-box--justify-content-center mm-box--align-items-center"
     data-testid="app-header-logo"
   >
     <button
@@ -200,10 +200,10 @@ exports[`App Header should match snapshot 1`] = `
     </button>
   </div>
   <div
-    class="box multichain-app-header box--margin-bottom-4 box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-alternative"
+    class="mm-box multichain-app-header mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
   >
     <div
-      class="box multichain-app-header__contents multichain-app-header-shadow box--padding-2 box--padding-right-4 box--padding-left-4 box--gap-2 box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--display-flex"
+      class="mm-box multichain-app-header__contents multichain-app-header-shadow mm-box--padding-2 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
     >
       <div>
         <button
@@ -289,14 +289,14 @@ exports[`App Header should match snapshot 1`] = `
         </span>
       </button>
       <div
-        class="box box--display-flex box--flex-direction-row box--justify-content-flex-end box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--justify-content-flex-end mm-box--align-items-center"
       >
         <div
-          class="box box--display-flex box--gap-4 box--flex-direction-row"
+          class="mm-box mm-box--display-flex mm-box--gap-4"
         >
            
           <div
-            class="box box--display-flex box--flex-direction-row box--justify-content-flex-end box--width-full"
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-end mm-box--width-full"
           >
             <button
               aria-label="Account options"
diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js
index 8f5dd3b5e..d6c9e81b6 100644
--- a/ui/components/multichain/app-header/app-header.js
+++ b/ui/components/multichain/app-header/app-header.js
@@ -29,6 +29,7 @@ import {
   ButtonIconSize,
   IconName,
   PickerNetwork,
+  Box,
 } from '../../component-library';
 ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
 import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
@@ -46,7 +47,6 @@ import {
 } from '../../../selectors';
 import { GlobalMenu, ProductTour, AccountPicker } from '..';
 
-import Box from '../../ui/box/box';
 import {
   hideProductTour,
   toggleAccountMenu,
diff --git a/ui/components/multichain/create-account/create-account.js b/ui/components/multichain/create-account/create-account.js
index de380d982..ccd181164 100644
--- a/ui/components/multichain/create-account/create-account.js
+++ b/ui/components/multichain/create-account/create-account.js
@@ -6,6 +6,7 @@ import {
   ButtonPrimary,
   ButtonSecondary,
   FormTextField,
+  Box,
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
@@ -15,7 +16,6 @@ import {
 } from '../../../selectors';
 import { addNewAccount, setAccountLabel } from '../../../store/actions';
 import { getMostRecentOverviewPage } from '../../../ducks/history/history';
-import Box from '../../ui/box/box';
 import {
   MetaMetricsEventAccountType,
   MetaMetricsEventCategory,
diff --git a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
index 2eec4dbbd..295c50e24 100644
--- a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
+++ b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Json should match snapshot 1`] = `
     </div>
   </div>
   <div
-    class="box box--display-flex box--gap-4 box--flex-direction-row"
+    class="mm-box mm-box--display-flex mm-box--gap-4"
   >
     <button
       class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
diff --git a/ui/components/multichain/import-account/bottom-buttons.js b/ui/components/multichain/import-account/bottom-buttons.js
index f56c43e39..d9b32af61 100644
--- a/ui/components/multichain/import-account/bottom-buttons.js
+++ b/ui/components/multichain/import-account/bottom-buttons.js
@@ -4,9 +4,9 @@ import { useDispatch } from 'react-redux';
 import {
   ButtonPrimary,
   ButtonSecondary,
+  Box,
   BUTTON_SECONDARY_SIZES,
 } from '../../component-library';
-import Box from '../../ui/box/box';
 import { Display } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import * as actions from '../../../store/actions';
diff --git a/ui/components/multichain/import-account/import-account.js b/ui/components/multichain/import-account/import-account.js
index 3433b7134..ea5f61b32 100644
--- a/ui/components/multichain/import-account/import-account.js
+++ b/ui/components/multichain/import-account/import-account.js
@@ -7,8 +7,7 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
-import { ButtonLink, Label, Text } from '../../component-library';
-import Box from '../../ui/box';
+import { ButtonLink, Label, Text, Box } from '../../component-library';
 import Dropdown from '../../ui/dropdown';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
diff --git a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
index 6204663e0..78e6a9fca 100644
--- a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
+++ b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
@@ -3,10 +3,10 @@
 exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
 <div>
   <div
-    class="box multichain-import-token-link box--flex-direction-row"
+    class="mm-box multichain-import-token-link"
   >
     <div
-      class="box box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@@ -20,7 +20,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
       </button>
     </div>
     <div
-      class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@@ -40,10 +40,10 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
 exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
 <div>
   <div
-    class="box multichain-import-token-link box--flex-direction-row"
+    class="mm-box multichain-import-token-link"
   >
     <div
-      class="box box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@@ -57,7 +57,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
       </button>
     </div>
     <div
-      class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/import-token-link/import-token-link.js
index 7d9388951..241654ff8 100644
--- a/ui/components/multichain/import-token-link/import-token-link.js
+++ b/ui/components/multichain/import-token-link/import-token-link.js
@@ -3,8 +3,7 @@ import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Box from '../../ui/box/box';
-import { ButtonLink, IconName } from '../../component-library';
+import { ButtonLink, IconName, Box } from '../../component-library';
 import {
   AlignItems,
   Display,
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index f71dd7605..f1ce162fa 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -3,7 +3,7 @@
 exports[`NetworkListItem renders properly 1`] = `
 <div>
   <div
-    class="box multichain-network-list-item box--padding-4 box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-transparent box--display-flex"
+    class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
       class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
@@ -15,7 +15,7 @@ exports[`NetworkListItem renders properly 1`] = `
       />
     </div>
     <div
-      class="box multichain-network-list-item__network-name box--flex-direction-row"
+      class="mm-box multichain-network-list-item__network-name"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js
index ad05b00a0..bfb2f7cca 100644
--- a/ui/components/multichain/network-list-item/network-list-item.js
+++ b/ui/components/multichain/network-list-item/network-list-item.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import Box from '../../ui/box/box';
 import {
   AlignItems,
   IconColor,
@@ -18,6 +17,7 @@ import {
   ButtonIcon,
   ButtonLink,
   IconName,
+  Box,
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Tooltip from '../../ui/tooltip/tooltip';
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index bd211d5d7..bcbd1ff92 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -18,7 +18,6 @@ import {
   getAllEnabledNetworks,
   getCurrentChainId,
 } from '../../../selectors';
-import Box from '../../ui/box/box';
 import ToggleButton from '../../ui/toggle-button';
 import {
   Display,
@@ -28,6 +27,7 @@ import {
   BUTTON_SECONDARY_SIZES,
   ButtonSecondary,
   Text,
+  Box,
 } from '../../component-library';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
diff --git a/ui/components/multichain/nft-item/nft-item.js b/ui/components/multichain/nft-item/nft-item.js
index f31f99fc9..c1127b707 100644
--- a/ui/components/multichain/nft-item/nft-item.js
+++ b/ui/components/multichain/nft-item/nft-item.js
@@ -6,6 +6,7 @@ import {
   AvatarNetwork,
   BadgeWrapper,
   BadgeWrapperAnchorElementShape,
+  Box,
 } from '../../component-library';
 import {
   BackgroundColor,
@@ -13,7 +14,6 @@ import {
   JustifyContent,
   Size,
 } from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
 
 export const NftItem = ({
   alt,