From bab16704325916816d0284e57d29713a7e9dcddf Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 25 Jul 2023 14:32:21 -0500
Subject: [PATCH] Restructure CurrencyDisplay to use Design System (#19171)

* Restructure CurrencyDisplay to use Design System

* Add storybook, remove CSS

* Update ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Remove deprecated imports, import EtherDenomination

* Update jest

* Use TextVariant: Inherit to keep correct font-size

* Snapshots

* Switch from boxProps to props

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 .../confirm-gas-display.test.js.snap          | 25 ++----
 .../confirm-legacy-gas-display.test.js.snap   | 25 ++----
 .../confirm-detail-row.component.test.js.snap | 22 +++---
 .../__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             | 60 ++++++++++++---
 .../currency-display.stories.js               | 77 +++++++++++++++++++
 ui/components/ui/currency-display/index.scss  | 21 -----
 ui/components/ui/ui-components.scss           |  1 -
 .../confirm-send-ether.test.js.snap           | 61 ++++++---------
 .../confirm-transaction-base.test.js.snap     | 39 ++++------
 .../send-content.component.test.js.snap       | 27 +++----
 16 files changed, 231 insertions(+), 227 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 94e7f77da3c7..32e18b8abb32 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="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-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="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                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>
@@ -133,19 +127,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                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 06740da63787..a380323e7974 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="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.000021"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.000021
               </span>
@@ -65,19 +62,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              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
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                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="currency-display-component__suffix"
+                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>
@@ -98,19 +92,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         </strong>
         <div>
           <div
-            class="currency-display-component"
+            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
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              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="currency-display-component__suffix"
+              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 880b74bcd951..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
@@ -12,37 +12,39 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       class="confirm-detail-row__details"
     >
       <div
-        class="currency-display-component confirm-detail-row__primary"
+        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"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+          variant="inherit"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 18px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           0
         </span>
       </div>
       <div
-        class="currency-display-component confirm-detail-row__secondary"
+        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"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+          variant="inherit"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 14px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          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 de6f2afcc1cb..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
@@ -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="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
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          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="currency-display-component__suffix"
+          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>
@@ -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="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
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          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="currency-display-component__suffix"
+          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>
@@ -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="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
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          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="currency-display-component__suffix"
+          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 c23cca668e5b..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
@@ -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="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
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        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>
     </div>
     <div
-      class="currency-display-component cancel-transaction-gas-fee__fiat"
+      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
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        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 d8a2ca837c2b..13bc77081404 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="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="$0.56"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                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 61224fdb0f06..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
@@ -3,19 +3,16 @@
 exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
 <div>
   <div
-    class="currency-display-component"
+    class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
     title="0 ETH"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
     >
       0
     </span>
     <span
-      class="currency-display-component__suffix"
+      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 e15f761c4950..a3d8ef3e5ddd 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
@@ -70,19 +70,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-flex-end mm-box--align-items-center mm-box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              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
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                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="currency-display-component__suffix"
+                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>
@@ -106,19 +103,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         >
           <div
-            class="currency-display-component"
+            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
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              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="currency-display-component__suffix"
+              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 6e898fc29bc9..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
@@ -3,14 +3,11 @@
 exports[`CurrencyDisplay Component should match default snapshot 1`] = `
 <div>
   <div
-    class="currency-display-component"
+    class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
     title="null"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-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="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
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-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="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
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      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/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 73f32a2eb7fa..26a80b45dd67 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 { Text, Box } from '../../component-library';
+import {
+  AlignItems,
+  Display,
+  FlexWrap,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
 
 export default function CurrencyDisplay({
   value,
@@ -18,6 +25,10 @@ export default function CurrencyDisplay({
   denomination,
   currency,
   suffix,
+  prefixComponentWrapperProps = {},
+  textProps = {},
+  suffixProps = {},
+  ...props
 }) {
   const [title, parts] = useCurrencyDisplay(value, {
     displayValue,
@@ -28,26 +39,50 @@ 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={FlexWrap.Wrap}
+      {...props}
     >
-      <span className="currency-display-component__prefix">
-        {prefixComponent}
-      </span>
-      <span className="currency-display-component__text">
+      {prefixComponent ? (
+        <Box
+          className="currency-display-component__prefix"
+          marginInlineEnd={1}
+          variant={TextVariant.inherit}
+          {...prefixComponentWrapperProps}
+        >
+          {prefixComponent}
+        </Box>
+      ) : null}
+      <Text
+        as="span"
+        className="currency-display-component__text"
+        ellipsis
+        variant={TextVariant.inherit}
+        {...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}
+          variant={TextVariant.inherit}
+          {...suffixProps}
+        >
           {parts.suffix}
-        </span>
-      )}
-    </div>
+        </Text>
+      ) : null}
+    </Box>
   );
 }
 
@@ -68,4 +103,7 @@ CurrencyDisplay.propTypes = {
   style: PropTypes.object,
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   value: PropTypes.string,
+  prefixComponentWrapperProps: PropTypes.object,
+  textProps: PropTypes.object,
+  suffixProps: PropTypes.object,
 };
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..4e23fca27a6a
--- /dev/null
+++ b/ui/components/ui/currency-display/currency-display.stories.js
@@ -0,0 +1,77 @@
+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: {
+    className: {
+      control: 'text',
+    },
+    currency: {
+      control: 'text',
+    },
+    'data-testid': {
+      control: 'text',
+    },
+    denomination: {
+      control: 'select',
+      options: [EtherDenomination.ETH, EtherDenomination.GWEI],
+    },
+    displayValue: {
+      control: 'text',
+    },
+    hideLabel: {
+      control: 'boolean',
+    },
+    hideTitle: {
+      control: 'boolean',
+    },
+    numberOfDecimals: {
+      control: 'number',
+    },
+    prefix: {
+      control: 'text',
+    },
+    prefixComponent: {
+      control: 'text',
+    },
+    style: {
+      control: 'object',
+    },
+    suffix: {
+      control: 'text',
+    },
+    value: {
+      control: 'text',
+    },
+    prefixComponentWrapperProps: {
+      control: 'object',
+    },
+    textProps: {
+      control: 'object',
+    },
+    suffixProps: {
+      control: 'object',
+    },
+    boxProps: {
+      control: 'object',
+    },
+  },
+  args: {
+    denomination: EtherDenomination.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 933554b0dd41..000000000000
--- a/ui/components/ui/currency-display/index.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.currency-display-component {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  &__text {
-    /*rtl:ignore*/
-    direction: ltr;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &__prefix {
-    padding-right: 4px;
-  }
-
-  &__suffix {
-    padding-left: 4px;
-  }
-}
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 6590df11c02c..c889ab29635e 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,20 @@ exports[`ConfirmSendEther should render correct information for for confirm send
             class="mm-box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0"
             >
-              <span
-                class="currency-display-component__prefix"
+              <div
+                class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+                variant="inherit"
               >
                 <i
                   class="fab fa-ethereum"
                   style="font-size: 24px;"
                 />
-              </span>
+              </div>
               <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0
               </span>
@@ -448,14 +449,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.00021"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -469,19 +467,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        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
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          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="currency-display-component__suffix"
+                          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>
@@ -517,19 +512,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        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
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          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="currency-display-component__suffix"
+                          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>
@@ -560,14 +552,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="currency-display-component"
+                        class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                         title="0.00021"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -581,19 +570,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="currency-display-component"
+                        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
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          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="currency-display-component__suffix"
+                          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>
@@ -621,19 +607,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                     </strong>
                      
                     <div
-                      class="currency-display-component"
+                      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
-                        class="currency-display-component__prefix"
-                      />
-                      <span
-                        class="currency-display-component__text"
+                        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="currency-display-component__suffix"
+                        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 4d89d32e21fc..7386530bf876 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,20 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
             class="mm-box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
               title="0.0001"
             >
-              <span
-                class="currency-display-component__prefix"
+              <div
+                class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
+                variant="inherit"
               >
                 <i
                   class="fab fa-ethereum"
                   style="font-size: 24px;"
                 />
-              </span>
+              </div>
               <span
-                class="currency-display-component__text"
+                class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 0.0001
               </span>
@@ -378,14 +379,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       >
                         <div>
                           <div
-                            class="currency-display-component"
+                            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                             title="0.000021"
                           >
                             <span
-                              class="currency-display-component__prefix"
-                            />
-                            <span
-                              class="currency-display-component__text"
+                              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -406,14 +404,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       </strong>
                       <div>
                         <div
-                          class="currency-display-component"
+                          class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                           title="0.000021"
                         >
                           <span
-                            class="currency-display-component__prefix"
-                          />
-                          <span
-                            class="currency-display-component__text"
+                            class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -443,14 +438,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           class="confirm-page-container-content__total-value"
                         >
                           <div
-                            class="currency-display-component"
+                            class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                             title="0.000121"
                           >
                             <span
-                              class="currency-display-component__prefix"
-                            />
-                            <span
-                              class="currency-display-component__text"
+                              class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -478,14 +470,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                         </strong>
                          
                         <div
-                          class="currency-display-component"
+                          class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                           title="0.000121"
                         >
                           <span
-                            class="currency-display-component__prefix"
-                          />
-                          <span
-                            class="currency-display-component__text"
+                            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 23bc6eaa9c09..df70522a2528 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="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
                       title="0 ETH"
                     >
                       <span
-                        class="currency-display-component__prefix"
-                      />
-                      <span
-                        class="currency-display-component__text"
+                        class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                       >
                         0
                       </span>
                       <span
-                        class="currency-display-component__suffix"
+                        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>
@@ -241,19 +238,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        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
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          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="currency-display-component__suffix"
+                          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>
@@ -289,19 +283,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        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
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          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="currency-display-component__suffix"
+                          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>