From 42c5900abb47a90351ca77047a7ff362ad5225fb Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 16 May 2023 09:36:06 -0500
Subject: [PATCH 01/13] Restructure CurrencyDisplay to use Design System

---
 .../confirm-gas-display.test.js.snap          | 25 +++-----
 .../confirm-legacy-gas-display.test.js.snap   | 25 +++-----
 .../confirm-detail-row.component.test.js.snap | 20 +++----
 .../__snapshots__/currency-input.test.js.snap | 27 +++------
 ...transaction-gas-fee.component.test.js.snap | 18 ++----
 .../multi-layer-fee-message.test.js.snap      |  7 +--
 ...-preferenced-currency-display.test.js.snap |  9 +--
 .../account-list-item.test.js.snap            | 18 ++----
 .../currency-display.component.test.js.snap   | 21 ++-----
 .../currency-display.component.js             | 57 ++++++++++++++----
 ui/components/ui/currency-display/index.scss  | 12 ----
 .../confirm-send-ether.test.js.snap           | 60 +++++++------------
 .../confirm-transaction-base.test.js.snap     | 38 ++++--------
 .../send-content.component.test.js.snap       | 27 +++------
 14 files changed, 147 insertions(+), 217 deletions(-)

diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
index edd5c141f8e4..47dde46cfb02 100644
--- a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -64,14 +64,11 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -85,19 +82,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -133,19 +127,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
diff --git a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
index 0d19b899c235..a1342d471119 100644
--- a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -46,14 +46,11 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.000021"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -65,19 +62,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.000021 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -98,19 +92,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         </strong>
         <div>
           <div
-            class="currency-display-component"
+            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
             title="0.000021 ETH"
           >
             <span
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
             >
               0.000021
             </span>
             <span
-              class="currency-display-component__suffix"
+              class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
index 880b74bcd951..9e763dd1978b 100644
--- a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -12,37 +12,37 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       class="confirm-detail-row__details"
     >
       <div
-        class="currency-display-component confirm-detail-row__primary"
+        class="box currency-display-component confirm-detail-row__primary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 18px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0
         </span>
       </div>
       <div
-        class="currency-display-component confirm-detail-row__secondary"
+        class="box currency-display-component confirm-detail-row__secondary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 14px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0
         </span>
diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
index de6f2afcc1cb..cd2e4016baff 100644
--- a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
+++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -27,19 +27,16 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0.00432788 ETH"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           ETH
         </span>
@@ -128,19 +125,16 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="$231.06 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
@@ -185,19 +179,16 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="$0.00 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           $0.00
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
index c23cca668e5b..f6d5e40d0329 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -6,37 +6,31 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
     class="cancel-transaction-gas-fee"
   >
     <div
-      class="currency-display-component cancel-transaction-gas-fee__eth"
+      class="box currency-display-component cancel-transaction-gas-fee__eth box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
     </div>
     <div
-      class="currency-display-component cancel-transaction-gas-fee__fiat"
+      class="box currency-display-component cancel-transaction-gas-fee__fiat box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
index 9131fb9450b0..c875ceaa5f0c 100644
--- a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
+++ b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -135,14 +135,11 @@ exports[`Multi layer fee message when balance and token price checker is enabled
             class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="$0.56"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 $0.56
               </span>
diff --git a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
index 61224fdb0f06..0915c28d6602 100644
--- a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
+++ b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -3,19 +3,16 @@
 exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
 <div>
   <div
-    class="currency-display-component"
+    class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="0 ETH"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     >
       0
     </span>
     <span
-      class="currency-display-component__suffix"
+      class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
     >
       ETH
     </span>
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index cd5df6672682..7c5a2dfd7a93 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -74,19 +74,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             class="box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.006 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.006
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -110,19 +107,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
         >
           <div
-            class="currency-display-component"
+            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
             title="0.006 ETH"
           >
             <span
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
             >
               0.006
             </span>
             <span
-              class="currency-display-component__suffix"
+              class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
index 6e898fc29bc9..6a28e7863c73 100644
--- a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
+++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -3,14 +3,11 @@
 exports[`CurrencyDisplay Component should match default snapshot 1`] = `
 <div>
   <div
-    class="currency-display-component"
+    class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="null"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     />
   </div>
 </div>
@@ -19,14 +16,11 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
 exports[`CurrencyDisplay Component should render text with a className 1`] = `
 <div>
   <div
-    class="currency-display-component currency-display"
+    class="box currency-display-component currency-display box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="$123.45"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     >
       $123.45
     </span>
@@ -37,14 +31,11 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
 exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
 <div>
   <div
-    class="currency-display-component currency-display"
+    class="box currency-display-component currency-display box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="-$123.45"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     >
       -
       $123.45
diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 73f32a2eb7fa..10725f88c876 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -3,6 +3,13 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
 import { EtherDenomination } from '../../../../shared/constants/common';
+import Box from '../box/box';
+import { Text } from '../../component-library';
+import {
+  AlignItems,
+  DISPLAY,
+  FLEX_WRAP,
+} from '../../../helpers/constants/design-system';
 
 export default function CurrencyDisplay({
   value,
@@ -18,6 +25,10 @@ export default function CurrencyDisplay({
   denomination,
   currency,
   suffix,
+  prefixComponentWrapperProps = {},
+  textProps = {},
+  suffixProps = {},
+  boxProps = {},
 }) {
   const [title, parts] = useCurrencyDisplay(value, {
     displayValue,
@@ -28,26 +39,46 @@ export default function CurrencyDisplay({
     currency,
     suffix,
   });
+
   return (
-    <div
+    <Box
       className={classnames('currency-display-component', className)}
       data-testid={dataTestId}
       style={style}
       title={(!hideTitle && title) || null}
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.center}
+      flexWrap={FLEX_WRAP.WRAP}
+      {...boxProps}
     >
-      <span className="currency-display-component__prefix">
-        {prefixComponent}
-      </span>
-      <span className="currency-display-component__text">
+      {prefixComponent ? (
+        <Box
+          className="currency-display-component__prefix"
+          marginInlineEnd={1}
+          {...prefixComponentWrapperProps}
+        >
+          {prefixComponent}
+        </Box>
+      ) : null}
+      <Text
+        as="span"
+        className="currency-display-component__text"
+        {...textProps}
+      >
         {parts.prefix}
         {parts.value}
-      </span>
-      {parts.suffix && (
-        <span className="currency-display-component__suffix">
+      </Text>
+      {parts.suffix ? (
+        <Text
+          as="span"
+          className="currency-display-component__suffix"
+          marginInlineStart={1}
+          {...suffixProps}
+        >
           {parts.suffix}
-        </span>
-      )}
-    </div>
+        </Text>
+      ) : null}
+    </Box>
   );
 }
 
@@ -68,4 +99,8 @@ CurrencyDisplay.propTypes = {
   style: PropTypes.object,
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   value: PropTypes.string,
+  prefixComponentWrapperProps: PropTypes.object,
+  textProps: PropTypes.object,
+  suffixProps: PropTypes.object,
+  boxProps: PropTypes.object,
 };
diff --git a/ui/components/ui/currency-display/index.scss b/ui/components/ui/currency-display/index.scss
index 933554b0dd41..1c6699f03bd2 100644
--- a/ui/components/ui/currency-display/index.scss
+++ b/ui/components/ui/currency-display/index.scss
@@ -1,8 +1,4 @@
 .currency-display-component {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
   &__text {
     /*rtl:ignore*/
     direction: ltr;
@@ -10,12 +6,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  &__prefix {
-    padding-right: 4px;
-  }
-
-  &__suffix {
-    padding-left: 4px;
-  }
 }
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index 7a2fde6ebc7f..b1f59722ca03 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -287,19 +287,19 @@ exports[`ConfirmSendEther should render correct information for for confirm send
             class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0"
             >
-              <span
-                class="currency-display-component__prefix"
+              <div
+                class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
               >
                 <i
                   class="fab fa-ethereum"
                   style="font-size: 24px;"
                 />
-              </span>
+              </div>
               <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -448,14 +448,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -469,19 +466,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -517,19 +511,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -560,14 +551,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -581,19 +569,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -621,19 +606,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                     </strong>
                      
                     <div
-                      class="currency-display-component"
+                      class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                       title="0.00021 ETH"
                     >
                       <span
-                        class="currency-display-component__prefix"
-                      />
-                      <span
-                        class="currency-display-component__text"
+                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                       >
                         0.00021
                       </span>
                       <span
-                        class="currency-display-component__suffix"
+                        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                       >
                         ETH
                       </span>
diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index a4f40b4c1d57..52340bd8ee70 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -257,19 +257,19 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
             class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.0001"
             >
-              <span
-                class="currency-display-component__prefix"
+              <div
+                class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
               >
                 <i
                   class="fab fa-ethereum"
                   style="font-size: 24px;"
                 />
-              </span>
+              </div>
               <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.0001
               </span>
@@ -378,14 +378,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       >
                         <div>
                           <div
-                            class="currency-display-component"
+                            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                             title="0.000021"
                           >
                             <span
-                              class="currency-display-component__prefix"
-                            />
-                            <span
-                              class="currency-display-component__text"
+                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -406,14 +403,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       </strong>
                       <div>
                         <div
-                          class="currency-display-component"
+                          class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                           title="0.000021"
                         >
                           <span
-                            class="currency-display-component__prefix"
-                          />
-                          <span
-                            class="currency-display-component__text"
+                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -443,14 +437,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           class="confirm-page-container-content__total-value"
                         >
                           <div
-                            class="currency-display-component"
+                            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                             title="0.000121"
                           >
                             <span
-                              class="currency-display-component__prefix"
-                            />
-                            <span
-                              class="currency-display-component__text"
+                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -478,14 +469,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                         </strong>
                          
                         <div
-                          class="currency-display-component"
+                          class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                           title="0.000121"
                         >
                           <span
-                            class="currency-display-component__prefix"
-                          />
-                          <span
-                            class="currency-display-component__text"
+                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                           >
                             0.000121
                           </span>
diff --git a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
index dbfb1ee1e24e..c1a415351b6a 100644
--- a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
+++ b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
@@ -51,19 +51,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       Balance:
                     </span>
                     <div
-                      class="currency-display-component"
+                      class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                       title="0 ETH"
                     >
                       <span
-                        class="currency-display-component__prefix"
-                      />
-                      <span
-                        class="currency-display-component__text"
+                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                       >
                         0
                       </span>
                       <span
-                        class="currency-display-component__suffix"
+                        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                       >
                         ETH
                       </span>
@@ -241,19 +238,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -289,19 +283,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>

From 9de0a1d89d0feae4065399f92ee1d843fa5c872f Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 16 May 2023 11:44:11 -0500
Subject: [PATCH 02/13] Add storybook, remove CSS

---
 .../confirm-gas-display.test.js.snap          |  6 +-
 .../confirm-legacy-gas-display.test.js.snap   |  6 +-
 .../confirm-detail-row.component.test.js.snap |  4 +-
 .../__snapshots__/currency-input.test.js.snap |  6 +-
 ...transaction-gas-fee.component.test.js.snap |  4 +-
 .../multi-layer-fee-message.test.js.snap      |  2 +-
 ...-preferenced-currency-display.test.js.snap |  2 +-
 .../account-list-item.test.js.snap            |  4 +-
 .../currency-display.component.test.js.snap   |  6 +-
 .../currency-display.component.js             |  1 +
 .../currency-display.stories.js               | 60 +++++++++++++++++++
 ui/components/ui/currency-display/index.scss  |  9 ---
 ui/components/ui/ui-components.scss           |  1 -
 .../confirm-send-ether.test.js.snap           | 14 ++---
 .../confirm-transaction-base.test.js.snap     | 10 ++--
 .../send-content.component.test.js.snap       |  6 +-
 16 files changed, 96 insertions(+), 45 deletions(-)
 create mode 100644 ui/components/ui/currency-display/currency-display.stories.js
 delete mode 100644 ui/components/ui/currency-display/index.scss

diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
index 47dde46cfb02..fb5727b1f004 100644
--- a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -68,7 +68,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -86,7 +86,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -131,7 +131,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
diff --git a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
index a1342d471119..2f6695fffdf1 100644
--- a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -50,7 +50,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -66,7 +66,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -96,7 +96,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
             title="0.000021 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.000021
             </span>
diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
index 9e763dd1978b..241527ef26ec 100644
--- a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -24,7 +24,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>
@@ -42,7 +42,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>
diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
index cd2e4016baff..0ca0ad609c85 100644
--- a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
+++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -31,7 +31,7 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         title="0.00432788 ETH"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
@@ -129,7 +129,7 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         title="$231.06 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
@@ -183,7 +183,7 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         title="$0.00 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $0.00
         </span>
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
index f6d5e40d0329..10c5398bb6fc 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -10,7 +10,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
@@ -25,7 +25,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
index c875ceaa5f0c..f64784bdfcb5 100644
--- a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
+++ b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -139,7 +139,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
               title="$0.56"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 $0.56
               </span>
diff --git a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
index 0915c28d6602..05a9d4a1e31c 100644
--- a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
+++ b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -7,7 +7,7 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
     title="0 ETH"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       0
     </span>
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index 7c5a2dfd7a93..d1986499fa8a 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -78,7 +78,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
               title="0.006 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.006
               </span>
@@ -111,7 +111,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             title="0.006 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.006
             </span>
diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
index 6a28e7863c73..d9471c47ef04 100644
--- a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
+++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -7,7 +7,7 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
     title="null"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     />
   </div>
 </div>
@@ -20,7 +20,7 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
     title="$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       $123.45
     </span>
@@ -35,7 +35,7 @@ exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
     title="-$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       -
       $123.45
diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 10725f88c876..741ce2823b6d 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -63,6 +63,7 @@ export default function CurrencyDisplay({
       <Text
         as="span"
         className="currency-display-component__text"
+        ellipsis
         {...textProps}
       >
         {parts.prefix}
diff --git a/ui/components/ui/currency-display/currency-display.stories.js b/ui/components/ui/currency-display/currency-display.stories.js
new file mode 100644
index 000000000000..b75b903cdaad
--- /dev/null
+++ b/ui/components/ui/currency-display/currency-display.stories.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { decimalToHex } from '../../../../shared/modules/conversion.utils';
+import CurrencyDisplay from '.';
+
+export default {
+  title: 'Components/UI/CurrencyDisplay',
+
+  argTypes: {
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+    displayValue: {
+      control: {
+        type: 'text',
+      },
+    },
+    currency: {
+      control: {
+        type: 'text',
+      },
+    },
+    prefix: {
+      control: {
+        type: 'text',
+      },
+    },
+    suffix: {
+      control: {
+        type: 'text',
+      },
+    },
+    numberOfDecimals: {
+      control: {
+        type: 'text',
+      },
+    },
+    denomination: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    denomination: 'ETH',
+    value: decimalToHex('123.45'),
+    numberOfDecimals: '2',
+    currency: 'USD',
+    prefix: '$',
+  },
+};
+
+export const DefaultStory = (args) => <CurrencyDisplay {...args} />;
+DefaultStory.storyName = 'Default';
+
+export const DisplayValueStory = (args) => (
+  <CurrencyDisplay {...args} displayValue="44.43" />
+);
+DefaultStory.storyName = 'Display Value';
diff --git a/ui/components/ui/currency-display/index.scss b/ui/components/ui/currency-display/index.scss
deleted file mode 100644
index 1c6699f03bd2..000000000000
--- a/ui/components/ui/currency-display/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.currency-display-component {
-  &__text {
-    /*rtl:ignore*/
-    direction: ltr;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index 7ac0d578b272..aef0ae38ce3c 100644
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@@ -12,7 +12,6 @@
 @import 'chip/chip';
 @import 'color-indicator/color-indicator';
 @import 'confusable/index';
-@import 'currency-display/index';
 @import 'definition-list/definition-list';
 @import 'dialog/dialog';
 @import 'dropdown/dropdown';
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index b1f59722ca03..27f6265b1d6b 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -299,7 +299,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -452,7 +452,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -470,7 +470,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -515,7 +515,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -555,7 +555,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -573,7 +573,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -610,7 +610,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       title="0.00021 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                       >
                         0.00021
                       </span>
diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 52340bd8ee70..cff62147f836 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -269,7 +269,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.0001
               </span>
@@ -382,7 +382,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000021"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -407,7 +407,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000021"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -441,7 +441,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000121"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -473,7 +473,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000121"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                           >
                             0.000121
                           </span>
diff --git a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
index c1a415351b6a..6f98cbaf9967 100644
--- a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
+++ b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
@@ -55,7 +55,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       title="0 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                       >
                         0
                       </span>
@@ -242,7 +242,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
@@ -287,7 +287,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>

From 10e7951e3fb57d940b7a3bc2de7fd6d0c7bf64f1 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 09:09:24 -0500
Subject: [PATCH 03/13] Update
 ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 ui/components/ui/currency-display/currency-display.component.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 741ce2823b6d..9b2415d05a84 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
 import { EtherDenomination } from '../../../../shared/constants/common';
-import Box from '../box/box';
 import { Text } from '../../component-library';
 import {
   AlignItems,

From c696b8cc136084e763a1bb4a7948b0f915f74774 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 09:09:31 -0500
Subject: [PATCH 04/13] Update
 ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 ui/components/ui/currency-display/currency-display.component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 9b2415d05a84..80068611bc67 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
 import { EtherDenomination } from '../../../../shared/constants/common';
-import { Text } from '../../component-library';
+import { Text, Box } from '../../component-library';
 import {
   AlignItems,
   DISPLAY,

From 83ff2e88e2232a27e6fae0da92e6cde4657610a4 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 09:10:10 -0500
Subject: [PATCH 05/13] Update
 ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 ui/components/ui/currency-display/currency-display.stories.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/components/ui/currency-display/currency-display.stories.js b/ui/components/ui/currency-display/currency-display.stories.js
index b75b903cdaad..197ae613bd6d 100644
--- a/ui/components/ui/currency-display/currency-display.stories.js
+++ b/ui/components/ui/currency-display/currency-display.stories.js
@@ -4,7 +4,6 @@ import CurrencyDisplay from '.';
 
 export default {
   title: 'Components/UI/CurrencyDisplay',
-
   argTypes: {
     value: {
       control: {

From e0a7dd01a5adb8859ce20804b0a7297dbf727f7e Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 09:10:16 -0500
Subject: [PATCH 06/13] Update
 ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 .../ui/currency-display/currency-display.component.js         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 80068611bc67..0e4c4250e92e 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -6,8 +6,8 @@ import { EtherDenomination } from '../../../../shared/constants/common';
 import { Text, Box } from '../../component-library';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_WRAP,
+  Display,
+  FlexWrap,
 } from '../../../helpers/constants/design-system';
 
 export default function CurrencyDisplay({

From 04c9670069be75afa7b88cd17995d731d73c1c42 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 09:10:37 -0500
Subject: [PATCH 07/13] Update
 ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 .../currency-display.stories.js               | 69 ++++++++++++-------
 1 file changed, 43 insertions(+), 26 deletions(-)

diff --git a/ui/components/ui/currency-display/currency-display.stories.js b/ui/components/ui/currency-display/currency-display.stories.js
index 197ae613bd6d..ac433b68c767 100644
--- a/ui/components/ui/currency-display/currency-display.stories.js
+++ b/ui/components/ui/currency-display/currency-display.stories.js
@@ -4,41 +4,58 @@ import CurrencyDisplay from '.';
 
 export default {
   title: 'Components/UI/CurrencyDisplay',
-  argTypes: {
-    value: {
-      control: {
-        type: 'text',
-      },
+argTypes: {
+    className: {
+      control: 'text',
+    },
+    currency: {
+      control: 'text',
+    },
+    'data-testid': {
+      control: 'text',
+    },
+    denomination: {
+      control: 'select',
+      options: [EtherDenomination.ETH, EtherDenomination.GWEI],
     },
     displayValue: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
-    currency: {
-      control: {
-        type: 'text',
-      },
+    hideLabel: {
+      control: 'boolean',
+    },
+    hideTitle: {
+      control: 'boolean',
+    },
+    numberOfDecimals: {
+      control: 'number',
     },
     prefix: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
+    },
+    prefixComponent: {
+      control: 'text',
+    },
+    style: {
+      control: 'object',
     },
     suffix: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
-    numberOfDecimals: {
-      control: {
-        type: 'text',
-      },
+    value: {
+      control: 'text',
     },
-    denomination: {
-      control: {
-        type: 'text',
-      },
+    prefixComponentWrapperProps: {
+      control: 'object',
+    },
+    textProps: {
+      control: 'object',
+    },
+    suffixProps: {
+      control: 'object',
+    },
+    boxProps: {
+      control: 'object',
     },
   },
   args: {

From f3c7c844ce920eb5da4043c8fe56b18c84a49d06 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 09:10:45 -0500
Subject: [PATCH 08/13] Update
 ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 ui/components/ui/currency-display/currency-display.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/ui/currency-display/currency-display.stories.js b/ui/components/ui/currency-display/currency-display.stories.js
index ac433b68c767..464a5b46368c 100644
--- a/ui/components/ui/currency-display/currency-display.stories.js
+++ b/ui/components/ui/currency-display/currency-display.stories.js
@@ -59,7 +59,7 @@ argTypes: {
     },
   },
   args: {
-    denomination: 'ETH',
+    denomination: EtherDenomination.ETH,
     value: decimalToHex('123.45'),
     numberOfDecimals: '2',
     currency: 'USD',

From 9e725775316e6989636d90c28e3be464d7c3339d Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 09:14:13 -0500
Subject: [PATCH 09/13] Remove deprecated imports, import EtherDenomination

---
 .../ui/currency-display/currency-display.component.js         | 4 ++--
 ui/components/ui/currency-display/currency-display.stories.js | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 0e4c4250e92e..e37bb2d9cf54 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -45,9 +45,9 @@ export default function CurrencyDisplay({
       data-testid={dataTestId}
       style={style}
       title={(!hideTitle && title) || null}
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.center}
-      flexWrap={FLEX_WRAP.WRAP}
+      flexWrap={FlexWrap.Wrap}
       {...boxProps}
     >
       {prefixComponent ? (
diff --git a/ui/components/ui/currency-display/currency-display.stories.js b/ui/components/ui/currency-display/currency-display.stories.js
index 464a5b46368c..4e23fca27a6a 100644
--- a/ui/components/ui/currency-display/currency-display.stories.js
+++ b/ui/components/ui/currency-display/currency-display.stories.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { decimalToHex } from '../../../../shared/modules/conversion.utils';
+import { EtherDenomination } from '../../../../shared/constants/common';
 import CurrencyDisplay from '.';
 
 export default {
   title: 'Components/UI/CurrencyDisplay',
-argTypes: {
+  argTypes: {
     className: {
       control: 'text',
     },

From 3fb4b0208910ff17163c518c55ec88273c428fd9 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jun 2023 10:14:44 -0500
Subject: [PATCH 10/13] Update jest

---
 .../confirm-gas-display.test.js.snap             |  6 +++---
 .../confirm-legacy-gas-display.test.js.snap      |  6 +++---
 .../confirm-detail-row.component.test.js.snap    |  8 ++++----
 .../__snapshots__/currency-input.test.js.snap    |  6 +++---
 ...el-transaction-gas-fee.component.test.js.snap |  4 ++--
 .../multi-layer-fee-message.test.js.snap         |  2 +-
 ...ser-preferenced-currency-display.test.js.snap |  2 +-
 .../__snapshots__/account-list-item.test.js.snap |  4 ++--
 .../currency-display.component.test.js.snap      |  6 +++---
 .../confirm-send-ether.test.js.snap              | 16 ++++++++--------
 .../confirm-transaction-base.test.js.snap        | 12 ++++++------
 .../send-content.component.test.js.snap          |  6 +++---
 12 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
index fb5727b1f004..646a08524c57 100644
--- a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -64,7 +64,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0"
             >
               <span
@@ -82,7 +82,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0 ETH"
             >
               <span
@@ -127,7 +127,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0 ETH"
             >
               <span
diff --git a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
index 2f6695fffdf1..b46aa1194da1 100644
--- a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -46,7 +46,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.000021"
             >
               <span
@@ -62,7 +62,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.000021 ETH"
             >
               <span
@@ -92,7 +92,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         </strong>
         <div>
           <div
-            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
             title="0.000021 ETH"
           >
             <span
diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
index 241527ef26ec..e8c331c5b842 100644
--- a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -12,11 +12,11 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       class="confirm-detail-row__details"
     >
       <div
-        class="box currency-display-component confirm-detail-row__primary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+        class="mm-box currency-display-component confirm-detail-row__primary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="0"
       >
         <div
-          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
+          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
         >
           <i
             class="fab fa-ethereum"
@@ -30,11 +30,11 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         </span>
       </div>
       <div
-        class="box currency-display-component confirm-detail-row__secondary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+        class="mm-box currency-display-component confirm-detail-row__secondary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="0"
       >
         <div
-          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
+          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
         >
           <i
             class="fab fa-ethereum"
diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
index 0ca0ad609c85..d61dda6683e5 100644
--- a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
+++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -27,7 +27,7 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         </div>
       </div>
       <div
-        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+        class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="0.00432788 ETH"
       >
         <span
@@ -125,7 +125,7 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         </div>
       </div>
       <div
-        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+        class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="$231.06 USD"
       >
         <span
@@ -179,7 +179,7 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         </div>
       </div>
       <div
-        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+        class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
         title="$0.00 USD"
       >
         <span
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
index 10c5398bb6fc..c52d526f8050 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -6,7 +6,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
     class="cancel-transaction-gas-fee"
   >
     <div
-      class="box currency-display-component cancel-transaction-gas-fee__eth box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+      class="mm-box currency-display-component cancel-transaction-gas-fee__eth mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
       title="0 ETH"
     >
       <span
@@ -21,7 +21,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       </span>
     </div>
     <div
-      class="box currency-display-component cancel-transaction-gas-fee__fiat box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+      class="mm-box currency-display-component cancel-transaction-gas-fee__fiat mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
       title="0 ETH"
     >
       <span
diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
index f64784bdfcb5..bb8cbf76456f 100644
--- a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
+++ b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -135,7 +135,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
             class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
           >
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="$0.56"
             >
               <span
diff --git a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
index 05a9d4a1e31c..3608b8f5f010 100644
--- a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
+++ b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -3,7 +3,7 @@
 exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
 <div>
   <div
-    class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+    class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
     title="0 ETH"
   >
     <span
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index d1986499fa8a..5d29a862472a 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -74,7 +74,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             class="box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
           >
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.006 ETH"
             >
               <span
@@ -107,7 +107,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
         >
           <div
-            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
             title="0.006 ETH"
           >
             <span
diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
index d9471c47ef04..cd351bf00473 100644
--- a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
+++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -3,7 +3,7 @@
 exports[`CurrencyDisplay Component should match default snapshot 1`] = `
 <div>
   <div
-    class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+    class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
     title="null"
   >
     <span
@@ -16,7 +16,7 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
 exports[`CurrencyDisplay Component should render text with a className 1`] = `
 <div>
   <div
-    class="box currency-display-component currency-display box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+    class="mm-box currency-display-component currency-display mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
     title="$123.45"
   >
     <span
@@ -31,7 +31,7 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
 exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
 <div>
   <div
-    class="box currency-display-component currency-display box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+    class="mm-box currency-display-component currency-display mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
     title="-$123.45"
   >
     <span
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index 27f6265b1d6b..604fb295f426 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -287,11 +287,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
             class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
           >
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0"
             >
               <div
-                class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
+                class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
               >
                 <i
                   class="fab fa-ethereum"
@@ -448,7 +448,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.00021"
                       >
                         <span
@@ -466,7 +466,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
@@ -511,7 +511,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
@@ -551,7 +551,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.00021"
                       >
                         <span
@@ -569,7 +569,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
@@ -606,7 +606,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                     </strong>
                      
                     <div
-                      class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                      class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                       title="0.00021 ETH"
                     >
                       <span
diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index cff62147f836..403e03d90eb3 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -257,11 +257,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
             class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
           >
             <div
-              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.0001"
             >
               <div
-                class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
+                class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
               >
                 <i
                   class="fab fa-ethereum"
@@ -378,7 +378,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       >
                         <div>
                           <div
-                            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                             title="0.000021"
                           >
                             <span
@@ -403,7 +403,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       </strong>
                       <div>
                         <div
-                          class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                          class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                           title="0.000021"
                         >
                           <span
@@ -437,7 +437,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           class="confirm-page-container-content__total-value"
                         >
                           <div
-                            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                             title="0.000121"
                           >
                             <span
@@ -469,7 +469,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                         </strong>
                          
                         <div
-                          class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                          class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                           title="0.000121"
                         >
                           <span
diff --git a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
index 6f98cbaf9967..d7ab0d82af16 100644
--- a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
+++ b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
@@ -51,7 +51,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       Balance:
                     </span>
                     <div
-                      class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                      class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                       title="0 ETH"
                     >
                       <span
@@ -238,7 +238,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.0000315 ETH"
                       >
                         <span
@@ -283,7 +283,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.0000315 ETH"
                       >
                         <span

From e6376e605d492643a4650da2d8e9d5791711af16 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 17 Jul 2023 16:20:18 -0500
Subject: [PATCH 11/13] Use TextVariant: Inherit to keep correct font-size

---
 .../confirm-gas-display.test.js.snap          | 10 ++++----
 .../confirm-legacy-gas-display.test.js.snap   | 10 ++++----
 .../confirm-detail-row.component.test.js.snap |  6 +++--
 .../__snapshots__/currency-input.test.js.snap | 12 +++++-----
 ...transaction-gas-fee.component.test.js.snap |  8 +++----
 .../multi-layer-fee-message.test.js.snap      |  2 +-
 ...-preferenced-currency-display.test.js.snap |  4 ++--
 .../account-list-item.test.js.snap            |  8 +++----
 .../currency-display.component.test.js.snap   |  6 ++---
 .../currency-display.component.js             |  4 ++++
 .../confirm-send-ether.test.js.snap           | 23 ++++++++++---------
 .../confirm-transaction-base.test.js.snap     | 11 +++++----
 .../send-content.component.test.js.snap       | 12 +++++-----
 13 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
index 646a08524c57..c267149f2016 100644
--- a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -68,7 +68,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -86,12 +86,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -131,12 +131,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
diff --git a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
index b46aa1194da1..78a5375965e0 100644
--- a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -50,7 +50,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -66,12 +66,12 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -96,12 +96,12 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
             title="0.000021 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.000021
             </span>
             <span
-              class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
index e8c331c5b842..4b8237923ce1 100644
--- a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -17,6 +17,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       >
         <div
           class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+          variant="inherit"
         >
           <i
             class="fab fa-ethereum"
@@ -24,7 +25,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>
@@ -35,6 +36,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       >
         <div
           class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+          variant="inherit"
         >
           <i
             class="fab fa-ethereum"
@@ -42,7 +44,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>
diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
index d61dda6683e5..559171d0c9d5 100644
--- a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
+++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -31,12 +31,12 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         title="0.00432788 ETH"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
         <span
-          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           ETH
         </span>
@@ -129,12 +129,12 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         title="$231.06 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
         <span
-          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
@@ -183,12 +183,12 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         title="$0.00 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $0.00
         </span>
         <span
-          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
index c52d526f8050..c98f7b37a587 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -10,12 +10,12 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
@@ -25,12 +25,12 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
index bb8cbf76456f..cce8f87215bd 100644
--- a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
+++ b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -139,7 +139,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
               title="$0.56"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 $0.56
               </span>
diff --git a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
index 3608b8f5f010..8694dbbe911d 100644
--- a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
+++ b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -7,12 +7,12 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
     title="0 ETH"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       0
     </span>
     <span
-      class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
     >
       ETH
     </span>
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index 5d29a862472a..dc798fd6e9be 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -78,12 +78,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
               title="0.006 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.006
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -111,12 +111,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             title="0.006 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.006
             </span>
             <span
-              class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
index cd351bf00473..b47181d4f0e2 100644
--- a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
+++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -7,7 +7,7 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
     title="null"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     />
   </div>
 </div>
@@ -20,7 +20,7 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
     title="$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       $123.45
     </span>
@@ -35,7 +35,7 @@ exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
     title="-$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       -
       $123.45
diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index e37bb2d9cf54..0a68d7c2a610 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -8,6 +8,7 @@ import {
   AlignItems,
   Display,
   FlexWrap,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 
 export default function CurrencyDisplay({
@@ -54,6 +55,7 @@ export default function CurrencyDisplay({
         <Box
           className="currency-display-component__prefix"
           marginInlineEnd={1}
+          variant={TextVariant.inherit}
           {...prefixComponentWrapperProps}
         >
           {prefixComponent}
@@ -63,6 +65,7 @@ export default function CurrencyDisplay({
         as="span"
         className="currency-display-component__text"
         ellipsis
+        variant={TextVariant.inherit}
         {...textProps}
       >
         {parts.prefix}
@@ -73,6 +76,7 @@ export default function CurrencyDisplay({
           as="span"
           className="currency-display-component__suffix"
           marginInlineStart={1}
+          variant={TextVariant.inherit}
           {...suffixProps}
         >
           {parts.suffix}
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index 604fb295f426..dae55134a048 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -292,6 +292,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
             >
               <div
                 class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+                variant="inherit"
               >
                 <i
                   class="fab fa-ethereum"
@@ -299,7 +300,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -452,7 +453,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -470,12 +471,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -515,12 +516,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -555,7 +556,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -573,12 +574,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -610,12 +611,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       title="0.00021 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                       >
                         0.00021
                       </span>
                       <span
-                        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                       >
                         ETH
                       </span>
diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 403e03d90eb3..ba6041638b9f 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -262,6 +262,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
             >
               <div
                 class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+                variant="inherit"
               >
                 <i
                   class="fab fa-ethereum"
@@ -269,7 +270,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.0001
               </span>
@@ -382,7 +383,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000021"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -407,7 +408,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000021"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -441,7 +442,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000121"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -473,7 +474,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000121"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                           >
                             0.000121
                           </span>
diff --git a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
index d7ab0d82af16..7bb9b3cb6def 100644
--- a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
+++ b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
@@ -55,12 +55,12 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       title="0 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                       >
                         0
                       </span>
                       <span
-                        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                       >
                         ETH
                       </span>
@@ -242,12 +242,12 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -287,12 +287,12 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>

From dc2497a08ea76c3d15e9ec461b15a06fa7d75ecc Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 17 Jul 2023 17:12:58 -0500
Subject: [PATCH 12/13] Snapshots

---
 .../confirm-gas-display.test.js.snap          | 10 ++++-----
 .../confirm-legacy-gas-display.test.js.snap   | 10 ++++-----
 .../confirm-detail-row.component.test.js.snap |  4 ++--
 .../__snapshots__/currency-input.test.js.snap | 12 +++++-----
 ...transaction-gas-fee.component.test.js.snap |  8 +++----
 .../multi-layer-fee-message.test.js.snap      |  2 +-
 ...-preferenced-currency-display.test.js.snap |  4 ++--
 .../account-list-item.test.js.snap            |  8 +++----
 .../currency-display.component.test.js.snap   |  6 ++---
 .../confirm-send-ether.test.js.snap           | 22 +++++++++----------
 .../confirm-transaction-base.test.js.snap     | 10 ++++-----
 .../send-content.component.test.js.snap       | 12 +++++-----
 12 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
index c267149f2016..74ccd282e738 100644
--- a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -68,7 +68,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
@@ -86,12 +86,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
               >
                 ETH
               </span>
@@ -131,12 +131,12 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
               >
                 ETH
               </span>
diff --git a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
index 78a5375965e0..80236e500b81 100644
--- a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -50,7 +50,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.000021
               </span>
@@ -66,12 +66,12 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.000021
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
               >
                 ETH
               </span>
@@ -96,12 +96,12 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
             title="0.000021 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
             >
               0.000021
             </span>
             <span
-              class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+              class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
index 4b8237923ce1..68086ec616ff 100644
--- a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -25,7 +25,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           0
         </span>
@@ -44,7 +44,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           0
         </span>
diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
index 559171d0c9d5..339ef4441814 100644
--- a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
+++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -31,12 +31,12 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         title="0.00432788 ETH"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           0.00432788
         </span>
         <span
-          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
         >
           ETH
         </span>
@@ -129,12 +129,12 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         title="$231.06 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           $231.06
         </span>
         <span
-          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
         >
           USD
         </span>
@@ -183,12 +183,12 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         title="$0.00 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           $0.00
         </span>
         <span
-          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
         >
           USD
         </span>
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
index c98f7b37a587..83e638ca1291 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -10,12 +10,12 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
       >
         0
       </span>
       <span
-        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
       >
         ETH
       </span>
@@ -25,12 +25,12 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
       >
         0
       </span>
       <span
-        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
       >
         ETH
       </span>
diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
index cce8f87215bd..ccc7f74b05aa 100644
--- a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
+++ b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -139,7 +139,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
               title="$0.56"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 $0.56
               </span>
diff --git a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
index 8694dbbe911d..b29efce542e3 100644
--- a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
+++ b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -7,12 +7,12 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
     title="0 ETH"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
     >
       0
     </span>
     <span
-      class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
     >
       ETH
     </span>
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index dc798fd6e9be..4f1f5f323ccf 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -78,12 +78,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
               title="0.006 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.006
               </span>
               <span
-                class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
               >
                 ETH
               </span>
@@ -111,12 +111,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             title="0.006 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
             >
               0.006
             </span>
             <span
-              class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+              class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
index b47181d4f0e2..44ba7be60b6f 100644
--- a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
+++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -7,7 +7,7 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
     title="null"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
     />
   </div>
 </div>
@@ -20,7 +20,7 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
     title="$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
     >
       $123.45
     </span>
@@ -35,7 +35,7 @@ exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
     title="-$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
     >
       -
       $123.45
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index dae55134a048..188a23144bd7 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -300,7 +300,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
@@ -453,7 +453,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -471,12 +471,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                         >
                           ETH
                         </span>
@@ -516,12 +516,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                         >
                           ETH
                         </span>
@@ -556,7 +556,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -574,12 +574,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                         >
                           ETH
                         </span>
@@ -611,12 +611,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       title="0.00021 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                       >
                         0.00021
                       </span>
                       <span
-                        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                       >
                         ETH
                       </span>
diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index ba6041638b9f..8231684b0929 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -270,7 +270,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.0001
               </span>
@@ -383,7 +383,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000021"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -408,7 +408,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000021"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                            class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -442,7 +442,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000121"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -474,7 +474,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000121"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                            class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                           >
                             0.000121
                           </span>
diff --git a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
index 7bb9b3cb6def..f90d6521e8b7 100644
--- a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
+++ b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
@@ -55,12 +55,12 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       title="0 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                       >
                         0
                       </span>
                       <span
-                        class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                        class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                       >
                         ETH
                       </span>
@@ -242,12 +242,12 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                         >
                           ETH
                         </span>
@@ -287,12 +287,12 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="box mm-text currency-display-component__suffix mm-text--inherit box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
+                          class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
                         >
                           ETH
                         </span>

From 5d055d74eb492b31cd3687e6238e03b3c93b4dd6 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 21 Jul 2023 13:13:47 -0500
Subject: [PATCH 13/13] Switch from boxProps to props

---
 .../ui/currency-display/currency-display.component.js        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 0a68d7c2a610..26a80b45dd67 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -28,7 +28,7 @@ export default function CurrencyDisplay({
   prefixComponentWrapperProps = {},
   textProps = {},
   suffixProps = {},
-  boxProps = {},
+  ...props
 }) {
   const [title, parts] = useCurrencyDisplay(value, {
     displayValue,
@@ -49,7 +49,7 @@ export default function CurrencyDisplay({
       display={Display.Flex}
       alignItems={AlignItems.center}
       flexWrap={FlexWrap.Wrap}
-      {...boxProps}
+      {...props}
     >
       {prefixComponent ? (
         <Box
@@ -106,5 +106,4 @@ CurrencyDisplay.propTypes = {
   prefixComponentWrapperProps: PropTypes.object,
   textProps: PropTypes.object,
   suffixProps: PropTypes.object,
-  boxProps: PropTypes.object,
 };