Advanced Usage

const connector = primaryWallet?.connector;

const kernelClient = connector.getAccountAbstractionProvider({
  withSponsorship: true,
});

const userOpHash = await kernelClient.sendUserOperation({
  callData: await kernelClient.account.encodeCalls([
    {
      data: "0x",
      to: zeroAddress,
      value: BigInt(0),
    },
    {
      data: "0x",
      to: zeroAddress,
      value: BigInt(0),
    },
  ]),
});

import { ZeroDevSmartWalletConnectorsWithConfig } from "@dynamic-labs/ethereum-aa";

<DynamicContextProvider
  settings={{
    environmentId: "YOUR_ENV_ID",
    walletConnectors: [
      ZeroDevSmartWalletConnectorsWithConfig({
        bundlerRpc: "CUSTOM_BUNDLER_RPC",
        paymasterRpc: "CUSTOM_PAYMASTER_RPC",
      }),
    ],
  }}
>
  {/* ... your app */}
</DynamicContextProvider>;

import { ZeroDevSmartWalletConnectorsWithConfig } from "@dynamic-labs/ethereum-aa";

<DynamicContextProvider
  settings={{
    environmentId: "YOUR_ENV_ID",
    walletConnectors: [
      ZeroDevSmartWalletConnectorsWithConfig({ bundlerProvider: "STACKUP" }),
    ],
  }}
>
  {/* ... your app */}
</DynamicContextProvider>;

import { isZeroDevConnector } from '@dynamic-labs/ethereum-aa';

const App = () => {
  const { primaryWallet } = useDynamicContext();

  useEffect(() => {
    const { connector } = primaryWallet;

    const getKernelClient = async () => {
      if (!isZeroDevConnector(connector)) {
        return;
      }

      // ensure that the kernel client has been loaded successfully
      await connector.getNetwork();

      const params = {
        // if you have gas sponsorship enabled, set `withSponsorship` to `true`, else omit
        withSponsorship: true
      };
      const kernelClient = connector.getAccountAbstractionProvider(params);
    }
  ...
}

import { useEffect, useState } from "react";
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.eoaConnector;

    if (!signerConnector) {
      return;
    }

    const getAddress = async () => {
      const address = await signerConnector.getAddress();

      if (!address) {
        return;
      }

      setSignerAddress(address);
    };
    getAddress();
  }, [primaryWallet]);

  return <span>My Signer address: {signerAddress}</span>;
};

const App = () => (
  <DynamicContextProvider
    settings={{
      environmentId: "YOUR_ENVIRONMENT_ID",
      walletConnectors: [
        EthereumWalletConnectors,
        ZeroDevSmartWalletConnectors,
      ],
    }}
  >
    <DynamicWidget />

    <SignerAddress />
  </DynamicContextProvider>
);

export default App;

import { FC, FormEventHandler, useState } from 'react';
import { getERC20PaymasterApproveCall } from '@zerodev/sdk';
import { createZeroDevPaymasterClient } from '@zerodev/sdk/clients';
import { getEntryPoint, KERNEL_V3_3 } from '@zerodev/sdk/constants';
import { Hex, http, parseEther } from 'viem';
import { createEcdsaKernelAccountClientWith7702 } from '@dynamic-labs/ethereum-aa';
import { chainsMap, isEthereumWallet } from '@dynamic-labs/ethereum-core';
import { useDynamicContext, useSmartWallets } from '@dynamic-labs/sdk-react-core';
import { isDynamicWaasConnector } from '@dynamic-labs/wallet-connector-core';

