The agw-react package includes an option to include Abstract Global Wallet as a connection option in your RainbowKit ConnectButton.

AGW + RainbowKit Example Repo

Use our example repo to quickly get started with AGW and RainbowKit.

​
Installation

Install the required dependencies: 
npm install @abstract-foundation/agw-react @abstract-foundation/agw-client @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. Configure the Providers

Wrap your application in the following providers: 
import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
// + import config from your wagmi config

const client = new QueryClient();

export default function AbstractWalletWrapper() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider theme={darkTheme()}>
          {/* Your application components */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

​
2. Render the ConnectButton

Render the ConnectButton from @rainbow-me/rainbowkit anywhere in your app. 
import { ConnectButton } from "@rainbow-me/rainbowkit";

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