diff --git a/explorer/src/components/account/OwnedTokensCard.tsx b/explorer/src/components/account/OwnedTokensCard.tsx index 130fe6c78..23cfb5cb5 100644 --- a/explorer/src/components/account/OwnedTokensCard.tsx +++ b/explorer/src/components/account/OwnedTokensCard.tsx @@ -196,7 +196,7 @@ function HoldingsSummaryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) { )} -
+
{totalByMint} {tokenDetails && tokenDetails.symbol} diff --git a/explorer/src/components/common/Address.tsx b/explorer/src/components/common/Address.tsx index ed64f3a1d..6674e877f 100644 --- a/explorer/src/components/common/Address.tsx +++ b/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(); + 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 }; +};