Token Gate dApp: React Frontend + Solidity Smart Contract | Full Demo (Conflux Testnet)

Description

In this video, we connect a React frontend to our Token Gate smart contract and demo real on-chain access control. If you missed Part 1 (smart contract build), watch that first — this video focuses on the frontend integration and live demo. 🔐 What is Token Gate? The owner defines access rules (ERC-20 or NFT + minimum balance). Users who meet any active rule get access (OR logic). Everyone else is denied. 🖥️ What you'll see in the demo • Wallet connect + network (Conflux eSpace Testnet) • Owner vs user role and access status • Active access rules (token address + min balance) • Gated action: postMessage on-chain • Switching wallets → access Granted / Denied 💻 Code walkthrough • App.tsx — wagmi, contract address, ABI, writeContract • Calling addRule, toggleRule, postMessage from the UI • tokengated.sol — rules, checkAccess, events 📁 Project stack • Solidity ^0.8.20 • React + Vite + wagmi + viem • Conflux eSpace Testnet (Chain ID: 71) ⏱️ Timestamps 0:00 — Intro 0:39 — Live demo (owner access, rules, post message) 1:09 — Switch wallet → access denied 1:44 — Switch back → access granted 2:47 — Code: App.tsx & smart contract connection 4:29 — tokengated.sol recap 5:09 — Outro 🔗 Links GitHub: github.com/Vikash-8090-Yadav/tokenGated 📌 Previous video Smart Contract: Token Gate — [link to Part 1] 👍 Like & subscribe for more Web3 builds 💬 Comment if you want: Hardhat deploy, NFT rules, or transfer on TestToken #Solidity #React #Web3 #dApp #Conflux #TokenGating #wagmi #SmartContracts #BlockchainDeveloper