diff --git a/typescript/mint-specific-nft/LICENSE.md b/typescript/mint-specific-nft/LICENSE.md new file mode 100644 index 0000000..88e8b41 --- /dev/null +++ b/typescript/mint-specific-nft/LICENSE.md @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright 2021 Non-Fungible Labs, Inc + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/typescript/mint-specific-nft/README.md b/typescript/mint-specific-nft/README.md new file mode 100644 index 0000000..5a43c65 --- /dev/null +++ b/typescript/mint-specific-nft/README.md @@ -0,0 +1,40 @@ +## Getting Started + +First, intall the required dependencies: + +```bash +npm install +# or +yarn install +``` + +Then, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. + +On `pages/_app.tsx`, you'll find our `ThirdwebProvider` wrapping your app, this is necessary for our hooks to work. + +on `pages/index.tsx`, you'll find the `useMetamask` hook that we use to connect the user's wallet to MetaMask, `useDisconnect` that we use to disconnect it, and `useAddress` to check the user's wallet address once connected. + +## Learn More + +To learn more about thirdweb and Next.js, take a look at the following resources: + +- [thirdweb React Documentation](https://docs.thirdweb.com/react) - learn about our React SDK. +- [thirdweb TypeScript Documentation](https://docs.thirdweb.com/react) - learn about our JavaScript/TypeScript SDK. +- [thirdweb Portal](https://docs.thirdweb.com/react) - check our guides and development resources. +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. + +You can check out [the thirdweb GitHub organization](https://github.com/thirdweb-dev) - your feedback and contributions are welcome! + +## Join our Discord! + +For any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb). \ No newline at end of file diff --git a/typescript/mint-specific-nft/components/Nfts.tsx b/typescript/mint-specific-nft/components/Nfts.tsx new file mode 100644 index 0000000..19db5cb --- /dev/null +++ b/typescript/mint-specific-nft/components/Nfts.tsx @@ -0,0 +1,118 @@ +import { Box, SimpleGrid, Button, Flex, Image } from '@chakra-ui/react'; +import { useEffect, useState } from 'react'; +import { useAddress, useNFTCollection, useMetamask } from '@thirdweb-dev/react'; + +const Nfts = (props: any) => { + // State to set when we are loading + const [loading, setLoading] = useState(false); + // State for nft metadata + const [nftMetadata, setNftMetadata] = useState([null]); + + // useEffect hook to get NFTs from API + useEffect(() => { + fetch('/api/getNfts', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }) + .then((res) => res.json()) + .then((data) => { + setNftMetadata(data); + }); + }, [loading]); + + // Use address and connect with metamask + const address = useAddress(); + const connectWithMetamask = useMetamask(); + + // You can find your contract address in your dashboard after you have created an NFT Collection contract + const nftCollectionAddress = '0xB20B7AA964365A753Fb7412d98D76D139fd7Cbbd'; + + // Connect to contract using the address + const nftCollection = useNFTCollection(nftCollectionAddress); + + // Function which generates signature and mints NFT + async function onClick(id: number) { + try { + connectWithMetamask(); + setLoading(true); + // Call API to generate signature and payload for minting + const response = await fetch('/api/getNfts', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ id, address }), + }); + + if (response) { + const data = await response.json(); + const mintInput = { + signature: data.signature, + payload: data.payload, + }; + + await nftCollection?.signature.mint(mintInput); + + alert('NFT successfully minted!'); + setLoading(false); + } + } catch (error) { + setLoading(false); + console.log(error); + alert('Failed to mint NFT!'); + } + } + + return ( + + {nftMetadata?.map((nft: any) => ( + + NFT image + + + + {nft?.name} + + + + {nft?.description} + + + {nft?.price} + + {loading ? ( +

Minting... You will need to approve 1 transaction

