Merge pull request #757 from hats-finance/feat/virtualized-list-vaults

fix: removed sorting by leaderboard position on opted in users (this fixes perfomance issue)

packages/web/src/components/VaultCard/OptedInList.tsx

@@ -2,8 +2,7 @@ import { HackerProfileImage } from "components/HackerProfile";
 import { WithTooltip } from "components/WithTooltip/WithTooltip";
 import { useAuditFrameGame } from "hooks/auditFrameGame";
 import { RoutePaths } from "navigation";
-import { useAllProfiles, useCachedProfile } from "pages/HackerProfile/useCachedProfile";
-import { useAllTimeLeaderboard } from "pages/Leaderboard/LeaderboardPage/components/AllTimeLeaderboard/useAllTimeLeaderboard";
+import { useCachedProfile } from "pages/HackerProfile/useCachedProfile";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { StyledOptedInList } from "./styles";
@@ -20,21 +19,22 @@ export const OptedInList = ({ editSessionIdOrAddress }: IOptedInListProps) => {
   const {
     optedInList: { data },
   } = useAuditFrameGame(editSessionIdOrAddress);
-  const { data: profiles } = useAllProfiles();
-  const { leaderboard } = useAllTimeLeaderboard();
-  const leaderboardWithUsernames = leaderboard?.map((entry) => {
-    const profile = profiles?.find((profile) => profile.addresses.includes(entry.address.toLowerCase()));
-    return {
-      ...entry,
-      username: profile?.username,
-    };
-  });
+  // TODO: Cache the leaderboard in order to avoid performance issues
+  // const { data: profiles } = useAllProfiles();
+  // const { leaderboard } = useAllTimeLeaderboard();
+  // const leaderboardWithUsernames = leaderboard?.map((entry) => {
+  //   const profile = profiles?.find((profile) => profile.addresses.includes(entry.address.toLowerCase()));
+  //   return {
+  //     ...entry,
+  //     username: profile?.username,
+  //   };
+  // });
 
-  (data as string[])?.sort((a, b) => {
-    const aIndex = leaderboardWithUsernames?.findIndex((entry) => entry.username?.toLowerCase() === a.toLowerCase());
-    const bIndex = leaderboardWithUsernames?.findIndex((entry) => entry.username?.toLowerCase() === b.toLowerCase());
-    return (aIndex === -1 ? 10000000 : aIndex) - (bIndex === -1 ? 10000000 : bIndex);
-  });
+  // (data as string[])?.sort((a, b) => {
+  //   const aIndex = leaderboardWithUsernames?.findIndex((entry) => entry.username?.toLowerCase() === a.toLowerCase());
+  //   const bIndex = leaderboardWithUsernames?.findIndex((entry) => entry.username?.toLowerCase() === b.toLowerCase());
+  //   return (aIndex === -1 ? 10000000 : aIndex) - (bIndex === -1 ? 10000000 : bIndex);
+  // });
 
   if (!editSessionIdOrAddress) return <></>;