fix: refetching

src/hooks/use-stale-while-loading.ts

@@ -1,30 +1,39 @@
-// @src/hooks/use-stale-while-loading.ts
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { QueryResult, OperationVariables } from '@apollo/client';
+import { useAuth } from '@src/hooks/use-auth.ts';
 
 export function useStaleWhileLoading<T>(
   query: QueryResult<T, OperationVariables>
 ) {
-  const { data, loading, ...rest } = query;
-
-  // 👉  guardamos la última data válida en un STATE
+  const { data, loading, refetch, ...rest } = query;
+  const { session }  = useAuth();
+  const xpBalance = session?.user?.xpBalance ?? 0;
   const [staleData, setStaleData] = useState<T | undefined>(undefined);
+  const prevXpRef = useRef<number>(xpBalance);
 
   useEffect(() => {
     if (data !== undefined && data !== null) {
-      setStaleData(data);           // ✅  dispara re‑render
+      setStaleData(data);
     }
   }, [data]);
 
+  useEffect(() => {
+    if (prevXpRef.current !== xpBalance) {
+      const t = setTimeout(refetch, 3000);
+      prevXpRef.current = xpBalance;
+      return () => clearTimeout(t);
+    }
+  }, [xpBalance, refetch]);
+
   const hasData       = staleData !== undefined;
   const isInitialLoad = loading && !hasData;
   const isRefetch     = loading &&  hasData;
 
   return {
-    data: staleData,      // siempre la última data conocida
+    data: staleData,
     loading,
     isInitialLoad,
     isRefetch,
-    ...rest,              // error, refetch, etc.
+    ...rest,
   };
 }

src/sections/achievements/components/leaderboard-table.tsx

@@ -53,22 +53,26 @@ const LeaderboardTable: FC = () => {
   const { data, isInitialLoad, error } = useStaleWhileLoading(raw);
   const table = useTable({ defaultOrder: 'asc', defaultOrderBy: 'rank', defaultRowsPerPage: 5 });
   const myAddress = session?.user?.address?.toLowerCase() ?? '';
+  const xpBalance = session?.user?.xpBalance ?? 0;
   const users: User[] = data?.getLeaderboard ?? [];
   const denseH = table.dense ? 52 : 72;
 
   const rows = useMemo(
     () =>
-      users.map((u, idx) => ({
-        rank: idx + 1,
-        rankId: u.currentRank,
-        name: u.displayName || `User ${idx + 1}`,
-        address: u.address,
-        xp: u.xpTotal,
-        badge: RANK_ICON[u.currentRank] ?? RANK_ICON['watcher'],
-        color: colorFromAddress(u.address),
-        picture: u.profilePicture,
-      })),
-    [users],
+      users.map((u, idx) => {
+        const isMe = u.address.toLowerCase() === myAddress;
+        return ({
+          rank: idx + 1,
+          rankId: u.currentRank,
+          name: u.displayName || `User ${idx + 1}`,
+          address: u.address,
+          xp: isMe ? xpBalance : u.xpTotal,
+          badge: RANK_ICON[u.currentRank] ?? RANK_ICON['watcher'],
+          color: colorFromAddress(u.address),
+          picture: u.profilePicture,
+        })
+      }),
+    [users, xpBalance],
   );
 
   const sorted = useMemo(

src/sections/achievements/components/user-sidebar-profile.tsx

@@ -25,9 +25,13 @@ export const UserSidebarProfile: FC = () => {
     fetchPolicy: 'network-only',
   });
   const { data: achData } = useStaleWhileLoading(raw);
+  const xpBalance = session?.user?.xpBalance ?? 0;
+
   const currentRank = achData?.getAchievements.currentRank;
   const nextRank = achData?.getAchievements.nextRank;
-  const progress = achData?.getAchievements.progressPct ?? 0;
+  const progress = nextRank
+    ? Math.min(100, (xpBalance / nextRank.minXp) * 100)
+    : 100;
 
   return (
     <>
@@ -83,7 +87,7 @@ export const UserSidebarProfile: FC = () => {
                 {progress.toFixed(0)}%
               </Typography>
               <Typography variant="caption" color="text.secondary">
-                {achData?.getAchievements.xpTotal ?? 0} XP /{' '}
+                {xpBalance.toLocaleString()} XP /{' '}
                 {nextRank ? nextRank.minXp : currentRank.minXp} XP
               </Typography>
             </Box>