├── LICENSE ├── README.md ├── step00_hello_ethers ├── .gitignore ├── index.ts ├── package-lock.json ├── package.json ├── readme.md └── tsconfig.json ├── step01a_read_smart_contracts ├── .gitignore ├── index.ts ├── package-lock.json ├── package.json ├── readme.md └── tsconfig.json ├── step01b_read_smart_contracts ├── .gitignore ├── eth-sdk │ ├── abis │ │ └── mainnet │ │ │ └── dai.json │ └── eth-sdk.config.ts ├── index.ts ├── package-lock.json ├── package.json ├── readme.md └── tsconfig.json ├── step02_send_signed_transaction ├── .gitignore ├── index.ts ├── package-lock.json ├── package.json ├── readme.md └── tsconfig.json ├── step03a_write_contract ├── .gitignore ├── index.ts ├── package-lock.json ├── package.json ├── readme.md └── tsconfig.json ├── step03b_write_contract ├── .gitignore ├── eth-sdk │ ├── abis │ │ └── kovan │ │ │ └── ziaCoin.json │ └── eth-sdk.config.ts ├── index.ts ├── package-lock.json ├── package.json ├── readme.md ├── tsconfig.json └── yarn.lock ├── step04a_contract_event_stream ├── .gitignore ├── index.ts ├── package-lock.json ├── package.json ├── readme.md └── tsconfig.json ├── step04b_contract_event_stream ├── .gitignore ├── eth-sdk │ ├── abis │ │ └── kovan │ │ │ └── ziaCoin.json │ └── eth-sdk.config.ts ├── index.ts ├── package-lock.json ├── package.json ├── readme.md ├── tsconfig.json └── yarn.lock ├── step05_inspecting_blocks ├── .gitignore ├── index.ts ├── package-lock.json ├── package.json ├── readme.md └── tsconfig.json ├── step06_metamask_connect_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── component │ └── Metamask.tsx ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json ├── utils │ └── sign.ts └── yarn.lock ├── step07_web3model_connect_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json └── yarn.lock ├── step08_metamask_web3react_connect_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json └── yarn.lock ├── step09a_read_smart_contracts_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── component │ └── Metamask.tsx ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json ├── utils │ └── sign.ts └── yarn.lock ├── step09b_read_smart_contracts_with_ethsdk_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── component │ └── Metamask.tsx ├── eth-sdk │ ├── abis │ │ └── goerli │ │ │ └── dai.json │ └── eth-sdk.config.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json └── yarn.lock ├── step10_send_signed_transaction_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── component │ └── Metamask.tsx ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json ├── utils │ └── sign.ts └── yarn.lock ├── step11a_write_smart_contracts_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── component │ └── Metamask.tsx ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json ├── utils │ └── sign.ts └── yarn.lock ├── step11b_write_smart_contracts_with_ethsdk_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── component │ └── Metamask.tsx ├── eth-sdk │ ├── abis │ │ └── kovan │ │ │ └── ziaCoin.json │ └── eth-sdk.config.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json └── yarn.lock ├── step12_read_smart_contracts_events_nextjs ├── .eslintrc.json ├── .gitignore ├── README.md ├── component │ └── Metamask.tsx ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tsconfig.json └── yarn.lock ├── step13_simple_whitelist_nextjs_ethers_chakra ├── README.md ├── backend │ ├── .env.example │ ├── .gitignore │ ├── README.md │ ├── contracts │ │ └── Whitelist.sol │ ├── deploy │ │ ├── 01-deploy-contracts.ts │ │ └── 02-update-front-end.ts │ ├── deployments │ │ └── kovan │ │ │ ├── .chainId │ │ │ ├── Whitelist.json │ │ │ └── solcInputs │ │ │ └── bedbc87a0ee6e5ed270db0bb2dcbb593.json │ ├── hardhat.config.ts │ ├── helper-hardhat-config.js │ ├── package.json │ ├── scripts │ │ └── deploy.ts │ ├── test │ │ └── Lock.ts │ ├── tsconfig.json │ ├── utils │ │ └── verify.ts │ └── yarn.lock └── frontend │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx │ ├── public │ ├── favicon.ico │ ├── piaic.svg │ └── vercel.svg │ ├── styles │ ├── Home.module.css │ └── globals.css │ ├── tsconfig.json │ ├── types │ ├── Whitelist.ts │ ├── common.ts │ ├── factories │ │ ├── Whitelist__factory.ts │ │ └── index.ts │ ├── hardhat.d.ts │ └── index.ts │ ├── utils │ ├── abis.json │ └── contractAddresses.json │ └── yarn.lock ├── step14_voting_nextjs_ethers_chakra_hardhat ├── README.md ├── backend │ ├── .env.example │ ├── .gitignore │ ├── 4.5.0 │ ├── README.md │ ├── contracts │ │ └── Election.sol │ ├── deploy │ │ ├── 01-deploy-contracts.ts │ │ └── 02-update-front-end.ts │ ├── deployments │ │ └── kovan │ │ │ ├── .chainId │ │ │ ├── Election.json │ │ │ └── solcInputs │ │ │ ├── 3ce5810c6fd73228986f9e736133eca6.json │ │ │ ├── 6e8a54307aa60fc83d99194de31ece09.json │ │ │ ├── 89870340710635c21358672e9c765657.json │ │ │ └── a2e454a13433d2e59a298ac13537f197.json │ ├── hardhat.config.ts │ ├── helper-hardhat-config.js │ ├── package-lock.json │ ├── package.json │ ├── scripts │ │ └── deploy.ts │ ├── test │ │ └── election.test.ts │ ├── tsconfig.json │ ├── utils │ │ └── verify.ts │ └── yarn.lock └── frontend │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx │ ├── public │ ├── aaz.png │ ├── favicon.ico │ ├── ik.png │ ├── ns.png │ ├── pak.png │ ├── piaic.svg │ └── vercel.svg │ ├── styles │ ├── Home.module.css │ └── globals.css │ ├── tsconfig.json │ ├── types │ ├── Election.ts │ ├── common.ts │ ├── factories │ │ ├── Election__factory.ts │ │ └── index.ts │ ├── hardhat.d.ts │ └── index.ts │ ├── utils │ ├── abis.json │ └── contractAddresses.json │ └── yarn.lock ├── step15_nft_minting_nextjs__ethers_chakra_hardhat ├── README.md ├── backend │ ├── .env.example │ ├── .gitignore │ ├── 4.5.0 │ ├── README.md │ ├── contracts │ │ └── NFTContract.sol │ ├── deploy │ │ ├── 01-deploy-contracts.ts │ │ └── 02-update-front-end.ts │ ├── deployments │ │ ├── kovan │ │ │ ├── .chainId │ │ │ ├── Election.json │ │ │ ├── NFTContract.json │ │ │ └── solcInputs │ │ │ │ ├── 030136c1d514d2e1d4e3691c1e62f622.json │ │ │ │ ├── 3ce5810c6fd73228986f9e736133eca6.json │ │ │ │ ├── 6e8a54307aa60fc83d99194de31ece09.json │ │ │ │ ├── 78e99dbe9a395af380aa933da4c73678.json │ │ │ │ ├── 89870340710635c21358672e9c765657.json │ │ │ │ └── a2e454a13433d2e59a298ac13537f197.json │ │ ├── rinkeby │ │ │ ├── .chainId │ │ │ ├── NFTContract.json │ │ │ └── solcInputs │ │ │ │ └── 030136c1d514d2e1d4e3691c1e62f622.json │ │ └── ropsten │ │ │ ├── .chainId │ │ │ ├── NFTContract.json │ │ │ └── solcInputs │ │ │ └── 030136c1d514d2e1d4e3691c1e62f622.json │ ├── hardhat.config.ts │ ├── helper-hardhat-config.js │ ├── metadata │ │ ├── README.md │ │ ├── images │ │ │ ├── piaic1.svg │ │ │ ├── piaic2.svg │ │ │ └── piaic3.svg │ │ └── json │ │ │ ├── piaic1.json │ │ │ ├── piaic2.json │ │ │ └── piaic3.json │ ├── package-lock.json │ ├── package.json │ ├── scripts │ │ └── deploy.ts │ ├── test │ │ └── nftContract.test.ts │ ├── tsconfig.json │ ├── utils │ │ └── verify.ts │ └── yarn.lock └── frontend │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── index.tsx │ ├── public │ ├── aaz.png │ ├── favicon.ico │ ├── ik.png │ ├── ns.png │ ├── pak.png │ ├── piaic.svg │ └── vercel.svg │ ├── styles │ ├── Home.module.css │ └── globals.css │ ├── tsconfig.json │ ├── types │ ├── @openzeppelin │ │ ├── contracts │ │ │ ├── index.ts │ │ │ ├── token │ │ │ │ ├── ERC721 │ │ │ │ │ ├── ERC721.ts │ │ │ │ │ ├── IERC721.ts │ │ │ │ │ ├── IERC721Receiver.ts │ │ │ │ │ ├── extensions │ │ │ │ │ │ ├── ERC721Enumerable.ts │ │ │ │ │ │ ├── IERC721Enumerable.ts │ │ │ │ │ │ ├── IERC721Metadata.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ └── utils │ │ │ │ ├── index.ts │ │ │ │ └── introspection │ │ │ │ ├── ERC165.ts │ │ │ │ ├── IERC165.ts │ │ │ │ └── index.ts │ │ └── index.ts │ ├── Election.ts │ ├── common.ts │ ├── contracts │ │ ├── Election.sol │ │ │ ├── MyNFT.ts │ │ │ └── index.ts │ │ ├── NFTContract.ts │ │ └── index.ts │ ├── factories │ │ ├── @openzeppelin │ │ │ ├── contracts │ │ │ │ ├── index.ts │ │ │ │ ├── token │ │ │ │ │ ├── ERC721 │ │ │ │ │ │ ├── ERC721__factory.ts │ │ │ │ │ │ ├── IERC721Receiver__factory.ts │ │ │ │ │ │ ├── IERC721__factory.ts │ │ │ │ │ │ ├── extensions │ │ │ │ │ │ │ ├── ERC721Enumerable__factory.ts │ │ │ │ │ │ │ ├── IERC721Enumerable__factory.ts │ │ │ │ │ │ │ ├── IERC721Metadata__factory.ts │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── index.ts │ │ │ │ └── utils │ │ │ │ │ ├── index.ts │ │ │ │ │ └── introspection │ │ │ │ │ ├── ERC165__factory.ts │ │ │ │ │ ├── IERC165__factory.ts │ │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ ├── Election__factory.ts │ │ ├── contracts │ │ │ ├── Election.sol │ │ │ │ ├── MyNFT__factory.ts │ │ │ │ └── index.ts │ │ │ ├── NFTContract__factory.ts │ │ │ └── index.ts │ │ └── index.ts │ ├── hardhat.d.ts │ └── index.ts │ ├── utils │ ├── abis.json │ └── contractAddresses.json │ └── yarn.lock └── step16_nft_marketplace_nextjs_ethers_chakra_hardhat ├── README.md ├── backend ├── .env.example ├── .gitignore ├── 4.5.0 ├── README.md ├── contracts │ ├── NFTContract.sol │ └── NftMarketplace.sol ├── deploy │ ├── 01-deploy-contracts.ts │ └── 02-update-front-end.ts ├── deployments │ ├── localhost │ │ ├── .chainId │ │ ├── NFTContract.json │ │ └── NftMarketplace.json │ └── rinkeby │ │ ├── .chainId │ │ ├── NFTContract.json │ │ ├── NftMarketplace.json │ │ └── solcInputs │ │ ├── 030136c1d514d2e1d4e3691c1e62f622.json │ │ └── c22e45355d1bd38dbd5318c400c8590c.json ├── hardhat.config.ts ├── helper-hardhat-config.js ├── metadata │ ├── README.md │ ├── images │ │ ├── piaic1.svg │ │ ├── piaic2.svg │ │ └── piaic3.svg │ └── json │ │ ├── piaic1.json │ │ ├── piaic2.json │ │ └── piaic3.json ├── package-lock.json ├── package.json ├── scripts │ └── deploy.ts ├── test │ └── nftContract.test.ts ├── tsconfig.json ├── utils │ └── verify.ts └── yarn.lock └── frontend ├── .eslintrc.json ├── .gitignore ├── README.md ├── components ├── Footer │ └── index.tsx ├── Header │ └── index.tsx ├── Market │ ├── NFTCard.tsx │ └── index.tsx ├── MintSection │ ├── MintNFTCard.tsx │ └── index.tsx └── MyNFTs │ ├── NFTCard.tsx │ └── index.tsx ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── api │ └── hello.ts └── index.tsx ├── public ├── favicon.ico └── vercel.svg ├── styles ├── Home.module.css └── globals.css ├── tsconfig.json ├── types ├── @openzeppelin │ ├── contracts │ │ ├── index.ts │ │ ├── token │ │ │ ├── ERC721 │ │ │ │ ├── ERC721.ts │ │ │ │ ├── IERC721.ts │ │ │ │ ├── IERC721Receiver.ts │ │ │ │ ├── extensions │ │ │ │ │ ├── ERC721Enumerable.ts │ │ │ │ │ ├── IERC721Enumerable.ts │ │ │ │ │ ├── IERC721Metadata.ts │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ └── utils │ │ │ ├── index.ts │ │ │ └── introspection │ │ │ ├── ERC165.ts │ │ │ ├── IERC165.ts │ │ │ └── index.ts │ └── index.ts ├── common.ts ├── contracts │ ├── NFTContract.ts │ ├── NftMarketplace.ts │ └── index.ts ├── factories │ ├── @openzeppelin │ │ ├── contracts │ │ │ ├── index.ts │ │ │ ├── token │ │ │ │ ├── ERC721 │ │ │ │ │ ├── ERC721__factory.ts │ │ │ │ │ ├── IERC721Receiver__factory.ts │ │ │ │ │ ├── IERC721__factory.ts │ │ │ │ │ ├── extensions │ │ │ │ │ │ ├── ERC721Enumerable__factory.ts │ │ │ │ │ │ ├── IERC721Enumerable__factory.ts │ │ │ │ │ │ ├── IERC721Metadata__factory.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ └── utils │ │ │ │ ├── index.ts │ │ │ │ └── introspection │ │ │ │ ├── ERC165__factory.ts │ │ │ │ ├── IERC165__factory.ts │ │ │ │ └── index.ts │ │ └── index.ts │ ├── contracts │ │ ├── NFTContract__factory.ts │ │ ├── NftMarketplace__factory.ts │ │ └── index.ts │ └── index.ts ├── hardhat.d.ts └── index.ts ├── utils ├── abis.json └── contractAddresses.json └── yarn.lock /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Panacloud Multi-Cloud Internet-Scale Modern Global Apps 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Learn to Build dApps using Next.js and Ethers in Baby Steps 2 | 3 | This repo is part of the [Certified Web 3.0 and Metaverse Developer Training Program](https://www.panaverse.co/) 4 | 5 | ### Get started by learning Next.js from this [repo](https://github.com/panacloud-modern-global-apps/nextjs). 6 | 7 | ### Learn to build smart contracts using Solidity from this [repo](https://github.com/panacloud-modern-global-apps/defi-dapps-solidity-smart-contracts). 8 | -------------------------------------------------------------------------------- /step00_hello_ethers/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step00_hello_ethers/index.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'; 2 | 3 | const INFURA_ID: string = '' 4 | const provider: ethers.providers.JsonRpcProvider = new ethers.providers.JsonRpcProvider(`https://mainnet.infura.io/v3/${INFURA_ID}`) 5 | 6 | const address: string = '0x73BCEb1Cd57C711feaC4224D062b0F6ff338501e'; 7 | 8 | const main = async () => { 9 | const balance: ethers.BigNumber = await provider.getBalance(address); 10 | //console.log(balance); 11 | console.log(`\nETH Balance of ${address} --> ${ethers.utils.formatEther(balance)} ETH\n`); 12 | } 13 | 14 | main() -------------------------------------------------------------------------------- /step00_hello_ethers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /step00_hello_ethers/readme.md: -------------------------------------------------------------------------------- 1 | # Get account Balance using Ethers.js 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | Watch Video 00:00 to 23:00 6 | 7 | [Download and Install Node](https://nodejs.org/en/download/) 8 | 9 | Create an [Infura Account](https://infura.io/) 10 | 11 | Install Typescript: 12 | 13 | npm install -g typescript 14 | 15 | mkdir step00_hello_ethers 16 | 17 | npm init 18 | 19 | npm i ethers 20 | 21 | tsc --init 22 | 23 | Create index.ts file 24 | 25 | tsc 26 | 27 | ts-node index 28 | 29 | -------------------------------------------------------------------------------- /step01a_read_smart_contracts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step01a_read_smart_contracts/index.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'; 2 | 3 | const INFURA_ID: string = '' 4 | const provider: ethers.providers.JsonRpcProvider = new ethers.providers.JsonRpcProvider(`https://mainnet.infura.io/v3/${INFURA_ID}`); 5 | 6 | const ERC20_ABI = [ 7 | "function name() view returns (string)", 8 | "function symbol() view returns (string)", 9 | "function totalSupply() view returns (uint256)", 10 | "function balanceOf(address) view returns (uint)", 11 | ]; 12 | 13 | const address: string = '0x6B175474E89094C44Da98b954EedeAC495271d0F' // DAI Contract 14 | const contract: ethers.Contract = new ethers.Contract(address, ERC20_ABI, provider) 15 | 16 | const main = async () => { 17 | const name: string = await contract.name() 18 | const symbol: string = await contract.symbol() 19 | const totalSupply: ethers.BigNumber = await contract.totalSupply() 20 | 21 | console.log(`\nReading from ${address}\n`) 22 | console.log(`Name: ${name}`) 23 | console.log(`Symbol: ${symbol}`) 24 | console.log(`Total Supply: ${totalSupply}\n`) 25 | 26 | const balance: ethers.BigNumber = await contract.balanceOf('0x6c6Bc977E13Df9b0de53b251522280BB72383700') 27 | 28 | console.log(`Balance Returned: ${balance}`) 29 | console.log(`Balance Formatted: ${ethers.utils.formatEther(balance)}\n`) 30 | } 31 | 32 | main() 33 | 34 | -------------------------------------------------------------------------------- /step01a_read_smart_contracts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /step01a_read_smart_contracts/readme.md: -------------------------------------------------------------------------------- 1 | # Connect to Samart Contracts using Ethers.js 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | Watch Video 23:30 to 37:25 6 | 7 | [Download and Install Node](https://nodejs.org/en/download/) 8 | 9 | Create an [Infura Account](https://infura.io/) 10 | 11 | Install Typescript: 12 | 13 | npm install -g typescript 14 | 15 | mkdir step01_read_smart_contracts 16 | 17 | npm init 18 | 19 | npm i ethers 20 | 21 | Now Generate the tscofig.json file: 22 | 23 | tsc --init 24 | 25 | Create index.ts file 26 | 27 | tsc 28 | 29 | ts-node index 30 | 31 | -------------------------------------------------------------------------------- /step01b_read_smart_contracts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step01b_read_smart_contracts/eth-sdk/eth-sdk.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@dethcrypto/eth-sdk' 2 | 3 | export default defineConfig({ 4 | contracts: { 5 | mainnet: { 6 | dai: '0x6b175474e89094c44da98b954eedeac495271d0f', 7 | }, 8 | }, 9 | }) -------------------------------------------------------------------------------- /step01b_read_smart_contracts/index.ts: -------------------------------------------------------------------------------- 1 | 2 | import { getMainnetSdk } from '@dethcrypto/eth-sdk-client' // yay, our SDK! It's tailored especially for our needs 3 | import { BigNumber, ethers } from 'ethers' 4 | 5 | async function main() { 6 | const mainnetProvider = ethers.getDefaultProvider('mainnet') 7 | const defaultSigner = ethers.Wallet.createRandom().connect(mainnetProvider) 8 | 9 | const sdk = getMainnetSdk(defaultSigner) // default signer will be wired with all contract instances 10 | // sdk is an object like { dai: DaiContract } 11 | 12 | const name: string = await sdk.dai.name() 13 | const symbol: string = await sdk.dai.symbol() 14 | const totalSupply: ethers.BigNumber = await sdk.dai.totalSupply() 15 | 16 | console.log(`Name: ${name}`) 17 | console.log(`Symbol: ${symbol}`) 18 | console.log(`Total Supply: ${totalSupply}\n`) 19 | 20 | const balance1: BigNumber = await sdk.dai.balanceOf(defaultSigner.address); 21 | 22 | console.log(`Balance1 Returned: ${balance1}`) 23 | console.log(`Balance1 Formatted: ${ethers.utils.formatEther(balance1)}\n`) 24 | 25 | const balance2: BigNumber = await sdk.dai.balanceOf('0x6c6Bc977E13Df9b0de53b251522280BB72383700'); 26 | 27 | console.log(`Balance2 Returned: ${balance2}`) 28 | console.log(`Balance2 Formatted: ${ethers.utils.formatEther(balance2)}\n`) 29 | } 30 | 31 | main() 32 | .then(() => console.log('DONE')) 33 | .catch((error) => { 34 | console.error(error) 35 | process.exit(1) 36 | }) 37 | -------------------------------------------------------------------------------- /step01b_read_smart_contracts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | }, 14 | "devDependencies": { 15 | "@dethcrypto/eth-sdk": "^0.3.3", 16 | "@dethcrypto/eth-sdk-client": "^0.1.6", 17 | "typescript": "^4.7.4", 18 | "ts-node": "^10.9.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /step02_send_signed_transaction/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step02_send_signed_transaction/index.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'); 2 | 3 | const INFURA_ID: string = '' // for a test network 4 | const provider: ethers.providers.JsonRpcProvider = new ethers.providers.JsonRpcProvider(`https://kovan.infura.io/v3/${INFURA_ID}`) 5 | 6 | const account1: string = '' // Your account address 1 7 | const account2: strkng = '' // Your account address 2 8 | 9 | const privateKey1: string = '' // Private key of account 1 10 | const wallet: ethers.Wallet = new ethers.Wallet(privateKey1, provider) 11 | 12 | const main = async () => { 13 | const senderBalanceBefore: ethers.BigNumber = await provider.getBalance(account1) 14 | const recieverBalanceBefore: ethers.BigNumber = await provider.getBalance(account2) 15 | 16 | console.log(`\nSender balance before: ${ethers.utils.formatEther(senderBalanceBefore)}`) 17 | console.log(`reciever balance before: ${ethers.utils.formatEther(recieverBalanceBefore)}\n`) 18 | 19 | const tx: ethers.providers.TransactionResponse = await wallet.sendTransaction({ 20 | to: account2, 21 | value: ethers.utils.parseEther("0.025") 22 | }) 23 | 24 | await tx.wait() //waiting for it to be mined 25 | console.log(tx) 26 | 27 | const senderBalanceAfter: ethers.BigNumber = await provider.getBalance(account1) 28 | const recieverBalanceAfter: ethers.BigNumber = await provider.getBalance(account2) 29 | 30 | console.log(`\nSender balance after: ${ethers.utils.formatEther(senderBalanceAfter)}`) 31 | console.log(`reciever balance after: ${ethers.utils.formatEther(recieverBalanceAfter)}\n`) 32 | } 33 | 34 | main() -------------------------------------------------------------------------------- /step02_send_signed_transaction/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /step02_send_signed_transaction/readme.md: -------------------------------------------------------------------------------- 1 | # Send Signed Transaction 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | Watch Video 37:00 to 53:00 6 | 7 | [Download and Install Node](https://nodejs.org/en/download/) 8 | 9 | Create an [Infura Account](https://infura.io/) 10 | 11 | Install Typescript: 12 | 13 | npm install -g typescript 14 | 15 | mkdir step02_send_signed_transaction 16 | 17 | npm init 18 | 19 | npm i ethers 20 | 21 | tsc --init 22 | 23 | Create index.ts file 24 | 25 | tsc 26 | 27 | ts-node index 28 | 29 | -------------------------------------------------------------------------------- /step03a_write_contract/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step03a_write_contract/index.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'; 2 | import {TransactionResponse} from '@ethersproject' 3 | 4 | const INFURA_ID: string = '' 5 | const provider: ethers.providers.JsonRpcProvider = new ethers.providers.JsonRpcProvider(`https://kovan.infura.io/v3/${INFURA_ID}`) 6 | 7 | const account1: string = '' // Your account address 1 8 | const account2: string = '' // Your account address 2 9 | 10 | const privateKey1: string = '' // Private key of account 1 11 | const wallet: ethers.Wallet = new ethers.Wallet(privateKey1, provider) 12 | 13 | const ERC20_ABI = [ 14 | "function balanceOf(address) view returns (uint)", 15 | "function transfer(address to, uint amount) returns (bool)", 16 | ]; 17 | 18 | const address: string = '' 19 | const contract: ethers.Contract = new ethers.Contract(address, ERC20_ABI, provider) 20 | 21 | const main = async () => { 22 | const balance: ethers.BigNumber = await contract.balanceOf(account1) 23 | 24 | console.log(`\nReading from ${address}\n`) 25 | console.log(`Balance of sender: ${balance}\n`) 26 | 27 | const contractWithWallet: ethers.Contract = contract.connect(wallet) 28 | 29 | const tx = await contractWithWallet.transfer(account2, balance) 30 | await tx.wait() 31 | 32 | console.log(tx) 33 | 34 | const balanceOfSender: ethers.BigNumber = await contract.balanceOf(account1) 35 | const balanceOfReciever: ethers.BigNumber = await contract.balanceOf(account2) 36 | 37 | console.log(`\nBalance of sender: ${balanceOfSender}`) 38 | console.log(`Balance of reciever: ${balanceOfReciever}\n`) 39 | } 40 | 41 | main() -------------------------------------------------------------------------------- /step03a_write_contract/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /step03a_write_contract/readme.md: -------------------------------------------------------------------------------- 1 | # Write to Smart Contracts using Ethers.js 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | Watch Video 53:00 to 1:05:00 6 | 7 | [Download and Install Node](https://nodejs.org/en/download/) 8 | 9 | Create an [Infura Account](https://infura.io/) 10 | 11 | Install Typescript: 12 | 13 | npm install -g typescript 14 | 15 | mkdir step03a_write_contract 16 | 17 | npm init 18 | 19 | npm i ethers 20 | 21 | tsc --init 22 | 23 | Create index.ts file 24 | 25 | tsc 26 | 27 | ts-node index 28 | 29 | -------------------------------------------------------------------------------- /step03b_write_contract/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step03b_write_contract/eth-sdk/eth-sdk.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@dethcrypto/eth-sdk' 2 | 3 | export default defineConfig({ 4 | contracts: { 5 | kovan: { 6 | ziaCoin: '0xCBd02Df08BBa5b8ea2fA187ED20756FBEF5FCd3f', 7 | }, 8 | }, 9 | }) -------------------------------------------------------------------------------- /step03b_write_contract/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | }, 14 | "devDependencies": { 15 | "@dethcrypto/eth-sdk": "^0.3.3", 16 | "@dethcrypto/eth-sdk-client": "^0.1.6", 17 | "typescript": "^4.7.4", 18 | "ts-node": "^10.9.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /step03b_write_contract/readme.md: -------------------------------------------------------------------------------- 1 | # Write to Smart Contracts using Ethers.js and eth-sdk 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | [Download and Install Node](https://nodejs.org/en/download/) 6 | 7 | Create an [Infura Account](https://infura.io/) 8 | 9 | Install Typescript: 10 | 11 | npm install -g typescript 12 | 13 | mkdir step03a_write_contract 14 | 15 | npm init 16 | 17 | npm i ethers 18 | 19 | tsc --init 20 | 21 | Create index.ts file 22 | 23 | tsc 24 | 25 | ts-node index 26 | 27 | -------------------------------------------------------------------------------- /step04a_contract_event_stream/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step04a_contract_event_stream/index.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'; 2 | 3 | const INFURA_ID = '' 4 | const provider: ethers.providers.JsonRpcProvider = new ethers.providers.JsonRpcProvider(`https://mainnet.infura.io/v3/${INFURA_ID}`) 5 | 6 | const ERC20_ABI = [ 7 | "function name() view returns (string)", 8 | "function symbol() view returns (string)", 9 | "function totalSupply() view returns (uint256)", 10 | "function balanceOf(address) view returns (uint)", 11 | 12 | "event Transfer(address indexed from, address indexed to, uint amount)" 13 | ]; 14 | 15 | const address: string = '0x6B175474E89094C44Da98b954EedeAC495271d0F' // DAI Contract 16 | const contract: ethers.Contract = new ethers.Contract(address, ERC20_ABI, provider) 17 | 18 | const main = async () => { 19 | const block: number = await provider.getBlockNumber() 20 | 21 | const transferEvents: ethers.Event[] = await contract.queryFilter(contract.filters.Transfer(), block - 1, block); 22 | console.log(transferEvents) 23 | } 24 | 25 | main() 26 | 27 | -------------------------------------------------------------------------------- /step04a_contract_event_stream/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /step04a_contract_event_stream/readme.md: -------------------------------------------------------------------------------- 1 | # Contract Event Streams using Ethers.js 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | Watch Video 1:05:00 to 1:17:15 6 | 7 | [Download and Install Node](https://nodejs.org/en/download/) 8 | 9 | Create an [Infura Account](https://infura.io/) 10 | 11 | Install Typescript: 12 | 13 | npm install -g typescript 14 | 15 | mkdir step00_hello_ethers 16 | 17 | npm init 18 | 19 | npm i ethers 20 | 21 | tsc --init 22 | 23 | Create index.ts file 24 | 25 | tsc 26 | 27 | ts-node index 28 | 29 | -------------------------------------------------------------------------------- /step04b_contract_event_stream/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step04b_contract_event_stream/eth-sdk/eth-sdk.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@dethcrypto/eth-sdk' 2 | 3 | export default defineConfig({ 4 | contracts: { 5 | kovan: { 6 | ziaCoin: '0xCBd02Df08BBa5b8ea2fA187ED20756FBEF5FCd3f', 7 | }, 8 | }, 9 | }) -------------------------------------------------------------------------------- /step04b_contract_event_stream/index.ts: -------------------------------------------------------------------------------- 1 | import { getKovanSdk } from '@dethcrypto/eth-sdk-client' // yay, our SDK! It's tailored especially for our needs 2 | import { BigNumber, ethers } from 'ethers' 3 | 4 | 5 | const testnetProvider = ethers.getDefaultProvider('kovan') 6 | const privateKey1: string = '' // Private key of account 1 7 | const wallet: ethers.Wallet = new ethers.Wallet(privateKey1, testnetProvider) 8 | 9 | 10 | async function main() { 11 | 12 | const sdk = getKovanSdk(wallet) // default signer will be wired with all contract instances 13 | 14 | const name: string = await sdk.ziaCoin.name() 15 | const symbol: string = await sdk.ziaCoin.symbol() 16 | const decimals: number = await sdk.ziaCoin.decimals() 17 | const totalSupply: ethers.BigNumber = await sdk.ziaCoin.totalSupply() 18 | 19 | 20 | /* Token information */ 21 | 22 | console.log(`Name: ${name}`) 23 | console.log(`Symbol: ${symbol}`) 24 | console.log(`Decimal: ${decimals}`) 25 | console.log(`Total Supply: ${totalSupply}\n`) 26 | 27 | 28 | /* Mint Tokens to read tranfer event later */ 29 | 30 | const tx = await sdk.ziaCoin.mint(wallet.address, ethers.utils.parseEther("100")); 31 | await tx.wait(1); 32 | 33 | 34 | const block: number = await testnetProvider.getBlockNumber() 35 | 36 | const transferEvents: ethers.Event[] = await sdk.ziaCoin.queryFilter(sdk.ziaCoin.filters.Transfer(), block - 1, block); 37 | console.log(transferEvents) 38 | 39 | 40 | } 41 | 42 | main() 43 | .then(() => console.log('DONE')) 44 | .catch((error) => { 45 | console.error(error) 46 | process.exit(1) 47 | }) 48 | -------------------------------------------------------------------------------- /step04b_contract_event_stream/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | }, 14 | "devDependencies": { 15 | "@dethcrypto/eth-sdk": "^0.3.3", 16 | "@dethcrypto/eth-sdk-client": "^0.1.6", 17 | "typescript": "^4.7.4", 18 | "ts-node": "^10.9.1" 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /step04b_contract_event_stream/readme.md: -------------------------------------------------------------------------------- 1 | # Contract Event Streams using Ethers.js and eth-sdk 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | [Download and Install Node](https://nodejs.org/en/download/) 6 | 7 | Create an [Infura Account](https://infura.io/) 8 | 9 | Install Typescript: 10 | 11 | npm install -g typescript 12 | 13 | mkdir step00_hello_ethers 14 | 15 | npm init 16 | 17 | npm i ethers 18 | 19 | tsc --init 20 | 21 | Create index.ts file 22 | 23 | tsc 24 | 25 | ts-node index 26 | 27 | -------------------------------------------------------------------------------- /step05_inspecting_blocks/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **.js -------------------------------------------------------------------------------- /step05_inspecting_blocks/index.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from 'ethers'; 2 | 3 | const INFURA_ID: string = '' 4 | const provider: ethers.providers.JsonRpcProvider = new ethers.providers.JsonRpcProvider(`https://mainnet.infura.io/v3/${INFURA_ID}`) 5 | 6 | const address: string = '0x73BCEb1Cd57C711feaC4224D062b0F6ff338501e'; 7 | 8 | const main = async () => { 9 | 10 | const block: number = await provider.getBlockNumber(); 11 | 12 | console.log(`\nBlock Number: ${block}\n`); 13 | 14 | const blockInfo: ethers.providers.Block = await provider.getBlock(block); 15 | 16 | console.log(blockInfo); 17 | 18 | const { transactions } = await provider.getBlockWithTransactions(block); 19 | 20 | console.log(`\nLogging first transaction in block:\n`) 21 | console.log(transactions[0]) 22 | } 23 | 24 | main() -------------------------------------------------------------------------------- /step05_inspecting_blocks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_hello_ethers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ethers": "^5.6.9" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /step05_inspecting_blocks/readme.md: -------------------------------------------------------------------------------- 1 | # Get account Balance using Ethers.js 2 | 3 | To get a initial understanding of Ethers we are going to follow [Master Ethers.js for Blockchain Step-by-Step](https://www.youtube.com/watch?v=yk7nVp5HTCk) 4 | 5 | Watch Video 1:17:00 to the end 6 | 7 | [Download and Install Node](https://nodejs.org/en/download/) 8 | 9 | Create an [Infura Account](https://infura.io/) 10 | 11 | Install Typescript: 12 | 13 | npm install -g typescript 14 | 15 | mkdir step00_hello_ethers 16 | 17 | npm init 18 | 19 | npm i ethers 20 | 21 | tsc --init 22 | 23 | Create index.ts file 24 | 25 | tsc 26 | 27 | ts-node index 28 | 29 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/component/Metamask.tsx: -------------------------------------------------------------------------------- 1 | import type { NextComponentType, NextPageContext } from "next"; 2 | 3 | interface Props {} 4 | 5 | const Metamask: NextComponentType = (props: Props) => { 6 | return ( 7 |
17 |

18 | {" "} 19 | It apprears that Metamask is not installed,
20 | Download Metamask to continue. 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Metamask; -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_metamask_connect", 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 | "ethers": "^5.6.9", 13 | "next": "12.2.2", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "18.0.5", 19 | "@types/react": "18.0.15", 20 | "@types/react-dom": "18.0.6", 21 | "eslint": "8.19.0", 22 | "eslint-config-next": "12.2.2", 23 | "typescript": "4.7.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step06_metamask_connect_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step06_metamask_connect_nextjs/utils/sign.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | 3 | export const signMessage = () => { 4 | const provider = new ethers.providers.Web3Provider((window as any).ethereum); 5 | const signer = provider.getSigner(); 6 | 7 | try { 8 | signer.signMessage("Hello World").then((result) => { 9 | console.log(result); 10 | }); 11 | } catch (error) { 12 | // handle error 13 | console.log(error); 14 | } 15 | }; -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/.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 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step07_web3model_connect_nextjs", 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 | "@walletconnect/web3-provider": "^1.7.8", 13 | "ethers": "^5.6.9", 14 | "next": "12.2.3", 15 | "react": "18.2.0", 16 | "react-dom": "18.2.0", 17 | "web3modal": "^1.9.8" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "18.6.3", 21 | "@types/react": "18.0.15", 22 | "@types/react-dom": "18.0.6", 23 | "eslint": "8.21.0", 24 | "eslint-config-next": "12.2.3", 25 | "typescript": "4.7.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step07_web3model_connect_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step07_web3model_connect_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step09_metamask_web3react_connect_nextjs", 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 | "@ethersproject/providers": "^5.6.8", 13 | "@web3-react/core": "^6.1.9", 14 | "@web3-react/injected-connector": "^6.0.7", 15 | "next": "12.2.3", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "18.6.3", 21 | "@types/react": "18.0.15", 22 | "@types/react-dom": "18.0.6", 23 | "eslint": "8.21.0", 24 | "eslint-config-next": "12.2.3", 25 | "typescript": "4.7.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | import { Web3ReactProvider } from "@web3-react/core"; 4 | import { Web3Provider, ExternalProvider } from "@ethersproject/providers"; 5 | 6 | const getLibrary = (provider: ExternalProvider) => { 7 | return new Web3Provider(provider); 8 | }; 9 | 10 | function MyApp({ Component, pageProps }: AppProps) { 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default MyApp 19 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { useWeb3React } from "@web3-react/core"; 2 | import { InjectedConnector } from "@web3-react/injected-connector"; 3 | import { useState, useEffect } from "react"; 4 | 5 | declare global { 6 | interface Window { 7 | ethereum: any 8 | } 9 | } 10 | 11 | const injected = new InjectedConnector({ 12 | supportedChainIds: [1, 3, 4, 5, 42] 13 | }); 14 | 15 | export default function Home() { 16 | const [hasMetamask, setHasMetamask] = useState(false); 17 | 18 | useEffect(() => { 19 | if (typeof window.ethereum !== "undefined") { 20 | setHasMetamask(true); 21 | } 22 | }); 23 | 24 | const { 25 | active, 26 | activate, 27 | deactivate, 28 | chainId, 29 | account, 30 | library: provider, 31 | } = useWeb3React(); 32 | 33 | async function connect() { 34 | if (typeof window.ethereum !== "undefined") { 35 | try { 36 | await activate(injected); 37 | setHasMetamask(true); 38 | } catch (e) { 39 | console.log(e); 40 | } 41 | } 42 | } 43 | 44 | const disconnect = async () => { 45 | deactivate(); 46 | 47 | } 48 | 49 | return ( 50 |
51 |

@web3-react/core Library is Awesome

52 | 53 | {hasMetamask ? ( 54 | active ? ( 55 | <> 56 | Connected with address: {account}
57 | 58 | 59 | ) : ( 60 | 61 | ) 62 | ) : ( 63 | "Please install metamask" 64 | )} 65 | 66 |
67 | ); 68 | } 69 | 70 | 71 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step08_metamask_web3react_connect_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step08_metamask_web3react_connect_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/component/Metamask.tsx: -------------------------------------------------------------------------------- 1 | import type { NextComponentType, NextPageContext } from "next"; 2 | 3 | interface Props {} 4 | 5 | const Metamask: NextComponentType = (props: Props) => { 6 | return ( 7 |
17 |

18 | {" "} 19 | It apprears that Metamask is not installed,
20 | Download Metamask to continue. 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Metamask; -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_metamask_connect", 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 | "ethers": "^5.6.9", 13 | "next": "12.2.2", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "18.0.5", 19 | "@types/react": "18.0.15", 20 | "@types/react-dom": "18.0.6", 21 | "eslint": "8.19.0", 22 | "eslint-config-next": "12.2.2", 23 | "typescript": "4.7.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step09a_read_smart_contracts_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step09a_read_smart_contracts_nextjs/utils/sign.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | 3 | export const signMessage = () => { 4 | const provider = new ethers.providers.Web3Provider((window as any).ethereum); 5 | const signer = provider.getSigner(); 6 | 7 | try { 8 | signer.signMessage("Hello World").then((result) => { 9 | console.log(result); 10 | }); 11 | } catch (error) { 12 | // handle error 13 | console.log(error); 14 | } 15 | }; -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/component/Metamask.tsx: -------------------------------------------------------------------------------- 1 | import type { NextComponentType, NextPageContext } from "next"; 2 | 3 | interface Props {} 4 | 5 | const Metamask: NextComponentType = (props: Props) => { 6 | return ( 7 |
17 |

18 | {" "} 19 | It apprears that Metamask is not installed,
20 | Download Metamask to continue. 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Metamask; -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/eth-sdk/eth-sdk.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@dethcrypto/eth-sdk' 2 | 3 | export default defineConfig({ 4 | contracts: { 5 | goerli: { 6 | dai: '0x97cb342Cf2F6EcF48c1285Fb8668f5a4237BF862', 7 | }, 8 | }, 9 | }) 10 | 11 | // const address: string = '0x97cb342Cf2F6EcF48c1285Fb8668f5a4237BF862'; // DAI Contract https://goerli.etherscan.io/address/0x97cb342Cf2F6EcF48c1285Fb8668f5a4237BF862 12 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step09b_read_smart_contracts_with_ethsdk_nextjs", 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 | "ethers": "^5.6.9", 13 | "next": "12.2.4", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@dethcrypto/eth-sdk": "^0.3.3", 19 | "@dethcrypto/eth-sdk-client": "^0.1.6", 20 | "@types/node": "18.6.4", 21 | "@types/react": "18.0.15", 22 | "@types/react-dom": "18.0.6", 23 | "eslint": "8.21.0", 24 | "eslint-config-next": "12.2.4", 25 | "ts-node": "^10.9.1", 26 | "typescript": "4.7.4" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step09b_read_smart_contracts_with_ethsdk_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step09b_read_smart_contracts_with_ethsdk_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/component/Metamask.tsx: -------------------------------------------------------------------------------- 1 | import type { NextComponentType, NextPageContext } from "next"; 2 | 3 | interface Props {} 4 | 5 | const Metamask: NextComponentType = (props: Props) => { 6 | return ( 7 |
17 |

18 | {" "} 19 | It apprears that Metamask is not installed,
20 | Download Metamask to continue. 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Metamask; -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_metamask_connect", 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 | "@chakra-ui/icons": "^2.0.4", 13 | "@chakra-ui/react": "^2.2.4", 14 | "@emotion/react": "^11", 15 | "@emotion/styled": "^11", 16 | "ethers": "^5.6.9", 17 | "framer-motion": "^4", 18 | "next": "12.2.2", 19 | "react": "18.2.0", 20 | "react-dom": "18.2.0" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "18.0.5", 24 | "@types/react": "18.0.15", 25 | "@types/react-dom": "18.0.6", 26 | "eslint": "8.19.0", 27 | "eslint-config-next": "12.2.2", 28 | "typescript": "4.7.4" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css'; 2 | import type { AppProps } from 'next/app'; 3 | import { ChakraProvider, extendTheme } from '@chakra-ui/react'; 4 | 5 | function MyApp({ Component, pageProps }: AppProps) { 6 | return 7 | } 8 | 9 | export default MyApp 10 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step10_send_signed_transaction_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step10_send_signed_transaction_nextjs/utils/sign.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | 3 | export const signMessage = () => { 4 | const provider = new ethers.providers.Web3Provider((window as any).ethereum); 5 | const signer = provider.getSigner(); 6 | 7 | try { 8 | signer.signMessage("Hello World").then((result) => { 9 | console.log(result); 10 | }); 11 | } catch (error) { 12 | // handle error 13 | console.log(error); 14 | } 15 | }; -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/component/Metamask.tsx: -------------------------------------------------------------------------------- 1 | import type { NextComponentType, NextPageContext } from "next"; 2 | 3 | interface Props {} 4 | 5 | const Metamask: NextComponentType = (props: Props) => { 6 | return ( 7 |
17 |

18 | {" "} 19 | It apprears that Metamask is not installed,
20 | Download Metamask to continue. 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Metamask; -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step00_metamask_connect", 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 | "ethers": "^5.6.9", 13 | "next": "12.2.2", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "18.0.5", 19 | "@types/react": "18.0.15", 20 | "@types/react-dom": "18.0.6", 21 | "eslint": "8.19.0", 22 | "eslint-config-next": "12.2.2", 23 | "typescript": "4.7.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step11a_write_smart_contracts_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step11a_write_smart_contracts_nextjs/utils/sign.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | 3 | export const signMessage = () => { 4 | const provider = new ethers.providers.Web3Provider((window as any).ethereum); 5 | const signer = provider.getSigner(); 6 | 7 | try { 8 | signer.signMessage("Hello World").then((result) => { 9 | console.log(result); 10 | }); 11 | } catch (error) { 12 | // handle error 13 | console.log(error); 14 | } 15 | }; -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/component/Metamask.tsx: -------------------------------------------------------------------------------- 1 | import type { NextComponentType, NextPageContext } from "next"; 2 | 3 | interface Props {} 4 | 5 | const Metamask: NextComponentType = (props: Props) => { 6 | return ( 7 |
17 |

18 | {" "} 19 | It apprears that Metamask is not installed,
20 | Download Metamask to continue. 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Metamask; -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/eth-sdk/eth-sdk.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@dethcrypto/eth-sdk' 2 | 3 | export default defineConfig({ 4 | contracts: { 5 | kovan: { 6 | ziaCoin: '0xCBd02Df08BBa5b8ea2fA187ED20756FBEF5FCd3f', 7 | }, 8 | }, 9 | }) -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step09b_read_smart_contracts_with_ethsdk_nextjs", 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 | "ethers": "^5.6.9", 13 | "next": "12.2.4", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@dethcrypto/eth-sdk": "^0.3.3", 19 | "@dethcrypto/eth-sdk-client": "^0.1.6", 20 | "@types/node": "18.6.4", 21 | "@types/react": "18.0.15", 22 | "@types/react-dom": "18.0.6", 23 | "eslint": "8.21.0", 24 | "eslint-config-next": "12.2.4", 25 | "ts-node": "^10.9.1", 26 | "typescript": "4.7.4" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step11b_write_smart_contracts_with_ethsdk_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step11b_write_smart_contracts_with_ethsdk_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/component/Metamask.tsx: -------------------------------------------------------------------------------- 1 | import type { NextComponentType, NextPageContext } from "next"; 2 | 3 | interface Props {} 4 | 5 | const Metamask: NextComponentType = (props: Props) => { 6 | return ( 7 |
17 |

18 | {" "} 19 | It apprears that Metamask is not installed,
20 | Download Metamask to continue. 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Metamask; -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: false, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step12", 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 | "next": "12.2.4", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0", 15 | "ethers": "^5.6.9" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "18.6.4", 19 | "@types/react": "18.0.15", 20 | "@types/react-dom": "18.0.6", 21 | "eslint": "8.21.0", 22 | "eslint-config-next": "12.2.4", 23 | "typescript": "4.7.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step12_read_smart_contracts_events_nextjs/public/favicon.ico -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step12_read_smart_contracts_events_nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/.env.example: -------------------------------------------------------------------------------- 1 | KOVAN_RPC_URL= 2 | PRIVATE_KEY= 3 | ETHERSCAN_API_KEY= 4 | UPDATE_FRONT_END=true -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env 3 | coverage 4 | coverage.json 5 | typechain 6 | typechain-types 7 | 8 | #Hardhat files 9 | cache 10 | artifacts 11 | 12 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/README.md: -------------------------------------------------------------------------------- 1 | # Sample Hardhat Project 2 | 3 | This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, and a script that deploys that contract. 4 | 5 | Try running some of the following tasks: 6 | 7 | ```shell 8 | npx hardhat help 9 | npx hardhat test 10 | GAS_REPORT=true npx hardhat test 11 | npx hardhat node 12 | npx hardhat run scripts/deploy.ts 13 | ``` 14 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/deploy/01-deploy-contracts.ts: -------------------------------------------------------------------------------- 1 | import {network} from "hardhat"; 2 | import {HardhatRuntimeEnvironment} from "hardhat/types"; 3 | import {verify} from "../utils/verify" 4 | 5 | function sleep(ms: number) { 6 | return new Promise(resolve => setTimeout(resolve, ms)); 7 | } 8 | 9 | module.exports = async ({getNamedAccounts, deployments}: HardhatRuntimeEnvironment) => { 10 | const { deploy, log } = deployments 11 | const {deployer} = await getNamedAccounts() 12 | const chainId = network.config.chainId; 13 | 14 | console.log("chainId: ", chainId); 15 | console.log("deployer: ", deployer); 16 | 17 | if (chainId == 31337) { 18 | // deploying contract 19 | const args = [250]; 20 | await deploy("Whitelist", { 21 | from: deployer, 22 | args: args, 23 | log: true, 24 | }) 25 | log("Whitelist contract deployed on local blockchian!") 26 | 27 | } 28 | else { 29 | // deploying contract 30 | const args = [250]; 31 | const whitelist = await deploy("Whitelist", { 32 | from: deployer, 33 | args: args, 34 | log: true, 35 | }) 36 | log("Whitelist contract deployed on testnet!") 37 | await verify(whitelist.address, args) 38 | } 39 | 40 | 41 | } -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/deploy/02-update-front-end.ts: -------------------------------------------------------------------------------- 1 | import { deployments, ethers } from "hardhat" 2 | 3 | const { frontEndContractsFile, frontEndAbiFile } = require("../helper-hardhat-config") 4 | const fs = require("fs") 5 | 6 | module.exports = async () => { 7 | if (process.env.UPDATE_FRONT_END) { 8 | console.log("") 9 | console.log("Writing to front end...") 10 | await updateContractAddresses() 11 | await updateAbi() 12 | console.log("Front end written!") 13 | } 14 | } 15 | 16 | async function updateAbi() { 17 | const whitelistContract = await deployments.get("Whitelist"); 18 | fs.writeFileSync(frontEndAbiFile, JSON.stringify(whitelistContract.abi)) 19 | } 20 | 21 | async function updateContractAddresses() { 22 | const whitelistContract = await deployments.get("Whitelist"); 23 | const contractAddresses = JSON.parse(fs.readFileSync(frontEndContractsFile, "utf8")) 24 | contractAddresses["whitelist"] = whitelistContract.address 25 | fs.writeFileSync(frontEndContractsFile, JSON.stringify(contractAddresses)) 26 | } 27 | 28 | module.exports.tags = ["all", "frontend"] 29 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/deployments/kovan/.chainId: -------------------------------------------------------------------------------- 1 | 42 -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/hardhat.config.ts: -------------------------------------------------------------------------------- 1 | import "@nomicfoundation/hardhat-toolbox"; 2 | import "hardhat-deploy" 3 | import "@nomiclabs/hardhat-etherscan"; 4 | import "@nomiclabs/hardhat-ethers"; 5 | import "@typechain/hardhat"; 6 | 7 | require("dotenv").config(); 8 | 9 | const KOVAN_RPC_URL = process.env.KOVAN_RPC_URL || "https://eth-mainnet.alchemyapi.io/v2/your-api-key" 10 | const PRIVATE_KEY = process.env.PRIVATE_KEY || "0x11ee3108a03081fe260ecdc106554d09d9d1209bcafd46942b10e02943effc4a" 11 | const ETHERSCAN_API_KEY = process.env.ETHERSCAN_API_KEY || "" 12 | 13 | 14 | module.exports = { 15 | namedAccounts: { 16 | deployer: 0, 17 | }, 18 | solidity: "0.8.9", 19 | networks: { 20 | hardhat: { 21 | chainId: 31337, 22 | }, 23 | kovan: { 24 | url: KOVAN_RPC_URL, 25 | chainId: 42, 26 | gasPrice: 20000000000, 27 | accounts: [PRIVATE_KEY], 28 | }, 29 | }, 30 | etherscan: { 31 | apiKey: ETHERSCAN_API_KEY, 32 | }, 33 | paths: { 34 | sources: "./contracts", 35 | tests: "./test", 36 | cache: "./cache", 37 | artifacts: "./artifacts" 38 | }, 39 | typechain: { 40 | outDir: '../frontend/types', 41 | // outDir: './typechain', 42 | target: 'ethers-v5', 43 | // alwaysGenerateOverloads: false, // should overloads with full signatures like deposit(uint256) be generated always, even if there are no overloads? 44 | // externalArtifacts: ['externalArtifacts/*.json'], // optional array of glob patterns with external artifacts to process (for example external libs from node_modules) 45 | // dontOverrideCompile: false // defaults to true for javascript projects 46 | }, 47 | }; -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/helper-hardhat-config.js: -------------------------------------------------------------------------------- 1 | const networkConfig = { 2 | default: { 3 | name: "hardhat", 4 | keepersUpdateInterval: "30", 5 | }, 6 | 31337: { 7 | name: "localhost", 8 | }, 9 | 42: { 10 | name: "kovan", 11 | }, 12 | 1: { 13 | name: "mainnet", 14 | }, 15 | } 16 | 17 | const developmentChains = ["hardhat", "localhost"] 18 | const VERIFICATION_BLOCK_CONFIRMATIONS = 6 19 | const frontEndContractsFile = "../frontend/utils/contractAddresses.json" 20 | const frontEndAbiFile = "../frontend/utils/abis.json" 21 | 22 | module.exports = { 23 | networkConfig, 24 | developmentChains, 25 | VERIFICATION_BLOCK_CONFIRMATIONS, 26 | frontEndContractsFile, 27 | frontEndAbiFile, 28 | } 29 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@ethersproject/abi": "^5.4.7", 4 | "@ethersproject/providers": "^5.4.7", 5 | "@nomicfoundation/hardhat-chai-matchers": "^1.0.0", 6 | "@nomicfoundation/hardhat-network-helpers": "^1.0.0", 7 | "@nomicfoundation/hardhat-toolbox": "^1.0.1", 8 | "@nomiclabs/hardhat-ethers": "^2.0.0", 9 | "@nomiclabs/hardhat-etherscan": "^3.0.0", 10 | "@typechain/ethers-v5": "^10.1.0", 11 | "@typechain/hardhat": "^6.1.2", 12 | "@types/chai": "^4.2.0", 13 | "@types/mocha": "^9.1.0", 14 | "@types/node": ">=12.0.0", 15 | "chai": "^4.2.0", 16 | "dotenv": "^16.0.1", 17 | "ethers": "^5.4.7", 18 | "hardhat": "^2.9.9", 19 | "hardhat-deploy": "^0.11.12", 20 | "hardhat-gas-reporter": "^1.0.8", 21 | "solidity-coverage": "^0.7.21", 22 | "ts-node": ">=8.0.0", 23 | "typechain": "^8.1.0", 24 | "typescript": ">=4.5.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/scripts/deploy.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "hardhat"; 2 | 3 | async function main() { 4 | const currentTimestampInSeconds = Math.round(Date.now() / 1000); 5 | const ONE_YEAR_IN_SECS = 365 * 24 * 60 * 60; 6 | const unlockTime = currentTimestampInSeconds + ONE_YEAR_IN_SECS; 7 | 8 | const lockedAmount = ethers.utils.parseEther("1"); 9 | 10 | const Lock = await ethers.getContractFactory("Lock"); 11 | const lock = await Lock.deploy(unlockTime, { value: lockedAmount }); 12 | 13 | await lock.deployed(); 14 | 15 | console.log("Lock with 1 ETH deployed to:", lock.address); 16 | } 17 | 18 | // We recommend this pattern to be able to use async/await everywhere 19 | // and properly handle errors. 20 | main().catch((error) => { 21 | console.error(error); 22 | process.exitCode = 1; 23 | }); 24 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2020", 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "skipLibCheck": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/backend/utils/verify.ts: -------------------------------------------------------------------------------- 1 | import { run } from "hardhat" 2 | 3 | export const verify = async (contractAddress:string, args:any) => { 4 | console.log("") 5 | console.log("Verifying contract...") 6 | try { 7 | await run("verify:verify", { 8 | address: contractAddress, 9 | constructorArguments: args, 10 | }) 11 | } catch (e:any) { 12 | if (e.message.toLowerCase().includes("already verified")) { 13 | console.log("Already verified!") 14 | } else { 15 | console.log(e) 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step13_simple_whitelist_nextjs_ethers_chakra", 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 | "@chakra-ui/react": "^2.2.6", 13 | "@emotion/react": "^11.10.0", 14 | "@emotion/styled": "^11.10.0", 15 | "ethers": "^5.6.9", 16 | "framer-motion": "^7.0.0", 17 | "next": "12.2.4", 18 | "react": "18.2.0", 19 | "react-dom": "18.2.0", 20 | "web3modal": "^1.9.8" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "18.6.4", 24 | "@types/react": "18.0.15", 25 | "@types/react-dom": "18.0.6", 26 | "eslint": "8.21.0", 27 | "eslint-config-next": "12.2.4", 28 | "typescript": "4.7.4" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | import { ChakraProvider } from '@chakra-ui/react' 4 | 5 | 6 | function MyApp({ Component, pageProps }: AppProps) { 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default MyApp 15 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step13_simple_whitelist_nextjs_ethers_chakra/frontend/public/favicon.ico -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/types/common.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type { Listener } from "@ethersproject/providers"; 5 | import type { Event, EventFilter } from "ethers"; 6 | 7 | export interface TypedEvent< 8 | TArgsArray extends Array = any, 9 | TArgsObject = any 10 | > extends Event { 11 | args: TArgsArray & TArgsObject; 12 | } 13 | 14 | export interface TypedEventFilter<_TEvent extends TypedEvent> 15 | extends EventFilter {} 16 | 17 | export interface TypedListener { 18 | (...listenerArg: [...__TypechainArgsArray, TEvent]): void; 19 | } 20 | 21 | type __TypechainArgsArray = T extends TypedEvent ? U : never; 22 | 23 | export interface OnEvent { 24 | ( 25 | eventFilter: TypedEventFilter, 26 | listener: TypedListener 27 | ): TRes; 28 | (eventName: string, listener: Listener): TRes; 29 | } 30 | 31 | export type MinEthersFactory = { 32 | deploy(...a: ARGS[]): Promise; 33 | }; 34 | 35 | export type GetContractTypeFromFactory = F extends MinEthersFactory< 36 | infer C, 37 | any 38 | > 39 | ? C 40 | : never; 41 | 42 | export type GetARGsTypeFromFactory = F extends MinEthersFactory 43 | ? Parameters 44 | : never; 45 | 46 | export type PromiseOrValue = T | Promise; 47 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/types/factories/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { Whitelist__factory } from "./Whitelist__factory"; 5 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/types/hardhat.d.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { ethers } from "ethers"; 6 | import { 7 | FactoryOptions, 8 | HardhatEthersHelpers as HardhatEthersHelpersBase, 9 | } from "@nomiclabs/hardhat-ethers/types"; 10 | 11 | import * as Contracts from "."; 12 | 13 | declare module "hardhat/types/runtime" { 14 | interface HardhatEthersHelpers extends HardhatEthersHelpersBase { 15 | getContractFactory( 16 | name: "Whitelist", 17 | signerOrOptions?: ethers.Signer | FactoryOptions 18 | ): Promise; 19 | 20 | getContractAt( 21 | name: "Whitelist", 22 | address: string, 23 | signer?: ethers.Signer 24 | ): Promise; 25 | 26 | // default types 27 | getContractFactory( 28 | name: string, 29 | signerOrOptions?: ethers.Signer | FactoryOptions 30 | ): Promise; 31 | getContractFactory( 32 | abi: any[], 33 | bytecode: ethers.utils.BytesLike, 34 | signer?: ethers.Signer 35 | ): Promise; 36 | getContractAt( 37 | nameOrAbi: string | any[], 38 | address: string, 39 | signer?: ethers.Signer 40 | ): Promise; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/types/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { Whitelist } from "./Whitelist"; 5 | export * as factories from "./factories"; 6 | export { Whitelist__factory } from "./factories/Whitelist__factory"; 7 | -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/utils/abis.json: -------------------------------------------------------------------------------- 1 | [{"inputs":[{"internalType":"uint8","name":"_maxWhitelistedAddresses","type":"uint8"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[],"name":"addAddressToWhitelist","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"getWhitelistedAddressesList","outputs":[{"internalType":"address[]","name":"","type":"address[]"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"maxWhitelistedAddresses","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"numAddressesWhitelisted","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"","type":"address"}],"name":"whitelistedAddresses","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"}] -------------------------------------------------------------------------------- /step13_simple_whitelist_nextjs_ethers_chakra/frontend/utils/contractAddresses.json: -------------------------------------------------------------------------------- 1 | {"whitelist":"0xC6E0bD13ee76c2A79Ce8705Ba1fEc6CB74A5A6f1"} -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/.env.example: -------------------------------------------------------------------------------- 1 | KOVAN_RPC_URL= 2 | PRIVATE_KEY= 3 | ETHERSCAN_API_KEY= 4 | UPDATE_FRONT_END=true -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env 3 | coverage 4 | coverage.json 5 | typechain 6 | typechain-types 7 | 8 | #Hardhat files 9 | cache 10 | artifacts 11 | 12 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/4.5.0: -------------------------------------------------------------------------------- 1 | yarn add v1.22.15 2 | [1/4] Resolving packages... 3 | Terminate batch job (Y/N)? 4 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/README.md: -------------------------------------------------------------------------------- 1 | # Sample Hardhat Project 2 | 3 | This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, and a script that deploys that contract. 4 | 5 | Try running some of the following tasks: 6 | 7 | ```shell 8 | npx hardhat help 9 | npx hardhat test 10 | GAS_REPORT=true npx hardhat test 11 | npx hardhat node 12 | npx hardhat run scripts/deploy.ts 13 | ``` 14 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/deploy/01-deploy-contracts.ts: -------------------------------------------------------------------------------- 1 | import {network} from "hardhat"; 2 | import {HardhatRuntimeEnvironment} from "hardhat/types"; 3 | import {verify} from "../utils/verify" 4 | 5 | function sleep(ms: number) { 6 | return new Promise(resolve => setTimeout(resolve, ms)); 7 | } 8 | 9 | module.exports = async ({getNamedAccounts, deployments}: HardhatRuntimeEnvironment) => { 10 | const { deploy, log } = deployments 11 | const {deployer} = await getNamedAccounts() 12 | const chainId = network.config.chainId; 13 | 14 | console.log("chainId: ", chainId); 15 | console.log("deployer: ", deployer); 16 | 17 | if (chainId == 31337) { 18 | // deploying contract 19 | await deploy("Election", { 20 | from: deployer, 21 | args: [], 22 | log: true, 23 | }) 24 | log("Election contract deployed on local blockchian!") 25 | 26 | } 27 | else { 28 | // deploying contract 29 | const election = await deploy("Election", { 30 | from: deployer, 31 | args: [], 32 | log: true, 33 | }) 34 | log("Election contract deployed on testnet!") 35 | await sleep(5000); 36 | await verify(election.address, []) 37 | } 38 | 39 | 40 | } -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/deploy/02-update-front-end.ts: -------------------------------------------------------------------------------- 1 | import { deployments, ethers } from "hardhat" 2 | 3 | const { frontEndContractsFile, frontEndAbiFile } = require("../helper-hardhat-config") 4 | const fs = require("fs") 5 | 6 | module.exports = async () => { 7 | if (process.env.UPDATE_FRONT_END) { 8 | console.log("") 9 | console.log("Writing to front end...") 10 | await updateContractAddresses() 11 | await updateAbi() 12 | console.log("Front end written!") 13 | } 14 | } 15 | 16 | async function updateAbi() { 17 | const ElectionContract = await deployments.get("Election"); 18 | fs.writeFileSync(frontEndAbiFile, JSON.stringify(ElectionContract.abi)) 19 | } 20 | 21 | async function updateContractAddresses() { 22 | const ElectionContract = await deployments.get("Election"); 23 | const contractAddresses = JSON.parse(fs.readFileSync(frontEndContractsFile, "utf8")) 24 | contractAddresses["election"] = ElectionContract.address 25 | fs.writeFileSync(frontEndContractsFile, JSON.stringify(contractAddresses)) 26 | } 27 | 28 | const vote = async () => { 29 | 30 | } 31 | 32 | 33 | module.exports.tags = ["all", "frontend"] 34 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/deployments/kovan/.chainId: -------------------------------------------------------------------------------- 1 | 42 -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/hardhat.config.ts: -------------------------------------------------------------------------------- 1 | import "@nomicfoundation/hardhat-toolbox"; 2 | import "hardhat-deploy" 3 | import "@nomiclabs/hardhat-etherscan"; 4 | import "@nomiclabs/hardhat-ethers"; 5 | 6 | require("dotenv").config(); 7 | 8 | const KOVAN_RPC_URL = process.env.KOVAN_RPC_URL || "https://eth-mainnet.alchemyapi.io/v2/your-api-key" 9 | const PRIVATE_KEY = process.env.PRIVATE_KEY || "0x11ee3108a03081fe260ecdc106554d09d9d1209bcafd46942b10e02943effc4a" 10 | const ETHERSCAN_API_KEY = process.env.ETHERSCAN_API_KEY || "" 11 | 12 | 13 | module.exports = { 14 | namedAccounts: { 15 | deployer: 0, 16 | }, 17 | solidity: "0.8.9", 18 | networks: { 19 | hardhat: { 20 | chainId: 31337, 21 | }, 22 | kovan: { 23 | url: KOVAN_RPC_URL, 24 | chainId: 42, 25 | gasPrice: 20000000000, 26 | accounts: [PRIVATE_KEY], 27 | }, 28 | }, 29 | etherscan: { 30 | apiKey: ETHERSCAN_API_KEY, 31 | }, 32 | paths: { 33 | sources: "./contracts", 34 | tests: "./test", 35 | cache: "./cache", 36 | artifacts: "./artifacts" 37 | }, 38 | typechain: { 39 | outDir: '../frontend/types', 40 | // outDir: './typechain', 41 | target: 'ethers-v5', 42 | // alwaysGenerateOverloads: false, // should overloads with full signatures like deposit(uint256) be generated always, even if there are no overloads? 43 | // externalArtifacts: ['externalArtifacts/*.json'], // optional array of glob patterns with external artifacts to process (for example external libs from node_modules) 44 | // dontOverrideCompile: false // defaults to true for javascript projects 45 | }, 46 | }; -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/helper-hardhat-config.js: -------------------------------------------------------------------------------- 1 | const networkConfig = { 2 | default: { 3 | name: "hardhat", 4 | keepersUpdateInterval: "30", 5 | }, 6 | 31337: { 7 | name: "localhost", 8 | }, 9 | 42: { 10 | name: "kovan", 11 | }, 12 | 1: { 13 | name: "mainnet", 14 | }, 15 | } 16 | 17 | const developmentChains = ["hardhat", "localhost"] 18 | const VERIFICATION_BLOCK_CONFIRMATIONS = 6 19 | const frontEndContractsFile = "../frontend/utils/contractAddresses.json" 20 | const frontEndAbiFile = "../frontend/utils/abis.json" 21 | 22 | module.exports = { 23 | networkConfig, 24 | developmentChains, 25 | VERIFICATION_BLOCK_CONFIRMATIONS, 26 | frontEndContractsFile, 27 | frontEndAbiFile, 28 | } 29 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devdependencies": { 3 | "hardhat": "^2.10.1" 4 | }, 5 | "devDependencies": { 6 | "@ethersproject/abi": "^5.4.7", 7 | "@ethersproject/providers": "^5.4.7", 8 | "@nomicfoundation/hardhat-chai-matchers": "^1.0.0", 9 | "@nomicfoundation/hardhat-network-helpers": "^1.0.0", 10 | "@nomicfoundation/hardhat-toolbox": "^1.0.1", 11 | "@nomiclabs/hardhat-ethers": "^2.0.0", 12 | "@nomiclabs/hardhat-etherscan": "^3.0.0", 13 | "@typechain/ethers-v5": "^10.1.0", 14 | "@typechain/hardhat": "^6.1.2", 15 | "@types/chai": "^4.2.0", 16 | "@types/mocha": "^9.1.0", 17 | "@types/node": ">=12.0.0", 18 | "chai": "^4.2.0", 19 | "dotenv": "^16.0.1", 20 | "ethers": "^5.4.7", 21 | "hardhat": "^2.9.9", 22 | "hardhat-deploy": "^0.11.12", 23 | "hardhat-gas-reporter": "^1.0.8", 24 | "solidity-coverage": "^0.7.21", 25 | "ts-node": ">=8.0.0", 26 | "typechain": "^8.1.0", 27 | "typescript": ">=4.5.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/scripts/deploy.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "hardhat"; 2 | 3 | async function main() { 4 | const currentTimestampInSeconds = Math.round(Date.now() / 1000); 5 | const ONE_YEAR_IN_SECS = 365 * 24 * 60 * 60; 6 | const unlockTime = currentTimestampInSeconds + ONE_YEAR_IN_SECS; 7 | 8 | const lockedAmount = ethers.utils.parseEther("1"); 9 | 10 | const Lock = await ethers.getContractFactory("Lock"); 11 | const lock = await Lock.deploy(unlockTime, { value: lockedAmount }); 12 | 13 | await lock.deployed(); 14 | 15 | console.log("Lock with 1 ETH deployed to:", lock.address); 16 | } 17 | 18 | // We recommend this pattern to be able to use async/await everywhere 19 | // and properly handle errors. 20 | main().catch((error) => { 21 | console.error(error); 22 | process.exitCode = 1; 23 | }); 24 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/test/election.test.ts: -------------------------------------------------------------------------------- 1 | import { time, loadFixture } from "@nomicfoundation/hardhat-network-helpers"; 2 | import { anyValue } from "@nomicfoundation/hardhat-chai-matchers/withArgs"; 3 | import { expect } from "chai"; 4 | import { ethers } from "hardhat"; 5 | 6 | describe("Election", function () { 7 | 8 | it("Election is working fine", async () => { 9 | const [deployer] = await ethers.getSigners(); 10 | 11 | const Election = await ethers.getContractFactory("Election"); 12 | const election = await Election.deploy(); 13 | 14 | await election.vote(1); 15 | 16 | console.log("Candidates: ", await election.getCandidatesList()); 17 | 18 | 19 | }) 20 | 21 | 22 | }); 23 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2020", 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "skipLibCheck": true 9 | }, 10 | "include": [ 11 | "hardhat.config.ts", 12 | "./scripts", 13 | "./deploy", 14 | "./test", 15 | "./typechain-types/**/*" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/backend/utils/verify.ts: -------------------------------------------------------------------------------- 1 | import { run } from "hardhat" 2 | 3 | export const verify = async (contractAddress:string, args:any) => { 4 | console.log("") 5 | console.log("Verifying contract...") 6 | try { 7 | await run("verify:verify", { 8 | address: contractAddress, 9 | constructorArguments: args, 10 | }) 11 | } catch (e:any) { 12 | if (e.message.toLowerCase().includes("already verified")) { 13 | console.log("Already verified!") 14 | } else { 15 | console.log(e) 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step13_simple_whitelist_nextjs_ethers_chakra", 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 | "@chakra-ui/react": "^2.2.6", 13 | "@emotion/react": "^11.10.0", 14 | "@emotion/styled": "^11.10.0", 15 | "ethers": "^5.6.9", 16 | "framer-motion": "^7.0.0", 17 | "next": "12.2.4", 18 | "react": "18.2.0", 19 | "react-dom": "18.2.0", 20 | "web3modal": "^1.9.8" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "18.6.4", 24 | "@types/react": "18.0.15", 25 | "@types/react-dom": "18.0.6", 26 | "eslint": "8.21.0", 27 | "eslint-config-next": "12.2.4", 28 | "typescript": "4.7.4" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | import { ChakraProvider } from '@chakra-ui/react' 4 | 5 | 6 | function MyApp({ Component, pageProps }: AppProps) { 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default MyApp 15 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/aaz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/aaz.png -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/favicon.ico -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/ik.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/ik.png -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/ns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/ns.png -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/pak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/pak.png -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/types/common.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type { Listener } from "@ethersproject/providers"; 5 | import type { Event, EventFilter } from "ethers"; 6 | 7 | export interface TypedEvent< 8 | TArgsArray extends Array = any, 9 | TArgsObject = any 10 | > extends Event { 11 | args: TArgsArray & TArgsObject; 12 | } 13 | 14 | export interface TypedEventFilter<_TEvent extends TypedEvent> 15 | extends EventFilter {} 16 | 17 | export interface TypedListener { 18 | (...listenerArg: [...__TypechainArgsArray, TEvent]): void; 19 | } 20 | 21 | type __TypechainArgsArray = T extends TypedEvent ? U : never; 22 | 23 | export interface OnEvent { 24 | ( 25 | eventFilter: TypedEventFilter, 26 | listener: TypedListener 27 | ): TRes; 28 | (eventName: string, listener: Listener): TRes; 29 | } 30 | 31 | export type MinEthersFactory = { 32 | deploy(...a: ARGS[]): Promise; 33 | }; 34 | 35 | export type GetContractTypeFromFactory = F extends MinEthersFactory< 36 | infer C, 37 | any 38 | > 39 | ? C 40 | : never; 41 | 42 | export type GetARGsTypeFromFactory = F extends MinEthersFactory 43 | ? Parameters 44 | : never; 45 | 46 | export type PromiseOrValue = T | Promise; 47 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/types/factories/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { Election__factory } from "./Election__factory"; 5 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/types/hardhat.d.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { ethers } from "ethers"; 6 | import { 7 | FactoryOptions, 8 | HardhatEthersHelpers as HardhatEthersHelpersBase, 9 | } from "@nomiclabs/hardhat-ethers/types"; 10 | 11 | import * as Contracts from "."; 12 | 13 | declare module "hardhat/types/runtime" { 14 | interface HardhatEthersHelpers extends HardhatEthersHelpersBase { 15 | getContractFactory( 16 | name: "Election", 17 | signerOrOptions?: ethers.Signer | FactoryOptions 18 | ): Promise; 19 | 20 | getContractAt( 21 | name: "Election", 22 | address: string, 23 | signer?: ethers.Signer 24 | ): Promise; 25 | 26 | // default types 27 | getContractFactory( 28 | name: string, 29 | signerOrOptions?: ethers.Signer | FactoryOptions 30 | ): Promise; 31 | getContractFactory( 32 | abi: any[], 33 | bytecode: ethers.utils.BytesLike, 34 | signer?: ethers.Signer 35 | ): Promise; 36 | getContractAt( 37 | nameOrAbi: string | any[], 38 | address: string, 39 | signer?: ethers.Signer 40 | ): Promise; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/types/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { Election } from "./Election"; 5 | export * as factories from "./factories"; 6 | export { Election__factory } from "./factories/Election__factory"; 7 | -------------------------------------------------------------------------------- /step14_voting_nextjs_ethers_chakra_hardhat/frontend/utils/contractAddresses.json: -------------------------------------------------------------------------------- 1 | {"election":"0x741f30E7F3bb8CB04E943E561034cb2aAF6Dc200"} -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/.env.example: -------------------------------------------------------------------------------- 1 | RINKEBY_RPC_URL= 2 | PRIVATE_KEY= 3 | ETHERSCAN_API_KEY= 4 | UPDATE_FRONT_END=true -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env 3 | coverage 4 | coverage.json 5 | typechain 6 | typechain-types 7 | 8 | #Hardhat files 9 | cache 10 | artifacts 11 | 12 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/4.5.0: -------------------------------------------------------------------------------- 1 | yarn add v1.22.15 2 | [1/4] Resolving packages... 3 | Terminate batch job (Y/N)? 4 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/README.md: -------------------------------------------------------------------------------- 1 | # Sample Hardhat Project 2 | 3 | This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, and a script that deploys that contract. 4 | 5 | Try running some of the following tasks: 6 | 7 | ```shell 8 | npx hardhat help 9 | npx hardhat test 10 | GAS_REPORT=true npx hardhat test 11 | npx hardhat node 12 | npx hardhat run scripts/deploy.ts 13 | ``` 14 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/contracts/NFTContract.sol: -------------------------------------------------------------------------------- 1 | // SPDX-License-Identifier: MIT 2 | pragma solidity 0.8.9; 3 | 4 | import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol"; 5 | import "hardhat/console.sol"; 6 | 7 | contract NFTContract is ERC721Enumerable { 8 | 9 | uint256 public tokenCounters; 10 | string public uriBase = "https://gateway.pinata.cloud/ipfs/QmbHcHFXU3r2HpkGRMCZVnDMgLQqwicSvUEZyPhtB899fk/"; 11 | string public uriExtention = ".json"; 12 | 13 | mapping (uint256 => string) public uri; 14 | string[] public urisTypes = ["piaic1", "piaic2", "piaic3"]; 15 | 16 | constructor() ERC721("PIAIC Token", "PIAIC") {} 17 | 18 | function mint(uint8 _tokenType) public { 19 | 20 | require(_tokenType >= 0 && _tokenType < urisTypes.length, "invalid type" ); 21 | 22 | string memory tokenUri = string(bytes.concat(bytes(uriBase), bytes(urisTypes[_tokenType]), bytes(uriExtention))); 23 | console.log("tokenUri: ", tokenUri); 24 | 25 | tokenCounters++; 26 | uri[tokenCounters] = tokenUri; 27 | _safeMint(msg.sender, tokenCounters); 28 | } 29 | 30 | function tokenURI(uint256 tokenId) public view virtual override returns (string memory) { 31 | _requireMinted(tokenId); 32 | return uri[tokenId]; 33 | } 34 | 35 | function getAllURIs() public view returns (string[] memory) { 36 | string[] memory alluris = new string[](3); 37 | for(uint8 i = 0; i < urisTypes.length; i++){ 38 | alluris[i] = string(bytes.concat(bytes(uriBase), bytes(urisTypes[i]), bytes(uriExtention))); 39 | } 40 | return alluris; 41 | } 42 | 43 | 44 | } -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/deploy/01-deploy-contracts.ts: -------------------------------------------------------------------------------- 1 | import {network} from "hardhat"; 2 | import {HardhatRuntimeEnvironment} from "hardhat/types"; 3 | import {verify} from "../utils/verify" 4 | 5 | function sleep(ms: number) { 6 | return new Promise(resolve => setTimeout(resolve, ms)); 7 | } 8 | 9 | module.exports = async ({getNamedAccounts, deployments}: HardhatRuntimeEnvironment) => { 10 | const { deploy, log } = deployments 11 | const {deployer} = await getNamedAccounts() 12 | const chainId = network.config.chainId; 13 | 14 | console.log("chainId: ", chainId); 15 | console.log("deployer: ", deployer); 16 | 17 | if (chainId == 31337) { 18 | // deploying contract 19 | await deploy("NFTContract", { 20 | from: deployer, 21 | args: [], 22 | log: true, 23 | }) 24 | log("NFTContract contract deployed on local blockchian!") 25 | 26 | } 27 | else { 28 | // deploying contract 29 | const nftContract = await deploy("NFTContract", { 30 | from: deployer, 31 | args: [], 32 | log: true, 33 | }) 34 | log("NFTContract contract deployed on testnet!") 35 | await sleep(5000); 36 | await verify(nftContract.address, []) 37 | } 38 | 39 | 40 | } -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/deploy/02-update-front-end.ts: -------------------------------------------------------------------------------- 1 | import { deployments, ethers } from "hardhat" 2 | import {network} from "hardhat"; 3 | 4 | const { frontEndContractsFile, frontEndAbiFile } = require("../helper-hardhat-config") 5 | const fs = require("fs") 6 | 7 | module.exports = async () => { 8 | if (process.env.UPDATE_FRONT_END) { 9 | console.log("") 10 | console.log("Writing to front end...") 11 | await updateContractAddresses() 12 | await updateAbi() 13 | console.log("Front end written!") 14 | } 15 | } 16 | 17 | async function updateAbi() { 18 | const NFTContract = await deployments.get("NFTContract"); 19 | fs.writeFileSync(frontEndAbiFile, JSON.stringify(NFTContract.abi)) 20 | } 21 | 22 | async function updateContractAddresses() { 23 | const chainId = network.config.chainId; 24 | const NFTContract = await deployments.get("NFTContract"); 25 | let contractAddresses = JSON.parse(fs.readFileSync(frontEndContractsFile, "utf8")) 26 | contractAddresses = {NFTContract: NFTContract.address, chainid: chainId } 27 | fs.writeFileSync(frontEndContractsFile, JSON.stringify(contractAddresses)) 28 | } 29 | 30 | module.exports.tags = ["all", "frontend"] 31 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/deployments/kovan/.chainId: -------------------------------------------------------------------------------- 1 | 42 -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/deployments/rinkeby/.chainId: -------------------------------------------------------------------------------- 1 | 4 -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/deployments/ropsten/.chainId: -------------------------------------------------------------------------------- 1 | 3 -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/hardhat.config.ts: -------------------------------------------------------------------------------- 1 | import "@nomicfoundation/hardhat-toolbox"; 2 | import "hardhat-deploy" 3 | import "@nomiclabs/hardhat-etherscan"; 4 | import "@nomiclabs/hardhat-ethers"; 5 | 6 | require("dotenv").config(); 7 | 8 | const RINKEBY_RPC_URL = process.env.RINKEBY_RPC_URL || "https://eth-mainnet.alchemyapi.io/v2/your-api-key" 9 | const PRIVATE_KEY = process.env.PRIVATE_KEY || "0x11ee3108a03081fe260ecdc106554d09d9d1209bcafd46942b10e02943effc4a" 10 | const ETHERSCAN_API_KEY = process.env.ETHERSCAN_API_KEY || "" 11 | 12 | 13 | module.exports = { 14 | namedAccounts: { 15 | deployer: 0, 16 | }, 17 | solidity: "0.8.9", 18 | networks: { 19 | hardhat: { 20 | chainId: 31337, 21 | }, 22 | rinkeby: { 23 | url: RINKEBY_RPC_URL, 24 | chainId: 4, 25 | gasPrice: 20000000000, 26 | accounts: [PRIVATE_KEY], 27 | }, 28 | }, 29 | etherscan: { 30 | apiKey: ETHERSCAN_API_KEY, 31 | }, 32 | paths: { 33 | sources: "./contracts", 34 | tests: "./test", 35 | cache: "./cache", 36 | artifacts: "./artifacts" 37 | }, 38 | typechain: { 39 | outDir: '../frontend/types', 40 | // outDir: './typechain', 41 | target: 'ethers-v5', 42 | // alwaysGenerateOverloads: false, // should overloads with full signatures like deposit(uint256) be generated always, even if there are no overloads? 43 | // externalArtifacts: ['externalArtifacts/*.json'], // optional array of glob patterns with external artifacts to process (for example external libs from node_modules) 44 | // dontOverrideCompile: false // defaults to true for javascript projects 45 | }, 46 | }; -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/helper-hardhat-config.js: -------------------------------------------------------------------------------- 1 | const networkConfig = { 2 | default: { 3 | name: "hardhat", 4 | keepersUpdateInterval: "30", 5 | }, 6 | 31337: { 7 | name: "localhost", 8 | }, 9 | 4: { 10 | name: "rinkeby", 11 | }, 12 | 1: { 13 | name: "mainnet", 14 | }, 15 | } 16 | 17 | const developmentChains = ["hardhat", "localhost"] 18 | const VERIFICATION_BLOCK_CONFIRMATIONS = 6 19 | const frontEndContractsFile = "../frontend/utils/contractAddresses.json" 20 | const frontEndAbiFile = "../frontend/utils/abis.json" 21 | 22 | module.exports = { 23 | networkConfig, 24 | developmentChains, 25 | VERIFICATION_BLOCK_CONFIRMATIONS, 26 | frontEndContractsFile, 27 | frontEndAbiFile, 28 | } 29 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/metadata/README.md: -------------------------------------------------------------------------------- 1 | ## Instructions to upload the token metadata on IPFS 2 | 3 | 4 | Read details of standard NFT metadata JSON template [Metadata schemas](https://nftschool.dev/reference/metadata-schemas/#ethereum-and-evm-compatible-chains) 5 | 6 | Create a new token.json file and fill it with standard fields 7 | 8 | Go to [Pinata](https://www.pinata.cloud/) and upload token image and get its IPFS uri which looks like [this](https://gateway.pinata.cloud/ipfs/QmasgWktpH7o5sHimQ3qYZffDw3b9qkw1ZZS96qjXCeoNM) 9 | 10 | Put his image URI in your metadata JSON file under the image's description field. 11 | 12 | Now upload this JSON metadata file to IPFS same way we did with image and get the IPFS uri in return. This is my [uri](https://gateway.pinata.cloud/ipfs/QmaxcnLj1yCjnYS1DYZbwFcqC3mtDkjaHGq7C1n9AvCopS). 13 | 14 | Amazing. Now final step is to put this metadata uri inside the contract. Whenever someone will call the tokenUri function from our contract, we want to return exactly this uri. -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/metadata/json/piaic1.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "PIAIC's Non-Fungible Token 1", 3 | "type": "object", 4 | "properties": { 5 | "name": { 6 | "type": "string", 7 | "description": "PIAIC NFT 1" 8 | }, 9 | "description": { 10 | "type": "string", 11 | "description": "Let's learn web3.0 with PIAIC" 12 | }, 13 | "image": { 14 | "type": "string", 15 | "description": "https://gateway.pinata.cloud/ipfs/QmV8W58rYmCaUgPGmm3VG8riDiohHSu2NP9CfvMVYGPNVq/piaic1.svg" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/metadata/json/piaic2.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "PIAIC's Non-Fungible Token 2", 3 | "type": "object", 4 | "properties": { 5 | "name": { 6 | "type": "string", 7 | "description": "PIAIC NFT 2" 8 | }, 9 | "description": { 10 | "type": "string", 11 | "description": "Let's learn web3.0 with PIAIC" 12 | }, 13 | "image": { 14 | "type": "string", 15 | "description": "https://gateway.pinata.cloud/ipfs/QmV8W58rYmCaUgPGmm3VG8riDiohHSu2NP9CfvMVYGPNVq/piaic2.svg" 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/metadata/json/piaic3.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "PIAIC's Non-Fungible Token 3", 3 | "type": "object", 4 | "properties": { 5 | "name": { 6 | "type": "string", 7 | "description": "PIAIC NFT 3" 8 | }, 9 | "description": { 10 | "type": "string", 11 | "description": "Let's learn web3.0 with PIAIC" 12 | }, 13 | "image": { 14 | "type": "string", 15 | "description": "https://gateway.pinata.cloud/ipfs/QmV8W58rYmCaUgPGmm3VG8riDiohHSu2NP9CfvMVYGPNVq/piaic3.svg" 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devdependencies": { 3 | "hardhat": "^2.10.1" 4 | }, 5 | "devDependencies": { 6 | "@ethersproject/abi": "^5.4.7", 7 | "@ethersproject/providers": "^5.4.7", 8 | "@nomicfoundation/hardhat-chai-matchers": "^1.0.0", 9 | "@nomicfoundation/hardhat-network-helpers": "^1.0.0", 10 | "@nomicfoundation/hardhat-toolbox": "^1.0.1", 11 | "@nomiclabs/hardhat-ethers": "^2.0.0", 12 | "@nomiclabs/hardhat-etherscan": "^3.0.0", 13 | "@openzeppelin/contracts": "^4.7.2", 14 | "@typechain/ethers-v5": "^10.1.0", 15 | "@typechain/hardhat": "^6.1.2", 16 | "@types/chai": "^4.2.0", 17 | "@types/mocha": "^9.1.0", 18 | "@types/node": ">=12.0.0", 19 | "chai": "^4.2.0", 20 | "dotenv": "^16.0.1", 21 | "ethers": "^5.4.7", 22 | "hardhat": "^2.9.9", 23 | "hardhat-deploy": "^0.11.12", 24 | "hardhat-gas-reporter": "^1.0.8", 25 | "solidity-coverage": "^0.7.21", 26 | "ts-node": ">=8.0.0", 27 | "typechain": "^8.1.0", 28 | "typescript": ">=4.5.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/scripts/deploy.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "hardhat"; 2 | 3 | async function main() { 4 | const currentTimestampInSeconds = Math.round(Date.now() / 1000); 5 | const ONE_YEAR_IN_SECS = 365 * 24 * 60 * 60; 6 | const unlockTime = currentTimestampInSeconds + ONE_YEAR_IN_SECS; 7 | 8 | const lockedAmount = ethers.utils.parseEther("1"); 9 | 10 | const Lock = await ethers.getContractFactory("Lock"); 11 | const lock = await Lock.deploy(unlockTime, { value: lockedAmount }); 12 | 13 | await lock.deployed(); 14 | 15 | console.log("Lock with 1 ETH deployed to:", lock.address); 16 | } 17 | 18 | // We recommend this pattern to be able to use async/await everywhere 19 | // and properly handle errors. 20 | main().catch((error) => { 21 | console.error(error); 22 | process.exitCode = 1; 23 | }); 24 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/test/nftContract.test.ts: -------------------------------------------------------------------------------- 1 | import { time, loadFixture } from "@nomicfoundation/hardhat-network-helpers"; 2 | import { anyValue } from "@nomicfoundation/hardhat-chai-matchers/withArgs"; 3 | import { expect } from "chai"; 4 | import { ethers } from "hardhat"; 5 | import {NFTContract, NFTContract__factory} from "../typechain"; 6 | 7 | describe("NFTContract", function () { 8 | 9 | it("NFTContract is working fine", async () => { 10 | const [deployer] = await ethers.getSigners(); 11 | 12 | const NFTContract = await ethers.getContractFactory("NFTContract"); 13 | const nftContract = await NFTContract.deploy(); 14 | 15 | console.log(await nftContract.getAllURIs()); 16 | await nftContract.mint(1); 17 | console.log(await nftContract.tokenURI(1)); 18 | 19 | }) 20 | 21 | 22 | }); 23 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2020", 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "skipLibCheck": true 9 | }, 10 | "include": [ 11 | "hardhat.config.ts", 12 | "./scripts", 13 | "./deploy", 14 | "./test", 15 | "./typechain-types/**/*" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/backend/utils/verify.ts: -------------------------------------------------------------------------------- 1 | import { run } from "hardhat" 2 | 3 | export const verify = async (contractAddress:string, args:any) => { 4 | console.log("") 5 | console.log("Verifying contract...") 6 | try { 7 | await run("verify:verify", { 8 | address: contractAddress, 9 | constructorArguments: args, 10 | }) 11 | } catch (e:any) { 12 | if (e.message.toLowerCase().includes("already verified")) { 13 | console.log("Already verified!") 14 | } else { 15 | console.log(e) 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step13_simple_whitelist_nextjs_ethers_chakra", 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 | "@chakra-ui/react": "^2.2.6", 13 | "@emotion/react": "^11.10.0", 14 | "@emotion/styled": "^11.10.0", 15 | "axios": "^0.27.2", 16 | "ethers": "^5.6.9", 17 | "framer-motion": "^7.0.0", 18 | "next": "12.2.4", 19 | "react": "18.2.0", 20 | "react-dom": "18.2.0", 21 | "web3modal": "^1.9.8" 22 | }, 23 | "devDependencies": { 24 | "@types/node": "18.6.4", 25 | "@types/react": "18.0.15", 26 | "@types/react-dom": "18.0.6", 27 | "eslint": "8.21.0", 28 | "eslint-config-next": "12.2.4", 29 | "typescript": "4.7.4" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | import { ChakraProvider } from '@chakra-ui/react' 4 | 5 | 6 | function MyApp({ Component, pageProps }: AppProps) { 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default MyApp 15 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/aaz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/aaz.png -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/favicon.ico -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/ik.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/ik.png -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/ns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/ns.png -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/pak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/pak.png -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as token from "./token"; 5 | export type { token }; 6 | import type * as utils from "./utils"; 7 | export type { utils }; 8 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/token/ERC721/extensions/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { ERC721Enumerable } from "./ERC721Enumerable"; 5 | export type { IERC721Enumerable } from "./IERC721Enumerable"; 6 | export type { IERC721Metadata } from "./IERC721Metadata"; 7 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/token/ERC721/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as extensions from "./extensions"; 5 | export type { extensions }; 6 | export type { ERC721 } from "./ERC721"; 7 | export type { IERC721 } from "./IERC721"; 8 | export type { IERC721Receiver } from "./IERC721Receiver"; 9 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/token/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as erc721 from "./ERC721"; 5 | export type { erc721 }; 6 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/utils/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as introspection from "./introspection"; 5 | export type { introspection }; 6 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/utils/introspection/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { ERC165 } from "./ERC165"; 5 | export type { IERC165 } from "./IERC165"; 6 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/@openzeppelin/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as contracts from "./contracts"; 5 | export type { contracts }; 6 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/common.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type { Listener } from "@ethersproject/providers"; 5 | import type { Event, EventFilter } from "ethers"; 6 | 7 | export interface TypedEvent< 8 | TArgsArray extends Array = any, 9 | TArgsObject = any 10 | > extends Event { 11 | args: TArgsArray & TArgsObject; 12 | } 13 | 14 | export interface TypedEventFilter<_TEvent extends TypedEvent> 15 | extends EventFilter {} 16 | 17 | export interface TypedListener { 18 | (...listenerArg: [...__TypechainArgsArray, TEvent]): void; 19 | } 20 | 21 | type __TypechainArgsArray = T extends TypedEvent ? U : never; 22 | 23 | export interface OnEvent { 24 | ( 25 | eventFilter: TypedEventFilter, 26 | listener: TypedListener 27 | ): TRes; 28 | (eventName: string, listener: Listener): TRes; 29 | } 30 | 31 | export type MinEthersFactory = { 32 | deploy(...a: ARGS[]): Promise; 33 | }; 34 | 35 | export type GetContractTypeFromFactory = F extends MinEthersFactory< 36 | infer C, 37 | any 38 | > 39 | ? C 40 | : never; 41 | 42 | export type GetARGsTypeFromFactory = F extends MinEthersFactory 43 | ? Parameters 44 | : never; 45 | 46 | export type PromiseOrValue = T | Promise; 47 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/contracts/Election.sol/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { MyNFT } from "./MyNFT"; 5 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { NFTContract } from "./NFTContract"; 5 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as token from "./token"; 5 | export * as utils from "./utils"; 6 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/ERC721/IERC721Receiver__factory.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { Contract, Signer, utils } from "ethers"; 6 | import type { Provider } from "@ethersproject/providers"; 7 | import type { 8 | IERC721Receiver, 9 | IERC721ReceiverInterface, 10 | } from "../../../../../@openzeppelin/contracts/token/ERC721/IERC721Receiver"; 11 | 12 | const _abi = [ 13 | { 14 | inputs: [ 15 | { 16 | internalType: "address", 17 | name: "operator", 18 | type: "address", 19 | }, 20 | { 21 | internalType: "address", 22 | name: "from", 23 | type: "address", 24 | }, 25 | { 26 | internalType: "uint256", 27 | name: "tokenId", 28 | type: "uint256", 29 | }, 30 | { 31 | internalType: "bytes", 32 | name: "data", 33 | type: "bytes", 34 | }, 35 | ], 36 | name: "onERC721Received", 37 | outputs: [ 38 | { 39 | internalType: "bytes4", 40 | name: "", 41 | type: "bytes4", 42 | }, 43 | ], 44 | stateMutability: "nonpayable", 45 | type: "function", 46 | }, 47 | ]; 48 | 49 | export class IERC721Receiver__factory { 50 | static readonly abi = _abi; 51 | static createInterface(): IERC721ReceiverInterface { 52 | return new utils.Interface(_abi) as IERC721ReceiverInterface; 53 | } 54 | static connect( 55 | address: string, 56 | signerOrProvider: Signer | Provider 57 | ): IERC721Receiver { 58 | return new Contract(address, _abi, signerOrProvider) as IERC721Receiver; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/ERC721/extensions/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { ERC721Enumerable__factory } from "./ERC721Enumerable__factory"; 5 | export { IERC721Enumerable__factory } from "./IERC721Enumerable__factory"; 6 | export { IERC721Metadata__factory } from "./IERC721Metadata__factory"; 7 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/ERC721/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as extensions from "./extensions"; 5 | export { ERC721__factory } from "./ERC721__factory"; 6 | export { IERC721__factory } from "./IERC721__factory"; 7 | export { IERC721Receiver__factory } from "./IERC721Receiver__factory"; 8 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as erc721 from "./ERC721"; 5 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as introspection from "./introspection"; 5 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/introspection/ERC165__factory.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { Contract, Signer, utils } from "ethers"; 6 | import type { Provider } from "@ethersproject/providers"; 7 | import type { 8 | ERC165, 9 | ERC165Interface, 10 | } from "../../../../../@openzeppelin/contracts/utils/introspection/ERC165"; 11 | 12 | const _abi = [ 13 | { 14 | inputs: [ 15 | { 16 | internalType: "bytes4", 17 | name: "interfaceId", 18 | type: "bytes4", 19 | }, 20 | ], 21 | name: "supportsInterface", 22 | outputs: [ 23 | { 24 | internalType: "bool", 25 | name: "", 26 | type: "bool", 27 | }, 28 | ], 29 | stateMutability: "view", 30 | type: "function", 31 | }, 32 | ]; 33 | 34 | export class ERC165__factory { 35 | static readonly abi = _abi; 36 | static createInterface(): ERC165Interface { 37 | return new utils.Interface(_abi) as ERC165Interface; 38 | } 39 | static connect(address: string, signerOrProvider: Signer | Provider): ERC165 { 40 | return new Contract(address, _abi, signerOrProvider) as ERC165; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/introspection/IERC165__factory.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { Contract, Signer, utils } from "ethers"; 6 | import type { Provider } from "@ethersproject/providers"; 7 | import type { 8 | IERC165, 9 | IERC165Interface, 10 | } from "../../../../../@openzeppelin/contracts/utils/introspection/IERC165"; 11 | 12 | const _abi = [ 13 | { 14 | inputs: [ 15 | { 16 | internalType: "bytes4", 17 | name: "interfaceId", 18 | type: "bytes4", 19 | }, 20 | ], 21 | name: "supportsInterface", 22 | outputs: [ 23 | { 24 | internalType: "bool", 25 | name: "", 26 | type: "bool", 27 | }, 28 | ], 29 | stateMutability: "view", 30 | type: "function", 31 | }, 32 | ]; 33 | 34 | export class IERC165__factory { 35 | static readonly abi = _abi; 36 | static createInterface(): IERC165Interface { 37 | return new utils.Interface(_abi) as IERC165Interface; 38 | } 39 | static connect( 40 | address: string, 41 | signerOrProvider: Signer | Provider 42 | ): IERC165 { 43 | return new Contract(address, _abi, signerOrProvider) as IERC165; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/introspection/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { ERC165__factory } from "./ERC165__factory"; 5 | export { IERC165__factory } from "./IERC165__factory"; 6 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as contracts from "./contracts"; 5 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/contracts/Election.sol/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { MyNFT__factory } from "./MyNFT__factory"; 5 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { NFTContract__factory } from "./NFTContract__factory"; 5 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/types/factories/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as openzeppelin from "./@openzeppelin"; 5 | export * as contracts from "./contracts"; 6 | -------------------------------------------------------------------------------- /step15_nft_minting_nextjs__ethers_chakra_hardhat/frontend/utils/contractAddresses.json: -------------------------------------------------------------------------------- 1 | {"NFTContract":"0x748122597a771Ec08712A88Bb7d9810D1dde69CF","chainid":4} -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/.env.example: -------------------------------------------------------------------------------- 1 | RINKEBY_RPC_URL= 2 | PRIVATE_KEY= 3 | ETHERSCAN_API_KEY= 4 | UPDATE_FRONT_END=true -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env 3 | coverage 4 | coverage.json 5 | typechain 6 | typechain-types 7 | 8 | #Hardhat files 9 | cache 10 | artifacts 11 | deployments 12 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/4.5.0: -------------------------------------------------------------------------------- 1 | yarn add v1.22.15 2 | [1/4] Resolving packages... 3 | Terminate batch job (Y/N)? 4 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/README.md: -------------------------------------------------------------------------------- 1 | # Sample Hardhat Project 2 | 3 | This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, and a script that deploys that contract. 4 | 5 | Try running some of the following tasks: 6 | 7 | ```shell 8 | npx hardhat help 9 | npx hardhat test 10 | GAS_REPORT=true npx hardhat test 11 | npx hardhat node 12 | npx hardhat run scripts/deploy.ts 13 | ``` 14 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/contracts/NFTContract.sol: -------------------------------------------------------------------------------- 1 | // SPDX-License-Identifier: MIT 2 | pragma solidity 0.8.9; 3 | 4 | import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol"; 5 | import "hardhat/console.sol"; 6 | 7 | contract NFTContract is ERC721Enumerable { 8 | 9 | uint256 public tokenCounters; 10 | string public uriBase = "https://gateway.pinata.cloud/ipfs/QmbHcHFXU3r2HpkGRMCZVnDMgLQqwicSvUEZyPhtB899fk/"; 11 | string public uriExtention = ".json"; 12 | 13 | mapping (uint256 => string) public uri; 14 | string[] public urisTypes = ["piaic1", "piaic2", "piaic3"]; 15 | 16 | constructor() ERC721("PIAIC Token", "PIAIC") {} 17 | 18 | function mint(uint8 _tokenType) public { 19 | 20 | require(_tokenType >= 0 && _tokenType < urisTypes.length, "invalid type" ); 21 | 22 | string memory tokenUri = string(bytes.concat(bytes(uriBase), bytes(urisTypes[_tokenType]), bytes(uriExtention))); 23 | console.log("tokenUri: ", tokenUri); 24 | 25 | tokenCounters++; 26 | uri[tokenCounters] = tokenUri; 27 | _safeMint(msg.sender, tokenCounters); 28 | } 29 | 30 | function tokenURI(uint256 tokenId) public view virtual override returns (string memory) { 31 | _requireMinted(tokenId); 32 | return uri[tokenId]; 33 | } 34 | 35 | function getAllURIs() public view returns (string[] memory) { 36 | string[] memory alluris = new string[](3); 37 | for(uint8 i = 0; i < urisTypes.length; i++){ 38 | alluris[i] = string(bytes.concat(bytes(uriBase), bytes(urisTypes[i]), bytes(uriExtention))); 39 | } 40 | return alluris; 41 | } 42 | 43 | 44 | } -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/deploy/02-update-front-end.ts: -------------------------------------------------------------------------------- 1 | import { deployments, ethers } from "hardhat" 2 | import {network} from "hardhat"; 3 | 4 | const { frontEndContractsFile, frontEndAbiFile } = require("../helper-hardhat-config") 5 | const fs = require("fs") 6 | 7 | module.exports = async () => { 8 | if (process.env.UPDATE_FRONT_END) { 9 | console.log("") 10 | console.log("Writing to front end...") 11 | await updateContractAddresses() 12 | await updateAbi() 13 | console.log("Front end written!") 14 | } 15 | } 16 | 17 | async function updateAbi() { 18 | const NFTContract = await deployments.get("NFTContract"); 19 | const NftMarketplace = await deployments.get("NftMarketplace"); 20 | fs.writeFileSync(frontEndAbiFile, JSON.stringify({NftMarketplace: NftMarketplace.abi, NFTContract: NFTContract.abi})) 21 | } 22 | 23 | async function updateContractAddresses() { 24 | const chainId = network.config.chainId; 25 | const NFTContract = await deployments.get("NFTContract"); 26 | const NftMarketplace = await deployments.get("NftMarketplace"); 27 | 28 | let contractAddresses = JSON.parse(fs.readFileSync(frontEndContractsFile, "utf8")) 29 | contractAddresses = {NftMarketplace: NftMarketplace.address, NFTContract: NFTContract.address, chainid: chainId } 30 | fs.writeFileSync(frontEndContractsFile, JSON.stringify(contractAddresses)) 31 | } 32 | 33 | module.exports.tags = ["all", "frontend"] 34 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/deployments/localhost/.chainId: -------------------------------------------------------------------------------- 1 | 31337 -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/deployments/rinkeby/.chainId: -------------------------------------------------------------------------------- 1 | 4 -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/helper-hardhat-config.js: -------------------------------------------------------------------------------- 1 | const networkConfig = { 2 | default: { 3 | name: "hardhat", 4 | keepersUpdateInterval: "30", 5 | }, 6 | 31337: { 7 | name: "localhost", 8 | }, 9 | 4: { 10 | name: "rinkeby", 11 | }, 12 | 1: { 13 | name: "mainnet", 14 | }, 15 | } 16 | 17 | const developmentChains = ["hardhat", "localhost"] 18 | const VERIFICATION_BLOCK_CONFIRMATIONS = 6 19 | const frontEndContractsFile = "../frontend/utils/contractAddresses.json" 20 | const frontEndAbiFile = "../frontend/utils/abis.json" 21 | 22 | module.exports = { 23 | networkConfig, 24 | developmentChains, 25 | VERIFICATION_BLOCK_CONFIRMATIONS, 26 | frontEndContractsFile, 27 | frontEndAbiFile, 28 | } 29 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/metadata/README.md: -------------------------------------------------------------------------------- 1 | ## Instructions to upload the token metadata on IPFS 2 | 3 | 4 | Read details of standard NFT metadata JSON template [Metadata schemas](https://nftschool.dev/reference/metadata-schemas/#ethereum-and-evm-compatible-chains) 5 | 6 | Create a new token.json file and fill it with standard fields 7 | 8 | Go to [Pinata](https://www.pinata.cloud/) and upload token image and get its IPFS uri which looks like [this](https://gateway.pinata.cloud/ipfs/QmasgWktpH7o5sHimQ3qYZffDw3b9qkw1ZZS96qjXCeoNM) 9 | 10 | Put his image URI in your metadata JSON file under the image's description field. 11 | 12 | Now upload this JSON metadata file to IPFS same way we did with image and get the IPFS uri in return. This is my [uri](https://gateway.pinata.cloud/ipfs/QmaxcnLj1yCjnYS1DYZbwFcqC3mtDkjaHGq7C1n9AvCopS). 13 | 14 | Amazing. Now final step is to put this metadata uri inside the contract. Whenever someone will call the tokenUri function from our contract, we want to return exactly this uri. -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/metadata/json/piaic1.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "PIAIC's Non-Fungible Token 1", 3 | "type": "object", 4 | "properties": { 5 | "name": { 6 | "type": "string", 7 | "description": "PIAIC NFT 1" 8 | }, 9 | "description": { 10 | "type": "string", 11 | "description": "Let's learn web3.0 with PIAIC" 12 | }, 13 | "image": { 14 | "type": "string", 15 | "description": "https://gateway.pinata.cloud/ipfs/QmV8W58rYmCaUgPGmm3VG8riDiohHSu2NP9CfvMVYGPNVq/piaic1.svg" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/metadata/json/piaic2.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "PIAIC's Non-Fungible Token 2", 3 | "type": "object", 4 | "properties": { 5 | "name": { 6 | "type": "string", 7 | "description": "PIAIC NFT 2" 8 | }, 9 | "description": { 10 | "type": "string", 11 | "description": "Let's learn web3.0 with PIAIC" 12 | }, 13 | "image": { 14 | "type": "string", 15 | "description": "https://gateway.pinata.cloud/ipfs/QmV8W58rYmCaUgPGmm3VG8riDiohHSu2NP9CfvMVYGPNVq/piaic2.svg" 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/metadata/json/piaic3.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "PIAIC's Non-Fungible Token 3", 3 | "type": "object", 4 | "properties": { 5 | "name": { 6 | "type": "string", 7 | "description": "PIAIC NFT 3" 8 | }, 9 | "description": { 10 | "type": "string", 11 | "description": "Let's learn web3.0 with PIAIC" 12 | }, 13 | "image": { 14 | "type": "string", 15 | "description": "https://gateway.pinata.cloud/ipfs/QmV8W58rYmCaUgPGmm3VG8riDiohHSu2NP9CfvMVYGPNVq/piaic3.svg" 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devdependencies": { 3 | "hardhat": "^2.10.1" 4 | }, 5 | "devDependencies": { 6 | "@ethersproject/abi": "^5.4.7", 7 | "@ethersproject/providers": "^5.4.7", 8 | "@nomicfoundation/hardhat-chai-matchers": "^1.0.0", 9 | "@nomicfoundation/hardhat-network-helpers": "^1.0.0", 10 | "@nomicfoundation/hardhat-toolbox": "^1.0.1", 11 | "@nomiclabs/hardhat-ethers": "^2.0.0", 12 | "@nomiclabs/hardhat-etherscan": "^3.0.0", 13 | "@openzeppelin/contracts": "^4.7.2", 14 | "@typechain/ethers-v5": "^10.1.0", 15 | "@typechain/hardhat": "^6.1.2", 16 | "@types/chai": "^4.2.0", 17 | "@types/mocha": "^9.1.0", 18 | "@types/node": ">=12.0.0", 19 | "chai": "^4.2.0", 20 | "dotenv": "^16.0.1", 21 | "ethers": "^5.4.7", 22 | "hardhat": "^2.9.9", 23 | "hardhat-deploy": "^0.11.12", 24 | "hardhat-gas-reporter": "^1.0.8", 25 | "solidity-coverage": "^0.7.21", 26 | "ts-node": ">=8.0.0", 27 | "typechain": "^8.1.0", 28 | "typescript": ">=4.5.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/scripts/deploy.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "hardhat"; 2 | 3 | async function main() { 4 | const currentTimestampInSeconds = Math.round(Date.now() / 1000); 5 | const ONE_YEAR_IN_SECS = 365 * 24 * 60 * 60; 6 | const unlockTime = currentTimestampInSeconds + ONE_YEAR_IN_SECS; 7 | 8 | const lockedAmount = ethers.utils.parseEther("1"); 9 | 10 | const Lock = await ethers.getContractFactory("Lock"); 11 | const lock = await Lock.deploy(unlockTime, { value: lockedAmount }); 12 | 13 | await lock.deployed(); 14 | 15 | console.log("Lock with 1 ETH deployed to:", lock.address); 16 | } 17 | 18 | // We recommend this pattern to be able to use async/await everywhere 19 | // and properly handle errors. 20 | main().catch((error) => { 21 | console.error(error); 22 | process.exitCode = 1; 23 | }); 24 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/test/nftContract.test.ts: -------------------------------------------------------------------------------- 1 | import { time, loadFixture } from "@nomicfoundation/hardhat-network-helpers"; 2 | import { anyValue } from "@nomicfoundation/hardhat-chai-matchers/withArgs"; 3 | import { expect } from "chai"; 4 | import { ethers } from "hardhat"; 5 | import {NFTContract, NFTContract__factory} from "../typechain"; 6 | 7 | describe("NFTContract", function () { 8 | 9 | it("NFTContract is working fine", async () => { 10 | const [deployer] = await ethers.getSigners(); 11 | 12 | const NFTContract = await ethers.getContractFactory("NFTContract"); 13 | const nftContract = await NFTContract.deploy(); 14 | 15 | console.log(await nftContract.getAllURIs()); 16 | await nftContract.mint(1); 17 | console.log(await nftContract.tokenURI(1)); 18 | 19 | }) 20 | 21 | 22 | }); 23 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2020", 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "skipLibCheck": true 9 | }, 10 | "include": [ 11 | "hardhat.config.ts", 12 | "./scripts", 13 | "./deploy", 14 | "./test", 15 | "./typechain-types/**/*" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/backend/utils/verify.ts: -------------------------------------------------------------------------------- 1 | import { run } from "hardhat" 2 | 3 | export const verify = async (contractAddress:string, args:any) => { 4 | console.log("") 5 | console.log("Verifying contract...") 6 | try { 7 | await run("verify:verify", { 8 | address: contractAddress, 9 | constructorArguments: args, 10 | }) 11 | } catch (e:any) { 12 | if (e.message.toLowerCase().includes("already verified")) { 13 | console.log("Already verified!") 14 | } else { 15 | console.log(e) 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/.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 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/components/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Text } from '@chakra-ui/react' 2 | import React from 'react' 3 | import addresses from "../../utils/contractAddresses.json"; 4 | 5 | const index = () => { 6 | return ( 7 | 16 | ) 17 | } 18 | 19 | export default index -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/components/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Heading, Text } from '@chakra-ui/react' 2 | import React from 'react' 3 | 4 | const index = () => { 5 | return ( 6 | <> 7 | 8 | Welcome to PIAIC's NFT Market Place 9 | 10 | Buy and Sell tokens you like 11 | 12 | ) 13 | } 14 | 15 | export default index -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "step13_simple_whitelist_nextjs_ethers_chakra", 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 | "@chakra-ui/react": "^2.2.6", 13 | "@emotion/react": "^11.10.0", 14 | "@emotion/styled": "^11.10.0", 15 | "@ethersproject/providers": "^5.6.8", 16 | "@web3-react/core": "^6.1.9", 17 | "@web3-react/injected-connector": "^6.0.7", 18 | "@web3uikit/core": "^0.1.4", 19 | "@web3uikit/icons": "^0.1.4", 20 | "@web3uikit/web3": "^0.1.4", 21 | "axios": "^0.27.2", 22 | "ethers": "^5.6.9", 23 | "framer-motion": "^7.0.0", 24 | "next": "12.2.4", 25 | "react": "18.2.0", 26 | "react-dom": "18.2.0" 27 | }, 28 | "devDependencies": { 29 | "@types/node": "18.6.4", 30 | "@types/react": "18.0.15", 31 | "@types/react-dom": "18.0.6", 32 | "eslint": "8.21.0", 33 | "eslint-config-next": "12.2.4", 34 | "typescript": "4.7.4" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | import { ChakraProvider } from '@chakra-ui/react' 4 | import { Web3ReactProvider } from "@web3-react/core"; 5 | import { Web3Provider, ExternalProvider } from "@ethersproject/providers"; 6 | 7 | const getLibrary = (provider: ExternalProvider) => { 8 | return new Web3Provider(provider); 9 | }; 10 | 11 | function MyApp({ Component, pageProps }: AppProps) { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | ) 20 | } 21 | 22 | export default MyApp; -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/panaverse/dapps-nextjs/89391d71c61ef074e964d5068c300c3e0a116207/step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/public/favicon.ico -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as token from "./token"; 5 | export type { token }; 6 | import type * as utils from "./utils"; 7 | export type { utils }; 8 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/token/ERC721/extensions/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { ERC721Enumerable } from "./ERC721Enumerable"; 5 | export type { IERC721Enumerable } from "./IERC721Enumerable"; 6 | export type { IERC721Metadata } from "./IERC721Metadata"; 7 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/token/ERC721/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as extensions from "./extensions"; 5 | export type { extensions }; 6 | export type { ERC721 } from "./ERC721"; 7 | export type { IERC721 } from "./IERC721"; 8 | export type { IERC721Receiver } from "./IERC721Receiver"; 9 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/token/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as erc721 from "./ERC721"; 5 | export type { erc721 }; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/utils/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as introspection from "./introspection"; 5 | export type { introspection }; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/@openzeppelin/contracts/utils/introspection/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { ERC165 } from "./ERC165"; 5 | export type { IERC165 } from "./IERC165"; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/@openzeppelin/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type * as contracts from "./contracts"; 5 | export type { contracts }; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/common.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | import type { Listener } from "@ethersproject/providers"; 5 | import type { Event, EventFilter } from "ethers"; 6 | 7 | export interface TypedEvent< 8 | TArgsArray extends Array = any, 9 | TArgsObject = any 10 | > extends Event { 11 | args: TArgsArray & TArgsObject; 12 | } 13 | 14 | export interface TypedEventFilter<_TEvent extends TypedEvent> 15 | extends EventFilter {} 16 | 17 | export interface TypedListener { 18 | (...listenerArg: [...__TypechainArgsArray, TEvent]): void; 19 | } 20 | 21 | type __TypechainArgsArray = T extends TypedEvent ? U : never; 22 | 23 | export interface OnEvent { 24 | ( 25 | eventFilter: TypedEventFilter, 26 | listener: TypedListener 27 | ): TRes; 28 | (eventName: string, listener: Listener): TRes; 29 | } 30 | 31 | export type MinEthersFactory = { 32 | deploy(...a: ARGS[]): Promise; 33 | }; 34 | 35 | export type GetContractTypeFromFactory = F extends MinEthersFactory< 36 | infer C, 37 | any 38 | > 39 | ? C 40 | : never; 41 | 42 | export type GetARGsTypeFromFactory = F extends MinEthersFactory 43 | ? Parameters 44 | : never; 45 | 46 | export type PromiseOrValue = T | Promise; 47 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export type { NFTContract } from "./NFTContract"; 5 | export type { NftMarketplace } from "./NftMarketplace"; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as token from "./token"; 5 | export * as utils from "./utils"; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/ERC721/IERC721Receiver__factory.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { Contract, Signer, utils } from "ethers"; 6 | import type { Provider } from "@ethersproject/providers"; 7 | import type { 8 | IERC721Receiver, 9 | IERC721ReceiverInterface, 10 | } from "../../../../../@openzeppelin/contracts/token/ERC721/IERC721Receiver"; 11 | 12 | const _abi = [ 13 | { 14 | inputs: [ 15 | { 16 | internalType: "address", 17 | name: "operator", 18 | type: "address", 19 | }, 20 | { 21 | internalType: "address", 22 | name: "from", 23 | type: "address", 24 | }, 25 | { 26 | internalType: "uint256", 27 | name: "tokenId", 28 | type: "uint256", 29 | }, 30 | { 31 | internalType: "bytes", 32 | name: "data", 33 | type: "bytes", 34 | }, 35 | ], 36 | name: "onERC721Received", 37 | outputs: [ 38 | { 39 | internalType: "bytes4", 40 | name: "", 41 | type: "bytes4", 42 | }, 43 | ], 44 | stateMutability: "nonpayable", 45 | type: "function", 46 | }, 47 | ]; 48 | 49 | export class IERC721Receiver__factory { 50 | static readonly abi = _abi; 51 | static createInterface(): IERC721ReceiverInterface { 52 | return new utils.Interface(_abi) as IERC721ReceiverInterface; 53 | } 54 | static connect( 55 | address: string, 56 | signerOrProvider: Signer | Provider 57 | ): IERC721Receiver { 58 | return new Contract(address, _abi, signerOrProvider) as IERC721Receiver; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/ERC721/extensions/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { ERC721Enumerable__factory } from "./ERC721Enumerable__factory"; 5 | export { IERC721Enumerable__factory } from "./IERC721Enumerable__factory"; 6 | export { IERC721Metadata__factory } from "./IERC721Metadata__factory"; 7 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/ERC721/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as extensions from "./extensions"; 5 | export { ERC721__factory } from "./ERC721__factory"; 6 | export { IERC721__factory } from "./IERC721__factory"; 7 | export { IERC721Receiver__factory } from "./IERC721Receiver__factory"; 8 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/token/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as erc721 from "./ERC721"; 5 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as introspection from "./introspection"; 5 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/introspection/ERC165__factory.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { Contract, Signer, utils } from "ethers"; 6 | import type { Provider } from "@ethersproject/providers"; 7 | import type { 8 | ERC165, 9 | ERC165Interface, 10 | } from "../../../../../@openzeppelin/contracts/utils/introspection/ERC165"; 11 | 12 | const _abi = [ 13 | { 14 | inputs: [ 15 | { 16 | internalType: "bytes4", 17 | name: "interfaceId", 18 | type: "bytes4", 19 | }, 20 | ], 21 | name: "supportsInterface", 22 | outputs: [ 23 | { 24 | internalType: "bool", 25 | name: "", 26 | type: "bool", 27 | }, 28 | ], 29 | stateMutability: "view", 30 | type: "function", 31 | }, 32 | ]; 33 | 34 | export class ERC165__factory { 35 | static readonly abi = _abi; 36 | static createInterface(): ERC165Interface { 37 | return new utils.Interface(_abi) as ERC165Interface; 38 | } 39 | static connect(address: string, signerOrProvider: Signer | Provider): ERC165 { 40 | return new Contract(address, _abi, signerOrProvider) as ERC165; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/introspection/IERC165__factory.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | 5 | import { Contract, Signer, utils } from "ethers"; 6 | import type { Provider } from "@ethersproject/providers"; 7 | import type { 8 | IERC165, 9 | IERC165Interface, 10 | } from "../../../../../@openzeppelin/contracts/utils/introspection/IERC165"; 11 | 12 | const _abi = [ 13 | { 14 | inputs: [ 15 | { 16 | internalType: "bytes4", 17 | name: "interfaceId", 18 | type: "bytes4", 19 | }, 20 | ], 21 | name: "supportsInterface", 22 | outputs: [ 23 | { 24 | internalType: "bool", 25 | name: "", 26 | type: "bool", 27 | }, 28 | ], 29 | stateMutability: "view", 30 | type: "function", 31 | }, 32 | ]; 33 | 34 | export class IERC165__factory { 35 | static readonly abi = _abi; 36 | static createInterface(): IERC165Interface { 37 | return new utils.Interface(_abi) as IERC165Interface; 38 | } 39 | static connect( 40 | address: string, 41 | signerOrProvider: Signer | Provider 42 | ): IERC165 { 43 | return new Contract(address, _abi, signerOrProvider) as IERC165; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/contracts/utils/introspection/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { ERC165__factory } from "./ERC165__factory"; 5 | export { IERC165__factory } from "./IERC165__factory"; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/@openzeppelin/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as contracts from "./contracts"; 5 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/contracts/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export { NFTContract__factory } from "./NFTContract__factory"; 5 | export { NftMarketplace__factory } from "./NftMarketplace__factory"; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/types/factories/index.ts: -------------------------------------------------------------------------------- 1 | /* Autogenerated file. Do not edit manually. */ 2 | /* tslint:disable */ 3 | /* eslint-disable */ 4 | export * as openzeppelin from "./@openzeppelin"; 5 | export * as contracts from "./contracts"; 6 | -------------------------------------------------------------------------------- /step16_nft_marketplace_nextjs_ethers_chakra_hardhat/frontend/utils/contractAddresses.json: -------------------------------------------------------------------------------- 1 | {"NftMarketplace":"0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512","NFTContract":"0x5FbDB2315678afecb367f032d93F642f64180aa3","chainid":31337} --------------------------------------------------------------------------------