Integrating with RainbowKit

RainbowKit is a React library that makes it easy to add wallet connection to your dapp. It’s intuitive, responsive and customizable. The agw-react package includes an option to include Abstract Global Wallet as a connection option in your RainbowKit ConnectButton.

​

Installation

Install the required dependencies: @abstract-foundation/agw-react, @rainbow-me/rainbowkit, wagmi, viem, and TanStack Query.

npm install @abstract-foundation/agw-react @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

​

Import

The agw-react package includes the abstractWallet connector you can use to add Abstract Global Wallet as a connection option in your RainbowKit ConnectButton.

import { abstractWallet } from "@abstract-foundation/agw-react/connectors";

​

Usage

1. Wrap your application in the wagmi, TanStack Query, and RainbowKit providers with the abstractWallet connector included as a connection option.
2. Render the ConnectButton.

​

1. Configure the Providers

Wrap your application in the following providers:

• WagmiProvider from wagmi.
• QueryClientProvider from @tanstack/react-query.
• RainbowKitProvider from @rainbow-me/rainbowkit.

​

2. Render the ConnectButton

Render the ConnectButton from @rainbow-me/rainbowkit anywhere in your app.

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

export default function AbstractWalletWrapper() {
  return <ConnectButton />;
}

It will add the Abstract section as an option for users to connect using Abstract Global Wallet: