Add Metaplex metadata to token addresses (#21532)
This commit is contained in:
parent
0406d524e6
commit
a0d490d98e
|
@ -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}
|
||||
|
|
|
@ -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 };
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue