Privy powers the login screen and EOA creation of Abstract Global Wallet, meaning you can use Privy’s features and SDKs natively alongside AGW.

The agw-react package provides an AbstractPrivyProvider component, which wraps your application with the PrivyProvider as well as the Wagmi and TanStack Query providers; allowing you to use the features of each library with Abstract Global Wallet.

AGW + Privy Example Repo

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

​
Installation

Install the required dependencies:

npm install @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi viem @tanstack/react-query

​
Usage

This section assumes you have already created an app on the Privy dashboard.

​
1. Enable Abstract Integration

From the Privy dashboard, navigate to Ecosystem > Integrations.

Scroll down to find Abstract and toggle the switch to enable the integration.

​
2. Configure the AbstractPrivyProvider

Wrap your application in the AbstractPrivyProvider component, providing your as the appId prop.

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

const App = () => {
  return (
    <AbstractPrivyProvider appId="your-privy-app-id">
      {children}
    </AbstractPrivyProvider>
  );
};

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.

​
3. Login users

Use the useAbstractPrivyLogin hook to prompt users to login with Abstract Global Wallet.

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

const LoginButton = () => {
  const { login, link } = useAbstractPrivyLogin();
  return <button onClick={login}>Login with Abstract</button>;
};

  • The login function uses Privy’s loginWithCrossAppAccount function to authenticate users with their Abstract Global Wallet account.

  • The link function uses Privy’s linkCrossAppAccount function to allow authenticated users to link their existing account to an Abstract Global Wallet.

​
4. Use hooks and functions

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 Example() {
  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>
  );
}