feat: implement KYC status handling and Didit callback integration

- Added a new route for Didit redirect callback to handle user verification status.
- Enhanced SettingsContent to reflect verification status upon redirection.
- Introduced KYC status management with corresponding badge images in UserMenu and navbar.
- Created utility functions for KYC status image retrieval and added new KYC status images.

Author: 0xdevcollins

app/api/didit/callback/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Didit redirect callback: user is sent here after completing verification on Didit.
+ * We redirect them to Settings → Identity so they see their updated status.
+ * The backend receives the final result via webhook; this route only handles the browser redirect.
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const verification = searchParams.get('verification') ?? 'complete';
+
+  const baseUrl = request.nextUrl.origin;
+  const redirectUrl = new URL('/me/settings', baseUrl);
+  redirectUrl.searchParams.set('verification', verification);
+
+  return NextResponse.redirect(redirectUrl, 302);
+}

app/me/settings/SettingsContent.tsx

@@ -2,6 +2,7 @@
 import Profile from '@/components/profile/update/Profile';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useEffect, useState, useCallback } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { User } from '@/types/user';
 import { getMe } from '@/lib/api/auth';
 import { GetMeResponse } from '@/lib/api/types';
@@ -11,6 +12,8 @@ import { IdentityVerificationSection } from '@/components/didit/IdentityVerifica
 import { invalidateAuthProfileCache } from '@/hooks/use-auth';
 
 const SettingsContent = () => {
+  const searchParams = useSearchParams();
+  const fromVerification = searchParams.get('verification') === 'complete';
   const [userData, setUserData] = useState<GetMeResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -54,7 +57,10 @@ const SettingsContent = () => {
             Manage your personal information and public profile
           </p>
         </div>
-        <Tabs defaultValue='profile' className='w-full'>
+        <Tabs
+          defaultValue={fromVerification ? 'identity' : 'profile'}
+          className='w-full'
+        >
           <TabsList className='inline-flex h-auto gap-6 bg-transparent p-0'>
             <TabsTrigger
               value='profile'

components/landing-page/navbar.tsx

@@ -26,6 +26,8 @@ import {
 } from '../ui/dropdown-menu';
 import { UserMenu } from '../user/UserMenu';
 import { cn } from '@/lib/utils';
+import { getKycImageAndAlt } from '@/lib/kyc-status';
+import type { GetMeResponse } from '@/lib/api/types';
 import { BoundlessButton } from '../buttons';
 import { useProtectedAction } from '@/hooks/use-protected-action';
 import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
@@ -350,6 +352,11 @@ const MobileMenu = ({
   const displayName = useMemo(() => {
     return user?.name || user?.profile?.firstName || 'User';
   }, [user]);
+
+  const kycStatus = (user?.profile as GetMeResponse | undefined)?.user
+    ?.identityVerificationStatus;
+  const kycBadge = getKycImageAndAlt(kycStatus);
+
   return (
     <div className='min-[990px]:hidden'>
       <Sheet open={isOpen} onOpenChange={setIsOpen}>
@@ -389,18 +396,44 @@ const MobileMenu = ({
           <div className='flex flex-1 flex-col gap-6 overflow-y-auto pb-6'>
             {isAuthenticated && user && (
               <div className='flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/8'>
-                <Avatar className='h-10 w-10 border border-white/10'>
-                  <AvatarImage
-                    src={user.profile?.image || ''}
-                    alt={displayName}
-                  />
-                  <AvatarFallback className='bg-white/10 text-white/80'>
-                    {userInitial}
-                  </AvatarFallback>
-                </Avatar>
+                <span className='relative shrink-0'>
+                  <Avatar className='h-10 w-10 border border-white/10'>
+                    <AvatarImage
+                      src={
+                        (user.profile as GetMeResponse)?.user?.image ||
+                        user.profile?.image ||
+                        ''
+                      }
+                      alt={displayName}
+                    />
+                    <AvatarFallback className='bg-white/10 text-white/80'>
+                      {userInitial}
+                    </AvatarFallback>
+                  </Avatar>
+                  {kycBadge && (
+                    <span className='absolute -right-0.5 -bottom-0.5 flex rounded-full bg-black'>
+                      <Image
+                        src={kycBadge.src}
+                        alt={kycBadge.alt}
+                        width={14}
+                        height={14}
+                        className='h-3.5 w-3.5'
+                      />
+                    </span>
+                  )}
+                </span>
                 <div className='min-w-0 flex-1'>
-                  <p className='truncate text-sm font-medium text-white'>
-                    {displayName}
+                  <p className='flex items-center gap-1.5 truncate text-sm font-medium text-white'>
+                    <span className='truncate'>{displayName}</span>
+                    {kycBadge && (
+                      <Image
+                        src={kycBadge.src}
+                        alt={kycBadge.alt}
+                        width={14}
+                        height={14}
+                        className='h-3.5 w-3.5 shrink-0'
+                      />
+                    )}
                   </p>
                   <p className='truncate text-xs text-white/60'>
                     {user?.email}

components/user/UserMenu.tsx

@@ -14,6 +14,7 @@ import Image from 'next/image';
 import React, { useContext } from 'react';
 import { useAuthActions, useAuthStatus } from '@/hooks/use-auth';
 import { OrganizationContext } from '@/lib/providers/OrganizationProvider';
+import { getKycImageAndAlt } from '@/lib/kyc-status';
 
 interface UserMenuProps {
   /**
@@ -47,8 +48,8 @@ export const UserMenu: React.FC<UserMenuProps> = ({
 
   const orgContext = useContext(OrganizationContext);
   const organizations = orgContext?.organizations || [];
-  const isVerified =
-    user?.profile?.user?.identityVerificationStatus === 'Approved';
+  const kycStatus = user?.profile?.user?.identityVerificationStatus;
+  const kycBadge = getKycImageAndAlt(kycStatus);
 
   return (
     <DropdownMenu>
@@ -70,14 +71,14 @@ export const UserMenu: React.FC<UserMenuProps> = ({
                 {(user?.name || 'U').charAt(0).toUpperCase()}
               </AvatarFallback>
             </Avatar>
-            {isVerified && (
+            {kycBadge && (
               <span className='absolute -right-0.5 -bottom-0.5 flex rounded-full bg-black'>
                 <Image
-                  src='/verified.png'
-                  alt='Verified'
+                  src={kycBadge.src}
+                  alt={kycBadge.alt}
                   width={12}
                   height={12}
-                  className='h-4 w-4'
+                  className='h-3 w-3'
                 />
               </span>
             )}
@@ -108,10 +109,10 @@ export const UserMenu: React.FC<UserMenuProps> = ({
             <div className='min-w-0 flex-1'>
               <p className='flex items-center gap-1.5 truncate text-sm font-semibold text-white'>
                 <span className='truncate'>{user?.name || 'User'}</span>
-                {isVerified && (
+                {kycBadge && (
                   <Image
-                    src='/verified.png'
-                    alt='Verified'
+                    src={kycBadge.src}
+                    alt={kycBadge.alt}
                     width={14}
                     height={14}
                     className='h-3.5 w-3.5 shrink-0'

lib/kyc-status.ts

@@ -0,0 +1,29 @@
+/**
+ * KYC (identity verification) status and corresponding badge images.
+ * Used in UserMenu and navbar to show verified / pending / rejected state.
+ */
+
+export type KycStatus = 'Approved' | 'Declined' | 'In Review';
+
+export const KYC_STATUS_IMAGE: Record<KycStatus, string> = {
+  Approved: '/kyc-verified.png',
+  Declined: '/kyc-rejected.png',
+  'In Review': '/kyc-pending.png',
+};
+
+export const KYC_STATUS_ALT: Record<KycStatus, string> = {
+  Approved: 'Verified',
+  Declined: 'Rejected',
+  'In Review': 'Pending',
+};
+
+export function getKycImageAndAlt(
+  status: KycStatus | null | undefined
+): { src: string; alt: string } | null {
+  if (!status || !(status in KYC_STATUS_IMAGE)) return null;
+  const kycStatus = status as KycStatus;
+  return {
+    src: KYC_STATUS_IMAGE[kycStatus],
+    alt: KYC_STATUS_ALT[kycStatus],
+  };
+}