fix(frontend): harden SDK wallet lifecycle

.github/workflows/test.yml

@@ -49,7 +49,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 22.22.x
           cache: npm
           cache-dependency-path: |
             package-lock.json
@@ -72,6 +72,10 @@ jobs:
         working-directory: frontend
         run: npm run lint
 
+      - name: Test frontend lifecycle guards
+        working-directory: frontend
+        run: npm test
+
       - name: Build frontend
         working-directory: frontend
         run: npm run build

frontend/package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "dev": "vite",
     "dev:lan": "vite --host 0.0.0.0",
+    "test": "node --test --experimental-strip-types src/utils/*.test.ts",
     "build": "tsc -b && vite build",
     "lint": "eslint . --max-warnings 0",
     "preview": "vite preview"
@@ -15,8 +16,8 @@
     "@fontsource-variable/instrument-sans": "^5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@fontsource-variable/sora": "^5.2.8",
-    "@qrlwallet/connect": "^3.3.0",
-    "@qrlwallet/connect-ui": "^0.1.0",
+    "@qrlwallet/connect": "4.0.0",
+    "@qrlwallet/connect-ui": "0.2.0",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.1",
     "@theqrl/web3": "^1.0.1",
@@ -25,9 +26,9 @@
     "lucide-react": "^0.562.0",
     "mobx": "^6.13.0",
     "mobx-react-lite": "^4.0.7",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-router-dom": "7.18.2",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-router": "8.3.0",
     "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
@@ -47,6 +48,9 @@
     "typescript-eslint": "^8.24.1",
     "vite": "^7.3.2"
   },
+  "engines": {
+    "node": ">=22.22.0"
+  },
   "overrides": {
     "brace-expansion@1": "1.1.18",
     "brace-expansion@5": "5.0.9",

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router";
 import { AlertTriangle, X } from "lucide-react";
 import { Header } from "@/components/Layout/Header";
 import { Footer } from "@/components/Layout/Footer";

frontend/src/components/ConnectButton.tsx

@@ -23,11 +23,14 @@ export const ConnectButton = observer(() => {
         <Button
           variant="outline"
           size="sm"
-          onClick={() => poolStore.disconnect()}
+          disabled={poolStore.isDisconnecting}
+          onClick={() => void poolStore.disconnect()}
           aria-label="Disconnect wallet"
         >
           <LogOut className="h-4 w-4" />
-          <span className="hidden sm:inline">Disconnect</span>
+          <span className="hidden sm:inline">
+            {poolStore.isDisconnecting ? "Disconnecting…" : "Disconnect"}
+          </span>
         </Button>
       </div>
     );

frontend/src/components/Layout/Footer.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useStore } from "@/stores/store";
 
 export function Footer() {

frontend/src/components/Layout/Header.tsx

@@ -1,4 +1,4 @@
-import { NavLink, Link } from "react-router-dom";
+import { NavLink, Link } from "react-router";
 import { observer } from "mobx-react-lite";
 import { Logo } from "@/components/Logo";
 import { ConnectButton } from "@/components/ConnectButton";

frontend/src/components/QrPairModal.tsx

@@ -25,7 +25,7 @@ export const QrPairModal = observer(() => {
     el.setAttribute("uri", uri);
     if (statusRef.current) el.setAttribute("status", statusRef.current);
     const onNew = () => void poolStore.newConnection();
-    const onDismiss = () => poolStore.cancelPairing();
+    const onDismiss = () => void poolStore.cancelPairing();
     el.addEventListener("qrl-new-connection", onNew);
     el.addEventListener("qrl-cancel", onDismiss);
     hostRef.current?.append(el);

frontend/src/components/RouteSeo.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 const CANONICAL_ORIGIN = "https://quantapool.com";
 

frontend/src/pages/HowItWorksPage.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import {
   ArrowDownToLine,
   Clock,

frontend/src/pages/StakePage.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Zap } from "lucide-react";
 import { Button } from "@/components/UI/Button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/UI/Card";