diff --git a/packages/frontend/src/backend/getPassportScore.ts b/packages/frontend/src/backend/getPassportScore.ts index 870761da..8de953f1 100644 --- a/packages/frontend/src/backend/getPassportScore.ts +++ b/packages/frontend/src/backend/getPassportScore.ts @@ -2,6 +2,7 @@ import { isApiErrorResponse } from '@/types/api/error' import { GetPassportScorerNonceResponseSchema, GetResponseSchema, + GetScoreResponse, SubmitAddressForScoringRequest, SubmitAddressForScoringResponseSchema, } from '@/types/api/scorer' @@ -11,19 +12,21 @@ import { Hex } from 'viem' import { useAccount, useChainId, useSignMessage } from 'wagmi' import { handleBackendRequest } from './handleBackendRequest' -export const useRequestScore = () => { +export const useRequestScore = (onSuccess: (data: GetScoreResponse | undefined) => void) => { const { address } = useAccount() const chainId = useChainId() const { signMessageAsync } = useSignMessage() - const { mutateAsync, isSuccess, isError } = useMutation({ - mutationFn: async () => { + const { mutateAsync, isSuccess, isError, reset } = useMutation({ + mutationFn: async (isRecalculating: boolean) => { if (!address) { throw new Error('No address') } try { - return await getGitcoinScore(address, chainId) + if (!isRecalculating) { + return await getGitcoinScore(address, chainId) + } } catch (error) { if (!(error instanceof ErrorWithStatus) || error.status != 404) { throw error @@ -34,9 +37,13 @@ export const useRequestScore = () => { const signature = await signMessageAsync({ message: nonceData.message }) await sendForScoring({ userAddress: address as Hex, signature, nonce: nonceData.nonce }) }, + onSuccess, }) - const requestScore = useCallback(() => handleBackendRequest(mutateAsync()), [mutateAsync]) - return { requestScore, isSuccess, isError } + const requestScore = useCallback( + (isRecalculating: boolean = false) => handleBackendRequest(mutateAsync(isRecalculating)), + [mutateAsync], + ) + return { requestScore, isSuccess, isError, reset } } class ErrorWithStatus extends Error { diff --git a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx index 47b25753..5198e625 100644 --- a/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/CheckingGitcoinScore.tsx @@ -63,10 +63,10 @@ export const CheckGitcoinScore = ({ const step = gitcoinRequestSettled ? 2 : 1 useEffect(() => { - if (data && data.status == 'done') { + if (queryEnabled && data && data.status == 'done') { setGitcoinCredentials(data) } - }, [data, setGitcoinCredentials]) + }, [data, setGitcoinCredentials, queryEnabled]) return ( diff --git a/packages/frontend/src/components/userActious/gitcoin/GitcoinFlow.tsx b/packages/frontend/src/components/userActious/gitcoin/GitcoinFlow.tsx index c3053377..1cc65ea8 100644 --- a/packages/frontend/src/components/userActious/gitcoin/GitcoinFlow.tsx +++ b/packages/frontend/src/components/userActious/gitcoin/GitcoinFlow.tsx @@ -1,11 +1,12 @@ -import { useState } from 'react' +import { useCallback, useState } from 'react' import { CheckGitcoinPassport } from './CheckGitcoinPassport' import { CheckGitcoinScore } from './CheckingGitcoinScore' import { UserGitcoinScore } from '@/components/userActious/gitcoin/UserGitcoinScore' import { MissingGitcoinPassport } from './MissingGitcoinPassport' import { useRequestScore } from '@/backend/getPassportScore' import { GitcoinCredentials } from '@/types/passport/GticoinCredentials' -import { GetScoreResponseSuccess } from '@/types/api/scorer' +import { GetScoreResponse } from '@/types/api/scorer' +import { useQueryClient } from '@tanstack/react-query' enum GitcoinState { INITIAL_PAGE, @@ -18,45 +19,55 @@ const ScoreDecimals = 8 const ScoreMultiplier = 10 ** ScoreDecimals interface Props { - setGitcoinCredentials: (credentials: GitcoinCredentials) => void + setGitcoinCredentials: (credentials: GitcoinCredentials | undefined) => void gitcoinCredentials: GitcoinCredentials | undefined gitcoinSettled: () => void } export const GitcoinFlow = ({ gitcoinCredentials, setGitcoinCredentials, gitcoinSettled }: Props) => { const [gitcoinState, setGitcoinState] = useState(GitcoinState.INITIAL_PAGE) - const { requestScore, isSuccess, isError } = useRequestScore() - const setCredentials = (credentials: GetScoreResponseSuccess) => { - setGitcoinCredentials({ - score: BigInt(credentials?.score), - proof: credentials.signature, - }) - setGitcoinState(GitcoinState.YOUR_SCORE) - } + const setCredentials = useCallback( + (data: GetScoreResponse | undefined) => { + if (data?.status !== 'done') { + return + } + + setGitcoinCredentials({ + score: BigInt(data.score), + proof: data.signature, + }) + setGitcoinState(GitcoinState.YOUR_SCORE) + }, + [setGitcoinCredentials, setGitcoinState], + ) - const sendForScoring = async () => { - const data = await requestScore() - if (data?.status === 'done') { - setCredentials(data) - } + const { requestScore, isSuccess, isError, reset } = useRequestScore(setCredentials) + + const onInitialCheckScore = async () => { + setGitcoinState(GitcoinState.CHECKING_SCORE) + await requestScore(false) } + const queryClient = useQueryClient() - const onCheckScoreClick = () => { + const onRecalculate = async () => { + await queryClient.invalidateQueries({ queryKey: ['gitcoinScore'] }) + reset() + setGitcoinCredentials(undefined) setGitcoinState(GitcoinState.CHECKING_SCORE) - sendForScoring() + await requestScore(true) } switch (gitcoinState) { case GitcoinState.INITIAL_PAGE: - return + return case GitcoinState.CHECKING_SCORE: return ( requestScore(true)} /> ) case GitcoinState.YOUR_SCORE: @@ -64,13 +75,13 @@ export const GitcoinFlow = ({ gitcoinCredentials, setGitcoinCredentials, gitcoin ) case GitcoinState.MISSING_PASSPORT: return setGitcoinState(GitcoinState.INITIAL_PAGE)} /> default: - return + return } }