feat(web): extra statistic on homepage

subgraph/core/schema.graphql

@@ -142,9 +142,11 @@ type Court @entity {
   numberClosedDisputes: BigInt!
   numberVotingDisputes: BigInt!
   numberAppealingDisputes: BigInt!
+  numberVotes: BigInt!
   stakedJurors: [JurorTokensPerCourt!]! @derivedFrom(field: "court")
   numberStakedJurors: BigInt!
   stake: BigInt!
+  effectiveStake: BigInt!
   delayedStake: BigInt!
   paidETH: BigInt!
   paidPNK: BigInt!

subgraph/core/src/KlerosCore.ts

@@ -75,9 +75,12 @@ export function handleDisputeCreation(event: DisputeCreation): void {
   const court = Court.load(courtID);
   if (!court) return;
   court.numberDisputes = court.numberDisputes.plus(ONE);
+
+  const roundInfo = contract.getRoundInfo(disputeID, ZERO);
+  court.numberVotes = court.numberVotes.plus(roundInfo.nbVotes);
+
   court.save();
   createDisputeFromEvent(event);
-  const roundInfo = contract.getRoundInfo(disputeID, ZERO);
   createRoundFromRoundInfo(KlerosCore.bind(event.address), disputeID, ZERO, roundInfo);
   const arbitrable = event.params._arbitrable.toHexString();
   updateArbitrableCases(arbitrable, ONE);
@@ -164,6 +167,15 @@ export function handleAppealDecision(event: AppealDecision): void {
   dispute.currentRound = roundID;
   dispute.save();
   const roundInfo = contract.getRoundInfo(disputeID, newRoundIndex);
+
+  const disputeStorage = contract.disputes(disputeID);
+  const courtID = disputeStorage.value0.toString();
+  const court = Court.load(courtID);
+  if (!court) return;
+
+  court.numberVotes = court.numberVotes.plus(roundInfo.nbVotes);
+  court.save();
+
   createRoundFromRoundInfo(KlerosCore.bind(event.address), disputeID, newRoundIndex, roundInfo);
 }
 

subgraph/core/src/entities/Court.ts

@@ -3,6 +3,35 @@ import { CourtCreated } from "../../generated/KlerosCore/KlerosCore";
 import { Court } from "../../generated/schema";
 import { ZERO } from "../utils";
 
+// This function calculates the "effective" stake, which is the specific stake
+// of the current court + the specific stake of all of its children courts
+export function updateEffectiveStake(courtID: string): void {
+  let court = Court.load(courtID);
+  if (!court) return;
+
+  while (court) {
+    let totalStake = court.stake;
+
+    const childrenCourts = court.children.load();
+
+    for (let i = 0; i < childrenCourts.length; i++) {
+      const childCourt = Court.load(childrenCourts[i].id);
+      if (childCourt) {
+        totalStake = totalStake.plus(childCourt.effectiveStake);
+      }
+    }
+
+    court.effectiveStake = totalStake;
+    court.save();
+
+    if (court.parent && court.parent !== null) {
+      court = Court.load(court.parent as string);
+    } else {
+      break;
+    }
+  }
+}
+
 export function createCourtFromEvent(event: CourtCreated): void {
   const court = new Court(event.params._courtID.toString());
   court.hiddenVotes = event.params._hiddenVotes;
@@ -17,8 +46,10 @@ export function createCourtFromEvent(event: CourtCreated): void {
   court.numberClosedDisputes = ZERO;
   court.numberVotingDisputes = ZERO;
   court.numberAppealingDisputes = ZERO;
+  court.numberVotes = ZERO;
   court.numberStakedJurors = ZERO;
   court.stake = ZERO;
+  court.effectiveStake = ZERO;
   court.delayedStake = ZERO;
   court.paidETH = ZERO;
   court.paidPNK = ZERO;

subgraph/core/src/entities/JurorTokensPerCourt.ts

@@ -4,6 +4,7 @@ import { updateActiveJurors, getDelta, updateStakedPNK } from "../datapoint";
 import { ensureUser } from "./User";
 import { ONE, ZERO } from "../utils";
 import { SortitionModule } from "../../generated/SortitionModule/SortitionModule";
+import { updateEffectiveStake } from "./Court";
 
 export function ensureJurorTokensPerCourt(jurorAddress: string, courtID: string): JurorTokensPerCourt {
   const id = `${jurorAddress}-${courtID}`;
@@ -59,6 +60,7 @@ export function updateJurorStake(
   updateActiveJurors(activeJurorsDelta, timestamp);
   juror.save();
   court.save();
+  updateEffectiveStake(courtID);
 }
 
 export function updateJurorDelayedStake(jurorAddress: string, courtID: string, amount: BigInt): void {

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/.env.devnet.public

@@ -1,6 +1,6 @@
 # Do not enter sensitive information here.
 export REACT_APP_DEPLOYMENT=devnet
-export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-core-devnet/version/latest
+export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/44313/kleros-v2-test/version/latest
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598

web/src/components/DisputeView/DisputeCardView.tsx

@@ -28,6 +28,11 @@ const CardContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
 `;
+
+const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)`
+  margin-bottom: 16px;
+`;
+
 const TruncatedTitle = ({ text, maxLength }) => {
   const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…";
   return <h3>{truncatedText}</h3>;
@@ -54,7 +59,7 @@ const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) =>
     <StyledCard hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
       <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
       <CardContainer>
-        {isLoading ? <StyledSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
+        {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
         <DisputeInfo {...props} />
       </CardContainer>
     </StyledCard>

web/src/components/ExtraStatsDisplay.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import styled from "styled-components";
+
+import { StyledSkeleton } from "components/StyledSkeleton";
+import { isUndefined } from "utils/index";
+
+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;
+`;
+
+const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)`
+  width: 100px;
+`;
+
+export interface IExtraStatsDisplay {
+  title: string;
+  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  content?: React.ReactNode;
+  text?: string;
+}
+
+const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, text, content, icon: Icon, ...props }) => {
+  return (
+    <Container {...props}>
+      <SVGContainer>{<Icon />}</SVGContainer>
+      <TextContainer>
+        <label>{title}:</label>
+        {content ? content : <StyledP>{!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}</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,168 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { isUndefined } from "utils/index";
+
+import { graphql } from "src/graphql";
+import { HomePageBlockQuery } from "src/graphql/graphql";
+export type { HomePageBlockQuery };
+
+const homePageBlockQuery = graphql(`
+  query HomePageBlock($blockNumber: Int) {
+    presentCourts: courts(orderBy: id, orderDirection: asc) {
+      id
+      parent {
+        id
+      }
+      name
+      numberDisputes
+      numberVotes
+      feeForJuror
+      effectiveStake
+    }
+    pastCourts: courts(orderBy: id, orderDirection: asc, block: { number: $blockNumber }) {
+      id
+      parent {
+        id
+      }
+      name
+      numberDisputes
+      numberVotes
+      feeForJuror
+      effectiveStake
+    }
+  }
+`);
+
+type Court = HomePageBlockQuery["presentCourts"][number];
+type CourtWithTree = Court & {
+  numberDisputes: number;
+  numberVotes: number;
+  feeForJuror: bigint;
+  effectiveStake: bigint;
+  treeNumberDisputes: number;
+  treeNumberVotes: number;
+  votesPerPnk: number;
+  treeVotesPerPnk: number;
+  expectedRewardPerPnk: number;
+  treeExpectedRewardPerPnk: number;
+};
+
+export type HomePageBlockStats = {
+  mostDisputedCourt: CourtWithTree;
+  bestDrawingChancesCourt: CourtWithTree;
+  bestExpectedRewardCourt: CourtWithTree;
+  courts: CourtWithTree[];
+};
+
+export const useHomePageBlockQuery = (blockNumber: number | undefined, allTime: boolean) => {
+  const isEnabled = !isUndefined(blockNumber) || allTime;
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<HomePageBlockStats>({
+    queryKey: [`homePageBlockQuery${blockNumber}-${allTime}`],
+    enabled: isEnabled,
+    staleTime: Infinity,
+    queryFn: async () => {
+      const data = await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: homePageBlockQuery,
+        variables: { blockNumber },
+      });
+
+      return processData(data, allTime);
+    },
+  });
+};
+
+const processData = (data: HomePageBlockQuery, allTime: boolean) => {
+  const presentCourts = data.presentCourts;
+  const pastCourts = data.pastCourts;
+  const processedCourts: CourtWithTree[] = Array(presentCourts.length);
+  const processed = new Set();
+
+  const processCourt = (id: number): CourtWithTree => {
+    if (processed.has(id)) return processedCourts[id];
+
+    processed.add(id);
+    const court =
+      !allTime && id < data.pastCourts.length
+        ? addTreeValuesWithDiff(presentCourts[id], pastCourts[id])
+        : addTreeValues(presentCourts[id]);
+    const parentIndex = court.parent ? Number(court.parent.id) - 1 : 0;
+
+    if (id === parentIndex) {
+      processedCourts[id] = court;
+      return court;
+    }
+
+    processedCourts[id] = {
+      ...court,
+      treeNumberDisputes: court.treeNumberDisputes + processCourt(parentIndex).treeNumberDisputes,
+      treeNumberVotes: court.treeNumberVotes + processCourt(parentIndex).treeNumberVotes,
+      treeVotesPerPnk: court.treeVotesPerPnk + processCourt(parentIndex).treeVotesPerPnk,
+      treeExpectedRewardPerPnk: court.treeExpectedRewardPerPnk + processCourt(parentIndex).treeExpectedRewardPerPnk,
+    };
+
+    return processedCourts[id];
+  };
+
+  for (const court of presentCourts.toReversed()) {
+    processCourt(Number(court.id) - 1);
+  }
+
+  processedCourts.reverse();
+
+  return {
+    mostDisputedCourt: getCourtMostDisputes(processedCourts),
+    bestDrawingChancesCourt: getCourtBestDrawingChances(processedCourts),
+    bestExpectedRewardCourt: getBestExpectedRewardCourt(processedCourts),
+    courts: processedCourts,
+  };
+};
+
+const addTreeValues = (court: Court): CourtWithTree => {
+  const votesPerPnk = Number(court.numberVotes) / (Number(court.effectiveStake) / 1e18);
+  const expectedRewardPerPnk = votesPerPnk * (Number(court.feeForJuror) / 1e18);
+  return {
+    ...court,
+    numberDisputes: Number(court.numberDisputes),
+    numberVotes: Number(court.numberVotes),
+    feeForJuror: BigInt(court.feeForJuror) / BigInt(1e18),
+    effectiveStake: BigInt(court.effectiveStake),
+    treeNumberDisputes: Number(court.numberDisputes),
+    treeNumberVotes: Number(court.numberVotes),
+    votesPerPnk,
+    treeVotesPerPnk: votesPerPnk,
+    expectedRewardPerPnk,
+    treeExpectedRewardPerPnk: expectedRewardPerPnk,
+  };
+};
+
+const addTreeValuesWithDiff = (presentCourt: Court, pastCourt: Court): CourtWithTree => {
+  const presentCourtWithTree = addTreeValues(presentCourt);
+  const pastCourtWithTree = addTreeValues(pastCourt);
+  const diffNumberVotes = presentCourtWithTree.numberVotes - pastCourtWithTree.numberVotes;
+  const avgEffectiveStake = (presentCourtWithTree.effectiveStake + pastCourtWithTree.effectiveStake) / 2n;
+  const votesPerPnk = diffNumberVotes / Number(avgEffectiveStake);
+  const expectedRewardPerPnk = votesPerPnk * Number(presentCourt.feeForJuror);
+  return {
+    ...presentCourt,
+    numberDisputes: presentCourtWithTree.numberDisputes - pastCourtWithTree.numberDisputes,
+    treeNumberDisputes: presentCourtWithTree.treeNumberDisputes - pastCourtWithTree.treeNumberDisputes,
+    numberVotes: diffNumberVotes,
+    treeNumberVotes: presentCourtWithTree.treeNumberVotes - pastCourtWithTree.treeNumberVotes,
+    effectiveStake: avgEffectiveStake,
+    votesPerPnk,
+    treeVotesPerPnk: votesPerPnk,
+    expectedRewardPerPnk,
+    treeExpectedRewardPerPnk: expectedRewardPerPnk,
+  };
+};
+
+const getCourtMostDisputes = (courts: CourtWithTree[]) =>
+  courts.toSorted((a: CourtWithTree, b: CourtWithTree) => b.numberDisputes - a.numberDisputes)[0];
+const getCourtBestDrawingChances = (courts: CourtWithTree[]) =>
+  courts.toSorted((a, b) => b.treeVotesPerPnk - a.treeVotesPerPnk)[0];
+const getBestExpectedRewardCourt = (courts: CourtWithTree[]) =>
+  courts.toSorted((a, b) => b.treeExpectedRewardPerPnk - a.treeExpectedRewardPerPnk)[0];