refactor

Author: nikitayutanov

idea/vara-eth/frontend/src/components/ui/button/button.tsx

@@ -31,7 +31,7 @@ const Button = ({
     styles.button,
     styles[`btn--variant-${variant}`],
     styles[`size-${size}`],
-    styles[`loadingPosition${loadingPosition}`],
+    isLoading && styles[`loadingPosition${loadingPosition}`],
     className,
   );
 

idea/vara-eth/frontend/src/features/programs/index.ts

@@ -1,2 +1,8 @@
 export { CreateProgramButton, TopUpExecBalance } from './ui';
-export { useSendProgramMessage, useGetAllProgramsQuery } from './lib';
+export {
+  useSendProgramMessage,
+  useGetProgramByIdQuery,
+  useGetAllProgramsQuery,
+  useReadContractState,
+  useWatchProgramStateChange,
+} from './lib';

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

@@ -1,10 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
 import { HexString, ProgramState } from '@vara-eth/api';
+import { useRef, useEffect } from 'react';
 
 import { useMirrorContract } from '@/app/api';
 import { useVaraEthApi } from '@/app/providers';
 
-const UNWATCH_TIMEOUT_MS = 60000;
+const UNWATCH_TIMEOUT_MS = 180_000;
 
 type Params = {
   name: string;
@@ -15,6 +16,8 @@ const useWatchProgramStateChange = (programId: HexString) => {
   const { api } = useVaraEthApi();
   const { data: mirrorContract } = useMirrorContract(programId);
 
+  const cleanupRef = useRef(() => {});
+
   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');
@@ -33,9 +36,12 @@ const useWatchProgramStateChange = (programId: HexString) => {
       const cleanup = () => {
         clearTimeout(timeoutId);
         unwatch();
+        cleanupRef.current = () => {};
       };
 
-      unwatch = mirrorContract.watchStateChangedEvent((stateHash) => {
+      cleanupRef.current = cleanup;
+
+      const handleChange = (stateHash: HexString) => {
         api.query.program
           .readState(stateHash)
           .then((state) => {
@@ -48,10 +54,14 @@ const useWatchProgramStateChange = (programId: HexString) => {
             cleanup();
             reject(error instanceof Error ? error : new Error(String(error)));
           });
-      });
+      };
+
+      unwatch = mirrorContract.watchStateChangedEvent((stateHash) => handleChange(stateHash));
     });
   };
 
+  useEffect(() => () => cleanupRef.current(), []);
+
   return useMutation({ mutationFn: watch });
 };
 

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

@@ -7,11 +7,9 @@ import { useVaraEthApi } from '@/app/providers';
 import { useAddMyActivity, TransactionTypes, unpackReceipt } from '@/app/store';
 import { Button } from '@/components';
 
-import { useWatchProgramStateChange } from '../../lib';
-
 type Props = {
   programId: HexString;
-  onSuccess: () => void;
+  onSuccess: (value: bigint) => void;
 };
 
 const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
@@ -40,7 +38,6 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
 
   const approve = useMutation({ mutationFn: approveFn });
   const topUp = useMutation({ mutationFn: topUpFn });
-  const watch = useWatchProgramStateChange(programId);
 
   const handleTopUpClick = async () => {
     const value = parseUnits('1', 12);
@@ -64,26 +61,20 @@ const TopUpExecBalance = ({ programId, onSuccess }: Props) => {
       ...unpackReceipt(topUpReceipt),
     });
 
-    await watch.mutateAsync({
-      name: 'executable program balance',
-      isChanged: (current, incoming) => BigInt(incoming.executableBalance - current.executableBalance) === value,
-    });
-
-    onSuccess();
+    onSuccess(value);
   };
 
