A Developer’s Guide to Installing and Using Base Smart Wallet in Your React App

Hey there, fellow coder! If you’re looking to integrate the Base Smart Wallet into your React app and retrieve wallet details—like the network name (spoiler: it’s “Base”!)—you’ve come to the right place. I’ve been tinkering with blockchain integrations lately, and I’m excited to share this step-by-step journey with you. By the end of this tutorial, you’ll have a React app that connects to the Base Smart Wallet, retrieves wallet info, and proudly displays “Base” as the network name. Let’s get started!

What We’re Building

We’re going to set up a simple React app that:

1. Installs the necessary tools to work with the Base Smart Wallet.

2. Connects to the wallet using a slick library (spoiler: it’s OnchainKit with RainbowKit).

3. Retrieves the wallet address and network details.

4. Displays the network name (“Base”) on the screen.

This is perfect if you’re building a dApp on Base—an Ethereum L2 that’s fast, cheap, and developer-friendly. Ready? Let’s roll!

Prerequisites

Before we jump in, make sure you’ve got:

• Node.js and npm installed (I’m using Node v18, but v16+ should work).

• A basic React app (we’ll create one together if you don’t have one).

• A Coinbase Wallet browser extension (optional, but handy for testing).

• A little patience and a coffee—I’ll keep this fun, I promise!

Step 1: Set Up Your React App

If you don’t already have a React app, let’s whip one up quick. Open your terminal and run:

npx create-react-app base-smart-wallet-demo --template typescript
cd base-smart-wallet-demo

I’m using TypeScript because it keeps things tidy, but you can skip the --template typescript part if you prefer plain JavaScript. Once it’s set up, start the app to make sure it’s working:

npm start

You should see the default React page in your browser at http://localhost:3000. Sweet—our canvas is ready!

Step 2: Install the Dependencies

To work with the Base Smart Wallet, we’ll use Coinbase’s OnchainKit paired with RainbowKit for a smooth wallet connection experience. These libraries make it dead simple to connect to wallets like Coinbase Smart Wallet and retrieve details. Here’s what we need:

Run this in your terminal:

npm install @coinbase/onchainkit @rainbow-me/rainbowkit wagmi viem

• @coinbase/onchainkit: Gives us tools to interact with Base and Smart Wallets.

• @rainbow-me/rainbowkit: A beautiful wallet connector UI.

• wagmi: Handles blockchain connections and state management.

• viem: A lightweight library for Ethereum interactions.

It might take a minute to install, so grab that coffee now if you haven’t already!

Step 3: Configure the Wallet and Network

Now, let’s wire up the app to connect to the Base network and support the Smart Wallet. Open src/App.tsx (or src/App.js if you’re not using TypeScript) and replace its contents with this:

import React from 'react';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { base } from 'wagmi/chains';
import { RainbowKitProvider, connectorsForWallets } from '@rainbow-me/rainbowkit';
import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
import '@rainbow-me/rainbowkit/styles.css';

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      coinbaseWallet({
        appName: 'Base Smart Wallet Demo',
        preference: 'smartWalletOnly', // Forces Smart Wallet usage
      }),
    ],
  },
]);

const wagmiConfig = createConfig({
  chains: [base],
  connectors,
  transports: {
    [base.id]: http(),
  },
});

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <RainbowKitProvider>
        <div className="App">
          <h1>Welcome to My Base Smart Wallet Demo</h1>
          {/* We’ll add wallet stuff here soon */}
        </div>
      </RainbowKitProvider>
    </WagmiProvider>
  );
}

export default App;

What’s Happening Here?

• We’re setting up Wagmi to connect to the Base network (base is pre-defined in wagmi/chains—how convenient!).

• We’re using RainbowKit to handle wallet connections, specifically configuring it for the Coinbase Smart Wallet with preference: 'smartWalletOnly'.

• The <WagmiProvider> and <RainbowKitProvider> wrap our app so all components can access wallet goodies.

If you save and check your app now, it won’t look much different yet—but the groundwork is laid.

Step 4: Add the Wallet Connect Button

Let’s give users a way to connect their wallet. Update the App function in src/App.tsx like this:

import { ConnectButton } from '@rainbow-me/rainbowkit';

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <RainbowKitProvider>
        <div className="App">
          <h1>Welcome to My Base Smart Wallet Demo</h1>
          <ConnectButton />
        </div>
      </RainbowKitProvider>
    </WagmiProvider>
  );
}

Save that, and boom—you’ve got a shiny “Connect Wallet” button! Click it, and if you’ve got the Coinbase Wallet extension installed, it’ll prompt you to connect. If not, it’ll guide you to create a Smart Wallet. Either way, you’re in the game now.

Step 5: Retrieve and Display Wallet Info

Now for the fun part—let’s retrieve the wallet address and show the Base network name. Update src/App.tsx again:

import React from 'react';
import { WagmiProvider, createConfig, http, useAccount, useNetwork } from 'wagmi';
import { base } from 'wagmi/chains';
import { RainbowKitProvider, connectorsForWallets, ConnectButton } from '@rainbow-me/rainbowkit';
import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
import '@rainbow-me/rainbowkit/styles.css';

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      coinbaseWallet({
        appName: 'Base Smart Wallet Demo',
        preference: 'smartWalletOnly',
      }),
    ],
  },
]);

const wagmiConfig = createConfig({
  chains: [base],
  connectors,
  transports: {
    [base.id]: http(),
  },
});

function App() {
  const { address, isConnected } = useAccount(); // Get wallet address and connection status
  const { chain } = useNetwork(); // Get network details

  return (
    <WagmiProvider config={wagmiConfig}>
      <RainbowKitProvider>
        <div className="App">
          <h1>Welcome to My Base Smart Wallet Demo</h1>
          <ConnectButton />
          {isConnected ? (
            <div>
              <p>Connected Address: {address}</p>
              <p>Network Name: {chain?.name || 'Base'}</p>
            </div>
          ) : (
            <p>Please connect your wallet to see details!</p>
          )}
        </div>
      </RainbowKitProvider>
    </WagmiProvider>
  );
}

export default App;

Breaking It Down

• useAccount: Grabs the connected wallet’s address and checks if it’s connected.

• useNetwork: Fetches the current network (spoiler: it’s Base!).

• We conditionally render the address and network name only when connected.

Save, connect your wallet, and voilà! You’ll see something like:

• “Connected Address: 0xYourWalletAddressHere”

• “Network Name: Base”

If chain?.name doesn’t show up right away, I hardcoded “Base” as a fallback since we’re locked to the Base network.

Step 6: Style It Up (Optional)

Let’s make it look a bit nicer. Add some CSS to src/App.css:

.App {
  text-align: center;
  padding: 50px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

p {
  font-size: 18px;
  margin: 10px 0;
}

Refresh your app, and it’ll feel a little more polished. Nothing fancy, just enough to keep it readable!

Wrapping Up

There you have it—a React app that installs and uses the Base Smart Wallet, retrieves wallet info, and displays the “Base” network name. I had a blast walking through this with you—it’s amazing how quickly we can get blockchain stuff running these days.

If you want to take it further, you could:

• Fetch the wallet balance using viem’s getBalance.

• Add a transaction button with OnchainKit’s <Fund> component.

• Play with multiple wallet options in RainbowKit.

Got questions or hit a snag? Drop me a line—I’m happy to debug with you. Happy coding, and welcome to the Base ecosystem!