Merge pull request #1840 from kleros/feat(web)/jurors-page

feat: jurors page

subgraph/core/schema.graphql

@@ -69,6 +69,7 @@ interface Evidence {
 
 type User @entity {
   id: ID! # address
+  userAddress: String!
   tokens: [JurorTokensPerCourt!]! @derivedFrom(field: "juror")
   totalStake: BigInt!
   totalDelayed: BigInt!
@@ -237,6 +238,7 @@ type Counter @entity {
   casesVoting: BigInt!
   casesRuled: BigInt!
   casesAppealing: BigInt!
+  totalLeaderboardJurors: BigInt!
 }
 
 type FeeToken @entity {

subgraph/core/src/KlerosCore.ts

@@ -18,7 +18,13 @@ import { createCourtFromEvent } from "./entities/Court";
 import { createDisputeKitFromEvent, filterSupportedDisputeKits } from "./entities/DisputeKit";
 import { createDisputeFromEvent } from "./entities/Dispute";
 import { createRoundFromRoundInfo, updateRoundTimeline } from "./entities/Round";
-import { updateCases, updateCasesAppealing, updateCasesRuled, updateCasesVoting } from "./datapoint";
+import {
+  updateCases,
+  updateCasesAppealing,
+  updateCasesRuled,
+  updateCasesVoting,
+  updateTotalLeaderboardJurors,
+} from "./datapoint";
 import { addUserActiveDispute, computeCoherenceScore, ensureUser } from "./entities/User";
 import { updateJurorStake } from "./entities/JurorTokensPerCourt";
 import { createDrawFromEvent } from "./entities/Draw";
@@ -139,13 +145,23 @@ export function handleNewPeriod(event: NewPeriod): void {
         const draw = Draw.load(draws[j].id);
         if (!draw) continue;
 
+        const juror = ensureUser(draw.juror);
+        juror.totalResolvedVotes = juror.totalResolvedVotes.plus(ONE);
+
+        // Increment totalLeaderboardJurors in the Counter entity if this is the first resolved vote for the juror
+        if (juror.totalResolvedVotes.equals(ONE)) {
+          updateTotalLeaderboardJurors(ONE, event.block.timestamp);
+        }
+
         // Since this is a ClassicVote entity, this will only work for the Classic DisputeKit (which has ID "1").
         const vote = ClassicVote.load(`${round.disputeKit}-${draw.id}`);
 
-        if (!vote) continue;
-
-        const juror = ensureUser(draw.juror);
-        juror.totalResolvedVotes = juror.totalResolvedVotes.plus(ONE);
+        if (!vote) {
+          // Recalculate coherenceScore
+          juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes);
+          juror.save();
+          continue;
+        }
 
         if (vote.choice === null) continue;
 
@@ -155,9 +171,7 @@ export function handleNewPeriod(event: NewPeriod): void {
         }
 
         // Recalculate coherenceScore
-        if (juror.totalResolvedVotes.gt(ZERO)) {
-          juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes);
-        }
+        juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes);
 
         juror.save();
       }

subgraph/core/src/datapoint.ts

@@ -15,6 +15,7 @@ const VARIABLES = [
   "casesVoting",
   "casesRuled",
   "casesAppealing",
+  "totalLeaderboardJurors",
 ];
 
 function updateDataPoint(delta: BigInt, timestamp: BigInt, variable: string): void {
@@ -43,6 +44,7 @@ function checkFirstDayActivity(): void {
     counter.casesVoting = ZERO;
     counter.casesRuled = ZERO;
     counter.casesAppealing = ZERO;
+    counter.totalLeaderboardJurors = ZERO;
     counter.save();
   }
 }
