Loading video player...
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