Merge branch 'dev' into feat/batch-disputes

Author: tractorss

kleros-sdk/package.json

@@ -40,7 +40,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
     "viem": "^2.24.1",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.1"
   },
   "dependencies": {
     "@reality.eth/reality-eth-lib": "^3.2.60",

web-devtools/package.json

@@ -60,7 +60,7 @@
     "@yornaath/batshit": "^0.10.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
-    "next": "14.2.21",
+    "next": "14.2.28",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",

web/src/components/AllCasesButton.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import styled from "styled-components";
+
+import DocIcon from "svgs/icons/doc.svg";
+
+import { encodeURIFilter } from "utils/uri";
+import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName";
+
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
+import { InternalLink } from "./InternalLink";
+
+const StyledDocIcon = styled(DocIcon)`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+`;
+
+const IconAndTextContainer = styled.div`
+  display: inline-block;
+`;
+
+interface IAllCasesButton {
+  courtId?: string;
+  courtName?: string;
+}
+
+const AllCasesButton: React.FC<IAllCasesButton> = ({ courtId, courtName }) => {
+  const filter = courtId ? { court: courtId } : {};
+  const link = `/cases/display/1/desc/${encodeURIFilter(filter)}`;
+  const labelText = courtId ? `All Cases in ${getDescriptiveCourtName(courtName)}` : "All Cases";
+
+  return (
+    <InternalLink to={link}>
+      <BlueIconTextButtonContainer>
+        <IconAndTextContainer>
+          <StyledDocIcon />
+          {labelText}
+        </IconAndTextContainer>
+      </BlueIconTextButtonContainer>
+    </InternalLink>
+  );
+};
+
+export default AllCasesButton;

web/src/components/BlueIconTextButtonContainer.tsx

@@ -5,20 +5,28 @@ export const BlueIconTextButtonContainer = styled.div`
   ${hoverShortTransitionTiming}
   display: flex;
   align-items: center;
+  text-align: center;
   font-size: 14px;
   font-weight: 400;
   gap: 8px;
   cursor: pointer;
-  color: ${({ theme }) => theme.primaryBlue};
 
   svg path {
     fill: ${({ theme }) => theme.primaryBlue};
   }
 
+  label {
+    margin-top: 1px;
+    color: ${({ theme }) => theme.primaryBlue};
+  }
+
   &:hover {
-    color: ${({ theme }) => theme.secondaryBlue};
     svg path {
       fill: ${({ theme }) => theme.secondaryBlue};
     }
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.secondaryBlue};
+    }
   }
 `;

web/src/components/CasesDisplay/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import { useLocation } from "react-router-dom";
+import { useAccount } from "wagmi";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
 
@@ -29,6 +30,12 @@ const StyledLabel = styled.label`
   font-size: ${responsiveSize(14, 16)};
 `;
 
+const LinksContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+`;
+
 interface ICasesDisplay extends ICasesGrid {
   numberDisputes?: number;
   numberClosedDisputes?: number;
@@ -48,15 +55,25 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   totalPages,
 }) => {
   const location = useLocation();
+  const { isConnected } = useAccount();
+  const profileLink = isConnected ? `/profile/1/desc/all` : null;
+
   return (
     <div {...{ className }}>
       <TitleContainer className="title">
         <StyledTitle>{title}</StyledTitle>
-        {location.pathname.startsWith("/cases/display/1/desc/all") ? (
-          <StyledArrowLink to={"/resolver"}>
-            Create a case <ArrowIcon />
-          </StyledArrowLink>
-        ) : null}
+        <LinksContainer>
+          {location.pathname.startsWith("/cases/display") && profileLink ? (
+            <StyledArrowLink to={profileLink}>
+              My Cases <ArrowIcon />
+            </StyledArrowLink>
+          ) : null}
+          {location.pathname.startsWith("/cases/display") ? (
+            <StyledArrowLink to={"/resolver"}>
+              Create a case <ArrowIcon />
+            </StyledArrowLink>
+          ) : null}
+        </LinksContainer>
       </TitleContainer>
       <Search />
       <StatsAndFilters totalDisputes={numberDisputes || 0} closedDisputes={numberClosedDisputes || 0} />

web/src/components/ConnectWallet/AccountDisplay.tsx

@@ -16,7 +16,6 @@ const Container = styled.div`
   flex-direction: column;
   justify-content: space-between;
   height: auto;
-  align-items: flex-start;
   gap: 8px;
   align-items: center;
   background-color: ${({ theme }) => theme.whiteBackground};
@@ -101,10 +100,8 @@ const ChainConnectionContainer = styled.div`
 
 const StyledIdenticon = styled(Identicon)<{ size: `${number}` }>`
   align-items: center;
-  svg {
-    width: ${({ size }) => size + "px"};
-    height: ${({ size }) => size + "px"};
-  }
+  width: ${({ size }) => size + "px"} !important;
+  height: ${({ size }) => size + "px"} !important;
 `;
 
 const StyledAvatar = styled.img<{ size: `${number}` }>`
@@ -115,12 +112,16 @@ const StyledAvatar = styled.img<{ size: `${number}` }>`
   height: ${({ size }) => size + "px"};
 `;
 
+const StyledSmallLabel = styled.label`
+  font-size: 14px !important;
+`;
+
 interface IIdenticonOrAvatar {
   size?: `${number}`;
   address?: `0x${string}`;
 }
 
-export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "16", address: propAddress }) => {
+export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "20", address: propAddress }) => {
   const { address: defaultAddress } = useAccount();
   const address = propAddress || defaultAddress;
 
@@ -142,9 +143,10 @@ export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "16", a
 
 interface IAddressOrName {
   address?: `0x${string}`;
+  smallDisplay?: boolean;
 }
 
-export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }) => {
+export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress, smallDisplay }) => {
   const { address: defaultAddress } = useAccount();
   const address = propAddress || defaultAddress;
 
@@ -153,7 +155,9 @@ export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }
     chainId: 1,
   });
 
