Skip to main content
The agw-react package includes an option to include Abstract Global Wallet as a connection option in the Dynamic DynamicWidget component.

AGW + Dynamic Example Repo

Use our example repo to quickly get started with AGW and Dynamic.

​
Installation

Install the required dependencies: 
npm install @abstract-foundation/agw-react @abstract-foundation/agw-client @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs-connectors/abstract-global-wallet-evm viem

​
Usage

​
1. Configure the DynamicContextProvider

Wrap your application in the DynamicContextProvider component: 
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { AbstractEvmWalletConnectors } from "@dynamic-labs-connectors/abstract-global-wallet-evm";
import { Chain } from "viem";
import { abstractTestnet, abstract } from "viem/chains"; // Use abstract for mainnet

export default function AbstractWalletWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <DynamicContextProvider
      theme="auto"
      settings={{
        overrides: {
          evmNetworks: [
            toDynamicChain(
              abstractTestnet,
              "https://abstract-assets.abs.xyz/icons/light.png"
            ),
          ],
        },
        environmentId: "your-dynamic-environment-id",
        walletConnectors: [AbstractEvmWalletConnectors],
      }}
    >
      {children}
    </DynamicContextProvider>
  );
}
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.

​
2. Render the DynamicWidget

Render the DynamicWidget component anywhere in your application: 
import { DynamicWidget } from "@dynamic-labs/sdk-react-core";

export default function Home() {
  return <DynamicWidget />;
}