feat(web): extra statistic on homepage

web/src/components/ExtraStatsDisplay.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+
+import { StyledSkeleton } from "components/StyledSkeleton";
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 24px;
+`;
+
+const SVGContainer = styled.div`
+  display: flex;
+  height: 14px;
+  width: 14px;
+  align-items: center;
+  justify-content: center;
+  svg {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+const StyledP = styled.p`
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+`;
+
+export interface IExtraStatsDisplay {
+  title: string;
+  text: string;
+  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+
+const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, text, icon: Icon, ...props }) => {
+  return (
+    <Container {...props}>
+      <SVGContainer>{<Icon />}</SVGContainer>
+      <TextContainer>
+        <label>{title}:</label>
+        <StyledP>{text !== null ? text : <StyledSkeleton />}</StyledP>
+      </TextContainer>
+    </Container>
+  );
+};
+
+export default ExtraStatsDisplay;

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/useHomePageBlockQuery.ts

@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+
+import { graphql } from "src/graphql";
+import { HomePageBlockQuery } from "src/graphql/graphql";
+export type { HomePageBlockQuery };
+
+const homePageBlockQuery = graphql(`
+  query HomePageBlock($blockNumber: Int) {
+    courts(orderBy: id, orderDirection: asc, block: { number: $blockNumber }) {
+      id
+      name
+      numberDisputes
+      feeForJuror
+      stake
+    }
+  }
+`);
+
+export const useHomePageBlockQuery = (blockNumber: number) => {
+  const isEnabled = blockNumber != null;
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery({
+    queryKey: [`homePageBlockQuery${blockNumber}`],
+    enabled: isEnabled,
+    queryFn: async () => {
+      const data = await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: homePageBlockQuery,
+        variables: { blockNumber },
+      });
+      return data;
+    },
+  });
+};

web/src/hooks/queries/useHomePageExtraStats.ts

@@ -0,0 +1,70 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+
+import { HomePageBlockQuery } from "src/graphql/graphql";
+import { isUndefined } from "src/utils";
+
+import { useHomePageContext } from "../useHomePageContext";
+
+import { useHomePageBlockQuery } from "./useHomePageBlockQuery";
+import { useBlockNumber } from "wagmi";
+import { averageBlockTimeInSeconds } from "consts/averageBlockTimeInSeconds";
+
+type Court = HomePageBlockQuery["courts"][number];
+
+const getCourtWithMaxDifference = (lastWeekCourts: Court[], currentCourts: Court[]): Court => {
+  const diffs = lastWeekCourts.map((court, idx) => {
+    return Number(currentCourts[idx].numberDisputes) - Number(court.numberDisputes);
+  });
+
+  const maxDiffCourtId = diffs.reduce((a, b) => (a > b ? a : b));
+
+  return lastWeekCourts[diffs.indexOf(maxDiffCourtId)];
+};
+
+const getCourtWithMaxDrawingChance = (currentCourts: Court[]): Court => {
+  return currentCourts.reduce((a, b) => (Number(a.stake) > Number(b.feeForJuror) ? b : a));
+};
+
+const getCourtWithMaxRewardChance = (currentCourts: Court[]): Court => {
+  return currentCourts.reduce((a, b) => (Number(a.feeForJuror) > Number(b.feeForJuror) ? a : b));
+};
+
+export interface HomePageExtraStatsType {
+  MostActiveCourt: string | null;
+  HighestDrawingChance: string | null;
+  HighestRewardChance: string | null;
+}
+
+export const useHomePageExtraStats = (): HomePageExtraStatsType => {
+  const { data } = useHomePageContext();
+  const [oneWeekAgoBlockNumber, setOneWeekAgoBlockNumber] = useState<number>();
+  const currentBlockNumber = useBlockNumber({ chainId: DEFAULT_CHAIN });
+
+  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 MostActiveCourt = useMemo(() => {
+    if (isUndefined(relData) || isUndefined(data)) {
+      return null;
+    }
+    return getCourtWithMaxDifference(relData.courts, data.courts).name ?? null;
+  }, [relData, data]);
+
+  const HighestDrawingChance = useMemo(() => {
+    return data ? getCourtWithMaxDrawingChance(data.courts).name ?? null : null;
+  }, [data]);
+
+  const HighestRewardChance = useMemo(() => {
+    return data ? getCourtWithMaxRewardChance(data.courts).name ?? null : null;
+  }, [data]);
+
+  return { MostActiveCourt, HighestDrawingChance, HighestRewardChance };
+};

web/src/hooks/queries/useHomePageQuery.ts

@@ -19,9 +19,12 @@ const homePageQuery = graphql(`
       activeJurors
       cases
     }
-    courts {
+    courts(orderBy: id, orderDirection: asc) {
+      id
       name
       numberDisputes
+      feeForJuror
+      stake
     }
   }
 `);

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

@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+import LawBalance from "svgs/icons/law-balance.svg";
+import LongArrowUp from "svgs/icons/long-arrow-up.svg";
+
+import { useHomePageExtraStats, HomePageExtraStatsType } from "hooks/queries/useHomePageExtraStats";
+
+import ExtraStatsDisplay from "components/ExtraStatsDisplay";
+
+const StyledCard = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 32px;
+  justify-content: center;
+`;
+
+interface IStat {
+  title: string;
+  getText: (data: HomePageExtraStatsType) => string | null;
+  icon: React.FC<React.SVGAttributes<SVGElement>>;
+}
+
+const stats: IStat[] = [
+  {
+    title: "Most Cases",
+    getText: (data) => data.MostActiveCourt,
+    icon: LongArrowUp,
+  },
+  {
+    title: "Highest drawing chance",
+    getText: (data) => data.HighestDrawingChance,
+    icon: LongArrowUp,
+  },
+  {
+    title: "Highest rewards chance",
+    getText: (data) => data.HighestRewardChance,
+    icon: LongArrowUp,
+  },
+];
+
+const ExtraStats = () => {
+  const data = useHomePageExtraStats();
+  return (
+    <StyledCard>
+      <ExtraStatsDisplay title="Activity (Last 7 days)" text="" icon={LawBalance} />
+      {stats.map(({ title, getText, icon }, i) => {
+        return <ExtraStatsDisplay key={i} {...{ title, icon }} text={getText(data)} />;
+      })}
+    </StyledCard>
+  );
+};
+
+export default ExtraStats;

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

@@ -11,7 +11,9 @@ import { responsiveSize } from "styles/responsiveSize";
 
 const StyledHeader = styled.div`
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
+  gap: 0 12px;
 `;
 
 const StyledH1 = styled.h1`

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

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import Chart from "./Chart";
+import ExtraStats from "./ExtraStats";
 import Header from "./Header";
 import Stats from "./Stats";
 
@@ -15,6 +16,7 @@ const CourtOverview: React.FC = () => (
     <Header />
     <Chart />
     <Stats />
+    <ExtraStats />
   </Container>
 );
 

web/src/utils/date.ts

@@ -20,6 +20,11 @@ export function getOneYearAgoTimestamp(): number {
   return currentTime - 31536000; // One year in seconds
 }
 
+export function getOneWeekAgoTimestamp(): number {
+  const currentTime = new Date().getTime();
+  return currentTime - 604800; // One week in seconds
+}
+
 export function formatDate(unixTimestamp: number, withTime = false): string {
   const date = new Date(unixTimestamp * 1000);
   const options: Intl.DateTimeFormatOptions = withTime