Skip to content

Commit 651df92

Browse files
josegomez-devjosegomez-dev
committed
feat(ui): reorganize user dropdown menu and add Quest Master Badge quest
- Move Referral Center button from header to user dropdown menu - Add three new menu options: Rewards & Progress, Referral Center, Global Leaderboard - Add Quest Master Badge quest locked until Social Butterfly, Hashtag Hero, Discord Warrior badges are earned - Update badge count from 9/13 to 9/9 in Rewards sidebar - Clean up header by removing referral button and modal - Integrate existing LeaderboardSidebar component in dropdown
1 parent f85db5b commit 651df92

5 files changed

Lines changed: 77 additions & 30 deletions

File tree

‎components/layout/Header.tsx‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,12 @@ import { Tooltip } from '@/components/ui/Tooltip';
88
import { UserDropdown } from '@/components/ui/navigation/UserDropdown';
99
import { NetworkIndicator } from '@/components/ui/wallet/NetworkIndicator';
1010
import { RewardsSidebar } from '@/components/ui/RewardsSidebar';
11-
import { PokemonReferralCard, ReferralInvitationModal } from '@/components/ui/referral';
1211
import { getAllBadges } from '@/lib/firebase/firebase-types';
1312
import Image from 'next/image';
1413

1514
export const Header = () => {
1615
const [isMenuOpen, setIsMenuOpen] = useState(false);
1716
const [isRewardsOpen, setIsRewardsOpen] = useState(false);
18-
const [isReferralModalOpen, setIsReferralModalOpen] = useState(false);
1917
const { isConnected } = useGlobalWallet();
2018
const { account, isLoading } = useFirebase();
2119

@@ -213,15 +211,6 @@ export const Header = () => {
213211
/>
214212
</div>
215213

216-
{/* Referral Button */}
217-
<Tooltip position='bottom' content='Invite Friends & Share Nexus Card'>
218-
<button
219-
onClick={() => setIsReferralModalOpen(true)}
220-
className='relative p-2 text-white/80 hover:text-white transition-colors'
221-
>
222-
<span className='text-xl'>🎴</span>
223-
</button>
224-
</Tooltip>
225214
</>
226215
) : isLoading ? (
227216
<div className='flex items-center space-x-2 bg-white/10 rounded-lg px-3 py-1'>
@@ -347,12 +336,6 @@ export const Header = () => {
347336
</div>
348337
)}
349338

350-
{/* Referral Invitation Modal */}
351-
<ReferralInvitationModal
352-
isOpen={isReferralModalOpen}
353-
onClose={() => setIsReferralModalOpen(false)}
354-
account={account}
355-
/>
356339
</header>
357340
);
358341
};

