fix(ui): resolve Rewards & Progress panel error

- Fixed early return placement to avoid React hooks order violation
- Added error handling for video playback in RewardsSidebar
- Added null safety checks for account data
- Ensured all hooks are called before any early returns

Author: josegomez-dev

app/home/page.tsx

@@ -797,7 +797,7 @@ const DemoSelector = ({
                     isNexusMasterCompleted ? (
                       /* Nexus Master Completed */
                       <div className='flex flex-col items-center justify-center h-full'>
-                        <div className='text-4xl mb-4 animate-pulse'>👑</div>
+                        <div className='text-4xl mt-4 mb-4 animate-pulse'>🧑‍🚀 </div>
                         <div className='text-xl font-bold text-green-400 mb-2'>NEXUS MASTER</div>
                         <div className='text-sm text-green-300/80'>Achievement Unlocked!</div>
                       </div>
@@ -1263,7 +1263,7 @@ export default function HomePageContent() {
               "Stellar Network Integration",
               "Web3 Wallet Connection"
             ],
-            "screenshot": "https://stellar-nexus-experience.vercel.app/images/logo/logo.png",
+            "screenshot": "https://stellar-nexus-experience.vercel.app/images/logo/logoicon.png",
             "softwareVersion": "0.1.0",
             "datePublished": "2024-01-01",
             "dateModified": new Date().toISOString().split('T')[0],
@@ -1598,17 +1598,12 @@ export default function HomePageContent() {
               </div>
             </section>
 
-
-            <div className='text-center mb-12'>
-              <h3 className='text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-accent-400 mb-6 drop-shadow-2xl'>
-              🧩 ESCROW ARSENAL
-              </h3>
-            </div>
             {/* Demo Cards Section - with fade-in animation */}
             <div className='text-center'>
               <p className=' text-white/80 max-w-3xl mx-auto mb-6'>
-              The <span className='text-brand-200 font-semibold'>Stellar Nexus Experience</span> turns early adoption into an adventure—earn XP, unlock badges, and co-create the future of Web3 alongside the first wave of <span className='text-brand-200 font-semibold'>Founders, Builders, and Developers</span>.
+              The <span className='text-brand-200 font-semibold'>Escrow Arsenal</span> turns early adoption into an adventure—earn XP, unlock badges, and co-create the future of Web3 alongside the first wave of <span className='text-brand-200 font-semibold'>Founders, Builders, and Developers</span>.
               </p>
+              <br />
             </div>
 
 
@@ -1796,26 +1791,24 @@ export default function HomePageContent() {
                     New to Trustless Work or Stellar? <br /> Start with our tutorial to learn how everything
                     works!
                   </p>
+                  <div className='mt-4 text-center'>
+                    <p className='text-brand-300 text-sm animate-pulse'>
+                      💡 New here? Start with the tutorial to learn how everything works!
+                    </p>
+                  </div>
                 </div>
 
                 <div className='mb-8 flex justify-center'>
                   <button
                     onClick={() => setShowInteractiveTutorial(true)}
                     className='px-8 py-4 bg-gradient-to-r from-accent-500 to-accent-600 hover:from-accent-600 hover:to-accent-700 text-white font-bold rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl border-2 border-white/20 hover:border-white/40'
                   >
-                    <div className='flex items-center space-x-2'>                  
+                    <div className='flex items-center space-x-2'>
                       <span>📚</span>
                       <span>Interactive Tutorial</span>
                     </div>
                   </button>
                 </div>
-                  {!hasSeenOnboarding && (
-                    <div className='mt-4 text-center'>
-                      <p className='text-brand-300 text-sm animate-pulse'>
-                        💡 New here? Start with the tutorial to learn how everything works!
-                      </p>
-                    </div>
-                  )}
 
                 <div className='grid md:grid-cols-3 gap-8 text-sm'>
                   <div className='group p-6 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 hover:bg-white/15 hover:border-white/30 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl relative overflow-hidden'>
@@ -1885,8 +1878,11 @@ export default function HomePageContent() {
       {/* Leaderboard Button - Centered between Tutorial and Footer */}
       <div className='text-center mb-12'>
         <h3 className='text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-accent-400 mb-6 drop-shadow-2xl'>
-          🏆 Nexus Global Leaderboard
+        Global Leaderboard
         </h3>
+        <p className='text-white/70'>
+          See the top performers and compete for the Nexus Global Leaderboard!
+        </p>
       </div>
 
       <div className='flex justify-center items-center px-4'>
@@ -1901,7 +1897,7 @@ export default function HomePageContent() {
               onClick={() => setLeaderboardSidebarOpen(true)}
               className='relative px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl border-2 border-white/20 hover:border-white/40 flex items-center space-x-3 hover:animate-none'
             >
-              <span className='text-xl'>👥&nbsp;</span>
+              <span className='text-xl'>🏆 &nbsp;</span>
               <span>See the top performers</span>
               <span className='text-xl'>&nbsp;→</span>
             </button>

app/layout.tsx

@@ -46,7 +46,7 @@ export const metadata: Metadata = {
     siteName: 'Stellar Nexus Experience',
     images: [
       {
-        url: '/images/logo/logo.png',
+        url: '/images/logo/logoicon.png',
         width: 1200,
         height: 630,
         alt: 'Stellar Nexus Experience - Web3 Early Adopters Program',
@@ -59,7 +59,7 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     title: 'Stellar Nexus Experience | Web3 Early Adopters Program',
     description: 'Join the Stellar Nexus Experience Web3 Early Adopters Program. Master trustless work on Stellar blockchain with interactive demos, earn badges, and compete on the global leaderboard.',
-    images: ['/images/logo/logo.png'],
+    images: ['/images/logo/logoicon.png'],
     creator: '@StellarNexus',
   },
   robots: {

components/ui/RewardsSidebar.tsx

@@ -41,6 +41,7 @@ export const RewardsSidebar: React.FC<RewardsDropdownProps> = ({ isOpen, onClose
     };
   }, [isOpen, onClose]);
 
+
   // Helper functions for badge styling using centralized assets
   const getRarityColor = (rarity: string) => {
     const colors = BADGE_COLORS[rarity as keyof typeof BADGE_COLORS] || BADGE_COLORS.common;
@@ -55,9 +56,7 @@ export const RewardsSidebar: React.FC<RewardsDropdownProps> = ({ isOpen, onClose
   const AVAILABLE_BADGES = badges.length > 0 ? badges : getAllBadges();
 
   // Only show when account exists - consistent with UserProfile
-  if (!account || !isOpen) {
-    return null;
-  }
+  // Note: Early return moved to after all hooks to avoid React hooks order violation
 
   // Ensure we have safe defaults for all data
   const safeAccount = {
@@ -147,6 +146,28 @@ export const RewardsSidebar: React.FC<RewardsDropdownProps> = ({ isOpen, onClose
   const availablePhases = getAvailableCharacterPhases();
   const currentPhase = availablePhases[selectedCharacterPhase] || availablePhases[0];
 
+  // Auto-select character phase based on level
+  useEffect(() => {
+    // Find the highest available phase based on current level
+    const phases = [
+      { id: 0, name: 'Baby', video: '/videos/phases/baby.mp4', image: '/images/character/baby.png', minLevel: 1 },
+      { id: 1, name: 'Teen', video: '/videos/phases/teen.mp4', image: '/images/character/teen.png', minLevel: 2 },
+      { id: 2, name: 'Adult', video: '/videos/phases/adullt.mp4', image: '/images/character/character.png', minLevel: 3 }
+    ];
+    
+    // Find the highest phase the user has unlocked
+    const unlockedPhases = phases.filter(phase => level >= phase.minLevel);
+    const highestUnlockedPhase = unlockedPhases[unlockedPhases.length - 1];
+    
+    if (highestUnlockedPhase) {
+      // Set the selected phase to the highest unlocked phase
+      const phaseIndex = phases.findIndex(phase => phase.id === highestUnlockedPhase.id);
+      if (phaseIndex !== -1) {
+        setSelectedCharacterPhase(phaseIndex);
+      }
+    }
+  }, [level]);
+
   const handlePreviousPhase = () => {
     setSelectedCharacterPhase(prev => 
       prev > 0 ? prev - 1 : availablePhases.length - 1
@@ -214,17 +235,24 @@ export const RewardsSidebar: React.FC<RewardsDropdownProps> = ({ isOpen, onClose
                     animation: '4s ease-in-out infinite alternate',
                   }}
                   onEnded={(e) => {
-                    const video = e.target as HTMLVideoElement;
-                    // Start reverse playback
-                    const reverseInterval = setInterval(() => {
-                      if (video.currentTime <= 0) {
-                        clearInterval(reverseInterval);
-                        video.currentTime = 0;
-                        video.play(); // Start forward playback again
-                      } else {
-                        video.currentTime -= 0.1; // Reverse playback
-                      }
-                    }, 100);
+                    try {
+                      const video = e.target as HTMLVideoElement;
+                      // Start reverse playback
+                      const reverseInterval = setInterval(() => {
+                        if (video.currentTime <= 0) {
+                          clearInterval(reverseInterval);
+                          video.currentTime = 0;
+                          video.play(); // Start forward playback again
+                        } else {
+                          video.currentTime -= 0.1; // Reverse playback
+                        }
+                      }, 100);
+                    } catch (error) {
+                      console.warn('Error in video playback:', error);
+                    }
+                  }}
+                  onError={(e) => {
+                    console.warn('Video failed to load:', currentPhase.video);
                   }}
                 >
                   <source src={currentPhase.video} type='video/mp4' />
@@ -323,7 +351,7 @@ export const RewardsSidebar: React.FC<RewardsDropdownProps> = ({ isOpen, onClose
       {/* Points Summary */}
       <div className='grid grid-cols-3 gap-3'>
         <div className='bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg p-3 border border-green-400/30'>
-          <div className='text-xl font-bold text-green-400'>{account.totalPoints || 0}</div>
+          <div className='text-xl font-bold text-green-400'>{account?.totalPoints || 0}</div>
           <div className='text-xs text-gray-300'>Total Points</div>
         </div>
         <div className='bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-lg p-3 border border-yellow-400/30'>
@@ -691,6 +719,9 @@ export const RewardsSidebar: React.FC<RewardsDropdownProps> = ({ isOpen, onClose
     }
   };
 
+  // Early return if not open or no account to prevent unnecessary rendering
+  if (!isOpen || !account) return null;
+
   return (
     <>
       {/* Dropdown Menu */}

components/ui/VideoPreloaderScreen.tsx

@@ -22,6 +22,7 @@ export const VideoPreloaderScreen: React.FC<VideoPreloaderScreenProps> = ({
   const [isVisible, setIsVisible] = useState(isLoading);
   const [isFadingOut, setIsFadingOut] = useState(false);
   const [videoLoaded, setVideoLoaded] = useState(false);
+  const [starPositions, setStarPositions] = useState<Array<{left: string, top: string, delay: string, duration: string}>>([]);
 
   useEffect(() => {
     if (!isLoading && isVisible) {
@@ -40,6 +41,17 @@ export const VideoPreloaderScreen: React.FC<VideoPreloaderScreenProps> = ({
     }
   }, [isLoading, isVisible]);
 
+  // Generate star positions on client side only to avoid hydration mismatch
+  useEffect(() => {
+    const positions = [...Array(20)].map(() => ({
+      left: `${Math.random() * 100}%`,
+      top: `${Math.random() * 100}%`,
+      delay: `${Math.random() * 3}s`,
+      duration: `${2 + Math.random() * 3}s`,
+    }));
+    setStarPositions(positions);
+  }, []);
+
   // Ensure minimum display duration
   useEffect(() => {
     if (isLoading) {
@@ -71,15 +83,15 @@ export const VideoPreloaderScreen: React.FC<VideoPreloaderScreenProps> = ({
 
         {/* Animated Particles Overlay */}
         <div className='absolute inset-0 overflow-hidden pointer-events-none'>
-          {[...Array(20)].map((_, i) => (
+          {starPositions.map((position, i) => (
             <div
               key={i}
               className='absolute w-1 h-1 bg-white rounded-full animate-twinkle'
               style={{
-                left: `${Math.random() * 100}%`,
-                top: `${Math.random() * 100}%`,
-                animationDelay: `${Math.random() * 3}s`,
-                animationDuration: `${2 + Math.random() * 3}s`,
+                left: position.left,
+                top: position.top,
+                animationDelay: position.delay,
+                animationDuration: position.duration,
               }}
             />
           ))}

components/ui/quest/QuestSystem.tsx

@@ -152,8 +152,7 @@ export const QuestSystem: React.FC<QuestSystemProps> = ({ account, onQuestComple
     <div className="space-y-6">
       {/* Header */}
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-white mb-2">🎯 Explore Nexus Quests</h2>
-        <p className="text-white/70">Complete quests to earn XP, points, and special badges!</p>
+        <p className="text-white/70">Complete <span className='text-brand-200 font-semibold'>Nexus Quests</span> to earn XP, points, and special badges!</p>
       </div>
 
       {/* Quest Stats */}

public/manifest.json

@@ -17,21 +17,21 @@
       "type": "image/x-icon"
     },
     {
-      "src": "/images/logo/logo.png",
+      "src": "/images/logo/logoicon.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/images/logo/logo.png",
+      "src": "/images/logo/logoicon.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"
     }
   ],
   "screenshots": [
     {
-      "src": "/images/logo/logo.png",
+      "src": "/images/logo/logoicon.png",
       "sizes": "1280x720",
       "type": "image/png",
       "form_factor": "wide",
@@ -46,7 +46,7 @@
       "url": "/?section=leaderboard",
       "icons": [
         {
-          "src": "/images/logo/logo.png",
+          "src": "/images/logo/logoicon.png",
           "sizes": "96x96"
         }
       ]
@@ -58,7 +58,7 @@
       "url": "/?section=demos",
       "icons": [
         {
-          "src": "/images/logo/logo.png",
+          "src": "/images/logo/logoicon.png",
           "sizes": "96x96"
         }
       ]