refactor: replace Typography with Text component in nfts-items.js

.yarnrc.yml

@@ -13,128 +13,48 @@ logFilters:
 nodeLinker: node-modules
 
 npmAuditIgnoreAdvisories:
-  ### Advisories:
-
-  # Issue: yargs-parser Vulnerable to Prototype Pollution
-  # URL - https://github.com/advisories/GHSA-p9pc-299p-vxgp
-  # The affected version (<5.0.0) is only included via @ensdomains/ens via
-  # 'solc' which is not used in the imports we use from this package.
   - 1088783
-
-  # Issue: protobufjs Prototype Pollution vulnerability
-  # URL - https://github.com/advisories/GHSA-h755-8qp9-cq85
-  # Not easily patched. Minimally effects the extension due to usage of
-  # LavaMoat lockdown. Additional id added that resolves to the same advisory
-  # but has a different entry due to it being a new dependency of
-  # @trezor/connect-web. Upgrading
   - 1092429
   - 1095136
-
-  # Issue: Regular Expression Denial of Service (ReDOS)
-  # URL: https://github.com/advisories/GHSA-257v-vj4p-3w2h
-  # color-string is listed as a dependency of 'color' which is brought in by
-  # @metamask/jazzicon v2.0.0 but there is work done on that repository to
-  # remove the color dependency. We should upgrade
   - 1089718
-
-  # Issue: semver vulnerable to Regular Expression Denial of Service
-  # URL: https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
-  # semver is used in the solidity compiler portion of @truffle/codec that does
-  # not appear to be used.
   - 1092461
-
-  # Temp fix for https://github.com/MetaMask/metamask-extension/pull/16920 for the sake of 11.7.1 hotfix
-  # This will be removed in this ticket https://github.com/MetaMask/metamask-extension/issues/22299
-  - 'ts-custom-error (deprecation)'
-  - 'text-encoding (deprecation)'
-
-  ### Package Deprecations:
-
-  # React-tippy brings in popper.js and react-tippy has not been updated in
-  # three years.
-  - 'popper.js (deprecation)'
-
-  # React-router is out of date and brings in the following deprecated package
-  - 'mini-create-react-context (deprecation)'
-
-  # The affected version, which is less than 7.0.0, is brought in by
-  # ethereumjs-wallet version 0.6.5 used in the extension but only in a single
-  # file app/scripts/account-import-strategies/index.js, which may be easy to
-  # upgrade.
-  - 'uuid (deprecation)'
-
-  # @npmcli/move-file is brought in via CopyWebpackPlugin used in the storybook
-  # main.js file, which can be upgraded to remove this dependency in favor of
-  # @npmcli/fs
-  - '@npmcli/move-file (deprecation)'
-
-  # Upgrading babel will result in the following deprecated packages being
-  # updated:
-  - 'core-js (deprecation)'
-
-  # Material UI dependencies are planned for removal
-  - '@material-ui/core (deprecation)'
-  - '@material-ui/styles (deprecation)'
-  - '@material-ui/system (deprecation)'
-
-  # @ensdomains/ens should be explored for upgrade. The following packages are
-  # deprecated and would be resolved by upgrading to newer versions of
-  # ensdomains packages:
-  - '@ensdomains/ens (deprecation)'
-  - '@ensdomains/resolver (deprecation)'
-  - 'testrpc (deprecation)'
-
-  # Dependencies brought in by @truffle/decoder that are deprecated:
-  - 'cids (deprecation)' # via @ensdomains/content-hash
-  - 'multibase (deprecation)' # via cids
-  - 'multicodec (deprecation)' # via cids
-
-  # MetaMask owned repositories brought in by other MetaMask dependencies that
-  # can be resolved by updating the versions throughout the dependency tree
-  - 'eth-sig-util (deprecation)' # via @metamask/eth-ledger-bridge-keyring
-  - '@metamask/controller-utils (deprecation)' # via @metamask/phishing-controller
-  - 'safe-event-emitter (deprecation)' # via eth-block-tracker and others
-
-  # @metamask-institutional relies upon crypto which is deprecated
-  - 'crypto (deprecation)'
-
-  # @metamask/providers uses webextension-polyfill-ts which has been moved to
-  # @types/webextension-polyfill
-  - 'webextension-polyfill-ts (deprecation)'
-
-  # Imported in @trezor/blockchain-link@npm:2.1.8, but not actually depended on
-  # by MetaMask
-  - 'ripple-lib (deprecation)'
-
-  # Brought in by ethereumjs-utils, which is used in the extension and in many
-  # other dependencies. At the time of this exclusion, the extension has three
-  # old versions of ethereumjs-utils which should be upgraded to
-  # @ethereumjs/utils throughout our owned repositories. However even doing
-  # that may be insufficient due to dependencies we do not own still relying
-  # upon old versions of ethereumjs-utils.
-  - 'ethereum-cryptography (deprecation)'
-
-  # Currently only dependent on deprecated @metamask/types as it is brought in
-  # by @metamask/keyring-api. Updating the dependency in keyring-api will
-  # remove this.
-  - '@metamask/types (deprecation)'
-
-  # @metamask/keyring-api also depends on @metamask/snaps-ui which is
-  # deprecated. Replacing that dependency with @metamask/snaps-sdk will remove
-  # this.
-  - '@metamask/snaps-ui (deprecation)'
+  - ts-custom-error (deprecation)
+  - text-encoding (deprecation)
+  - popper.js (deprecation)
+  - mini-create-react-context (deprecation)
+  - uuid (deprecation)
+  - "@npmcli/move-file (deprecation)"
+  - core-js (deprecation)
+  - "@material-ui/core (deprecation)"
+  - "@material-ui/styles (deprecation)"
+  - "@material-ui/system (deprecation)"
+  - "@ensdomains/ens (deprecation)"
+  - "@ensdomains/resolver (deprecation)"
+  - testrpc (deprecation)
+  - cids (deprecation)
+  - multibase (deprecation)
+  - multicodec (deprecation)
+  - eth-sig-util (deprecation)
+  - "@metamask/controller-utils (deprecation)"
+  - safe-event-emitter (deprecation)
+  - crypto (deprecation)
+  - webextension-polyfill-ts (deprecation)
+  - ripple-lib (deprecation)
+  - ethereum-cryptography (deprecation)
+  - "@metamask/types (deprecation)"
+  - "@metamask/snaps-ui (deprecation)"
 
 npmRegistries:
