This is an example dApp inspired by quai-no-code-deployer and hardhat-example by Dominant Strategies.
This app demonstrates how to use Quais.js in a modern Next.js App. It leverages hardhat to compile and deploy a simple Solidity ERC721 smart contract on Quai Network.
The NFT requires a submission in QUAI to mint and offers functions for updating supply and mint price as well as withdrawing contract balance to the owner.
The dApp provides owner functionality when the connected address matches the owner address.
Download the Pelagus Wallet and visit the Faucet to get some QUAI.
You will need some QUAI to deploy and interact with the dApp.
Once the wallet is setup you will need to export your QUAI address's private key for hardhat to deploy your smart contract to the blockchain.
git clone https://github.com/mpoletiek/quai-nft-dapp
cd quai-nft-dapp
npm i
Copy .env.dist to .env and modify CYPRUS1_PK with your address's private key and INITIAL_OWNER with your public address.
CYPRUS1_PK="0x0000000000000000000000000000000000000000000000000000000000000000"
INITIAL_OWNER="0x0000000000000000000000000"
The smart contract resides at contracts/ERC721.sol
Compile the smart contract using npx hardhat compile
Compiled 1 Solidity file successfully (evm target: london).
You should have already have some QUAI by visiting the Faucet and copied your private key into .env.
To deploy the contract run npx hardhat run scripts/deployERC721.js
Wait for the transaction to broadcast and get mined on Quai Network.
Transaction broadcasted: 0x000
Contract deployed to: 0x000
Note the contract address at the end of Contract deployed to: <contract-address>
We need to tell the dApp where our contract resides.
Edit src/app/page.tsx and set the contract address to your contract address from above by editing the contractAddress variable on line 28.
const { web3Provider, account } = useContext(StateContext);
const contractAddress = "0x003e719cbEA0211fdbF9172F745542809bB4F0cE"; // Change this to your contract address
const tokenuri = "https://example.com";
To start the app use npm run dev
> [email protected] dev
> next dev
▲ Next.js 15.0.3
- Local: http://localhost:3000
- Environments: .env
✓ Starting...
✓ Ready in 3s
Point your browser with Pelagus installed to https://localhost:3000
Connect your wallet, mint an NFT!