feat: enhance UI components and add quest/referral features

- Enhanced RewardsSidebar with improved functionality
- Updated various UI components (badges, cards, spinners, progress bars)
- Added quest and referral components and services
- Updated Firebase service and types
- Added new video assets for phases
- Updated package dependencies

Author: josegomez-dev

app/home/page.tsx

@@ -31,6 +31,7 @@ import Image from 'next/image';
 // Remove unused nexusCodex import
 import { getBadgeById, Account, DemoStats, PREDEFINED_DEMOS } from '@/lib/firebase/firebase-types';
 import { getBadgeIcon, BADGE_SIZES } from '@/utils/constants/badges/assets';
+import { QuestAndReferralSection } from '@/components/ui/quest/QuestAndReferralSection';
 
 // Demo Selection Component
 interface DemoCard {
@@ -1021,7 +1022,7 @@ export default function HomePageContent() {
     }
 
     // Check if user has earned all required badges
-    const requiredBadges = ['escrow_expert', 'trust_guardian', 'stellar_champion', 'nexus_master'];
+    const requiredBadges = ['welcome_explorer', 'escrow_expert', 'trust_guardian', 'stellar_champion', 'nexus_master'];
     const hasAllBadges = requiredBadges.every(badgeId => badgesEarnedArray.includes(badgeId));
 
     return hasAllBadges;
@@ -1514,6 +1515,30 @@ export default function HomePageContent() {
               </div>
             </section>
 
+            {/* Quest and Referral System Section */}
+            <section className="container mx-auto px-4 py-16">
+              <QuestAndReferralSection
+                account={account}
+                onQuestComplete={(questId, rewards) => {
+                  addToastHook({
+                    type: 'success',
+                    title: '🎯 Quest Completed!',
+                    message: `Earned ${rewards.experience} XP and ${rewards.points} points!`,
+                    duration: 5000,
+                  });
+                }}
+                onReferralComplete={(referralData) => {
+                  addToastHook({
+                    type: 'success',
+                    title: '👥 Referral Sent!',
+                    message: `Invitation sent to ${referralData.email}`,
+                    duration: 5000,
+                  });
+                }}
+                refreshAccountData={refreshAccountData}
+              />
+            </section>
+
             {/* Interactive Tutorial Section - Full Width with Irregular Shape */}
             <section
               id='interactive-tutorial'

components/demos/DisputeResolutionDemo.tsx

@@ -63,6 +63,9 @@ export const DisputeResolutionDemo = () => {
 
   // Individual loading states for each milestone
   const [milestoneLoadingStates, setMilestoneLoadingStates] = useState<Record<string, boolean>>({});
+  
+  // Individual loading states for each dispute resolution
+  const [disputeLoadingStates, setDisputeLoadingStates] = useState<Record<string, boolean>>({});
 
   // Confetti animation state
   const [showConfetti, setShowConfetti] = useState(false);
@@ -605,6 +608,8 @@ export const DisputeResolutionDemo = () => {
     if (!contractId) return;
 
     try {
+      // Set loading state for this specific dispute
+      setDisputeLoadingStates(prev => ({ ...prev, [disputeId]: true }));
       const dispute = disputes.find(d => d.id === disputeId);
       if (!dispute) return;
 
@@ -729,6 +734,9 @@ export const DisputeResolutionDemo = () => {
         message: 'Failed to resolve the dispute.',
         duration: 5000,
       });
+    } finally {
+      // Clear loading state for this specific dispute
+      setDisputeLoadingStates(prev => ({ ...prev, [disputeId]: false }));
     }
   }
 
@@ -847,6 +855,7 @@ export const DisputeResolutionDemo = () => {
     // Clear individual dispute input states
     setDisputeReasons({});
     setResolutionReasons({});
+    setDisputeLoadingStates({});
 
     addToast({
       type: 'info',
@@ -1182,24 +1191,24 @@ export const DisputeResolutionDemo = () => {
                             <div className='grid grid-cols-3 gap-2'>
                               <button
                                 onClick={() => handleResolveDispute(dispute.id, 'approve')}
-                                disabled={hooks.resolveDispute.isLoading}
+                                disabled={disputeLoadingStates[dispute.id]}
                                 className='px-3 py-2 bg-green-500/20 hover:bg-green-500/30 border border-green-400/30 rounded-lg text-green-300 hover:text-green-200 transition-colors text-sm'
                               >
-                                {hooks.resolveDispute.isLoading ? '...' : 'Approve'}
+                                {disputeLoadingStates[dispute.id] ? '...' : 'Approve'}
                               </button>
                               <button
                                 onClick={() => handleResolveDispute(dispute.id, 'reject')}
-                                disabled={hooks.resolveDispute.isLoading}
+                                disabled={disputeLoadingStates[dispute.id]}
                                 className='px-3 py-2 bg-red-500/20 hover:bg-red-500/30 border border-red-400/30 rounded-lg text-red-300 hover:text-red-200 transition-colors text-sm'
                               >
-                                {hooks.resolveDispute.isLoading ? '...' : 'Reject'}
+                                {disputeLoadingStates[dispute.id] ? '...' : 'Reject'}
                               </button>
                               <button
                                 onClick={() => handleResolveDispute(dispute.id, 'modify')}
-                                disabled={hooks.resolveDispute.isLoading}
+                                disabled={disputeLoadingStates[dispute.id]}
                                 className='px-3 py-2 bg-yellow-500/20 hover:bg-yellow-500/30 border border-yellow-400/30 rounded-lg text-yellow-300 hover:text-yellow-200 transition-colors text-sm'
                               >
-                                {hooks.resolveDispute.isLoading ? '...' : 'Modify'}
+                                {disputeLoadingStates[dispute.id] ? '...' : 'Modify'}
                               </button>
                             </div>
                           </div>

components/demos/HelloMilestoneDemo.tsx

@@ -132,7 +132,18 @@ export const HelloMilestoneDemo = ({
   };
 
   // Check if demo was already completed
-  const isCompleted = account?.demosCompleted?.includes('hello-milestone') || false;
+  const isCompleted = (() => {
+    if (!account?.demosCompleted) return false;
+    
+    // Handle both array and object formats for demosCompleted
+    if (Array.isArray(account.demosCompleted)) {
+      return account.demosCompleted.includes('hello-milestone');
+    } else if (typeof account.demosCompleted === 'object') {
+      return Object.values(account.demosCompleted).includes('hello-milestone');
+    }
+    
+    return false;
+  })();
 
   // Demo completion tracking is now handled by FirebaseContext
 

components/layout/Header.tsx

@@ -151,7 +151,7 @@ export const Header = () => {
                       </span>
                       <span className='text-xs text-white/70'>Level:</span>
                       <span className='text-sm font-semibold text-blue-400'>
-                        {account?.level || 1}
+                        {account ? Math.floor((account.experience || 0) / 1000) + 1 : 1}
                       </span>
                     </div>