A Dapp for minting Rock, Paper and Scissors NFTs.
The tokens are ERC1155 compliant, off-chain data on a decentralized storage service layered with IPFS.
A user may mint multiple tokens at once. As long as there is a supply remaining, they can mint up to a pre-determined amount of tokens.
- You will need Goerli ETH to purchase an NFT. I recommend Alchemy's faucet.
-
Tokens are burnable, mintable, and transferable. With Access Control, these actions are pausable.
-
With Access Control, the contract is upgradeable, and supports 3 phases (Whitelist, Public, Closed) with different pricing and mint and supply limits.
-
A user can connect with 5 wallet providers: MetaMask, Rainbow, Coinbase Wallet, WalletConnect, and Trust Wallet and mint on mobile or desktop.
-
A user receives a notification when the transaction goes through (or fails).
-
When the user connects, they can access their profile to see their recent transactions, connected wallet address, and to manually disconnect.
-
An NFT Gallery displays all minted NFTs using the Alchemy NFT API.
-
๐ฆพ Development Tools
- Yarn - package manager
- This project uses Yarn Workspaces
- Read more about its configuration in the project Wiki
- Node.js
- TypeScript
- Git - version control
- CRA - create react app
- Yarn - package manager
-
โ๏ธ Ethereum
- Solidity (v.0.8.19) - implementing smart contracts
- Read more about the contract configuration
- HardHat - Ethereum development environment
- Read more about its configuration in the project Wiki
- ethers.js (v.5) - library for interacting with the Ethereum blockhain
- OpenZeppelin (v.4) - smart contract base implementation
- Read more about the OpenZeppelin configuration
- Etherscan - contract verification
Public network node providers
- Alchemy
- Infura
Decentralized storage
- NFT.Storage
- IPFS (InterPlanetary File System)
- Solidity (v.0.8.19) - implementing smart contracts
-
Frontend
- React - JavaScript framework
- RainbowKit - Ethereum wallet integration
- Wagmi - Ethereum hooks
- Material UI - UI framework
- React Router - Client side routing
- React - JavaScript framework
Prerequisites: Node plus Yarn.
The
rps-hardhat
workspace uses Hardhat as the platform layer to orchestrate all tasks related to smart contract development.
Create a .env
file in the hardhat
folder and add the values for the variables
cp packages/hardhat/.env.example packages/hardhat/.env
After updating a contract, compile it and generate Typechain typings
- Hardhat always runs the
compile
task when running scripts with its command line interface, so this is not required unless you plan running them directly usingnode
.
yarn compile
Then deploy it to Ethereum on the Goerli or Mainnet network
- The deployed address is the address of our deployed proxy instance
yarn deploy --network <network_name>
Once deployed, you can interact with the implementation instance of the contract in Etherscan at https://goerli.etherscan.io/address/<implementation-address>#code
.
You can also interact with it from the proxy contract at https://goerli.etherscan.io/address/<proxy-address>#code
by verifying the proxy instance:
-
Select the 'More Options' dropdown menu, select 'Is this a proxy?'. That will take you to the following page:
Fig.1 - Proxy Contract Verification page. The address in the red rectangle will be that of the proxy -
Select 'Verify'. The address that pops up is the implementation contract's
-
Now when you go back to Contract -> Code, you will see two new tabs
Read as Proxy
andWrite as Proxy
.Fig.2 - Contract page. Read and write from our implementation contract
The
rps-frontend
workspace uses React as the framework to create the interface for our contract with "Ethereum components" (ConnectButton, WalletAddress, etc.) and read and write to it via hooks.
-
Install development dependencies to customize
react-scripts
yarn workspace rps-hardhat add -D env-cmd customize-cra react-app-rewired
-
Create a
.env
file in thefrontend
folder and add the values for the variables:cp packages/frontend/.env.example packages/frontend/.env
- After deploying a new contract, you will need to update the
REACT_APP_TESTNET_PROXY_CONTRACT_ADDRESS
orREACT_APP_MAINNET_PROXY_CONTRACT_ADDRESS
variable.
- After deploying a new contract, you will need to update the
-
In
src/constants/index.ts
update the imported contract at the top to your contract's path, the variables under "SEO and Contract Related Info" to match your Application, and theCHAIN_ID
variable under "Network Related Info" to match the default chain to use (1 (homestead) or 5 (goerli)). -
Start up the development server with hot reloading
yarn start
yarn hardhat
yarn compile
yarn deploy
yarn deploy:goerli
yarn deploy:mainnet
yarn accounts -- <network> # default network is 'hardhat'
yarn balance -- <account_address>
yarn balance:goerli -- <account_address>
yarn balance:mainnet -- <account_address>
yarn blockNumber -- <network> # default network is 'hardhat'
yarn lint:hardhat
yarn test:hardhat
yarn start
yarn ship