Wallet integration

This page details how a dapp connects to a user's BeraSig wallet.

Install BeraSig Extension

The first thing you need to do is install the BeraSig Extension if you don't have it. You can find it here https://chromewebstore.google.com/detail/berasig/ckedkkegjbflcfblcjklibnedmfjppbj

Connect BeraSig Wallet using ethers

// Connect & get accounts
window.berasig.ethereum.request({method: 'eth_accounts'});
// Alias for connection
window.berasig.ethereum.request({method: 'eth_requestAccounts'});

import { BrowserProvider } from 'ethers'

const provider = new BrowserProvider(window.berasig.ethereum)
const accounts = await provider.send('eth_requestAccounts', [])
const network = await provider.getNetwork()
const balance = await provider.getBalance(accounts[0])

Connect BeraSig Wallet using rainbowkit

1. Ensure that you are using the latest versions of RainbowKit, Wagmi, and Viem

pnpm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x

1. Since Wagmi v2 requires TanStack Query as a peer dependency, install it using the command below:

pnpm i @tanstack/react-query

1. Here is an example configuration to integrate BerasigWallet with RainbowKit:

import { createConfig, http, WagmiProvider } from "wagmi";
import { berachainTestnetbArtio } from "wagmi/chains";
import { berasigWallet } from "@rainbow-me/rainbowkit/wallets";
import {
  ConnectButton,
  connectorsForWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

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

// Define wallet connectors
const connectors = connectorsForWallets([
  {
    groupName: "BeraChain",
    wallets: [berasigWallet],
  },
]);

// Configure Wagmi
const config = createConfig({
  connectors,
  chains: [berachainTestnetbArtio],
  transports: {
    [berachainTestnetbArtio.id]: http(),
  },
});

// Initialize React Query Client
const queryClient = new QueryClient();

// App Component
export default function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <ConnectButton />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}