Added a Metadata tab to display Metaplex Metadata (#20525)

* Added a Metadata tab to display Metaplex Metadata for Metaplex NFTs

* Added a new tabs key for metaplexNFTs

* Forgot to run Prettier like a n00b

explorer/src/components/account/MetaplexMetadataCard.tsx

@@ -0,0 +1,26 @@
+import { NFTData } from "providers/accounts";
+import ReactJson from "react-json-view";
+
+export function MetaplexMetadataCard({ nftData }: { nftData: NFTData }) {
+  return (
+    <>
+      <div className="card">
+        <div className="card-header">
+          <div className="row align-items-center">
+            <div className="col">
+              <h3 className="card-header-title">Metaplex Metadata</h3>
+            </div>
+          </div>
+        </div>
+
+        <div className="card metadata-json-viewer m-4">
+          <ReactJson
+            src={nftData.metadata}
+            theme={"solarized"}
+            style={{ padding: 25 }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

explorer/src/components/account/MetaplexNFTHeader.tsx

@@ -92,7 +92,11 @@ function getCreatorDropdownItems(creators: Creator[] | null) {
 
   const CreatorEntry = (creator: Creator) => {
     return (
-      <div className={"d-flex align-items-center creator-dropdown-entry"}>
+      <div
+        className={
+          "d-flex align-items-center text-monospace creator-dropdown-entry ml-3 mr-3"
+        }
+      >
         {getVerifiedIcon(creator.verified)}
         <Link
           className="dropdown-item text-monospace creator-dropdown-entry-address"

explorer/src/pages/AccountDetailsPage.tsx

@@ -6,6 +6,7 @@ import {
   useAccountInfo,
   Account,
   ProgramData,
+  TokenProgramData,
 } from "providers/accounts";
 import { StakeAccountSection } from "components/account/StakeAccountSection";
 import { TokenAccountSection } from "components/account/TokenAccountSection";
@@ -34,6 +35,7 @@ import { TransactionHistoryCard } from "components/account/history/TransactionHi
 import { TokenTransfersCard } from "components/account/history/TokenTransfersCard";
 import { TokenInstructionsCard } from "components/account/history/TokenInstructionsCard";
 import { RewardsCard } from "components/account/RewardsCard";
+import { MetaplexMetadataCard } from "components/account/MetaplexMetadataCard";
 import { NFTHeader } from "components/account/MetaplexNFTHeader";
 
 const IDENTICON_WIDTH = 64;
@@ -56,6 +58,13 @@ const TABS_LOOKUP: { [id: string]: Tab[] } = {
       path: "/largest",
     },
   ],
+  "spl-token:mint:metaplexNFT": [
+    {
+      slug: "metadata",
+      title: "Metadata",
+      path: "/metadata",
+    },
+  ],
   stake: [
     {
       slug: "rewards",
@@ -300,7 +309,8 @@ export type MoreTabs =
   | "blockhashes"
   | "transfers"
   | "instructions"
-  | "rewards";
+  | "rewards"
+  | "metadata";
 
 function MoreSection({
   account,
@@ -364,6 +374,11 @@ function MoreSection({
         data.parsed.type === "recentBlockhashes" && (
           <BlockhashesCard blockhashes={data.parsed.info} />
         )}
+      {tab === "metadata" && (
+        <MetaplexMetadataCard
+          nftData={(account.details?.data as TokenProgramData).nftData!}
+        />
+      )}
     </>
   );
 }
@@ -390,6 +405,15 @@ function getTabs(data?: ProgramData): Tab[] {
     tabs.push(...TABS_LOOKUP[programTypeKey]);
   }
 
+  // Add the key for Metaplex NFTs
+  if (
+    data &&
+    programTypeKey === "spl-token:mint" &&
+    (data as TokenProgramData).nftData
+  ) {
+    tabs.push(...TABS_LOOKUP[`${programTypeKey}:metaplexNFT`]);
+  }
+
   if (
     !data ||
     !(