‎components/ui/RewardsSidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ export const RewardsSidebar: React.FC<RewardsDropdownProps> = ({ isOpen, onClose
334334
</div>
335335
<div className='bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg p-3 border border-purple-400/30'>
336336
<div className='text-xl font-bold text-purple-400'>
337-
{safeAccount.badgesEarned?.length || 0} / 13
337+
{safeAccount.badgesEarned?.length || 0} / 9
338338
</div>
339339
<div className='text-xs text-gray-300'>Badges Earned</div>
340340
</div>

‎components/ui/navigation/UserDropdown.tsx‎

Lines changed: 56 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { useToast } from '@/contexts/ui/ToastContext';
1212
import { getAllBadges } from '@/lib/firebase/firebase-types';
1313
import { Tooltip } from '@/components/ui/Tooltip';
1414
import { accountService } from '@/lib/firebase/firebase-service';
15+
import { ReferralInvitationModal } from '@/components/ui/referral';
16+
import { LeaderboardSidebar } from '@/components/ui/LeaderboardSidebar';
1517
import Image from 'next/image';
1618

1719
export const UserDropdown = () => {
@@ -26,6 +28,8 @@ export const UserDropdown = () => {
2628
const [tempName, setTempName] = useState('');
2729
const [isSaving, setIsSaving] = useState(false);
2830
const [isDisconnecting, setIsDisconnecting] = useState(false);
31+
const [isReferralModalOpen, setIsReferralModalOpen] = useState(false);
32+
const [isLeaderboardOpen, setIsLeaderboardOpen] = useState(false);
2933
const dropdownRef = useRef<HTMLDivElement>(null);
3034

3135
// Check if user has unlocked mini-games access (earned Nexus Master badge)
@@ -387,17 +391,7 @@ export const UserDropdown = () => {
387391
</div> */}
388392
</div>
389393
</div>
390-
<button
391-
onClick={() => {
392-
// Dispatch custom event to open rewards dropdown
393-
window.dispatchEvent(new CustomEvent('toggleRewardsSidebar'));
394-
setIsOpen(false);
395-
}}
396-
className='w-full flex items-center space-x-3 mt-2 text-brand-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors duration-200 text-sm'
397-
>
398-
<span className='text-lg'>🎮</span>
399-
<span>Check your Progress</span>
400-
</button>
394+
401395
</div>
402396

403397
{/* Network Status */}
@@ -478,6 +472,44 @@ export const UserDropdown = () => {
478472
</a>
479473
</Tooltip>
480474

475+
<hr />
476+
{/* Quick Action Buttons */}
477+
<div className='space-y-2 mt-2'>
478+
<button
479+
onClick={() => {
480+
// Dispatch custom event to open rewards dropdown
481+
window.dispatchEvent(new CustomEvent('toggleRewardsSidebar'));
482+
setIsOpen(false);
483+
}}
484+
className='w-full flex items-center space-x-3 text-brand-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors duration-200 text-sm px-3 py-2'
485+
>
486+
<span className='text-lg'>🎮</span>
487+
<span>Rewards & Progress</span>
488+
</button>
489+
490+
<button
491+
onClick={() => {
492+
setIsLeaderboardOpen(true);
493+
setIsOpen(false);
494+
}}
495+
className='w-full flex items-center space-x-3 text-yellow-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors duration-200 text-sm px-3 py-2'
496+
>
497+
<span className='text-lg'>🏆</span>
498+
<span>Global Leaderboard</span>
499+
</button>
500+
501+
<button
502+
onClick={() => {
503+
setIsReferralModalOpen(true);
504+
setIsOpen(false);
505+
}}
506+
className='w-full flex items-center space-x-3 text-purple-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors duration-200 text-sm px-3 py-2'
507+
>
508+
<span className='text-lg'>🎴</span>
509+
<span>Referral Center</span>
510+
</button>
511+
</div>
512+
481513
<hr />
482514

483515
<button
@@ -503,6 +535,19 @@ export const UserDropdown = () => {
503535
</div>
504536
)}
505537

538+
{/* Referral Invitation Modal */}
539+
<ReferralInvitationModal
540+
isOpen={isReferralModalOpen}
541+
onClose={() => setIsReferralModalOpen(false)}
542+
account={account}
543+
/>
544+
545+
{/* Leaderboard Sidebar */}
546+
<LeaderboardSidebar
547+
isOpen={isLeaderboardOpen}
548+
onClose={() => setIsLeaderboardOpen(false)}
549+
/>
550+
506551
</div>
507552
);
508553
};

‎components/ui/referral/PokemonReferralCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export const PokemonReferralCard: React.FC<PokemonReferralCardProps> = ({
9999
id: 2,
100100
name: 'Expert',
101101
level: 3,
102-
backgroundImage: '/images/character/character.png',
102+
backgroundImage: '/images/games/web3-basics-adventure.png',
103103
avatarImage: '/images/character/character.png',
104104
available: userLevel >= 3,
105105
},

‎lib/firebase/firebase-types.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,25 @@ export const PREDEFINED_QUESTS: Quest[] = [
331331
isRepeatable: false,
332332
unlockRequirements: ['escrow_expert', 'trust_guardian', 'stellar_champion', 'nexus_master'],
333333
},
334+
{
335+
id: 'claim_quest_master_badge',
336+
title: 'Quest Master Badge',
337+
description: 'Claim your Quest Master Badge after completing all social quests',
338+
category: 'community',
339+
type: 'complete',
340+
requirements: {
341+
action: 'Claim the Quest Master Badge',
342+
verification: 'manual',
343+
},
344+
rewards: {
345+
experience: 500,
346+
points: 100,
347+
badgeId: 'quest_master',
348+
},
349+
isActive: true,
350+
isRepeatable: false,
351+
unlockRequirements: ['social_butterfly', 'hashtag_hero', 'discord_warrior'],
352+
},
334353
];
335354

336355
// Helper functions for quests

0 commit comments

Comments
 (0)