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
In your app’s repository, install @dynamic-labs/sdk-react-core, @dynamic-labs/ethereum and @biconomy/{account, bundler, common, core-types, paymaster}:
@dynamic-labs/ethereum will help you to enable all EVM compatible chains
including layer 2’s i.e. Base as well as Dynamic Embedded Wallets. Learn more
about WalletConnectors
here.
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:
Copy
Ask AI
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";import { EthersExtension } from "@dynamic-labs/ethers-v6";<DynamicContextProvider settings={{ // Find your environment id at https://app.dynamic.xyz/dashboard/developer environmentId: "REPLACE-WITH-YOUR-ENVIRONMENT-ID", walletConnectors: [EthereumWalletConnectors], walletConnectorExtensions: [EthersExtension], }}> {/* Your app's components */}</DynamicContextProvider>;
We are using Ethers here instead of the default Viem, as Biconomy requires an
Ethers signer object. Learn more about switching between Viem and Ethers
here.
To enable embedded wallets for your users, toggle it on along with
email/social auth in the
dashboard.
Inside any component which is wrapped by DynamicContextProvider, you can access any of the provided hooks. While you can access the full context via usedynamiccontext, we are most interested in the users currently connected wallets which we can easily access via useUserWallets.
A user can have branded wallets connected as well as Dynamic embedded wallets,
so here we will filter for a users embedded wallet, assuming they had one
created when they signed up.
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. You can learn more about the dashboard here
Once a user signs up through Dynamic, you can create a Biconomy smart account and use their Dynamic wallet as a signer for that new smart account. This means that the user will be able to use Biconomy’s account abstraction features out of the box! Just before you do that though, you need to follow two more steps:
You will need to initialize instances of a Biconomy bundler and paymaster for the user, like so:
Copy
Ask AI
import { IBundler, Bundler } from "@biconomy/bundler";import { IPaymaster, BiconomyPaymaster } from "@biconomy/paymaster";import { ChainId } from "@biconomy/core-types";import { DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account";...// Initialize your bundlerconst bundler: IBundler = new Bundler({bundlerUrl: 'your-bundler-url-from-the-biconomy-dashboard',chainId: ChainId.POLYGON_MUMBAI, // Replace this with your desired networkentryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, // This is a Biconomy constant});// Initialize your paymasterconst paymaster: IPaymaster = new BiconomyPaymaster({paymasterUrl: 'your-paymaster-url-from-the-biconomy-dashboard',});
Now you’re ready to allow the user to authorize actions from their Biconomy smart account by signing messages with their Dynamic wallet. This is done by initializing a ECDSAOwnershipValidationModule for the user’s smart account and passing in a signer from the user’s wallet.
Copy
Ask AI
import { ECDSAOwnershipValidationModule, DEFAULT_ECDSA_OWNERSHIP_MODULE,} from "@biconomy/modules";...// Get a provider and signer for the user's embedded walletconst provider = await embeddedWallet.connector?.getPublicClient();// Note that we are using the ethers signer here rather than Viemconst signer = await embeddedWallet.connector?.ethers?.getSigner();// Initialize Biconomy's validation module with the ethers signerconst validationModule = await ECDSAOwnershipValidationModule.create({signer: signer,moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE // This is a Biconomy constant});
Lastly, using the user’s paymaster, bundler, and validation module instances from above, initialize the user’s smart account using Biconomy’s BiconomySmartAccountV2.create method:
Copy
Ask AI
import { BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS,} from "@biconomy/account";...const smartAccount = await BiconomySmartAccountV2.create({provider: provider, // This can be any ethers JsonRpcProvider connected to your app's networkchainId: ChainId.POLYGON_MUMBAI, // Replace this with your target networkbundler: bundler, // Use the `bundler` we initialized abovepaymaster: paymaster, // Use the `paymaster` we initialized aboveentryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, // This is a Biconomy constantdefaultValidationModule: validationModule, // Use the `validationModule` we initialized aboveactiveValidationModule: validationModule // Use the `validationModule` we initialized above});