fix: (wip) tracking state of reverification

app/components/InitiateReverifyStampsButton.tsx

@@ -21,28 +21,20 @@ export const getProviderIdsFromPlatformId = (platformId: PLATFORM_ID): PROVIDER_
 export type ExpiredStampModalProps = {
   isOpen: boolean;
   onClose: () => void;
-  setCurrentStepInProgress: (arg0: boolean) => void;
-  currentStepInProgress: boolean;
-  isReverifyingStamps: boolean;
-  setIsReverifyingStamps: (arg0: boolean) => void;
 };
 
 type WaitCondition = {
   doContinue: () => void;
 };
 
-export const ReverifyStampsModal = ({
-  isOpen,
-  onClose,
-  setCurrentStepInProgress,
-  currentStepInProgress,
-  isReverifyingStamps,
-  setIsReverifyingStamps,
-}: ExpiredStampModalProps) => {
+export const ReverifyStampsModal = ({ isOpen, onClose }: ExpiredStampModalProps) => {
   const { expiredProviders } = useContext(CeramicContext);
-  const { claimCredentials } = useContext(StampClaimingContext);
+  const { claimCredentials, status } = useContext(StampClaimingContext);
   const [waitForNext, setWaitForNext] = useState<WaitCondition>();
-  const [initialStepCompleted, setInitialStepCompleted] = useState(false);
+  // const [initialStepCompleted, setInitialStepCompleted] = useState(false);
+  const [currentStepInProgress, setCurrentStepInProgress] = useState(true);
+  const [isReverifyingStamps, setIsReverifyingStamps] = useState(false);
+
   const toast = useToast();
 
   const successToast = () => {
@@ -65,15 +57,22 @@ export const ReverifyStampsModal = ({
     return possibleProviders.filter((provider) => expiredProviders.includes(provider)).length > 0;
   });
 
-  const handleClaimStep = async (step: number, status: string): Promise<void> => {
-    // if (initialStepCompleted) {
-    //   setInitialStepCompleted(false);
-    // }
-    setCurrentStepInProgress(false);
-
+  const handleClaimStep = async (
+    step: number,
+    status: string,
+    platformId?: PLATFORM_ID | "EVMBulkVerify"
+  ): Promise<void> => {
+    console.log("geri - status,step", status, step, platformId);
     if (status === "in_progress") {
       setCurrentStepInProgress(true);
     } else {
+      if (step == 0) {
+        // We do not wait on the first step, the user has to click next only
+        // before getting to the next one
+        return;
+      }
+
+      setCurrentStepInProgress(false);
       return new Promise<void>((resolve) => {
         setWaitForNext({ doContinue: resolve });
       });
@@ -154,18 +153,18 @@ export const ReverifyStampsModal = ({
             <Button onClick={onClose} variant="secondary">
               Cancel
             </Button>
-            {isReverifyingStamps && initialStepCompleted ? (
+            {!isReverifyingStamps && status !== "in_progress" ? (
+              <LoadButton data-testid="reverify-initial-button" onClick={reverifyStamps}>
+                Reverify Stamps
+              </LoadButton>
+            ) : (
               <LoadButton
                 data-testid="reverify-next-button"
                 onClick={handleNextClick}
-                isLoading={currentStepInProgress}
+                isLoading={status === "in_progress"}
               >
                 Next
               </LoadButton>
-            ) : (
-              <LoadButton data-testid="reverify-initial-button" onClick={reverifyStamps}>
-                Reverify Stamps
-              </LoadButton>
             )}
           </div>
         </div>
@@ -176,35 +175,21 @@ export const ReverifyStampsModal = ({
 
 export const InitiateReverifyStampsButton = ({ className }: { className?: string }) => {
   const [showExpiredStampsModal, setShowExpiredStampsModal] = useState<boolean>(false);
-  const [currentStepInProgress, setCurrentStepInProgress] = useState(true);
-  const [isReverifyingStamps, setIsReverifyingStamps] = useState(false);
 
   const handleClose = () => {
     setShowExpiredStampsModal(false);
-    setCurrentStepInProgress(false);
-    setIsReverifyingStamps(false);
   };
 
   const handleOpen = () => {
     setShowExpiredStampsModal(true);
-    if (currentStepInProgress) setIsReverifyingStamps(false);
   };
 
   return (
     <>
       <Button data-testid="reverify-button" className={`${className}`} onClick={handleOpen}>
         Reverify stamps
       </Button>
-      {showExpiredStampsModal && (
-        <ReverifyStampsModal
-          isOpen={true}
-          onClose={handleClose}
-          setCurrentStepInProgress={setCurrentStepInProgress}
-          currentStepInProgress={currentStepInProgress}
-          setIsReverifyingStamps={setIsReverifyingStamps}
-          isReverifyingStamps={isReverifyingStamps}
-        />
-      )}
+      {showExpiredStampsModal && <ReverifyStampsModal isOpen={true} onClose={handleClose} />}
     </>
   );
 };

app/context/stampClaimingContext.tsx

@@ -1,5 +1,5 @@
 // --- Methods
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useState } from "react";
 
 // --- Datadog
 import { datadogLogs } from "@datadog/browser-logs";
@@ -66,13 +66,15 @@ export interface StampClaimingContextState {
     handleClaimStep: (step: number, status: string) => Promise<void>,
     platformGroups: StampClaimForPlatform[]
   ) => Promise<void>;
+  status: string;
 }
 
 const startingState: StampClaimingContextState = {
   claimCredentials: async (
     handleClaimStep: (step: number, status: string) => Promise<void>,
     platformGroups: StampClaimForPlatform[]
   ) => {},
+  status: "idle",
 };
 
 export const StampClaimingContext = createContext(startingState);
@@ -82,6 +84,7 @@ export const StampClaimingContextProvider = ({ children }: { children: any }) =>
   const address = useWalletStore((state) => state.address);
   const signer = useSigner();
   const toast = useToast();
+  const [status, setStatus] = useState("idle");
 
   const handleSponsorship = async (platform: PlatformClass, result: string): Promise<void> => {
     if (result === "success") {
@@ -129,19 +132,27 @@ export const StampClaimingContextProvider = ({ children }: { children: any }) =>
 
   // fetch VCs from IAM server
   const claimCredentials = async (
-    handleClaimStep: (step: number, status: string) => Promise<void>,
+    handleClaimStep: (step: number, status: string, platformId?: PLATFORM_ID | "EVMBulkVerify") => Promise<void>,
     platformGroups: StampClaimForPlatform[]
   ): Promise<any> => {
+    // In `step` we count the number of steps / platforms we are processing.
+    // This will differnet form i because we may skip some platforms that have no expired
+    // providers
+    let step = -1;
     for (let i = 0; i < platformGroups.length; i++) {
+      setStatus("idle");
       try {
         const { platformId, selectedProviders } = platformGroups[i];
-        if (platformId !== "EVMBulkVerify" && i > 0) await handleClaimStep(i, "wait_confirmation");
-        datadogLogs.logger.info("Saving Stamp", { platform: platformId });
         const platform = platforms.get(platformId as PLATFORM_ID)?.platform;
 
-        await handleClaimStep(i, "in_progress");
-
         if ((platform || platformId === "EVMBulkVerify") && selectedProviders.length > 0) {
+          step++;
+          await handleClaimStep(step, "wait_confirmation", platformId);
+          datadogLogs.logger.info("Saving Stamp", { platform: platformId });
+          await handleClaimStep(step, "in_progress", platformId);
+          console.log("geri selectedProviders", selectedProviders);
+          setStatus("in_progress");
+
           // We set the providerPayload to be {} by default
           // This is ok if platformId === "EVMBulkVerify"
           // For other platforms the correct providerPayload will be set below
@@ -202,11 +213,13 @@ export const StampClaimingContextProvider = ({ children }: { children: any }) =>
         datadogLogs.logger.error("Verification Error", { error: e, platform: platformGroups[i] });
       }
     }
+    setStatus("idle");
     await handleClaimStep(-1, "all_done");
   };
 
   const providerProps = {
     claimCredentials,
+    status,
   };
 
   return <StampClaimingContext.Provider value={providerProps}>{children}</StampClaimingContext.Provider>;