Fix/axios

src/App.tsx

@@ -10,7 +10,7 @@ import {
 } from '@rainbow-me/rainbowkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { arbitrum } from 'viem/chains';
+import { arbitrum, baseSepolia } from 'viem/chains';
 import { useAccount } from 'wagmi';
 
 import MobileScreensContainer from './components/layouts/MobileScreensContainer';
@@ -38,6 +38,8 @@ const queryClient = new QueryClient({
 const App: React.FC = () => {
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
+  const isProduction = import.meta.env.VITE_IS_MAINNET === 'true';
+
   const { authStatus, authenticationAdapter } = useSiweAuth();
   const { chainId } = useAccount();
 
@@ -54,7 +56,7 @@ const App: React.FC = () => {
         status={authStatus}
       >
         <RainbowKitProvider
-          initialChain={chainId ?? arbitrum}
+          initialChain={chainId ?? (isProduction ? arbitrum : baseSepolia)}
           theme={lightTheme({
             accentColor: '#4200FF',
           })}

src/main.tsx

@@ -6,7 +6,7 @@ import { CssBaseline } from '@mui/material';
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { arbitrum, baseSepolia, optimismSepolia } from 'viem/chains';
+import { arbitrum, baseSepolia, Chain } from 'viem/chains';
 import { http, WagmiProvider } from 'wagmi';
 
 import App from './App';
@@ -17,12 +17,17 @@ if (!import.meta.env.VITE_PROJECT_ID) {
 }
 const projectID = import.meta.env.VITE_PROJECT_ID;
 
-export const SUPPORTED_CHAINS = [baseSepolia, optimismSepolia, arbitrum];
+const isProduction = import.meta.env.VITE_IS_MAINNET === 'true';
+
+export const SUPPORTED_CHAINS: Chain[] = isProduction
+  ? [arbitrum]
+  : [baseSepolia];
 
 const config = getDefaultConfig({
   appName: 'Identity on chain platform',
   projectId: projectID,
-  chains: [optimismSepolia, baseSepolia, arbitrum],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  chains: SUPPORTED_CHAINS as any,
   transports: SUPPORTED_CHAINS.reduce(
     (obj, chain) => ({ ...obj, [chain.id]: http() }),
     {}

src/services/api/index.ts

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
 
 import useSnackbarStore from '../../store/useSnackbarStore';
 
@@ -41,22 +40,32 @@ apiInstance.interceptors.request.use(
 apiInstance.interceptors.response.use(
   (response) => response,
   (error) => {
-    const navigate = useNavigate();
-    const { showSnackbar } = useSnackbarStore();
-    if (error.response?.status === 400) {
-      showSnackbar('Bad Request', {
-        severity: 'error',
-      });
-    }
+    const { showSnackbar } = useSnackbarStore.getState();
 
     if (error.response?.status === 401) {
-      // Show the snackbar message
+      localStorage.removeItem('OCI_TOKEN');
       showSnackbar('Session expired. Please log in again.', {
-        severity: 'warning',
+        severity: 'error',
+        duration: 5000,
+        position: { vertical: 'bottom', horizontal: 'right' },
+      });
+      window.location.href = '/auth/login';
+    } else if (error.response?.status === 400) {
+      showSnackbar(
+        `${error.response?.data?.message?.message?.[0] || 'Bad request'}`,
+        {
+          severity: 'warning',
+          duration: 5000,
+          position: { vertical: 'bottom', horizontal: 'right' },
+        }
+      );
+      window.location.href = '/auth/login';
+    } else {
+      showSnackbar('An unexpected error occurred.', {
+        severity: 'error',
+        duration: 5000,
+        position: { vertical: 'bottom', horizontal: 'right' },
       });
-
-      // Redirect the user to the login page
-      navigate('/auth/login');
     }
 
     return Promise.reject(error);