-  'https://npm.pkg.github.com':
+  "https://npm.pkg.github.com":
     npmAlwaysAuth: true
-    npmAuthToken: '${GITHUB_PACKAGE_READ_TOKEN-}'
+    npmAuthToken: "${GITHUB_PACKAGE_READ_TOKEN-}"
 
 npmScopes:
   metamask:
-    npmRegistryServer: '${METAMASK_NPM_REGISTRY:-https://registry.yarnpkg.com}'
+    npmRegistryServer: "${METAMASK_NPM_REGISTRY:-https://registry.yarnpkg.com}"
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-allow-scripts.cjs
-    spec: 'https://raw.githubusercontent.com/LavaMoat/LavaMoat/main/packages/yarn-plugin-allow-scripts/bundles/@yarnpkg/plugin-allow-scripts.js'
+    spec: "https://raw.githubusercontent.com/LavaMoat/LavaMoat/main/packages/yarn-plugin-allow-scripts/bundles/@yarnpkg/plugin-allow-scripts.js"
   - path: .yarn/plugins/@yarnpkg/plugin-engines.cjs
-    spec: 'https://raw.githubusercontent.com/devoto13/yarn-plugin-engines/main/bundles/%40yarnpkg/plugin-engines.js'
+    spec: "https://raw.githubusercontent.com/devoto13/yarn-plugin-engines/main/bundles/%40yarnpkg/plugin-engines.js"

ui/components/app/assets/nfts/nfts-items/nfts-items.js

@@ -4,16 +4,19 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { isEqual } from 'lodash';
 import Box from '../../../../ui/box';
-import Typography from '../../../../ui/typography/typography';
 import {
   Color,
-  TypographyVariant,
   JustifyContent,
   FLEX_DIRECTION,
   AlignItems,
   DISPLAY,
   BLOCK_SIZES,
   FLEX_WRAP,
+  TextVariant,
+  FontWeight,
+  FontStyle,
+  OverflowWrap,
+  TextAlign,
 } from '../../../../../helpers/constants/design-system';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../../../shared/constants/app';
 import { getEnvironmentType } from '../../../../../../app/scripts/lib/util';
