add watch program state change timeout

Author: nikitayutanov

idea/vara-eth/frontend/src/features/programs/lib/hooks/use-watch-program-state-change.ts

@@ -4,36 +4,55 @@ import { HexString, ProgramState } from '@vara-eth/api';
 import { useMirrorContract } from '@/app/api';
 import { useVaraEthApi } from '@/app/providers';
 
+const UNWATCH_TIMEOUT_MS = 60000;
+
+type Params = {
+  name: string;
+  isChanged: (currentState: ProgramState, incomingState: ProgramState) => boolean;
+};
+
 const useWatchProgramStateChange = (programId: HexString) => {
   const { api } = useVaraEthApi();
   const { data: mirrorContract } = useMirrorContract(programId);
 
-  const watchFn = async (isChanged: (currentState: ProgramState, incomingState: ProgramState) => boolean) => {
+  const watch = async ({ name, isChanged }: Params) => {
     if (!api) throw new Error('API is not intialized');
     if (!mirrorContract) throw new Error('Mirror contract is not found');
 
     const currentStateHash = await mirrorContract.stateHash();
     const currentState = await api.query.program.readState(currentStateHash);
 
     return new Promise<void>((resolve, reject) => {
-      const unwatch = mirrorContract.watchStateChangedEvent((stateHash) => {
+      let unwatch = () => {};
+
+      const timeoutId = setTimeout(() => {
+        unwatch();
+        reject(new Error(`No ${name} changes detected`));
+      }, UNWATCH_TIMEOUT_MS);
+
+      const cleanup = () => {
+        clearTimeout(timeoutId);
+        unwatch();
+      };
+
+      unwatch = mirrorContract.watchStateChangedEvent((stateHash) => {
         api.query.program
           .readState(stateHash)
           .then((state) => {
             if (isChanged(currentState, state)) {
-              unwatch();
+              cleanup();
               resolve();
             }
           })
           .catch((error) => {
-            unwatch();
+            cleanup();
             reject(error instanceof Error ? error : new Error(String(error)));
           });
       });
     });
   };
 
-  return useMutation({ mutationFn: watchFn });
+  return useMutation({ mutationFn: watch });
 };
 
 export { useWatchProgramStateChange };

idea/vara-eth/frontend/src/features/programs/ui/top-up-exec-balance/top-up-exec-balance.tsx

@@ -29,9 +29,7 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
 
     const tx = await ethClient.wvara.approve(programId, value);
 
-    await tx.send();
-
-    return tx.getReceipt();
+    return tx.sendAndWaitForReceipt();
   };
 
   const topUpFn = async (value: bigint) => {
@@ -40,9 +38,7 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
 
     const tx = await mirrorContract.executableBalanceTopUp(value);
 
-    await tx.send();
-
-    return tx.getReceipt();
+    return tx.sendAndWaitForReceipt();
   };
 
   const approve = useMutation({ mutationFn: approveFn });
@@ -54,7 +50,7 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
 
     const approveReceipt = await approve.mutateAsync(value);
 
-    addMyActivity({
+    await addMyActivity({
       type: TransactionTypes.approve,
       value: value.toString(),
       owner: approveReceipt.from,
@@ -64,16 +60,17 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
 
     const topUpReceipt = await topUp.mutateAsync(value);
 
-    addMyActivity({
+    await addMyActivity({
       type: TransactionTypes.executableBalanceTopUp,
       value: String(value),
       programId,
       ...unpackReceipt(topUpReceipt),
     });
 
-    await watch.mutateAsync(
-      (state, incomingState) => BigInt(incomingState.executableBalance - state.executableBalance) === value,
-    );
+    await watch.mutateAsync({
+      name: 'executable program balance',
+      isChanged: (current, incoming) => BigInt(incoming.executableBalance - current.executableBalance) === value,
+    });
 
     onSuccess();
   };