From 4c3baa11d60d354e407dbebf65d481ba4422eaf0 Mon Sep 17 00:00:00 2001
From: Mehdi Torabi <46302001+mehdi-torabiv@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:46:37 +0300
Subject: [PATCH] Fix/hotfixes (#61)

* add snackbar global component

* fix issue on onchain platform

* remove import
---
 src/App.tsx                                   |   9 +-
 src/ProtectedRoute.tsx                        |  10 ++
 src/components/shared/CustomSnackbar.tsx      |  33 ++++
 src/libs/constants.ts                         |  12 +-
 .../Identifiers/Attestation/Attestation.tsx   |  21 ++-
 src/pages/Identifiers/Identifiers.tsx         |  99 +++++++++---
 src/pages/Permissions/Permissions.tsx         | 149 +++++++++++++++---
 src/services/api/index.ts                     |  29 ++++
 src/store/useSnackbarStore.ts                 |  38 +++++
 9 files changed, 341 insertions(+), 59 deletions(-)
 create mode 100644 src/components/shared/CustomSnackbar.tsx
 create mode 100644 src/store/useSnackbarStore.ts

diff --git a/src/App.tsx b/src/App.tsx
index fbe0220..b98f632 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,13 +23,14 @@ import { api } from './services/api';
 
 import DefaultLayout from './layouts/DefaultLayout';
 
-import Dashboard from './pages/Dashboard';
+// import Dashboard from './pages/Dashboard';
 import Identifiers from './pages/Identifiers';
 import Permissions from './pages/Permissions';
 import Attestation from './pages/Identifiers/Attestation';
 import Callback from './pages/Callback';
 import ProtectedRoute from './ProtectedRoute';
 import { LitProvider } from './hooks/LitProvider';
+import { CustomSnackbar } from './components/shared/CustomSnackbar';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -142,7 +143,10 @@ const App: React.FC = () => {
                         </ProtectedRoute>
                       }
                     >
-                      <Route path="/" element={<Dashboard />} />
+                      <Route
+                        path="/"
+                        element={<Navigate to="/identifiers" />}
+                      />
                       <Route path="/identifiers" element={<Identifiers />} />
                       <Route
                         path="identifiers/:providers/attestation"
@@ -153,6 +157,7 @@ const App: React.FC = () => {
                     <Route path="/callback" element={<Callback />} />
                     <Route path="*" element={<div>Not found</div>} />
                   </Routes>
+                  <CustomSnackbar />
                 </ThemeProvider>
               </RainbowKitProvider>
             </RainbowKitAuthenticationProvider>
diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx
index 732e684..79d2b9f 100644
--- a/src/ProtectedRoute.tsx
+++ b/src/ProtectedRoute.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import CircularProgress from '@mui/material/CircularProgress';
 import Backdrop from '@mui/material/Backdrop';
+import { useAccount } from 'wagmi';
 
 interface ProtectedRouteProps {
   children: JSX.Element;
@@ -11,6 +12,15 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
 
+  const { isConnected } = useAccount();
+
+  useEffect(() => {
+    if (!isConnected) {
+      setIsAuthenticated(false);
+      localStorage.removeItem('OCI_TOKEN');
+    }
+  }, [isConnected]);
+
   useEffect(() => {
     const checkAuthStatus = async () => {
       const token = localStorage.getItem('OCI_TOKEN');
diff --git a/src/components/shared/CustomSnackbar.tsx b/src/components/shared/CustomSnackbar.tsx
new file mode 100644
index 0000000..800aea6
--- /dev/null
+++ b/src/components/shared/CustomSnackbar.tsx
@@ -0,0 +1,33 @@
+import { Snackbar, Alert } from '@mui/material';
+
+import useSnackbarStore from '../../store/useSnackbarStore';
+
+/**
+ * CustomSnackbar component displays a Snackbar using Material-UI's Snackbar component.
+ * It uses Zustand store for managing Snackbar state globally.
+ *
+ * @returns {JSX.Element} The rendered CustomSnackbar component.
+ */
+export const CustomSnackbar = (): JSX.Element => {
+  const { message, open, options, closeSnackbar } = useSnackbarStore();
+
+  return (
+    <Snackbar
+      anchorOrigin={
+        options?.position || { vertical: 'bottom', horizontal: 'right' }
+      }
+      autoHideDuration={options?.duration}
+      open={open}
+      onClose={closeSnackbar}
+    >
+      <Alert
+        severity={options?.severity || 'info'}
+        sx={{ width: '100%' }}
+        variant="filled"
+        onClose={closeSnackbar}
+      >
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
diff --git a/src/libs/constants.ts b/src/libs/constants.ts
index 4938b27..ece2e56 100644
--- a/src/libs/constants.ts
+++ b/src/libs/constants.ts
@@ -1,4 +1,4 @@
-import SpaceDashboardIcon from '@mui/icons-material/SpaceDashboard';
+// import SpaceDashboardIcon from '@mui/icons-material/SpaceDashboard';
 import FingerprintIcon from '@mui/icons-material/Fingerprint';
 import { SiAdguard } from 'react-icons/si';
 import { SvgIconComponent } from '@mui/icons-material';
@@ -13,11 +13,11 @@ export interface MenuItem {
 export const DRAWER_WIDTH = 240;
 
 export const SIDEBAR_MENU: MenuItem[] = [
-  {
-    title: 'Dashboard',
-    path: '/',
-    icon: SpaceDashboardIcon,
-  },
+  // {
+  //   title: 'Dashboard',
+  //   path: '/',
+  //   icon: SpaceDashboardIcon,
+  // },
   {
     title: 'Identifiers',
     path: '/identifiers',
diff --git a/src/pages/Identifiers/Attestation/Attestation.tsx b/src/pages/Identifiers/Attestation/Attestation.tsx
index b16b887..baec5b0 100644
--- a/src/pages/Identifiers/Attestation/Attestation.tsx
+++ b/src/pages/Identifiers/Attestation/Attestation.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useEffect } from 'react';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
@@ -21,6 +22,7 @@ import {
   convertStringsToBigInts,
   getTokenForProvider,
 } from '../../../utils/helper';
+import useSnackbarStore from '../../../store/useSnackbarStore';
 
 const steps = [{ label: 'Auth' }, { label: 'Attest' }, { label: 'Transact' }];
 
@@ -31,7 +33,7 @@ type DecodedToken = { provider: Provider; iat: number; exp: number };
 export function Attestation() {
   const { isConnected, address } = useAccount();
   const signer = useSigner();
-
+  const { showSnackbar } = useSnackbarStore();
   const { providers } = useParams<{ providers: 'DISCORD' | 'GOOGLE' }>();
   const location = useLocation();
   const navigate = useNavigate();
@@ -149,9 +151,26 @@ export function Attestation() {
 
       const newAttestationUID = await tx.wait();
 
+      showSnackbar('Attestation created successfully', {
+        severity: 'success',
+      });
+
+      navigate('/identifiers');
+
       console.log('New attestation UID:', newAttestationUID);
 
       console.log('Transaction receipt:', tx.receipt);
+    } catch (error: any) {
+      const errorCode = error?.info?.error?.code || '';
+
+      if (errorCode === 4001) {
+        showSnackbar(
+          `${errorCode}, you reject the transaction. please try again...`,
+          {
+            severity: 'error',
+          }
+        );
+      }
     } finally {
       setIsAttesting(false);
     }
diff --git a/src/pages/Identifiers/Identifiers.tsx b/src/pages/Identifiers/Identifiers.tsx
index 7a3fe3d..2595131 100644
--- a/src/pages/Identifiers/Identifiers.tsx
+++ b/src/pages/Identifiers/Identifiers.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useState, useCallback } from 'react';
 import {
   List,
@@ -12,6 +14,8 @@ import {
   Avatar,
   CircularProgress,
   IconButton,
+  Backdrop,
+  Stack,
 } from '@mui/material';
 import VerifiedIcon from '@mui/icons-material/Verified';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -35,6 +39,7 @@ import {
 } from '../../services/api/eas/query';
 import { RevokePayload } from '../../interfaces';
 import { convertStringsToBigInts } from '../../utils/helper';
+import useSnackbarStore from '../../store/useSnackbarStore';
 
 interface IdentifierItemProps {
   identifier: {
@@ -79,22 +84,24 @@ const IdentifierItem: React.FC<IdentifierItemProps> = ({
                 <VerifiedIcon sx={{ color: 'blue', mr: 1 }} />
               )}
               <Typography>{identifier.name}</Typography>
-              <div className="ml-3">
-                {isRevealedPending ? (
-                  <CircularProgress size={24} />
-                ) : (
-                  <>
-                    {isRevealed !== '*********' ? isRevealed : '*********'}
-                    <IconButton onClick={onReveal} sx={{ ml: 1 }}>
-                      {isRevealed !== '*********' ? (
-                        <VisibilityOffIcon />
-                      ) : (
-                        <VisibilityIcon />
-                      )}
-                    </IconButton>
-                  </>
-                )}
-              </div>
+              {identifier.verified && (
+                <div className="ml-3">
+                  {isRevealedPending ? (
+                    <CircularProgress size={24} />
+                  ) : (
+                    <>
+                      {isRevealed !== '*********' ? isRevealed : '*********'}
+                      <IconButton onClick={onReveal} sx={{ ml: 1 }}>
+                        {isRevealed !== '*********' ? (
+                          <VisibilityOffIcon />
+                        ) : (
+                          <VisibilityIcon />
+                        )}
+                      </IconButton>
+                    </>
+                  )}
+                </div>
+              )}
             </div>
           }
           sx={{ ml: 2 }}
@@ -103,7 +110,7 @@ const IdentifierItem: React.FC<IdentifierItemProps> = ({
           {identifier.verified ? (
             <Button
               variant="outlined"
-              color="error"
+              color="inherit"
               onClick={() => onRevoke(identifier.uid)}
               disabled={isLoading}
               startIcon={isLoading ? <CircularProgress size={16} /> : null}
@@ -126,7 +133,10 @@ const IdentifierItem: React.FC<IdentifierItemProps> = ({
 );
 
 export function Identifiers() {
+  const { showSnackbar } = useSnackbarStore();
   const { chainId } = useAccount();
+  const navigate = useNavigate();
+
   const signer = useSigner();
 
   const [identifiers, setIdentifiers] = useState([
@@ -142,7 +152,11 @@ export function Identifiers() {
   const [attestations, setAttestations] = useState<
     (IAttestation & { provider?: string; id?: string })[]
   >([]);
-  const { data: attestationsResponse, refetch } = useGetAttestations();
+  const {
+    data: attestationsResponse,
+    refetch,
+    isLoading,
+  } = useGetAttestations();
 
   const { mutate: mutateRevokeIdentifier, data: revokeIdentifierResponse } =
     useRevokeIdentifierMutation();
@@ -217,8 +231,6 @@ export function Identifiers() {
     setRevealedIdentifiers(initialRevealedState);
   }, [attestations]);
 
-  const navigate = useNavigate();
-
   const handleRevoke = useCallback(
     (uid: string) => {
       const siweJwt = localStorage.getItem('OCI_TOKEN');
@@ -298,7 +310,7 @@ export function Identifiers() {
   useEffect(() => {
     const revokeIdentifier = async () => {
       if (revokeIdentifierResponse) {
-        console.log('Revoke identifier response', revokeIdentifierResponse);
+        console.log('Revoke identifier response:', revokeIdentifierResponse);
 
         const payload: RevokePayload = convertStringsToBigInts(
           revokeIdentifierResponse.data
@@ -328,8 +340,12 @@ export function Identifiers() {
             };
 
             const tx = await eas.revokeByDelegation(transformedPayload);
-
             await tx.wait();
+            console.log({ tx });
+
+            showSnackbar('Identifier revoked successfully', {
+              severity: 'success',
+            });
 
             setLoadingIdentifiers((prev) => ({
               ...prev,
@@ -338,8 +354,17 @@ export function Identifiers() {
           } else {
             throw new Error('Invalid message type for revocation');
           }
-        } catch (error) {
-          console.error('Error during revocation:', error);
+        } catch (error: any) {
+          const errorCode = error?.info?.error?.code || '';
+
+          if (errorCode === 4001) {
+            showSnackbar(
+              `${errorCode}, you reject the transaction. please try again...`,
+              {
+                severity: 'error',
+              }
+            );
+          }
 
           if ('uid' in payload.message) {
             setLoadingIdentifiers((prev) => ({
@@ -356,6 +381,32 @@ export function Identifiers() {
     revokeIdentifier();
   }, [revokeIdentifierResponse]);
 
+  if (isLoading) {
+    return (
+      <Backdrop
+        open={isLoading}
+        sx={{
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          background: '#fff',
+          color: 'black',
+        }}
+      >
+        <Stack
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <CircularProgress color="inherit" />
+          <Typography variant="h6" gutterBottom style={{ marginLeft: '15px' }}>
+            Loading...
+          </Typography>
+        </Stack>
+      </Backdrop>
+    );
+  }
+
   return (
     <div>
       <Typography variant="h6" gutterBottom>
diff --git a/src/pages/Permissions/Permissions.tsx b/src/pages/Permissions/Permissions.tsx
index 4766fcb..7da2e64 100644
--- a/src/pages/Permissions/Permissions.tsx
+++ b/src/pages/Permissions/Permissions.tsx
@@ -1,8 +1,23 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useMemo, useState } from 'react';
-import { useReadContract, useReadContracts, useWriteContract } from 'wagmi';
+import {
+  useReadContract,
+  useReadContracts,
+  useWriteContract,
+  useWaitForTransactionReceipt,
+} from 'wagmi';
 import { Address, Abi } from 'viem';
-import { Backdrop, CircularProgress, Stack, Typography } from '@mui/material';
+import {
+  Alert,
+  Backdrop,
+  Box,
+  Button,
+  CircularProgress,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 import { useGetAttestations } from '../../services/eas/query';
 import sepoliaChainAppConctract from '../../utils/contracts/app/sepoliaChain.json';
 import sepoliaChainOidonctract from '../../utils/contracts/oid/sepoliaChain.json';
@@ -11,11 +26,26 @@ import CustomTable, {
   Platform,
   AccessData,
 } from '../../components/shared/CustomTable';
+import useSnackbarStore from '../../store/useSnackbarStore';
 
 export function Permissions() {
-  const { writeContract, isPending: isWriting } = useWriteContract();
-  const { data: attestationsResponse, isLoading: isLoadingAttestations } =
-    useGetAttestations();
+  const { showSnackbar } = useSnackbarStore();
+  const navigate = useNavigate();
+  const {
+    data: transactionHash,
+    writeContract,
+    isPending: isWriting,
+  } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash: transactionHash,
+    });
+
+  const {
+    data: attestationsResponse,
+    isLoading: isLoadingAttestations,
+    refetch: refetchAttestations,
+  } = useGetAttestations();
   const [applicationsArgs] = useState<[number, number]>([0, 10]);
   const [attestations, setAttestations] = useState<
     (IAttestation & { provider?: string; id?: string })[]
@@ -28,6 +58,7 @@ export function Permissions() {
     data,
     isLoading: isLoadingApplications,
     error,
+    refetch: refetchApplications,
   } = useReadContract({
     abi: sepoliaChainAppConctract.appContractABI,
     address: sepoliaChainAppConctract.appContractAddress as Address,
@@ -87,10 +118,13 @@ export function Permissions() {
     [attestations, applications]
   );
 
-  const { data: hasPermissionsOnApp, isLoading: isLoadingPermissions } =
-    useReadContracts({
-      contracts: contractCalls,
-    });
+  const {
+    data: hasPermissionsOnApp,
+    isLoading: isLoadingPermissions,
+    refetch: refetchPermissions,
+  } = useReadContracts({
+    contracts: contractCalls,
+  });
 
   useEffect(() => {
     if (hasPermissionsOnApp) {
@@ -137,21 +171,51 @@ export function Permissions() {
   }));
 
   const handleGrantOrRevokeAccess = (application: any, platform: any) => {
-    writeContract({
-      abi: sepoliaChainOidonctract.oidContractAbi as Abi,
-      address: sepoliaChainOidonctract.oidContractAddress as Address,
-      functionName: application.hasPermission
-        ? 'revokePermission'
-        : 'grantPermission',
-      args: [platform.uid, application.account],
-    });
+    writeContract(
+      {
+        abi: sepoliaChainOidonctract.oidContractAbi as Abi,
+        address: sepoliaChainOidonctract.oidContractAddress as Address,
+        functionName: application.hasPermission
+          ? 'revokePermission'
+          : 'grantPermission',
+        args: [platform.uid, application.account],
+      },
+      {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        onError: (error: any) => {
+          const errorCode = error.cause?.code || error.code;
+
+          if (errorCode === 4001) {
+            showSnackbar(
+              `${errorCode}, you rejected the transaction. Please try again...`,
+              {
+                severity: 'error',
+              }
+            );
+          } else {
+            showSnackbar(`Transaction failed: ${error.message}`, {
+              severity: 'error',
+            });
+          }
+        },
+      }
+    );
   };
 
+  useEffect(() => {
+    if (isConfirmed) {
+      refetchAttestations();
+      refetchApplications();
+      refetchPermissions();
+    }
+  }, [isConfirmed]);
+
   const isLoading =
     isWriting ||
     isLoadingAttestations ||
     isLoadingApplications ||
-    isLoadingPermissions;
+    isLoadingPermissions ||
+    isConfirming;
 
   return (
     <div>
@@ -176,14 +240,47 @@ export function Permissions() {
           </Typography>
         </Stack>
       </Backdrop>
-      <Typography variant="h6" gutterBottom>
-        Permissions
-      </Typography>
-      <CustomTable
-        xcolumns={providers}
-        ycolumns={permissionsWithUidsAndApps}
-        handleGrantOrRevokeAccess={handleGrantOrRevokeAccess}
-      />
+      {!isLoading && providers.length === 0 ? (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '80vh',
+          }}
+        >
+          <Alert severity="warning" sx={{ mb: 2 }}>
+            To be able to grant or revoke access to applications, you need to
+            have at least one identifier.
+          </Alert>
+          <Button
+            variant="contained"
+            color="warning"
+            onClick={() => {
+              navigate('/identifiers');
+            }}
+          >
+            Go to Identifiers
+          </Button>
+        </Box>
+      ) : (
+        <>
+          <Typography variant="h6" gutterBottom>
+            Permissions
+          </Typography>
+          <Alert severity="info" sx={{ mb: 2 }}>
+            <b>Note</b>: The process of revoking or granting access to
+            applications may take some time.
+          </Alert>
+          <CustomTable
+            xcolumns={providers}
+            ycolumns={permissionsWithUidsAndApps}
+            handleGrantOrRevokeAccess={handleGrantOrRevokeAccess}
+          />
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/services/api/index.ts b/src/services/api/index.ts
index 8147533..2802abf 100644
--- a/src/services/api/index.ts
+++ b/src/services/api/index.ts
@@ -1,4 +1,6 @@
 import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import useSnackbarStore from '../../store/useSnackbarStore';
 
 export const baseURL = import.meta.env.VITE_API_BASE_URL;
 
@@ -35,5 +37,32 @@ apiInstance.interceptors.request.use(
   }
 );
 
+apiInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const navigate = useNavigate();
+    const { showSnackbar } = useSnackbarStore();
+    console.log(error.response, 'test');
+
+    if (error.response?.status === 400) {
+      showSnackbar('Bad Request', {
+        severity: 'error',
+      });
+    }
+
+    if (error.response?.status === 401) {
+      // Show the snackbar message
+      showSnackbar('Session expired. Please log in again.', {
+        severity: 'warning',
+      });
+
+      // Redirect the user to the login page
+      navigate('/auth/login');
+    }
+
+    return Promise.reject(error);
+  }
+);
+
 export default apiInstance;
 export { apiInstance as api };
diff --git a/src/store/useSnackbarStore.ts b/src/store/useSnackbarStore.ts
new file mode 100644
index 0000000..5fd469b
--- /dev/null
+++ b/src/store/useSnackbarStore.ts
@@ -0,0 +1,38 @@
+import { SnackbarOrigin } from '@mui/material';
+import { create } from 'zustand';
+
+interface SnackbarState {
+  message: string;
+  open: boolean;
+  options?: SnackbarOptions;
+  showSnackbar: (message: string, options?: SnackbarOptions) => void;
+  closeSnackbar: () => void;
+}
+
+interface SnackbarOptions {
+  severity?: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+  position?: SnackbarOrigin;
+}
+
+const useSnackbarStore = create<SnackbarState>((set) => ({
+  message: '',
+  open: false,
+  options: {
+    severity: 'info',
+    duration: 3000,
+    position: { vertical: 'bottom', horizontal: 'right' },
+  },
+  showSnackbar: (message, options) =>
+    set({
+      message,
+      open: true,
+      options: {
+        ...options,
+        position: { vertical: 'bottom', horizontal: 'right' },
+      },
+    }),
+  closeSnackbar: () => set({ open: false }),
+}));
+
+export default useSnackbarStore;