Web3 Frontend Architecture: Core Providers, React Hooks, and UI Kits

Building decentralized applications (dApps) on Ethereum requires handling wallet connections, network switching, and contract interactions. ethers, wagmi, and connectkit solve different parts of this puzzle. ethers provides the core logic to talk to the blockchain. wagmi wraps that logic in React Hooks for state management. connectkit provides the visual components for users to actually connect their wallets. Let's compare how they handle common engineering tasks.

🔌 Connecting a Wallet: Manual vs Hooks vs UI

ethers requires you to manually request access from the browser provider (like MetaMask).

• You must handle events like accountsChanged yourself.
• No built-in React state management.

// ethers: Manual connection
import { BrowserProvider } from "ethers";

async function connect() {
  if (window.ethereum) {
    await window.ethereum.request({ method: "eth_requestAccounts" });
    const provider = new BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();
    const address = await signer.getAddress();
    console.log("Connected:", address);
  }
}

wagmi provides a hook to access connection state instantly.

• Handles reconnection and network switching automatically.
• Returns loading and error states out of the box.

// wagmi: Hook-based connection
import { useAccount } from "wagmi";

function Profile() {
  const { address, isConnected, isLoading } = useAccount();

  if (isLoading) return <div>Connecting...</div>;
  if (isConnected) return <div>Address: {address}</div>;
  return <div>Not connected</div>;
}

connectkit provides a pre-built button component.

• Zero logic required in your component.
• Handles modal, QR codes, and error states visually.

// connectkit: UI Component
import { ConnectButton } from "connectkit";

function Navbar() {
  return (
    <nav>
      <h1>My dApp</h1>
      <ConnectButton /> {/* Handles all connection UI */}
    </nav>
  );
}

📖 Reading Contract Data: Raw Calls vs Hooks

ethers uses a Contract instance to call read-only functions.

• You must manage the provider and ABI manually.
• Great for one-off scripts or backend tasks.

// ethers: Reading data
import { Contract } from "ethers";

const abi = ["function balanceOf(address) view returns (uint256)"];
const contract = new Contract(address, abi, provider);
const balance = await contract.balanceOf(userAddress);
console.log(balance.toString());

wagmi uses useReadContract to fetch data reactively.

• Automatically refetches when address or chain changes.
• Returns data, isLoading, and error states.

// wagmi: Reading data
import { useReadContract } from "wagmi";

function Balance({ address }) {
  const { data } = useReadContract({
    address: contractAddress,
    abi: contractAbi,
    functionName: "balanceOf",
    args: [address],
  });

  return <div>Balance: {data?.toString()}</div>;
}

connectkit does not handle contract logic directly.

• It relies on wagmi hooks for data.
• Focuses purely on the user identity and connection UI.

// connectkit: Displaying identity
import { useConnectKit } from "connectkit";

function UserProfile() {
  const { isSignedIn, address } = useConnectKit();
  // Use wagmi hooks for actual contract data
  return isSignedIn ? <div>User: {address}</div> : null;
}

⚙️ Configuration and Setup

ethers has no global config.

• You instantiate providers and signers where needed.
• More boilerplate but total flexibility.

// ethers: Setup
import { BrowserProvider } from "ethers";
const provider = new BrowserProvider(window.ethereum);
// Use provider instance directly

wagmi requires a top-level WagmiProvider config.

• You define chains and transports once at the root.
• Enforces a consistent configuration across the app.

// wagmi: Setup
import { createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";

const config = createConfig({
  chains: [mainnet],
  transports: { [mainnet.id]: http() },
});

// Wrap app with WagmiProvider using this config

connectkit wraps the wagmi config with UI options.

• You pass your wagmi config and API keys (for ENS/avatars).
• Customizes the look and feel of the modal.

// connectkit: Setup
import { ConnectKitProvider } from "connectkit";

function App() {
  return (
    <WagmiProvider config={config}>
      <ConnectKitProvider apiKey="..."> {/* Adds UI layer */}
        <MyApp />
      </ConnectKitProvider>
    </WagmiProvider>
  );
}

🛠️ Maintenance and Ecosystem

ethers is a mature, standalone library.

• Version 6 is the current standard; Version 5 is in maintenance.
• Widely used in backend scripts and older React apps.

wagmi is the React standard.

• Version 2 shifted to viem for underlying logic (lighter than ethers).
• Actively maintained with strong TypeScript support.

connectkit is a UI specialist.

• Depends on wagmi.
• Updated frequently to support new wallets and UI trends.

📊 Summary: Layer of Abstraction

💡 The Big Picture

These tools are not mutually exclusive — they are layers of a stack.

• ethers is the engine. Use it if you need to talk to Ethereum without React or want full manual control.
• wagmi is the transmission. Use it to connect that engine to your React UI efficiently.
• connectkit is the dashboard. Use it when you want a professional-looking connection interface without the design work.

For most modern React dApps, the standard architecture is wagmi + connectkit. You would only reach for raw ethers if you are writing backend scripts or have very specific provider requirements that hooks do not cover.