Integrating with Privy

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.

This page 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. Setup the AbstractPrivyProvider

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

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

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

​

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