chore:(deps): bump @metaplex/js from 2.0.1 to 4.4.1 in /explorer (#21457)

* chore:(deps): bump @metaplex/js from 2.0.1 to 4.4.1 in /explorer

Bumps [@metaplex/js](https://github.com/metaplex/js) from 2.0.1 to 4.4.1.
- [Release notes](https://github.com/metaplex/js/releases)
- [Changelog](https://github.com/metaplex/js/blob/main/CHANGELOG.md)
- [Commits](https://github.com/metaplex/js/compare/v2.0.1...v4.4.1)

---
updated-dependencies:
- dependency-name: "@metaplex/js"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* breaking changes

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Justin Starry <justin@solana.com>

explorer/package-lock.json

@@ -13,7 +13,7 @@
         "@bonfida/spl-name-service": "^0.1.22",
         "@cloudflare/stream-react": "^1.2.0",
         "@metamask/jazzicon": "^2.0.0",
-        "@metaplex/js": "2.0.1",
+        "@metaplex/js": "4.4.1",
         "@project-serum/serum": "^0.13.60",
         "@react-hook/debounce": "^4.0.0",
         "@sentry/react": "^6.13.3",
@@ -4033,13 +4033,14 @@
       }
     },
     "node_modules/@metaplex/js": {
-      "version": "2.0.1",
+      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@metaplex/js/-/js-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@metaplex/js/-/js-4.4.1.tgz",
-      "integrity": "sha512-rH9Nm4q/gcN006P0UEaOTWaoVe1xhRUk7uecHwMx/tNL7umP1JMb5tuyeZxtQUTXHa8D7GfbH04v1l4z2uFy/A==",
+      "integrity": "sha512-jcH51p4hfKgYgzdLjLnfFLpZUM8YSK1XsfhDSpRuWQota64fBQJB3L6AF2+a/iaP6cYFOw0zumy3EQ3Kf7c6wQ==",
       "dependencies": {
         "@solana/spl-token": "^0.1.8",
-        "@solana/web3.js": "^1.24.1",
+        "@solana/web3.js": "^1.30.2",
         "@types/bs58": "^4.0.1",
+        "async-retry": "^1.3.3",
         "axios": "^0.21.4",
         "bn.js": "^5.2.0",
         "borsh": "^0.4.0",
@@ -4049,6 +4050,17 @@
         "form-data": "^4.0.0"
       }
     },
+    "node_modules/@metaplex/js/node_modules/@babel/runtime": {
+      "version": "7.16.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+      "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@metaplex/js/node_modules/@solana/spl-token": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/@solana/spl-token/-/spl-token-0.1.8.tgz",
@@ -4065,6 +4077,53 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@metaplex/js/node_modules/@solana/web3.js": {
+      "version": "1.31.0",
+      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-1.31.0.tgz",
+      "integrity": "sha512-7nHHx1JNFnrt15e9y8m38I/EJCbaB+bFC3KZVM1+QhybCikFxGMtGA5r7PDC3GEL1R2RZA8yKoLkDKo3vzzqnw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@ethersproject/sha2": "^5.5.0",
+        "@solana/buffer-layout": "^3.0.0",
+        "bn.js": "^5.0.0",
+        "borsh": "^0.4.0",
+        "bs58": "^4.0.1",
+        "buffer": "6.0.1",
+        "cross-fetch": "^3.1.4",
+        "jayson": "^3.4.4",
+        "js-sha3": "^0.8.0",
+        "rpc-websockets": "^7.4.2",
+        "secp256k1": "^4.0.2",
+        "superstruct": "^0.14.2",
+        "tweetnacl": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@metaplex/js/node_modules/@solana/web3.js/node_modules/buffer": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.1.tgz",
+      "integrity": "sha512-rVAXBwEcEoYtxnHSO5iWyhzV/O1WMtkUYWlfdLS7FjU4PnSJJHEfHXi/uHPI5EwltmOA794gN3bm3/pzuctWjQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/@metaplex/js/node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -4109,6 +4168,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@metaplex/js/node_modules/superstruct": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/superstruct/-/superstruct-0.14.2.tgz",
+      "integrity": "sha512-nPewA6m9mR3d6k7WkZ8N8zpTWfenFH3q9pA2PkuiZxINr9DKB2+40wEQf0ixn8VaGuJ78AB6iWOtStI+/4FKZQ=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -6659,6 +6723,22 @@
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
     },
+    "node_modules/async-retry": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
+      "integrity": "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==",
+      "dependencies": {
+        "retry": "0.13.1"
+      }
+    },
+    "node_modules/async-retry/node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -29915,13 +29995,14 @@
       }
     },
     "@metaplex/js": {
-      "version": "2.0.1",
+      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@metaplex/js/-/js-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@metaplex/js/-/js-4.4.1.tgz",
-      "integrity": "sha512-rH9Nm4q/gcN006P0UEaOTWaoVe1xhRUk7uecHwMx/tNL7umP1JMb5tuyeZxtQUTXHa8D7GfbH04v1l4z2uFy/A==",
+      "integrity": "sha512-jcH51p4hfKgYgzdLjLnfFLpZUM8YSK1XsfhDSpRuWQota64fBQJB3L6AF2+a/iaP6cYFOw0zumy3EQ3Kf7c6wQ==",
       "requires": {
         "@solana/spl-token": "^0.1.8",
-        "@solana/web3.js": "^1.24.1",
+        "@solana/web3.js": "^1.30.2",
         "@types/bs58": "^4.0.1",
+        "async-retry": "^1.3.3",
         "axios": "^0.21.4",
         "bn.js": "^5.2.0",
         "borsh": "^0.4.0",
@@ -29931,6 +30012,14 @@
         "form-data": "^4.0.0"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+          "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
         "@solana/spl-token": {
           "version": "0.1.8",
           "resolved": "https://registry.npmjs.org/@solana/spl-token/-/spl-token-0.1.8.tgz",
@@ -29944,6 +30033,38 @@
             "dotenv": "10.0.0"
           }
         },
+        "@solana/web3.js": {
+          "version": "1.31.0",
+          "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-1.31.0.tgz",
+          "integrity": "sha512-7nHHx1JNFnrt15e9y8m38I/EJCbaB+bFC3KZVM1+QhybCikFxGMtGA5r7PDC3GEL1R2RZA8yKoLkDKo3vzzqnw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "@ethersproject/sha2": "^5.5.0",
+            "@solana/buffer-layout": "^3.0.0",
+            "bn.js": "^5.0.0",
+            "borsh": "^0.4.0",
+            "bs58": "^4.0.1",
+            "buffer": "6.0.1",
+            "cross-fetch": "^3.1.4",
+            "jayson": "^3.4.4",
+            "js-sha3": "^0.8.0",
+            "rpc-websockets": "^7.4.2",
+            "secp256k1": "^4.0.2",
+            "superstruct": "^0.14.2",
+            "tweetnacl": "^1.0.0"
+          },
+          "dependencies": {
+            "buffer": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.1.tgz",
+              "integrity": "sha512-rVAXBwEcEoYtxnHSO5iWyhzV/O1WMtkUYWlfdLS7FjU4PnSJJHEfHXi/uHPI5EwltmOA794gN3bm3/pzuctWjQ==",
+              "requires": {
+                "base64-js": "^1.3.1",
+                "ieee754": "^1.2.1"
+              }
+            }
+          }
+        },
         "buffer": {
           "version": "6.0.3",
           "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -29967,6 +30088,11 @@
             "combined-stream": "^1.0.8",
             "mime-types": "^2.1.12"
           }
