0

AGW Provider

PreviousNext

An AGW wrapper component for using AGW Reusables.

Note: this component is already configured as part of the installation process.

The AGW Provider wraps your application in the required provider components (wagmi and Tanstack Query) required to use the features of AGW Reusables.

Installation

pnpm dlx shadcn@latest add "https://build.abs.xyz/r/agw-provider.json"

Usage

Wrap your entire application with the AGW Provider in your root layout:

app/layout.tsx
import { NextAbstractWalletProvider } from "@/components/agw-provider";
import { Toaster } from "@/components/ui/sonner";
import "./globals.css";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <NextAbstractWalletProvider>
        <body>
          {children}
          <Toaster />
        </body>
      </NextAbstractWalletProvider>
    </html>
  );
}

What's included

This command installs the following files:

agw-provider.tsx

A wrapper component to enable the use of AGW Reusables, wagmi, and Tanstack Query.

"use client";

import { AbstractWalletProvider } from "@abstract-foundation/agw-react";
import { QueryClient } from "@tanstack/react-query";
import { chain } from "@/config/chain";

// Learn more about Tanstack Query: https://tanstack.com/query/latest/docs/framework/react/reference/QueryClientProvider
// We create our own query client to share our app's query cache with the AbstractWalletProvider.
const queryClient = new QueryClient();

export function NextAbstractWalletProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    // "chain" is loaded from @config/chain and is environment-aware.
    // i.e. use testnet or mainnet based on the environment (local, dev, prod)
    <AbstractWalletProvider chain={chain} queryClient={queryClient}>
      {children}
    </AbstractWalletProvider>
  );
}

chain.ts

A global chain constant that is environmentally aware and automatically selects the appropriate Abstract network (testnet for local development, mainnet for production).

import { abstractTestnet } from "viem/chains";

export const chain =
  process.env.NODE_ENV === "development"
    ? abstractTestnet // Local development: Use Abstract Testnet
    : abstractTestnet; // Production: Use Abstract Testnet (change to mainnet when ready)

viem-clients.ts

Viem includes ZK stack specific extensions; this file contains a pre-configured Viem public and wallet client configurations for ZK Stack chains (i.e., Abstract).

import { createPublicClient, createWalletClient, http } from "viem";
import { eip712WalletActions, publicActionsL2 } from "viem/zksync";
import { chain } from "./chain";

/**
 * Viem specific extensions for ZK Stack chains (i.e., Abstract)
 * Learn more: https://viem.sh/zksync/
 */

// Global Viem public client instance
export const publicClient = createPublicClient({
  chain: chain,
  transport: http(),
}).extend(publicActionsL2());

// Global Viem wallet client instance
export const walletClient = createWalletClient({
  chain: chain,
  transport: http(),
}).extend(eip712WalletActions());