Web lib: RPC health and connection status

apps/web/package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview",
     "lint": "eslint",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
   },
   "dependencies": {
     "@hugeicons/core-free-icons": "^4.1.2",
@@ -36,7 +37,9 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.2",
+    "msw": "^2.15.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.2"
+    "vite": "^7.3.2",
+    "vitest": "^3.0.0"
   }
 }

apps/web/src/lib/soroban/health.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeAll, afterAll, afterEach, vi } from "vitest";
+import { setupServer } from "msw/node";
+import { http, HttpResponse } from "msw";
+import { checkRpcHealth } from "./health";
+
+const server = setupServer(
+  http.post("http://localhost:8000/rpc", ({ request }) => {
+    return HttpResponse.json({ result: { status: "healthy" } });
+  })
+);
+
+beforeAll(() => server.listen());
+afterEach(() => {
+  server.resetHandlers();
+  vi.restoreAllMocks();
+});
+afterAll(() => server.close());
+
+describe("RPC Health", () => {
+  it("should return healthy status when RPC responds properly", async () => {
+    const result = await checkRpcHealth("http://localhost:8000/rpc");
+    expect(result).toEqual({ status: "healthy", label: "Healthy" });
+  });
+
+  it("should return degraded status when RPC returns 503", async () => {
+    server.use(
+      http.post("http://localhost:8000/rpc", () => {
+        return new HttpResponse(null, { status: 503 });
+      })
+    );
+    const result = await checkRpcHealth("http://localhost:8000/rpc");
+    expect(result).toEqual({ status: "degraded", label: "Degraded" });
+  });
+
+  it("should return degraded status when RPC returns 429", async () => {
+    server.use(
+      http.post("http://localhost:8000/rpc", () => {
+        return new HttpResponse(null, { status: 429 });
+      })
+    );
+    const result = await checkRpcHealth("http://localhost:8000/rpc");
+    expect(result).toEqual({ status: "degraded", label: "Degraded" });
+  });
+
+  it("should return unreachable status on network error", async () => {
+    server.use(
+      http.post("http://localhost:8000/rpc", () => {
+        return HttpResponse.error();
+      })
+    );
+    const result = await checkRpcHealth("http://localhost:8000/rpc");
+    expect(result).toEqual({ status: "unreachable", label: "Unreachable" });
+  });
+
+  it("should return unreachable status on timeout", async () => {
+    vi.useFakeTimers();
+    server.use(
+      http.post("http://localhost:8000/rpc", async () => {
+        // Will never respond in time
+        return new Promise(() => {});
+      })
+    );
+
+    const promise = checkRpcHealth("http://localhost:8000/rpc", 1000);
+    vi.advanceTimersByTime(1500);
+    const result = await promise;
+    expect(result).toEqual({ status: "unreachable", label: "Timeout" });
+    vi.useRealTimers();
+  });
+});

apps/web/src/lib/soroban/health.ts

@@ -0,0 +1,40 @@
+export type HealthStatus = "healthy" | "degraded" | "unreachable";
+
+export async function checkRpcHealth(url: string, timeoutMs: number = 5000): Promise<{ status: HealthStatus; label: string }> {
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), timeoutMs);
+
+    const res = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: 1,
+        method: "getHealth",
+      }),
+      signal: controller.signal,
+    });
+
+    clearTimeout(timeout);
+
+    if (!res.ok) {
+      if (res.status === 429 || res.status >= 500) {
+        return { status: "degraded", label: "Degraded" };
+      }
+      return { status: "unreachable", label: "Unreachable" };
+    }
+
+    const data = await res.json();
+    if (data.result?.status === "healthy") {
+      return { status: "healthy", label: "Healthy" };
+    }
+
+    return { status: "degraded", label: "Degraded" };
+  } catch (error: any) {
+    if (error.name === "AbortError") {
+      return { status: "unreachable", label: "Timeout" };
+    }
+    return { status: "unreachable", label: "Unreachable" };
+  }
+}