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/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 {
-  EditionData,
-  MasterEdition,
-  MasterEditionData,
-  Metadata,
-  MetadataKey,
-} from "@metaplex/js";
+import { programs } 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 (