chore: fix issues with profile page (#1598)

jumperexchange · Dec 27, 2024 · b581896 · b581896
1 parent f314871
commit b581896
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 12 deletions.
diff --git a/src/components/Leaderboard/Leaderboard.tsx b/src/components/Leaderboard/Leaderboard.tsx
@@ -24,6 +24,7 @@ import { LeaderboardEntrySkeleton } from './LeaderboardEntrySkeleton';
 import { LeaderboardUserEntry } from './LeaderboardUserEntry';
 import IconHeader from '../ProfilePage/Common/IconHeader';
 import useClient from 'src/hooks/useClient';
+import { Box } from '@mui/material';
 
 export const LEADERBOARD_LENGTH = 25;
 
@@ -78,17 +79,17 @@ export const Leaderboard = ({ page: defaultPage }: { page: number }) => {
         <LeaderboardEntryStack direction={'column'}>
           {!leaderboardData?.length
             ? Array.from({ length: LEADERBOARD_LENGTH }).map((_, index) => (
-                <>
+                <Box key={`leaderboard-entry-${index}-fragment`}>
                   <LeaderboardEntrySkeleton
                     key={`leaderboard-entry-${index}-skeleton`}
                     isUserPosition={false}
                   />
                   {index !== LEADERBOARD_LENGTH - 1 && (
                     <LeaderboardEntryDivider
-                      key={`leaderboard-entry-${index}-skeleton-divider`}
+                      key={`leaderboard-entry-divider=${index}-skeleton`}
                     />
                   )}
-                </>
+                </Box>
               ))
             : leaderboardData?.map(
                 (entry: LeaderboardEntryData, index: number) => {
@@ -97,7 +98,7 @@ export const Leaderboard = ({ page: defaultPage }: { page: number }) => {
                     +parseInt(leaderboardUserData?.position);
 
                   return (
-                    <>
+                    <Box key={`leaderboard-entry-${index}-fragment`}>
                       <LeaderboardEntry
                         key={`leaderboard-entry-${index}`}
                         isUserPosition={isUserPosition}
@@ -107,10 +108,10 @@ export const Leaderboard = ({ page: defaultPage }: { page: number }) => {
                       />
                       {index !== leaderboardData.length - 1 && (
                         <LeaderboardEntryDivider
-                          key={`leaderboard-entry-${index}-divider`}
+                          key={`leaderboard-entry-divider-${index}`}
                         />
                       )}
-                    </>
+                    </Box>
                   );
                 },
               )}

diff --git a/src/components/Leaderboard/LeaderboardEntry.tsx b/src/components/Leaderboard/LeaderboardEntry.tsx
@@ -15,6 +15,7 @@ import {
 
 import { useWalletAddressImg } from 'src/hooks/useAddressImg';
 import { obfuscatedAddressFormatter } from 'src/utils/obfuscatedAddressFormatter';
+import useBlockieImg from 'src/hooks/useBlockieImg';
 
 interface LeaderboardEntryProps {
   isUserPosition?: boolean;
@@ -35,7 +36,7 @@ export const LeaderboardEntry = ({
 }: LeaderboardEntryProps) => {
   const { t } = useTranslation();
   const formattedAddress = obfuscatedAddressFormatter(walletAddress);
-  const imgLink = useWalletAddressImg(formattedAddress);
+  const imgLink = useBlockieImg(formattedAddress);
 
   return (
     <LeaderboardEntryWrapper

diff --git a/src/components/Leaderboard/LeaderboardUserEntry.tsx b/src/components/Leaderboard/LeaderboardUserEntry.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import { useAccount } from '@lifi/wallet-management';
 import { useLoyaltyPass } from 'src/hooks/useLoyaltyPass';
 import { useLeaderboardUser } from '../../hooks/useLeaderboard';

diff --git a/src/components/Navbar/WalletButton.tsx b/src/components/Navbar/WalletButton.tsx
@@ -42,7 +42,9 @@ export const WalletButtons = () => {
   const { openWalletMenu } = useWalletMenu();
   const { points, isLoading } = useLoyaltyPass(account?.address);
   const router = useRouter();
-  const imgLink = useWalletAddressImg(account?.address);
+  const imgLink = useWalletAddressImg({
+    userAddress: account?.address,
+  });
   const isDesktop = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
   const pathname = usePathname();
 

diff --git a/src/components/ProfilePage/AddressBox/AddressBox.tsx b/src/components/ProfilePage/AddressBox/AddressBox.tsx
@@ -28,7 +28,9 @@ interface AddressBoxProps {
 export const AddressBox = ({ address }: AddressBoxProps) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const imgLink = useWalletAddressImg(address);
+  const imgLink = useWalletAddressImg({
+    userAddress: address,
+  });
   const { setSnackbarState } = useMenuStore((state) => state);
   const { data: ensName, isSuccess } = useEnsName({
     address: address as Address | undefined,

diff --git a/src/components/ProfilePage/AddressCard/AddressCard.tsx b/src/components/ProfilePage/AddressCard/AddressCard.tsx
@@ -38,7 +38,9 @@ export const AddressCard = ({ address }: AddressBoxProps) => {
     address: address as Address | undefined,
     chainId: mainnet.id,
   });
-  const imgLink = useWalletAddressImg(address);
+  const imgLink = useWalletAddressImg({
+    userAddress: address,
+  });
   const { setSnackbarState } = useMenuStore((state) => state);
   const { openWalletMenu } = useWalletMenu();
 

diff --git a/src/hooks/useAddressImg.ts b/src/hooks/useAddressImg.ts
@@ -7,7 +7,13 @@ import { mainnet } from 'wagmi/chains';
 import { normalize } from 'viem/ens';
 import { DEFAULT_WALLET_ADDRESS } from '@/const/urls';
 
-export const useWalletAddressImg = (userAddress?: string) => {
+interface UseWalletAddressImgProps {
+  userAddress?: string;
+}
+
+export const useWalletAddressImg = ({
+  userAddress,
+}: UseWalletAddressImgProps) => {
   const { imageLink: merkleNFTImg } = useMercleNft({ userAddress });
   const { data: ensImage } = useEnsAvatar({
     chainId: mainnet.id,

diff --git a/src/hooks/useLeaderboard.ts b/src/hooks/useLeaderboard.ts
@@ -58,6 +58,7 @@ export const useLeaderboardList = (
         console.error(err);
       }
     },
+    refetchInterval: 1000 * 60 * 60,
   });
 
   const data = leaderboardListData?.data;
@@ -107,6 +108,7 @@ export const useLeaderboardUser = (
   } = useQuery({
     queryKey: ['leaderboard-user', walletAddress],
     queryFn: getLeaderboardUserQuery,
+    refetchInterval: 1000 * 60 * 60,
   });
 
   const userPage =