export const ERC20PaymasterExample: FC = () => {
  const { primaryWallet } = useDynamicContext();
  const { getEOAWallet } = useSmartWallets();

  const [address, setAddress] = useState('');
  const [amount, setAmount] = useState('');
  const [erc20TokenAddress, setErc20TokenAddress] = useState(
    '0x036CbD53842c5426634e7929541eC2318f3dCF7e' // Example token address
  );
  const [result, setResult] = useState('');

  if (!primaryWallet || !isEthereumWallet(primaryWallet)) {
    return <div>ERC20 paymaster is only supported for Ethereum wallets</div>;
  }

  const onSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();

    try {
      setResult('Creating ZeroDev kernel client...');

      const eoaWallet = getEOAWallet(primaryWallet);
      if (!eoaWallet) throw new Error('No EOA wallet found');
      if (!isDynamicWaasConnector(eoaWallet.connector)) {
        throw new Error('Connector is not a Dynamic Waas connector');
      }

      // Get the signer from the primary wallet
      const signer = await eoaWallet.connector.getWalletClient();
      const network = await primaryWallet.getNetwork();
      if (!network) throw new Error('No network found');

      const chain = chainsMap[network.toString()];
      if (!chain) throw new Error(`Unsupported chain: ${network}`);

      // ZeroDev configuration - replace with your actual project ID
      const projectId = 'YOUR_ZERODEV_PROJECT_ID';
      const entryPoint = getEntryPoint('0.7');

      setResult('Creating kernel client with ERC20 paymaster...');

      // Create the kernel client with EIP-7702 and ERC20 paymaster, use createEcdsaKernelAccountClient if you are not using EIP-7702
      const kernelClient = await createEcdsaKernelAccountClientWith7702({
        apiKernelVersion: KERNEL_V3_3, // Use KERNEL_V3_3 for EIP-7702 compatibility or get this info from our dashboard
        chain,
        enableKernelV3Migration: true, // If you want to migrate users to the new kernel version
        entryPoint,
        kernelVersion: KERNEL_V3_3, // Use KERNEL_V3_3 for EIP-7702 compatibility or get this info from our dashboard
        paymaster: erc20TokenAddress as Hex, // Use your ERC20 token address here
        projectId,
        signer,
      });

      // Create paymaster client for approval
      const paymasterClient = createZeroDevPaymasterClient({
        chain,
        transport: http(`https://rpc.zerodev.app/api/v2/paymaster/${projectId}`),
      });

      setResult('Sending transaction with ERC20 approval...');

      // Prepare the transaction with batched approval
      const value = parseEther(amount);
      const callData = await kernelClient.account.encodeCalls([
        // The ERC20 approval for paymaster
        await getERC20PaymasterApproveCall(paymasterClient, {
          approveAmount: parseEther('0.1'),
          entryPoint,
          gasToken: erc20TokenAddress as Hex,
        }),
        // The actual transaction call
        {
          data: '0x' as Hex,
          to: address as Hex,
          value,
        },
      ]);

      // Send the user operation
      const hash = await kernelClient.sendUserOperation({ callData });
      setResult(`Transaction sent! User operation hash: ${hash}`);

      // Wait for the transaction receipt
      const receipt = await kernelClient.waitForUserOperationReceipt({ hash });
      setResult(`Transaction confirmed! Receipt: ${JSON.stringify(receipt, null, 2)}`);
    } catch (error) {
      setResult(`Transaction failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="address">Target address</label>
        <input
          value={address}
          onChange={({ target }) => setAddress(target.value)}
          name="address"
          id="address"
          type="text"
          required
          placeholder="0x..."
        />
      </div>

      <div>
        <label htmlFor="amount">Transaction amount (in ETH)</label>
        <input
          value={amount}
          onChange={({ target }) => setAmount(target.value)}
          name="amount"
          id="amount"
          type="text"
          required
          placeholder="0.05"
        />
      </div>

      <div>
        <label htmlFor="erc20TokenAddress">ERC20 Paymaster Token Address</label>
        <input
          value={erc20TokenAddress}
          onChange={({ target }) => setErc20TokenAddress(target.value)}
          name="erc20TokenAddress"
          id="erc20TokenAddress"
          type="text"
          required
          placeholder="0xA0b86a33E6441b8b5d865Db8a6E05e70b4cfB4be"
        />
      </div>

      <button type="submit">
        Send with ZeroDev (EIP-7702 + ERC20 Paymaster)
      </button>

      {result && (
        <pre style={{ whiteSpace: 'pre-wrap' }}>
          {result}
        </pre>
      )}
    </form>
  );
};