); } ``` # isZeroDevConnector ### Summary Utility to determine if a wallet connector is a ZeroDev connector. This is useful for interacting with ZeroDev and keep typesafety. ### Annotation TypeScript ```ts isZeroDevConnector(connector: WalletConnector): boolean ``` ### Examples Get the ZeroDev ECDSAProvider from the connector ```tsx import { isZeroDevConnector } from '@dynamic-labs/ethereum-aa'; const App = () => { const { primaryWallet } = useDynamicContext(); useEffect(() => { const { connector } = primaryWallet; if (isZeroDevConnector(connector)) { const ecdsaProvider = connector.getAccountAbstractionProvider(); } }, [primaryWallet]); ... } ``` # isAuthenticatedWithAWallet This utility can be used check if the user has authenticated with a wallet. ```TypeScript import { isAuthenticatedWithAWallet } from "@dynamic-labs/sdk-react-core"; const App = () => { const authenticatedWithAWallet = isAuthenticatedWithAWallet(user) ... } ``` # isLedgerSolanaWallet Determine if a given wallet is connected as a Ledger Solana wallet. ```TypeScript import { useDynamicContext } from '@dynamic-labs/sdk-react-core' import { isLedgerSolanaWallet } from "@dynamic-labs/solana-core"; const App = () => { const { primaryWallet } = useDynamicContext() if (primaryWallet && isLedgerSolanaWallet(primaryWallet)) { /** * This block will execute if the primaryWallet was connected * as a Ledger wallet on the Solana blockchain during the * Dynamic UI connection process. */ } } ``` # mergeNetworks ## Summary This utility function merges two arrays of `EvmNetwork` objects, with the first array taking precedence in case of a conflict. It is imported from `@dynamic-labs/sdk-react-core`. ## Annotation ```TypeScript export declare const mergeNetworks: (priorityNetworks: GenericNetwork[], secondaryNetworks: GenericNetwork[]) => GenericNetwork[]; ``` ## Example It is commonly used when you declare [custom EVM networks](/chains/evmNetwork) for Dynamic, and you want to merge them with the networks you get from the dashboard configurations: ```TypeScript import { mergeNetworks } from "@dynamic-labs/sdk-react-core"; const myEvmNetworks = [ ... ] const DynamicSettings = { overrides: { evmNetworks: (networks) => mergeNetworks(myEvmNetworks, networks), } }; ``` # Utilities Introduction You can think of utilities as helper functions on top of the SDK. You could implement them yourself, but we've found that these are common tasks and so have done the legwork for you. You can import them directly from the @dynamic-labs/sdk-react-core package, for example: ```jsx import { getAuthToken } from "@dynamic-labs/sdk-react-core"; ``` [**getAuthToken**](/react-sdk/utilities/getauthtoken): Used to get a JWT token generated by Dynamic which is stored inside of localStorage [**getNetwork**](/react-sdk/utilities/getnetwork): Used to find the current network used by a wallet. It receives the wallet connector and returns a promise that will resolve with the network. [**isZeroDevConnector**](/react-sdk/utilities/is-zero-dev-connector): Used to type check if a wallet connector is a ZeroDev connector [**isAuthenticatedWithAWallet**](/react-sdk/utilities/isauthenticatedwithawallet): Used to check is the user has authenticated with a wallet [**isLedgerSolanaWallet**](/react-sdk/utilities/isledgersolanawallet): Determine if a given wallet is connected as a Ledger Solana wallet # Smart Wallets Dynamic integrates with multiple account abstraction providers so you can choose your optimal setup to convert wallets into smart contract wallets, leveraging [EIP-4337](https://eips.ethereum.org/EIPS/eip-4337) (the official account abstraction specification). ## What can you do with a smart contract wallet? Smart wallets offer a myriad of benefits. Four specific ones are: 1. **Gas fee sponsorship** - you can choose to allow your users to conduct “gasless” transactions that will be sponsored by you. 2. **Transaction bundling** - you can collect a single signature which is used for a bundle of transactions vs having to ask a user for signature on every independent action. 3. **Sophisticated recovery and transfer options** - because the wallet is a smart contract, you can define sophisticated recovery methods for the wallet signer, as well as options to transfer ownership from one private key owner to another. 4. **Session keys** - you can create session keys with permissions to send specific transactions for your users, so that you can execute transactions without asking your users to sign, and even execute transactions while they are offline. ## How does smart wallet creation work? Once a user logs in with email and an embedded wallet is created for them, a key pair is generated for that wallet. The key pair is then used to generate a smart contract wallet that uses the private key as the owner. In essence, you use the private key from the embedded wallet to control a more sophisticated smart wallet. The resulting wallet can be interacted with using the same standard interface as native wallets, with the ability to add features such as gas sponsorship, session keys and batched transactions. ## Getting started with Smart Wallets To get started with smart wallets, you will need to choose an account abstraction provider. Dynamic currently supports the following providers: Note that ZeroDev is the only provider integrated natively into Dynamic. * [ZeroDev](/smart-wallets/smart-wallet-providers/zerodev) * [Alchemy](/smart-wallets/smart-wallet-providers/alchemy) * [Pimlico](/smart-wallets/smart-wallet-providers/pimlico) * [Biconomy](/smart-wallets/smart-wallet-providers/biconomy) # Alchemy This guide shows you how to use Dynamic as a signer for Alchemy Smart Accounts. ## Install the sdk By default, the latest version of the Dynamic SDK ships with Viem. If you need to use Ethers, please refer to [this guide](/adding-dynamic/using-ethers). In this example, we are installing only the Ethereum connectors in order to keep bundle size light. If you need any others, you can find the references [here](react-sdk/providers/dynamiccontextprovider#walletconnectors). ```bash npm i -s @dynamic-labs/sdk-react-core @dynamic-labs/ethereum ``` ## Add Dynamic to your application In order to use Dynamic, you should wrap your app with DynamicContextProvider at the highest possible level i.e. ```jsx import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core' import { EthereumWalletConnectors } from '@dynamic-labs/ethereum' import Home from './Home' // Found in your Dynamic dashboard (https://app.dynamic.xyz/dashboard/developer/api) const DYNAMIC_ENVIRONMENT_ID = 'XXXXX' const App = () => { return (

) } export default App ``` ## Create a SmartAccountSigner Next, inside any component which is wrapped by the above DynamicContextProvider, use the useDynamicContext hook to fetch your provider, and create a SmartAccountSigner: ```tsx import { WalletClientSigner, type SmartAccountSigner } from '@alchemy/aa-core' import { useDynamicContext } from '@dynamic-labs/sdk-react-core' import { isEthereumWallet } from '@dynamic-labs/ethereum' // eslint-disable-next-line react-hooks/rules-of-hooks const { primaryWallet } = useDynamicContext() if (!isEthereumWallet(primaryWallet)) { throw new Error('This wallet is not a Ethereum wallet'); } const dynamicProvider = await primaryWallet?.getWalletClient() // a smart account signer you can use as an owner on ISmartContractAccount export const dynamicSigner: SmartAccountSigner = new WalletClientSigner( dynamicProvider, 'dynamic' // signer type ) ``` ## Use it with Light Account Let's see it in action with aa-alchemy and LightSmartContractAccount from aa-accounts: ```tsx example.ts import { AlchemyProvider } from '@alchemy/aa-alchemy' import { LightSmartContractAccount, getDefaultLightAccountFactoryAddress, } from '@alchemy/aa-accounts' import { sepolia } from 'viem/chains' import { dynamicSigner } from './dynamic' const chain = sepolia const provider = new AlchemyProvider({ apiKey: 'ALCHEMY_API_KEY', chain, }).connect( (rpcClient) => new LightSmartContractAccount({ chain, owner: dynamicSigner, factoryAddress: getDefaultLightAccountFactoryAddress(chain), rpcClient, }) ) ``` ```tsx dynamic.ts import { WalletClientSigner, type SmartAccountSigner } from '@alchemy/aa-core' import { useDynamicContext } from '@dynamic-labs/sdk-react-core' import { isEthereumWallet } from '@dynamic-labs/ethereum' // eslint-disable-next-line react-hooks/rules-of-hooks const { primaryWallet } = useDynamicContext() if (!isEthereumWallet(primaryWallet)) { throw new Error('This wallet is not a Ethereum wallet'); } const dynamicProvider = await primaryWallet?.getWalletClient() // a smart account signer you can use as an owner on ISmartContractAccount export const dynamicSigner: SmartAccountSigner = new WalletClientSigner( dynamicProvider, 'dynamic' // signer type ) ``` # Biconomy This guide will walk you through how to use Biconomy's smart accounts with Dynamic. You can find more info on how Biconomy works here: [https://docs.biconomy.io/account](https://docs.biconomy.io/account). We will use Ethereum Sepolia, so make sure your paymaster etc. is set up for that, and also make sure your user is on this network once logged in. This guide and example is for V4 of the Biconomy packages and V3 of Dynamic. ## Install Dynamic and Biconomy In your app's repository, install `@dynamic-labs/sdk-react-core`, `@dynamic-labs/ethereum` and `@biconomy/{account, bundler}`: ```bash yarn add @dynamic-labs/sdk-react-core @biconomy/account @biconomy/bundler ``` ## Initialize & configure Dynamic ### Add the DynamicContextProvider All you need to get started is the DynamicContextProvider - you will want to wrap your app with this component at the highest possible level, like so: ```jsx import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core' import { EthereumWalletConnectors } from '@dynamic-labs/ethereum' {/* Your app's components */} ``` To enable embedded wallets for your users, [toggle it on](https://app.dynamic.xyz/dashboard/embedded-wallets/dynamic) along with [email/social auth](https://app.dynamic.xyz/dashboard/log-in-user-profile) in the dashboard. ## Configure your Biconomy bundler and paymaster Go to the Biconomy Dashboard and configure a Paymaster and a Bundler for your app. Make sure these correspond to the desired network for your user's smart accounts. Make sure to set the paymaster URL as the value for REACT\_APP\_BICONOMY\_PAYMASTER\_URL in your env file, and do the same with your bundler URL for REACT\_APP\_BICONOMY\_BUNDLER\_URL. ### Create our Biconomy constants Let's introduce a new `biconomy.js` file to house our Biconomy methods. Here we'll initialize the paymaster, the bundler, the validation module, and the method to create a smart account using createSmartAccountClient. The validation module allows the user to authorize actions from their Biconomy smart account by signing messages with their Dynamic wallet. ```js biconomy.js import { Bundler } from "@biconomy/bundler"; import { Paymaster, createSmartAccountClient, DEFAULT_ENTRYPOINT_ADDRESS, ECDSAOwnershipValidationModule, DEFAULT_ECDSA_OWNERSHIP_MODULE } from "@biconomy/account"; import { sepolia } from "viem/chains"; const bundler = new Bundler({ bundlerUrl: process.env.REACT_APP_BICONOMY_BUNDLER_URL, chainId: sepolia.id, // Replace this with your desired network entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, // This is a Biconomy constant }); const paymaster = new Paymaster({ paymasterUrl: process.env.REACT_APP_BICONOMY_PAYMASTER_URL, }); const createValidationModule = async (signer) => { return await ECDSAOwnershipValidationModule.create({ signer: signer, moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE, // This is a Biconomy constant }); }; export const createSmartAccount = async (walletClient) => { const validationModule = await createValidationModule(walletClient); console.log('creating') return await createSmartAccountClient({ signer: walletClient, chainId: sepolia.id, // Replace this with your target network bundler: bundler, // Use the `bundler` we initialized above paymaster: paymaster, // Use the `paymaster` we initialized above entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, // This is a Biconomy constant defaultValidationModule: validationModule, // Use the `validationModule` we initialized above activeValidationModule: validationModule, // Use the `validationModule` we initialized above }); }; ``` ### Create our custom hook We'll create a custom hook to fetch the wallet client from Dynamic, and then initialize the Biconomy smart account using the methods we created above. ```jsx useBiconomyAccount.js import { useState, useEffect, useCallback } from 'react'; import { useDynamicContext } from '@dynamic-labs/sdk-react-core'; import { createSmartAccount } from "./biconomy.js"; export function useBiconomyAccount() { const { primaryWallet } = useDynamicContext(); const [smartAccount, setSmartAccount] = useState(null); const createAndSetSmartAccount = useCallback(async () => { if (!primaryWallet) { setSmartAccount(null); return; } if(!primaryWallet.connector.isEmbeddedWallet) { alert('No embedded wallet selected'); return; } try { const walletClient = await primaryWallet.getWalletClient(); if (walletClient && !smartAccount) { const newSmartAccount = await createSmartAccount(walletClient); setSmartAccount(newSmartAccount); } } catch (error) { console.error('Error fetching wallet clients or creating smart account:', error); } }, [primaryWallet, smartAccount]); useEffect(() => { createAndSetSmartAccount(); }, [createAndSetSmartAccount]); return { smartAccount }; } ``` ## Create Main component Since we're calling dynamic hooks, we need to do this inside the component tree, above where the DynamicContextProvider wrapper lives. For our purposes, let's create a Main.js component, and this is also where we can place or signup and login UI (DynamicWidget): ```jsx Main.js import { useEffect } from "react"; import { useBiconomyAccount } from "./useBiconomyAccount.js"; const Main = () => { const { smartAccount } = useBiconomyAccount(); useEffect(() => { console.log('My Biconomy smart account', smartAccount) }, [smartAccount]) return <>; }; export default Main; ``` As you can see, we're looking the now initialized smart account in Main, and you can then do whatever you want with it! ## End to end flow You can find a complete example of the integration here: [https://github.com/dynamic-labs/dynamic-biconomy-example](https://github.com/dynamic-labs/dynamic-biconomy-example) # Pimlico ## How to use a Dynamic signer with permissionless.js Permissionless.js allows you to plug in custom signers to control the accounts that you create. It is possible to use Dynamic as a signer with permissionless.js, allowing you to use Dynamic to create and control smart accounts and sign transactions. ### Install the dependencies ```bash npm i @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @dynamic-labs/ethereum permissionless viem wagmi ``` ### Create the Dynamic provider Following Dynamic's quickstart guide, set up the Dynamic provider in your app. Also integrate the DynamicWagmiConnector, which will allow you to use Dynamic as a signer with permissionless.js. ```jsx import { DynamicContextProvider, DynamicWidget, } from "@dynamic-labs/sdk-react-core"; import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector"; import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; export const App = () => { return ( ); }; ``` ### Create the SmartAccountClient Create the smart account client using the Dynamic signer. Note: DynamicWagmiConnector internally sets up the WagmiConfig, so there is no need to do it separately. This is where you would configure what smart account implementation (e.g. Safe, Kernel, Biconomy, SimpleAccount) and what paymaster logic you want to use. ```jsx import { createSmartAccountClient, walletClientToCustomSigner, } from "permissionless"; import { signerToSimpleSmartAccount } from "permissionless/accounts"; import { useWalletClient } from "wagmi"; const { data: walletClient } = useWalletClient(); const customSigner = walletClientToCustomSigner(walletClient); const simpleSmartAccountClient = await signerToSimpleSmartAccount( publicClient, { entryPoint: "0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789", signer: customSigner, factoryAddress: "0x9406Cc6185a346906296840746125a0E44976454", } ); const smartAccountClient = createSmartAccountClient({ account: simpleSmartAccountClient, chain: sepolia, // or whatever chain you are using transport: http(""), sponsorUserOperation: pimlicoPaymaster.sponsorUserOperation, // if using a paymaster }); ``` ### Send a transaction You can now send transactions as normal. The sponsorUserOperation function will be called before each transaction is signed and sent, applying the custom paymaster logic you have set. ```js const txHash = await smartAccountClient.sendTransaction({ to: zeroAddress, data: "0x", value: BigInt(0), }); ``` # Safe Let's deploy a Safe account on top of any wallet through Dynamic! First we'll make sure signup/login are enabled, then we'll fetch the walletClient once logged in before deploying the Safe account. ## Enable signup/login Once you've signed up for Dynamic, integrating it is as easy as either `npx create-dynamic-app`, or simply following the [Quickstart](/quickstart) guide. When that's done you should have an app which is wrapped with the [DynamicContextProvider](react-sdk/providers/dynamiccontextprovider). ```jsx import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'; import Main from './Main'; const App = () => { return (

); } ``` Before we work on Main, let's declare a function that can help us deploy the Safe account, taking a walletClient and wallet address as arguments: We're using a few dependancies below, you might want to first install them: ```bash npm i viem permissionless @dynamic-labs/wallet-connector-core ``` ```jsx // src/utils/safe.ts import { isEthereumWallet } from "@dynamic-labs/ethereum"; import { WalletClient, PublicClient, http } from "viem"; import { ENTRYPOINT_ADDRESS_V07, createSmartAccountClient, walletClientToSmartAccountSigner } from "permissionless"; import { createPimlicoBundlerClient, createPimlicoPaymasterClient } from "permissionless/clients/pimlico"; import { signerToSafeSmartAccount } from "permissionless/accounts"; import { Wallet } from '@dynamic-labs/wallet-connector-core'; const transportUrl = (chain: Chain) => `https://api.pimlico.io/v2/${chain.id}/rpc?apikey=${process.env.NEXT_PUBLIC_PIMLICO_API_KEY}`; export const pimlicoBundlerClient = (chain: Chain) => createPimlicoBundlerClient({ transport: http(transportUrl(chain)), entryPoint: ENTRYPOINT_ADDRESS_V07, }); export const paymasterClient = (chain: Chain) => createPimlicoPaymasterClient({ transport: http(transportUrl(chain)), entryPoint: ENTRYPOINT_ADDRESS_V07, }); export const getPimlicoSmartAccountClient = async ( wallet: Wallet ) => { if (!isEthereumWallet(wallet)) return; const address = wallet.address as `0x${string}`; const publicClient = await wallet.getPublicClient() as PublicClient; const walletClient = wallet.getWalletClient() as WalletClient; const chain = walletClient.chain; const signer = walletClientToSmartAccountSigner(walletClient); const safeSmartAccountClient = await signerToSafeSmartAccount(publicClient(chain), { entryPoint: ENTRYPOINT_ADDRESS_V07, signer: signer, safeVersion: "1.4.1", }); return createSmartAccountClient({ account: safeSmartAccountClient, entryPoint: ENTRYPOINT_ADDRESS_V07, chain, bundlerTransport: http(transportUrl(chain)), middleware: { gasPrice: async () => (await pimlicoBundlerClient(chain).getUserOperationGasPrice()).fast, // use pimlico bundler to get gas prices sponsorUserOperation: paymasterClient(chain).sponsorUserOperation, // optional }, }); }; ``` Let's walk through what we just wrote step by step: This is the RPC URL for the Pimlico API which we will use in multiple places, so better to extract it. It depends on your Pimlico API key so make sure you have that set under `NEXT_PUBLIC_PIMLICO_API_KEY` in your `.env` file. The Bundler is the node that can help us batch our user operations and submit them as a single transaction to the blockchain. The client we are creating here is an interface to that Bundler, and it comes with a load of helpful methods related to those userops, such as Gas estimations. Specifically, we are going to need `getUserOperationGasPrice` later. You can see that as well as the transport (i.e. how it should communicate which in this case is via HTTP using the Transport URL we defined earlier), it needs something called the entrypoint address. This is imported as a static variable via `ENTRYPOINT_ADDRESS_V07` from the `permissionless` package. This is an address of a smart contract (deployed on every chain) that acts as a gateway for user operations. [This article](https://blog.smart-contracts-developer.com/entrypoint-v0-7-0-the-new-era-of-account-abstraction-854f9f82912e) helps describe what the V07 version is compared to previous. You can learn more about the Bundler Client [here](https://docs.pimlico.io/permissionless/reference/clients/pimlicoBundlerClient). This Paymaster is where we handle the sponsoring of user operations. It's optional, but we are going to use it in our middleware later. This client also needs the transport method and entrypoint address as we described in the previous step. You can learn more about the Paymaster Client [here](https://docs.pimlico.io/permissionless/reference/clients/pimlicoPaymasterClient). We are going to need to make some read actions and write actions onchain, and Viem provides a Public Client (for read actions) and Wallet Client (for write actions). We are going to need both of these, so we are going to extract them from the wallet object we get passed in as an argument. Dynamic makes it super easy to return these clients from the wallet object. We can use the `getPublicClient` and `getWalletClient` methods on the wallet connector respectively. You can learn more about interacting with Wallets (covers all kinds of actions) [here](/wallets/using-wallets/interacting-with-wallets). Something needs to sign the user operations we are going to send to the Bundler. This function takes the Wallet Client and returns a signer that can be used to sign those operations. In normal transactions, the walletClient is enough to sign with, and you can use methods like `signTransaction` or `signMessage` directly on the walletClient. But for Smart Accounts, we need a specific type of signer that can handle the extra complexity of Smart Accounts. You can learn more about this specific Signer type [here](https://docs.pimlico.io/permissionless/how-to/signers#signers-for-permissionlessjs). While we now have something that can sign for user operations, we don't have a Smart Account yet to actually use it with. That's the purpose of `signerToSafeSmartAccount`. It takes the Public Client, the signer we just created, and some other options, and returns a Safe Account. You can learn more about this method [here](https://docs.pimlico.io/permissionless/reference/accounts/signerToSafeSmartAccount). With our signer and Safe account now in hand, the last step is to create an interface where we can start to take actions on the Safe Account. This is what `createSmartAccountClient` does. You can see we are defining some extra middleware here, such as the gas price and the sponsorUserOperation. These are optional but can be helpful in certain situations. In our case we're going to use the paymaster we created earlier to sponsor the user operations, and the bundler to get the gas prices. You can learn more about the signerToSafeSmartAccount method [here](https://docs.pimlico.io/permissionless/reference/accounts/signerToSafeSmartAccount). In `Main.js`, we can now fetch the walletClient once logged in and then create that Safe account using the function we just created. To learn how to handle loading states, visit the [Loading States guide](/react-sdk/loading-login-states). ```jsx import { useState } from 'react'; import { useDynamicContext, primaryWallet } from '@dynamic-labs/sdk-react-core'; import { getOrMapViemChain } from "@dynamic-labs/ethereum-core"; import { getPimlicoSmartAccountClient } from '../utils/safe'; const Main = () => { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [safeAddress, setSafeAddress] = useState(null); const [safeDeployed, setSafeDeployed] = useState(false); const { user } = useDynamicContext(); const handleDeploySafe = async () => { setLoading(true); setError(null); try { if(!primaryWallet) { setError("No wallet found"); return; }; if (!process.env.NEXT_PUBLIC_PIMLICO_API_KEY) { console.error("Please set NEXT_PUBLIC_PIMLICO_API_KEY in .env file and restart"); return; } const { account } = await getPimlicoSmartAccountClient(primaryWallet); setSafeAddress(account.address); setSafeDeployed(true); } catch (err) { setError("Failed to deploy Safe account."); console.error(err); } finally { setLoading(false); } }; if (!user) { return

