Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Abstract Chain is shutting down. Start migrating your assets. Migrate
Learn how to integrate Abstract Global Wallet with Dynamic.
agw-react package includes an option to include Abstract Global Wallet as a connection option in the Dynamic DynamicWidget component.
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
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;
}
use client directive at the top of your file (see
example)
and wrap your application in this component.import { DynamicWidget } from "@dynamic-labs/sdk-react-core";
export default function Home() {
return <DynamicWidget />;
}
Was this page helpful?