Dynamic Integration Tutorial

import * as React from 'react'
import * as ReactDOM from 'react-dom/client'

import { EthereumWalletConnectors } from '@dynamic-labs/ethereum'
import {
  DynamicContextProvider,
  DynamicWidget,
} from '@dynamic-labs/sdk-react-core'

import { Example } from '.'

const environmentId = import.meta.env.VITE_DYNAMIC_ENV_ID as string

function App() {
  return (
    <DynamicContextProvider
      settings={{
        environmentId,
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <DynamicWidget variant="modal" />
      <Example />
    </DynamicContextProvider>
  )
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <App />,
)

import React, { useEffect } from 'react'
import { createPublicClient, Hex, parseUnits } from 'viem'

import { isEthereumWallet } from '@dynamic-labs/ethereum'
import { useDynamicContext } from '@dynamic-labs/sdk-react-core'

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

import { createBundlerClient, SmartAccount } from 'viem/account-abstraction'

import { polygonAmoy } from 'viem/chains'

const clientKey = import.meta.env.VITE_CLIENT_KEY as string
const clientUrl = import.meta.env.VITE_CLIENT_URL as string

// 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 Example = () => {
  const { primaryWallet } = useDynamicContext() // Get the wallet information from the Dynamic context provider
  const [account, setAccount] = React.useState<SmartAccount>()
  const [hash, setHash] = React.useState<Hex>()
  const [userOpHash, setUserOpHash] = React.useState<Hex>()

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

      if (!isEthereumWallet(primaryWallet)) {
        throw new Error('Wallet is not EVM-compatible.')
      }

      const walletClient = await primaryWallet.getWalletClient() // Dynamic provider

      const smartAccount = await toCircleSmartAccount({
        client,
        owner: walletClientToLocalAccount(walletClient), // Transform the wallet client to a local account
      })

      setAccount(smartAccount)
    }

    setSigner()
  }, [primaryWallet])

  const sendUserOperation = async (event: React.FormEvent<HTMLFormElement>) => {
    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 USDC_CONTRACT_ADDRESS = '0x41e94eb019c0762f9bfcf9fb1e58725bfb0e7582' // Polygon Amoy testnet
    const USDC_DECIMALS = 6 // Used for parseUnits
    const callData = encodeTransfer(
      to,
      USDC_CONTRACT_ADDRESS,
      parseUnits(value, USDC_DECIMALS),
    )

    const opHash = await bundlerClient.sendUserOperation({
      account,
      calls: [callData],
      paymaster: true, // Enable gas sponsorship if supported
    })

    setUserOpHash(opHash)

    const { receipt } = await bundlerClient.waitForUserOperationReceipt({
      hash: opHash,
    })
    setHash(receipt.transactionHash)
  }

  if (!primaryWallet) return null

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

const { primaryWallet } = useDynamicContext()

if (primaryWallet && isEthereumWallet(primaryWallet)) {
  const walletClient = await primaryWallet.getWalletClient()
  const smartAccount = await toCircleSmartAccount({
    client,
    owner: walletClientToLocalAccount(walletClient),
  })
}