@@ -86,3 +88,7 @@ export function updateCasesRuled(delta: BigInt, timestamp: BigInt): void {
 export function updateCasesAppealing(delta: BigInt, timestamp: BigInt): void {
   updateDataPoint(delta, timestamp, "casesAppealing");
 }
+
+export function updateTotalLeaderboardJurors(delta: BigInt, timestamp: BigInt): void {
+  updateDataPoint(delta, timestamp, "totalLeaderboardJurors");
+}

subgraph/core/src/entities/User.ts

@@ -27,6 +27,7 @@ export function ensureUser(id: string): User {
 
 export function createUserFromAddress(id: string): User {
   const user = new User(id);
+  user.userAddress = id.toLowerCase();
   user.totalStake = ZERO;
   user.totalDelayed = ZERO;
   user.activeDisputes = ZERO;

subgraph/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.10.1",
+  "version": "0.10.3",
+  "drtVersion": "0.11.0",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",
@@ -11,9 +12,9 @@
     "build:core": "graph build --output-dir core/build/ core/subgraph.yaml",
     "test:core": "cd core && graph test",
     "clean:core": "graph clean --codegen-dir core/generated/ --build-dir core/build/ ; rm core/subgraph.yaml.bak.*",
-    "deploy:core:arbitrum-sepolia-devnet": "graph deploy --product subgraph-studio kleros-v2-core-devnet -l v$npm_package_version core/subgraph.yaml",
-    "deploy:core:arbitrum-sepolia": "graph deploy --product subgraph-studio kleros-v2-core-testnet -l v$npm_package_version core/subgraph.yaml",
-    "deploy:core:arbitrum": "graph deploy --product subgraph-studio kleros-v2-core-mainnet -l v$npm_package_version core/subgraph.yaml",
+    "deploy:core:arbitrum-sepolia-devnet": "graph deploy kleros-v2-core-devnet -l v$npm_package_version core/subgraph.yaml",
+    "deploy:core:arbitrum-sepolia": "graph deploy kleros-v2-core-testnet -l v$npm_package_version core/subgraph.yaml",
+    "deploy:core:arbitrum": "graph deploy kleros-v2-core-mainnet -l v$npm_package_version core/subgraph.yaml",
     "deploy:core:local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 kleros/kleros-v2-core-local --version-label v$(date +%s) core/subgraph.yaml",
     "rebuild-deploy:core:local": "yarn update:core:local && yarn codegen:core && yarn build:core && yarn create:local kleros/kleros-v2-core-local && yarn deploy:core:local",
     "": "------------------------------------------------------------------------------------------",
@@ -24,8 +25,8 @@
     "build:core-neo": "graph build --output-dir core-neo/build/ core-neo/subgraph.yaml",
     "test:core-neo": "cd core-neo && graph test",
     "clean:core-neo": "graph clean --codegen-dir core-neo/generated/ --build-dir core-neo/build/ ; rm core-neo/subgraph.yaml.bak.*",
-    "deploy:core-neo:arbitrum-sepolia-devnet": "graph deploy --product subgraph-studio kleros-v2-coreneo-devnet -l v$npm_package_version core-neo/subgraph.yaml",
-    "deploy:core-neo:arbitrum": "graph deploy --product subgraph-studio kleros-v2-coreneo -l v$npm_package_version core-neo/subgraph.yaml",
+    "deploy:core-neo:arbitrum-sepolia-devnet": "graph deploy kleros-v2-coreneo-devnet -l v$npm_package_version core-neo/subgraph.yaml",
+    "deploy:core-neo:arbitrum": "graph deploy kleros-v2-coreneo -l v$npm_package_version core-neo/subgraph.yaml",
     "deploy:core-neo:local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 kleros/kleros-v2-coreneo-local --version-label v$(date +%s) core-neo/subgraph.yaml",
     "rebuild-deploy:core-neo:local": "yarn update:core-neo:local && yarn codegen:core-neo && yarn build:core-neo && yarn create:local kleros/kleros-v2-coreneo-local && yarn deploy:core-neo:local",
     "-": "------------------------------------------------------------------------------------------",
@@ -35,7 +36,7 @@
     "build:core-university": "graph build --output-dir core-university/build/ core-university/subgraph.yaml",
     "test:core-university": "cd core-university && graph test",
     "clean:core-university": "graph clean --codegen-dir core-university/generated/ --build-dir core-university/build/ ; rm core-university/subgraph.yaml.bak.*",
-    "deploy:core-university:arbitrum-sepolia-devnet": "graph deploy --product subgraph-studio kleros-v2-coreuni-devnet -l v$npm_package_version core-university/subgraph.yaml",
+    "deploy:core-university:arbitrum-sepolia-devnet": "graph deploy kleros-v2-coreuni-devnet -l v$npm_package_version core-university/subgraph.yaml",
     "deploy:core-university:local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 kleros/kleros-v2-coreuni-local --version-label v$(date +%s) core-university/subgraph.yaml",
     "rebuild-deploy:core-university:local": "yarn update:core-university:local && yarn codegen:core-university && yarn build:core-university && yarn create:local kleros/kleros-v2-coreuni-local && yarn deploy:core-university:local",
     "--": "-----------------------------------------------------------------------------------------",
@@ -47,9 +48,9 @@
     "build:drt": "graph build --output-dir dispute-template-registry/generated/ dispute-template-registry/subgraph.yaml",
     "test:drt": "cd dispute-template-registry && graph test ",
     "clean:drt": "graph clean --codegen-dir dispute-template-registry/generated/ --build-dir dispute-template-registry/build/ ; rm dispute-template-registry/subgraph.yaml.bak.*",
-    "deploy:drt:arbitrum-sepolia-devnet": "graph deploy --product subgraph-studio kleros-v2-drt-arbisep-devnet -l v$npm_package_version dispute-template-registry/subgraph.yaml",
-    "deploy:drt:arbitrum-sepolia": "graph deploy --product subgraph-studio kleros-v2-drt-arbisep-testnet -l v$npm_package_version dispute-template-registry/subgraph.yaml",
-    "deploy:drt:arbitrum": "graph deploy --product subgraph-studio kleros-v2-drt -l v$npm_package_version dispute-template-registry/subgraph.yaml",
+    "deploy:drt:arbitrum-sepolia-devnet": "graph deploy kleros-v2-drt-arbisep-devnet -l v$(jq -r .drtVersion $npm_package_json) dispute-template-registry/subgraph.yaml",
+    "deploy:drt:arbitrum-sepolia": "graph deploy kleros-v2-drt-arbisep-testnet -l v$(jq -r .drtVersion $npm_package_json) dispute-template-registry/subgraph.yaml",
+    "deploy:drt:arbitrum": "graph deploy kleros-v2-drt -l v$(jq -r .drtVersion $npm_package_json) dispute-template-registry/subgraph.yaml",
     "deploy:drt:local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 kleros/kleros-v2-drt-local --version-label v$(date +%s) dispute-template-registry/subgraph.yaml",
     "rebuild-deploy:drt:local": "yarn update:drt:local && yarn codegen:drt && yarn build:drt && yarn create:local kleros/kleros-v2-drt-local && yarn deploy:drt:local",
     "---": "----------------------------------------------------------------------------------------",

web/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <b style="font-size: 32px;">Kleros Court v2</b>
+  <b style="font-size: 32px;">Kleros Court v2 </b>
 </p>
 
 <p align="center">

web/src/app.tsx

@@ -14,8 +14,9 @@ import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
 const Home = lazy(() => import("./pages/Home"));
 const Cases = lazy(() => import("./pages/Cases"));
-const Dashboard = lazy(() => import("./pages/Dashboard"));
+const Profile = lazy(() => import("./pages/Profile"));
 const Courts = lazy(() => import("./pages/Courts"));
+const Jurors = lazy(() => import("./pages/Jurors"));
 const DisputeResolver = lazy(() => import("./pages/Resolver"));
 const GetPnk = lazy(() => import("./pages/GetPnk"));
 const Settings = lazy(() => import("./pages/Settings"));
@@ -64,10 +65,18 @@ const App: React.FC = () => {
                           }
                         />
                         <Route
-                          path="dashboard/:page/:order/:filter"
+                          path="jurors/:page/:order/:filter"
                           element={
                             <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
-                              <Dashboard />
+                              <Jurors />
+                            </Suspense>
+                          }
+                        />
+                        <Route
+                          path="profile/:page/:order/:filter"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <Profile />
                             </Suspense>
                           }
                         />

web/src/components/BlueIconTextButtonContainer.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
+export const BlueIconTextButtonContainer = styled.div`
+  ${hoverShortTransitionTiming}
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  gap: 8px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.primaryBlue};
+
+  svg path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.secondaryBlue};
+    svg path {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+`;

web/src/components/EvidenceCard.tsx

@@ -8,7 +8,6 @@ import { Card } from "@kleros/ui-components-library";
 
 import AttachmentIcon from "svgs/icons/attachment.svg";
 
-import { DEFAULT_CHAIN, getChain } from "consts/chains";
 import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
@@ -224,7 +223,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
   description,
   fileURI,
 }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${sender}`;
+  const profileLink = `/profile/1/desc/all?address=${sender}`;
 
   const transactionExplorerLink = useMemo(() => {
     return getTxnExplorerLink(transactionHash ?? "");
@@ -249,7 +248,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         <BottomLeftContent>
           <AccountContainer>
             <Identicon size="24" string={sender} />
-            <InternalLink to={dashboardLink}>
+            <InternalLink to={profileLink}>
               <Address>{shortenAddress(sender)}</Address>
             </InternalLink>
           </AccountContainer>

web/src/components/ExtraStatsDisplay.tsx

@@ -8,7 +8,13 @@ import { InternalLink } from "./InternalLink";
 const Container = styled.div`
   display: flex;
   gap: 8px;
-  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  gap: 8px;
 `;
 
 const SVGContainer = styled.div`
@@ -22,12 +28,12 @@ const SVGContainer = styled.div`
   }
 `;
 
-const TextContainer = styled.div`
+const ContentContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  justify-content: center;
+  text-align: center;
 `;
 
 const StyledInternalLink = styled(InternalLink)`
@@ -49,17 +55,19 @@ export interface IExtraStatsDisplay {
 const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, courtId, text, content, icon: Icon, ...props }) => {
   return (
     <Container {...props}>
-      <SVGContainer>{<Icon />}</SVGContainer>
-      <TextContainer>
+      <TitleContainer>
+        <SVGContainer>{<Icon />}</SVGContainer>
         <label>{title}:</label>
+      </TitleContainer>
+      <ContentContainer>
         {content ? (
           content
         ) : (
           <StyledInternalLink to={`/courts/${courtId?.toString()}`}>
             {!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}
           </StyledInternalLink>
         )}
-      </TextContainer>
+      </ContentContainer>
     </Container>
   );
 };

web/src/components/HowItWorks.tsx

@@ -1,31 +1,8 @@
 import React from "react";
-import styled from "styled-components";
-
-import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import BookOpenIcon from "svgs/icons/book-open.svg";
 
-const Container = styled.div`
-  ${hoverShortTransitionTiming}
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 400;
-  gap: 8px;
-  cursor: pointer;
-  color: ${({ theme }) => theme.primaryBlue};
-
-  svg path {
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-
-  &:hover {
-    color: ${({ theme }) => theme.secondaryBlue};
-    svg path {
-      fill: ${({ theme }) => theme.secondaryBlue};
-    }
-  }
-`;
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
 
 interface IHowItWorks {
   isMiniGuideOpen: boolean;
@@ -36,10 +13,10 @@ interface IHowItWorks {
 const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, MiniGuideComponent }) => {
   return (
     <>
-      <Container onClick={toggleMiniGuide}>
+      <BlueIconTextButtonContainer onClick={toggleMiniGuide}>
         <BookOpenIcon />
         How it works
-      </Container>
+      </BlueIconTextButtonContainer>
       {isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
     </>
   );

web/src/components/JurorsLeaderboardButton.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import RankingIcon from "svgs/icons/ranking.svg";
+
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
+import { InternalLink } from "./InternalLink";
+
+const JurorsLeaderboardButton: React.FC = () => {
+  return (
+    <InternalLink to={"/jurors/1/desc/all"}>
+      <BlueIconTextButtonContainer>
+        <RankingIcon />
+        Jurors Leaderboard
+      </BlueIconTextButtonContainer>
+    </InternalLink>
+  );
+};
+
+export default JurorsLeaderboardButton;