feat: load routes pending and docs-faq (#83)

* add loading state for configs, and pending vpn instance

* add docs-faqs route

Signed-off-by: JaeBrian <[email protected]>

---------

Signed-off-by: JaeBrian <[email protected]>

Author: JaeBrian

src/api/hooks/index.ts

@@ -3,4 +3,5 @@ export { useSignup } from './useSignup'
 export { useClientList } from './useClientList'
 export { useClientAvailable } from './useClientAvailable'
 export { useClientProfile } from './useClientProfile'
-export { useMultipleClientAvailable } from './useMultipleClientAvailable'
+export { useMultipleClientAvailable } from './useMultipleClientAvailable'
+export { useClientPolling } from './useClientPolling'

src/api/hooks/useClientPolling.ts

@@ -0,0 +1,114 @@
+import { useState, useEffect, useRef } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { checkClientAvailable } from '../client'
+  
+interface PollingState {
+  isPolling: boolean
+  clientId: string | null
+  attempts: number
+  maxAttempts: number
+}
+
+export function useClientPolling() {
+  const [pollingState, setPollingState] = useState<PollingState>({
+    isPolling: false,
+    clientId: null,
+    attempts: 0,
+    maxAttempts: 20 // 20 minutes max (20 * 60 seconds)
+  })
+  
+  const queryClient = useQueryClient()
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  const startPolling = (clientId: string) => {
+    setPollingState({
+      isPolling: true,
+      clientId,
+      attempts: 0,
+      maxAttempts: 20
+    })
+  }
+
+  const stopPolling = () => {
+    setPollingState(prev => ({
+      ...prev,
+      isPolling: false,
+      clientId: null,
+      attempts: 0
+    }))
+    
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
+  }
+
+  useEffect(() => {
+    if (!pollingState.isPolling || !pollingState.clientId) {
+      return
+    }
+
+    const pollClient = async () => {
+      try {
+        const response = await checkClientAvailable({ id: pollingState.clientId! })
+        
+        // Check if client is available (assuming success means available)
+        if (response && !response.msg) {
+          // Client is available, stop polling and refresh client list
+          stopPolling()
+          
+          // Invalidate and refetch client list to get the new instance
+          await queryClient.invalidateQueries({ queryKey: ['clientList'] })
+          
+          return
+        }
+        
+        // Increment attempts
+        setPollingState(prev => ({
+          ...prev,
+          attempts: prev.attempts + 1
+        }))
+        
+        // Stop polling if max attempts reached
+        if (pollingState.attempts >= pollingState.maxAttempts) {
+          stopPolling()
+        }
+        
+      } catch (error) {
+        console.error('Error polling client availability:', error)
+        
+        // Increment attempts even on error
+        setPollingState(prev => ({
+          ...prev,
+          attempts: prev.attempts + 1
+        }))
+        
+        // Stop polling if max attempts reached
+        if (pollingState.attempts >= pollingState.maxAttempts) {
+          stopPolling()
+        }
+      }
+    }
+
+    // Poll immediately, then every 60 seconds
+    pollClient()
+    
+    intervalRef.current = setInterval(pollClient, 60000) // 60 seconds
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }, [pollingState.isPolling, pollingState.clientId, pollingState.attempts, pollingState.maxAttempts, queryClient])
+
+  return {
+    isPolling: pollingState.isPolling,
+    clientId: pollingState.clientId,
+    attempts: pollingState.attempts,
+    maxAttempts: pollingState.maxAttempts,
+    startPolling,
+    stopPolling
+  }
+}

src/components/HeroSection.tsx

@@ -52,6 +52,12 @@ const HeroSection = ({ onGetStarted }: HeroSectionProps) => {
           >
             How It Works
           </button>
+          <button
+            onClick={() => navigate('/docs-faqs')}
+            className="flex py-3 sm:py-4 px-6 sm:px-10 justify-center items-center gap-2.5 rounded-full border border-white/20 backdrop-blur-sm text-white font-medium text-sm sm:text-base hover:bg-white/10 transition-colors cursor-pointer"
+          >
+            FAQs
+          </button>
         </div>
       </div>
     </div>

src/components/VpnInstance.tsx

@@ -1,7 +1,7 @@
 interface VpnInstanceProps {
   region: string
   duration: string
-  status: "Active" | "Expired"
+  status: "Active" | "Expired" | "Pending"
   expires: string
   onDelete?: () => void
   onAction?: () => void
@@ -12,7 +12,9 @@ const VpnInstance = ({ region, duration, status, expires, onAction }: VpnInstanc
     <div className={`flex p-4 flex-col justify-center items-start gap-3 w-full rounded-md backdrop-blur-xs ${
         status === "Active"
           ? "bg-[linear-gradient(180deg,rgba(148,0,255,0.60)_0%,rgba(104,0,178,0.60)_100%)]"
-          : "bg-[rgba(255,255,255,0.20)]"
+          : status === "Pending"
+            ? "bg-[rgba(128,128,128,0.30)]"
+            : "bg-[rgba(255,255,255,0.20)]"
       }`}>
       <div className="flex flex-col items-start gap-1 w-full">
         <div className="flex justify-between items-start w-full gap-2">
@@ -22,20 +24,34 @@ const VpnInstance = ({ region, duration, status, expires, onAction }: VpnInstanc
         <div className="flex justify-between items-start w-full">
           <div className="flex items-center gap-2">
             <p className="text-sm md:text-base">Status: {status}</p>
-            <span className={`w-2 h-2 rounded-full ${status === "Active" ? "bg-[#86EA64]" : "bg-red-500"}`}></span>
+            <span className={`w-2 h-2 rounded-full ${
+              status === "Active" 
+                ? "bg-[#86EA64]" 
+                : status === "Pending"
+                  ? "bg-yellow-500 animate-pulse"
+                  : "bg-red-500"
+            }`}></span>
           </div>
           <p className="text-sm md:text-base">Expires: {expires}</p>
         </div>
       </div>
       <div className="flex justify-end items-center w-full">
-        <button
-          className="flex items-center justify-center gap-3 rounded-md py-1.5 px-3.5 backdrop-blur-xs box-shadow-sm cursor-pointer bg-white text-black"
-          onClick={onAction}
-        >
-          <p className="font-light text-black text-sm">
-            {status === "Active" ? "Get Config" : "Renew Access"}
-          </p>
-        </button>
+        {status !== "Pending" && (
+          <button
+            className="flex items-center justify-center gap-3 rounded-md py-1.5 px-3.5 backdrop-blur-xs box-shadow-sm cursor-pointer bg-white text-black"
+            onClick={onAction}
+          >
+            <p className="font-light text-black text-sm">
+              {status === "Active" ? "Get Config" : "Renew Access"}
+            </p>
+          </button>
+        )}
+        {status === "Pending" && (
+          <div className="flex items-center justify-center gap-2 rounded-md py-1.5 px-3.5 backdrop-blur-xs bg-gray-400 text-gray-600">
+            <div className="w-4 h-4 border-2 border-gray-600 border-t-transparent rounded-full animate-spin"></div>
+            <p className="font-light text-sm">Setting up...</p>
+          </div>
+        )}
       </div>
     </div>
   )

src/pages/Account.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from "react"
 import { useWalletStore } from "../stores/walletStore"
-import { useRefData, useSignup, useClientList, useClientProfile } from "../api/hooks"
+import { useRefData, useSignup, useClientList, useClientProfile, useClientPolling } from "../api/hooks"
 import VpnInstance from "../components/VpnInstance"
 import WalletModal from "../components/WalletModal"
 import { showSuccess, showError } from "../utils/toast"
@@ -20,6 +20,12 @@ const Account = () => {
   } = useWalletStore()
   const [selectedDuration, setSelectedDuration] = useState<number>(0)
   const [selectedRegion, setSelectedRegion] = useState<string>("")
+  const [pendingClients, setPendingClients] = useState<Array<{
+    id: string
+    region: string
+    duration: string
+    purchaseTime: Date
+  }>>([])
 
   const tooltipSteps: TooltipStep[] = [
     {
@@ -64,8 +70,20 @@ const Account = () => {
       console.log('Transaction built successfully:', data)
 
       try {
-        const txHash = await signAndSubmitTransaction(data.txCbor)
-        showSuccess(`VPN purchase successful! Transaction: ${txHash}`)
+        await signAndSubmitTransaction(data.txCbor)
+        showSuccess(`VPN purchase successful! Setting up your instance...`)
+        
+        // Add pending client to the list
+        const pendingClient = {
+          id: data.clientId,
+          region: selectedRegion,
+          duration: selectedOption ? formatDuration(selectedOption.value) : 'Unknown',
+          purchaseTime: new Date()
+        }
+        setPendingClients(prev => [...prev, pendingClient])
+        
+        // Start polling for this client
+        startPolling(data.clientId)
 
       } catch (error) {
         console.error('Transaction error details:', error)
@@ -144,6 +162,16 @@ const Account = () => {
     }
   }, [refData?.regions, selectedRegion])
 
+  // Remove pending clients when they become available in the client list
+  useEffect(() => {
+    if (dedupedClientList && pendingClients.length > 0) {
+      const availableClientIds = new Set(dedupedClientList.map(client => client.id))
+      setPendingClients(prev => 
+        prev.filter(pending => !availableClientIds.has(pending.id))
+      )
+    }
+  }, [dedupedClientList, pendingClients.length])
+
   const selectedOption = durationOptions.find((option: { value: number }) => option.value === selectedDuration)
 
   const handlePurchase = () => {
@@ -177,6 +205,7 @@ const Account = () => {
   }
 
   const clientProfileMutation = useClientProfile()
+  const { startPolling } = useClientPolling()
 
   const handleAction = async (instanceId: string, action: string) => {
     if (action === 'Get Config') {
@@ -221,9 +250,7 @@ const Account = () => {
   }
 
   const vpnInstances = useMemo(() => {
-    if (!dedupedClientList) return []
-    
-    return dedupedClientList
+    const activeInstances = dedupedClientList ? dedupedClientList
       .map((client: ClientInfo) => {
         const isActive = new Date(client.expiration) > new Date()
 
@@ -245,8 +272,32 @@ const Account = () => {
         } else {
           return b.expirationDate.getTime() - a.expirationDate.getTime()
         }
-      })
-  }, [dedupedClientList])
+      }) : []
+
+    // Add pending instances
+    const pendingInstances = pendingClients.map(pending => ({
+      id: pending.id,
+      region: pending.region,
+      duration: pending.duration,
+      status: 'Pending' as const,
+      expires: 'Setting up...',
+      expirationDate: new Date(pending.purchaseTime.getTime() + 24 * 60 * 60 * 1000) // Placeholder
+    }))
+
+    // Combine and sort: Pending first, then Active, then Expired
+    return [...pendingInstances, ...activeInstances].sort((a, b) => {
+      if (a.status === 'Pending' && b.status !== 'Pending') return -1
+      if (a.status !== 'Pending' && b.status === 'Pending') return 1
+      if (a.status === 'Active' && b.status === 'Expired') return -1
+      if (a.status === 'Expired' && b.status === 'Active') return 1
+      
+      if (a.status === 'Active') {
+        return b.expirationDate.getTime() - a.expirationDate.getTime()
+      } else {
+        return b.expirationDate.getTime() - a.expirationDate.getTime()
+      }
+    })
+  }, [dedupedClientList, pendingClients])
 
   return (
     <TooltipGuide
@@ -258,9 +309,21 @@ const Account = () => {
         <div className="min-h-screen min-w-screen flex flex-col items-center justify-start bg-[linear-gradient(180deg,#1C246E_0%,#040617_12.5%)] pt-16">
           <div className="flex flex-col items-center justify-center pt-8 gap-6 md:pt-12 md:gap-8 z-20 text-white w-full max-w-none md:max-w-[80rem] px-4 md:px-8">
             <LoadingOverlay 
-              isVisible={signupMutation.isPending}
-              messageTop={signupMutation.isPending ? 'Awaiting Transaction Confirmation' : ''}
-              messageBottom="Processing Purchase" 
+              isVisible={signupMutation.isPending || clientProfileMutation.isPending}
+              messageTop={
+                signupMutation.isPending 
+                  ? 'Awaiting Transaction Confirmation' 
+                  : clientProfileMutation.isPending 
+                    ? 'Preparing VPN Configuration' 
+                    : ''
+              }
+              messageBottom={
+                signupMutation.isPending 
+                  ? 'Processing Purchase' 
+                  : clientProfileMutation.isPending 
+                    ? 'Downloading Config File' 
+                    : ''
+              } 
             />
 
             {/* VPN PURCHASE SECTION */}