+        },
+        "superstruct": {
+          "version": "0.14.2",
+          "resolved": "https://registry.npmjs.org/superstruct/-/superstruct-0.14.2.tgz",
+          "integrity": "sha512-nPewA6m9mR3d6k7WkZ8N8zpTWfenFH3q9pA2PkuiZxINr9DKB2+40wEQf0ixn8VaGuJ78AB6iWOtStI+/4FKZQ=="
         }
       }
     },
@@ -31903,6 +32029,21 @@
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
     },
+    "async-retry": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
+      "integrity": "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==",
+      "requires": {
+        "retry": "0.13.1"
+      },
+      "dependencies": {
+        "retry": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+          "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="
+        }
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",

explorer/package.json

@@ -8,7 +8,7 @@
     "@bonfida/spl-name-service": "^0.1.22",
     "@cloudflare/stream-react": "^1.2.0",
     "@metamask/jazzicon": "^2.0.0",
-    "@metaplex/js": "2.0.1",
+    "@metaplex/js": "4.4.1",
     "@project-serum/serum": "^0.13.60",
     "@react-hook/debounce": "^4.0.0",
     "@sentry/react": "^6.13.3",

explorer/src/components/account/MetaplexNFTHeader.tsx

@@ -1,6 +1,6 @@
 import "bootstrap/dist/js/bootstrap.min.js";
 import { NFTData } from "providers/accounts";
