+ 
{
+ setIsLoading(false);
+ }}
+ onError={() => {
+ setShowError(true);
+ }}
+ />
+
+
+ )}
+
+ );
+};
+
+const CollectionCard = ({
+ collection,
+}: {
+ collection: NftokenTypes.CollectionAccount;
+}) => {
+ const fetchInfo = useFetchAccountInfo();
+ const refresh = () => fetchInfo(new PublicKey(collection.address));
+
+ return (
+
+
+
+ Address
+
+
+
+
+
+ Authority
+
+
+
+
+
+ Number of NFTs
+
+ Loading...}>
+
+
+
+
+
+ );
+};
+
+const NumNfts = ({ collection }: { collection: string }) => {
+ const { data: nfts } = useCollectionNfts({ collectionAddress: collection });
+ return
+
+
+ + Overview +
+ +{nfts.length}
;
+};
diff --git a/explorer/src/components/account/nftoken/NFTokenCollectionNFTGrid.tsx b/explorer/src/components/account/nftoken/NFTokenCollectionNFTGrid.tsx
new file mode 100644
index 00000000000000..464aa1e6a020a1
--- /dev/null
+++ b/explorer/src/components/account/nftoken/NFTokenCollectionNFTGrid.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { clusterPath } from "../../../utils/url";
+import { useCollectionNfts } from "./nftoken-hooks";
+import { NftokenImage } from "./NFTokenAccountSection";
+
+export function NFTokenCollectionNFTGrid({
+ collection,
+}: {
+ collection: string;
+}) {
+ const { data: nfts, mutate } = useCollectionNfts({
+ collectionAddress: collection,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/explorer/src/components/account/nftoken/README.md b/explorer/src/components/account/nftoken/README.md
new file mode 100644
index 00000000000000..87aa582f925037
--- /dev/null
+++ b/explorer/src/components/account/nftoken/README.md
@@ -0,0 +1,9 @@
+# NFToken
+
+NFToken is a cheap, simple, secure NFT standard on Solana.
+
+You can find more information and support here:
+
+- [Website](https://nftoken.so)
+- [Twitter](https://twitter.com/nftoken_so)
+- [Lead Maintainer](https://twitter.com/VictorPontis)
diff --git a/explorer/src/components/account/nftoken/isNFTokenAccount.ts b/explorer/src/components/account/nftoken/isNFTokenAccount.ts
new file mode 100644
index 00000000000000..cd37bd8a926662
--- /dev/null
+++ b/explorer/src/components/account/nftoken/isNFTokenAccount.ts
@@ -0,0 +1,88 @@
+import { PublicKey } from "@solana/web3.js";
+import { NFTOKEN_ADDRESS } from "./nftoken";
+import { Account } from "../../../providers/accounts";
+import { NftokenTypes } from "./nftoken-types";
+
+export function isNFTokenAccount(account: Account): boolean {
+ return Boolean(
+ account.details?.owner.toBase58() === NFTOKEN_ADDRESS &&
+ account.details.rawData
+ );
+}
+
+const nftokenAccountDisc = "IbRbNewPP2E=";
+
+export const parseNFTokenNFTAccount = (
+ account: Account
+): NftokenTypes.NftAccount | null => {
+ if (!isNFTokenAccount(account)) {
+ return null;
+ }
+
+ try {
+ const parsed = NftokenTypes.nftAccountLayout.decode(
+ account!.details!.rawData!
+ );
+
+ if (!parsed) {
+ return null;
+ }
+
+ if (
+ Buffer.from(parsed!.discriminator).toString("base64") !==
+ nftokenAccountDisc
+ ) {
+ return null;
+ }
+
+ return {
+ address: account!.pubkey.toBase58(),
+ holder: new PublicKey(parsed.holder).toBase58(),
+ authority: new PublicKey(parsed.authority).toBase58(),
+ authority_can_update: Boolean(parsed.authority_can_update),
+
+ collection: new PublicKey(parsed.collection).toBase58(),
+ delegate: new PublicKey(parsed.delegate).toBase58(),
+
+ metadata_url: parsed.metadata_url?.replace(/\0/g, "") ?? null,
+ };
+ } catch (e) {
+ console.error("Problem parsing NFToken NFT...", e);
+ return null;
+ }
+};
+
+const collectionAccountDisc = "RQLwA3YS2fI=";
+export const parseNFTokenCollectionAccount = (
+ account: Account
+): NftokenTypes.CollectionAccount | null => {
+ if (!isNFTokenAccount(account)) {
+ return null;
+ }
+
+ try {
+ const parsed = NftokenTypes.collectionAccountLayout.decode(
+ account!.details!.rawData!
+ );
+
+ if (!parsed) {
+ return null;
+ }
+ if (
+ Buffer.from(parsed.discriminator).toString("base64") !==
+ collectionAccountDisc
+ ) {
+ return null;
+ }
+
+ return {
+ address: account!.pubkey.toBase58(),
+ authority: parsed.authority,
+ authority_can_update: Boolean(parsed.authority_can_update),
+ metadata_url: parsed.metadata_url?.replace(/\0/g, "") ?? null,
+ };
+ } catch (e) {
+ console.error("Problem parsing NFToken Collection...", e);
+ return null;
+ }
+};
diff --git a/explorer/src/components/account/nftoken/nftoken-hooks.tsx b/explorer/src/components/account/nftoken/nftoken-hooks.tsx
new file mode 100644
index 00000000000000..b7a9d67d87099d
--- /dev/null
+++ b/explorer/src/components/account/nftoken/nftoken-hooks.tsx
@@ -0,0 +1,55 @@
+import useSWR, { SWRResponse } from "swr";
+import { useCluster } from "../../../providers/cluster";
+import { NftokenFetcher } from "./nftoken";
+import { NftokenTypes } from "./nftoken-types";
+
+const getCollectionNftsFetcher = async (
+ _method: string,
+ collectionAddress: string,
+ url: string
+) => {
+ return await NftokenFetcher.getNftsInCollection({
+ collection: collectionAddress,
+ rpcUrl: url,
+ });
+};
+
+export const useCollectionNfts = ({
+ collectionAddress,
+}: {
+ collectionAddress: string;
+}): {
+ // We can be confident that data will be nonnull even if the request fails,
+ // if we defined fallbackData in the config.
+ data: NftokenTypes.NftInfo[];
+ error: any;
+ mutate: SWRResponse
+
+
+ NFTs
+ + +
+ {nfts.length === 0 &&
+ No NFTs Found
}
+
+ {nfts.length > 0 && (
+
+ {nfts.map((nft) => (
+
+ )}
+
+
+ ))}
+
+
+
+ {nft.name ?? "No Name"}
+
+