feat: myprofile links, subgraph changes, pagination, query optimization, levels miniguides tweak etc

Author: kemuru

subgraph/core/schema.graphql

@@ -237,6 +237,7 @@ type Counter @entity {
   casesVoting: BigInt!
   casesRuled: BigInt!
   casesAppealing: BigInt!
+  totalLeaderboardJurors: BigInt!
 }
 
 type FeeToken @entity {

subgraph/core/src/KlerosCore.ts

@@ -18,13 +18,19 @@ 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";
 import { updateTokenAndEthShiftFromEvent } from "./entities/TokenAndEthShift";
 import { updateArbitrableCases } from "./entities/Arbitrable";
-import { ClassicVote, Court, Dispute, Draw, Round, User } from "../generated/schema";
+import { ClassicVote, Counter, Court, Dispute, Draw, Round, User } from "../generated/schema";
 import { BigInt } from "@graphprotocol/graph-ts";
 import { updatePenalty } from "./entities/Penalty";
 import { ensureFeeToken } from "./entities/FeeToken";
@@ -142,6 +148,11 @@ export function handleNewPeriod(event: NewPeriod): void {
         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}`);
 

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");
+}

web/src/app.tsx

@@ -65,7 +65,7 @@ const App: React.FC = () => {
                           }
                         />
                         <Route
-                          path="jurors/*"
+                          path="jurors/:page/:order/:filter"
                           element={
                             <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                               <Jurors />

web/src/components/Popup/MiniGuides/JurorLevels.tsx

@@ -35,16 +35,16 @@ const leftPageContents = [
     title: "Juror Level 1: Pythagoras",
     paragraphs: [
       "Jurors are classified into distinct levels according to their performance starting from Level 1.",
-      "Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
+      "Level 1: Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
     ],
   },
   {
     title: "Juror Level 2: Socrates",
-    paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with 70%-80% of coherent votes."],
+    paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with more than 70% coherent votes."],
   },
   {
     title: "Juror Level 3: Plato",
-    paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with 80%-90% of coherent votes."],
+    paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with more than 80% of coherent votes."],
   },
   {
     title: "Juror Level 4: Aristotle",

web/src/hooks/queries/useJurorsByCoherenceScore.ts

@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { isUndefined } from "utils/index";
+
+import { graphql } from "src/graphql";
+import { JurorsByCoherenceScoreQuery } from "src/graphql/graphql";
+export type { JurorsByCoherenceScoreQuery };
+
+const jurorsByCoherenceScoreQuery = graphql(`
+  query JurorsByCoherenceScore($skip: Int, $first: Int, $orderBy: User_orderBy, $orderDirection: OrderDirection) {
+    users(
+      first: $first
+      skip: $skip
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: { totalResolvedVotes_gt: 0 }
+    ) {
+      id
+      coherenceScore
+      totalCoherentVotes
+      totalResolvedVotes
+      totalResolvedDisputes
+    }
+  }
+`);
+
+export const useJurorsByCoherenceScore = (skip = 0, first = 20, orderBy: string, orderDirection: string) => {
+  const isEnabled = !isUndefined(first);
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<JurorsByCoherenceScoreQuery>({
+    queryKey: [`JurorsByCoherenceScore`, skip, first, orderBy, orderDirection],
+    enabled: isEnabled,
+    staleTime: Infinity,
+    queryFn: async () =>
+      isEnabled
+        ? await graphqlBatcher.fetch({
+            id: crypto.randomUUID(),
+            document: jurorsByCoherenceScoreQuery,
+            variables: {
+              skip,
+              first,
+              orderBy,
+              orderDirection,
+            },
+          })
+        : undefined,
+  });
+};

web/src/hooks/queries/useTopUsersByCoherenceScore.ts

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+
+import { graphql } from "src/graphql";
+import { TotalLeaderboardJurorsQuery } from "src/graphql/graphql";
+export type { TotalLeaderboardJurorsQuery };
+
+const totalLeaderboardJurorsQuery = graphql(`
+  query TotalLeaderboardJurors($id: ID!) {
+    counter(id: $id) {
+      totalLeaderboardJurors
+    }
+  }
+`);
+
+export const useTotalLeaderboardJurors = () => {
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<TotalLeaderboardJurorsQuery>({
+    queryKey: [`TotalLeaderboardJurors`],
+    staleTime: Infinity,
+    queryFn: async () =>
+      await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: totalLeaderboardJurorsQuery,
+        variables: {
+          id: 0,
+        },
+      }),
+  });
+};

web/src/hooks/queries/useTotalLeaderboardJurors.ts

@@ -54,7 +54,7 @@ const links = [
   { to: "/", text: "Home" },
   { to: "/cases/display/1/desc/all", text: "Cases" },
   { to: "/courts", text: "Courts" },
-  { to: "/jurors", text: "Jurors" },
+  { to: "/jurors/1/desc/all", text: "Jurors" },
   { to: "/get-pnk", text: "Get PNK" },
 ];
 

web/src/layout/Header/navbar/Explore.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+import ArrowIcon from "svgs/icons/arrow.svg";
+
+import { AddressOrName, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay";
+import { StyledArrowLink } from "components/StyledArrowLink";
+import { ISettings } from "../../../index";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 32px;
+  gap: 24px;
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-radius: 30px;
+
+  > label {
+    color: ${({ theme }) => theme.primaryText};
+    font-size: 16px;
+    font-weight: 600;
+  }
+`;
+
+const AvatarAndAddressContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`;
+
+const ReStyledArrowLink = styled(StyledArrowLink)`
+  font-size: 14px;
+
+  > svg {
+    height: 14px;
+    width: 14px;
+  }
+`;
+
+const WalletAndProfile: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+  return (
+    <Container>
+      <AvatarAndAddressContainer>
+        <IdenticonOrAvatar />
+        <AddressOrName />
+      </AvatarAndAddressContainer>
+      <ReStyledArrowLink to={"/profile/1/desc/all"} onClick={toggleIsSettingsOpen}>
+        My Profile <ArrowIcon />
+      </ReStyledArrowLink>
+    </Container>
+  );
+};
+export default WalletAndProfile;

web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx

@@ -1,12 +1,14 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { useAccount, useDisconnect } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
-import { AddressOrName, ChainDisplay, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay";
+import { ChainDisplay } from "components/ConnectWallet/AccountDisplay";
 import { EnsureChain } from "components/EnsureChain";
+import WalletAndProfile from "./WalletAndProfile";
+import { ISettings } from "../../../index";
 
 const Container = styled.div`
   display: flex;
@@ -33,22 +35,6 @@ const StyledChainContainer = styled.div`
   }
 `;
 
-const StyledAddressContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  > label {
-    color: ${({ theme }) => theme.primaryText};
-    font-size: 16px;
-    font-weight: 600;
-  }
-`;
-
-const StyledAvatarContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 12px;
-`;
-
 const StyledButton = styled.div`
   display: flex;
   justify-content: center;
@@ -67,47 +53,24 @@ const UserContainer = styled.div`
   gap: 12px;
 `;
 
-const StyledA = styled.a`
-  text-decoration: none;
-  label {
-    cursor: pointer;
-    color: ${({ theme }) => theme.primaryBlue};
-  }
-
-  :hover {
-    text-decoration: underline;
-  }
-`;
-
 export const DisconnectWalletButton: React.FC = () => {
   const { disconnect } = useDisconnect();
   return <Button text={`Disconnect`} onClick={() => disconnect()} />;
 };
 
-const General: React.FC = () => {
-  const { address, chain } = useAccount();
-
-  const addressExplorerLink = useMemo(() => {
-    return `${chain?.blockExplorers?.default.url}/address/${address}`;
-  }, [address, chain]);
+const General: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
+  const { address } = useAccount();
 
   return (
     <EnsureChainContainer>
       <EnsureChain>
         <Container>
           {address && (
             <UserContainer>
-              <StyledAvatarContainer>
-                <IdenticonOrAvatar size="48" />
-              </StyledAvatarContainer>
-              <StyledAddressContainer>
-                <StyledA href={addressExplorerLink} rel="noreferrer" target="_blank">
-                  <AddressOrName />
-                </StyledA>
-              </StyledAddressContainer>
               <StyledChainContainer>
                 <ChainDisplay />
               </StyledChainContainer>
+              <WalletAndProfile {...{ toggleIsSettingsOpen }} />
               <StyledButton>
                 <DisconnectWalletButton />
               </StyledButton>

web/src/layout/Header/navbar/Menu/Settings/General.tsx renamed to web/src/layout/Header/navbar/Menu/Settings/General/index.tsx

@@ -91,7 +91,11 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
           setCurrentTab(n);
         }}
       />
-      {currentTab === 0 ? <General /> : <NotificationSettings {...{ toggleIsSettingsOpen }} />}
+      {currentTab === 0 ? (
+        <General {...{ toggleIsSettingsOpen }} />
+      ) : (
+        <NotificationSettings {...{ toggleIsSettingsOpen }} />
+      )}
     </Container>
   );
 };

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -11,7 +11,7 @@ const Container = styled.div`
   justify-content: center;
 `;
 
-const getPercent = (num: number, den: number): string => {
+export const getPercent = (num: number, den: number): string => {
   if (den === 0) return "0%";
   return `${Math.floor((num * 100) / den)}%`;
 };