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>
2024-12-22 17:33:23 +01:00 · 2023-05-08 19:52:33 +05:30 · 2023-05-08 19:52:33 +05:30 · 4ad281c806
commit 4ad281c806
parent 7ebd561ff9
2 changed files with 100 additions and 113 deletions
--- 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>
--- 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>
    </>