## What I Learned This Week @Blockfuse Labs this week: Frontend Integration and Wallet Connection Using Wagmi

### Introduction

This week, I learned how to connect a frontend app to the blockchain using Wagmi. My goal was to understand how wallet connection works and how users can interact with a dApp directly from the user interface.

### What Is Frontend Integration

Frontend integration means connecting what users see on the screen with what happens on the blockchain. It makes a dApp functional and interactive, not just beautiful.

Through integration, users can connect wallets, view balances, and interact with smart contracts directly from the frontend. It bridges the gap between frameworks like React or Next.js and the blockchain network.

### Learning About Wagmi

Wagmi made everything easier. It is a React Hooks library designed to simplify wallet connections and blockchain interactions. It works perfectly with viem and RainbowKit, and provides built-in hooks for wallet management, account details, and contract actions.

### How I Connected a Wallet

Here’s a simple example I built while learning:

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

function ConnectWallet() {
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
  const { disconnect } = useDisconnect()
  const { isConnected, address } = useAccount()

  return (
    <div>
      {isConnected ? (
        <>
          <p>Connected: {address}</p>
          <button onClick={() => disconnect()}>Disconnect</button>
        </>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
    </div>
  )
}

This component allows users to connect MetaMask, display their wallet address, and disconnect when they wish. React automatically updates the UI whenever the wallet state changes.

### Things I Learned

1. Wagmi makes wallet connection setup simple and fast.
2. Hooks like `useAccount`, `useConnect`, and `useDisconnect` track wallet status.
3. `InjectedConnector` connects MetaMask easily.
4. React’s state updates the UI instantly after connection changes.

### Next Steps

Next, I want to learn how to read and write smart contract data from the frontend using Wagmi and viem. I also plan to enhance how my dApp manages wallet states and real-time blockchain data.

### Conclusion

This week, I finally understood how the frontend and blockchain communicate. Learning Wagmi gave me the confidence to build interactive frontends that connect to real blockchain actions. I am now ready to move deeper into smart contract interaction and full dApp development.