Add Metaplex metadata to token addresses (#21532)

explorer/src/components/account/OwnedTokensCard.tsx

@@ -196,7 +196,7 @@ function HoldingsSummaryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
           </td>
         )}
         <td>
-          <Address pubkey={new PublicKey(mintAddress)} link />
+          <Address pubkey={new PublicKey(mintAddress)} link useMetadata />
         </td>
         <td>
           {totalByMint} {tokenDetails && tokenDetails.symbol}

explorer/src/components/common/Address.tsx

@@ -6,6 +6,8 @@ import { displayAddress } from "utils/tx";
 import { useCluster } from "providers/cluster";
 import { Copyable } from "./Copyable";
 import { useTokenRegistry } from "providers/mints/token-registry";
+import { useState, useEffect } from "react";
+import { Connection, programs } from "@metaplex/js";
 
 type Props = {
   pubkey: PublicKey;
@@ -15,6 +17,7 @@ type Props = {
   truncate?: boolean;
   truncateUnknown?: boolean;
   truncateChars?: number;
+  useMetadata?: boolean;
 };
 
 export function Address({
@@ -25,6 +28,7 @@ export function Address({
   truncate,
   truncateUnknown,
   truncateChars,
+  useMetadata,
 }: Props) {
   const address = pubkey.toBase58();
   const { tokenRegistry } = useTokenRegistry();
@@ -41,6 +45,9 @@ export function Address({
     ? address
     : displayAddress(address, cluster, tokenRegistry);
 
+  var metaplexData = useTokenMetadata(useMetadata, address);
+  if (metaplexData && metaplexData.data)
+    addressLabel = metaplexData.data.data.name;
   if (truncateChars && addressLabel === address) {
     addressLabel = addressLabel.slice(0, truncateChars) + "…";
   }
@@ -77,3 +84,31 @@ export function Address({
     </>
   );
 }
+export const useTokenMetadata = (
+  useMetadata: boolean | undefined,
+  pubkey: string
+) => {
+  const [data, setData] = useState<programs.metadata.MetadataData>();
+  var { url } = useCluster();
+
+  useEffect(() => {
+    if (!useMetadata) return;
+    if (pubkey && !data) {
+      programs.metadata.Metadata.getPDA(pubkey)
+        .then((pda) => {
+          const connection = new Connection(url);
+          programs.metadata.Metadata.load(connection, pda)
+            .then((metadata) => {
+              setData(metadata.data);
+            })
+            .catch(() => {
+              setData(undefined);
+            });
+        })
+        .catch(() => {
+          setData(undefined);
+        });
+    }
+  }, [useMetadata, pubkey, url, data, setData]);
+  return { data };
+};