security: add positive verified-host indicator to DomainWarningBanner (#447)

src/components/DomainWarningBanner.tsx

@@ -1,16 +1,23 @@
 "use client";
 
 import React, { useEffect, useState } from 'react';
-import { AlertTriangle, ShieldAlert, X } from 'lucide-react';
+import { AlertTriangle, ShieldAlert, ShieldCheck, X } from 'lucide-react';
 import { PhishingProtection } from '@/utils/security/phishingProtection';
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
+const OFFICIAL_DOMAINS = [
+  'propchain.io',
+  'localhost',
+  '127.0.0.1',
+  '0.0.0.0',
+];
+
 export const DomainWarningBanner = () => {
   const [warning, setWarning] = useState<{
     show: boolean;
-    type: 'phishing' | 'unofficial';
+    type: 'phishing' | 'unofficial' | 'verified';
     message: string;
     riskScore: number;
   }>({
@@ -37,7 +44,6 @@ export const DomainWarningBanner = () => {
           message: 'This domain is flagged as a known phishing site. Your funds may be at risk.',
           riskScore: result.riskScore,
         });
-        // Auto-report phishing domains
         PhishingProtection.reportSuspiciousDomain(domain, 'Known phishing domain');
       } else if (result.warnings.includes('Unofficial domain detected')) {
         setWarning({
@@ -46,8 +52,14 @@ export const DomainWarningBanner = () => {
           message: 'You are accessing PropChain from an unofficial domain. Please ensure you are on propchain.io.',
           riskScore: result.riskScore,
         });
-        // Report unofficial domains for investigation
         PhishingProtection.reportSuspiciousDomain(domain, 'Unofficial domain');
+      } else if (OFFICIAL_DOMAINS.some(d => domain === d || domain.endsWith(`.${d}`))) {
+        setWarning({
+          show: true,
+          type: 'verified',
+          message: `You are connected to the official PropChain platform (${domain}).`,
+          riskScore: 0,
+        });
       }
     };
 
@@ -57,61 +69,61 @@ export const DomainWarningBanner = () => {
   if (!warning.show || isDismissed) return null;
 
   const isPhishing = warning.type === 'phishing';
+  const isVerified = warning.type === 'verified';
 
   return (
     <div className={cn(
       "fixed top-0 left-0 right-0 z-[100] p-4 animate-in fade-in slide-in-from-top-4 duration-500",
-      isPhishing ? "bg-red-600/10 backdrop-blur-md" : "bg-yellow-600/10 backdrop-blur-md"
+      isPhishing ? "bg-red-600/10 backdrop-blur-md" : isVerified ? "bg-green-600/10 backdrop-blur-md" : "bg-yellow-600/10 backdrop-blur-md"
     )}>
       <div className="max-w-5xl mx-auto">
         <Alert variant={isPhishing ? "destructive" : "default"} className={cn(
           "border-2 shadow-2xl",
-          isPhishing ? "border-red-500 bg-red-50 dark:bg-red-950/50" : "border-yellow-500 bg-yellow-50 dark:bg-yellow-950/50"
+          isPhishing ? "border-red-500 bg-red-50 dark:bg-red-950/50" : isVerified ? "border-green-500 bg-green-50 dark:bg-green-950/50" : "border-yellow-500 bg-yellow-50 dark:bg-yellow-950/50"
         )}>
           {isPhishing ? (
             <ShieldAlert className="h-5 w-5 text-red-600 dark:text-red-400" />
+          ) : isVerified ? (
+            <ShieldCheck className="h-5 w-5 text-green-600 dark:text-green-400" />
           ) : (
             <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
           )}
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pr-8">
             <div>
               <AlertTitle className={cn(
                 "text-lg font-bold",
-                isPhishing ? "text-red-800 dark:text-red-200" : "text-yellow-800 dark:text-yellow-200"
+                isPhishing ? "text-red-800 dark:text-red-200" : isVerified ? "text-green-800 dark:text-green-200" : "text-yellow-800 dark:text-yellow-200"
               )}>
-                {isPhishing ? "Security Alert: Phishing Detected" : "Security Warning: Unofficial Domain"}
+                {isPhishing ? "Security Alert: Phishing Detected" : isVerified ? "Verified Domain" : "Security Warning: Unofficial Domain"}
               </AlertTitle>
               <AlertDescription className={cn(
                 "mt-1 font-medium",
-                isPhishing ? "text-red-700 dark:text-red-300" : "text-yellow-700 dark:text-yellow-300"
+                isPhishing ? "text-red-700 dark:text-red-300" : isVerified ? "text-green-700 dark:text-green-300" : "text-yellow-700 dark:text-yellow-300"
               )}>
                 {warning.message}
               </AlertDescription>
             </div>
             <div className="flex items-center gap-3">
+              {isPhishing && (
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  onClick={() => window.location.href = 'https://propchain.io'}
+                  className="font-bold transition-all hover:scale-105 border-red-600 text-red-600 hover:bg-red-600 hover:text-white"
+                >
+                  Go to Official Site
+                </Button>
+              )}
               <Button 
-                variant="outline" 
+                variant="ghost" 
                 size="sm"
-                onClick={() => window.location.href = 'https://propchain.io'}
+                onClick={() => setIsDismissed(true)}
                 className={cn(
-                  "font-bold transition-all hover:scale-105",
-                  isPhishing 
-                    ? "border-red-600 text-red-600 hover:bg-red-600 hover:text-white" 
-                    : "border-yellow-600 text-yellow-600 hover:bg-yellow-600 hover:text-white"
+                  isVerified ? "text-green-800 dark:text-green-200 hover:bg-green-200/50 dark:hover:bg-green-800/50" : "text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200/50 dark:hover:bg-yellow-800/50"
                 )}
               >
-                Go to Official Site
+                {isVerified ? "Got it" : "Ignore"}
               </Button>
-              {!isPhishing && (
-                <Button 
-                  variant="ghost" 
-                  size="sm"
-                  onClick={() => setIsDismissed(true)}
-                  className="text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200/50 dark:hover:bg-yellow-800/50"
-                >
-                  Ignore
-                </Button>
-              )}
             </div>
           </div>
           <Button

src/components/__tests__/DomainWarningBanner.test.tsx

@@ -0,0 +1,174 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DomainWarningBanner } from '../DomainWarningBanner';
+
+const mockDetectPhishing = jest.fn();
+const mockReportSuspiciousDomain = jest.fn().mockResolvedValue(true);
+const originalLocation = window.location;
+
+jest.mock('@/utils/security/phishingProtection', () => ({
+  PhishingProtection: {
+    detectPhishing: (...args: unknown[]) => mockDetectPhishing(...args),
+    reportSuspiciousDomain: (...args: unknown[]) => mockReportSuspiciousDomain(...args),
+  },
+}));
+
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: { ...originalLocation },
+    writable: true,
+  });
+});
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+    writable: true,
+  });
+});
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('DomainWarningBanner', () => {
+  it('shows verified badge on official domain', () => {
+    window.location.hostname = 'propchain.io';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: false,
+      riskScore: 0,
+      threats: [],
+      warnings: [],
+    });
+
+    render(<DomainWarningBanner />);
+
+    expect(screen.getByText('Verified Domain')).toBeInTheDocument();
+    expect(screen.getByText(/connected to the official/)).toBeInTheDocument();
+  });
+
+  it('shows verified badge on subdomain of official domain', () => {
+    window.location.hostname = 'app.propchain.io';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: false,
+      riskScore: 0,
+      threats: [],
+      warnings: [],
+    });
+
+    render(<DomainWarningBanner />);
+
+    expect(screen.getByText('Verified Domain')).toBeInTheDocument();
+  });
+
+  it('shows warning on unofficial domain', () => {
+    window.location.hostname = 'suspicious-site.com';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: false,
+      riskScore: 20,
+      threats: [],
+      warnings: ['Unofficial domain detected'],
+    });
+
+    render(<DomainWarningBanner />);
+
+    expect(screen.getByText('Security Warning: Unofficial Domain')).toBeInTheDocument();
+    expect(screen.getByText(/unofficial domain/)).toBeInTheDocument();
+    expect(mockReportSuspiciousDomain).toHaveBeenCalledWith('suspicious-site.com', 'Unofficial domain');
+  });
+
+  it('shows phishing alert for phishing domains', () => {
+    window.location.hostname = 'phishing-site.com';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: true,
+      riskScore: 90,
+      threats: ['Known phishing domain detected'],
+      warnings: [],
+    });
+
+    render(<DomainWarningBanner />);
+
+    expect(screen.getByText('Security Alert: Phishing Detected')).toBeInTheDocument();
+    expect(screen.getByText(/phishing site/)).toBeInTheDocument();
+    expect(mockReportSuspiciousDomain).toHaveBeenCalledWith('phishing-site.com', 'Known phishing domain');
+  });
+
+  it('renders nothing when no warning is triggered', () => {
+    window.location.hostname = 'propchain.io';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: false,
+      riskScore: 0,
+      threats: [],
+      warnings: [],
+    });
+
+    const { container } = render(<DomainWarningBanner />);
+    expect(screen.getByText('Verified Domain')).toBeInTheDocument();
+    expect(container.textContent).toContain('propchain.io');
+  });
+
+  it('can be dismissed via close button', () => {
+    window.location.hostname = 'propchain.io';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: false,
+      riskScore: 0,
+      threats: [],
+      warnings: [],
+    });
+
+    render(<DomainWarningBanner />);
+    expect(screen.getByText('Verified Domain')).toBeInTheDocument();
+
+    const buttons = screen.getAllByRole('button');
+    const closeBtn = buttons.find(b => b.querySelector('svg.lucide-x'));
+    expect(closeBtn).toBeTruthy();
+    fireEvent.click(closeBtn!);
+
+    expect(screen.queryByText('Verified Domain')).not.toBeInTheDocument();
+  });
+
+  it('can be dismissed via dismiss button', () => {
+    window.location.hostname = 'app.propchain.io';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: false,
+      riskScore: 0,
+      threats: [],
+      warnings: [],
+    });
+
+    render(<DomainWarningBanner />);
+    expect(screen.getByText('Verified Domain')).toBeInTheDocument();
+
+    const dismissButton = screen.getByText('Got it');
+    fireEvent.click(dismissButton);
+
+    expect(screen.queryByText('Verified Domain')).not.toBeInTheDocument();
+  });
+
+  it('shows Go to Official Site button only for phishing', () => {
+    window.location.hostname = 'phishing-site.com';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: true,
+      riskScore: 90,
+      threats: ['Known phishing domain detected'],
+      warnings: [],
+    });
+
+    render(<DomainWarningBanner />);
+    expect(screen.getByText('Go to Official Site')).toBeInTheDocument();
+  });
+
+  it('does not show Go to Official Site for verified domains', () => {
+    window.location.hostname = 'propchain.io';
+    mockDetectPhishing.mockReturnValue({
+      isPhishing: false,
+      riskScore: 0,
+      threats: [],
+      warnings: [],
+    });
+
+    render(<DomainWarningBanner />);
+    expect(screen.queryByText('Go to Official Site')).not.toBeInTheDocument();
+  });
+});