Part of #18714: Replacing deprecated constants

ui/components/app/app-components.scss

@@ -88,7 +88,6 @@
 @import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index';
 @import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index';
 @import 'currency-input/index';
-@import 'detected-token/detected-token-address/index';
 @import 'detected-token/detected-token-aggregators/index';
 @import 'detected-token/detected-token-values/index';
 @import 'detected-token/detected-token-details/index';

ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Beta Header should match snapshot 1`] = `
 <div>
   <div
-    class="box beta-header box--padding-2 box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-warning-default"
+    class="mm-box beta-header mm-box--padding-2 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-warning-default"
   >
     <h6
       class="mm-box mm-text beta-header__message mm-text--body-sm mm-box--color-warning-inverse"

ui/components/app/beta-header/index.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
-import Box from '../../ui/box/box';
 import {
   TextVariant,
   Color,
-  BLOCK_SIZES,
-  DISPLAY,
+  BlockSize,
+  Display,
   AlignItems,
   IconColor,
   TextColor,
@@ -20,15 +19,16 @@ import {
   ButtonIconSize,
   IconName,
   Text,
+  Box,
 } from '../../component-library';
 
 const BetaHeader = () => {
   const t = useI18nContext();
 
   return (
     <Box
-      display={DISPLAY.FLEX}
-      width={BLOCK_SIZES.FULL}
+      display={Display.Flex}
+      width={BlockSize.Full}
       backgroundColor={Color.warningDefault}
       padding={2}
       className="beta-header"

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -3,10 +3,10 @@
 exports[`CustomSpendingCap should match snapshot 1`] = `
 <div>
   <div
-    class="box custom-spending-cap box--padding-top-2 box--padding-right-6 box--padding-left-6 box--display-flex box--gap-2 box--flex-direction-column box--align-items-flex-start box--background-color-background-alternative box--rounded-sm"
+    class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
   >
     <div
-      class="box custom-spending-cap__input box--display-block box--flex-direction-row box--justify-content-center"
+      class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
     >
       <label
         for="custom-spending-cap"
@@ -62,7 +62,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
+          class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
         >
           <button
             class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
@@ -71,7 +71,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
           </button>
         </div>
         <div
-          class="box custom-spending-cap__description box--flex-direction-row"
+          class="mm-box custom-spending-cap__description"
         >
           <h6
             class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -6,21 +6,19 @@ import BigNumber from 'bignumber.js';
 import { addHexPrefix } from 'ethereumjs-util';
 
 import { I18nContext } from '../../../contexts/i18n';
-import Box from '../../ui/box';
 import FormField from '../../ui/form-field';
-import { ButtonLink, Icon, IconName, Text } from '../../component-library';
-
+import { Text, ButtonLink, Icon, IconName, Box } from '../../component-library';
 import {
   AlignItems,
+  Display,
+  FlexDirection,
   TextAlign,
   TextVariant,
   JustifyContent,
   Size,
-  BLOCK_SIZES,
+  BlockSize,
   BackgroundColor,
   TextColor,
-  Display,
-  FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { setCustomTokenAmount } from '../../../ducks/app/app';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
@@ -279,7 +277,7 @@ export default function CustomSpendingCap({
               titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
             />
             <Box
-              width={BLOCK_SIZES.MAX}
+              width={BlockSize.Max}
               marginLeft="auto"
               paddingRight={4}
               paddingBottom={2}

ui/components/app/detected-token/detected-token-address/detected-token-address.js

@@ -4,50 +4,38 @@ import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 
-import Box from '../../../ui/box';
-import Button from '../../../ui/button';
 import Tooltip from '../../../ui/tooltip';
 
 import {
-  DISPLAY,
+  Display,
   TextColor,
-  TextVariant,
 } from '../../../../helpers/constants/design-system';
 
 import { shortenAddress } from '../../../../helpers/utils/util';
-import { Text } from '../../../component-library';
+import { Text, Box, ButtonLink, IconName } from '../../../component-library';
 
 const DetectedTokenAddress = ({ tokenAddress }) => {
   const t = useI18nContext();
   const [copied, handleCopy] = useCopyToClipboard();
 
   return (
-    <Box display={DISPLAY.INLINE_FLEX} className="detected-token-address">
-      <Text variant={TextVariant.bodySm} as="h6" color={TextColor.textDefault}>
-        {`${t('tokenAddress')}:`}
-      </Text>
-      <Text
-        variant={TextVariant.bodySm}
-        as="h6"
-        color={TextColor.primaryDefault}
-        marginLeft={2}
-        marginRight={2}
-      >
-        {shortenAddress(tokenAddress)}
-      </Text>
+    <Box display={Display.InlineFlex} className="detected-token-address">
+      <Text color={TextColor.textDefault}>{`${t('tokenAddress')}:`}</Text>
       <Tooltip
         position="bottom"
         title={copied ? t('copiedExclamation') : t('copyToClipboard')}
       >
-        <Button
-          type="link"
+        <ButtonLink
           className="detected-token-address__copy-link"
           onClick={() => {
             handleCopy(tokenAddress);
           }}
+          endIconName={IconName.Copy}
+          marginLeft={2}
+          marginRight={2}
         >
-          <i className="fa fa-copy" />
-        </Button>
+          {shortenAddress(tokenAddress)}
+        </ButtonLink>
       </Tooltip>
     </Box>
   );

ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js

@@ -24,7 +24,6 @@ const DetectedTokenAggregators = ({ aggregators }) => {
         {t('fromTokenLists', [
           numOfHiddenAggregators > 0 && !displayMore ? (
             <Text
-              variant={TextVariant.bodySm}
               as="h6"
               fontWeight={FontWeight.Normal}
               key="detected-token-aggrgators-with-more"
@@ -42,7 +41,6 @@ const DetectedTokenAggregators = ({ aggregators }) => {
             </Text>
           ) : (
             <Text
-              variant={TextVariant.bodySm}
               as="h6"
               fontWeight={FontWeight.Normal}
               key="detected-token-aggrgators-without-more"

ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap

@@ -344,10 +344,10 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
       class="box box--margin-4 box--sm:margin-4 box--md:margin-3 box--lg:margin-4 box--flex-direction-row"
     >
       <div
-        class="box custom-spending-cap box--padding-top-2 box--padding-right-6 box--padding-left-6 box--display-flex box--gap-2 box--flex-direction-column box--align-items-flex-start box--background-color-background-alternative box--rounded-sm"
+        class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
       >
         <div
-          class="box custom-spending-cap__input box--display-block box--flex-direction-row box--justify-content-center"
+          class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
         >
           <label
             for="custom-spending-cap"
@@ -403,7 +403,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
               </div>
             </div>
             <div
-              class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
+              class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
             >
               <button
                 class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
@@ -412,7 +412,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
               </button>
             </div>
             <div
-              class="box custom-spending-cap__description box--flex-direction-row"
+              class="mm-box custom-spending-cap__description"
             >
               <h6
                 class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"