# Frontend Integration with Wagmi and AppKit
for Smart Contract Interactions Week 15 of our web3 program at Blockfuse Labs brought our Solidity smart contracts to life by integrating them with user-friendly frontends using Wagmi and AppKit.

We focused on connecting these tools to interact seamlessly with smart contracts, creating intuitive Web3 DApps.

# **Wagmi:** Simplified Web3 Interactions
Wagmi, a React hooks library, simplifies blockchain interactions by abstracting wallet connections and contract calls.
We explored:
useAccount: Retrieves the connected wallet’s address and status.
useReadContract: Queries view functions, like fetching an ERC20 balance.
useWriteContract: Executes state-changing functions, such as transfers.etc

We configured Wagmi with a provider like MetaMask, targeting our foundry-deployed contracts in a Next.js app.

# **AppKit:** Streamlined Wallet Integration
AppKit, built on Wagmi, offers pre-built UI components for wallet connectivity. Using <ConnectButton /> and <WalletModal />, we enabled seamless wallet connections (MetaMask, WalletConnect, etc.), enhancing user onboarding with minimal code.

# Connecting Frontend to Smart Contracts
To interact with an ERC20 contract, we:
Imported the ABI: Used the ERC20 ABI to define the contract interface.

Configured Wagmi: Set up a provider with our chain’s RPC URL (e.g., Hardhat or Sepolia).

Read Contract Data: Used useReadContract to fetch data like a user’s token balance.

Here’s a simple example to read an ERC20 balance:javascript

import { useAccount, useReadContract } from 'wagmi';
import { erc20Abi, contractAddress } from './contractConfig';

function TokenBalance() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useReadContract({
    address: contractAddress,
    abi: erc20Abi,
    functionName: 'balanceOf',
    args: [address],
  });

  return (
    <div>
      {isConnected ? (
        <p>Your Balance: {balance ? balance.toString() : 'Loading...'}</p>
      ) : (
        <p>Please connect your wallet</p>
      )}
    </div>
  );
}

# Conclusion
Week 15 transformed our smart contracts into interactive DApps using Wagmi and AppKit. These tools bridged backend logic with frontend UX, making Web3 accessible. I’m excited to explore advanced UI patterns or cross-chain features next week!