Base Blockchain  

Developing a dApp Frontend for Base with Wagmi + Viem

Introduction

As the Base blockchain grows in popularity, many developers are looking for simple ways to build fast and user-friendly dApps on it. In this article, we will see how to create a basic frontend for a decentralized app (dApp) using React, Wagmi for wallet integration, and Viem for interacting with the blockchain. Wagmi is a set of helpful React hooks that make it easy to connect to wallets like MetaMask. Viem is a modern Ethereum library that helps you send transactions and read data on-chain. Together, they make it simple and efficient to build frontend apps for the Base chain.

What You’ll Learn

  • How to set up a React project for Base
  • How to connect a wallet using Wagmi
  • How to send and read transactions with Viem
  • How to make your dApp work on the Base testnet (Base Sepolia)

Step 1. Set Up Your React Project.

Start by creating a new React app using Vite or Create React App.

npm create vite@latest base-dapp -- --template react
cd base-dapp
npm install

Now, install the dependencies you need.

npm install wagmi viem ethers

Step 2. Configure Wagmi + Viem for Base.

Open your main.jsx or App.jsx and add.

import React from 'react';
import {
  WagmiConfig,
  createConfig,
  configureChains
} from 'wagmi';
import { sepolia } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import {
  getDefaultWallets,
  RainbowKitProvider,
  ConnectButton
} from '@rainbow-me/rainbowkit';

import '@rainbow-me/rainbowkit/styles.css';

const { chains, publicClient } = configureChains(
  [sepolia],
  [publicProvider()]
);

const { connectors } = getDefaultWallets({
  appName: 'Base dApp',
  projectId: 'YOUR PROJECT_ID', // Paste your real WalletConnect Project ID here
  chains,
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
});

function App() {
  return (
    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider chains={chains}>
        <ConnectButton />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default App;
  • This code sets up a simple React dApp frontend using Wagmi and RainbowKit to connect wallets like MetaMask on the Sepolia testnet.
  • It configures the blockchain network with configureChains, initializes wallet connectors with a WalletConnect project ID, and wraps the app in WagmiConfig and RainbowKitProvider to enable wallet connection features.
  • The ConnectButton provides a UI for users to connect their wallet.

Replace 'YOUR_PROJECT_ID' with the WalletConnect Project ID you got from WalletConnect Cloud.

you have to update Update main.jsx also.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  • This code is the entry point of the React application. It imports React and ReactDOM, along with the main App component and the CSS file.
  • It selects the HTML element with the ID root and renders the App component inside it using ReactDOM.createRoot. Wrapping it in React.StrictMode helps catch potential problems and ensures best practices during development.

Step 3. Run the Project.

npm run dev

Open http://localhost:5173 in your browser, and you’ll see the Connect Wallet button.

Connect wallet

Connecting Your Wallet

When you click the Connect Wallet button, a pop-up will appear showing popular wallets like MetaMask, Coinbase Wallet, and Rainbow. This interface is powered by RainbowKit and makes it easy for users to link their wallet securely with just one click.

MetaMask

Grant Permissions

After choosing a wallet like MetaMask, users will be prompted to approve the connection and select the networks they wish to connect to, such as Base Mainnet or Base Sepolia.

Grant Permissions

Disconnect wallet

Here you have an option to disconnect your wallet.

Disconnect wallet

Conclusion

You have successfully created a minimal but functional dApp frontend on Base using Wagmi, Viem, and RainbowKit. This setup not only gets your wallet connection and chain configuration working fast but also lays the foundation for more advanced features. From here, you can add support for interacting with smart contracts, displaying NFT metadata, transferring ERC-20 tokens, or even building dashboards for DeFi tools. This project is a great starting point for launching full-scale dApps on the Base blockchain.

Membership not found