Native Integration

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

​

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

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.

• Use the Abstract Client or Abstract hooks for:
  • Wallet actions. e.g. sendTransaction, deployContract, writeContract etc.
  • Smart contract wallet features. e.g. gas-sponsored transactions, session keys, transaction batches.
• Use Wagmi hooks and Viem functions for generic blockchain interactions, for example:
  • Reading data, e.g. Wagmi’s useAccount and useBalance hooks.
  • Writing data, e.g. Wagmi’s useSignMessage and Viem’s verifyMessage.

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