; } else if(user && !safeDeployed) { return (

Welcome

); } else if (user && safeDeployed) { return (

Safe Account Deployed

Safe Address: {safeAddress}

); } } export default Main; ``` That's it! You now have the ability to create a Safe account on top of any wallet used with Dynamic, including embedded wallets! To learn how to interact with the Safe account, check out our Hackathon starter kit which handles ERC20 token transfers and cross chain ERC20 token transfers. * [Hacker Starter Kit Overview Video](https://www.youtube.com/watch?v=dkONR9dJD2g) * [Hacker Starter Kit Codebase](https://github.com/dynamic-labs/hackathon-starter-kit/tree/main) # ZeroDev The first iteration of account abstraction from Dynamic uses [ZeroDev](https://zerodev.app/) and embedded wallets. This guide will walk you through settting up ZeroDev and Dynamic so that you can sponsor transactions on Polygon Amoy. #### Initial setup Sign up for a free account at [https://dashboard.zerodev.app/](https://dashboard.zerodev.app/) and create a project, configure your project name and network (please use Polygon Amoy for this example) and copy your new ZeroDev project ID. Note that the network you select in your ZeroDev project will be the network that the smart contract wallet is deployed on and cannot be changed without creating a new project. For this guide, we will be using Polygon Amoy. In [the EVM section of your Dynamic Dashboard](https://app.dynamic.xyz/dashboard/chains-and-networks#evm), toggle on Polygon Amoy and click Save. Now, go to [the Account Abstraction section](https://app.dynamic.xyz/dashboard/configurations#accountabstraction), enable ZeroDev and paste in your ZeroDev project id. You must be using at least SDK version 3.3.0 or 4.0.0-alpha.8 to have access to this feature Click on "Add another chain". You can input 1 ZeroDev project ID per chain you would like enabled.

If you would like to remove a multichain ZeroDev provider, hover your mouse over the network icon and you should be able to click the "Trash icon" to remove.

Click "Yes" to save and add another provider if desired. On the same configuration page as the step above, you'll see there are two different types of configuration for issuing smart contract wallets (SCWs) in Dynamic - the wallet level and the user level. * Wallet level Choose whether to issue SCWs to all wallets, or only to embedded wallets. Note that for the former, you will need to handle the UI and frontend yourself. * User level Choose whether to issues SCWs to all your users (existing included next time they log in), or just new users. Back in your Dynamic Dashboard, go to [the Embedded Wallets section](https://app.dynamic.xyz/dashboard/embedded-wallets/dynamic) and enable Dynamic-powered embedded wallets. Lastly, in [the Log in & User Profile section](https://app.dynamic.xyz/dashboard/log-in-user-profile), enable Email sign up (optionally, enable social sign up and configure oauth) Note that we currently only create smart wallets for embedded wallets. You will see native web3 wallets in your Dynamic widget, and can still use one to sign in, but only new embedded wallets will have a smart wallet. In your local React project, install the following packages: * `@dynamic-labs/sdk-react-core` * `@dynamic-labs/ethereum-aa` * `@dynamic-labs/ethereum` Then import and add the `ZeroDevSmartWalletConnectors` and `EthereumWalletConnectors` to the `walletConnectors` prop on `DynamicContextProvider`. To use ZeroDev v5.2, use Dynamic SDK version `^2.0.5` ```jsx import { DynamicContextProvider, DynamicWidget } from "@dynamic-labs/sdk-react-core"; import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; import { ZeroDevSmartWalletConnectors } from "@dynamic-labs/ethereum-aa"; const App = () => ( ) export default App; ``` Make sure to grab your Dynamic environment id from from the Dynamic Dashboard under Developer > SDK & API Keys, and replace it in the `environmentID` setting. Now we will set up a basic gas sponsorship policy in the ZeroDev dashboard In the Gas Policies tab, click on the button labeled "New" in the Project Policies section

Select "Amount" as the Type, "10" as the value and "Day" as the interval. This is saying that we will sponsor up to 10 MATIC total per day

Click Create Project Policy, and that's it! Now start your app, log in and try sending some MATIC out. The Dynamic SDK will check if a transaction meets your gas policies and will automatically hide the gas in the transaction confirmation step if the gas is sponsored, if not the gas will be displayed. Since you will be creating a brand new wallet when you log in, you will have to first send some MATIC to this address. You can access a free MATIC faucet here: [https://www.alchemy.com/faucets/polygon-amoy](https://www.alchemy.com/faucets/polygon-amoy) Run your app, and if you copied our snippet from earlier, you should see this basic page

Click Connect your wallet, enter your email and hit Continue. After pasting in your OTP, you are prompted to Set up a passkey.

Go ahead and set up your passkey, and now you're fully logged in! Next, we're going to send a transaction. To do that, we will need some MATIC. Grab your wallet address by clicking on the Dynamic Widget, then click on the three dots next to your address and hit "Copy wallet address". You can paste your address into [free Polygon Amoy faucet](https://www.alchemy.com/faucets/polygon-amoy) which will deposit some free test MATIC into your account. After doing so, if you refresh your app, you should see your balance update Optionally, set up fiat onramp by following our guide here: [https://docs.dynamic.xyz/fiat-onboarding/banxa](https://docs.dynamic.xyz/fiat-onboarding/banxa)

Now, send yourself some MATIC by clicking on the Send button in the Dynamic Widget. Enter 0.1 as the amount, and an addres of your choosing as the recipient, then hit Send now. You will see a screen like the following. Notice that there is no gas estimate field, because this transaction will be sponsored!

Hit confirm, sign for the transaction with your passkey. Congratulations, you just sent a gas-sponsored transaction! If you take your smart wallet address and paste it into the [Polygon Amoy scanner](https://amoy.polygonscan.com/), you will see your smart wallet and the transaction you just sent.

### Advanced Configuration Now you are set up, you can utilize the full functionality of ZeroDev inside Dynamic - everything from session keys to gas policies. Learn more in the [ZeroDev Docs](https://docs.zerodev.app/). #### Specifying a bundler/paymaster RPC Use `ZeroDevSmartWalletConnectorsWithConfig` and pass in values for `bundlerRpc` and `paymasterRpc`: ```ts import { ZeroDevSmartWalletConnectorsWithConfig } from "@dynamic-labs/ethereum-aa"; {/* ... your app */} ; ``` For more info, see: [https://docs.zerodev.app/sdk/infra/pimlico#using-pimlico-paymaster](https://docs.zerodev.app/sdk/infra/pimlico#using-pimlico-paymaster) #### Specifying a bundler To specify a bundler, use `ZeroDevSmartWalletConnectorsWithConfig` and pass in a value for `bundlerProvider`: ```ts import { ZeroDevSmartWalletConnectorsWithConfig } from "@dynamic-labs/ethereum-aa"; {/* ... your app */} ; ``` For more info, see: [https://docs.zerodev.app/meta-infra/rpcs#bundler--paymaster-rpcs](https://docs.zerodev.app/meta-infra/rpcs#bundler--paymaster-rpcs) #### Retrieving the Kernel Client using `getAccountAbstractionProvider()` ```ts import { isZeroDevConnector } from '@dynamic-labs/ethereum-aa'; const App = () => { const { primaryWallet } = useDynamicContext(); useEffect(() => { const { connector } = primaryWallet; if (isZeroDevConnector(connector)) { const params = { // if you have gas sponsorship enabled, set `withSponsorship` to `true`, else omit withSponsorship: true }; const kernelClient = connector.getAccountAbstractionProvider(params); } }, [primaryWallet]); ... } ``` #### Using with Viem & Ethers You can use viem or ethers with account abstraction to sign messages or send sponsored transaction with no extra configuration, it also works with our [wagmi integration](/react-sdk/providers/dynamicwagmiconnector). ## Going Further Once you've tested things out and want to deploy to a live network, you will need to do the following: 1. Add your credit card to ZeroDev under Account Settings > Billing 2. Create a new ZeroDev project and select a live network 3. Copy your new ZeroDev project id and paste it into your Dynamic Dashboard a. We recommend using your Dynamic Sandbox environment for testing your testnet setup, and using your Dynamic Live environment for production. ### Restricting Access to your ZeroDev Project In order to restrict access to your ZeroDev project id to allow only dynamic to use it you can add dynamic's static IP address's to your projects IP allowlist. Dynamic's IP addresses: * `52.204.85.87` * `54.145.74.8` * `107.20.170.238` * `52.206.26.56` * `3.232.2.67` * `44.213.187.169`

## Examples ### Get smart wallet address vs signer address The wallet connector will return your smart wallet address, that address will be used in the Dynamic UI and is the main address you will interact with. But you can fetch the signer address by using the wallet connector getEOAConnector and then fetching the address there. ```tsx import { useEffect, useState } from "useEffect"; import { useDynamicContext, DynamicContextProvider, DynamicWidget, } from "@dynamic-labs/sdk-react-core"; import { isZeroDevConnector, ZeroDevSmartWalletConnectors, } from "@dynamic-labs/ethereum-aa"; import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; const SignerAddress = () => { const { primaryWallet } = useDynamicContext(); const [signerAddress, setSignerAddress] = useState(); useEffect(() => { if (!primaryWallet) { return; } const { connector, address, // This is your smart wallet address } = primaryWallet; if (!isZeroDevConnector(connector)) { return; } const signerConnector = connector.getEOAConnector(); if (!signerConnector) { return; } // This is the signer address const [address] = signerConnector.getAddress(); setSignerAddress(address); }, [primaryWallet]); return My Signer address: {signerAddress}; }; const App = () => ( ); export default App; ``` For more information about ZeroDev's AA features, go to ZeroDev's documentation: [https://docs.zerodev.app/](https://docs.zerodev.app/) ## FAQ Yes, but not today with Dynamic. We are working on developing new flows to make managing existing EOA wallets with SCWs a smooth transition. It depends which provider you choose. For example, with ZeroDev you have the following options: * Arbirtrum One * Avalanche * Base * Binance Smart Chain * Eth * Optimism * Polygon Each provider will handle things differently, so it's always better to check directly with them. For example, with ZeroDev you can't change the network after deployment. With Alchemy, it might be possible in a roundabout way. With Dynamic, you will need to use either ZeroDev or Alchemy. If you have alternative AA providers, please reach out via our [slack](https://www.dynamic.xyz/slack). This is [an advanced feature](https://www.dynamic.xyz/pricing), but there is no additional cost from Dynamic beyond the advanced tier itself. The providers do take a transaction fee, which you can see on their respective pricing pages. We are adding customers one at a time for a few weeks, after which we’ll open it up to the general public as GA. Private keys are managed by the EOA, not the SCW. Every SCW has a Signer, or Owner, which is the EOA. The only way the SCW can be recovered is if the EOA is recovered. The SCW is a smart contract, and the EOA is the owner of the SCW. If the EOA is lost, the SCW is lost. It's a common misconception that AA wallets are inherently non-custodial. In fact, whether a wallet is AA or not has nothing to do with whether it's custodial. It's the signers that determine whether a wallet is custodial. That is, if you use a non-custodial signer such as local private keys to manage your AA wallet, then it's non-custodial. At the same time, if you use a custodial key provider such as Fireblocks to manage your AA wallet, then it's custodial. In any case, whoever has custody over the signers has custody over the wallet. We have wrapped our providers so you get all the benefit, and more. For example, we handle the transaction hashing so it’s user friendly and are able to show the SCW in our widgets and connectors. # Apple ## Important information For every Dynamic `environmentId`, please ensure to use a unique set of Apple oauth app credentials. Apple will only return a user's `email` on the first login across any site that uses the OAuth application's credentials. ## Creating a new App Here are the step-by-step instructions for obtaining OAuth credentials for Apple: 1. Open Dynamic dashboard, in either social account linking on the [Login Methods](https://app.dynamic.xyz/dashboard/configurations#informationcapture) or in [the Social Signup page](https://app.dynamic.xyz/dashboard/configurations#emailsocialsignin) depending on whether you want to do linking or signup: 1. Open the Apple section, copy the Redirect URL and paste it in the "Valid OAuth Redirect URIs" field in Apple. 2. Go to the [Apple Developers](https://developer.apple.com/account) dashboard and sign in to your account. 3. Navitate to [Membership details](https://developer.apple.com/account/#/membership) 4. Find your Team ID. 5. In Apple's dashboard, navigate to Identifiers under [Certificates, IDs, & Profiles](https://developer.apple.com/account/resources/identifiers/list/serviceId) 6. Add a new Service ID. 7. Click your newly created Services ID to enable it for Sign in with Apple. Then, click Configure. 8. In Return URLs, you'll paste the Redirect URI listed on Dynamic Dashboard for your Apple provider. Once you've entered the correct information, you can save your Services ID by clicking Continue, then Save. 9. Return to Dynamic Dashboard, you should have Team ID and Services ID populated by this step. Now you can paste your Key ID as well. Finally, you'll need to paste the contents of the Private Key file you downloaded from Apple's dashboard. That's it! You now have OAuth credentials for your Apple application that you can use in Dynamic. # Discord ## Creating a new App Here are the step-by-step instructions for obtaining OAuth credentials for Discord: 1. Go to the [Discord Developer Portal](https://discord.com/developers/applications) and sign in to your account. 2. Once you're signed in, click on the "New Application" button in the top right corner of the screen. 3. Enter a name for your application and click the "Create" button. 4. In the left-hand menu, click on the "OAuth2" tab. 5. Back in the Dynamic dashboard, in either social account linking on the [Info Capture page](https://app.dynamic.xyz/dashboard/configurations#informationcapture) or in [the Social Signup page](https://app.dynamic.xyz/dashboard/configurations#emailsocialsignin) depending on whether you want to do linking or signup. 1. Copy the "Client ID" and "Client secret" from the application you created in Discord and paste it into the modal in the Dynamic Dashboard. 2. We recommend you already copy the Redirect URL to your clipboard so you can use it in the next step. 3. Click Confirm. 6. Return to your Discord OAuth2 page: 1. Under the "OAuth2 Redirects" section, click the "Add Redirect" button. 2. Copy & paste the Redirect URL provided in your Dynamic Dashboard in the prior step. 3. Copy the Redirect URL and paste it in the section on Discord page. 4. Click "Save changes" button. That's it! You now have OAuth credentials for your Discord application that you can use in Dynamic. If you need more help with configuring the Discord OAuth App check their docs [here](https://discord.com/developers/docs/topics/oauth2). # Epic Games ## Creating a new App Here's the step-by-step guide on how to set up a new account, organization, product, and application to set up OAuth2 with Epic Games: Create an Epic Games Developer Account: 1. [Go to Epic Games Developer Portal](https://dev.epicgames.com/) to create an account * Once your account is created, log in to the Developer Portal. 2. [Create an Organization](https://dev.epicgames.com/portal/en-US/profile/signup) * Click Create Organization and fill in the required details. * Click Submit to create the organization. 3. Register a Product: * In the Developer Portal, go to the Products section. * Click on Create Product and fill in the product details. 4. Create an Application: * Go to the Applications section in the Developer Portal. * Click Create Application. * You'll need to validate your domain. It will ask you to add a TXT DNS record to your domain. * Fill in the application details such as name, description, and redirect URI (the URL where users will be redirected after successful authentication). 5. Create an Client: * Go to Product Settings > Client. Click Add new Client. * Fill in the application details such as name, description, and redirect URI (the URL where users will be redirected after successful authentication). 6. Get Client ID and Client Secret: * Go to Product Settings * Copy the **Client ID** and **Client Secret** that are generated for your application. 7. Turn on Epic Games in [Dynamic Dashboard](https://app.dynamic.xyz/dashboard/log-in-user-profile) * Go to Log in & User Profile, switch on Epic Games and add **Client ID** and **Client Secret** That’s it! You now have OAuth credentials for your Epic Games application that you can use in Dynamic. # Facebook ## Creating a new App Here are the step-by-step instructions for obtaining OAuth credentials for Facebook: 1. Go to the [Facebook Developers](https://developers.facebook.com/apps/) website and sign in to your account. 2. Once you're signed in, click on the "My Apps" dropdown menu in the top navigation bar and select "Create App." 3. Choose the type of app you want to create. 4. Enter a name for your app and click "Create App ID." 5. Once your app is created under "Add a product" section click "Set up" under Facebook Login card. 6. Select "Settings" under "Facebook Login" section in the left side bar. 7. Back in the Dynamic dashboard, in either social account linking on the [Info Capture page](https://app.dynamic.xyz/dashboard/configurations#informationcapture) or in [the Social Signup page](https://app.dynamic.xyz/dashboard/configurations#emailsocialsignin) depending on whether you want to do linking or signup: 1. Open the Facebook section, copy the Redirect URL and paste it in the "Valid OAuth Redirect URIs" field in Facebook. 2. Click "Save changes" on the bottom of the screen. 8. Select "Basic" under "Settings" section in the left side bar. 9. Copy the "App ID" and "App secret" and paste it into "Set up Facebook Auth" Modal in the Dynamic Dashboard. That's it! You now have OAuth credentials for your Facebook application that you can use in Dynamic. If you need more help with configuring the Facebook OAuth App check their docs [here](https://developers.facebook.com/docs/development/create-an-app). # Farcaster ## Configuration