Fix guild system bugs and improve accessibility: synchronize guild membership, add keyboard focus styling, fix mock data

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/components/Navbar/Navbar.tsx

@@ -22,6 +22,7 @@ import {
   MainLinksBlock,
   MainLinksWrap,
   NavLink,
+  VaultNavLink,
   WalletContainer,
 } from './styles';
 import TelegramIcon from './TelegramIcon';
@@ -232,17 +233,9 @@ export const Navbar = () => {
               Wallet
             </NavLink>
 
-            <NavLink
-              to="/vault"
-              style={{
-                background: 'linear-gradient(135deg, #FFD700, #FFA500)',
-                color: '#000',
-                fontWeight: 'bold',
-                borderRadius: '8px',
-              }}
-            >
+            <VaultNavLink to="/vault">
               🎰 Vault
-            </NavLink>
+            </VaultNavLink>
 
             <NavLink
               to="/help"

src/components/Navbar/styles.ts

@@ -238,6 +238,34 @@ export const WalletDisconnectButton = styled(Button)`
   text-align: right;
 `;
 
+export const VaultNavLink = styled(RouterNavLink)`
+  text-decoration: none;
+  font-size: 0.7em;
+  padding: 8px 12px;
+  margin: 0px 4px;
+  text-align: center;
+  border-radius: ${BORDER_RADIUS.md};
+  background: linear-gradient(135deg, #FFD700, #FFA500);
+  color: #000;
+  font-weight: bold;
+  transition: all ease-in 0.2s;
+  border: 0;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
+
+  &:hover {
+    background: linear-gradient(135deg, #FFA500, #FFD700);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
+    color: #000;
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+`;
+
 export const Body = styled.div`
   font-family: ${FONTS.main};
   color: ${COLORS.white};

src/components/VaultAccessButton.tsx

@@ -23,6 +23,14 @@ const VaultFab = styled(Fab)(({ theme }) => ({
   '&:active': {
     transform: 'translateY(-2px) scale(1.02)',
   },
+  // Keyboard focus styling for accessibility
+  '&:focus-visible': {
+    outline: '3px solid rgba(255, 215, 0, 0.8)',
+    outlineOffset: '2px',
+    background: 'linear-gradient(135deg, #FFA500, #FFD700)',
+    transform: 'translateY(-2px) scale(1.02)',
+    boxShadow: '0 12px 40px rgba(255, 215, 0, 0.7)',
+  },
   // Pulsing animation to draw attention
   animation: 'vault-pulse 3s ease-in-out infinite',
   '@keyframes vault-pulse': {
@@ -49,6 +57,13 @@ const VaultAccessButton: React.FC = () => {
     navigate('/vault');
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleVaultClick();
+    }
+  };
+
   return (
     <Tooltip 
       title="🎰 Surprise Vault - Lottery rewards for every trade!"
@@ -57,7 +72,10 @@ const VaultAccessButton: React.FC = () => {
     >
       <VaultFab
         onClick={handleVaultClick}
-        aria-label="Access Surprise Vault"
+        onKeyDown={handleKeyDown}
+        aria-label="Access Surprise Vault - Lottery rewards for every trade"
+        tabIndex={0}
+        role="button"
       >
         <CasinoIcon sx={{ fontSize: 28 }} />
       </VaultFab>

src/pages/SurpriseVault/services/VaultService.ts

@@ -3,6 +3,7 @@ import {
   Winner, 
   LeaderboardEntry, 
   Guild, 
+  GuildMember,
   UserVaultData, 
   VaultConfig
 } from '../types';
@@ -30,6 +31,7 @@ class VaultService {
   };
 
   private eventSubscribers: Array<(event: any) => void> = [];
+  private static readonly MAX_SUBSCRIBERS = 50; // Prevent memory leaks
   private updateInterval: NodeJS.Timeout | null = null;
 
   public static getInstance(): VaultService {
@@ -259,12 +261,25 @@ class VaultService {
       const maxMembers = Math.floor(memberCount * 1.5) + 10;
       const totalReferrals = Math.floor(generateStableRandom(seed + '_referrals', 50, 300));
 
+      // Generate realistic member data for demo
+      const members: GuildMember[] = [];
+      for (let j = 0; j < memberCount; j++) {
+        const memberAddress = this.generateStableAddress(`${seed}_member_${j}`);
+        members.push({
+          address: memberAddress,
+          joinDate: new Date(Date.now() - generateStableRandom(`${seed}_member_${j}_join`, 0, 60 * 24 * 60 * 60 * 1000)),
+          referrals: Math.floor(generateStableRandom(`${seed}_member_${j}_refs`, 0, 20)),
+          earnings: Math.floor(generateStableRandom(`${seed}_member_${j}_earnings`, 100, 2000)),
+          role: j === 0 ? 'owner' : (j === 1 && generateStableRandom(`${seed}_member_${j}_admin`) > 0.7 ? 'admin' : 'member'),
+        });
+      }
+      
       guilds.push({
         id: `guild_${i}`,
         name: guildNames[i % guildNames.length],
         description: `${guildNames[i % guildNames.length]} guild focused on maximizing rewards and community growth`,
         creator: this.generateStableAddress(seed + '_creator'),
-        members: [], // Simplified for demo
+        members,
         maxMembers,
         totalReferrals,
         totalEarnings: Math.floor(generateStableRandom(seed + '_earnings', 5000, 50000)),
@@ -382,6 +397,12 @@ class VaultService {
 
   // Real-time event simulation
   subscribeToEvents(callback: (event: any) => void): () => void {
+    // Prevent memory leaks by limiting subscribers
+    if (this.eventSubscribers.length >= VaultService.MAX_SUBSCRIBERS) {
+      console.warn('VaultService: Maximum subscribers reached, removing oldest subscriber');
+      this.eventSubscribers.shift(); // Remove oldest subscriber
+    }
+    
     this.eventSubscribers.push(callback);
 
     // Return unsubscribe function
@@ -434,16 +455,16 @@ class VaultService {
     try {
       // TODO: Replace with actual on-chain guild joining
       const userGuilds = VaultStorage.get('userGuilds', []) as any[];
-      const existingGuild = userGuilds.find(g => g.id === guildId);
+      const existingUserGuild = userGuilds.find(g => g.id === guildId && g.members && g.members.includes(userAddress));
 
-      if (existingGuild && existingGuild.members.includes(userAddress)) {
+      if (existingUserGuild) {
         return {
           success: false,
           message: 'You are already a member of this guild.',
         };
       }
 
-      // Simulate guild capacity check
+      // Get current guild data to check capacity
       const guildData = await this.getGuildById(guildId);
       if (guildData && guildData.members.length >= guildData.maxMembers) {
         return {
@@ -452,6 +473,7 @@ class VaultService {
         };
       }
 
+      // Update user's guild list
       userGuilds.push({
         id: guildId,
         name: guildData?.name || 'Unknown Guild',
@@ -464,6 +486,27 @@ class VaultService {
 
       VaultStorage.set('userGuilds', userGuilds);
 
+      // Update the guild's member list in cache (sync the two data stores)
+      const cacheKey = 'guilds';
+      const cached = VaultStorage.get(cacheKey, null) as { guilds: Guild[]; timestamp: number } | null;
+      if (cached && cached.guilds) {
+        const guildIndex = cached.guilds.findIndex(g => g.id === guildId);
+        if (guildIndex !== -1) {
+          // Add user to guild's member list if not already present
+          const existingMember = cached.guilds[guildIndex].members.find(m => m.address === userAddress);
+          if (!existingMember) {
+            cached.guilds[guildIndex].members.push({
+              address: userAddress,
+              joinDate: new Date(),
+              referrals: 0,
+              earnings: 0,
+              role: 'member',
+            });
+            VaultStorage.set(cacheKey, cached);
+          }
+        }
+      }
+      
       return {
         success: true,
         message: 'Successfully joined the guild!',
@@ -484,13 +527,13 @@ class VaultService {
   // Check if user has joined a specific guild
   isUserInGuild(guildId: string, userAddress: string): boolean {
     const userGuilds = VaultStorage.get('userGuilds', []) as any[];
-    return userGuilds.some(g => g.id === guildId && g.userAddress === userAddress);
+    return userGuilds.some(g => g.id === guildId && g.members && g.members.includes(userAddress));
   }
 
   // Get all guilds user has joined
   getUserGuilds(userAddress: string): any[] {
     const userGuilds = VaultStorage.get('userGuilds', []) as any[];
-    return userGuilds.filter(g => g.userAddress === userAddress);
+    return userGuilds.filter(g => g.members && g.members.includes(userAddress));
   }
 
   // Add cleanup method