Web 3 Store
A store where each purchase mints an NFT
Summary
A store for digital goods. Each purchase mints an NFT of the item bought and store tokens based on the amount spent. This token can in turn be used for loyalty programs.
Basic store functionality
Uses USDC for payment
Each NFT is viewable on OpenSea
Idea source: Web3 version of a Web2 store. Used static (HTML & CSS) project as starting point
Tech & Tools
Frontend
React
Redux
Web3js
Web3Modal
Backend
Storage
Firestore
Cloud Functions
Netlify
Github Actions
Contracts
Solidity
Open Zeppelin
Truffle
Slither
Architecture
Click image to see full size
dApp Walkthrough
Click image to see full size
Adding a new product requires the admin signature, this is verified by the backend before sending data to the Firestore db
Web3 Store with responsive pages
Wallet integration with Web3Modal
OpenSea profile before purchases for this wallet
Each purchase requests approval for only the purchase amount, this way the dApp does not have approval for all the user's USDC.
Transaction details on Etherscan
Purchased items after a metadata refresh
Details of the purchased item
The admin panel is only visible when the contract owner connects. The front-end reads this address from the Store contract
Admin panel supports image uploads to Firebase Storage
Adding a new product requires the admin signature, this is verified by the backend before sending data to the Firestore db
Web3 Store with responsive pages
Dev Notes
From the creator... blessed be heUpdates to /contracts on github trigger a custom action, running the truffle tests
The shop loyalty token has two owners - the admin EOA and the Shop contract.
The Shop contract allows the owner to do refunds, which could be moved to a multi-sig.
Contracts were analysed using Slither showing 2 low, 0 med & 0 high vulnerabilities.
Continuous Delivery is achieved through a Netlify integration
How to use
NOTE: to use the app on mobile, access it through the Metamask app browser
1. Switch your wallet to Rinkeby and get testnet ETH
NOTE: The app allows for browsing without connecting a wallet
2. Browse the site and products, to make a purchase, follow the instructions on the product page to get testnet USDC
3. Each purchase has two steps. Approval & purchase