-  const isLoading = approve.isPending || topUp.isPending || watch.isPending;
+  const isLoading = !api || !ethClient || !mirrorContract || approve.isPending || topUp.isPending;
 
   const getButtonText = () => {
     if (approve.isPending) return 'Approving';
     if (topUp.isPending) return 'Topping Up';
-    if (watch.isPending) return 'Processing';
 
     return 'Top Up';
   };
 
   return (
-    <Button size="xs" onClick={handleTopUpClick} loadingPosition="start" disabled={isLoading} variant="secondary">
+    <Button size="xs" onClick={handleTopUpClick} loadingPosition="start" isLoading={isLoading} variant="secondary">
       {getButtonText()}
     </Button>
   );

idea/vara-eth/frontend/src/features/sails/components/sails-action/sails-action.tsx

@@ -15,7 +15,7 @@ type Props = SailsActionType & {
   sails: Sails;
 };
 
-const SailsAction = ({ id, name, action, sails, args, encode, onSubmit }: Props) => {
+const SailsAction = ({ id, name, action, sails, args, isEnabled = true, encode, onSubmit }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -43,6 +43,7 @@ const SailsAction = ({ id, name, action, sails, args, encode, onSubmit }: Props)
     variant: 'default' as const,
     size: 'xs' as const,
     isLoading: isSubmitting,
+    disabled: !isEnabled,
     form: id,
     children: action,
   };

idea/vara-eth/frontend/src/features/sails/components/sails-program-actions/sails-program-actions.tsx

@@ -14,10 +14,10 @@ const tabs = ['Call offchain', 'Call onchain'];
 type Props = {
   programId: HexString;
   idl: string;
-  isInitialized: boolean | undefined;
+  init: { isRequired: boolean; isEnabled: boolean; onSuccess: () => void };
 };
 
-const SailsProgramActions = ({ programId, idl, isInitialized }: Props) => {
+const SailsProgramActions = ({ programId, idl, init }: Props) => {
   const { data: sails } = useSails(idl);
   const [tabIndex, setTabIndex] = useState(0);
 
@@ -57,17 +57,18 @@ const SailsProgramActions = ({ programId, idl, isInitialized }: Props) => {
       id: `ctor:${ctorName}`,
       name: ctorName,
       action: 'Initialize',
+      isEnabled: init.isEnabled,
       args: meta.args,
       encode: meta.encodePayload,
-      onSubmit: (payload: HexString) => initProgram.mutateAsync({ ctorName, payload }),
+      onSubmit: (payload: HexString) => initProgram.mutateAsync({ ctorName, payload }).then(() => init.onSuccess()),
     }));
 
     return <SailsActionGroup name="Constructors" sails={sails} items={items} />;
   };
 
   return (
     <>
-      {isInitialized && (
+      {!init.isRequired && (
         <Tabs
           tabs={tabs}
           tabIndex={tabIndex}
@@ -76,7 +77,7 @@ const SailsProgramActions = ({ programId, idl, isInitialized }: Props) => {
         />
       )}
 
-      <div className={styles.list}>{isInitialized ? renderMessages() : renderCtors()}</div>
+      <div className={styles.list}>{init.isRequired ? renderCtors() : renderMessages()}</div>
     </>
   );
 };

idea/vara-eth/frontend/src/features/sails/lib.ts

@@ -29,6 +29,7 @@ type SailsAction = {
   name: string;
   action: string;
   args: ISailsFuncArg[];
+  isEnabled?: boolean;
   encode: (...params: unknown[]) => HexString;
   onSubmit: (payload: HexString) => Promise<unknown>;
 };

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

@@ -17,14 +17,41 @@
 
 .status {
   margin-left: auto;
-}
 
-.executableBalance {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.statusSpinner,
+.balanceSpinner {
+  animation: spin 1s linear infinite;
+}
+
+.statusSpinner {
+  width: 10px;
+  height: 10px;
+}
+
+.balanceSpinner {
+  width: 12px;
+  height: 12px;
+
+  margin-right: -10px;
+}
+
+.balance {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
 .emptyState {
   display: flex;
   flex-direction: column;

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

@@ -3,9 +3,14 @@ import { generatePath, useParams } from 'react-router-dom';
 import { formatEther, formatUnits } from 'viem';
 
 import { useWrappedVaraBalance } from '@/app/api';
+import LoadingSVG from '@/assets/icons/loading.svg?react';
 import { Badge, Balance, ChainEntity, HashLink, UploadIdlButton } from '@/components';
-import { TopUpExecBalance } from '@/features/programs';
-import { useReadContractState, useGetProgramByIdQuery } from '@/features/programs/lib';
+import {
+  TopUpExecBalance,
+  useReadContractState,
+  useGetProgramByIdQuery,
+  useWatchProgramStateChange,
+} from '@/features/programs';
 import { SailsProgramActions } from '@/features/sails';
 import { routes } from '@/shared/config';
 import { useIdlStorage } from '@/shared/hooks';
@@ -30,6 +35,35 @@ const Program = () => {
   const { decimals, isPending: isDecimalsPending } = useWrappedVaraBalance(programId);
   const { idl, saveIdl } = useIdlStorage(codeId);
 
+  const watchInit = useWatchProgramStateChange(programId);
+  const watchBalance = useWatchProgramStateChange(programId);
+
+  const getStatusText = () => {
+    if (watchInit.isPending) return 'Initializing...';
+
+    return isInitialized ? 'Active' : 'Uninitialized';
+  };
+
+  const handleSuccessfulInit = () => {
+    watchInit
+      .mutateAsync({
+        name: 'program init',
+        isChanged: (_, incoming) => 'Active' in incoming.program && incoming.program.Active.initialized,
+      })
+      .then(() => refetch())
+      .catch((error) => console.error(error));
+  };
+
+  const handleSuccessfulTopUp = (value: bigint) => {
+    watchBalance
+      .mutateAsync({
+        name: 'executable program balance',
+        isChanged: (current, incoming) => BigInt(incoming.executableBalance - current.executableBalance) === value,
+      })
+      .then(() => refetch())
+      .catch((error) => console.error(error));
+  };
+
   if (isLoading || isProgramStateLoading || isDecimalsPending) {
     return (
       <div className={styles.container}>
@@ -51,7 +85,8 @@ const Program = () => {
 
           {isActive && (
             <Badge color={isInitialized ? 'primary' : 'secondary'} className={styles.status}>
-              {isInitialized ? 'Active' : 'Uninitialized'}
+              {watchInit.isPending && <LoadingSVG className={styles.statusSpinner} />}
+              {getStatusText()}
             </Badge>
           )}
         </ChainEntity.Header>
@@ -68,9 +103,12 @@ const Program = () => {
 
           <ChainEntity.Key>Executable Balance</ChainEntity.Key>
 
-          <div className={styles.executableBalance}>
+          <div className={styles.balance}>
+            {watchBalance.isPending && <LoadingSVG className={styles.balanceSpinner} />}
+
             <Balance value={formatUnits(BigInt(programState.executableBalance), decimals)} units="WVARA" />
-            <TopUpExecBalance programId={programId} onSuccess={refetch} />
+
+            {!watchBalance.isPending && <TopUpExecBalance programId={programId} onSuccess={handleSuccessfulTopUp} />}
           </div>
 
           <ChainEntity.Key>Block Number</ChainEntity.Key>
@@ -80,7 +118,11 @@ const Program = () => {
 
       <div className={styles.card}>
         {idl ? (
-          <SailsProgramActions programId={programId} idl={idl} isInitialized={isInitialized} />
+          <SailsProgramActions
+            programId={programId}
+            idl={idl}
+            init={{ isRequired: !isInitialized, isEnabled: !watchInit.isPending, onSuccess: handleSuccessfulInit }}
+          />
         ) : (
           <div className={styles.emptyState}>
             <p>No IDL uploaded. Please upload an IDL file to initialize and interact with the program.</p>