feat(explorer): adding verified on-chain collection support (#23490)

* Adding Verified On-chain Collection tag to help consumers check if their NFTs are authentic

* On-chain isn't quite the same as NO-chain

* Grammar fix

* Added Collection Owner verification to guarantee this is actually a Collection Mint

explorer/src/components/account/MetaplexNFTHeader.tsx

@@ -1,11 +1,17 @@
+import React from "react";
 import "bootstrap/dist/js/bootstrap.min.js";
-import { NFTData } from "providers/accounts";
+import {
+  NFTData,
+  useFetchAccountInfo,
+  useMintAccountInfo,
+} from "providers/accounts";
 import { programs } from "@metaplex/js";
 import { ArtContent } from "components/common/NFTArt";
 import { InfoTooltip } from "components/common/InfoTooltip";
 import { clusterPath } from "utils/url";
 import { Link } from "react-router-dom";
 import { EditionInfo } from "providers/accounts/utils/getEditionInfo";
+import { PublicKey } from "@solana/web3.js";
 
 export function NFTHeader({
   nftData,
@@ -14,8 +20,22 @@ export function NFTHeader({
   nftData: NFTData;
   address: string;
 }) {
+  const collectionAddress = nftData.metadata.collection?.key;
+  const collectionMintInfo = useMintAccountInfo(collectionAddress);
+  const fetchAccountInfo = useFetchAccountInfo();
+
+  React.useEffect(() => {
+    if (collectionAddress && !collectionMintInfo) {
+      fetchAccountInfo(new PublicKey(collectionAddress));
+    }
+  }, [fetchAccountInfo, collectionAddress]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const metadata = nftData.metadata;
   const data = nftData.json;
+  const isVerifiedCollection =
+    metadata.collection != null &&
+    metadata.collection?.verified &&
+    collectionMintInfo !== undefined;
   return (
     <div className="row">
       <div className="col-auto ms-2 d-flex align-items-center">
@@ -30,6 +50,7 @@ export function NFTHeader({
               : "No NFT name was found"}
           </h2>
           {getEditionPill(nftData.editionInfo)}
+          {isVerifiedCollection && getVerifiedCollectionPill()}
         </div>
         <h4 className="header-pretitle ms-1 mt-1 no-overflow-with-ellipsis">
           {metadata.data.symbol !== ""
@@ -174,3 +195,14 @@ function getIsMutablePill(isMutable: boolean) {
     }`}</span>
   );
 }
+
+function getVerifiedCollectionPill() {
+  const onchainVerifiedToolTip =
+    "This NFT has been verified as a member of an on-chain collection. This tag guarantees authenticity.";
+  return (
+    <div className={"d-inline-flex align-items-center ms-2"}>
+      <span className="badge badge-pill bg-dark">{"Verified Collection"}</span>
+      <InfoTooltip bottom text={onchainVerifiedToolTip} />
+    </div>
+  );
+}

explorer/src/components/account/TokenAccountSection.tsx

@@ -343,6 +343,18 @@ function NonFungibleTokenMintAccountCard({
             </td>
           </tr>
         )}
+        {nftData?.metadata.collection?.verified && (
+          <tr>
+            <td>Verified Collection Address</td>
+            <td className="text-lg-end">
+              <Address
+                pubkey={new PublicKey(nftData.metadata.collection.key)}
+                alignRight
+                link
+              />
+            </td>
+          </tr>
+        )}
         {mintInfo.mintAuthority && (
           <tr>
             <td>Mint Authority</td>