Setting up Circles SDK with React

Make CirclesSDK globally available using useContext Hook with React and initialize the SDK across application.

//CirclesSDKContext.jsx

import React, { createContext, useState, useEffect, useCallback } from "react";
import { BrowserProviderContractRunner } from "@circles-sdk/adapter-ethers";
import { Sdk } from "@circles-sdk/sdk";

const CirclesSDKContext = createContext(null);

export const CirclesSDK = ({ children }) => {
  const [sdk, setSdk] = useState(null);
  const [isConnected, setIsConnected] = useState(false);
  const [adapter, setAdapter] = useState(null);
  const [circlesProvider, setCirclesProvider] = useState(null);
  const [circlesAddress, setCirclesAddress] = useState(null);

  const chainConfig = {
    pathfinderUrl: "https://pathfinder.aboutcircles.com",
    circlesRpcUrl: "https://rpc.falkenstein.aboutcircles.com",
    v1HubAddress: "0x29b9a7fbb8995b2423a71cc17cf9810798f6c543",
    v2HubAddress: "0xa5c7ADAE2fd3844f12D52266Cb7926f8649869Da",
    migrationAddress: "0xe1dCE89512bE1AeDf94faAb7115A1Ba6AEff4201",
    nameRegistryAddress: "0x738fFee24770d0DE1f912adf2B48b0194780E9AD",
    profileServiceUrl: "https://chiado-pathfinder.aboutcircles.com/profiles/",
  };

  const initSdk = useCallback(async () => {
    try {
      const adapter = new BrowserProviderContractRunner();
      await adapter.init(); // Initialize the adapter before using it
      setAdapter(adapter); // Set the adapter in the state after initialization

      const circlesProvider = adapter.provider;
      setCirclesProvider(circlesProvider);

      const circlesAddress = await adapter.address;
      setCirclesAddress(circlesAddress);

      const sdk = new Sdk(chainConfig, adapter); // Pass the initialized adapter to the SDK
      setSdk(sdk); // Set the SDK in the state
      setIsConnected(true);
    } catch (error) {
      console.error("Error initializing SDK:", error);
    }
  }, []);

  useEffect(() => {}, [initSdk]);

  return (
    <CirclesSDKContext.Provider
      value={{
        sdk,
        setIsConnected,
        isConnected,
        adapter,
        circlesProvider,
        circlesAddress,
        initSdk,
      }}
    >
      {children}
    </CirclesSDKContext.Provider>
  );
};

export default CirclesSDKContext;

If you want to simply utilize the React and Vite Framework and CirclesSDK Context, you can checkout the repository here and git clone.

git clone https://github.com/vanshika-srivastava/circles-vite-app.git

>> npm install 
>> npm run dev