fix typos and improve error handling

Author: nikitayutanov

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

@@ -19,9 +19,13 @@ const useWatchProgramStateChange = (programId: HexString) => {
   const cleanupRef = useRef(() => {});
 
   const watch = async ({ name, isChanged }: Params) => {
-    if (!api) throw new Error('API is not intialized');
+    if (!api) throw new Error('API is not initialized');
     if (!mirrorContract) throw new Error('Mirror contract is not found');
 
+    // mutation not intended to be used simultaneously or by multiple watchers per one hook,
+    // clean up just in case
+    cleanupRef.current();
+
     const currentStateHash = await mirrorContract.stateHash();
     const currentState = await api.query.program.readState(currentStateHash);
 

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

@@ -28,7 +28,7 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
   };
 
   const topUpFn = async (value: bigint) => {
-    if (!api) throw new Error('API is not intialized');
+    if (!api) throw new Error('API is not initialized');
     if (!mirrorContract) throw new Error('Mirror contract is not found');
 
     const tx = await mirrorContract.executableBalanceTopUp(value);
@@ -39,29 +39,31 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
   const approve = useMutation({ mutationFn: approveFn });
   const topUp = useMutation({ mutationFn: topUpFn });
 
-  const handleTopUpClick = async () => {
-    const value = parseUnits('1', 12);
-
-    const approveReceipt = await approve.mutateAsync(value);
-
-    await addMyActivity({
-      type: TransactionTypes.approve,
-      value: value.toString(),
-      owner: approveReceipt.from,
-      spender: programId,
-      ...unpackReceipt(approveReceipt),
-    });
-
-    const topUpReceipt = await topUp.mutateAsync(value);
-
-    await addMyActivity({
-      type: TransactionTypes.executableBalanceTopUp,
-      value: String(value),
-      programId,
-      ...unpackReceipt(topUpReceipt),
-    });
-
-    onSuccess(value);
+  const handleClick = () => {
+    const value = parseUnits('10', 12);
+
+    approve
+      .mutateAsync(value)
+      .then((receipt) =>
+        addMyActivity({
+          type: TransactionTypes.approve,
+          value: value.toString(),
+          owner: receipt.from,
+          spender: programId,
+          ...unpackReceipt(receipt),
+        }),
+      )
+      .then(() => topUp.mutateAsync(value))
+      .then((receipt) =>
+        addMyActivity({
+          type: TransactionTypes.executableBalanceTopUp,
+          value: String(value),
+          programId,
+          ...unpackReceipt(receipt),
+        }),
+      )
+      .then(() => onSuccess(value))
+      .catch((error) => console.error(error));
   };
 
   const isLoading = !api || !ethClient || !mirrorContract || approve.isPending || topUp.isPending;
@@ -74,7 +76,7 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
   };
 
   return (
-    <Button size="xs" onClick={handleTopUpClick} loadingPosition="start" isLoading={isLoading} variant="secondary">
+    <Button size="xs" onClick={handleClick} loadingPosition="start" isLoading={isLoading} variant="secondary">
       {getButtonText()}
     </Button>
   );

idea/vara-eth/frontend/src/pages/program/program.module.scss

@@ -23,6 +23,7 @@
   gap: 8px;
 }
 
+// TODO: spinner component?
 @keyframes spin {
   to {
     transform: rotate(360deg);

idea/vara-eth/frontend/src/pages/program/program.tsx

@@ -58,7 +58,8 @@ const Program = () => {
     watchBalance
       .mutateAsync({
         name: 'executable program balance',
-        isChanged: (current, incoming) => BigInt(incoming.executableBalance - current.executableBalance) === value,
+        isChanged: (current, incoming) =>
+          BigInt(incoming.executableBalance) - BigInt(current.executableBalance) === value,
       })
       .then(() => refetch())
       .catch((error) => console.error(error));