import { PublicKey } from "@solana/web3.js";
import { Address } from "components/common/Address";
import { TableCardBody } from "components/common/TableCardBody";
import { Account, useFetchAccountInfo } from "providers/accounts";
import { Suspense, useEffect, useState } from "react";
import {
parseNFTokenCollectionAccount,
parseNFTokenNFTAccount,
} from "./isNFTokenAccount";
import { NftokenTypes } from "./nftoken-types";
import { MAX_TIME_LOADING_IMAGE, useCachedImage } from "../../common/NFTArt";
import { useCollectionNfts } from "./nftoken-hooks";
import { UnknownAccountCard } from "../UnknownAccountCard";
export function NFTokenAccountSection({ account }: { account: Account }) {
const nft = parseNFTokenNFTAccount(account);
if (nft) {
return ;
}
const collection = parseNFTokenCollectionAccount(account);
if (collection) {
return ;
}
return ;
}
const NFTCard = ({ nft }: { nft: NftokenTypes.NftAccount }) => {
const fetchInfo = useFetchAccountInfo();
const refresh = () => fetchInfo(new PublicKey(nft.address));
return (
Overview
Address |
|
Authority |
|
Holder |
|
Delegate |
{nft.delegate ? (
) : (
"Not Delegated"
)}
|
Collection |
{nft.collection ? (
) : (
"No Collection"
)}
|
);
};
export const NftokenImage = ({
url,
size,
}: {
url: string | undefined;
size: number;
}) => {
const [isLoading, setIsLoading] = useState(true);
const [showError, setShowError] = useState(false);
const [timeout, setTimeout] = useState(undefined);
useEffect(() => {
// Set the timeout if we don't have a valid uri
if (!url && !timeout) {
setTimeout(setInterval(() => setShowError(true), MAX_TIME_LOADING_IMAGE));
}
// We have a uri - clear the timeout
if (url && timeout) {
clearInterval(timeout);
}
return () => {
if (timeout) {
clearInterval(timeout);
}
};
}, [url, setShowError, timeout, setTimeout]);
const { cachedBlob } = useCachedImage(url || "");
return (
<>
{showError ? (
) : (
<>
{isLoading && (
)}
{
setIsLoading(false);
}}
onError={() => {
setShowError(true);
}}
/>
>
)}
>
);
};
const CollectionCard = ({
collection,
}: {
collection: NftokenTypes.CollectionAccount;
}) => {
const fetchInfo = useFetchAccountInfo();
const refresh = () => fetchInfo(new PublicKey(collection.address));
return (
Overview
Address |
|
Authority |
|
Number of NFTs |
Loading...}>
|
);
};
const NumNfts = ({ collection }: { collection: string }) => {
const { data: nfts } = useCollectionNfts({ collectionAddress: collection });
return {nfts.length}
;
};