├── .eslintrc.json
├── public
    ├── logo.png
    ├── favicon.ico
    └── thirdweb.svg
├── next.config.js
├── const
    └── contractAddresses.js
├── README.md
├── pages
    ├── _app.js
    ├── api
    │   └── generate-mint-signature.js
    ├── listings.js
    ├── listing
    │   └── [listingId].jsx
    └── index.js
├── .gitignore
├── package.json
├── styles
    ├── globals.css
    └── Theme.module.css
├── components
    └── Header.jsx
└── LICENSE.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thirdweb-example/marketplace-with-signature-based-minting/HEAD/public/logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thirdweb-example/marketplace-with-signature-based-minting/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/const/contractAddresses.js:
--------------------------------------------------------------------------------
1 | export const MARKETPLACE_ADDRESS = "0x4719c1737a69b50Ed303E01f7725Cc8aEd855Be1";
2 | export const NFT_DROP_ADDRESS = "0x322067594DBCE69A9a9711BC393440aA5e3Aaca1";
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > [!Important]  
2 | > This repository is referencing the `mumbai` chain.
3 | > 
4 | > `Mumbai` [is deprecated since 08/04/2024](https://blog.thirdweb.com/deprecation-of-mumbai-testnet/), meaning the code in this repository will no longer work out of the box.
5 | >
6 | > You can still use this repository, however you will have to switch any references to `mumbai` to another chain.
7 | 
8 | ## thirdweb Marketplace With Signature-based Minting
9 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
 2 | import Header from "../components/Header";
 3 | import "../styles/globals.css";
 4 | 
 5 | // This is the chainId your dApp will work on.
 6 | const activeChainId = ChainId.Goerli;
 7 | 
 8 | function MyApp({ Component, pageProps }) {
 9 |   return (
10 |     <ThirdwebProvider desiredChainId={activeChainId}>
11 |       <Header />
12 |       <Component {...pageProps} />
13 |     </ThirdwebProvider>
14 |   );
15 | }
16 | 
17 | export default MyApp;
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-javascript-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@thirdweb-dev/react": "^3",
13 |     "@thirdweb-dev/sdk": "^3",
14 |     "@thirdweb-dev/storage": "^1.0.6",
15 |     "ethers": "^5.6.8",
16 |     "next": "^12.1.6",
17 |     "react": "^18.1.0",
18 |     "react-dom": "^18.1.0"
19 |   },
20 |   "devDependencies": {
21 |     "eslint": "8.11.0",
22 |     "eslint-config-next": "12.1.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/pages/api/generate-mint-signature.js:
--------------------------------------------------------------------------------
 1 | import { ThirdwebSDK } from "@thirdweb-dev/sdk";
 2 | 
 3 | export default async function generateMintSignature(req, res) {
 4 |   // De-construct body from request
 5 |   let { address, name, description, image } = JSON.parse(req.body);
 6 |   const sdk = ThirdwebSDK.fromPrivateKey(process.env.PRIVATE_KEY, "goerli");
 7 | 
 8 |   const nftContract = await sdk.getContract(
 9 |     "0x5e0d08BF82f40b80DF1beb1874D04C1416BCc8B2",
10 |     "nft-collection"
11 |   );
12 | 
13 |   const signedPayload = await nftContract.signature.generate({
14 |     metadata: {
15 |       name: name,
16 |       description: description,
17 |       image: image,
18 |     },
19 |     to: address,
20 |     mintStartTime: new Date(0),
21 |   });
22 | 
23 |   // return 200 and signedpayload
24 |   res.status(200).json({
25 |     signedPayload: JSON.parse(JSON.stringify(signedPayload)),
26 |   });
27 | }
28 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
 2 | 
 3 | /* Change the values in here to match your branding */
 4 | :root {
 5 |   /* Background color of the page */
 6 |   --background-color: #1c1e21;
 7 | 
 8 |   /* Color of the text/words */
 9 |   --text-color: #fff;
10 | 
11 |   /* Main color of your brand */
12 |   --color-primary: #f213a4;
13 | 
14 |   /* Secondary color of your brand */
15 |   --color-secondary: #418dff;
16 | 
17 |   /* Which font you want to use */
18 |   --font: "Inter", sans-serif;
19 | 
20 |   /* Color of the border around items */
21 |   --border-color: rgba(255, 255, 255, 0.5);
22 | }
23 | 
24 | /* --- Don't need to modify below here --- */
25 | 
26 | /* Default design values of the entire document */
27 | 
28 | body {
29 |   background: var(--background-color);
30 |   font-family: var(--font);
31 |   color: var(--text-color);
32 | 
33 |   display: flex;
34 |   margin: 0;
35 |   text-align: center;
36 | }
37 | 
38 | /* Box sizing rules */
39 | *,
40 | *::before,
41 | *::after {
42 |   box-sizing: border-box;
43 | }
44 | 


--------------------------------------------------------------------------------
/public/thirdweb.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1126" height="700" viewBox="0 0 1126 700" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M3.06915 58.8968C-8.14591 30.5859 12.7549 0 43.3414 0H233.233C251.075 0 266.878 10.6166 273.505 27.047L424.654 404.189C428.732 414.3 428.732 425.675 424.654 436.039L329.58 672.89C315.052 709.037 263.564 709.037 249.036 672.89L3.06915 58.8968ZM369.861 57.6329C359.665 29.5748 380.566 0 410.643 0H576.065C594.416 0 610.729 11.3749 616.846 28.3109L754.231 405.453C757.544 414.805 757.544 425.169 754.231 434.775L671.647 661.515C657.883 699.431 603.847 699.431 590.083 661.515L369.861 57.6329ZM741.233 0C710.646 0 689.746 30.5859 700.961 58.8968L946.927 672.89C961.456 709.037 1012.94 709.037 1027.47 672.89L1122.54 436.039C1126.62 425.675 1126.62 414.3 1122.54 404.189L971.396 27.047C964.769 10.6166 948.966 0 931.124 0H741.233Z" fill="url(#paint0_linear_215_66)"/>
 3 | <defs>
 4 | <linearGradient id="paint0_linear_215_66" x1="563.567" y1="-165.278" x2="1341.59" y2="881.403" gradientUnits="userSpaceOnUse">
 5 | <stop stop-color="#F213A4"/>
 6 | <stop offset="1" stop-color="#5204BF"/>
 7 | </linearGradient>
 8 | </defs>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { useAddress, useDisconnect, ConnectWallet } from "@thirdweb-dev/react";
 2 | import Link from "next/link";
 3 | import React from "react";
 4 | import styles from "../styles/Theme.module.css";
 5 | 
 6 | export default function Header() {
 7 |   // Helpful thirdweb hooks to connect and manage the wallet from metamask.
 8 |   const address = useAddress();
 9 |   const disconnectWallet = useDisconnect();
10 | 
11 |   return (
12 |     <div className={styles.header}>
13 |       <div className={styles.left}>
14 |         <Link href="/" passHref>
15 |           <img
16 |             src={`/logo.png`}
17 |             alt="Thirdweb Logo"
18 |             className={styles.headerLogo}
19 |           />
20 |         </Link>
21 |         <Link href="/listings">
22 |           <a className={styles.headerItem}>Listings</a>
23 |         </Link>
24 |       </div>
25 | 
26 |       <div className={styles.right}>
27 |         {address ? (
28 |           <>
29 |             <a
30 |               className={styles.secondaryButton}
31 |               onClick={() => disconnectWallet()}
32 |             >
33 |               Disconnect
34 |             </a>
35 |             <p className={styles.verticalSpacer}>|</p>
36 |             <p>{address.slice(0, 6).concat("...").concat(address.slice(-4))}</p>
37 |           </>
38 |         ) : (
39 |           <ConnectWallet accentColor="#5204BF" colorMode="dark" />
40 |         )}
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/pages/listings.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import {
 3 |   useContract,
 4 |   useActiveListings,
 5 |   useContractMetadata,
 6 |   ThirdwebNftMedia,
 7 | } from "@thirdweb-dev/react";
 8 | import { MARKETPLACE_ADDRESS } from "../const/contractAddresses";
 9 | import styles from "../styles/Theme.module.css";
10 | 
11 | export default function Listings() {
12 |   const { contract: marketplace } = useContract(MARKETPLACE_ADDRESS);
13 |   const { data: listings, isLoading } = useActiveListings(marketplace);
14 | 
15 |   // Load contract metadata
16 |   const { data: contractMetadata, isLoading: loadingMetadata } =
17 |     useContractMetadata(marketplace);
18 | 
19 |   const [filter, setFilter] = useState(0); // 0 = direct, auction = 1
20 | 
21 |   return (
22 |     <div className={styles.container}>
23 |       <div className={styles.collectionContainer}>
24 |         <div className={styles.detailPageContainer}>
25 |           {!loadingMetadata ? (
26 |             <>
27 |               <h1>{contractMetadata?.name}</h1>
28 |               <p>{contractMetadata?.description}</p>
29 |             </>
30 |           ) : (
31 |             <p>Loading...</p>
32 |           )}
33 |           <hr className={`${styles.smallDivider} ${styles.detailPageHr}`} />
34 |         </div>
35 | 
36 |         {/* Toggle between direct listing and auction listing */}
37 |         <div className={styles.listingTypeContainer}>
38 |           <input
39 |             type="radio"
40 |             name="listingType"
41 |             id="directListing"
42 |             value="directListing"
43 |             defaultChecked
44 |             className={styles.listingType}
45 |             onClick={() => setFilter(0)}
46 |           />
47 |           <label htmlFor="directListing" className={styles.listingTypeLabel}>
48 |             Direct Listing
49 |           </label>
50 |           <input
51 |             type="radio"
52 |             name="listingType"
53 |             id="auctionListing"
54 |             value="auctionListing"
55 |             className={styles.listingType}
56 |             onClick={() => setFilter(1)}
57 |           />
58 |           <label htmlFor="auctionListing" className={styles.listingTypeLabel}>
59 |             Auction Listing
60 |           </label>
61 |         </div>
62 | 
63 |         {!isLoading ? (
64 |           <div className={styles.nftBoxGrid}>
65 |             {listings
66 |               ?.filter((listing) => listing.type === filter)
67 |               ?.map((listing) => (
68 |                 <a
69 |                   className={styles.nftBox}
70 |                   key={listing.id.toString()}
71 |                   href={`/listing/${listing.id}`}
72 |                 >
73 |                   <ThirdwebNftMedia
74 |                     metadata={{ ...listing.asset }}
75 |                     className={styles.nftMedia}
76 |                   />
77 |                   <h4>{listing.asset.name}</h4>
78 |                   <p>
79 |                     {listing.buyoutCurrencyValuePerToken.displayValue}{" "}
80 |                     {listing.buyoutCurrencyValuePerToken.symbol}
81 |                   </p>
82 |                 </a>
83 |               ))}
84 |           </div>
85 |         ) : (
86 |           <p>Loading...</p>
87 |         )}
88 |       </div>
89 |     </div>
90 |   );
91 | }
92 | 


--------------------------------------------------------------------------------
/pages/listing/[listingId].jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   MediaRenderer,
  3 |   useContract,
  4 |   useNetwork,
  5 |   useNetworkMismatch,
  6 |   useListing,
  7 | } from "@thirdweb-dev/react";
  8 | import { ChainId, ListingType, NATIVE_TOKENS } from "@thirdweb-dev/sdk";
  9 | import { useRouter } from "next/router";
 10 | import { useState } from "react";
 11 | import { MARKETPLACE_ADDRESS } from "../../const/contractAddresses";
 12 | import styles from "../../styles/Theme.module.css";
 13 | 
 14 | export default function ListingPage() {
 15 |   const router = useRouter();
 16 |   const { listingId } = router.query;
 17 | 
 18 |   const networkMismatch = useNetworkMismatch();
 19 |   const [, switchNetwork] = useNetwork();
 20 | 
 21 |   const { contract: marketplace } = useContract(
 22 |     MARKETPLACE_ADDRESS,
 23 |     "marketplace"
 24 |   );
 25 |   const { data: listing, isLoading: loadingListing } = useListing(
 26 |     marketplace,
 27 |     listingId
 28 |   );
 29 | 
 30 |   if (listing?.secondsUntilEnd === 0) {
 31 |   }
 32 | 
 33 |   const [bidAmount, setBidAmount] = useState("");
 34 | 
 35 |   if (loadingListing) {
 36 |     return <div className={styles.loadingOrError}>Loading...</div>;
 37 |   }
 38 | 
 39 |   if (!listing) {
 40 |     return <div className={styles.loadingOrError}>Listing not found</div>;
 41 |   }
 42 | 
 43 |   async function createBidOrOffer() {
 44 |     try {
 45 |       // Ensure user is on the correct network
 46 |       if (networkMismatch) {
 47 |         switchNetwork && switchNetwork(ChainId.Mumbai);
 48 |         return;
 49 |       }
 50 | 
 51 |       // If the listing type is a direct listing, then we can create an offer.
 52 |       if (listing?.type === ListingType.Direct) {
 53 |         await marketplace?.direct.makeOffer(
 54 |           listingId, // The listingId of the listing we want to make an offer for
 55 |           1, // Quantity = 1
 56 |           NATIVE_TOKENS[ChainId.Goerli].wrapped.address, // Wrapped Ether address on Goerli
 57 |           bidAmount // The offer amount the user entered
 58 |         );
 59 |       }
 60 | 
 61 |       // If the listing type is an auction listing, then we can create a bid.
 62 |       if (listing?.type === ListingType.Auction) {
 63 |         await marketplace?.auction.makeBid(listingId, bidAmount);
 64 |       }
 65 | 
 66 |       alert(
 67 |         `${
 68 |           listing?.type === ListingType.Auction ? "Bid" : "Offer"
 69 |         } created successfully!`
 70 |       );
 71 |     } catch (error) {
 72 |       console.error(error.message || "something went wrong");
 73 |       alert(error.message || "something went wrong");
 74 |     }
 75 |   }
 76 | 
 77 |   async function buyNft() {
 78 |     try {
 79 |       // Ensure user is on the correct network
 80 |       if (networkMismatch) {
 81 |         switchNetwork && switchNetwork(ChainId.Mumbai);
 82 |         return;
 83 |       }
 84 | 
 85 |       // Simple one-liner for buying the NFT
 86 |       await marketplace?.buyoutListing(listingId, 1);
 87 |       alert("NFT bought successfully!");
 88 |     } catch (error) {
 89 |       console.error(error);
 90 |       alert(error);
 91 |     }
 92 |   }
 93 | 
 94 |   return (
 95 |     <div className={styles.container}>
 96 |       <div className={styles.listingContainer}>
 97 |         <div className={styles.leftListing}>
 98 |           <MediaRenderer
 99 |             src={listing.asset.image}
100 |             className={styles.mainNftImage}
101 |           />
102 |         </div>
103 | 
104 |         <div className={styles.rightListing}>
105 |           <h1>{listing.asset.name}</h1>
106 |           <p>
107 |             Owned by <b>{listing.sellerAddress?.slice(0, 6)}</b>
108 |           </p>
109 | 
110 |           <h2>
111 |             <b>{listing.buyoutCurrencyValuePerToken.displayValue}</b>{" "}
112 |             {listing.buyoutCurrencyValuePerToken.symbol}
113 |           </h2>
114 | 
115 |           <div
116 |             style={{
117 |               display: "flex",
118 |               flexDirection: "row",
119 |               gap: 20,
120 |               alignItems: "center",
121 |             }}
122 |           >
123 |             <button
124 |               style={{ borderStyle: "none" }}
125 |               className={styles.mainButton}
126 |               onClick={buyNft}
127 |             >
128 |               Buy
129 |             </button>
130 |             <p style={{ color: "grey" }}>|</p>
131 |             <div
132 |               style={{
133 |                 display: "flex",
134 |                 flexDirection: "row",
135 |                 alignItems: "center",
136 |                 gap: 8,
137 |               }}
138 |             >
139 |               <input
140 |                 type="text"
141 |                 name="bidAmount"
142 |                 className={styles.textInput}
143 |                 onChange={(e) => setBidAmount(e.target.value)}
144 |                 placeholder="Amount"
145 |                 style={{ marginTop: 0, marginLeft: 0, width: 128 }}
146 |               />
147 |               <button
148 |                 className={styles.mainButton}
149 |                 onClick={createBidOrOffer}
150 |                 style={{
151 |                   borderStyle: "none",
152 |                   background: "transparent",
153 |                   width: "fit-content",
154 |                 }}
155 |               >
156 |                 Make Offer
157 |               </button>
158 |             </div>
159 |           </div>
160 |         </div>
161 |       </div>
162 |     </div>
163 |   );
164 | }
165 | 


--------------------------------------------------------------------------------
/styles/Theme.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   margin-top: 96px;
  3 |   display: flex;
  4 |   flex-direction: column;
  5 |   align-items: center;
  6 |   justify-content: center;
  7 |   width: 100vw;
  8 | }
  9 | 
 10 | .collectionContainer {
 11 |   width: 500px;
 12 |   max-width: 90vw;
 13 |   display: flex;
 14 |   flex-direction: column;
 15 |   align-items: center;
 16 |   margin-top: 2%;
 17 | }
 18 | 
 19 | .ourCollection {
 20 |   font-size: 1.5rem;
 21 |   margin-bottom: 16px;
 22 | }
 23 | 
 24 | .textInput {
 25 |   width: 75%;
 26 |   background-color: transparent;
 27 |   border: 1px solid grey;
 28 |   border-radius: 8px;
 29 |   color: #fff;
 30 |   height: 48px;
 31 |   padding: 0 16px;
 32 |   font-size: 1rem;
 33 |   margin-top: 16px;
 34 |   width: 100%;
 35 | }
 36 | 
 37 | .imageInput {
 38 |   width: 100%;
 39 |   height: 100px;
 40 |   border: 1px dashed grey;
 41 |   border-radius: 16px;
 42 |   display: flex;
 43 |   align-items: center;
 44 |   justify-content: center;
 45 |   color: grey;
 46 |   cursor: pointer;
 47 | }
 48 | 
 49 | .previewImage {
 50 |   height: 500px;
 51 |   width: 500px;
 52 |   border-radius: 16px;
 53 |   border: 1px solid var(--border-color);
 54 |   padding: 8px;
 55 | }
 56 | 
 57 | .mintInfoContainer {
 58 |   display: flex;
 59 |   flex-direction: row;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 |   width: 100%;
 63 |   padding: 0 24px;
 64 |   min-height: 720px;
 65 |   max-width: 95vw;
 66 |   gap: 2%;
 67 |   border: 1px solid var(--border-color);
 68 |   border-radius: 16px;
 69 | }
 70 | 
 71 | .infoSide {
 72 |   display: flex;
 73 |   flex-direction: column;
 74 |   align-items: center;
 75 |   width: 45%;
 76 |   height: 100%;
 77 | }
 78 | 
 79 | .description {
 80 |   opacity: 0.7;
 81 |   font-size: 1rem;
 82 | }
 83 | 
 84 | .imageSide {
 85 |   width: 45%;
 86 |   height: 100%;
 87 | }
 88 | 
 89 | .image {
 90 |   width: 85%;
 91 |   border-radius: 16px;
 92 | }
 93 | 
 94 | .mainButton {
 95 |   cursor: pointer;
 96 |   display: inline-flex;
 97 |   appearance: none;
 98 |   align-items: center;
 99 |   -webkit-box-align: center;
100 |   justify-content: center;
101 |   white-space: nowrap;
102 |   vertical-align: middle;
103 |   outline: 2px solid transparent;
104 |   outline-offset: 2px;
105 |   line-height: 1.2;
106 |   font-weight: 600;
107 |   transition-property: background-color, border-color, color, fill, stroke,
108 |     opacity, box-shadow, transform;
109 |   transition-duration: 200ms;
110 |   height: 3rem;
111 |   min-width: 3rem;
112 |   font-size: 1rem;
113 |   background: #e5e5ea;
114 |   background-image: linear-gradient(
115 |     to left,
116 |     var(--color-primary) 0%,
117 |     var(--color-secondary) 101.52%
118 |   );
119 |   color: #fff;
120 |   width: 180px;
121 |   text-align: center;
122 |   border-radius: 9999px;
123 |   border-style: none;
124 | }
125 | 
126 | .mainButton:hover {
127 |   opacity: 0.8;
128 | }
129 | 
130 | .mintCompletionArea {
131 |   display: flex;
132 |   flex-direction: row;
133 |   align-items: center;
134 |   justify-content: space-between;
135 | }
136 | 
137 | .header {
138 |   background-color: #262936;
139 |   position: fixed;
140 |   top: 0;
141 |   left: 0;
142 |   width: 100vw;
143 |   height: 72px;
144 |   margin-bottom: 96px;
145 |   display: flex;
146 |   flex-direction: row;
147 |   align-items: center;
148 |   justify-content: space-between;
149 | }
150 | 
151 | .left {
152 |   height: 100%;
153 |   display: flex;
154 |   align-items: center;
155 |   justify-content: center;
156 |   flex-direction: row;
157 |   margin-left: 5%;
158 |   gap: 5%;
159 | }
160 | 
161 | .headerLogo {
162 |   width: 135px;
163 |   cursor: pointer;
164 | }
165 | 
166 | .verticalSpacer {
167 |   color: grey;
168 |   margin-left: 8px;
169 |   margin-right: 8px;
170 | }
171 | 
172 | .headerItem {
173 |   font-size: 1rem;
174 |   color: inherit;
175 |   font-weight: bold;
176 |   margin-left: 16px;
177 | }
178 | 
179 | .right {
180 |   height: 100%;
181 |   display: flex;
182 |   align-items: center;
183 |   justify-content: center;
184 |   flex-direction: row;
185 |   margin-right: 5%;
186 | }
187 | 
188 | .mintAreaLeft {
189 |   margin-left: 5%;
190 |   opacity: 0.75;
191 | }
192 | 
193 | .mintAreaRight {
194 |   margin-right: 5%;
195 |   opacity: 0.75;
196 | }
197 | 
198 | .spacerTop {
199 |   margin-top: 16px;
200 | }
201 | 
202 | .spacerBottom {
203 |   margin-bottom: 16px;
204 | }
205 | 
206 | .buttonGapTop {
207 |   cursor: pointer;
208 |   margin-top: 32px;
209 | }
210 | 
211 | .quantityContainer {
212 |   display: flex;
213 |   flex-direction: row;
214 |   align-items: center;
215 |   justify-content: center;
216 |   gap: 10%;
217 | }
218 | 
219 | .textInput {
220 |   width: 48px;
221 |   background-color: transparent;
222 |   border: 1px solid grey;
223 |   border-radius: 8px;
224 |   color: #fff;
225 |   height: 48px;
226 |   padding: 0 16px;
227 |   font-size: 1rem;
228 | }
229 | 
230 | .quantityControlButton {
231 |   cursor: pointer;
232 |   width: 42px;
233 |   height: 42px;
234 |   border-radius: 50%;
235 |   font-size: 2rem;
236 |   background-color: transparent;
237 |   border: 1px solid grey;
238 |   color: #fff;
239 | }
240 | 
241 | .quantityControlButton:disabled {
242 |   opacity: 0.25;
243 | }
244 | 
245 | .divider {
246 |   width: 50%;
247 |   border-color: grey;
248 |   opacity: 0.25;
249 | }
250 | 
251 | .smallDivider {
252 |   width: 25%;
253 |   border-color: grey;
254 |   margin-top: 64px;
255 |   opacity: 0.25;
256 | }
257 | 
258 | .nftBoxGrid {
259 |   width: 1200px;
260 |   max-width: 95vw;
261 |   display: flex;
262 |   flex-direction: row;
263 |   align-items: center;
264 |   justify-content: center;
265 |   gap: 1%;
266 |   margin-top: 28px;
267 |   flex-wrap: wrap;
268 | }
269 | 
270 | .nftBox {
271 |   border-radius: 16px;
272 |   border: 1px solid #ccc;
273 |   width: 19%;
274 |   min-height: 200px;
275 |   padding: 4px;
276 |   height: 100%;
277 |   color: inherit;
278 |   text-decoration: none;
279 | }
280 | 
281 | .nftMedia {
282 |   width: 100%;
283 |   max-height: 300px;
284 |   border-radius: 15px;
285 | }
286 | 
287 | /* On mobile, make the .mintInfoContainer stack vertically */
288 | @media screen and (max-width: 850px) {
289 |   .mintInfoContainer {
290 |     flex-direction: column;
291 |     padding-bottom: 5%;
292 |   }
293 | 
294 |   .infoSide {
295 |     width: 100%;
296 |   }
297 | 
298 |   .imageSide {
299 |     width: 100%;
300 |   }
301 | }
302 | 
303 | .loadingOrError {
304 |   height: 100vh;
305 |   width: 100vw;
306 |   display: flex;
307 |   flex-direction: column;
308 |   align-items: center;
309 |   justify-content: center;
310 | }
311 | 
312 | .listingContainer {
313 |   display: flex;
314 |   flex-direction: row;
315 |   align-items: center;
316 |   justify-content: space-between;
317 |   width: 1200px;
318 |   max-width: 90vw;
319 |   gap: 20px;
320 |   margin-top: 5%;
321 |   height: 500px;
322 | }
323 | 
324 | .leftListing {
325 |   width: 40%;
326 |   display: flex;
327 |   flex-direction: column;
328 |   align-items: center;
329 |   justify-content: center;
330 | }
331 | 
332 | .mainNftImage {
333 |   width: 100%;
334 |   height: 100%;
335 |   max-height: 400px;
336 |   max-width: 400px;
337 |   border-radius: 16px;
338 |   background-size: cover;
339 |   background-position: center;
340 |   background-repeat: no-repeat;
341 | }
342 | 
343 | .rightListing {
344 |   width: 55%;
345 |   display: flex;
346 |   flex-direction: column;
347 |   align-items: flex-start;
348 |   justify-content: center;
349 | }
350 | 
351 | /* On Mobile, change .listingContainer to be stacked vertically */
352 | @media screen and (max-width: 900px) {
353 |   .listingContainer {
354 |     flex-direction: column;
355 |     align-items: center;
356 |   }
357 | 
358 |   .leftListing {
359 |     width: 100%;
360 |     margin-bottom: 20px;
361 |   }
362 | 
363 |   .rightListing {
364 |     width: 100%;
365 |     align-items: center;
366 |   }
367 | }
368 | 
369 | .listingTypeContainer {
370 |   margin-top: 64px;
371 |   display: flex;
372 |   flex-direction: row;
373 |   align-items: center;
374 |   justify-content: center;
375 |   margin-bottom: 16px;
376 |   gap: 12px;
377 | }
378 | 
379 | .listingType {
380 |   opacity: 0;
381 |   width: 0;
382 |   position: fixed;
383 | }
384 | 
385 | .listingTypeLabel {
386 |   display: inline-block;
387 |   background-color: #262936;
388 |   padding: 10px 20px;
389 |   font-size: 16px;
390 |   border: 2px solid #444;
391 |   border-radius: 4px;
392 |   border-radius: 16px;
393 |   font-weight: 600;
394 |   cursor: pointer;
395 | }
396 | 
397 | .listingType:checked + label {
398 |   border: 3px solid transparent;
399 |   border-radius: 20px;
400 |   background: linear-gradient(to right, #262936, #262936),
401 |     linear-gradient(to right, #418dff, #cc25b3);
402 |   background-clip: padding-box, border-box;
403 |   background-origin: padding-box, border-box;
404 | }
405 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import {
  3 |   useContract,
  4 |   useNetwork,
  5 |   useNetworkMismatch,
  6 |   useAddress,
  7 |   useSDK,
  8 |   useCreateDirectListing,
  9 |   useCreateAuctionListing,
 10 | } from "@thirdweb-dev/react";
 11 | import { ChainId, NATIVE_TOKEN_ADDRESS } from "@thirdweb-dev/sdk";
 12 | import { useRouter } from "next/router";
 13 | import { useRef } from "react";
 14 | import styles from "../styles/Theme.module.css";
 15 | 
 16 | const Create = () => {
 17 |   const address = useAddress();
 18 |   const networkMismatch = useNetworkMismatch();
 19 |   const [, switchNetwork] = useNetwork();
 20 |   const sdk = useSDK();
 21 | 
 22 |   const [creatingListing, setCreatingListing] = useState(false);
 23 | 
 24 |   const { contract: nftCollection } = useContract(
 25 |     "0x5e0d08BF82f40b80DF1beb1874D04C1416BCc8B2",
 26 |     "nft-collection"
 27 |   );
 28 |   const { contract: marketplace } = useContract(
 29 |     "0x4719c1737a69b50Ed303E01f7725Cc8aEd855Be1",
 30 |     "marketplace"
 31 |   );
 32 | 
 33 |   const { mutateAsync: makeDirectListing } =
 34 |     useCreateDirectListing(marketplace);
 35 |   const { mutateAsync: makeAuctionListing } =
 36 |     useCreateAuctionListing(marketplace);
 37 | 
 38 |   // Other hooks
 39 |   const router = useRouter();
 40 |   const [file, setFile] = useState();
 41 |   const fileInputRef = useRef(null);
 42 | 
 43 |   // This function gets called when the form is submitted.
 44 |   async function handleCreateListing(e) {
 45 |     setCreatingListing(true);
 46 |     try {
 47 |       // Prevent page from refreshing
 48 |       e.preventDefault();
 49 | 
 50 |       // De-construct data from form submission
 51 |       const { listingType, name, description, price } = e.target.elements;
 52 | 
 53 |       console.log({
 54 |         listingType: listingType.value,
 55 |         name: name.value,
 56 |         description: description.value,
 57 |         price: price.value,
 58 |       });
 59 | 
 60 |       // Ensure user is on the correct network
 61 |       if (networkMismatch) {
 62 |         switchNetwork?.(ChainId.Goerli);
 63 |         return;
 64 |       }
 65 | 
 66 |       // Upload image using storage SDK
 67 |       const img = await sdk.storage.upload(file);
 68 | 
 69 |       // Signature Mint NFT, get info (fetch generate mint signature)
 70 |       const req = await fetch("/api/generate-mint-signature", {
 71 |         method: "POST",
 72 |         body: JSON.stringify({
 73 |           address,
 74 |           name: e.target.elements.name.value,
 75 |           description: e.target.elements.description.value,
 76 |           image: img,
 77 |         }),
 78 |       });
 79 | 
 80 |       const signedPayload = (await req.json()).signedPayload;
 81 | 
 82 |       const nft = await nftCollection?.signature.mint(signedPayload);
 83 | 
 84 |       const mintedTokenId = nft.id.toNumber();
 85 | 
 86 |       // Store the result of either the direct listing creation or the auction listing creation
 87 |       let transactionResult = undefined;
 88 | 
 89 |       // Depending on the type of listing selected, call the appropriate function
 90 |       // For Direct Listings:
 91 |       if (listingType.value === "directListing") {
 92 |         transactionResult = await createDirectListing(
 93 |           "0x5e0d08BF82f40b80DF1beb1874D04C1416BCc8B2",
 94 |           mintedTokenId,
 95 |           price.value
 96 |         );
 97 |       }
 98 | 
 99 |       // For Auction Listings:
100 |       if (listingType.value === "auctionListing") {
101 |         transactionResult = await createAuctionListing(
102 |           "0x5e0d08BF82f40b80DF1beb1874D04C1416BCc8B2",
103 |           mintedTokenId,
104 |           price.value
105 |         );
106 |       }
107 | 
108 |       // If the transaction succeeds, take the user back to the homepage to view their listing!
109 |       if (transactionResult) {
110 |         router.push(`/`);
111 |       }
112 |     } catch (error) {
113 |       console.error(error);
114 |       alert("Error creating listing. Check the console for more details");
115 |     } finally {
116 |       setCreatingListing(false);
117 |     }
118 |   }
119 | 
120 |   async function createAuctionListing(contractAddress, tokenId, price) {
121 |     try {
122 |       makeAuctionListing(
123 |         {
124 |           assetContractAddress: contractAddress, // Contract Address of the NFT
125 |           buyoutPricePerToken: price, // Maximum price, the auction will end immediately if a user pays this price.
126 |           currencyContractAddress: NATIVE_TOKEN_ADDRESS, // NATIVE_TOKEN_ADDRESS is the crpyto curency that is native to the network. i.e. Goerli ETH.
127 |           listingDurationInSeconds: 60 * 60 * 24 * 7, // When the auction will be closed and no longer accept bids (1 Week)
128 |           quantity: 1, // How many of the NFTs are being listed (useful for ERC 1155 tokens)
129 |           reservePricePerToken: 0, // Minimum price, users cannot bid below this amount
130 |           startTimestamp: new Date(), // When the listing will start
131 |           tokenId: tokenId, // Token ID of the NFT.
132 |         },
133 |         {
134 |           onSuccess: (tx) => {
135 |             return tx;
136 |           },
137 |         }
138 |       );
139 |     } catch (error) {
140 |       console.error(error);
141 |     }
142 |   }
143 | 
144 |   async function createDirectListing(contractAddress, tokenId, price) {
145 |     try {
146 |       makeDirectListing(
147 |         {
148 |           assetContractAddress: contractAddress, // Contract Address of the NFT
149 |           buyoutPricePerToken: price, // Maximum price, the auction will end immediately if a user pays this price.
150 |           currencyContractAddress: NATIVE_TOKEN_ADDRESS, // NATIVE_TOKEN_ADDRESS is the crpyto curency that is native to the network. i.e. Goerli ETH.
151 |           listingDurationInSeconds: 60 * 60 * 24 * 7, // When the auction will be closed and no longer accept bids (1 Week)
152 |           quantity: 1, // How many of the NFTs are being listed (useful for ERC 1155 tokens)
153 |           startTimestamp: new Date(0), // When the listing will start
154 |           tokenId: tokenId, // Token ID of the NFT.
155 |         },
156 |         {
157 |           onSuccess: (tx) => {
158 |             return tx;
159 |           },
160 |         }
161 |       );
162 |     } catch (error) {
163 |       console.error(error);
164 |     }
165 |   }
166 | 
167 |   // Function to store file in state when user uploads it
168 |   const uploadFile = () => {
169 |     if (fileInputRef?.current) {
170 |       fileInputRef.current.click();
171 | 
172 |       fileInputRef.current.onchange = () => {
173 |         if (fileInputRef?.current?.files?.length) {
174 |           const file = fileInputRef.current.files[0];
175 |           setFile(file);
176 |         }
177 |       };
178 |     }
179 |   };
180 | 
181 |   return (
182 |     <form onSubmit={(e) => handleCreateListing(e)}>
183 |       <div className={styles.container}>
184 |         {/* Form Section */}
185 |         <div className={styles.collectionContainer}>
186 |           <h1 className={styles.ourCollection}>
187 |             Upload your NFT to the marketplace:
188 |           </h1>
189 | 
190 |           {/* Toggle between direct listing and auction listing */}
191 |           <div className={styles.listingTypeContainer}>
192 |             <input
193 |               type="radio"
194 |               name="listingType"
195 |               id="directListing"
196 |               value="directListing"
197 |               defaultChecked
198 |               className={styles.listingType}
199 |             />
200 |             <label htmlFor="directListing" className={styles.listingTypeLabel}>
201 |               Direct Listing
202 |             </label>
203 |             <input
204 |               type="radio"
205 |               name="listingType"
206 |               id="auctionListing"
207 |               value="auctionListing"
208 |               className={styles.listingType}
209 |             />
210 |             <label htmlFor="auctionListing" className={styles.listingTypeLabel}>
211 |               Auction Listing
212 |             </label>
213 |           </div>
214 | 
215 |           {file ? (
216 |             <img
217 |               src={URL.createObjectURL(file)}
218 |               style={{ cursor: "pointer", maxHeight: 250, borderRadius: 8 }}
219 |               onClick={() => setFile(undefined)}
220 |             />
221 |           ) : (
222 |             <div
223 |               className={styles.imageInput}
224 |               onClick={uploadFile}
225 |               onDragOver={(e) => e.preventDefault()}
226 |               onDrop={(e) => {
227 |                 e.preventDefault();
228 |                 setFile(e.dataTransfer.files[0]);
229 |               }}
230 |             >
231 |               Drag and drop an image here to upload it!
232 |             </div>
233 |           )}
234 |           <input
235 |             type="file"
236 |             accept="image/png, image/gif, image/jpeg"
237 |             id="profile-picture-input"
238 |             ref={fileInputRef}
239 |             style={{ display: "none" }}
240 |           />
241 | 
242 |           {/* Sale Price For Listing Field */}
243 |           <input
244 |             type="text"
245 |             name="name"
246 |             className={styles.textInput}
247 |             placeholder="Name"
248 |             style={{ minWidth: "320px" }}
249 |           />
250 | 
251 |           {/* Sale Price For Listing Field */}
252 |           <input
253 |             type="text"
254 |             name="description"
255 |             className={styles.textInput}
256 |             placeholder="Description"
257 |             style={{ minWidth: "320px" }}
258 |           />
259 | 
260 |           {/* Sale Price For Listing Field */}
261 |           <input
262 |             type="text"
263 |             name="price"
264 |             className={styles.textInput}
265 |             placeholder="Price (in ETH)"
266 |             style={{ minWidth: "320px" }}
267 |           />
268 | 
269 |           <button
270 |             type="submit"
271 |             className={styles.mainButton}
272 |             style={{ marginTop: 32, borderStyle: "none" }}
273 |             disabled={creatingListing}
274 |           >
275 |             {creatingListing ? "Loading..." : "Mint + List NFT"}
276 |           </button>
277 |         </div>
278 |       </div>
279 |     </form>
280 |   );
281 | };
282 | 
283 | export default Create;
284 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 | 1.  Definitions.
  8 | 
  9 |     "License" shall mean the terms and conditions for use, reproduction,
 10 |     and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |     "Licensor" shall mean the copyright owner or entity authorized by
 13 |     the copyright owner that is granting the License.
 14 | 
 15 |     "Legal Entity" shall mean the union of the acting entity and all
 16 |     other entities that control, are controlled by, or are under common
 17 |     control with that entity. For the purposes of this definition,
 18 |     "control" means (i) the power, direct or indirect, to cause the
 19 |     direction or management of such entity, whether by contract or
 20 |     otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |     outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |     "You" (or "Your") shall mean an individual or Legal Entity
 24 |     exercising permissions granted by this License.
 25 | 
 26 |     "Source" form shall mean the preferred form for making modifications,
 27 |     including but not limited to software source code, documentation
 28 |     source, and configuration files.
 29 | 
 30 |     "Object" form shall mean any form resulting from mechanical
 31 |     transformation or translation of a Source form, including but
 32 |     not limited to compiled object code, generated documentation,
 33 |     and conversions to other media types.
 34 | 
 35 |     "Work" shall mean the work of authorship, whether in Source or
 36 |     Object form, made available under the License, as indicated by a
 37 |     copyright notice that is included in or attached to the work
 38 |     (an example is provided in the Appendix below).
 39 | 
 40 |     "Derivative Works" shall mean any work, whether in Source or Object
 41 |     form, that is based on (or derived from) the Work and for which the
 42 |     editorial revisions, annotations, elaborations, or other modifications
 43 |     represent, as a whole, an original work of authorship. For the purposes
 44 |     of this License, Derivative Works shall not include works that remain
 45 |     separable from, or merely link (or bind by name) to the interfaces of,
 46 |     the Work and Derivative Works thereof.
 47 | 
 48 |     "Contribution" shall mean any work of authorship, including
 49 |     the original version of the Work and any modifications or additions
 50 |     to that Work or Derivative Works thereof, that is intentionally
 51 |     submitted to Licensor for inclusion in the Work by the copyright owner
 52 |     or by an individual or Legal Entity authorized to submit on behalf of
 53 |     the copyright owner. For the purposes of this definition, "submitted"
 54 |     means any form of electronic, verbal, or written communication sent
 55 |     to the Licensor or its representatives, including but not limited to
 56 |     communication on electronic mailing lists, source code control systems,
 57 |     and issue tracking systems that are managed by, or on behalf of, the
 58 |     Licensor for the purpose of discussing and improving the Work, but
 59 |     excluding communication that is conspicuously marked or otherwise
 60 |     designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |     "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |     on behalf of whom a Contribution has been received by Licensor and
 64 |     subsequently incorporated within the Work.
 65 | 
 66 | 2.  Grant of Copyright License. Subject to the terms and conditions of
 67 |     this License, each Contributor hereby grants to You a perpetual,
 68 |     worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |     copyright license to reproduce, prepare Derivative Works of,
 70 |     publicly display, publicly perform, sublicense, and distribute the
 71 |     Work and such Derivative Works in Source or Object form.
 72 | 
 73 | 3.  Grant of Patent License. Subject to the terms and conditions of
 74 |     this License, each Contributor hereby grants to You a perpetual,
 75 |     worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |     (except as stated in this section) patent license to make, have made,
 77 |     use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |     where such license applies only to those patent claims licensable
 79 |     by such Contributor that are necessarily infringed by their
 80 |     Contribution(s) alone or by combination of their Contribution(s)
 81 |     with the Work to which such Contribution(s) was submitted. If You
 82 |     institute patent litigation against any entity (including a
 83 |     cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |     or a Contribution incorporated within the Work constitutes direct
 85 |     or contributory patent infringement, then any patent licenses
 86 |     granted to You under this License for that Work shall terminate
 87 |     as of the date such litigation is filed.
 88 | 
 89 | 4.  Redistribution. You may reproduce and distribute copies of the
 90 |     Work or Derivative Works thereof in any medium, with or without
 91 |     modifications, and in Source or Object form, provided that You
 92 |     meet the following conditions:
 93 | 
 94 |     (a) You must give any other recipients of the Work or
 95 |     Derivative Works a copy of this License; and
 96 | 
 97 |     (b) You must cause any modified files to carry prominent notices
 98 |     stating that You changed the files; and
 99 | 
100 |     (c) You must retain, in the Source form of any Derivative Works
101 |     that You distribute, all copyright, patent, trademark, and
102 |     attribution notices from the Source form of the Work,
103 |     excluding those notices that do not pertain to any part of
104 |     the Derivative Works; and
105 | 
106 |     (d) If the Work includes a "NOTICE" text file as part of its
107 |     distribution, then any Derivative Works that You distribute must
108 |     include a readable copy of the attribution notices contained
109 |     within such NOTICE file, excluding those notices that do not
110 |     pertain to any part of the Derivative Works, in at least one
111 |     of the following places: within a NOTICE text file distributed
112 |     as part of the Derivative Works; within the Source form or
113 |     documentation, if provided along with the Derivative Works; or,
114 |     within a display generated by the Derivative Works, if and
115 |     wherever such third-party notices normally appear. The contents
116 |     of the NOTICE file are for informational purposes only and
117 |     do not modify the License. You may add Your own attribution
118 |     notices within Derivative Works that You distribute, alongside
119 |     or as an addendum to the NOTICE text from the Work, provided
120 |     that such additional attribution notices cannot be construed
121 |     as modifying the License.
122 | 
123 |     You may add Your own copyright statement to Your modifications and
124 |     may provide additional or different license terms and conditions
125 |     for use, reproduction, or distribution of Your modifications, or
126 |     for any such Derivative Works as a whole, provided Your use,
127 |     reproduction, and distribution of the Work otherwise complies with
128 |     the conditions stated in this License.
129 | 
130 | 5.  Submission of Contributions. Unless You explicitly state otherwise,
131 |     any Contribution intentionally submitted for inclusion in the Work
132 |     by You to the Licensor shall be under the terms and conditions of
133 |     this License, without any additional terms or conditions.
134 |     Notwithstanding the above, nothing herein shall supersede or modify
135 |     the terms of any separate license agreement you may have executed
136 |     with Licensor regarding such Contributions.
137 | 
138 | 6.  Trademarks. This License does not grant permission to use the trade
139 |     names, trademarks, service marks, or product names of the Licensor,
140 |     except as required for reasonable and customary use in describing the
141 |     origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 | 7.  Disclaimer of Warranty. Unless required by applicable law or
144 |     agreed to in writing, Licensor provides the Work (and each
145 |     Contributor provides its Contributions) on an "AS IS" BASIS,
146 |     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |     implied, including, without limitation, any warranties or conditions
148 |     of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |     PARTICULAR PURPOSE. You are solely responsible for determining the
150 |     appropriateness of using or redistributing the Work and assume any
151 |     risks associated with Your exercise of permissions under this License.
152 | 
153 | 8.  Limitation of Liability. In no event and under no legal theory,
154 |     whether in tort (including negligence), contract, or otherwise,
155 |     unless required by applicable law (such as deliberate and grossly
156 |     negligent acts) or agreed to in writing, shall any Contributor be
157 |     liable to You for damages, including any direct, indirect, special,
158 |     incidental, or consequential damages of any character arising as a
159 |     result of this License or out of the use or inability to use the
160 |     Work (including but not limited to damages for loss of goodwill,
161 |     work stoppage, computer failure or malfunction, or any and all
162 |     other commercial damages or losses), even if such Contributor
163 |     has been advised of the possibility of such damages.
164 | 
165 | 9.  Accepting Warranty or Additional Liability. While redistributing
166 |     the Work or Derivative Works thereof, You may choose to offer,
167 |     and charge a fee for, acceptance of support, warranty, indemnity,
168 |     or other liability obligations and/or rights consistent with this
169 |     License. However, in accepting such obligations, You may act only
170 |     on Your own behalf and on Your sole responsibility, not on behalf
171 |     of any other Contributor, and only if You agree to indemnify,
172 |     defend, and hold each Contributor harmless for any liability
173 |     incurred by, or claims asserted against, such Contributor by reason
174 |     of your accepting any such warranty or additional liability.
175 | 
176 | END OF TERMS AND CONDITIONS
177 | 
178 | APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 | Copyright 2021 Non-Fungible Labs, Inc
190 | 
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 | 


--------------------------------------------------------------------------------