Native Integration

Integrate AGW into an existing React application using the steps below, or

​

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

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

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.