Search…
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
1
import { RenderNftsList } from "components/widgets";
Copied!
The <RenderNftsList/> component takes the array nfts as a prop
1
function Component() {
2
return (
3
<>
4
<RenderNftsList nfts={nfts} />
5
</>
6
);
7
}
Copied!
The nfts here must be an array of objects with each NFT object following the format shown below.
1
const nfts = [
2
{
3
attention: // The attention(Views) that NFT has
4
balances: // The number of NFTs owner have
5
contentType: // The type of the NFT, such as image/png or video/mp4
6
createdAt: // NFT create date
7
description: // Description of NFT
8
id: // Id of NFT
9
locked: []
10
next: // Next NFT
11
owner: // The wallet address of the NFT's owner
12
prev: // Previous NFT
13
reward: // Number of KOII this NFT get
14
tags: // Tags this NFT have such as ['#art']
15
ticker: "KOINFT"
16
title: // Title of NFT
17
}
18
]
19
Copied!
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
1
📦services
2
┣ 📂utils
3
┃ ┗ 📜index.tsx line:36-48
4
5
// For three different types of NFT, there are three different types of views for it
6
const getMediaType = (contentType: any) => {
7
let mediaType = contentType;
8
if (contentType) {
9
if (contentType.includes("image/")) {
10
mediaType = "image";
11
} else if (contentType.includes("video/")) {
12
mediaType = "video";
13
} else if (contentType.includes("text/html")) {
14
mediaType = "iframe";
15
}
16
}
17
return mediaType;
18
};
19
20
📦components
21
┣ 📂common
22
┃ ┗ 📂NftMediaContainer
23
┃ ┗ 📜index.tsx line:10-38
24
25
const contentType = getMediaType(nft?.contentType);
26
const arweaveUrl = `https://arweave.net/${nft?.id}`; // This url is the source of the NFT
27
28
// Use Iframe for text/html type
29
const IframeContainer = () => <Box as="iframe" src={arweaveUrl} onLoad={() => triggerPort(nft?.id)} boxSize="100%" />;
30
// Use <Image> for image type
31
const ImageContainer = () => <Image src={arweaveUrl} onLoad={() => triggerPort(nft?.id)} boxSize="100%" objectFit="cover" />;
32
// Use <Box as="video"> for video type
33
const VideoContainer = () => (
34
<Box as="video" controls muted onLoadedData={() => triggerPort(nft?.id)} boxSize="100%">
35
<source src={arweaveUrl} />
36
</Box>
37
);
38
39
// Judge which contentType NFT is then use it as <renderContainer>
40
const renderContainer = () => {
41
switch (contentType) {
42
case "image":
43
return <ImageContainer />;
44
case "video":
45
return <VideoContainer />;
46
case "iframe":
47
return <IframeContainer />;
48
default:
49
return <></>;
50
}
51
};
52
return (
53
<Box>
54
{renderContainer()}
55
</Box>
56
);
57
};
Copied!

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

1
// After fetching the NFT state, customize the props you wanna show
2
📦pages
3
┣ 📂nft
4
┃ ┗ 📜index.tsx
5
// attention prop shows the attention(Views) that NFT has.
6
// Same way as title and description.
7
<Text>{nft?.attention} Views</Text>
8
9
// reward prop shows how much KOII NFT earned
10
const formatDigitNumber = (val: any) => {
11
if (typeof val !== "number") return 0;
12
if (val) return val.toLocaleString("en-US", { maximumFractionDigits: 2 });
13
else return 0;
14
};
15
<Text>{formatDigitNumber(nft?.reward)} Koii earned</Text>
16
17
// To view NFT in block, use nft.id tag
18
<Button as={Link} href={`https://viewblock.io/arweave/tx/${nft?.id}`}>
19
Explore block
20
</Button>
21
22
// To show the date NFT created at.
23
const formatUnixTimestamp = (
24
timestamp: string,
25
options: Record<string, any> = {
26
// e.g: Jan 30, 2022
27
day: "numeric",
28
month: "short",
29
year: "numeric"
30
}
31
) => {
32
if (!timestamp) return null;
33
return new Date(parseInt(timestamp) * 1000).toLocaleString(undefined, options);
34
};
35
<Text>
36
Registered:
37
<span>{formatUnixTimestamp(nft?.createdAt || "1616944045")}</span>
38
</Text>
39
Copied!
Copy link