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/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];