From f8fb6d93774e96ab87d33cccd4954168796ff821 Mon Sep 17 00:00:00 2001
From: Olawale880 <ibrahimolawale880@gmail.com>
Date: Thu, 25 Jun 2026 13:27:27 +0100
Subject: [PATCH] feat: issue has been solved

---
 app/frontend/src/components/PreviewBanner.tsx | 275 ++++++++++++++++++
 app/frontend/src/hooks/usePreviewMetadata.ts  | 170 +++++++++++
 2 files changed, 445 insertions(+)
 create mode 100644 app/frontend/src/components/PreviewBanner.tsx
 create mode 100644 app/frontend/src/hooks/usePreviewMetadata.ts

diff --git a/app/frontend/src/components/PreviewBanner.tsx b/app/frontend/src/components/PreviewBanner.tsx
new file mode 100644
index 000000000..22db2db38
--- /dev/null
+++ b/app/frontend/src/components/PreviewBanner.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+/**
+ * PreviewBanner
+ *
+ * Renders a sticky top banner that informs contributors which preview /
+ * testnet environment they are currently using.
+ *
+ * ┌─────────────────────────────────────────────────────────────────────────┐
+ * │ 🔬  PREVIEW ENVIRONMENT — staging │ branch: feat/FE-38 │ sha: a1b2c3d │
+ * └─────────────────────────────────────────────────────────────────────────┘
+ *
+ * Guarantees:
+ *  • Never renders in production (isPreviewEnvironment() === false).
+ *  • Degrades gracefully — if the backend is unavailable the banner still
+ *    shows static environment metadata resolved from env vars.
+ *  • Accessible: uses role="banner", aria-label, and a dismiss button with
+ *    an aria-label.
+ *  • Respects prefers-reduced-motion via a CSS media query on the shimmer.
+ */
+
+import { useState } from "react";
+import { usePreviewMetadata, isPreviewEnvironment } from "@/hooks/usePreviewMetadata";
+
+// ─── sub-components ──────────────────────────────────────────────────────────
+
+function Chip({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        padding: "2px 8px",
+        borderRadius: "9999px",
+        background: "rgba(255,255,255,0.12)",
+        border: "1px solid rgba(255,255,255,0.18)",
+        fontSize: "11px",
+        fontWeight: 600,
+        letterSpacing: "0.02em",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function Skeleton() {
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        display: "inline-block",
+        width: "180px",
+        height: "14px",
+        borderRadius: "4px",
+        background:
+          "linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 75%)",
+        backgroundSize: "200% 100%",
+        animation: "previewBannerShimmer 1.4s ease-in-out infinite",
+      }}
+    />
+  );
+}
+
+// ─── keyframes injected once via a <style> tag ───────────────────────────────
+
+const KEYFRAMES = `
+@keyframes previewBannerShimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+@keyframes previewBannerFadeIn {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .preview-banner-root {
+    animation: none !important;
+  }
+  .preview-banner-shimmer {
+    animation: none !important;
+  }
+}
+`;
+
+// ─── main component ───────────────────────────────────────────────────────────
+
+export function PreviewBanner() {
+  const [dismissed, setDismissed] = useState(false);
+
+  // Hard guard: never render in production.
+  if (!isPreviewEnvironment()) return null;
+
+  // Once the user dismisses the banner for the session, respect that choice.
+  if (dismissed) return null;
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
+      <PreviewBannerInner onDismiss={() => setDismissed(true)} />
+    </>
+  );
+}
+
+// Split inner component so the hook only runs in non-production.
+function PreviewBannerInner({ onDismiss }: { onDismiss: () => void }) {
+  const { metadata, loading } = usePreviewMetadata();
+
+  const envLabel = metadata?.envName?.toUpperCase() ?? "PREVIEW";
+  const branch = metadata?.branch;
+  const sha = metadata?.commitSha;
+
+  return (
+    <div
+      id="preview-environment-banner"
+      role="banner"
+      aria-label={`Preview environment: ${envLabel}`}
+      className="preview-banner-root"
+      style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 60,
+        width: "100%",
+        background:
+          "linear-gradient(90deg, #312e81 0%, #4f46e5 40%, #7c3aed 70%, #312e81 100%)",
+        backgroundSize: "200% 100%",
+        animation: "previewBannerFadeIn 0.35s ease-out both",
+        borderBottom: "1px solid rgba(255,255,255,0.15)",
+        boxShadow: "0 2px 12px rgba(79,70,229,0.45)",
+      }}
+    >
+      <div
+        style={{
+          maxWidth: "1280px",
+          margin: "0 auto",
+          padding: "6px 24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "12px",
+          flexWrap: "wrap",
+        }}
+      >
+        {/* Left: icon + env label */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            flexWrap: "wrap",
+          }}
+        >
+          <span role="img" aria-label="preview" style={{ fontSize: "14px" }}>
+            🔬
+          </span>
+          <span
+            style={{
+              fontSize: "12px",
+              fontWeight: 700,
+              letterSpacing: "0.08em",
+              color: "#e0e7ff",
+              textTransform: "uppercase",
+            }}
+          >
+            Preview Environment
+          </span>
+
+          {/* Separator */}
+          <span
+            aria-hidden="true"
+            style={{ opacity: 0.3, color: "#a5b4fc" }}
+          >
+            ·
+          </span>
+
+          {/* Chips */}
+          {loading ? (
+            <Skeleton />
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                flexWrap: "wrap",
+                color: "#c7d2fe",
+              }}
+            >
+              <Chip>
+                <span aria-hidden="true">⚙</span>
+                {envLabel}
+              </Chip>
+
+              {branch && (
+                <Chip>
+                  <span aria-hidden="true" style={{ fontSize: "10px" }}>
+                    ⎇
+                  </span>
+                  {branch}
+                </Chip>
+              )}
+
+              {sha && (
+                <Chip>
+                  <span aria-hidden="true" style={{ fontSize: "10px" }}>
+                    #
+                  </span>
+                  {sha}
+                </Chip>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Right: info note + dismiss */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            flexShrink: 0,
+          }}
+        >
+          <span
+            style={{
+              fontSize: "11px",
+              color: "#a5b4fc",
+              fontStyle: "italic",
+            }}
+          >
+            Not visible in production
+          </span>
+
+          <button
+            id="preview-banner-dismiss-btn"
+            type="button"
+            aria-label="Dismiss preview environment banner"
+            onClick={onDismiss}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "22px",
+              height: "22px",
+              borderRadius: "50%",
+              border: "1px solid rgba(255,255,255,0.25)",
+              background: "rgba(255,255,255,0.08)",
+              color: "#c7d2fe",
+              cursor: "pointer",
+              fontSize: "13px",
+              lineHeight: 1,
+              transition: "background 160ms, transform 160ms",
+              padding: 0,
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLButtonElement).style.background =
+                "rgba(255,255,255,0.2)";
+              (e.currentTarget as HTMLButtonElement).style.transform =
+                "scale(1.1)";
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLButtonElement).style.background =
+                "rgba(255,255,255,0.08)";
+              (e.currentTarget as HTMLButtonElement).style.transform = "scale(1)";
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/frontend/src/hooks/usePreviewMetadata.ts b/app/frontend/src/hooks/usePreviewMetadata.ts
new file mode 100644
index 000000000..bded551cf
--- /dev/null
+++ b/app/frontend/src/hooks/usePreviewMetadata.ts
@@ -0,0 +1,170 @@
+"use client";
+
+/**
+ * usePreviewMetadata
+ *
+ * Resolves preview / testnet environment context for the contributor banner.
+ *
+ * Resolution order (first truthy value wins):
+ *  1. NEXT_PUBLIC_VERCEL_ENV          – set automatically by Vercel
+ *  2. NEXT_PUBLIC_PREVIEW_ENV_NAME    – manual override (e.g. "staging")
+ *  3. NODE_ENV                        – fallback ("development" / "production")
+ *
+ * Branch is resolved from NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF (Vercel) or
+ * NEXT_PUBLIC_BRANCH (manual override).
+ *
+ * A backend `/preview-metadata` endpoint is fetched when
+ * NEXT_PUBLIC_QUICKEX_API_URL is set and the environment is non-production,
+ * so that server-side metadata can enrich the banner. The backend response
+ * is merged in but the component gracefully degrades if the endpoint is
+ * unavailable.
+ */
+
+import { useEffect, useState } from "react";
+import { getQuickexApiBase } from "@/lib/api";
+
+export interface PreviewMetadata {
+  /** Human-readable environment label, e.g. "preview", "staging", "development". */
+  envName: string;
+  /** Git branch name, e.g. "feat/FE-38-preview-banner". */
+  branch: string;
+  /** Commit SHA short hash (7 chars), if available. */
+  commitSha?: string;
+  /** True when the environment is not production. */
+  isPreview: boolean;
+}
+
+interface UsePreviewMetadataResult {
+  metadata: PreviewMetadata | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Shape of the optional backend /preview-metadata response payload.
+ * The backend may return additional fields; we only consume the ones we need.
+ */
+interface BackendPreviewMetadata {
+  envName?: string;
+  branch?: string;
+  commitSha?: string;
+}
+
+// ─── helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Derive the environment name from Next.js / Vercel env vars.
+ * Never returns "production" so callers can safely trust this value.
+ */
+function resolveEnvName(): string {
+  // Vercel sets this to "production" | "preview" | "development"
+  const vercelEnv = process.env.NEXT_PUBLIC_VERCEL_ENV;
+  if (vercelEnv && vercelEnv !== "production") return vercelEnv;
+
+  const manualEnv = process.env.NEXT_PUBLIC_PREVIEW_ENV_NAME;
+  if (manualEnv) return manualEnv;
+
+  // NODE_ENV is always available but is a build-time constant in Next.js
+  return process.env.NODE_ENV === "production" ? "" : process.env.NODE_ENV ?? "development";
+}
+
+/**
+ * Returns true when the current environment is NOT production.
+ */
+export function isPreviewEnvironment(): boolean {
+  if (process.env.NODE_ENV === "production") {
+    // Still allow the banner in Vercel preview deployments even when Next.js
+    // reports NODE_ENV=production (Vercel sets its own NEXT_PUBLIC_VERCEL_ENV).
+    const vercelEnv = process.env.NEXT_PUBLIC_VERCEL_ENV;
+    return vercelEnv === "preview" || vercelEnv === "development";
+  }
+  return true;
+}
+
+function resolveStaticBranch(): string {
+  return (
+    process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ||
+    process.env.NEXT_PUBLIC_BRANCH ||
+    "unknown-branch"
+  );
+}
+
+function resolveStaticCommit(): string | undefined {
+  const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+  return sha ? sha.slice(0, 7) : undefined;
+}
+
+// ─── hook ────────────────────────────────────────────────────────────────────
+
+export function usePreviewMetadata(): UsePreviewMetadataResult {
+  const [metadata, setMetadata] = useState<PreviewMetadata | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Never render anything in production (belt-and-suspenders check on the
+    // client side; the component itself also checks this).
+    if (!isPreviewEnvironment()) {
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function load() {
+      const staticMeta: PreviewMetadata = {
+        envName: resolveEnvName(),
+        branch: resolveStaticBranch(),
+        commitSha: resolveStaticCommit(),
+        isPreview: true,
+      };
+
+      // Optimistically show static data while we fetch from the backend.
+      if (!cancelled) setMetadata(staticMeta);
+
+      // Attempt to enrich from backend; failures are non-fatal.
+      try {
+        const apiBase = getQuickexApiBase();
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 4000);
+
+        const res = await fetch(`${apiBase}/preview-metadata`, {
+          signal: controller.signal,
+          headers: { Accept: "application/json" },
+          // No credentials needed — this is a public metadata endpoint.
+        });
+
+        clearTimeout(timeout);
+
+        if (res.ok) {
+          const remote: BackendPreviewMetadata = await res.json();
+          if (!cancelled) {
+            setMetadata((prev) =>
+              prev
+                ? {
+                    ...prev,
+                    envName: remote.envName ?? prev.envName,
+                    branch: remote.branch ?? prev.branch,
+                    commitSha: remote.commitSha ?? prev.commitSha,
+                  }
+                : prev
+            );
+          }
+        }
+      } catch {
+        // Network / timeout errors are silently swallowed; the banner will
+        // display the static metadata resolved from env vars instead.
+      }
+
+      if (!cancelled) setLoading(false);
+    }
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { metadata, loading, error };
+}