solidity-nextjs-starter

A full stack dApp starter for minting NFTs built on Ethereum (Solidity) with Next.js (React, TypeScript).

Prerequisites

Node.js
MetaMask wallet browser extension.
rainbow wallet and/or wallet connect.

Getting Started

Clone This Repo

Use git clone https://github.com/yunggenius/NFT-minting-dapp.git to get the files within this repository onto your local computer.

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

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.

Roadmap

replace the connect wallet button with rainbow kit.
enable the ability to disconnect wallet, and prevent user from minting.
Show the funds available in the connected account's wallet
change NFTs to PFPs.
limit mint per wallet.

geniusyinka/NFT-minting-dapp