add base sepolia

package.json

@@ -34,6 +34,7 @@
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",
     "jwt-decode": "^4.0.0",
+    "oci-js-sdk": "^1.5.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",

src/App.tsx

@@ -2,21 +2,17 @@ import './App.css';
 import '@rainbow-me/rainbowkit/styles.css';
 
 import React from 'react';
-import { LitNetwork } from '@lit-protocol/constants';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import {
-  getDefaultConfig,
   RainbowKitAuthenticationProvider,
   RainbowKitProvider,
 } from '@rainbow-me/rainbowkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { WagmiProvider } from 'wagmi';
 import { sepolia } from 'wagmi/chains';
 
 import { CustomSnackbar } from './components/shared/CustomSnackbar';
-import { LitProvider } from './hooks/LitProvider';
 import useSiweAuth from './hooks/useSiweAuth';
 import DefaultLayout from './layouts/DefaultLayout';
 import theme from './libs/theme';
@@ -37,65 +33,54 @@ const queryClient = new QueryClient({
   },
 });
 
-const config = getDefaultConfig({
-  appName: 'RainbowKit demo',
-  projectId: '1cf030f3b91e339bc4e6ecf71a694a88',
-  chains: [sepolia],
-  ssr: false,
-});
-
 const App: React.FC = () => {
   const { authStatus, authenticationAdapter } = useSiweAuth();
 
   globalThis.Buffer = Buffer;
 
   return (
-    <LitProvider litNetwork={LitNetwork.DatilDev}>
-      <WagmiProvider config={config}>
-        <QueryClientProvider client={queryClient}>
-          <RainbowKitAuthenticationProvider
-            adapter={authenticationAdapter}
-            status={authStatus}
-          >
-            <RainbowKitProvider initialChain={sepolia}>
-              <ThemeProvider theme={theme}>
-                <CssBaseline />
-                <Routes>
-                  <Route
-                    path="/auth/login"
-                    element={
-                      authStatus === 'authenticated' ? (
-                        <Navigate to="/" replace />
-                      ) : (
-                        <Login />
-                      )
-                    }
-                  />
-                  <Route
-                    element={
-                      <ProtectedRoute>
-                        <DefaultLayout />
-                      </ProtectedRoute>
-                    }
-                  >
-                    <Route path="/" element={<Navigate to="/identifiers" />} />
-                    <Route path="/identifiers" element={<Identifiers />} />
-                    <Route
-                      path="identifiers/:provider/attestation"
-                      element={<Attestation />}
-                    />
-                    <Route path="/permissions" element={<Permissions />} />
-                  </Route>
-                  <Route path="/callback" element={<Callback />} />
-                  <Route path="*" element={<div>Not found</div>} />
-                </Routes>
-                <CustomSnackbar />
-              </ThemeProvider>
-            </RainbowKitProvider>
-          </RainbowKitAuthenticationProvider>
-        </QueryClientProvider>
-      </WagmiProvider>
-    </LitProvider>
+    <QueryClientProvider client={queryClient}>
+      <RainbowKitAuthenticationProvider
+        adapter={authenticationAdapter}
+        status={authStatus}
+      >
+        <RainbowKitProvider initialChain={sepolia}>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Routes>
+              <Route
+                path="/auth/login"
+                element={
+                  authStatus === 'authenticated' ? (
+                    <Navigate to="/" replace />
+                  ) : (
+                    <Login />
+                  )
+                }
+              />
+              <Route
+                element={
+                  <ProtectedRoute>
+                    <DefaultLayout />
+                  </ProtectedRoute>
+                }
+              >
+                <Route path="/" element={<Navigate to="/identifiers" />} />
+                <Route path="/identifiers" element={<Identifiers />} />
+                <Route
+                  path="identifiers/:provider/attestation"
+                  element={<Attestation />}
+                />
+                <Route path="/permissions" element={<Permissions />} />
+              </Route>
+              <Route path="/callback" element={<Callback />} />
+              <Route path="*" element={<div>Not found</div>} />
+            </Routes>
+            <CustomSnackbar />
+          </ThemeProvider>
+        </RainbowKitProvider>
+      </RainbowKitAuthenticationProvider>
+    </QueryClientProvider>
   );
 };
 

