Search…
⌃K
Links

Display NFTs

​
NFTs can be displayed using the components collected on the /nft/<id> page of the leaderboard template.
To display a list of NFTs, import the <RenderNftsList/> widget
import { RenderNftsList } from "components/widgets";
The <RenderNftsList/> component takes the array nfts as a prop
function Component() {
return (
<>
<RenderNftsList nfts={nfts} />
</>
);
}
The nfts here must be an array of objects with each NFT object following the format shown below.
const nfts = [
{
attention: // The attention(Views) that NFT has
balances: // The number of NFTs owner have
contentType: // The type of the NFT, such as image/png or video/mp4
createdAt: // NFT create date
description: // Description of NFT
id: // Id of NFT
locked: []
next: // Next NFT
owner: // The wallet address of the NFT's owner
prev: // Previous NFT
reward: // Number of KOII this NFT get
tags: // Tags this NFT have such as ['#art']
ticker: "KOINFT"
title: // Title of NFT
}
]
​
If you need help Fetching NFT Data, check out the previous section.

Customization

Configuring new views and new forms of Atomic content requires a thorough understanding of the tools at play. This section covers tips and instructions for quickly scaffolding new formats.

File Types

There are several supported mime types for the Leaderboard Template:
  1. 1.
    text/html ~ these will render as apps inside iframes (useful for dynamic content)
  2. 2.
    image/* ~ these will render as html <img> tags
  3. 3.
    video/* ~ these will render as iframes containing videos

View Controls

Each type of Atomic NFT has a different type of view:
  • Swap the content out
📦services
┣ 📂utils
┃ ┗ 📜index.tsx line:36-48
​
// For three different types of NFT, there are three different types of views for it
const getMediaType = (contentType: any) => {
let mediaType = contentType;
if (contentType) {
if (contentType.includes("image/")) {
mediaType = "image";
} else if (contentType.includes("video/")) {
mediaType = "video";
} else if (contentType.includes("text/html")) {
mediaType = "iframe";
}
}
return mediaType;
};
​
📦components
┣ 📂common
┃ ┗ 📂NftMediaContainer
┃ ┗ 📜index.tsx line:10-38
const contentType = getMediaType(nft?.contentType);
const arweaveUrl = `https://arweave.net/${nft?.id}`; // This url is the source of the NFT
​
// Use Iframe for text/html type
const IframeContainer = () => <Box as="iframe" src={arweaveUrl} onLoad={() => triggerPort(nft?.id)} boxSize="100%" />;
// Use <Image> for image type
const ImageContainer = () => <Image src={arweaveUrl} onLoad={() => triggerPort(nft?.id)} boxSize="100%" objectFit="cover" />;
// Use <Box as="video"> for video type
const VideoContainer = () => (
<Box as="video" controls muted onLoadedData={() => triggerPort(nft?.id)} boxSize="100%">
<source src={arweaveUrl} />
</Box>
);
​
// Judge which contentType NFT is then use it as <renderContainer>
const renderContainer = () => {
switch (contentType) {
case "image":
return <ImageContainer />;
case "video":
return <VideoContainer />;
case "iframe":
return <IframeContainer />;
default:
return <></>;
}
};
return (
<Box>
{renderContainer()}
</Box>
);
};

Show live counts for attention, title, description, etc.

// After fetching the NFT state, customize the props you wanna show
📦pages
┣ 📂nft
┃ ┗ 📜index.tsx
// attention prop shows the attention(Views) that NFT has.
// Same way as title and description.
<Text>{nft?.attention} Views</Text>
// reward prop shows how much KOII NFT earned
const formatDigitNumber = (val: any) => {
if (typeof val !== "number") return 0;
if (val) return val.toLocaleString("en-US", { maximumFractionDigits: 2 });
else return 0;
};
<Text>{formatDigitNumber(nft?.reward)} Koii earned</Text>
// To view NFT in block, use nft.id tag
<Button as={Link} href={`https://viewblock.io/arweave/tx/${nft?.id}`}>
Explore block
</Button>
​
// To show the date NFT created at.
const formatUnixTimestamp = (
timestamp: string,
options: Record<string, any> = {
// e.g: Jan 30, 2022
day: "numeric",
month: "short",
year: "numeric"
}
) => {
if (!timestamp) return null;
return new Date(parseInt(timestamp) * 1000).toLocaleString(undefined, options);
};
<Text>
Registered:
<span>{formatUnixTimestamp(nft?.createdAt || "1616944045")}</span>
</Text>
​
​