​
Quickstart

Starting a new project? Use our CLI to bootstrap a new project with Abstract Global Wallet.

npx @abstract-foundation/create-abstract-app@latest my-app

​
Library Integrations

Native Integration

Add AGW as the native wallet connection option to your React application.

Privy

Integrate AGW into an existing Privy application.

ConnectKit

Integrate AGW as a wallet connection option to an existing ConnectKit application.

Dynamic

Integrate AGW as a wallet connection option to an existing Dynamic application.

RainbowKit

Integrate AGW as a wallet connection option to an existing RainbowKit application.

Thirdweb

Integrate AGW as a wallet connection option to an existing thirdweb application.

​
Native Integration

Alternatively, integrate AGW into an existing React application using the steps below, or

watch the video tutorial for a step-by-step walkthrough.

​
1. Install agw-react

To install the agw-react package, run the following command:

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

​
2. Setup the AbstractWalletProvider

Wrap your application in the AbstractWalletProvider component to enable the use of the package’s hooks and components throughout your application.

import { AbstractWalletProvider } from "@abstract-foundation/agw-react";

const config = {
  testnet: true, // Required
  // Optionally, provide your own RPC URL (learn more: https://viem.sh/docs/clients/transports/http.html)
  // transport: http("https://your.abstract.node.example.com/rpc") // Optional
};

const App = () => {
  return (
    <AbstractWalletProvider config={config}>
      {/* Your application components */}
    </AbstractWalletProvider>
  );
};

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

The AbstractWalletProvider wraps your application in both the WagmiProvider and QueryClientProvider, meaning you can use the hooks and features of these libraries within your application.

​
3. Use React Hooks

With the provider setup, you can now use any of the available hooks from the agw-react package inside any component within your application. To prompt the user to sign in with AGW, use the useLoginWithAbstract hook.

import { useLoginWithAbstract } from "@abstract-foundation/agw-react";

export default function SignIn() {
  // login function to prompt the user to sign in with AGW.
  const { login } = useLoginWithAbstract();

  return <button onClick={login}>Connect with AGW</button>;
}

​
4. Use wagmi hooks

Once the user has signed in, you can begin to use any of the agw-react hooks, such as useWriteContractSponsored as well as all of the existing wagmi hooks; such as useAccount, useBalance, etc.

All transactions will be sent from the connected AGW smart contract wallet (i.e. the tx.from address will be the AGW smart contract wallet address).

import { useAccount, useSendTransaction } from "wagmi";

export default function SendTransactionWithWagmi() {
  const { address, status } = useAccount();
  const { sendTransaction, isPending } = useSendTransaction();

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: "0x273B3527BF5b607dE86F504fED49e1582dD2a1C6",
          data: "0x69",
        })
      }
      disabled={isPending || status !== "connected"}
    >
      {isPending ? "Sending..." : "Send Transaction"}
    </button>
  );
}

​
5. Use the client directly

The AbstractClient also exposes a set of actions you can use to interact with the wallet, including deploying a contract, sending a transaction, or calling a contract function.

import { useGlobalWalletSignerClient } from "@abstract-foundation/agw-react";

export default function SendTransaction() {
  const { data: client } = useGlobalWalletSignerClient();

  async function submitTransaction() {
    const hash = await client.sendTransaction({
      to: "0x273B3527BF5b607dE86F504fED49e1582dD2a1C6",
      data: "0x69",
    });
  }

  return <button onClick={submitTransaction}>Submit Transaction</button>;
}

Was this page helpful?

OverviewConnectKit