Skip to main content
Integrate AGW into an existing React application using the steps below, or watch the video tutorial for a step-by-step walkthrough.

​
1. Install Abstract Global Wallet

Install the required dependencies: 
npm install @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi [email protected] @tanstack/react-query

yarn add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi [email protected] @tanstack/react-query

pnpm add @abstract-foundation/agw-react @abstract-foundation/agw-client wagmi [email protected] @tanstack/react-query

bun add @abstract-foundation/agw-react @abstract-foundation/agw-client 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";
import { abstractTestnet, abstract } from "viem/chains"; // Use abstract for mainnet

const App = () => {
  return (
    <AbstractWalletProvider chain={abstractTestnet}>
      {/* 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. Login with AGW

With the provider setup, prompt users to sign in to your application with their Abstract Global Wallet using 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 the Wallet

With the AGW connected, prompt the user to approve sending transactions from their wallet. 
import { useAbstractClient } from "@abstract-foundation/agw-react";

export default function SendTransactionButton() {
  // Option 1: Access and call methods directly
  const { data: client } = useAbstractClient();

  async function sendTransaction() {
    if (!client) return;

    // Submits a transaction from the connected AGW smart contract wallet.
    const hash = await client.sendTransaction({
      to: "0x273B3527BF5b607dE86F504fED49e1582dD2a1C6",
      data: "0x69",
    });
  }

  return <button onClick={sendTransaction}>Send Transaction</button>;
}

import { useWriteContractSponsored } from "@abstract-foundation/agw-react";
import { parseAbi } from "viem";
import { getGeneralPaymasterInput } from "viem/zksync";

export default function SendTransaction() {
  const { writeContractSponsoredAsync } = useWriteContractSponsored();

  async function sendSponsoredTransaction() {
    const hash = await writeContractSponsoredAsync({
      abi: parseAbi(["function mint(address to, uint256 amount)"]),
      address: "0xC4822AbB9F05646A9Ce44EFa6dDcda0Bf45595AA",
      functionName: "mint",
      args: ["0x273B3527BF5b607dE86F504fED49e1582dD2a1C6", BigInt(1)],
      paymaster: "0x5407B5040dec3D339A9247f3654E59EEccbb6391",
      paymasterInput: getGeneralPaymasterInput({
        innerInput: "0x",
      }),
    });
  }

  return (
    <button onClick={sendSponsoredTransaction}>
      Send Sponsored Transaction
    </button>
  );
}

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