01 / Case study
The challenge
Minting involves more than choosing a quantity. Wallet connection, network compatibility, quantity limits and payment must match the contract rules. Users also need clear pending, success and error states. The challenge was connecting the web interface to this lifecycle and presenting contract information in an understandable flow.
My contribution
In 1400 SH (2021–2022), I developed the frontend and smart-contract backend. The React interface connected wallets to contracts using ethers.js and Web3, while the blockchain backend was developed in Solidity. Work focused on connecting minting and supply rules to the interface, managing wallet and network state and tracking transaction results.
Wallet connection & network checks
The minting flow starts with identifying the account and wallet network.
Wallet integration
Implemented wallet connection using Web3Modal and WalletConnect, including browser wallet support, account retrieval and connection state in the interface.
Network validation
Read the chain ID and compared it with the expected network. An incompatible connection is rejected for the minting flow and its error state is handled in the interface.
Account changes & disconnects
Handled wallet events, network changes and disconnection, clearing stored state to keep the interface aligned with the current account.
Minting & transaction experience
Supply data is read from the contract and the selected quantity becomes a paid mint transaction.
Supply information
Read price, minted quantity, maximum supply, minimum and maximum per-mint quantities and reserved supply from the contract to present current conditions.
Quantity & payment
Validated the selected quantity against permitted limits and calculated payment from price and quantity, submitting the corresponding value with the mint request.
Pending, success & errors
Waited for transaction confirmation, displayed its result and refreshed supply data. Errors such as insufficient payment, invalid quantities or depleted supply were translated into user-facing messages.
NFT contract & supply rules
The backend relies on a Solidity contract and its interface with the web application.
NFT ownership & transfers
The contract interface includes ownership, balance, transfer and approval functions following the ERC-721 pattern, alongside token information and enumeration.
Price & limits
The contract ABI exposes price, supply-cap and minimum/maximum mint quantity settings. The mint interface retrieves the current conditions from the contract.
Reservations & metadata
The contract interface supports NFT reservations and base metadata URI settings alongside tokenURI, connecting on-chain assets to their descriptive information.
Web interface & product information
React implementation
Built with React and JavaScript, with separate routes for the main page and supporting content. Wallet and minting logic are organized into separate components.
Mobile & desktop layouts
The source includes styles and components for mobile and desktop presentations, adapting product content and access to minting for different screen sizes.
Ownership & terms
Supporting pages explain digital asset ownership and product terms, keeping detailed information accessible alongside the main wallet interaction flow.