fix logout and update graphql query (#63)

* fix logout and update graphql query

* update test case

src/App.tsx

@@ -4,7 +4,7 @@ import '@rainbow-me/rainbowkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { Route, Routes, Navigate } from 'react-router-dom';
+import { Route, Routes, Navigate, useNavigate } from 'react-router-dom';
 import { WagmiProvider } from 'wagmi';
 import {
   AuthenticationStatus,
@@ -50,6 +50,7 @@ const config = getDefaultConfig({
 });
 
 const App: React.FC = () => {
+  const navigate = useNavigate();
   const [authStatus, setAuthStatus] =
     useState<AuthenticationStatus>('unauthenticated');
 
@@ -91,22 +92,11 @@ const App: React.FC = () => {
     },
     signOut: async () => {
       localStorage.removeItem('OCI_TOKEN');
+      navigate('/auth/login');
+      setAuthStatus('unauthenticated');
     },
   });
 
-  useEffect(() => {
-    const checkStoredToken = () => {
-      const OCI_TOKEN = localStorage.getItem('OCI_TOKEN');
-      if (OCI_TOKEN) {
-        setAuthStatus('authenticated');
-      } else {
-        setAuthStatus('unauthenticated');
-      }
-    };
-
-    checkStoredToken();
-  }, []);
-
   useEffect(() => {
     console.log('authStatus', authStatus);
   }, [authStatus]);

src/components/layouts/AppbarApp.spec.tsx

@@ -1,16 +1,11 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
-import { IconButton, Avatar } from '@mui/material';
 import AppbarApp from './AppbarApp';
 
-vi.mock('./AccountPopover', () => ({
-  default: () => (
-    <div>
-      <IconButton data-testid="account-popover-button">
-        <Avatar />
-      </IconButton>
-      <div data-testid="account-popover">AccountPopover</div>
-    </div>
+// Mocking the ConnectButton from RainbowKit
+vi.mock('@rainbow-me/rainbowkit', () => ({
+  ConnectButton: () => (
+    <div data-testid="connect-button">Mocked ConnectButton</div>
   ),
 }));
 
@@ -20,18 +15,12 @@ describe('AppbarApp', () => {
 
     const appBar = screen.getByTestId('Appbar');
     expect(appBar).toBeInTheDocument();
-
-    const accountPopover = screen.getByTestId('account-popover');
-    expect(accountPopover).toBeInTheDocument();
   });
 
-  it('should open AccountPopover on icon button click', () => {
+  it('should render the ConnectButton', () => {
     render(<AppbarApp />);
 
-    const iconButton = screen.getByTestId('account-popover-button');
-    fireEvent.click(iconButton);
-
-    const accountPopover = screen.getByTestId('account-popover');
-    expect(accountPopover).toBeVisible();
+    const connectButton = screen.getByTestId('connect-button');
+    expect(connectButton).toBeInTheDocument();
   });
 });

src/components/layouts/AppbarApp.tsx

@@ -1,5 +1,5 @@
 import { AppBar, Box, Toolbar } from '@mui/material';
-import AccountPopover from './AccountPopover';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 
 function AppbarApp() {
   return (
@@ -24,7 +24,7 @@ function AppbarApp() {
               justifyContent: 'flex-end',
             }}
           >
-            <AccountPopover />
+            <ConnectButton />
           </Box>
         </Toolbar>
       </AppBar>

src/pages/Identifiers/Identifiers.tsx

@@ -134,7 +134,7 @@ const IdentifierItem: React.FC<IdentifierItemProps> = ({
 
 export function Identifiers() {
   const { showSnackbar } = useSnackbarStore();
-  const { chainId } = useAccount();
+  const { chainId, address } = useAccount();
   const navigate = useNavigate();
 
   const signer = useSigner();
@@ -156,7 +156,7 @@ export function Identifiers() {
     data: attestationsResponse,
     refetch,
     isLoading,
-  } = useGetAttestations();
+  } = useGetAttestations(address as `0x${string}`);
 
   const { mutate: mutateRevokeIdentifier, data: revokeIdentifierResponse } =
     useRevokeIdentifierMutation();

src/pages/Permissions/Permissions.tsx

@@ -6,6 +6,7 @@ import {
   useReadContracts,
   useWriteContract,
   useWaitForTransactionReceipt,
+  useAccount,
 } from 'wagmi';
 import { Address, Abi } from 'viem';
 import {
@@ -30,6 +31,7 @@ import useSnackbarStore from '../../store/useSnackbarStore';
 
 export function Permissions() {
   const { showSnackbar } = useSnackbarStore();
+  const { address } = useAccount();
   const navigate = useNavigate();
   const {
     data: transactionHash,
@@ -45,7 +47,7 @@ export function Permissions() {
     data: attestationsResponse,
     isLoading: isLoadingAttestations,
     refetch: refetchAttestations,
-  } = useGetAttestations();
+  } = useGetAttestations(address as `0x${string}`);
   const [applicationsArgs] = useState<[number, number]>([0, 10]);
   const [attestations, setAttestations] = useState<
     (IAttestation & { provider?: string; id?: string })[]

src/services/eas/query.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { gql } from 'graphql-request';
+import { Address } from 'viem';
 import { ATTESTER_ADDRESS, graphQLClient } from '.';
 import { EAS_SCHEMA_ID } from '../../utils/contracts/eas/constants';
 import { IAttestation } from '../../libs/oci';
@@ -8,9 +9,9 @@ interface AttestationsResponse {
   attestations: IAttestation[];
 }
 
-export const useGetAttestations = () => {
+export const useGetAttestations = (recipient: Address) => {
   return useQuery<IAttestation[]>({
-    queryKey: ['getAttestations'],
+    queryKey: ['getAttestations', recipient],
     queryFn: async () => {
       const query = gql`
         query Attestations(
@@ -40,7 +41,7 @@ export const useGetAttestations = () => {
 
       const variables = {
         attester: ATTESTER_ADDRESS,
-        recipient: '0x026B727b60D336806B87d60e95B6d7FAd2443dD6',
+        recipient,
         schemaId: EAS_SCHEMA_ID,
       };
 
@@ -51,5 +52,6 @@ export const useGetAttestations = () => {
 
       return attestedResults.attestations;
     },
+    enabled: !!recipient,
   });
 };