​
Quickstart

Starting a new project? Use our CLI to bootstrap a new project with Abstract Global Wallet configured inside a Next.js app.

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

​
Manual Setup

Alternatively, integrate AGW into an existing React app using the steps below.

​
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?

OverviewIntegrating with RainbowKit