From c70299dbf4c795be368b3d16c6f2307af2c57983 Mon Sep 17 00:00:00 2001
From: Godfr3y <godfreydelight2@gmail.com>
Date: Thu, 25 Jun 2026 12:07:21 +0100
Subject: [PATCH] Build KYC status indicator

updated UserProfile in lib/api/users.ts to include kycStatus, created components/dashboard/kyc-status-banner.tsx (fetches profile, shows amber warning + "Verify Now" CTA for unverified users, dismissible per session via localStorage, hidden for verified users), created components/dashboard/settings/kyc-section.tsx (green badge + "Your identity has been verified" for verified, red badge + "Verification required" + "Start Verification" button for unverified), and wired both into the dashboard page and the identity verification tab in settings respectively.
---
 app/(dashboard)/dashboard/page.tsx            |  2 +
 components/dashboard/kyc-status-banner.tsx    | 70 ++++++++++++++++
 components/dashboard/settings/kyc-section.tsx | 79 +++++++++++++++++++
 components/settings/tabs.tsx                  |  2 +
 lib/api/users.ts                              |  1 +
 5 files changed, 154 insertions(+)
 create mode 100644 components/dashboard/kyc-status-banner.tsx
 create mode 100644 components/dashboard/settings/kyc-section.tsx

diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 2a760e65..65ffed76 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { AccountOverview } from "@/components/dashboard/account-overview";
 import DepositMethods from "@/components/dashboard/deposit";
+import { KYCStatusBanner } from "@/components/dashboard/kyc-status-banner";
 import { MarketOverview } from "@/components/dashboard/market-overview";
 import { RecentTransactions } from "@/components/dashboard/recent-transactions";
 import { WithdrawalModal } from "@/components/dashboard/withdrawal/WithdrawalModal";
@@ -18,6 +19,7 @@ export default function DashboardPage() {
   return (
     <div className="flex flex-col gap-5 md:gap-10">
       <WithdrawalModal />
+      <KYCStatusBanner />
       {openDeposit ? (
         <DepositMethods toggleDeposit={toggleDeposit} />
       ) : (
diff --git a/components/dashboard/kyc-status-banner.tsx b/components/dashboard/kyc-status-banner.tsx
new file mode 100644
index 00000000..06b936e6
--- /dev/null
+++ b/components/dashboard/kyc-status-banner.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { getProfile } from '@/lib/api/users';
+import { X } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+const DISMISS_KEY = 'kyc-banner-dismissed';
+
+export function KYCStatusBanner() {
+  const [kycStatus, setKycStatus] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const profile = await getProfile();
+        setKycStatus(profile.kycStatus ?? null);
+      } catch {
+        setKycStatus(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  if (loading) return null;
+
+  const isVerified = kycStatus === 'Verified';
+  if (isVerified) return null;
+
+  const isDismissed =
+    dismissed || localStorage.getItem(DISMISS_KEY) === 'true';
+  if (isDismissed) return null;
+
+  const handleDismiss = () => {
+    localStorage.setItem(DISMISS_KEY, 'true');
+    setDismissed(true);
+  };
+
+  return (
+    <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-amber-50 to-orange-100 dark:from-amber-950/20 dark:to-orange-950/20 p-4 shadow-sm border border-amber-200 dark:border-amber-800">
+      <button
+        onClick={handleDismiss}
+        className="absolute top-2 right-2 text-muted-foreground hover:text-foreground transition-colors"
+        aria-label="Dismiss"
+      >
+        <X className="size-4" />
+      </button>
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pr-6">
+        <div className="space-y-0.5">
+          <p className="text-sm font-semibold text-foreground">
+            Your account is not yet verified
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Complete KYC to unlock full transaction limits.
+          </p>
+        </div>
+        <Link
+          href="/settings"
+          className="whitespace-nowrap rounded-md bg-primary px-5 py-2 text-xs font-semibold text-black transition-colors hover:bg-primary/90 active:scale-95"
+        >
+          Verify Now
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/dashboard/settings/kyc-section.tsx b/components/dashboard/settings/kyc-section.tsx
new file mode 100644
index 00000000..b6648ac8
--- /dev/null
+++ b/components/dashboard/settings/kyc-section.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { getProfile } from '@/lib/api/users';
+import { BadgeCheck, AlertTriangle } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+export function KycSection() {
+  const [kycStatus, setKycStatus] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const profile = await getProfile();
+        setKycStatus(profile.kycStatus ?? null);
+      } catch {
+        setKycStatus(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="bg-card rounded-xl border border-border/50 p-6 animate-pulse">
+        <div className="h-5 w-40 bg-muted rounded mb-3" />
+        <div className="h-4 w-60 bg-muted rounded" />
+      </div>
+    );
+  }
+
+  const isVerified = kycStatus === 'Verified';
+
+  return (
+    <div className="bg-card rounded-xl border border-border/50 p-6">
+      <h3 className="text-lg font-semibold text-foreground mb-4">
+        KYC Verification
+      </h3>
+
+      {isVerified ? (
+        <div className="flex items-center gap-3">
+          <BadgeCheck className="size-6 text-green-500 shrink-0" />
+          <div className="space-y-0.5">
+            <span className="inline-flex items-center rounded-full px-3 py-0.5 text-xs font-medium bg-green-100 text-green-700 border border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800">
+              Verified
+            </span>
+            <p className="text-sm text-muted-foreground">
+              Your identity has been verified
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-3">
+          <AlertTriangle className="size-6 text-red-500 shrink-0" />
+          <div className="space-y-0.5">
+            <span className="inline-flex items-center rounded-full px-3 py-0.5 text-xs font-medium bg-red-100 text-red-700 border border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800">
+              Unverified
+            </span>
+            <p className="text-sm text-muted-foreground">
+              Verification required
+            </p>
+          </div>
+        </div>
+      )}
+
+      {!isVerified && (
+        <Link
+          href="#"
+          className="mt-4 inline-block rounded-md bg-primary px-5 py-2 text-xs font-semibold text-black transition-colors hover:bg-primary/90 active:scale-95"
+        >
+          Start Verification
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/components/settings/tabs.tsx b/components/settings/tabs.tsx
index b6cd2591..406a07e7 100644
--- a/components/settings/tabs.tsx
+++ b/components/settings/tabs.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { AccountIcon, SecurityIcon, IdentityIcon } from "../icons";
 import { AccountInfo } from "./account-info";
+import { KycSection } from "../dashboard/settings/kyc-section";
 import { Security } from "./security";
 import { Notification } from "./notification";
 import { ProfileOverview } from "../profile/profile-overview";
@@ -72,6 +73,7 @@ export function TabsSettings() {
           {/* Right Column: Content Stack */}
           <div className="space-y-6">
             <PersonalInfo />
+            <KycSection />
             <VerificationBanner />
           </div>
         </div>
diff --git a/lib/api/users.ts b/lib/api/users.ts
index e60e6140..f8ca0139 100644
--- a/lib/api/users.ts
+++ b/lib/api/users.ts
@@ -8,6 +8,7 @@ export interface UserProfile {
   phone?: string;
   avatarUrl?: string;
   isVerified?: boolean;
+  kycStatus?: string;
   walletAddress?: string;
 }