src/components/layouts/AccountPopover.tsx

@@ -22,7 +22,6 @@ function AccountPopover() {
   };
 
   const handleLogout = () => {
-    console.log('User logged out');
     handleClose();
   };
 

src/components/pages/attestations/StepThree.tsx

@@ -9,11 +9,12 @@ import {
 import { FaLink } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 import { Address } from 'viem';
+import { useAccount } from 'wagmi';
 
 import { AttestPayload } from '../../../interfaces';
 import EASService from '../../../services/eas.service';
 import useSnackbarStore from '../../../store/useSnackbarStore';
-import sepoliaChain from '../../../utils/contracts/eas/sepoliaChain.json';
+import { contracts } from '../../../utils/contracts/eas/contracts';
 import { useSigner } from '../../../utils/eas-wagmi-utils';
 
 interface StepThreeProps {
@@ -24,10 +25,15 @@ const StepThree: React.FC<StepThreeProps> = ({ attestedSignutare }) => {
   const { showSnackbar } = useSnackbarStore();
   const navigate = useNavigate();
   const signer = useSigner();
+  const { chainId } = useAccount();
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const easContractAddress = contracts.find(
+    (contract) => contract.chainId === chainId
+  )?.easContractAddress;
+
   const easService = signer
-    ? new EASService(sepoliaChain.easContractAddress as Address, signer)
+    ? new EASService(easContractAddress as Address, signer)
     : null;
 
   const handleAttestByDelegation = async () => {

src/components/pages/attestations/StepTwo.tsx

@@ -7,6 +7,7 @@ import {
   Typography,
 } from '@mui/material';
 import { FaLink } from 'react-icons/fa6';
+import { useAccount } from 'wagmi';
 
 import { Provider } from '../../../enums';
 import { AttestPayload } from '../../../interfaces';
@@ -22,7 +23,10 @@ const StepTwo: React.FC<StepTwoProps> = ({
   provider,
   handlePrepareAttestation,
 }) => {
-  const { mutate: mutateIdentifier, isPending } = useLinkIdentifierMutation();
+  const { chainId } = useAccount();
+  const { mutate: mutateIdentifier, isPending } = useLinkIdentifierMutation(
+    chainId as number
+  );
 
   const handleGenerateSignedDelegation = async () => {
     const siweJwt = localStorage.getItem('OCI_TOKEN');

src/hooks/LitProvider.tsx

@@ -40,7 +40,6 @@ export const LitProvider = ({ litNetwork, children }: ILitProvider) => {
       try {
         await client.connect();
         setConnected(true);
-        console.log(`Connected to Lit Network: ${litNetwork}`);
       } catch (error) {
         console.error('Failed to connect to Lit Network:', error);
         setConnected(false);

src/hooks/useAttestations.tsx

@@ -28,7 +28,7 @@ const useAttestations = () => {
     error,
     isLoading,
     refetch,
-  } = useGetAttestations(address as `0x${string}`);
+  } = useGetAttestations(address as `0x${string}`, chainId as number);
 
   const [attestations, setAttestations] = useState<ProcessedAttestation[]>([]);
 

src/hooks/useSessionSigs.tsx

@@ -56,7 +56,7 @@ function useSessionSigs() {
           litNodeClient,
         });
         const authSig = generateAuthSig({ signer, toSign });
-        console.log('authSig', authSig);
+
         return authSig;
       };
 
@@ -71,7 +71,6 @@ function useSessionSigs() {
         ],
         authNeededCallback,
       });
-      console.log('sessionSigs', sessionSigs);
       setSessionSigs(sessionSigs);
     },
     []

src/hooks/useSiweAuth.tsx

@@ -6,10 +6,13 @@ import {
 import { useNavigate } from 'react-router-dom';
 import { getAddress } from 'viem';
 import { createSiweMessage } from 'viem/siwe';
+import { useAccount } from 'wagmi';
 
 import { api } from '../services/api';
 
 const useSiweAuth = () => {
+  const { chainId } = useAccount();
+
   const navigate = useNavigate();
   const [authStatus, setAuthStatus] =
     useState<AuthenticationStatus>('unauthenticated');
@@ -19,10 +22,10 @@ const useSiweAuth = () => {
       const { data } = await api.get('auth/siwe/nonce');
       return data.nonce;
     },
-    createMessage: ({ nonce, address, chainId }) => {
+    createMessage: ({ nonce, address }) => {
       return createSiweMessage({
         address: getAddress(address),
-        chainId,
+        chainId: chainId as number,
         domain: window.location.host,
         nonce,
         uri: window.location.origin,
@@ -35,7 +38,7 @@ const useSiweAuth = () => {
       const { data } = await api.post('auth/siwe/verify', {
         message,
         signature,
-        chainId: 11155111,
+        chainId: chainId as number,
       });
 
       if (data?.jwt) {

src/interfaces/index.ts

@@ -22,6 +22,7 @@ export interface IAttestation {
   revocable: boolean;
   data: `0x${string}`;
   id?: string;
+  key?: string;
   provider?: string;
 }
 

src/main.tsx

@@ -1,15 +1,29 @@
 import './index.css';
 
 import React from 'react';
+import { getDefaultConfig } from '@rainbow-me/rainbowkit';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import { baseSepolia, optimismSepolia } from 'viem/chains';
+import { WagmiProvider } from 'wagmi';
 
 import App from './App';
 
+const projectID = import.meta.env.VITE_PROJECT_ID;
+
+const config = getDefaultConfig({
+  appName: 'RainbowKit demo',
+  projectId: projectID,
+  chains: [optimismSepolia, baseSepolia],
+  ssr: false,
+});
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <WagmiProvider config={config}>
+        <App />
+      </WagmiProvider>
     </BrowserRouter>
   </React.StrictMode>
 );

src/pages/Identifiers/Identifiers.tsx

@@ -23,6 +23,7 @@ import clsx from 'clsx';
 import { FaDiscord, FaGoogle } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 import { Address } from 'viem';
+import { useAccount } from 'wagmi';
 
 import useAttestations from '../../hooks/useAttestations';
 import { IAttestation, RevokePayload } from '../../interfaces';
@@ -32,7 +33,7 @@ import {
 } from '../../services/api/eas/query';
 import EASService from '../../services/eas.service';
 import useSnackbarStore from '../../store/useSnackbarStore';
-import sepoliaChain from '../../utils/contracts/eas/sepoliaChain.json';
+import { contracts } from '../../utils/contracts/eas/contracts';
 import { useSigner } from '../../utils/eas-wagmi-utils';
 
 interface Identifier {
@@ -45,6 +46,7 @@ interface Identifier {
 
 export default function Identifiers() {
   const navigate = useNavigate();
+  const { chainId: chainIdNetwork } = useAccount();
   const { showSnackbar } = useSnackbarStore();
   const [userIdentifiers, setUserIdentifiers] = useState<Identifier[]>([
     { name: 'Discord', icon: FaDiscord, verified: false, uid: '' },
@@ -58,8 +60,12 @@ export default function Identifiers() {
 
   const signer = useSigner();
 
+  const easContractAddress = contracts.find(
+    (contract) => contract.chainId === chainIdNetwork
+  )?.easContractAddress;
+
   const easService = signer
-    ? new EASService(sepoliaChain.easContractAddress as Address, signer)
+    ? new EASService(easContractAddress as Address, signer)
     : null;
 
   const {