diff --git a/explorer/src/components/account/OwnedTokensCard.tsx b/explorer/src/components/account/OwnedTokensCard.tsx
index 130fe6c78e..23cfb5cb5e 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 ed64f3a1de..6674e877fe 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 };
+};
|