Install Abstract Global Wallet

Install Abstract Global Wallet if the desired component you wish to use requires account abstraction

Install web3 dependencies

npm install @abstract-foundation/agw-react wagmi viem@2.x @tanstack/react-query

Abstract provider setup

Create a new file for your Abstract context provider, since we are going to be calling provider functions on the client it cannot live on the server side so we have to declare file with the 'use client' directive.

For this example we will create a file named context/AbstractProvider.tsx outside our app directory.

"use client";

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

export default function AbstractProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const config = {
    testnet: true,
  };

  return (
    <AbstractWalletProvider config={config}>{children}</AbstractWalletProvider>
  );
}

Layout setup

Next in our app/layout.tsx file, we will import our AbstractProvider context provider and wrap the children with it.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

import AbstractProvider from "@/context/AbstractProvider"; // import the AbstractProvider

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Abstract Global Wallet Example App",
  description: "Powered by Abstract, built by Gizmolab"
};

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {

  return (
    <html lang="en">
      <body className={inter.className}>
        <AbstractProvider>{children}</AbstractProvider> {/* wrap the children with the AbstractProvider */}
      </body>
    </html>
  )
}