Circle

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

This guide is currently React only.

This tutorial guides you through using Dynamic as a signer for Circle Smart Accounts. You can refer to this doc to learn more about Circle’s Modular Wallets offering.

Setup

1. Register a Circle Developer account. In the Configurator section of the Circle Developer Console under Modular Wallets, grab your Client URL, and create a new Client Key.

2. Register a Dynamic account. Grab your environment ID from the SDK & API keys page of the Dynamic Dashboard.

3. In the Chains and Networks page of the Dynamic Dashboard, enable the EVM network(s) you want to use with Circle. In this example we use Polygon Amoy, so please make sure that’s enabled.

Code Implementation

For this guide, we’ll be using React and TypeScript. If you don’t already have an app created, check out our Quickstart guide.

1. You’ll need to install the Circle SDK dependency by running:

npm install @circle-fin/modular-wallets-core
# or
yarn add @circle-fin/modular-wallets-core
# or
pnpm add @circle-fin/modular-wallets-core
# or
bun add @circle-fin/modular-wallets-core

2. Create a .env file in the project directory and add the following environment variables:

REACT_APP_CIRCLE_CLIENT_KEY=your_circle_client_key
REACT_APP_CIRCLE_CLIENT_URL=your_circle_client_url

Note: If you’re using Next.js, replace REACT_APP_ with NEXT_PUBLIC_ and for Vite, use VITE_.

3. In src/App.js, replace the value for the environmentId with your own Dynamic environment ID.

4. Navigate to src/Main.js, and replace the current contents with the following:

import React, { useEffect, useState } from "react"
import { createPublicClient, parseEther } from "viem";
import { createBundlerClient } from "viem/account-abstraction";
import { polygonAmoy } from "viem/chains";
import { isEthereumWallet } from "@dynamic-labs/ethereum";
import { useDynamicContext, DynamicWidget } from "@dynamic-labs/sdk-react-core";

import {
  toCircleSmartAccount,
  toModularTransport,
  walletClientToLocalAccount,
} from "@circle-fin/modular-wallets-core";

const clientKey = process.env.REACT_APP_CIRCLE_CLIENT_KEY!;
const clientUrl = process.env.REACT_APP_CIRCLE_CLIENT_URL!;

// Create Circle transports
const modularTransport = toModularTransport(
  `${clientUrl}/polygonAmoy`,
  clientKey
);

// Create a public client
const client = createPublicClient({
  chain: polygonAmoy,
  transport: modularTransport,
});

// Create a bundler client
const bundlerClient = createBundlerClient({
  chain: polygonAmoy,
  transport: modularTransport,
});

export const Main = () => {
  const { primaryWallet } = useDynamicContext();
  const [account, setAccount] = useState<any>(undefined);
  const [hash, setHash] = useState<string | undefined>(undefined);
  const [userOpHash, setUserOpHash] = useState<string | undefined>(undefined);

  useEffect(() => {
    setSigner();

    async function setSigner() {
      if (!primaryWallet) {
        // Reset the account if the wallet is not connected
        setAccount(undefined);
        return;
      }

      if (!isEthereumWallet(primaryWallet)) {
        throw new Error("This wallet is not an Ethereum wallet");
      }

      const dynamicProvider = await primaryWallet.getWalletClient();

      toCircleSmartAccount({
        client,
        owner: walletClientToLocalAccount(dynamicProvider), // Transform the wallet client to a local account
      }).then(setAccount);
    }
  }, [primaryWallet]);

  const sendUserOperation = async (event: React.FormEvent<HTMLFormElement>) => {
    try {
      event.preventDefault();
      if (!account) return;

      const formData = new FormData(event.currentTarget);
      const to = formData.get("to") as `0x${string}`;
      const value = formData.get("value") as string;

      const hash = await bundlerClient.sendUserOperation({
        account,
        calls: [
          {
            to,
            value: parseEther(value),
          },
        ],
      });

      setUserOpHash(hash);

      const { receipt } = await bundlerClient.waitForUserOperationReceipt({
        hash,
      });

      setHash(receipt.transactionHash);
    } catch (error) {
      if (error instanceof Error) {
        alert(error.message);
        console.error(error);
      }
    }
  };

  if (!primaryWallet) return <DynamicWidget />

  return (
    <div>
      {primaryWallet && !account ? (
        <p>Loading...</p>
      ) : (
        <>
          <p>Address: {account?.address}</p>
          <h2>Send User Operation</h2>
          <form onSubmit={sendUserOperation}>
            <input name="to" placeholder="Address" />
            <input name="value" placeholder="Amount (ETH)" />
            <button type="submit">Send</button>
            {userOpHash && <p>User Operation Hash: {userOpHash}</p>}
            {hash && <p>Transaction Hash: {hash}</p>}
          </form>
        </>
      )}
    </div>
  )

5. Run the app by executing:

npm start
# or
yarn start
# or
pnpm start
# or
bun run start

Check out the UI; once you sign up/login, you should see the following:

6. Add a valid address to send to, and an amount that is within your wallet’s balance plus a reasonable gas fee. Click on the “Send” button, and you should see the transaction hash in the UI!

Troubleshooting

Problem: Execution reverted for an unknown reason

Solution: This is most likely due to the account not having enough ETH to pay for the transfer, make sure your smart wallet is funded!