Dynamic

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

yarn add @abstract-foundation/agw-react @abstract-foundation/agw-client @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs-connectors/abstract-global-wallet-evm viem

pnpm add @abstract-foundation/agw-react @abstract-foundation/agw-client @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs-connectors/abstract-global-wallet-evm viem

bun add @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>
  );
}

import { EvmNetwork } from "@dynamic-labs/sdk-react-core";
import { Chain } from "viem";
import { abstractTestnet, abstract } from "viem/chains";

export function toDynamicChain(chain: Chain, iconUrl: string): EvmNetwork {
  return {
    ...chain,
    networkId: chain.id,
    chainId: chain.id,
    nativeCurrency: {
      ...chain.nativeCurrency,
      iconUrl: "https://app.dynamic.xyz/assets/networks/eth.svg",
    },
    iconUrls: [iconUrl],
    blockExplorerUrls: [chain.blockExplorers?.default?.url],
    rpcUrls: [...chain.rpcUrls.default.http],
  } as EvmNetwork;
}

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

Abstract Global Wallet

Library Integrations

Abstract Client

Wallet Actions

Session Keys

FIAT On-ramp

Utils

AGW + Dynamic Example Repo

Installation

Usage

1. Configure the DynamicContextProvider

2. Render the DynamicWidget

AGW + Dynamic Example Repo

​Installation

​Usage

​1. Configure the DynamicContextProvider

​2. Render the DynamicWidget

Installation

Usage

1. Configure the DynamicContextProvider

2. Render the DynamicWidget