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>
|
||||||
)}
|
)}
|
||||||
<td>
|
<td>
|
||||||
<Address pubkey={new PublicKey(mintAddress)} link />
|
<Address pubkey={new PublicKey(mintAddress)} link useMetadata />
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{totalByMint} {tokenDetails && tokenDetails.symbol}
|
{totalByMint} {tokenDetails && tokenDetails.symbol}
|
||||||
|
|
|
@ -6,6 +6,8 @@ import { displayAddress } from "utils/tx";
|
||||||
import { useCluster } from "providers/cluster";
|
import { useCluster } from "providers/cluster";
|
||||||
import { Copyable } from "./Copyable";
|
import { Copyable } from "./Copyable";
|
||||||
import { useTokenRegistry } from "providers/mints/token-registry";
|
import { useTokenRegistry } from "providers/mints/token-registry";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { Connection, programs } from "@metaplex/js";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
pubkey: PublicKey;
|
pubkey: PublicKey;
|
||||||
|
@ -15,6 +17,7 @@ type Props = {
|
||||||
truncate?: boolean;
|
truncate?: boolean;
|
||||||
truncateUnknown?: boolean;
|
truncateUnknown?: boolean;
|
||||||
truncateChars?: number;
|
truncateChars?: number;
|
||||||
|
useMetadata?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function Address({
|
export function Address({
|
||||||
|
@ -25,6 +28,7 @@ export function Address({
|
||||||
truncate,
|
truncate,
|
||||||
truncateUnknown,
|
truncateUnknown,
|
||||||
truncateChars,
|
truncateChars,
|
||||||
|
useMetadata,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const address = pubkey.toBase58();
|
const address = pubkey.toBase58();
|
||||||
const { tokenRegistry } = useTokenRegistry();
|
const { tokenRegistry } = useTokenRegistry();
|
||||||
|
@ -41,6 +45,9 @@ export function Address({
|
||||||
? address
|
? address
|
||||||
: displayAddress(address, cluster, tokenRegistry);
|
: displayAddress(address, cluster, tokenRegistry);
|
||||||
|
|
||||||
|
var metaplexData = useTokenMetadata(useMetadata, address);
|
||||||
|
if (metaplexData && metaplexData.data)
|
||||||
|
addressLabel = metaplexData.data.data.name;
|
||||||
if (truncateChars && addressLabel === address) {
|
if (truncateChars && addressLabel === address) {
|
||||||
addressLabel = addressLabel.slice(0, truncateChars) + "…";
|
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