> ## 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.

# ConnectKit

> Learn how to integrate Abstract Global Wallet with ConnectKit.

The `agw-react` package includes an option to include Abstract Global Wallet as a connection option in the ConnectKit `ConnectKitButton` component.

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

## Installation

Install the required dependencies:

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

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

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

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

## Usage

### 1. Configure the Providers

Wrap your application in the required providers:

<CodeGroup>
  ```tsx Providers theme={null}
  import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
  import { WagmiProvider } from "wagmi";
  import { ConnectKitProvider } from "connectkit";

  const queryClient = new QueryClient();

  export default function AbstractWalletWrapper({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <ConnectKitProvider>
            {/* Your application components */}
            {children}
          </ConnectKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    );
  }
  ```

  ```tsx Wagmi Config theme={null}
  import { createConfig, http } from "wagmi";
  import { abstractTestnet, abstract } from "viem/chains"; // Use abstract for mainnet
  import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";

  export const config = createConfig({
    connectors: [abstractWalletConnector()],
    chains: [abstractTestnet],
    transports: {
      [abstractTestnet.id]: http(),
    },
    ssr: true,
  });
  ```
</CodeGroup>

### 2. Render the ConnectKitButton

Render the [ConnectKitButton](https://docs.family.co/connectkit/connect-button) component anywhere in your application:

```tsx theme={null}
import { ConnectKitButton } from "connectkit";

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