Overview
This tutorial demonstrates how to integrate React with the powerful capabilities of Wagmi React Hooks and Subsquid indexing SDK. The guide walks developers through creating a decentralized airdrop application that distributes tokens to qualifying wallet addresses.
Key Technologies
The project utilizes:
- Subsquid SDK — blockchain indexing for historical data extraction
- Wagmi Hooks — React hooks for Ethereum interactions
- MetaMask — wallet connection via browser extension
- React & Next.js — frontend framework
- TypeScript — type safety
Core Components
Smart Contracts
The tutorial deploys two contracts via Thirdweb:
- An ERC20 token contract for distribution
- An AirdropERC20 contract to manage token distribution
Data Indexing
A Subsquid indexer identifies qualifying addresses by tracking non-zero value transactions to the Uniswap V3 router on Ethereum mainnet between specified block ranges.
Frontend Implementation
The React application includes:
- Wallet connection via MetaMask
- Token information display (name, balance, total supply)
- Allowance approval functionality
- Recipient fetching via GraphQL queries
- Airdrop execution to qualifying addresses
Key Takeaway
Combining React, Wagmi, and Squid SDK enables developers to deploy smart contracts, enable user interaction, set up blockchain indexers, and build complete token distribution systems.