-  return <label>{data ?? (isAddress(address!) ? shortenAddress(address) : address)}</label>;
+  const content = data ?? (isAddress(address!) ? shortenAddress(address) : address);
+
+  return smallDisplay ? <StyledSmallLabel>{content}</StyledSmallLabel> : <label>{content}</label>;
 };
 
 export const ChainDisplay: React.FC = () => {
@@ -166,7 +170,7 @@ const AccountDisplay: React.FC = () => {
   return (
     <Container>
       <AccountContainer>
-        <IdenticonOrAvatar size="32" />
+        <IdenticonOrAvatar size="20" />
         <AddressOrName />
       </AccountContainer>
       <ChainConnectionContainer>

web/src/components/HowItWorks.tsx

@@ -15,7 +15,7 @@ const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, M
     <>
       <BlueIconTextButtonContainer onClick={toggleMiniGuide}>
         <BookOpenIcon />
-        How it works
+        <label>How it works</label>
       </BlueIconTextButtonContainer>
       {isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
     </>

web/src/components/JurorsLeaderboardButton.tsx

@@ -10,7 +10,7 @@ const JurorsLeaderboardButton: React.FC = () => {
     <InternalLink to={"/jurors/1/desc/all"}>
       <BlueIconTextButtonContainer>
         <RankingIcon />
-        Jurors Leaderboard
+        <label>Jurors Leaderboard</label>
       </BlueIconTextButtonContainer>
     </InternalLink>
   );

web/src/components/LatestCases.tsx

@@ -11,6 +11,7 @@ import DisputeView from "components/DisputeView";
 import { SkeletonDisputeCard } from "components/StyledSkeleton";
 
 import { Dispute_Filter } from "../graphql/graphql";
+import AllCasesButton from "./AllCasesButton";
 
 const Container = styled.div`
   margin-top: ${responsiveSize(28, 48)};
@@ -29,18 +30,34 @@ const DisputeContainer = styled.div`
   gap: var(--gap);
 `;
 
-const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
+const ButtonContainer = styled.div`
+  display: flex;
+  margin-top: 16px;
+  justify-content: center;
+`;
+
+interface ILatestCases {
+  title?: string;
+  filters?: Dispute_Filter;
+  courtName?: string;
+}
+
+const LatestCases: React.FC<ILatestCases> = ({ title = "Latest Cases", filters, courtName }) => {
   const { data } = useCasesQuery(0, 3, filters);
   const disputes: DisputeDetailsFragment[] = useMemo(() => data?.disputes as DisputeDetailsFragment[], [data]);
+  const courtId = typeof filters?.court === "string" ? filters?.court : undefined;
 
   return isUndefined(disputes) || disputes.length > 0 ? (
     <Container>
-      <Title>Latest Cases</Title>
+      <Title>{title}</Title>
       <DisputeContainer>
         {isUndefined(disputes)
           ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
           : disputes.map((dispute) => <DisputeView key={dispute.id} {...dispute} overrideIsList />)}
       </DisputeContainer>
+      <ButtonContainer>
+        <AllCasesButton {...{ courtId, courtName }} />
+      </ButtonContainer>
     </Container>
   ) : null;
 };

web/src/hooks/queries/useTopStakedJurorsByCourt.ts

@@ -0,0 +1,60 @@
+import { useQuery } from "@tanstack/react-query";
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { graphql } from "src/graphql";
+import { TopStakedJurorsByCourtQuery, OrderDirection } from "src/graphql/graphql";
+
+const topStakedJurorsByCourtQuery = graphql(`
+  query TopStakedJurorsByCourt(
+    $courtId: ID!
+    $skip: Int
+    $first: Int
+    $orderBy: JurorTokensPerCourt_orderBy
+    $orderDirection: OrderDirection
+    $search: String
+  ) {
+    jurorTokensPerCourts(
+      where: { court_: { id: $courtId }, effectiveStake_gt: 0, juror_: { userAddress_contains_nocase: $search } }
+      skip: $skip
+      first: $first
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+    ) {
+      court {
+        id
+      }
+      juror {
+        id
+        userAddress
+      }
+      effectiveStake
+    }
+  }
+`);
+
+export const useTopStakedJurorsByCourt = (
+  courtId: string,
+  skip: number,
+  first: number,
+  orderBy: string,
+  orderDirection: OrderDirection,
+  search = ""
+) => {
+  const { graphqlBatcher } = useGraphqlBatcher();
+  return useQuery<TopStakedJurorsByCourtQuery>({
+    queryKey: ["TopStakedJurorsByCourt", courtId, skip, first, orderBy, orderDirection, search],
+    staleTime: 10 * 60 * 1000,
+    queryFn: () =>
+      graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: topStakedJurorsByCourtQuery,
+        variables: {
+          courtId,
+          skip,
+          first,
+          orderBy,
+          orderDirection,
+          search: search.toLowerCase(),
+        },
+      }),
+  });
+};