Circles is available on Gnosis Chain and Chiado Testnet. You need to specify the correct contract addresses and service endpoints for each environment.
To setup provider and signer, we would utilize the Circles Adapter that is built to support transactions via ethers. Once you have already imported the BrowserProviderContractRunner , you would need to initialize it.
To initialize the CirclesSDK, we will pass on the ChainConfig and Adapter to SDK instance.
constsdk=newSdk(chainConfig,adapter);
Once you have successfully created a SDK instance, you are all set to use Circles in your dApp. Let's learn more about the Circles SDK features and how you can use them on the next pages.
CirclesSDK Code implementation for Svelte and React Framework
Here's the full code for Svelte and React for you to copy & paste:
<script lang="ts">import { Sdk,type CirclesConfig } from"@circles-sdk/sdk";import {BrowserProviderContractRunner} from"@circles-sdk/adapter-ethers"import { onMount } from"svelte";let avatarType ="";let circlesAddress ="";let sdk:Sdk;exportconstconfig:CirclesConfig= { circlesRpcUrl:"https://chiado-rpc.aboutcircles.com", pathfinderUrl:"https://chiado-pathfinder.aboutcircles.com", v2PathfinderUrl:"https://chiado-pathfinder.aboutcircles.com/pathfinder/", profileServiceUrl:"https://chiado-pathfinder.aboutcircles.com/profiles/", v1HubAddress:"0xdbf22d4e8962db3b2f1d9ff55be728a887e47710", v2HubAddress:"0xEddc960D3c78692BF38577054cb0a35114AE35e0", migrationAddress:"0x8C9BeAccb6b7DBd3AeffB5D77cab36b62Fe98882", nameRegistryAddress:"0x5525cbF9ad01a4E805ed1b40723D6377b336eCcf" };asyncfunctioninitializeSdk() {// Get Adapterconstadapter=newBrowserProviderContractRunner();awaitadapter.init();// Get Circles Address circlesAddress =adapter.address;// Initialize the SDK with the adapter sdk =newSdk(config, adapter); }// Fetch the avatar associated with the wallet addressasyncfunctionfetchAvatar() {if (sdk && circlesAddress) {constavatar=awaitsdk.getAvatar(circlesAddress); avatarType =avatar.avatarInfo?.type ||"Unknown"; } }// Mounting the component and initializing the SDKonMount(async () => {awaitinitializeSdk();awaitfetchAvatar(); });</script><p> Avatar for {circlesAddress} is {avatarType}</p>
import React, { useEffect, useState } from'react';import { Sdk,type CirclesConfig } from"@circles-sdk/sdk";import { BrowserProviderContractRunner } from"@circles-sdk/adapter-ethers";constAvatarComponent= () => {const [circlesAddress,setCirclesAddress] =useState<string|undefined>(undefined);const [sdk,setSdk] =useState<Sdk|undefined>(undefined);const [avatarType,setAvatarType] =useState<string>("Unknown");const [avatarAddress,setAvatarAddress] =useState<string>("");exportconstconfig:CirclesConfig= { circlesRpcUrl:"https://chiado-rpc.aboutcircles.com", pathfinderUrl:"https://chiado-pathfinder.aboutcircles.com", v2PathfinderUrl:"https://chiado-pathfinder.aboutcircles.com/pathfinder/", profileServiceUrl:"https://chiado-pathfinder.aboutcircles.com/profiles/", v1HubAddress:"0xdbf22d4e8962db3b2f1d9ff55be728a887e47710", v2HubAddress:"0xEddc960D3c78692BF38577054cb0a35114AE35e0", migrationAddress:"0x8C9BeAccb6b7DBd3AeffB5D77cab36b62Fe98882", nameRegistryAddress:"0x5525cbF9ad01a4E805ed1b40723D6377b336eCcf" };// Initialize SDK and set the circles addressasyncfunctioninitializeSdk() {constadapter=newBrowserProviderContractRunner();awaitadapter.init();setCirclesAddress(adapter.address);setSdk(newSdk(chainConfig, adapter)); }// Initialize SDK when component mountsuseEffect(() => {initializeSdk(); }, []); // Empty dependency array to run only once on mount// Fetch avatar information when sdk and circlesAddress are availableuseEffect(() => {asyncfunctionfetchAvatar() {if (sdk && circlesAddress) {constavatar=awaitsdk.getAvatar(circlesAddress);setAvatarType(avatar.avatarInfo?.type ||"Unknown");setAvatarAddress(circlesAddress); } }fetchAvatar(); }, [sdk, circlesAddress]); // Runs when either sdk or circlesAddress updatesreturn ( <p> Avatar {avatarAddress} is {avatarType} </p> );};exportdefault AvatarComponent;