feat(demo-stats): integrate Firebase demo completion tracking

- Replace localStorage demo completion tracking with Firebase integration
- Update HelloMilestoneDemo to call markDemoComplete from useDemoStats hook
- Update demos page to use Firebase demo stats instead of hardcoded values
- Ensure completion counts increase correctly when demo is completed multiple times
- Add proper Firebase demo stats service integration

Author: josegomez-dev

app/demos/page.tsx

@@ -30,7 +30,7 @@ import { AuthModal } from '@/components/ui/AuthModal';
 import { UserProfile } from '@/components/ui/UserProfile';
 import { AccountStatusIndicator } from '@/components/ui/AccountStatusIndicator';
 import Image from 'next/image';
-import { nexusCodex } from '@/lib/newsData';
+import { useDemoStats } from '@/hooks/useDemoStats';
 
 // Demo Selection Component
 interface Demo {
@@ -54,92 +54,27 @@ const DemoSelector = ({
   isConnected: boolean;
 }) => {
   const { getCompletedDemos } = useAccount();
-  // Clap system with localStorage persistence
-  const [demoClaps, setDemoClaps] = useState<Record<string, number>>(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('demoClaps');
-      return saved
-        ? JSON.parse(saved)
-        : {
-            'hello-milestone': 24,
-            'milestone-voting': 18,
-            'dispute-resolution': 12,
-            'micro-marketplace': 31,
-          };
-    }
-    return {
-      'hello-milestone': 24,
-      'milestone-voting': 18,
-      'dispute-resolution': 12,
-      'micro-marketplace': 31,
-    };
-  });
-  const [userClapped, setUserClapped] = useState<Record<string, boolean>>(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('userClapped');
-      return saved
-        ? JSON.parse(saved)
-        : {
-            'hello-milestone': false,
-            'milestone-voting': false,
-            'dispute-resolution': false,
-            'micro-marketplace': false,
-          };
-    }
-    return {
-      'hello-milestone': false,
-      'milestone-voting': false,
-      'dispute-resolution': false,
-      'micro-marketplace': false,
-    };
-  });
-
-  // Simulated completion counts for demos
-  const [demoCompletions, setDemoCompletions] = useState<Record<string, number>>(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('demoCompletions');
-      return saved
-        ? JSON.parse(saved)
-        : {
-            'hello-milestone': 42,
-            'milestone-voting': 28,
-            'dispute-resolution': 19,
-            'micro-marketplace': 35,
-          };
-    }
-    return {
-      'hello-milestone': 42,
-      'milestone-voting': 28,
-      'dispute-resolution': 19,
-      'micro-marketplace': 35,
-    };
-  });
-
-  const handleClap = (demoId: string) => {
-    if (userClapped[demoId]) return; // User already clapped
+  const { demoStats, clapDemo, isLoading: statsLoading } = useDemoStats();
 
-    const newClaps = { ...demoClaps, [demoId]: demoClaps[demoId] + 1 };
-    const newUserClapped = { ...userClapped, [demoId]: true };
-
-    setDemoClaps(newClaps);
-    setUserClapped(newUserClapped);
-
-    // Save to localStorage
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('demoClaps', JSON.stringify(newClaps));
-      localStorage.setItem('userClapped', JSON.stringify(newUserClapped));
-    }
+  const handleClap = async (demoId: string) => {
+    const demoName = demos.find(d => d.id === demoId)?.title || demoId;
+    await clapDemo(demoId, demoName);
   };
 
   const getClapStats = (demoId: string) => {
-    const claps = demoClaps[demoId];
-    const hasClapped = userClapped[demoId];
-    const completions = demoCompletions[demoId];
+    const stats = demoStats[demoId];
+    if (!stats) {
+      return {
+        claps: 0,
+        hasClapped: false,
+        completions: 0,
+      };
+    }
 
     return {
-      claps: claps,
-      hasClapped: hasClapped,
-      completions: completions,
+      claps: stats.totalClaps,
+      hasClapped: stats.hasUserClapped,
+      completions: stats.totalCompletions,
     };
   };
 

components/demos/HelloMilestoneDemo.tsx

@@ -9,6 +9,7 @@ import { useTransactionHistory } from '@/contexts/TransactionContext';
 import ConfettiAnimation from '@/components/ui/ConfettiAnimation';
 import { TypeWriter, ProcessExplanation } from '@/components/ui/TypeWriter';
 import { DemoCompletionHistory } from '@/components/ui/DemoCompletionHistory';
+import { useDemoStats } from '@/hooks/useDemoStats';
 import { useDemoCompletionHistory } from '@/hooks/useDemoCompletionHistory';
 import Image from 'next/image';
 import {
@@ -47,6 +48,7 @@ export const HelloMilestoneDemo = () => {
   const { addToast } = useToast();
   const { addTransaction, updateTransaction } = useTransactionHistory();
   const { addCompletion, getDemoHistory, getTotalPointsEarned, getBestScore, getCompletionCount } = useDemoCompletionHistory();
+  const { markDemoComplete } = useDemoStats();
   const [currentStep, setCurrentStep] = useState(0);
   const [contractId, setContractId] = useState<string>('');
   const [escrowData, setEscrowData] = useState<any>(null);
@@ -548,6 +550,9 @@ export const HelloMilestoneDemo = () => {
 
           // Complete the demo in the account system
           await completeDemo('hello-milestone', score);
+          
+          // Mark demo complete in Firebase stats
+          await markDemoComplete('hello-milestone', 'Baby Steps to Riches', completionTime);
         } catch (error) {
           console.error('Failed to complete demo:', error);
         }

components/ui/WalletSidebar.tsx

@@ -971,50 +971,6 @@ export const WalletSidebar = ({ isOpen, onToggle, showBanner = false }: WalletSi
           </>
         )}
 
-        {/* Navigation Buttons - Matching Main Menu - Always show but with different states */}
-        {!isOpen && (
-          <>
-            {/* Demos Button */}
-            {isConnected ? (
-              <a
-                href='/demos'
-                className='p-3 bg-gradient-to-br from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white rounded-lg shadow-lg transition-all duration-300 transform hover:scale-105 group'
-                title='Demos'
-              >
-                <div className='flex items-center space-x-2'>
-                  <Image
-                    src='/images/icons/demos.png'
-                    alt='Demos'
-                    width={20}
-                    height={20}
-                    className='w-5 h-5 group-hover:animate-bounce'
-                  />
-                  <span className='text-sm font-medium hidden lg:block'>Demos</span>
-                </div>
-              </a>
-            ) : (
-              <div
-                className='p-3 bg-gray-500/30 rounded-lg shadow-lg relative cursor-not-allowed blur-[1px] opacity-70'
-                title='Connect wallet to access Demos'
-              >
-                <div className='flex items-center space-x-2'>
-                  <Image
-                    src='/images/icons/demos.png'
-                    alt='Demos'
-                    width={20}
-                    height={20}
-                    className='w-5 h-5'
-                  />
-                  <span className='text-sm font-medium hidden lg:block text-gray-400'>Demos</span>
-                  <div className='absolute top-1 right-1'>
-                    <span className='text-xs bg-red-500 text-white px-1.5 py-0.5 rounded-full'>🔒</span>
-                  </div>
-                </div>
-              </div>
-            )}
-
-          </>
-        )}
       </div>
 
       {/* Wallet Connection Banner */}