fix: slight styling, and most cases fetching optimiz, delete inefficient hook, with help from green

Author: kemuru

web/src/components/ExtraStatsDisplay.tsx

@@ -26,6 +26,7 @@ const TextContainer = styled.div`
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
+  justify-content: center;
 `;
 
 const StyledP = styled.p`

web/src/consts/averageBlockTimeInSeconds.ts

@@ -0,0 +1,3 @@
+import { arbitrum, arbitrumSepolia } from "viem/chains";
+
+export const averageBlockTimeInSeconds = { [arbitrum.id]: 0.26, [arbitrumSepolia.id]: 0.268 };

web/src/hooks/queries/useHomePageExtraStats.ts

@@ -1,15 +1,15 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { DEFAULT_CHAIN } from "consts/chains";
-import { getOneWeekAgoTimestamp } from "utils/date";
 
 import { HomePageBlockQuery } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
-import { useBlockByTimestamp } from "../useBlockByTimestamp";
 import { useHomePageContext } from "../useHomePageContext";
 
 import { useHomePageBlockQuery } from "./useHomePageBlockQuery";
+import { useBlockNumber } from "wagmi";
+import { averageBlockTimeInSeconds } from "consts/averageBlockTimeInSeconds";
 
 type Court = HomePageBlockQuery["courts"][number];
 
@@ -39,12 +39,17 @@ export interface HomePageExtraStatsType {
 
 export const useHomePageExtraStats = (): HomePageExtraStatsType => {
   const { data } = useHomePageContext();
-  const { blockNumber } = useBlockByTimestamp(
-    DEFAULT_CHAIN,
-    useMemo(() => getOneWeekAgoTimestamp(), [])
-  );
+  const [oneWeekAgoBlockNumber, setOneWeekAgoBlockNumber] = useState<number>();
+  const currentBlockNumber = useBlockNumber({ chainId: DEFAULT_CHAIN });
 
-  const { data: relData } = useHomePageBlockQuery(blockNumber!);
+  useEffect(() => {
+    if (currentBlockNumber?.data) {
+      const oneWeekInBlocks = Math.floor((7 * 24 * 3600) / averageBlockTimeInSeconds[DEFAULT_CHAIN]);
+      setOneWeekAgoBlockNumber(Number(currentBlockNumber.data) - oneWeekInBlocks);
+    }
+  }, [DEFAULT_CHAIN, currentBlockNumber]);
+
+  const { data: relData } = useHomePageBlockQuery(oneWeekAgoBlockNumber!);
 
   const HighestDrawingChance = useMemo(() => {
     return data ? getCourtWithMaxChance(data.courts).name ?? null : null;

web/src/hooks/useBlockByTimestamp.tsx

@@ -23,7 +23,7 @@ interface IStat {
 
 const stats: IStat[] = [
   {
-    title: "More Cases",
+    title: "Most Cases",
     getText: (data) => data.MostActiveCourt,
     icon: LongArrowUp,
   },

web/src/pages/Home/CourtOverview/ExtraStats.tsx

@@ -13,6 +13,7 @@ const StyledHeader = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  gap: 0 12px;
 `;
 
 const StyledH1 = styled.h1`