feat: add min time for each progress

Author: riyanshu-patro

packages/ui-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushchain/ui-kit",
-  "version": "4.0.9",
+  "version": "4.0.10-alpha.5",
   "homepage": "https://push.org",
   "keywords": [
     "pushchain",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@coral-xyz/anchor": "^0.31.1",
     "@metamask/sdk": "^0.32.0",
-    "@pushchain/core": "^4.0.7",
+    "@pushchain/core": "^4.0.8",
     "@solana/web3.js": "^1.98.2",
     "@walletconnect/ethereum-provider": "^2.21.5",
     "buffer": "^6.0.3",

packages/ui-kit/src/lib/hooks/usePushChainClient.ts

@@ -1,9 +1,8 @@
 import { PushChain } from '@pushchain/core';
-import { PROGRESS_HOOK } from '@pushchain/core/src/lib/progress-hook/progress-hook.types';
+import { PROGRESS_HOOK, ProgressEvent } from '@pushchain/core/src/lib/progress-hook/progress-hook.types';
 import { usePushWalletContext } from './usePushWallet';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { createGuardedPushChain } from '../helpers/txnAuthGuard';
-import { useRef } from 'react';
 
 export const usePushChainClient = (uid?: string) => {
   const {
@@ -18,12 +17,51 @@ export const usePushChainClient = (uid?: string) => {
     isReadOnly,
     setIsReadOnly
   } = usePushWalletContext(uid);
+
   const [pushChain, setPushChain] = useState<PushChain | null>(null);
   const [error, setError] = useState<Error | null>(null);
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const MIN_VISIBLE_MS = 2000;
+  const SUCCESS_HIDE_MS = 10000;
+
+  const queueRef = useRef<ProgressEvent[]>([]);
+  const lockRef = useRef(false);
+
+  const minTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearProgressTimers = () => {
+    if (minTimerRef.current) {
+      clearTimeout(minTimerRef.current);
+      minTimerRef.current = null;
+    }
+    if (successTimerRef.current) {
+      clearTimeout(successTimerRef.current);
+      successTimerRef.current = null;
+    }
+  };
+
+  const showProgress = (p: ProgressEvent) => {
+    clearProgressTimers();
+
+    setProgress(p);
+
+    lockRef.current = true;
+    minTimerRef.current = setTimeout(() => {
+      lockRef.current = false;
+      minTimerRef.current = null;
+
+      if (queueRef.current.length > 0) {
+        const next = queueRef.current.shift();
+        if (next) showProgress(next);
+      }
+    }, MIN_VISIBLE_MS);
+
+    if (p.id === PROGRESS_HOOK.SEND_TX_99_01) {
+      successTimerRef.current = setTimeout(() => setProgress(null), SUCCESS_HIDE_MS);
+    }
+  };
 
-  // initialise Push Chain instance here and export that
   useEffect(() => {
     const initializePushChain = async () => {
       if (!universalAccount) {
@@ -40,41 +78,35 @@ export const usePushChainClient = (uid?: string) => {
       ].includes(universalAccount.chain);
 
       try {
-        const signerSkeleton = PushChain.utils.signer.construct(
-          universalAccount,
-          {
-            signMessage: handleSignMessage,
-            signAndSendTransaction: handleSignAndSendTransaction,
-            signTypedData: isSolana ? undefined : handleSignTypedData,
-          }
-        );
-
-        const universalSigner = await PushChain.utils.signer.toUniversal(
-          signerSkeleton
-        );
+        const signerSkeleton = PushChain.utils.signer.construct(universalAccount, {
+          signMessage: handleSignMessage,
+          signAndSendTransaction: handleSignAndSendTransaction,
+          signTypedData: isSolana ? undefined : handleSignTypedData,
+        });
+
+        const universalSigner = await PushChain.utils.signer.toUniversal(signerSkeleton);
 
         const intializeProps = {
           network: config.network,
-          progressHook: async (progress: any) => {
-            if (timeoutRef.current) {
-              clearTimeout(timeoutRef.current);
-              timeoutRef.current = null;
-            }
-            setProgress(progress);
 
-            if ( progress.id === PROGRESS_HOOK.SEND_TX_99_01 ) {
-              timeoutRef.current = setTimeout(() => setProgress(null), 10000);
+          progressHook: async (incoming: ProgressEvent) => {
+            if (!lockRef.current) {
+              showProgress(incoming);
+            } else {
+              queueRef.current.push(incoming);
             }
           },
+
           rpcUrls: config.chainConfig?.rpcUrls,
           blockExplorers: config.chainConfig?.blockExplorers,
           printTraces: config.chainConfig?.printTraces,
-        }
+        };
 
         if (isReadOnly) {
           const pushChainClient = await PushChain.initialize(universalAccount, {
             network: config.network,
           });
+
           setPushChain(
             createGuardedPushChain(
               pushChainClient,
@@ -91,21 +123,23 @@ export const usePushChainClient = (uid?: string) => {
           const pushChainClient = await PushChain.initialize(universalSigner, intializeProps);
           setPushChain(pushChainClient);
         }
-        setError(null);
 
+        setError(null);
       } catch (err) {
         console.log('Error occured when initialising Push chain', err);
-        setError(
-          err instanceof Error
-            ? err
-            : new Error('Failed to initialize PushChain')
-        );
+        setError(err instanceof Error ? err : new Error('Failed to initialize PushChain'));
         setPushChain(null);
       }
     };
 
     initializePushChain();
-  }, [universalAccount, config]);
+
+    return () => {
+      clearProgressTimers();
+      queueRef.current = [];
+      lockRef.current = false;
+    };
+  }, [universalAccount, config, isReadOnly]);
 
   return {
     pushChainClient: pushChain,

packages/ui-kit/yarn.lock

@@ -794,9 +794,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pushchain/core@npm:^4.0.7":
-  version: 4.0.7
-  resolution: "@pushchain/core@npm:4.0.7"
+"@pushchain/core@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "@pushchain/core@npm:4.0.8"
   dependencies:
     "@bufbuild/protobuf": "npm:^2.0.0"
     "@coral-xyz/anchor": "npm:^0.31.0"
@@ -813,7 +813,7 @@ __metadata:
     tslib: "npm:^2.3.0"
     tweetnacl: "npm:^1.0.3"
     viem: "npm:2.27.2"
-  checksum: 10/f90c2a4ae24d87bad0641057bff5fdc39e18eb783f53d6bf99c6298dcc63fef98a8ec5518224e84a6c91b6a5ba822bbee8d97617af47fb1aa290319eb7369142
+  checksum: 10/ed1a7982575e78dc69fb6100d24a96459ecac187d21b4d09b950f19e55cb6d0356663b58a32515b93bb6b69b0c67eeb6a2506df2462208ef165fe29af08b9f03
   languageName: node
   linkType: hard
 
@@ -823,7 +823,7 @@ __metadata:
   dependencies:
     "@coral-xyz/anchor": "npm:^0.31.1"
     "@metamask/sdk": "npm:^0.32.0"
-    "@pushchain/core": "npm:^4.0.7"
+    "@pushchain/core": "npm:^4.0.8"
     "@solana/web3.js": "npm:^1.98.2"
     "@types/react": "npm:^18.3.13"
     "@types/react-is": "npm:^19"