Update market, account, and onion operations

Capture the current CyberLux UI, commerce, messaging, and Tor ops updates so local main can be pushed to the remote.

Made-with: Cursor

components/DDoSProtection.tsx

@@ -3,37 +3,46 @@
 import Link from "next/link";
 import { useState, useEffect, useRef } from "react";
 
+/** Total time for the progress bar to reach 100% (ms). */
+const DURATION_MS = 3500;
+/** Hard cap — always complete after this (ms) even if something glitches. */
+const MAX_WAIT_MS = 9000;
+/** Wall-clock polling (Tor Browser throttles requestAnimationFrame aggressively). */
+const TICK_MS = 50;
+
 export default function DDoSProtection({ onComplete }: { onComplete: () => void }) {
   const [progress, setProgress] = useState(0);
   const [status, setStatus] = useState("Checking your browser…");
-  /** Client-only — avoids SSR/client HTML mismatch from Math.random() in JSX. */
   const [rayId, setRayId] = useState("");
   const doneRef = useRef(false);
   const onCompleteRef = useRef(onComplete);
   onCompleteRef.current = onComplete;
 
+  const finish = () => {
+    if (doneRef.current) return;
+    doneRef.current = true;
+    setProgress(100);
+    setStatus("Access granted.");
+    window.setTimeout(() => onCompleteRef.current(), 400);
+  };
+
   useEffect(() => {
     setRayId(Math.random().toString(36).substring(2, 10).toUpperCase());
   }, []);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          return 100;
-        }
-        const next = prev + Math.random() * 15;
-        if (next >= 100) {
-          if (!doneRef.current) {
-            doneRef.current = true;
-            clearInterval(interval);
-            setTimeout(() => onCompleteRef.current(), 500);
-          }
-          return 100;
-        }
-        return next;
-      });
-    }, 400);
+    const start = Date.now();
+    doneRef.current = false;
+
+    const progressInterval = window.setInterval(() => {
+      const elapsed = Date.now() - start;
+      const pct = Math.min(100, (elapsed / DURATION_MS) * 100);
+      setProgress(pct);
+      if (pct >= 100 || elapsed >= MAX_WAIT_MS) {
+        window.clearInterval(progressInterval);
+        finish();
+      }
+    }, TICK_MS);
 
     const statusUpdates = [
       "Checking your browser…",
@@ -43,20 +52,24 @@ export default function DDoSProtection({ onComplete }: { onComplete: () => void
       "Establishing encrypted tunnel…",
       "Access granted.",
     ];
-
     let statusIndex = 0;
-    const statusInterval = setInterval(() => {
+    const statusInterval = window.setInterval(() => {
       if (statusIndex < statusUpdates.length - 1) {
         statusIndex++;
-        setStatus(statusUpdates[statusIndex]);
+        setStatus(statusUpdates[statusIndex]!);
       } else {
         clearInterval(statusInterval);
       }
-    }, 800);
+    }, 650);
+
+    const maxTimer = window.setTimeout(() => {
+      if (!doneRef.current) finish();
+    }, MAX_WAIT_MS);
 
     return () => {
-      clearInterval(interval);
+      window.clearInterval(progressInterval);
       clearInterval(statusInterval);
+      clearTimeout(maxTimer);
     };
   }, []);
 
@@ -69,25 +82,36 @@ export default function DDoSProtection({ onComplete }: { onComplete: () => void
         className="w-full max-w-md border-2 border-[#00ff41]/20 bg-[#050505] p-12 shadow-[0_0_50px_rgba(0,255,65,0.1)]"
         style={{ backgroundColor: "#050505", borderColor: "rgba(0,255,65,0.2)" }}
       >
-        <div className="text-4xl mb-8 animate-pulse">🛡️</div>
-        <h1 className="text-2xl font-bold mb-2 uppercase tracking-tighter">DDoS Protection</h1>
-        <p className="text-xs opacity-60 mb-8 leading-relaxed">
+        <div className="mb-8 animate-pulse text-4xl">🛡️</div>
+        <h1 className="mb-2 text-2xl font-bold uppercase tracking-tighter">DDoS Protection</h1>
+        <p className="mb-8 text-xs leading-relaxed opacity-60">
           Origin shield active — wait while we validate your session. Automated requests are throttled at the edge.
         </p>
 
-        <div className="w-full h-2 bg-[#00ff41]/10 mb-4 overflow-hidden">
+        <div className="mb-4 h-2 w-full overflow-hidden bg-[#00ff41]/10">
           <div
-            className="h-full bg-[#00ff41] transition-all duration-300 ease-out"
-            style={{ width: `${progress}%` }}
+            className="h-full bg-[#00ff41] transition-[width] duration-100 ease-linear"
+            style={{ width: `${Math.min(100, progress)}%` }}
           />
         </div>
 
         <div className="flex justify-between text-[10px] uppercase tracking-widest">
           <span>{status}</span>
-          <span>{Math.floor(progress)}%</span>
+          <span>{Math.floor(Math.min(100, progress))}%</span>
         </div>
 
-        <div className="mt-12 text-[8px] opacity-20 leading-relaxed">
+        <button
+          type="button"
+          onClick={finish}
+          className="mt-8 w-full border border-[#00ff41]/40 bg-[#00ff41]/10 py-3 text-xs font-bold uppercase tracking-wider text-[#00ff41] transition hover:bg-[#00ff41]/20"
+        >
+          Continue to site
+        </button>
+        <p className="mt-2 text-center text-[9px] text-[#00ff41]/40">
+          Stuck on Tor or slow device? Tap above — no challenge required.
+        </p>
+
+        <div className="mt-8 text-[8px] leading-relaxed opacity-20">
           Ray ID: {rayId || "—"}
           <br />
           Performance & Security by ShadowGuard™