Initial commit

Author: topclever

.env.example

@@ -0,0 +1,3 @@
+# Sorry haxors, these values are made up!
+HARDHAT_CHAIN_ID=1337
+NEXT_PUBLIC_MINTER_ADDRESS=0x5FbDB231541a8fbcb341f032d93F642f64180bb3

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "next/core-web-vitals"]
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env file
+.env
+
+# vercel
+.vercel
+
+node_modules
+
+#Hardhat files
+cache
+artifacts

README.md

@@ -0,0 +1,111 @@
+# NFT Minting dApp Starter
+
+A full stack dApp starter for minting NFTs built on Ethereum (Solidity) with Next.js (React).
+
+This repo contains boilerplate code for minting NFTs from the client-side using [Solidity](https://soliditylang.org/), [React](https://reactjs.org/) and [TailwindCSS](https://tailwindcss.com/).
+
+![NFT Minting dApp Starter](/public/screenshot.png)
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download/)
+- [MetaMask wallet browser extension](https://metamask.io/download.html).
+
+## Getting Started
+
+### Clone This Repo
+
+Use `git clone https://github.com/tomhirst/nft-minting-dapp-starter.git` to get the files within this repository onto your local machine.
+
+### Environment Setup
+
+Duplicate `.env.example` to `.env` and fill out the `HARDHAT_CHAIN_ID` environment variable. The port from the example file, if it's free, will be fine in most cases.
+
+Run `npm install`.
+
+### Running The Smart Contract Locally
+
+Compile the ABI for the smart contract using `npx hardhat compile`.
+
+If you're successful, you'll recieve a confirmation message of:
+
+```
+Compilation finished successfully
+```
+
+And, a `src/artifacts` folder will be created in your project.
+
+Deploy the smart contract to the local blockchain for testing with `npx hardhat node`.
+
+If you're successful, you'll be presented with a number of account details in the CLI. Here's an example:
+
+```
+Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
+Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
+```
+
+Then in a new terminal window, `npx hardhat run scripts/deploy.js --network localhost`.
+
+If you're successful, you'll get something like the following CLI output:
+
+```
+Minter deployed to: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0
+```
+
+### Adding A Local Account To MetaMask
+
+Open your MetaMask browser extension and change the network to `Localhost 8545`.
+
+Next, import one of the accounts by adding its Private Key (for example, `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80` to MetaMask.
+
+If you're successful, you should see the a balance resembling something like `10000 ETH` in the wallet.
+
+### Connecting The Front-End
+
+In `.env` set the `NEXT_PUBLIC_MINTER_ADDRESS` environment variable to the address your smart contract was deployed to. For example, `0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0`.
+
+In a new terminal window, load the front-end with `npm run dev`. If you want to use an alternate port from `3000`, use `npm run dev -- --port=1234`, or whatever port number you prefer.
+
+## Demo'ing The Functionality
+
+Once set up, go to `localhost:3000` (or whatever post number you used), to view your dApp in the browser.
+
+First, connect your wallet by clicking `Connect wallet`. Ensure you're connected to the `Localhost 8454` network in your MetaMask extension. Select the wallet that you imported earlier.
+
+You can now test minting tokens, between 1 and 10 per transaction, by filling out the input with your desired amount and clicking the `Mint` button.
+
+If you successfully mint a number of NFTs, you should see the `Tokens minted` amount increment.
+
+Switching accounts in MetaMask will update the wallet address in the top right hand corner. Disconnecting all accounts will prompt you to connect your wallet.
+
+All state is retained on browser refresh.
+
+## Editing The Front-End
+
+To modify the front page of your application, edit `pages/index.js`.
+
+All [TailwindCSS classes](https://tailwindcss.com/docs) are available to you.
+
+To lint your front-end code, use `npm run lint`.
+
+## Testing
+
+To test the smart contract, run `npx hardhat test`.
+
+Basic tests can be found in `test/Minter.test.js`.
+
+## Roadmap
+
+- Show the funds available in the connected account's wallet
+- Add common owner functionality to the contract
+    - Reserve tokens
+    - Flip sale state
+    - Set starting index
+    - Set base URI for asset metadata
+    - Set provenance hash
+    - Withdraw funds
+- Attach image data to minted tokens with IPFS
+- Deploy to the Ropsten test network
+- Introduce code style rules and linting
+- Write more extensive tests
+- Create a TypeScript fork

components/TotalSupply.js

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+import { ethers } from 'ethers'
+import { hasEthereum, requestAccount } from '../utils/ethereum'
+import Minter from '../src/artifacts/contracts/Minter.sol/Minter.json'
+
+export default function TotalSupply() {
+    // UI state
+    const [loading, setLoading] = useState(true)
+    const [totalMinted, setTotalMinted] = useState(0)
+    const [totalValue, setTotalValue] = useState(0)
+
+    // Constants
+    const TOTAL = 10000;
+
+    useEffect( function() {
+        async function fetchTotals() {
+            if(! hasEthereum()) {
+                console.log('Install MetaMask')
+                setLoading(false)
+                return
+            }
+    
+            await getTotalSupply()
+            await getTotalValue()
+        
+            setLoading(false)
+        }
+        fetchTotals();
+    });
+
+    // Get total supply of tokens from smart contract
+    async function getTotalSupply() {
+        try {
+          // Interact with contract
+          const provider = new ethers.providers.Web3Provider(window.ethereum)
+          const contract = new ethers.Contract(process.env.NEXT_PUBLIC_MINTER_ADDRESS, Minter.abi, provider)
+          const data = await contract.totalSupply()
+      
+          setTotalMinted(data.toNumber());
+        } catch(error) {
+            console.log(error)
+        }
+    }
+
+     // Get total value collected by the smart contract
+     async function getTotalValue() {
+        try {
+          // Interact with contract
+          const provider = new ethers.providers.Web3Provider(window.ethereum)
+          const contract = new ethers.Contract(process.env.NEXT_PUBLIC_MINTER_ADDRESS, Minter.abi, provider)
+          const data = await contract.getBalance()
+      
+          setTotalValue(ethers.utils.formatEther(data).toString());
+        } catch(error) {
+            console.log(error)
+        }
+    }
+
+    return (
+        <>
+            <p>
+                Tokens minted: { loading ? 'Loading...' : `${totalMinted}/${TOTAL}` }<br />
+                Contract value: { loading ? 'Loading...' : `${totalValue}ETH` }
+            </p>
+        </>
+    )
+}

components/Wallet.js

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react'
+import { ethers } from 'ethers'
+import { hasEthereum, requestAccount } from '../utils/ethereum'
+
+export default function Wallet() {
+    // UI state
+    const [loading, setLoading] = useState(true)
+    const [connected, setConnected] = useState(false)
+    const [message, setMessage] = useState('Connect wallet')
+
+    // First load
+    useEffect( function() {
+        async function fetchConnectedAccount() {
+            if(! hasEthereum()) {
+                setMessage('Install MetaMask')
+                setLoading(false)
+                return
+            }
+    
+            await setConnectedAccount()
+
+            setLoading(false)
+        }
+        fetchConnectedAccount() 
+    },[])
+
+    // Account changes
+    useEffect( function() {
+        async function listenMMAccount() {
+            if(! hasEthereum()) return
+            window.ethereum.on('accountsChanged', async function(accounts) {
+                if(accounts && accounts[0]) {
+                    setMessage(accounts[0])
+                } else {
+                    setConnected(false)
+                    setMessage('Connect wallet');
+                }
+            })
+        }
+
+        listenMMAccount()
+    },[])
+
+    // Request connection to wallet
+    async function requestConnection() {
+        try {
+            await requestAccount()
+        } catch(error) {
+            if(error.message) setMessage(error.message)
+        }
+    }
+
+    // Set address of connected wallet
+    async function setConnectedAccount() {
+        try {
+            const provider = new ethers.providers.Web3Provider(window.ethereum)
+            const signer = provider.getSigner()
+            const address = await signer.getAddress()
+            
+            if(address) {
+                setConnected(true)
+                setMessage(address);
+            }
+        } catch {
+            setMessage('Connect wallet')
+        }
+    }
+
+    // Handle connect wallet click
+    async function handleConnectWallet() {
+        setLoading(true);
+
+        await requestConnection()
+        await setConnectedAccount()
+
+        setLoading(false);
+    }
+
+    return (
+        <button
+            className="bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 border hover:border-gray-300 focus:border-gray-300 rounded shadow-lg absolute top-4 right-4 lg:top-8 lg:right-8 p-4 flex items-center text-xs disabled:cursor-not-allowed"
+            onClick={handleConnectWallet}
+            disabled={connected || message === 'Install MetaMask'}
+        >
+            { ! loading ? (
+                <>
+                    <span className={ connected ? "rounded-full h-2 w-2 block mr-2 bg-green-500" : "rounded-full h-2 w-2 block mr-2 bg-red-500" } />
+                    { message }
+                </>
+            ) : (
+                <span>Loading...</span>
+            ) }
+        </button>
+    )
+}

components/YourNFTs.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+import { ethers } from 'ethers'
+import { hasEthereum, requestAccount } from '../utils/ethereum'
+import Minter from '../src/artifacts/contracts/Minter.sol/Minter.json'
+
+export default function YourNFTs() {
+    // UI state
+    const [nfts, setNfts] = useState([])
+
+    useEffect( function() {
+        getNftsOfCurrentWallet()
+    });
+
+    // Get NFTs owned by current wallet
+    async function getNftsOfCurrentWallet() {
+        if(! hasEthereum()) return
+
+        try {
+            // Fetch data from contract
+            const provider = new ethers.providers.Web3Provider(window.ethereum)
+            const signer = provider.getSigner()
+            const contract = new ethers.Contract(process.env.NEXT_PUBLIC_MINTER_ADDRESS, Minter.abi, provider)
+            const address = await signer.getAddress()
+            // Get amount of tokens owned by this address
+            const tokensOwned = await contract.balanceOf(address)
+            
+            // For each token owned, get the tokenId
+            const tokenIds = []
+
+            for(let i = 0; i < tokensOwned; i++) {
+                const tokenId = await contract.tokenOfOwnerByIndex(address, i)
+                tokenIds.push(tokenId.toString())
+            }
+  
+            setNfts(tokenIds)
+          } catch(error) {
+              console.log(error)
+          }
+    }
+
+    if(nfts.length < 1) return null;
+
+    return (
+        <>
+            <h2 className="text-2xl font-semibold mb-2">Your NFTs</h2>
+            <ul className="grid grid-cols-4 gap-6">
+                { nfts.map( (nft) => <div key={nft} className="bg-gray-100 p-4 h-24 lg:h-28 flex justify-center items-center text-lg">{nft}</div>)}
+            </ul>
+        </>
+    )
+}