RainbowKit

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

yarn add @abstract-foundation/agw-react @abstract-foundation/agw-client @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

pnpm add @abstract-foundation/agw-react @abstract-foundation/agw-client @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

bun add @abstract-foundation/agw-react @abstract-foundation/agw-client @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

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

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: "",
  }
);

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