-import { Creator } from "@metaplex/js";
+import { programs } from "@metaplex/js";
 import { ArtContent } from "components/common/NFTArt";
 import { InfoTooltip } from "components/common/InfoTooltip";
 import { clusterPath } from "utils/url";
@@ -58,6 +58,7 @@ export function NFTHeader({
   );
 }
 
+type Creator = programs.metadata.Creator;
 function getCreatorDropdownItems(creators: Creator[] | null) {
   const CreatorHeader = () => {
     const creatorTooltip =

explorer/src/components/common/NFTArt.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Stream, StreamPlayerApi } from "@cloudflare/stream-react";
 import { PublicKey } from "@solana/web3.js";
 import {
-  MetadataData,
+  programs,
   MetadataJson,
   MetaDataJsonCategory,
   MetadataJsonFile,
@@ -243,7 +243,7 @@ export const ArtContent = ({
   animationURL,
   files,
 }: {
-  metadata: MetadataData;
+  metadata: programs.metadata.MetadataData;
   category?: MetaDataJsonCategory;
   active?: boolean;
   pubkey?: PublicKey | string;
@@ -358,7 +358,10 @@ export const useCachedImage = (uri: string) => {
   return { cachedBlob };
 };
 
-export const useExtendedArt = (id: string, metadata: MetadataData) => {
+export const useExtendedArt = (
+  id: string,
+  metadata: programs.metadata.MetadataData
+) => {
   const [data, setData] = useState<MetadataJson>();
 
   useEffect(() => {

explorer/src/providers/accounts/index.tsx

@@ -25,10 +25,12 @@ import {
   UpgradeableLoaderAccount,
 } from "validators/accounts/upgradeable-program";
 import { RewardsProvider } from "./rewards";
-import { Metadata, MetadataData } from "@metaplex/js";
+import { programs } from "@metaplex/js";
 import getEditionInfo, { EditionInfo } from "./utils/getEditionInfo";
 export { useAccountHistory } from "./history";
 
+const Metadata = programs.metadata.Metadata;
+
 export type StakeProgramData = {
   program: "stake";
   parsed: StakeAccount;
@@ -42,7 +44,7 @@ export type UpgradeableLoaderAccountData = {
 };
 
 export type NFTData = {
-  metadata: MetadataData;
+  metadata: programs.metadata.MetadataData;
   editionInfo: EditionInfo;
 };
 

explorer/src/providers/accounts/utils/getEditionInfo.ts

@@ -1,23 +1,27 @@
-import {
+import { programs } from "@metaplex/js";
-  EditionData,
-  MasterEdition,
-  MasterEditionData,
-  Metadata,
-  MetadataKey,
-} from "@metaplex/js";
 import { Connection } from "@solana/web3.js";
 
+const {
+  metadata: { Metadata, MasterEdition, MetadataKey },
+} = programs;
+
+type MasterEditionData =
+  | programs.metadata.MasterEditionV1Data
+  | programs.metadata.MasterEditionV2Data;
+type EditionData = programs.metadata.EditionData;
+
 export type EditionInfo = {
   masterEdition?: MasterEditionData;
   edition?: EditionData;
 };
 
 export default async function getEditionInfo(
-  metadata: Metadata,
+  metadata: programs.metadata.Metadata,
   connection: Connection
 ): Promise<EditionInfo> {
   try {
-    const edition = (await metadata.getEdition(connection)).data;
+    const edition = (await Metadata.getEdition(connection, metadata.data.mint))
+      .data;
 
     if (edition) {
       if (