From 4ad281c8063c469857ea5293e83a8d37918ac86a Mon Sep 17 00:00:00 2001
From: Harsh Shukla <125105825+PrgrmrHarshShukla@users.noreply.github.com>
Date: Mon, 8 May 2023 19:52:33 +0530
Subject: [PATCH] Part of #17670 & #18714: Replace Typography with Text
 component: nft-details.js (#18771)

* Update nft-details.js

* Update nft-details.test.js.snap

* Update nft-details.js

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/nft-details/nft-details.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update nft-details.test.js.snap

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 .../__snapshots__/nft-details.test.js.snap    |  22 +-
 ui/components/app/nft-details/nft-details.js  | 191 ++++++++----------
 2 files changed, 100 insertions(+), 113 deletions(-)

diff --git a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
index b66a360ac..6dc2d4854 100644
--- a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
+++ b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
@@ -56,12 +56,12 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
       >
         <div>
           <h4
-            class="box box--margin-top-1 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--heading-sm mm-text--font-weight-bold box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             MUNK #1
           </h4>
           <h5
-            class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h5 typography--weight-normal typography--style-normal typography--color-text-muted typography--overflowwrap-break-word"
+            class="box mm-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-muted"
           >
             #
             1
@@ -88,7 +88,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         class="box box--display-flex box--flex-direction-row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
         >
           Last sold
         </h6>
@@ -96,7 +96,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative typography--overflowwrap-break-word"
+            class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
           >
             1/18/2023
           </h6>
@@ -106,7 +106,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         class="box box--display-flex box--flex-direction-row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
         >
           Last price sold
         </h6>
@@ -114,7 +114,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative typography--overflowwrap-break-word"
+            class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
           >
             0.0049 ETH
           </h6>
@@ -124,12 +124,12 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         class="box box--display-flex box--flex-direction-row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
         >
           Source
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography nft-details__image-source typography--h6 typography--weight-normal typography--style-normal typography--color-primary-default"
+          class="box mm-text nft-details__image-source mm-text--body-sm box--margin-bottom-4 box--flex-direction-row box--color-primary-default"
         >
           <a
             href="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
@@ -145,7 +145,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         class="box box--display-flex box--flex-direction-row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
         >
           Contract address
         </h6>
@@ -153,7 +153,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative typography--overflowwrap-break-word"
+            class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
           >
             0xDc7...6414
           </h6>
@@ -183,7 +183,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         </div>
       </div>
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+        class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
       >
         Disclaimer: MetaMask pulls the media file from the source url. This url sometimes is changed by the marketplace the NFT was minted on.
       </h6>
diff --git a/ui/components/app/nft-details/nft-details.js b/ui/components/app/nft-details/nft-details.js
index 336d5a96c..bbdd1df12 100644
--- a/ui/components/app/nft-details/nft-details.js
+++ b/ui/components/app/nft-details/nft-details.js
@@ -5,15 +5,14 @@ import { useHistory } from 'react-router-dom';
 import { isEqual } from 'lodash';
 import Box from '../../ui/box';
 import Card from '../../ui/card';
-import Typography from '../../ui/typography/typography';
 import {
   TextColor,
   IconColor,
-  TypographyVariant,
-  FONT_WEIGHT,
+  TextVariant,
+  FontWeight,
   JustifyContent,
   FLEX_DIRECTION,
-  OVERFLOW_WRAP,
+  OverflowWrap,
   DISPLAY,
   BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
@@ -53,7 +52,7 @@ import {
   TokenStandard,
 } from '../../../../shared/constants/transaction';
 import NftDefaultImage from '../nft-default-image';
-import { ButtonIcon, IconName } from '../../component-library';
+import { ButtonIcon, IconName, Text } from '../../component-library';
 import Tooltip from '../../ui/tooltip';
 import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
 
@@ -201,42 +200,45 @@ export default function NftDetails({ nft }) {
             justifyContent={JustifyContent.spaceBetween}
           >
             <div>
-              <Typography
+              <Text
                 color={TextColor.textDefault}
-                variant={TypographyVariant.H4}
-                fontWeight={FONT_WEIGHT.BOLD}
-                boxProps={{ margin: 0, marginBottom: 2 }}
+                variant={TextVariant.headingSm}
+                as="h4"
+                fontWeight={FontWeight.Bold}
+                marginBottom={2}
               >
                 {name}
-              </Typography>
-              <Typography
+              </Text>
+              <Text
                 color={TextColor.textMuted}
-                variant={TypographyVariant.H5}
-                boxProps={{ margin: 0, marginBottom: 4 }}
-                overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
+                variant={TextVariant.bodyMd}
+                as="h5"
+                marginBottom={4}
+                overflowWrap={OverflowWrap.BreakWord}
               >
                 #{tokenId}
-              </Typography>
+              </Text>
             </div>
             {description ? (
               <div>
-                <Typography
+                <Text
                   color={TextColor.textDefault}
-                  variant={TypographyVariant.H6}
-                  fontWeight={FONT_WEIGHT.BOLD}
+                  variant={TextVariant.bodySmBold}
+                  as="h6"
+                  marginBottom={2}
                   className="nft-details__description"
-                  boxProps={{ margin: 0, marginBottom: 2 }}
                 >
                   {t('description')}
-                </Typography>
-                <Typography
+                </Text>
+                <Text
                   color={TextColor.textAlternative}
-                  variant={TypographyVariant.H6}
-                  overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
-                  boxProps={{ margin: 0, marginBottom: 4 }}
+                  variant={TextVariant.bodySm}
+                  as="h6"
+                  overflowWrap={OverflowWrap.BreakWord}
+                  marginBottom={4}
                 >
                   {description}
-                </Typography>
+                </Text>
               </div>
             ) : null}
             {inPopUp ? null : renderSendButton()}
@@ -246,87 +248,78 @@ export default function NftDetails({ nft }) {
           {lastSale ? (
             <>
               <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
-                <Typography
+                <Text
                   color={TextColor.textDefault}
-                  variant={TypographyVariant.H6}
-                  fontWeight={FONT_WEIGHT.BOLD}
-                  boxProps={{
-                    margin: 0,
-                    marginBottom: 4,
-                    marginRight: 2,
-                  }}
+                  variant={TextVariant.bodySmBold}
+                  as="h6"
+                  marginBottom={4}
+                  marginRight={2}
                   className="nft-details__link-title"
                 >
                   {t('lastSold')}
-                </Typography>
+                </Text>
                 <Box
                   display={DISPLAY.FLEX}
                   flexDirection={FLEX_DIRECTION.ROW}
                   className="nft-details__contract-wrapper"
                 >
-                  <Typography
+                  <Text
                     color={TextColor.textAlternative}
-                    variant={TypographyVariant.H6}
-                    overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
-                    boxProps={{ margin: 0, marginBottom: 4 }}
+                    variant={TextVariant.bodySm}
+                    as="h6"
+                    overflowWrap={OverflowWrap.BreakWord}
+                    marginBottom={4}
                   >
                     {formattedTimestamp}
-                  </Typography>
+                  </Text>
                 </Box>
               </Box>
               <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
-                <Typography
+                <Text
                   color={TextColor.textDefault}
-                  variant={TypographyVariant.H6}
-                  fontWeight={FONT_WEIGHT.BOLD}
-                  boxProps={{
-                    margin: 0,
-                    marginBottom: 4,
-                    marginRight: 2,
-                  }}
+                  variant={TextVariant.bodySmBold}
+                  as="h6"
+                  marginBottom={4}
+                  marginRight={2}
                   className="nft-details__link-title"
                 >
                   {t('lastPriceSold')}
-                </Typography>
+                </Text>
                 <Box
                   display={DISPLAY.FLEX}
                   flexDirection={FLEX_DIRECTION.ROW}
                   className="nft-details__contract-wrapper"
                 >
-                  <Typography
+                  <Text
                     color={TextColor.textAlternative}
-                    variant={TypographyVariant.H6}
-                    overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
-                    boxProps={{ margin: 0, marginBottom: 4 }}
+                    variant={TextVariant.bodySm}
+                    as="h6"
+                    overflowWrap={OverflowWrap.BreakWord}
+                    marginBottom={4}
                   >
                     {`${Number(decWEIToDecETH(lastSale.total_price))} ${
                       lastSale.payment_token.symbol
                     }`}
-                  </Typography>
+                  </Text>
                 </Box>
               </Box>
             </>
           ) : null}
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
-            <Typography
+            <Text
               color={TextColor.textDefault}
-              variant={TypographyVariant.H6}
-              fontWeight={FONT_WEIGHT.BOLD}
-              boxProps={{
-                margin: 0,
-                marginBottom: 4,
-                marginRight: 2,
-              }}
+              variant={TextVariant.bodySmBold}
+              as="h6"
+              marginBottom={4}
+              marginRight={2}
               className="nft-details__link-title"
             >
               {t('source')}
-            </Typography>
-            <Typography
-              variant={TypographyVariant.H6}
-              boxProps={{
-                margin: 0,
-                marginBottom: 4,
-              }}
+            </Text>
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
+              marginBottom={4}
               className="nft-details__image-source"
               color={
                 isDataURI ? TextColor.textDefault : TextColor.primaryDefault
@@ -344,29 +337,24 @@ export default function NftDetails({ nft }) {
                   {nftImageURL}
                 </a>
               )}
-            </Typography>
+            </Text>
           </Box>
           {imageThumbnail ? (
             <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
-              <Typography
+              <Text
                 color={TextColor.textDefault}
-                variant={TypographyVariant.H6}
-                fontWeight={FONT_WEIGHT.BOLD}
-                boxProps={{
-                  margin: 0,
-                  marginBottom: 4,
-                  marginRight: 2,
-                }}
+                variant={TextVariant.bodySmBold}
+                as="h6"
+                marginBottom={4}
+                marginRight={2}
                 className="nft-details__link-title"
               >
                 {t('link')}
-              </Typography>
-              <Typography
-                variant={TypographyVariant.H6}
-                boxProps={{
-                  margin: 0,
-                  marginBottom: 4,
-                }}
+              </Text>
+              <Text
+                variant={TextVariant.bodySm}
+                as="h6"
+                marginBottom={4}
                 className="nft-details__image-source"
                 color={
                   isDataURI ? TextColor.textDefault : TextColor.primaryDefault
@@ -380,36 +368,34 @@ export default function NftDetails({ nft }) {
                 >
                   {imageThumbnail}
                 </a>
-              </Typography>
+              </Text>
             </Box>
           ) : null}
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
-            <Typography
+            <Text
               color={TextColor.textDefault}
-              variant={TypographyVariant.H6}
-              fontWeight={FONT_WEIGHT.BOLD}
-              boxProps={{
-                margin: 0,
-                marginBottom: 4,
-                marginRight: 2,
-              }}
+              variant={TextVariant.bodySmBold}
+              as="h6"
+              marginBottom={4}
+              marginRight={2}
               className="nft-details__link-title"
             >
               {t('contractAddress')}
-            </Typography>
+            </Text>
             <Box
               display={DISPLAY.FLEX}
               flexDirection={FLEX_DIRECTION.ROW}
               className="nft-details__contract-wrapper"
             >
-              <Typography
+              <Text
                 color={TextColor.textAlternative}
-                variant={TypographyVariant.H6}
-                overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
-                boxProps={{ margin: 0, marginBottom: 4 }}
+                variant={TextVariant.bodySm}
+                as="h6"
+                overflowWrap={OverflowWrap.BreakWord}
+                marginBottom={4}
               >
                 {shortenAddress(address)}
-              </Typography>
+              </Text>
               <Tooltip
                 wrapperClassName="nft-details__tooltip-wrapper"
                 position="bottom"
@@ -433,12 +419,13 @@ export default function NftDetails({ nft }) {
             </Box>
           </Box>
           {inPopUp ? renderSendButton() : null}
-          <Typography
+          <Text
             color={TextColor.textAlternative}
-            variant={TypographyVariant.H7}
+            variant={TextVariant.bodySm}
+            as="h6"
           >
             {t('nftDisclaimer')}
-          </Typography>
+          </Text>
         </Box>
       </Box>
     </>