🐣 Send address for scoring when recalculating

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 {

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 (
     <Wrapper>

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,59 +19,69 @@ 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>(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 <CheckGitcoinPassport onCheckScoreClick={onCheckScoreClick} />
+      return <CheckGitcoinPassport onCheckScoreClick={onInitialCheckScore} />
     case GitcoinState.CHECKING_SCORE:
       return (
         <CheckGitcoinScore
           setGitcoinCredentials={setCredentials}
           gitcoinRequestSettled={isSuccess}
           gitcoinRequestError={isError}
-          onSignAgainClick={sendForScoring}
+          onSignAgainClick={() => requestScore(true)}
         />
       )
     case GitcoinState.YOUR_SCORE:
       return (
         <UserGitcoinScore
           userScore={Number(gitcoinCredentials?.score) / ScoreMultiplier}
           gitcoinSettled={gitcoinSettled}
-          getBackToScoring={onCheckScoreClick}
+          getBackToScoring={onRecalculate}
         />
       )
     case GitcoinState.MISSING_PASSPORT:
       return <MissingGitcoinPassport afterCreateClick={() => setGitcoinState(GitcoinState.INITIAL_PAGE)} />
 
     default:
-      return <CheckGitcoinPassport onCheckScoreClick={onCheckScoreClick} />
+      return <CheckGitcoinPassport onCheckScoreClick={onInitialCheckScore} />
   }
 }