fix: proper loading spinner in deposit creation

#62
golemfactory · Jun 4, 2024 · a394214 · a394214
1 parent f6cc870
commit a394214
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 52 deletions.
diff --git a/frontend/src/components/providers/userProvider.tsx b/frontend/src/components/providers/userProvider.tsx
@@ -229,54 +229,54 @@ export const UserProvider = ({ children }: PropsWithChildren<{}>) => {
     }
   }, [isUserLoading, userData, user.allowanceAmount, depositData]);
 
-  // const { isFetched: isAllowanceFetched, amount: allowanceAmount } =
-  //   useAllowance();
+  const { isFetched: isAllowanceFetched, amount: allowanceAmount } =
+    useAllowance();
 
-  // useEffect(() => {
-  //   if (user.currentDeposit) {
-  //     if (userData?.currentAllocation.id) {
-  //       dispatch({
-  //         kind: UserAction.HAS_ALLOCATION,
-  //         payload: {
-  //           currentAllocation: userData.currentAllocation,
-  //           currentActivity: userData.currentActivity,
-  //         },
-  //       });
-  //     } else {
-  //       dispatch({
-  //         kind: UserAction.HAS_NO_ALLOCATION,
-  //         payload: { currentAllocation: null },
-  //       });
-  //     }
-  //   }
-  // }, [
-  //   userData?.currentActivity,
-  //   userData?.currentAllocation,
-  //   user.currentDeposit,
-  // ]);
+  useEffect(() => {
+    if (user.currentDeposit) {
+      if (userData?.currentAllocation.id) {
+        dispatch({
+          kind: UserAction.HAS_ALLOCATION,
+          payload: {
+            currentAllocation: userData.currentAllocation,
+            currentActivity: userData.currentActivity,
+          },
+        });
+      } else {
+        dispatch({
+          kind: UserAction.HAS_NO_ALLOCATION,
+          payload: { currentAllocation: null },
+        });
+      }
+    }
+  }, [
+    userData?.currentActivity,
+    userData?.currentAllocation,
+    user.currentDeposit,
+  ]);
 
-  // useEffect(() => {
-  //   if (isConnected) {
-  //     dispatch({ kind: UserAction.CONNECT });
-  //     if (isRegistered) {
-  //       if (isAllowanceFetched && allowanceAmount !== undefined) {
-  //         if (allowanceAmount > config.minimalAllowance) {
-  //           dispatch({
-  //             kind: UserAction.ENOUGH_ALLOWANCE,
-  //             payload: { allowanceAmount },
-  //           });
-  //         } else {
-  //           dispatch({
-  //             kind: UserAction.NOT_ENOUGH_ALLOWANCE,
-  //             payload: { allowanceAmount },
-  //           });
-  //         }
-  //       }
-  //     }
-  //   } else {
-  //     dispatch({ kind: UserAction.DISCONNECT });
-  //   }
-  // }, [isAllowanceFetched, allowanceAmount, isRegistered]);
+  useEffect(() => {
+    if (isConnected) {
+      dispatch({ kind: UserAction.CONNECT });
+      if (isRegistered) {
+        if (isAllowanceFetched && allowanceAmount !== undefined) {
+          if (allowanceAmount > config.minimalAllowance) {
+            dispatch({
+              kind: UserAction.ENOUGH_ALLOWANCE,
+              payload: { allowanceAmount },
+            });
+          } else {
+            dispatch({
+              kind: UserAction.NOT_ENOUGH_ALLOWANCE,
+              payload: { allowanceAmount },
+            });
+          }
+        }
+      }
+    } else {
+      dispatch({ kind: UserAction.DISCONNECT });
+    }
+  }, [isAllowanceFetched, allowanceAmount, isRegistered]);
 
   return (
     <UserContext.Provider value={{ user: withUserInterface(user, login) }}>

diff --git a/frontend/src/hooks/depositContract/useDeposit.ts b/frontend/src/hooks/depositContract/useDeposit.ts
@@ -18,7 +18,13 @@ import { useEvents } from "hooks/events/useEvents";
 import { Event } from "types/events";
 
 export function useCreateDeposit() {
-  const { data, isIdle, writeContractAsync, error } = useWriteContract();
+  const {
+    data,
+    isIdle,
+    writeContractAsync,
+    error,
+    isPending: isWaitingForUserAcceptance,
+  } = useWriteContract();
 
   const chainId = useChainId();
   const [fee, setFee] = useState(0);
@@ -30,10 +36,14 @@ export function useCreateDeposit() {
   const { data: requestorData } = useRequestorWalletAddress();
   const { showNotification, errorContext } = useHandleRpcError();
 
-  const { isSuccess, isError, isLoading, isPending } =
-    useWaitForTransactionReceipt({
-      hash: data,
-    });
+  const {
+    isSuccess,
+    isError,
+    isLoading: isWaitingForReceipt,
+    isPending,
+  } = useWaitForTransactionReceipt({
+    hash: data,
+  });
 
   const { emit } = useEvents({
     eventKind: Event.DEPOSIT_CREATED,
@@ -100,7 +110,7 @@ export function useCreateDeposit() {
     isPending,
     isSuccess,
     isError,
-    isLoading,
+    isLoading: isWaitingForReceipt || isWaitingForUserAcceptance,
     isIdle,
     setValidToTimestamp,
     validToTimestamp,