Frontend Integration

A deployed contract is only useful when applications can call it. The ABI describes every function and event in JSON form; frontends use that ABI with libraries like viem and wagmi to read state and submit transactions from React or other frameworks.

Import ABIs from your build artifacts or generate them with forge build. TypeScript projects can use abitype or wagmi CLI codegen for autocomplete on function names and argument types, reducing runtime errors from mismatched parameters.

Configure chain IDs and RPC endpoints in wagmi config so your app prompts users to switch networks when needed. Listen to contract events with useWatchContractEvent or viem's getLogs to update UI state after deposits, mints, or votes confirm on chain.