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

AGW + ConnectKit Example Repo

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

​
Installation

Install the required dependencies:

npm install @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi viem connectkit @tanstack/react-query @rainbow-me/rainbowkit

​
Usage

​
1. Configure the Providers

Wrap your application in the required providers:

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>
  );
}

​
2. Render the ConnectKitButton

Render the ConnectKitButton component anywhere in your application:

import { ConnectKitButton } from "connectkit";

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