121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
import React, { Suspense } from "react";
|
|
import { Account } from "../../../providers/accounts";
|
|
import {
|
|
parseNFTokenCollectionAccount,
|
|
parseNFTokenNFTAccount,
|
|
} from "./isNFTokenAccount";
|
|
import { NftokenTypes } from "./nftoken-types";
|
|
import { InfoTooltip } from "../../common/InfoTooltip";
|
|
import { CachedImageContent } from "../../common/NFTArt";
|
|
import { useNftokenMetadata } from "./nftoken-hooks";
|
|
|
|
export function NFTokenAccountHeader({ account }: { account: Account }) {
|
|
const nft = parseNFTokenNFTAccount(account);
|
|
|
|
if (nft) {
|
|
return (
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<NFTokenNFTHeader nft={nft} />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
const collection = parseNFTokenCollectionAccount(account);
|
|
if (collection) {
|
|
return (
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<NFTokenCollectionHeader collection={collection} />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h6 className="header-pretitle">Details</h6>
|
|
<h2 className="header-title">Account</h2>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function NFTokenNFTHeader({ nft }: { nft: NftokenTypes.NftAccount }) {
|
|
const { data: metadata } = useNftokenMetadata(nft.metadata_url);
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-auto ms-2 d-flex align-items-center">
|
|
<CachedImageContent uri={metadata?.image} />
|
|
</div>
|
|
|
|
<div className="col mb-3 ms-0.5 mt-3">
|
|
{<h6 className="header-pretitle ms-1">NFToken NFT</h6>}
|
|
<div className="d-flex align-items-center">
|
|
<h2 className="header-title ms-1 align-items-center no-overflow-with-ellipsis">
|
|
{metadata ? metadata.name || "No NFT name was found" : "Loading..."}
|
|
</h2>
|
|
</div>
|
|
|
|
<div>
|
|
<div className={"d-inline-flex align-items-center mt-2"}>
|
|
<span className="badge badge-pill bg-dark">{`${
|
|
nft.authority_can_update ? "Mutable" : "Immutable"
|
|
}`}</span>
|
|
|
|
<InfoTooltip
|
|
bottom
|
|
text={
|
|
nft.authority_can_update
|
|
? "The authority of this NFT can update the Metadata."
|
|
: "The Metadata cannot be updated by anyone."
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function NFTokenCollectionHeader({
|
|
collection,
|
|
}: {
|
|
collection: NftokenTypes.CollectionAccount;
|
|
}) {
|
|
const { data: metadata } = useNftokenMetadata(collection.metadata_url);
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-auto ms-2 d-flex align-items-center">
|
|
<CachedImageContent uri={metadata?.image} />
|
|
</div>
|
|
|
|
<div className="col mb-3 ms-0.5 mt-3">
|
|
{<h6 className="header-pretitle ms-1">NFToken Collection</h6>}
|
|
<div className="d-flex align-items-center">
|
|
<h2 className="header-title ms-1 align-items-center no-overflow-with-ellipsis">
|
|
{metadata
|
|
? metadata.name || "No collection name was found"
|
|
: "Loading..."}
|
|
</h2>
|
|
</div>
|
|
|
|
<div>
|
|
<div className={"d-inline-flex align-items-center mt-2"}>
|
|
<span className="badge badge-pill bg-dark">{`${
|
|
collection.authority_can_update ? "Mutable" : "Immutable"
|
|
}`}</span>
|
|
|
|
<InfoTooltip
|
|
bottom
|
|
text={
|
|
collection.authority_can_update
|
|
? "The authority of this Collection can update the Metadata and add NFTs."
|
|
: "The Metadata cannot be updated by anyone."
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|