> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abs.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# RainbowKit

> Learn how to integrate Abstract Global Wallet with RainbowKit.

The `agw-react` package includes an option to include Abstract Global Wallet
as a connection option in your [RainbowKit ConnectButton](https://www.rainbowkit.com/docs/connect-button).

<Card title="AGW + RainbowKit Example Repo" icon="github" href="https://github.com/Abstract-Foundation/examples/tree/main/agw-rainbowkit-nextjs">
  Use our example repo to quickly get started with AGW and RainbowKit.
</Card>

## Installation

Install the required dependencies:

<CodeGroup>
  ```bash npm theme={null}
  npm install @abstract-foundation/agw-react @abstract-foundation/agw-client @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
  ```

  ```bash yarn theme={null}
  yarn add @abstract-foundation/agw-react @abstract-foundation/agw-client @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
  ```

  ```bash pnpm theme={null}
  pnpm add @abstract-foundation/agw-react @abstract-foundation/agw-client @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
  ```

  ```bash bun theme={null}
  bun add @abstract-foundation/agw-react @abstract-foundation/agw-client @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
  ```
</CodeGroup>

## 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](https://www.rainbowkit.com/docs/connect-button).

```tsx theme={null}
import { abstractWallet } from "@abstract-foundation/agw-react/connectors";
```

## Usage

### 1. Configure the Providers

Wrap your application in the following providers:

* [WagmiProvider](https://wagmi.sh/react/api/WagmiProvider) from `wagmi`.
* [QueryClientProvider](https://tanstack.com/query/latest/docs/framework/react/reference/QueryClientProvider) from `@tanstack/react-query`.
* [RainbowKitProvider](https://www.rainbowkit.com/docs/custom-connect-button) from `@rainbow-me/rainbowkit`.

<CodeGroup>
  ```tsx Providers theme={null}
  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>
    );
  }
  ```

  ```tsx RainbowKit Config theme={null}
  import { connectorsForWallets } from "@rainbow-me/rainbowkit";
  import { abstractWallet } from "@abstract-foundation/agw-react/connectors";

  export const connectors = connectorsForWallets(
    [
      {
        groupName: "Abstract",
        wallets: [abstractWallet],
      },
    ],
    {
      appName: "Rainbowkit Test",
      projectId: "",
      appDescription: "",
      appIcon: "",
      appUrl: "",
    }
  );
  ```

  ```tsx Wagmi Config theme={null}
  import { createConfig } from "wagmi";
  import { abstractTestnet, abstract } from "wagmi/chains"; // Use abstract for mainnet
  import { createClient, http } from "viem";
  import { eip712WalletActions } from "viem/zksync";
  // + import connectors from your RainbowKit config

  export const config = createConfig({
    connectors,
    chains: [abstractTestnet],
    client({ chain }) {
      return createClient({
        chain,
        transport: http(),
      }).extend(eip712WalletActions());
    },
    ssr: true,
  });
  ```
</CodeGroup>

### 2. Render the ConnectButton

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

```tsx theme={null}
import { ConnectButton } from "@rainbow-me/rainbowkit";

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