fix: multiple issues (#140)

* add warning for wrong network, and react max depth errors
* code rabbit fixed valid issues
* add wallet modal list for account page
* change modal style and animate list
* add hover effect to connect wallet button in modal
* fix padding top issue on mobile
* wallet logs for network
* remove logs
* show toast on console errors
* reset wallet state on network mismatch
* add toast to copy url for vpn link on mobil or desktop

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

Author: JaeBrian

src/api/__tests__/client.test.ts

@@ -1,6 +1,11 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import { apiClient, get, post, API_BASE_URL } from "../client";
 
+const createHeaders = (contentType: string) => ({
+  get: (name: string) =>
+    name.toLowerCase() === "content-type" ? contentType : null,
+});
+
 describe("API Client", () => {
   beforeEach(() => {
     vi.resetAllMocks();
@@ -11,6 +16,8 @@ describe("API Client", () => {
       const mockData = { message: "success" };
       global.fetch = vi.fn().mockResolvedValueOnce({
         ok: true,
+        status: 200,
+        headers: createHeaders("application/json"),
         json: async () => mockData,
       });
 
@@ -30,6 +37,7 @@ describe("API Client", () => {
         ok: false,
         status: 404,
         statusText: "Not Found",
+        headers: createHeaders("text/plain"),
         text: async () => "Resource not found",
       });
 
@@ -52,6 +60,8 @@ describe("API Client", () => {
       const mockData = { data: "test" };
       global.fetch = vi.fn().mockResolvedValueOnce({
         ok: true,
+        status: 200,
+        headers: createHeaders("application/json"),
         json: async () => mockData,
       });
 
@@ -76,6 +86,8 @@ describe("API Client", () => {
       const mockData = { id: 1, name: "test" };
       global.fetch = vi.fn().mockResolvedValueOnce({
         ok: true,
+        status: 200,
+        headers: createHeaders("application/json"),
         json: async () => mockData,
       });
 
@@ -99,6 +111,8 @@ describe("API Client", () => {
 
       global.fetch = vi.fn().mockResolvedValueOnce({
         ok: true,
+        status: 200,
+        headers: createHeaders("application/json"),
         json: async () => mockData,
       });
 
@@ -120,6 +134,8 @@ describe("API Client", () => {
 
       global.fetch = vi.fn().mockResolvedValueOnce({
         ok: true,
+        status: 200,
+        headers: createHeaders("application/json"),
         json: async () => mockData,
       });
 

src/api/hooks/useClientPolling.ts

@@ -14,12 +14,28 @@ interface PollingState {
   maxAttempts: number;
 }
 
+const DEFAULT_MAX_ATTEMPTS = 20;
+
 export function useClientPolling() {
-  const [pollingState, setPollingState] = useState<PollingState>({
-    isPolling: false,
-    clientId: null,
-    attempts: 0,
-    maxAttempts: 20, // 20 minutes max (20 * 60 seconds)
+  const [pollingState, setPollingState] = useState<PollingState>(() => {
+    const pendingTransactions = getActivePendingTransactions();
+    const firstPending = pendingTransactions[0];
+
+    if (firstPending) {
+      return {
+        isPolling: true,
+        clientId: firstPending.id,
+        attempts: firstPending.attempts,
+        maxAttempts: DEFAULT_MAX_ATTEMPTS,
+      };
+    }
+
+    return {
+      isPolling: false,
+      clientId: null,
+      attempts: 0,
+      maxAttempts: DEFAULT_MAX_ATTEMPTS,
+    };
   });
 
   const queryClient = useQueryClient();
@@ -31,7 +47,7 @@ export function useClientPolling() {
         isPolling: true,
         clientId,
         attempts: initialAttempts,
-        maxAttempts: 20,
+        maxAttempts: DEFAULT_MAX_ATTEMPTS,
       });
     },
     [],
@@ -59,15 +75,6 @@ export function useClientPolling() {
     }
   }, []);
 
-  useEffect(() => {
-    const pendingTransactions = getActivePendingTransactions();
-
-    if (pendingTransactions.length > 0) {
-      const firstPending = pendingTransactions[0];
-      startPolling(firstPending.id, firstPending.attempts);
-    }
-  }, [startPolling]);
-
   useEffect(() => {
     if (!pollingState.isPolling || !pollingState.clientId) {
       return;
@@ -89,33 +96,45 @@ export function useClientPolling() {
           return;
         }
 
-        const newAttempts = pollingState.attempts + 1;
-        setPollingState((prev) => ({
-          ...prev,
-          attempts: newAttempts,
-        }));
+        let shouldStop = false;
+        setPollingState((prev) => {
+          const newAttempts = prev.attempts + 1;
 
-        if (pollingState.clientId) {
-          updateTransactionAttempts(pollingState.clientId, newAttempts);
-        }
+          if (prev.clientId) {
+            updateTransactionAttempts(prev.clientId, newAttempts);
+          }
+
+          shouldStop = newAttempts >= prev.maxAttempts;
 
-        if (newAttempts >= pollingState.maxAttempts) {
+          return {
+            ...prev,
+            attempts: newAttempts,
+          };
+        });
+
+        if (shouldStop) {
           stopPolling(false);
         }
       } catch (error) {
         console.error("Error polling client availability:", error);
 
-        const newAttempts = pollingState.attempts + 1;
-        setPollingState((prev) => ({
-          ...prev,
-          attempts: newAttempts,
-        }));
+        let shouldStop = false;
+        setPollingState((prev) => {
+          const newAttempts = prev.attempts + 1;
 
-        if (pollingState.clientId) {
-          updateTransactionAttempts(pollingState.clientId, newAttempts);
-        }
+          if (prev.clientId) {
+            updateTransactionAttempts(prev.clientId, newAttempts);
+          }
+
+          shouldStop = newAttempts >= prev.maxAttempts;
+
+          return {
+            ...prev,
+            attempts: newAttempts,
+          };
+        });
 
-        if (newAttempts >= pollingState.maxAttempts) {
+        if (shouldStop) {
           stopPolling(false);
         }
       }

src/api/hooks/useClientProfile.ts

@@ -13,11 +13,9 @@ export function useClientProfile() {
   return useMutation({
     mutationFn: async (clientId: string) => {
       const timestamp = Math.floor(Date.now() / 1000).toString();
-      console.log("Timestamp:", timestamp);
       const challenge = `${clientId}${timestamp}`;
 
       const signResult = (await signMessage(challenge)) as SignDataResponse;
-      console.log("Sign result:", signResult);
 
       const profileRequest = {
         id: clientId,