21 |
24 | EVENT
22 |{event.eventName}
23 |
25 |
38 |
39 |
26 |
31 | FROM
27 |28 | {event.args.from ? truncateAddress(event.args.from) : "N/A"} 29 |
30 |
32 |
37 | TO
33 |34 | {event.args.to ? truncateAddress(event.args.to) : "N/A"} 35 |
36 | setHover(true)}
18 | onMouseLeave={() => setHover(false)}
19 | >
20 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/src/components/Nav/Footer.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from "react";
2 | import { PaginationHelper } from "../PaginationHelper";
3 | import { PoweredBy } from "../PoweredBy";
4 |
5 | interface IProps {
6 | page: number;
7 | setPage: (page: number) => void;
8 | nftsPerPage: number;
9 | totalCount: number | undefined;
10 | loading: boolean;
11 | }
12 |
13 | export const Footer: FC
24 |
31 | )}
32 | 25 | {String(nft.metadata.name).split(" ")[0]} 26 |
27 |28 | {String(nft.metadata.name).split(" ")[1]} 29 |
30 |
27 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/Nav/Header.tsx:
--------------------------------------------------------------------------------
1 | import { client, nftContract } from "@/consts/parameters";
2 | import { Link } from "react-router-dom";
3 | import { getContractMetadata } from "thirdweb/extensions/common";
4 | import { getNFT } from "thirdweb/extensions/erc721";
5 | import { ConnectButton, useReadContract } from "thirdweb/react";
6 |
7 | export const Header: React.FC = () => {
8 | const { data: firstNFT, isLoading: nftLoading } = useReadContract(getNFT, {
9 | contract: nftContract,
10 | tokenId: 1n,
11 | });
12 | const { data: contractMetadata, isLoading: contractLoading } =
13 | useReadContract(getContractMetadata, {
14 | contract: nftContract,
15 | });
16 | return (
17 | 28 | {end} / {totalCount.toLocaleString()} 29 |
30 | 31 |
20 | {contractLoading ? (
21 | <>
22 |
23 |
24 |
25 | ) : (
26 | <>
27 | 
36 |
42 |
43 |
44 | 37 | {contractMetadata?.name || firstNFT?.metadata.name}{" "} 38 |
39 | 40 | )} 41 |
45 |
47 |
33 | {isSearching || loading ? (
34 |
35 | ) : (
36 | <>
37 |
57 | setPageInput(Number(e.target.value))}
61 | value={pageInput}
62 | />
63 |
64 |
84 |
85 | )}
86 |
87 | );
88 | };
89 |
90 | export { PaginationHelper };
91 |
--------------------------------------------------------------------------------
/src/components/PoweredBy.tsx:
--------------------------------------------------------------------------------
1 | import { nftContract } from "@/consts/parameters";
2 | import { truncateAddress } from "@/utils/truncateAddress";
3 | import type { FC } from "react";
4 |
5 | export const PoweredBy: FC = () => {
6 | return (
7 |
13 | 
18 |
19 |
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/consts/parameters.ts:
--------------------------------------------------------------------------------
1 | import { createThirdwebClient, getContract } from "thirdweb";
2 | import { ethereum } from "thirdweb/chains";
3 |
4 | /** Change these values to configure the application for your own use. **/
5 |
6 | export const client = createThirdwebClient({
7 | clientId: import.meta.env.VITE_TEMPLATE_CLIENT_ID,
8 | });
9 |
10 | export const nftContract = getContract({
11 | // Your smart contract address (available on the thirdweb dashboard)
12 | address: "0xed5af388653567af2f388e6224dc7c4b3241c544",
13 | // The chain object of the chain your contract is deployed to.
14 | // If that chain isn't in the default list of our SDK, use `defineChain` - for example: defineChain(666666)
15 | chain: ethereum,
16 | client,
17 | });
18 |
19 | // The block explorer you want to use (Opens when user clicks on history of events. i.e. transfers)
20 | export const blockExplorer = "https://etherscan.io";
21 |
--------------------------------------------------------------------------------
/src/hooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const useDebounce = (value: string, delay: number) => {
4 | // State and setters for debounced value
5 | const [debouncedValue, setDebouncedValue] = useState(value);
6 | useEffect(
7 | () => {
8 | // Update debounced value after delay
9 | const handler = setTimeout(() => {
10 | setDebouncedValue(value);
11 | }, delay);
12 | // Cancel the timeout if value changes (also on delay change or unmount)
13 | // This is how we prevent debounced value from updating if value is changed ...
14 | // .. within the delay period. Timeout gets cleared and restarted.
15 | return () => {
16 | clearTimeout(handler);
17 | };
18 | },
19 | [value, delay], // Only re-call effect if value or delay changes
20 | );
21 | return debouncedValue;
22 | };
23 |
24 | export default useDebounce;
25 |
--------------------------------------------------------------------------------
/src/icons/LinkIcon.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from "react";
2 |
3 | export const LinkIcon: FC = () => {
4 | return (
5 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/icons/SearchIcon.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from "react";
2 |
3 | export const SearchIcon: FC = () => {
4 | return (
5 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App";
4 | import "./index.css";
5 | import { ThirdwebProvider } from "thirdweb/react";
6 |
7 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
8 | 20 | {truncateAddress(nftContract.address)} 21 |
22 |23 | powered by thirdweb 24 |
25 |
54 |
57 | {contractMetadata?.name}
58 |
59 |
60 |
134 | );
135 | }
136 |
137 | export default App;
138 |
--------------------------------------------------------------------------------
/src/pages/nft/$id.tsx:
--------------------------------------------------------------------------------
1 | import { HistoryCard } from "@/components/HistoryCard";
2 | import { Header } from "@/components/Nav/Header";
3 | import { PoweredBy } from "@/components/PoweredBy";
4 | import { client, nftContract } from "@/consts/parameters";
5 | import { truncateAddress } from "@/utils/truncateAddress";
6 | import { useEffect } from "react";
7 | import { Helmet } from "react-helmet";
8 | import { useParams } from "react-router-dom";
9 | import {
10 | MediaRenderer,
11 | useContractEvents,
12 | useReadContract,
13 | } from "thirdweb/react";
14 | import { getNFT, transferEvent } from "thirdweb/extensions/erc721";
15 | import { getContractMetadata } from "thirdweb/extensions/common";
16 |
17 | const NFTPage = () => {
18 | const { id } = useParams();
19 | const { data: nft, isLoading } = useReadContract(getNFT, {
20 | contract: nftContract,
21 | tokenId: BigInt(id as string),
22 | });
23 | const { data: contractMetadata } = useReadContract(getContractMetadata, {
24 | contract: nftContract,
25 | });
26 | const { data: eventsData, isLoading: eventsLoading } = useContractEvents({
27 | contract: nftContract,
28 | events: [
29 | transferEvent({
30 | tokenId: BigInt(id as string),
31 | }),
32 | ],
33 | });
34 | useEffect(() => {
35 | window.scrollTo(0, 0);
36 | }, []);
37 |
38 | return (
39 |
61 | {contractMetadata ? (
62 |
133 |
63 |
70 | ) : contractLoading ? (
71 | 64 | {contractMetadata.name} 65 |
66 |67 | {contractMetadata.description} 68 |
69 |
72 |
73 |
74 |
75 | ) : null}
76 |
77 |
78 |
95 |
96 | {isSearching ? (
97 |
98 | ) : null}
99 |
100 | {search && nft && !isSearching ? (
101 |
106 | {Array.from({ length: nftsPerPage }).map((_, i) => (
107 |
111 | ))}
112 |
113 | )}
114 |
115 | {nfts && !search && (
116 |
117 | {nfts.map((nft) => (
118 |
121 | )}
122 |
123 | {!search && (
124 |
131 | )}
132 |
40 |
43 | {nft?.metadata.name}
44 |
45 |
46 |
213 | );
214 | };
215 |
216 | export default NFTPage;
217 |
--------------------------------------------------------------------------------
/src/utils/truncateAddress.ts:
--------------------------------------------------------------------------------
1 | export const truncateAddress = (address: string) => {
2 | return `${address.slice(0, 6)}...${address.slice(-4)}`;
3 | };
4 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
47 |
212 |
48 | {nft ? (
49 |
80 |
81 | 62 | History 63 |
64 | ) : ( 65 | isLoading && ( 66 | 67 | ) 68 | )} 69 | 70 | {eventsLoading ? ( 71 | 72 | ) : ( 73 |
74 | {eventsData?.map((event) => (
75 |
78 | )}
79 |
82 |
211 |
83 | {contractMetadata?.name ? (
84 |
101 |
102 | 85 | collection 86 |
87 | ) : ( 88 | isLoading && ( 89 | 90 | ) 91 | )} 92 | 93 | {isLoading ? ( 94 | 95 | ) : ( 96 |97 | {contractMetadata?.name} 98 |
99 | )} 100 |
103 |
117 |
118 | 104 | #{id} 105 |
106 | 107 | {nft?.metadata.name ? ( 108 |109 | {String(nft?.metadata.name).split("#")[0]} 110 |
111 | ) : ( 112 | isLoading && ( 113 | 114 | ) 115 | )} 116 |
119 | {nft?.owner ? (
120 |
137 |
138 | {nft?.metadata.description ? (
139 | 121 | CURRENT OWNER 122 |
123 | ) : ( 124 | isLoading && ( 125 | 126 | ) 127 | )} 128 | 129 | {isLoading ? ( 130 | 131 | ) : ( 132 |133 | {nft?.owner ? truncateAddress(nft?.owner!) : "N/A"} 134 |
135 | )} 136 |140 | Description 141 |
142 | ) : ( 143 | isLoading && ( 144 | 145 | ) 146 | )} 147 | 148 | {isLoading ? ( 149 | 150 | ) : ( 151 |152 | {nft?.metadata.description} 153 |
154 | )} 155 | 156 |
157 | {nft?.metadata.attributes &&
158 | // @ts-ignore
159 | nft?.metadata.attributes.length > 0 && (
160 | <>
161 | {isLoading ? (
162 |
163 | ) : (
164 |
206 |
207 | 165 | Attributes 166 |
167 | )} 168 |
169 | {/* @ts-ignore */}
170 | {nft?.metadata.attributes?.map(
171 | (attr: { trait_type: string; value: string }) => (
172 |
183 |
184 | )}
185 |
186 | {eventsData && eventsData?.length > 0 ? (
187 |
173 |
180 | ),
181 | )}
182 | 174 | {attr.trait_type} 175 |
176 |177 | {attr.value} 178 |
179 |188 | History 189 |
190 | ) : ( 191 | isLoading && ( 192 | 193 | ) 194 | )} 195 | 196 | {eventsLoading ? ( 197 | 198 | ) : ( 199 |
200 | {eventsData?.map((event) => (
201 |
204 | )}
205 |
208 |
210 |