+ ) : nft?.minted ? ( + This NFT has already been minted + ) : ( + + )} +
+
+ ))} +
+ ); +}; + +export default Nfts; diff --git a/typescript/mint-specific-nft/next-env.d.ts b/typescript/mint-specific-nft/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/typescript/mint-specific-nft/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/typescript/mint-specific-nft/next.config.js b/typescript/mint-specific-nft/next.config.js new file mode 100644 index 0000000..a843cbe --- /dev/null +++ b/typescript/mint-specific-nft/next.config.js @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +} + +module.exports = nextConfig diff --git a/typescript/mint-specific-nft/package.json b/typescript/mint-specific-nft/package.json new file mode 100644 index 0000000..bc7c9e5 --- /dev/null +++ b/typescript/mint-specific-nft/package.json @@ -0,0 +1,32 @@ +{ + "name": "next-typescript-starter", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@chakra-ui/react": "^1.8.8", + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@thirdweb-dev/react": "^2.0.4", + "@thirdweb-dev/sdk": "^2.0.30", + "dotenv": "^16.0.0", + "ethers": "^5.6.3", + "framer-motion": "^6.2.10", + "fs": "^0.0.1-security", + "next": "12.1.0", + "react": "17.0.2", + "react-dom": "17.0.2" + }, + "devDependencies": { + "@types/node": "17.0.21", + "@types/react": "17.0.40", + "eslint": "8.11.0", + "eslint-config-next": "12.1.0", + "typescript": "4.6.2" + } +} diff --git a/typescript/mint-specific-nft/pages/_app.tsx b/typescript/mint-specific-nft/pages/_app.tsx new file mode 100644 index 0000000..58ac838 --- /dev/null +++ b/typescript/mint-specific-nft/pages/_app.tsx @@ -0,0 +1,18 @@ +import type { AppProps } from 'next/app'; +import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react'; +import { ChakraProvider } from '@chakra-ui/react'; + +// This is the chainId your dApp will work on. +const activeChainId = ChainId.Rinkeby; + +function MyApp({ Component, pageProps }: AppProps) { + return ( + + + + + + ); +} + +export default MyApp; diff --git a/typescript/mint-specific-nft/pages/api/data/nfts.json b/typescript/mint-specific-nft/pages/api/data/nfts.json new file mode 100644 index 0000000..453c6d2 --- /dev/null +++ b/typescript/mint-specific-nft/pages/api/data/nfts.json @@ -0,0 +1,26 @@ +[ + { + "id": 0, + "name": "NFT 1", + "description": "This is our first amazing NFT", + "url": "https://bafybeihgfxd5f5sqili34vyjyfai6kezlagrya43e6bkgw6hnxucxug5ya.ipfs.nftstorage.link/", + "price": 0.01, + "minted": false + }, + { + "id": 1, + "name": "NFT 2", + "description": "This is our second amazing NFT", + "url": "https://bafybeihgfxd5f5sqili34vyjyfai6kezlagrya43e6bkgw6hnxucxug5ya.ipfs.nftstorage.link/", + "price": 0.02, + "minted": false + }, + { + "id": 2, + "name": "NFT 3", + "description": "This is our third amazing NFT", + "url": "https://bafybeihgfxd5f5sqili34vyjyfai6kezlagrya43e6bkgw6hnxucxug5ya.ipfs.nftstorage.link/", + "price": 0.03, + "minted": false + } +] diff --git a/typescript/mint-specific-nft/pages/api/getNfts.ts b/typescript/mint-specific-nft/pages/api/getNfts.ts new file mode 100644 index 0000000..dcbd4a3 --- /dev/null +++ b/typescript/mint-specific-nft/pages/api/getNfts.ts @@ -0,0 +1,95 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import fs from 'fs'; +import { ThirdwebSDK } from '@thirdweb-dev/sdk'; +import { ethers } from 'ethers'; +import dotenv from 'dotenv'; + +dotenv.config(); + +export interface NFT { + id: number; + name: string; + description: string; + url: string; + price: number; + minted: boolean; +} + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse +) { + // Read and format the NFT data + const rawData = fs.readFileSync( + 'pages/api/data/nfts.json' + ) as unknown as string; + const nfts: NFT[] = JSON.parse(rawData); + + switch (req.method) { + case 'GET': + res.status(200).json(nfts); + break; + case 'POST': + // Get ID and address from request body and ensure that the requested NFT has not yet been minted + const { id, address } = req.body; + + if (nfts[id].minted === true) { + res.status(400).json({ message: 'Invalid request' }); + } + + // Connect to thirdweb SDK + const sdk = new ThirdwebSDK( + new ethers.Wallet( + // Your wallet private key + process.env.PRIVATE_KEY as string, + // RPC URL + ethers.getDefaultProvider( + 'https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161' + ) + ) + ); + + // Set variable for the NFT collection contract address which can be found after creating an NFT collection in the dashboard + const nftCollectionAddress = '0xB20B7AA964365A753Fb7412d98D76D139fd7Cbbd'; + + // Initialize the NFT collection with the contract address + const nftCollection = sdk.getNFTCollection(nftCollectionAddress); + + // Give 3 minutes to mint the NFT + const startTime = new Date(); + const endTime = new Date(Date.now() + 180 * 1000); + + // Set up the NFT metadata + const metadata = { + metadata: { + name: nfts[id].name, + description: nfts[id].description, + image: nfts[id].url, + }, + price: nfts[id].price, + mintStartTime: startTime, + mintEndTime: endTime, + to: address, + }; + + try { + const response = await nftCollection?.signature.generate(metadata); + + // Update the minted status of the NFT to true so that it can't be minted again + const newNFTs = nfts; + newNFTs[id].minted = true; + fs.writeFileSync('pages/api/data/nfts.json', JSON.stringify(newNFTs)); + + res.status(201).json({ + payload: response?.payload, + signature: response?.signature, + }); + } catch (error) { + res.status(500).json({ error }); + console.error(error); + } + break; + default: + res.status(200).json(nfts); + } +} diff --git a/typescript/mint-specific-nft/pages/index.tsx b/typescript/mint-specific-nft/pages/index.tsx new file mode 100644 index 0000000..cae9643 --- /dev/null +++ b/typescript/mint-specific-nft/pages/index.tsx @@ -0,0 +1,25 @@ +import { Flex, Heading, SimpleGrid } from '@chakra-ui/react'; +import { useAddress, useMetamask } from '@thirdweb-dev/react'; +import type { NextPage } from 'next'; +import Nfts from '../components/Nfts'; + +const Home: NextPage = () => { + // Use address and connect with metamask + const address = useAddress(); + const connectWithMetamask = useMetamask(); + + return ( +
+ {address ? ( + + Select an NFT to Mint + + + ) : ( + + )} +
+ ); +}; + +export default Home; diff --git a/typescript/mint-specific-nft/public/favicon.ico b/typescript/mint-specific-nft/public/favicon.ico new file mode 100644 index 0000000..81240f9 Binary files /dev/null and b/typescript/mint-specific-nft/public/favicon.ico differ diff --git a/typescript/mint-specific-nft/public/thirdweb.svg b/typescript/mint-specific-nft/public/thirdweb.svg new file mode 100644 index 0000000..86f54ec --- /dev/null +++ b/typescript/mint-specific-nft/public/thirdweb.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/typescript/mint-specific-nft/tsconfig.json b/typescript/mint-specific-nft/tsconfig.json new file mode 100644 index 0000000..99710e8 --- /dev/null +++ b/typescript/mint-specific-nft/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}