@@ -121,16 +124,16 @@ export default function NftsItems({
   const renderCollectionImage = (collectionImage, collectionName) => {
     if (collectionImage?.startsWith('ipfs') && !ipfsGateway) {
       return (
-        <div className="nfts-items__collection-image-alt">
+        <Text className="nfts-items__collection-image-alt" variant={TextVariant.bodyMd}>
           {collectionName?.[0]?.toUpperCase() ?? null}
-        </div>
+        </Text>
       );
     }
     if (!openSeaEnabled && !collectionImage?.startsWith('ipfs')) {
       return (
-        <div className="nfts-items__collection-image-alt">
+        <Text className="nfts-items__collection-image-alt" variant={TextVariant.bodyMd}>
           {collectionName?.[0]?.toUpperCase() ?? null}
-        </div>
+        </Text>
       );
     }
 
@@ -144,9 +147,13 @@ export default function NftsItems({
       );
     }
     return (
-      <div className="nfts-items__collection-image-alt">
+      <Text
+        className="nfts-items__collection-image-alt"
+        variant={TextVariant.bodyMd}
+        as="div"
+      >
         {collectionName?.[0]?.toUpperCase() ?? null}
-      </div>
+      </Text>
     );
   };
 
@@ -195,18 +202,24 @@ export default function NftsItems({
   };
 
   const renderCollection = ({ nfts, collectionName, collectionImage, key }) => {
-    if (!nfts.length) {
+    if (!nfts || !nfts.length) {
       return null;
     }
 
-    const isExpanded = nftsDropdownState[selectedAddress]?.[chainId]?.[key];
+    // Check if nftsDropdownState, selectedAddress, and chainId are defined
+    const isExpanded = nftsDropdownState && selectedAddress && chainId
+      ? nftsDropdownState[selectedAddress]?.[chainId]?.[key]
+      : false;
+
     return (
       <div className="nfts-items__collection" key={`collection-${key}`}>
         <button
           className="nfts-items__collection-wrapper"
           data-testid="collection-expander-button"
           onClick={() => {
-            updateNftDropDownStateKey(key, isExpanded);
+            if (nftsDropdownState && selectedAddress && chainId) {
+              updateNftDropDownStateKey(key, isExpanded);
+            }
           }}
         >
           <Box
@@ -221,13 +234,13 @@ export default function NftsItems({
               className="nfts-items__collection-header"
             >
               {renderCollectionImage(collectionImage, collectionName)}
-              <Typography
+              <Text
                 color={Color.textDefault}
-                variant={TypographyVariant.H5}
+                variant={TextVariant.headingMd}
                 margin={2}
               >
                 {`${collectionName ?? t('unknownCollection')} (${nfts.length})`}
-              </Typography>
+              </Text>
             </Box>
             <Box alignItems={AlignItems.flexEnd}>
               <Icon
@@ -282,7 +295,9 @@ export default function NftsItems({
                     isIpfsURL={isIpfsURL}
                     clickable
                   />
-                  {showTokenId ? <Text>{`${t('id')}: ${tokenId}`}</Text> : null}
+                  {showTokenId ? (
+                    <Text variant={TextVariant.bodySm}>{`${t('id')}: ${tokenId}`}</Text>
+                  ) : null}
                 </Box>
               );
             })}

ui/components/app/assets/nfts/nfts-items/nfts-items.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import NftsItems from './nfts-items.js';
+
+export default {
+  title: 'UI/Components/App/Assets/NFTs/NftsItems',
+  component: NftsItems,
+  argTypes: {
+    collections: { control: 'object' },
+    previouslyOwnedCollection: { control: 'object' },
+    isModal: { control: 'boolean' },
+    onCloseModal: { action: 'onCloseModal' },
+    showTokenId: { control: 'boolean' },
+    displayPreviouslyOwnedCollection: { control: 'boolean' },
+  },
+} as Meta<typeof NftsItems>;
+
+const Template: StoryFn<typeof NftsItems> = (args) => <NftsItems {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  collections: {
+    collection1: {
+      nfts: [
+        {
+          address: '0x123',
+          tokenId: '1',
+          name: 'NFT 1',
+          image: 'https://example.com/nft1.png',
+        },
+        {
+          address: '0x123',
+          tokenId: '2',
+          name: 'NFT 2',
+          image: 'https://example.com/nft2.png',
+        },
+      ],
+      collectionName: 'Collection 1',
+      collectionImage: 'https://example.com/collection1.png',
+    },
+    '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4': {
+      nfts: [
+        {
+          address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+          tokenId: '1',
+          name: 'Special NFT 1',
+          image: 'https://example.com/special-nft1.png',
+        },
+        {
+          address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+          tokenId: '2',
+          name: 'Special NFT 2',
+          image: 'https://example.com/special-nft2.png',
+        },
+      ],
+      collectionName: 'Special Collection',
+      collectionImage: 'https://example.com/special-collection.png',
+    },
+  },
+  previouslyOwnedCollection: {
+    nfts: [
+      {
+        address: '0x456',
+        tokenId: '3',
+        name: 'Previously Owned NFT',
+        image: 'https://example.com/nft3.png',
+      },
+    ],
+    collectionName: 'Previously Owned',
+    collectionImage: 'https://example.com/previously-owned.png',
+  },
+  isModal: false,
+  showTokenId: true,
+  displayPreviouslyOwnedCollection: true,
+};