Circle
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
-
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.
-
Register a Dynamic account. Grab your environment ID from the SDK & API keys page of the Dynamic Dashboard.
-
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, but this can easily be adapted to other frameworks. If you don’t already have an app created, check out our Quickstart guide or Create dynamic app.
- You’ll need to install the Circle SDK dependency by running:
- Create a
.env
file in the project directory and add the following environment variables:
Note: If you’re using Next.js, replace REACT_APP_
with NEXT_PUBLIC_
and for Vite, use VITE_
.
-
In
src/App.js
, replace the value for theenvironmentId
with your own Dynamic environment ID. -
Navigate to
src/Main.js
, and replace the current contents with the following:
- Run the app by executing:
Check out the UI; once you sign up/login, you should see the following:
- 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!