Propchain 2

src/app/dashboard/page.tsx

@@ -13,9 +13,13 @@ import { KycStatusBadge } from "@/components/kyc/KycStatusBadge";
 import { useKycStore } from "@/store/kycStore";
 import Link from "next/link";
 import { TransactionSecuritySettings } from "@/components/security/TransactionSecuritySettings";
-import { StakingPanel } from "@/components/dashboard/StakingPanel";
 import { Skeleton } from "@/components/ui/skeleton";
 
+const StakingPanel = dynamic(
+  () => import("@/components/dashboard/StakingPanel").then((m) => m.StakingPanel),
+  { loading: () => <WidgetSkeleton className="h-[400px]" /> }
+);
+
 const PortfolioOverview = dynamic(
   () => import("@/components/dashboard/PortfolioOverview").then((m) => m.PortfolioOverview),
   { loading: () => <WidgetSkeleton className="h-40" /> }

src/app/watchlist/page.tsx

@@ -6,6 +6,7 @@ import { PropertyCard } from '@/components/PropertyCard';
 import { useFavoritesStore } from '@/store/favoritesStore';
 import { WalletConnector } from '@/components/WalletConnector';
 import { Heart, ArrowLeft } from 'lucide-react';
+import { EmptyState } from '@/components/ui/EmptyState';
 
 function WatchlistContent() {
   const { favorites, clearFavorites } = useFavoritesStore();
@@ -60,22 +61,15 @@ function WatchlistContent() {
 
         {/* Content */}
         {favorites.length === 0 ? (
-          /* Empty State */
-          <div className="text-center py-16">
-            <Heart className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
-              Your watchlist is empty
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400 mb-6 max-w-md mx-auto">
-              Start exploring properties and add them to your watchlist to keep track of the ones you're interested in.
-            </p>
-            <Link
-              href="/properties"
-              className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-lg transition-colors"
-            >
-              Browse Properties
-            </Link>
-          </div>
+          <EmptyState
+            title="Your watchlist is empty"
+            description="Start exploring properties and add them to your watchlist to keep track of the ones you're interested in."
+            icon={Heart}
+            action={{
+              label: "Browse Properties",
+              href: "/properties"
+            }}
+          />
         ) : (
           /* Properties Grid */
           <>

src/components/ClientProviders.tsx

@@ -11,6 +11,10 @@ import { LoadingProgressBar } from "@/components/LoadingProgressBar";
 import "@/lib/i18n";
 import dynamic from "next/dynamic";
 
+import { useOnboardingStore } from "@/store/onboardingStore";
+import { DomainWarningBanner } from "@/components/DomainWarningBanner";
+import { useEffect } from "react";
+
 interface ClientProvidersProps {
   children: React.ReactNode;
 }
@@ -35,31 +39,41 @@ const MobileBottomNavigation = dynamic(
   () => import("@/components/MobileBottomNavigation").then((m) => m.MobileBottomNavigation),
   { ssr: false }
 );
+const OnboardingTour = dynamic(
+  () => import("@/components/OnboardingTour").then((m) => m.OnboardingTour),
+  { ssr: false }
+);
 
 export function ClientProviders({ children }: ClientProvidersProps) {
+  const { startOnboarding, hasCompletedOnboarding } = useOnboardingStore();
+
+  useEffect(() => {
+    // Automatically start onboarding for new users after a short delay
+    const timer = setTimeout(() => {
+      if (!hasCompletedOnboarding) {
+        startOnboarding();
+      }
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [hasCompletedOnboarding, startOnboarding]);
+
   return (
     <WagmiProvider config={config}>
-      <ChainAwareProvider>
-        <LoadingProgressBar />
-        <PerformanceMonitor />
-        {children}
-        <TransactionMonitor />
-        <NotificationSystem />
-        <Toaster />
-        <FloatingComparisonBar />
-        <MobileBottomNavigation />
-      </ChainAwareProvider>
       <QueryProvider>
         <ChainAwareProvider>
           <LoadingProgressBar />
           <PerformanceMonitor />
           <ServiceWorkerRegistration />
           <OfflineIndicator />
+          <DomainWarningBanner />
           {children}
           <TransactionMonitor />
           <NotificationSystem />
           <Toaster />
+          <FloatingComparisonBar />
           <MobileBottomNavigation />
+          <OnboardingTour />
         </ChainAwareProvider>
       </QueryProvider>
     </WagmiProvider>

src/components/DomainWarningBanner.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import { AlertTriangle, ShieldAlert, 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';
+
+export const DomainWarningBanner = () => {
+  const [warning, setWarning] = useState<{
+    show: boolean;
+    type: 'phishing' | 'unofficial';
+    message: string;
+    riskScore: number;
+  }>({
+    show: false,
+    type: 'unofficial',
+    message: '',
+    riskScore: 0,
+  });
+
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  useEffect(() => {
+    const checkDomain = async () => {
+      if (typeof window === 'undefined') return;
+
+      const url = window.location.href;
+      const domain = window.location.hostname;
+      const result = PhishingProtection.detectPhishing(url);
+
+      if (result.isPhishing) {
+        setWarning({
+          show: true,
+          type: 'phishing',
+          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({
+          show: true,
+          type: 'unofficial',
+          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');
+      }
+    };
+
+    checkDomain();
+  }, []);
+
+  if (!warning.show || isDismissed) return null;
+
+  const isPhishing = warning.type === 'phishing';
+
+  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"
+    )}>
+      <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 ? (
+            <ShieldAlert className="h-5 w-5 text-red-600 dark:text-red-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 ? "Security Alert: Phishing Detected" : "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"
+              )}>
+                {warning.message}
+              </AlertDescription>
+            </div>
+            <div className="flex items-center gap-3">
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={() => window.location.href = 'https://propchain.io'}
+                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"
+                )}
+              >
+                Go to Official Site
+              </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
+            variant="ghost"
+            size="icon"
+            className="absolute right-2 top-2 h-8 w-8 opacity-70 hover:opacity-100"
+            onClick={() => setIsDismissed(true)}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </Alert>
+      </div>
+    </div>
+  );
+};

src/components/MobileBottomNavigation.tsx

@@ -73,6 +73,7 @@ export const MobileBottomNavigation: React.FC = () => {
               <Link
                 key={item.id}
                 href={item.href}
+                data-tour={item.id === 'portfolio' ? 'portfolio-link' : undefined}
                 className={cn(
                   'flex flex-col items-center justify-center py-2 px-3 rounded-lg transition-all duration-200 min-w-0 flex-1',
                   isActive

src/components/MultiChainPortfolio.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { RefreshCw, TrendingUp, AlertTriangle, ExternalLink, Filter } from 'lucide-react';
+import { RefreshCw, TrendingUp, AlertTriangle, ExternalLink, Filter, Wallet, Briefcase } from 'lucide-react';
 import { usePortfolioStore } from '@/store/portfolioStore';
 import { useWalletStore } from '@/store/walletStore';
 import { CHAIN_CONFIG, type ChainId } from '@/config/chains';
 import { formatPrice } from '@/utils/searchUtils';
 import type { ChainPortfolio, BridgeSuggestion } from '@/types/portfolio';
+import { EmptyState } from '@/components/ui/EmptyState';
 
 export const MultiChainPortfolio: React.FC = () => {
   const { 
@@ -45,12 +46,19 @@ export const MultiChainPortfolio: React.FC = () => {
 
   if (!isConnected) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
-        <div className="text-gray-500 dark:text-gray-400 mb-4">
-          <AlertTriangle className="w-12 h-12 mx-auto mb-4" />
-          <p>Connect your wallet to view your portfolio</p>
-        </div>
-      </div>
+      <EmptyState
+        title="Connect Wallet"
+        description="Please connect your wallet to view your multi-chain portfolio holdings."
+        icon={Wallet}
+        action={{
+          label: "Connect Wallet",
+          onClick: () => {
+            // This would typically trigger the wallet connection modal
+            // but for now we just show the requirement
+          }
+        }}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg"
+      />
     );
   }
 
@@ -65,18 +73,33 @@ export const MultiChainPortfolio: React.FC = () => {
 
   if (error || !portfolio) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
-        <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-4" />
-        <p className="text-red-600 dark:text-red-400 mb-4">
-          {error || 'Failed to load portfolio'}
-        </p>
-        <button
-          onClick={handleRefresh}
-          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-        >
-          Try Again
-        </button>
-      </div>
+      <EmptyState
+        title="Failed to load portfolio"
+        description={error || "Something went wrong while fetching your portfolio data."}
+        icon={AlertTriangle}
+        action={{
+          label: "Try Again",
+          onClick: handleRefresh
+        }}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg"
+      />
+    );
+  }
+
+  const totalHoldings = portfolio.chains.reduce((sum, chain) => sum + chain.holdings.length, 0);
+
+  if (totalHoldings === 0) {
+    return (
+      <EmptyState
+        title="No investments found"
+        description="You don't have any property investments yet. Start browsing properties to build your portfolio."
+        icon={Briefcase}
+        action={{
+          label: "Browse Properties",
+          href: "/properties"
+        }}
+        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg"
+      />
     );
   }