Circle

This tutorial guides you through using Dynamic as a signer for Circle Smart Accounts. You can refer to this dev 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 Modalar 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

1. Create a vanilla React app that implements Dynamic by running npx create-dynamic-app@latest in your terminal of choice, choosing the following stack:

2. Navigate to the project directory and install the given dependencies by running npm install. Then also install the extra Circle SDK dependency by running npm install @circle-fin/modular-wallets-core.

3. 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

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

5. 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 { isEthereumWallet } from "@dynamic-labs/ethereum"
import { useDynamicContext, DynamicWidget } from "@dynamic-labs/sdk-react-core"
import { toCircleSmartAccount, toModularTransport, walletClientToLocalAccount } from "@circle-fin/modular-wallets-core"
import { createBundlerClient } from "viem/account-abstraction"
import { polygonAmoy } from "viem/chains"

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()
  const [hash, setHash] = useState()
  const [userOpHash, setUserOpHash] = useState()

  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) => {
    try {
      event.preventDefault()
      if (!account) return

      const formData = new FormData(event.currentTarget)
      const to = formData.get("to")
      const value = formData.get("value")

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

      setUserOpHash(hash)

      const { receipt } = await bundlerClient.waitForUserOperationReceipt({
        hash,
      })
      
      setHash(receipt.transactionHash)
    } catch (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>
  )
}

export default Main

6. Run the app by running npm start, check out the UI, once you signup/login, you should see the following:

7. 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

• Execution reverted for an unknown reason This is most likely due to the account not having enough ETH to pay for the transfer, make sure your smart wallet is funded!