Topics In Demand
Notification
New

No notification found.

Steps to build a Web3 application with React, Vite, and Ethers.js
Steps to build a Web3 application with React, Vite, and Ethers.js

11

0

Blog 3/3 of our Web3 tri-series is here. If you missed the previous articles, be sure to check out Web3: The Future of the internet and how to build on it and A step-by-step guide for smart contract deployment using Hardhat. After exploring the fundamentals of Web3 and learning how to deploy smart contracts, it's time to put these concepts into practice by building a complete decentralized application. In this blog, we'll create something practical and impactful - a crypto donation platform.

Imagine a world where sending and receiving crypto donations is as easy as sharing a link. No intermediaries, no fuss—just seamless, decentralized transactions powered by blockchain technology. That’s exactly what I’ll guide you to build - a Web3-powered donation platform that lets users connect their MetaMask wallet, generate a unique donation link, and receive crypto directly from supporters with just a few clicks. I’ll share key features, code snippets, tips, and steps to help you build your own Web3 application.

Key features of the Web3 donation platform

  • Wallet connection: Enable users to connect their MetaMask wallet effortlessly, integrating seamlessly with the Ethereum ecosystem.
    Think of it as a digital handshake between your app and the blockchain.
  • Unique donation link: Generate personalized URLs containing the recipient’s wallet address, making it easy to share and receive crypto donations.
    It’s like Venmo, but for crypto.
  • Donation form: Allow donors to add their name and a message, creating a more personal and meaningful donation experience.
    Because who doesn’t love a heartfelt note with their crypto?
  • Crypto transactions: Trigger MetaMask for authentication and transaction confirmation, ensuring fast and secure payments.
    Ditch clunky payment gateways and embrace decentralized magic.
  • Smart contract integration: Build and deploy a Solidity smart contract using Hardhat to handle transactions transparently on the blockchain.
    Think of it as the brain of the operation—transparent, and tamper-proof.

Tech stack

  • Frontend: React with Vite 
  • Blockchain interaction: Ethers.js 
  • Smart contract: Solidity and Hardhat 
  • Wallet integration: MetaMask 

Step-by-step Web3 donation app development process, with code snippets

Setup the project with React and Vite. Use Vite as the build tool because of its fast development environment and efficient Hot Module Replacement (HMR). Use the following commands to create the project:

To install ethers.js for interacting with the blockchain:

Note: The smart contract for this application was created using Solidity and deployed using Hardhat.

Landing page and connecting to MetaMask

The landing page of the application provides users with a brief introduction to its functionality.

Users can then click on the Connect Your Wallet button, allowing them to log in using MetaMask and generate a unique transaction link.

To enable user authentication and blockchain transactions, we need to connect MetaMask with ethers.js. Below is the function to initialize the provider and signer:

How it works:

  • Checks if MetaMask is installed.
  • If not installed, uses a default provider.
  • If installed, connects to the MetaMask wallet and retrieves the user's address.
  • Redirects the user to the next page to generate a transaction link.

Connect with MetaMask

Generating and sharing the donation link

Once the user successfully connects their wallet, they are redirected to a new page where a unique URL is generated. This URL embeds their wallet address, allowing them to easily share it for receiving donations.

Users can copy this link and share it on their blog, website, or social media.

Crypto Donation link generation

Donation form and transaction processing

When a donor clicks the shared link, they are presented with a form to enter:

  • Sender’s name
  • Custom message
  • Cryptocurrency amount to send

The following function handles the transaction:

Crypto donation

Testing the application

Since the application runs on the local machine, you can test the functionality with the following steps:

  1. Connect to MetaMask wallet.
  2. Generate a transaction link and open it in another browser window.
  3. Enter sender details and sent a test transaction.
  4. Verify the transaction on Etherscan with these below steps.
    1. To verify the transaction, check the meta mask transition history.
    2. Clicking on a transaction in the history will typically open a link to Etherscan, where you can view detailed information about the transaction (e.g., block confirmation, gas used, etc.).

Final thoughts

This project showcases a Web3 application where a traditional frontend seamlessly interacts with decentralized technologies. While it uses centralized hosting for accessibility, blockchain handles transactions, ensuring transparency and security in a decentralized environment.

I hope this guide helps you understand the key components of a Web3 app! Feel free to experiment and enhance the project by integrating additional blockchain features. If you encounter any challenges or seek expert guidance, our team is ready to assist. Contact us today to connect with a Web3 specialist and turn your innovative ideas into reality.


That the contents of third-party articles/blogs published here on the website, and the interpretation of all information in the article/blogs such as data, maps, numbers, opinions etc. displayed in the article/blogs and views or the opinions expressed within the content are solely of the author's; and do not reflect the opinions and beliefs of NASSCOM or its affiliates in any manner. NASSCOM does not take any liability w.r.t. content in any manner and will not be liable in any manner whatsoever for any kind of liability arising out of any act, error or omission. The contents of third-party article/blogs published, are provided solely as convenience; and the presence of these articles/blogs should not, under any circumstances, be considered as an endorsement of the contents by NASSCOM in any manner; and if you chose to access these articles/blogs , you do so at your own risk.


© Copyright nasscom. All Rights Reserved.