Fix/hotfixes (#61)

* add snackbar global component * fix issue on onchain platform * remove import
TogetherCrew · Aug 29, 2024 · 4c3baa1 · 4c3baa1
1 parent a6de7cc
commit 4c3baa1
Show file tree

Hide file tree

Showing 9 changed files with 341 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>