Merge pull request #386 from LIT-Protocol/feat/faster-app-connecting

feat(dashboard): faster app connections

Author: awisniew207

packages/apps/app-dashboard/src/components/user-dashboard/connect/ConnectPage.tsx

@@ -20,6 +20,7 @@ import { useJwtRedirect } from '@/hooks/user-dashboard/connect/useJwtRedirect';
 import { BigNumber } from 'ethers';
 import { addPayee } from '@/utils/user-dashboard/addPayee';
 import { usePendingAppConnectPkp } from '@/hooks/user-dashboard/connect/usePendingAppConnectPkp';
+import { wait } from '@/lib/utils';
 
 interface ConnectPageProps {
   connectInfoMap: ConnectInfoMap;
@@ -67,23 +68,20 @@ export function ConnectPage({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && !localSuccess) {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 
   // Generate JWT when agentPKP is set and permissions are granted
   useEffect(() => {
     if (agentPKP && localSuccess === 'Permissions granted successfully!') {
-      const timer = setTimeout(async () => {
-        setLocalSuccess(null);
-        await generateJWT(connectInfoMap.app, connectInfoMap.app.activeVersion!);
-      }, 1000);
-      return () => clearTimeout(timer);
+      setLocalSuccess(null);
+      generateJWT(connectInfoMap.app, connectInfoMap.app.activeVersion!);
     }
-    return undefined;
   }, [agentPKP, localSuccess, generateJWT, connectInfoMap.app]);
 
   const handleSubmit = useCallback(async () => {

packages/apps/app-dashboard/src/components/user-dashboard/connect/EditPermissionsCard.tsx

@@ -19,6 +19,7 @@ import { useJwtRedirect } from '@/hooks/user-dashboard/connect/useJwtRedirect';
 import { useFormatUserPermissions } from '@/hooks/user-dashboard/dashboard/useFormatUserPermissions';
 import { ReadAuthInfo } from '@/hooks/user-dashboard/useAuthInfo';
 import { litNodeClient } from '@/utils/user-dashboard/lit';
+import { wait } from '@/lib/utils';
 
 interface EditPermissionsCardProps {
   connectInfoMap: ConnectInfoMap;
@@ -57,10 +58,11 @@ export function EditPermissionsCard({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && !localSuccess) {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 

packages/apps/app-dashboard/src/components/user-dashboard/connect/RepermitConnect.tsx

@@ -14,6 +14,7 @@ import { ActionButtons } from './ui/ActionButtons';
 import { theme } from './ui/theme';
 import { InfoBanner } from './ui/InfoBanner';
 import { App } from '@/types/developer-dashboard/appTypes';
+import { wait } from '@/lib/utils';
 
 interface RepermitConnectProps {
   appData: App;
@@ -44,22 +45,21 @@ export function RepermitConnect({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && localSuccess !== 'Success! Redirecting to app...') {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 
   // Generate JWT when re-permitting is successful
   useEffect(() => {
     if (localSuccess === 'App re-permitted successfully!') {
-      const timer = setTimeout(async () => {
+      (async () => {
         await generateJWT(appData, appData.activeVersion!);
-      }, 1000);
-      return () => clearTimeout(timer);
+      })();
     }
-    return undefined;
   }, [localSuccess, generateJWT, appData]);
 
   const handleSubmit = useCallback(async () => {

packages/apps/app-dashboard/src/components/user-dashboard/connect/ReturningUserConnect.tsx

@@ -12,6 +12,7 @@ import { useCanGoBack } from '@/hooks/user-dashboard/connect/useCanGoBack';
 import { useJwtRedirect } from '@/hooks/user-dashboard/connect/useJwtRedirect';
 import { ReadAuthInfo } from '@/hooks/user-dashboard/useAuthInfo';
 import { App, AppVersion } from '@/types/developer-dashboard/appTypes';
+import { wait } from '@/lib/utils';
 
 type ReturningUserConnectProps = {
   appData: App;
@@ -46,10 +47,11 @@ export function ReturningUserConnect({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && !localSuccess) {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 

packages/apps/app-dashboard/src/components/user-dashboard/connect/UpdateVersionCard.tsx

@@ -20,6 +20,7 @@ import { useConnectFormData } from '@/hooks/user-dashboard/connect/useConnectFor
 import { useJwtRedirect } from '@/hooks/user-dashboard/connect/useJwtRedirect';
 import { ReadAuthInfo } from '@/hooks/user-dashboard/useAuthInfo';
 import { litNodeClient } from '@/utils/user-dashboard/lit';
+import { wait } from '@/lib/utils';
 
 interface UpdateVersionCardProps {
   connectInfoMap: ConnectInfoMap;
@@ -56,10 +57,11 @@ export function UpdateVersionCard({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && !localSuccess) {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 

packages/apps/app-dashboard/src/components/user-dashboard/dashboard/RepermitConnectPage.tsx

@@ -16,6 +16,7 @@ import { ConnectAppHeader } from '../connect/ui/ConnectAppHeader';
 import { PageHeader } from './ui/PageHeader';
 import { ActionButtons } from '../connect/ui/ActionButtons';
 import { Breadcrumb } from '@/components/shared/ui/Breadcrumb';
+import { wait } from '@/lib/utils';
 
 interface RepermitConnectPageProps {
   appData: App;
@@ -55,10 +56,11 @@ export function RepermitConnectPage({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && !localSuccess) {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 
@@ -94,17 +96,16 @@ export function RepermitConnectPage({
       setIsConnectProcessing(false);
       setLocalSuccess('App re-permitted successfully!');
 
-      // Generate JWT for redirect after short delay
-      setTimeout(async () => {
-        setLocalSuccess(null);
-        // Only generate JWT if there's an effectiveRedirectUri (for app redirects)
-        if (effectiveRedirectUri) {
-          await generateJWT(appData, appData.activeVersion!);
-        } else {
-          // Navigate to the app permissions page with full refresh to update sidebar
-          window.location.href = `/user/appId/${appData.appId}`;
-        }
-      }, 3000);
+      // Generate JWT for redirect or navigate after showing success message
+      await wait(2000);
+      setLocalSuccess(null);
+      // Only generate JWT if there's an effectiveRedirectUri (for app redirects)
+      if (effectiveRedirectUri) {
+        await generateJWT(appData, appData.activeVersion!);
+      } else {
+        // Navigate to the app permissions page with full refresh to update sidebar
+        window.location.href = `/user/appId/${appData.appId}`;
+      }
     } catch (error) {
       setLocalError(error instanceof Error ? error.message : 'Failed to re-permit app');
       setIsConnectProcessing(false);

packages/apps/app-dashboard/src/components/user-dashboard/dashboard/UpdateVersionPage.tsx

@@ -19,6 +19,7 @@ import { useJwtRedirect } from '@/hooks/user-dashboard/connect/useJwtRedirect';
 import { useUrlRedirectUri } from '@/hooks/user-dashboard/connect/useUrlRedirectUri';
 import { ActionButtons } from '@/components/user-dashboard/connect/ui/ActionButtons';
 import { Breadcrumb } from '@/components/shared/ui/Breadcrumb';
+import { wait } from '@/lib/utils';
 
 interface UpdateVersionPageProps {
   connectInfoMap: ConnectInfoMap;
@@ -53,10 +54,11 @@ export function UpdateVersionPage({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && !localSuccess) {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 
@@ -120,18 +122,17 @@ export function UpdateVersionPage({
         });
 
         setLocalStatus(null);
-        // Show success state for 3 seconds, then redirect or reload
+        // Show success state then redirect or reload
         setLocalSuccess('Version updated successfully!');
-        setTimeout(async () => {
-          setLocalSuccess(null);
-          // Only generate JWT if there's a redirectUri (for app redirects)
-          if (redirectUri) {
-            await generateJWT(connectInfoMap.app, connectInfoMap.app.activeVersion!);
-          } else {
-            // Navigate to the app permissions page with full refresh to update sidebar
-            window.location.href = `/user/appId/${connectInfoMap.app.appId}`;
-          }
-        }, 3000);
+        await wait(2000);
+        setLocalSuccess(null);
+        // Only generate JWT if there's a redirectUri (for app redirects)
+        if (redirectUri) {
+          await generateJWT(connectInfoMap.app, connectInfoMap.app.activeVersion!);
+        } else {
+          // Navigate to the app permissions page with full refresh to update sidebar
+          window.location.href = `/user/appId/${connectInfoMap.app.appId}`;
+        }
       } catch (error) {
         setLocalError(error instanceof Error ? error.message : 'Failed to update version');
         setLocalStatus(null);

packages/apps/app-dashboard/src/components/user-dashboard/dashboard/UserPermissionPage.tsx

@@ -19,6 +19,7 @@ import { ReadAuthInfo } from '@/hooks/user-dashboard/useAuthInfo';
 import { AppVersion } from '@/types/developer-dashboard/appTypes';
 import { hasConfigurablePolicies } from '@/utils/user-dashboard/hasConfigurablePolicies';
 import { litNodeClient } from '@/utils/user-dashboard/lit';
+import { wait } from '@/lib/utils';
 
 interface AppPermissionPageProps {
   connectInfoMap: ConnectInfoMap;
@@ -65,10 +66,11 @@ export function AppPermissionPage({
   // Handle redirect when JWT is ready
   useEffect(() => {
     if (redirectUrl && !localSuccess) {
-      setLocalSuccess('Success! Redirecting to app...');
-      setTimeout(() => {
+      (async () => {
+        setLocalSuccess('Success! Redirecting to app...');
+        await wait(1000);
         executeRedirect();
-      }, 2000);
+      })();
     }
   }, [redirectUrl, localSuccess, executeRedirect]);
 
@@ -176,9 +178,8 @@ export function AppPermissionPage({
       if (!hasAnyChanges) {
         setLocalStatus(null);
         setLocalSuccess('Permissions are up to date.');
-        setTimeout(() => {
-          setLocalSuccess(null);
-        }, 3000);
+        await wait(2000);
+        setLocalSuccess(null);
         return;
       }
 
@@ -211,17 +212,16 @@ export function AppPermissionPage({
         console.log('[UserPermissionPage] setAbilityPolicyParameters result:', result);
 
         setLocalStatus(null);
-        // Show success state for 3 seconds, then handle redirect or clear success
+        // Show success state then handle redirect or clear success
         setLocalSuccess('Permissions granted successfully!');
 
         // Generate JWT for redirect (useJwtRedirect will handle if there's a redirectUri)
-        setTimeout(async () => {
-          setLocalSuccess(null);
-          // Only generate JWT if there's a redirectUri (for app redirects)
-          if (redirectUri) {
-            await generateJWT(connectInfoMap.app, Number(permittedVersion));
-          }
-        }, 3000);
+        await wait(2000);
+        setLocalSuccess(null);
+        // Only generate JWT if there's a redirectUri (for app redirects)
+        if (redirectUri) {
+          await generateJWT(connectInfoMap.app, Number(permittedVersion));
+        }
       } catch (error) {
         setLocalError(error instanceof Error ? error.message : 'Failed to permit app');
         setLocalStatus(null);
@@ -279,10 +279,9 @@ export function AppPermissionPage({
       setLocalStatus(null);
       // Show success state until redirect
       setLocalSuccess('App unpermitted successfully!');
-      setTimeout(() => {
-        // Force the refresh for the sidebar to update
-        window.location.href = `/user/apps`;
-      }, 3000);
+      // Force the refresh for the sidebar to update after showing success message
+      await wait(2000);
+      window.location.href = `/user/apps`;
     } catch (error) {
       setLocalError(error instanceof Error ? error.message : 'Failed to unpermit app');
       setLocalStatus(null);

packages/apps/app-dashboard/src/lib/utils.ts

@@ -4,3 +4,11 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Utility function to wait for a specified amount of time
+ * @param time Time to wait in milliseconds (default: 3000ms)
+ */
+export async function wait(time = 3_000): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, time));
+}