From 1d5f88deab789ac0bd0d0c0ce428037f5a016d82 Mon Sep 17 00:00:00 2001 From: mehditorabiv Date: Fri, 30 Aug 2024 14:50:12 +0300 Subject: [PATCH 1/2] fix logout and update graphql query --- src/App.tsx | 18 ++++-------------- src/components/layouts/AppbarApp.tsx | 4 ++-- src/pages/Identifiers/Identifiers.tsx | 4 ++-- src/pages/Permissions/Permissions.tsx | 4 +++- src/services/eas/query.ts | 8 +++++--- 5 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6c8358d..b4b065d 100644 --- a/src/App.tsx +++ b/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('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]); diff --git a/src/components/layouts/AppbarApp.tsx b/src/components/layouts/AppbarApp.tsx index a4b197b..8fb36f0 100644 --- a/src/components/layouts/AppbarApp.tsx +++ b/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', }} > - + diff --git a/src/pages/Identifiers/Identifiers.tsx b/src/pages/Identifiers/Identifiers.tsx index 2595131..ac84857 100644 --- a/src/pages/Identifiers/Identifiers.tsx +++ b/src/pages/Identifiers/Identifiers.tsx @@ -134,7 +134,7 @@ const IdentifierItem: React.FC = ({ 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(); diff --git a/src/pages/Permissions/Permissions.tsx b/src/pages/Permissions/Permissions.tsx index 7da2e64..efedd47 100644 --- a/src/pages/Permissions/Permissions.tsx +++ b/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 })[] diff --git a/src/services/eas/query.ts b/src/services/eas/query.ts index baa1885..84eea9d 100644 --- a/src/services/eas/query.ts +++ b/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({ - 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, }); }; From fc50ebf5870fd2ce20d15274c8e0cc54fa56cb64 Mon Sep 17 00:00:00 2001 From: mehditorabiv Date: Fri, 30 Aug 2024 14:58:00 +0300 Subject: [PATCH 2/2] update test case --- src/components/layouts/AppbarApp.spec.tsx | 27 +++++++---------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/src/components/layouts/AppbarApp.spec.tsx b/src/components/layouts/AppbarApp.spec.tsx index 369c6e0..ced36b0 100644 --- a/src/components/layouts/AppbarApp.spec.tsx +++ b/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: () => ( -
- - - -
AccountPopover
-
+// Mocking the ConnectButton from RainbowKit +vi.mock('@rainbow-me/rainbowkit', () => ({ + ConnectButton: () => ( +
Mocked ConnectButton
), })); @@ -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(); - 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(); }); });