Crafting the Web3 experience
At Wonder Makers, we’re excited about crafting the future of the web through Web3 websites, where technical expertise meets user-friendly design.
Some of our recent projects include collaborating on Guild of Guild of Guardians by Immutable or Shrapnel by Radon.
WEB3
Web3 is a hot topic not only in our client meetings so we decided to share our approach with anyone who’s interested.
The purpose of this article is to provide you with an overview. We’ve simplified our work into five key checkpoints, offering insight into our process and the tech stack we use.
Our tech stack
- Solidity: Enabling the creation of secure smart contracts on Ethereum.
- Node.js: Fueling our backend operations for Web3 development
- React / Svelte / Vue: These JavaScript libraries bring life to our blazingly fast and responsive user interfaces.
Five key checkpoints
- PRODUCT: Ensuring product availability and a seamless shopping experience.
- WALLET CONNECTION: Making Web3 accessible with integrations like MetaMask and Coinbase.
- TRANSACTION: Facilitating secure fund transfers and NFT ownership.
- MINTING: Crafting unique NFTs through smart contracts.
- UNBOXING: The moment of joy when you enjoy your acquired NFT.
CHECKPOINT 1: PRODUCT
A successful Web3 website starts with its products. We fetch these products from the website backend and focus on two important things:
Stock and risk management
During what we refer to as the “gray zone,” lasting around 2–3 minutes, we perform checks on different layers of data to avoid potential issues, like overselling limited-quantity NFTs.
Customers cart management
This is also where pay close attention to customers’ cart management, making sure the product is available, purchase is possible and all related processes run without a hitch.
CHECKPOINT 2: WALLET CONNECTION
To make Web3 websites accessible to everyone, we provide various wallet connection options, including well-known choices like MetaMask and Coinbase. As new wallet options tend to emerge, we always adapt to include them.
Crypto payment integration
To keep things simple, we integrate crypto payment gateways like MoonPay. This allows transactions to happen directly on the website, just like any other online shopping experience.
CHECKPOINT 3: TRANSACTION
In the transaction checkpoint, we navigate through three critical aspects:
- Funds transfer: We move funds from the customer’s wallet to complete the NFT purchase and transfer ownership.
- Stock allocation: After an order is placed through the dApp, we ensure the available stock is updated accurately to avoid overselling.
- Purchase confirmation window: We provide customers with a specific time window to confirm their purchase securely by sending the necessary funds.
CHECKPOINT 4: MINTING
In the fourth checkpoint, three actions related to minting NFTs might come into play:
Smart contract execution
We trigger the execution of smart contracts to mint the desired quantity of NFTs directly to the customer’s wallet.
Unique serial number generation
We create unique serial numbers using a straightforward first-in, first-out approach, ensuring that every NFT is genuinely one-of-a-kind.
Randomization of NFT Metadata
In this step, we randomize various “rare” elements all at once, making each NFT distinct and unique.
CHECKPOINT 5: UNBOXING
Finally, the most exhilarating moment — the enjoyment of the newly acquired NFT, complete with an animation in the form of an MP4.
This experience is like unwrapping a surprise, as you won’t know what you’ve received until the last moment — much like opening a Kinder Egg!”
Web3 jargon explained
New to the world of Web3? Here’s a quick guide to decode the jargon.
- Blockchain: A digital record-keeping system that securely logs and verifies transactions across a network of computers, ensuring transparency and trust without relying on central authorities and serving as a fundamental element of Web 3.0.
- Crypto payment gateway: A service that enables cryptocurrency payments for goods and services.
- Confirmed transaction: An approved and permanent transaction recorded on the blockchain.
- dApp: Short for decentralized application, like an app but running on the blockchain.
- Fetching: The act of gathering information from the blockchain.
- Non-Fungible Token (NFT): A unique digital item proving ownership of things like digital art or music.
- Overselling NFT: The practice of selling more digital collectibles than are actually available, causing issues.
- Randomization of NFT Metadata: The process of adding random elements to make each digital collectible unique.
- Smart contract: Self-executing contracts with the terms of the agreement written into code on the blockchain.
- Solidity: A programming language for creating smart contracts on the Ethereum blockchain.
- Stock: In the context of Web3, stock refers to the availability of a digital item for sale.
- Unboxing: The experience of revealing the unique features of an NFT or digital collectible.
- Wallet integrations: The process of connecting cryptocurrency wallets to a Web3 application.
- Web 3.0: The new era World Wide Web is marked by decentralization, user data control and advanced technologies like blockchain. It empowers users with data ownership, privacy and access to innovations like NFTs and dApps, transforming online experiences.
Want to dive deeper?
If you’re technically inclined, reach out at team@wondermakers.digital; we’re always ready to delve into the nitty-gritty details.
