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

AGW + Thirdweb Example Repo

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

​
Installation

Install the required dependencies:

npm install @abstract-foundation/agw-react wagmi viem thirdweb

​
Usage

​
1. Configure the ThirdwebProvider

Wrap your application in the ThirdwebProvider component.

import { ThirdwebProvider } from "thirdweb/react";

export default function AbstractWalletWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThirdwebProvider>
      {/* Your application components */}
    </ThirdwebProvider>
  );
}

Next.js App Router: If you are using Next.js App Router, create a new component and add the use client directive at the top of your file (see example) and wrap your application in this component (see example).

​
2. Render the ConnectButton

Render the ConnectButton component anywhere in your application, and include abstractWallet in the wallets prop.

import { abstractWallet } from "@abstract-foundation/agw-react/thirdweb";
import { createThirdwebClient } from "thirdweb";
import { abstractTestnet } from "thirdweb/chains";
import { ConnectButton } from "thirdweb/react";

export default function Home() {
  const client = createThirdwebClient({
    clientId: "your-thirdweb-client-id-here",
  });

  return (
    <ConnectButton
      client={client}
      wallets={[abstractWallet()]}
      // Optionally, configure gasless transactions via paymaster:
      accountAbstraction={{
        chain: abstractTestnet,
        sponsorGas: true,
      }}
    />
  );
}

Was this page helpful?

RainbowKitAbstractWalletProvider