Merge branch 'dev' into dependabot/npm_and_yarn/dev/viem-1.16.1

Author: alcercu

subgraph/package.json

@@ -15,7 +15,7 @@
     "create-local": "graph create --node http://localhost:8020/ kleros/kleros-v2-core-local",
     "remove-local": "graph remove --node http://localhost:8020/ kleros/kleros-v2-core-local",
     "deploy-local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 kleros/kleros-v2-core-local --version-label v$(date +%s)",
-    "rebuild-deploy-local": "yarn update:local && yarn codegen && yarn create-local && yarn deploy-local",
+    "rebuild-deploy-local": "yarn update:local && yarn codegen && yarn build && yarn create-local && yarn deploy-local",
     "start-local-indexer": "docker compose -f ../services/graph-node/docker-compose.yml up -d && docker compose -f ../services/graph-node/docker-compose.yml logs -f",
     "stop-local-indexer": "docker compose -f ../services/graph-node/docker-compose.yml down && rm -rf ../services/graph-node/data"
   },

subgraph/src/entities/Round.ts

@@ -1,22 +1,22 @@
 import { BigInt } from "@graphprotocol/graph-ts";
-import { KlerosCore__getRoundInfoResult } from "../../generated/KlerosCore/KlerosCore";
+import { KlerosCore__getRoundInfoResultValue0Struct } from "../../generated/KlerosCore/KlerosCore";
 import { Round } from "../../generated/schema";
 
 export function createRoundFromRoundInfo(
   disputeID: BigInt,
   roundIndex: BigInt,
-  roundInfo: KlerosCore__getRoundInfoResult
+  roundInfo: KlerosCore__getRoundInfoResultValue0Struct
 ): void {
   const roundID = `${disputeID.toString()}-${roundIndex.toString()}`;
   const round = new Round(roundID);
-  const feeToken = roundInfo.getFeeToken().toHexString();
+  const feeToken = roundInfo.feeToken.toHexString();
   round.feeToken = feeToken === "0x0000000000000000000000000000000000000000" ? null : feeToken;
-  round.disputeKit = roundInfo.getDisputeKitID().toString();
-  round.tokensAtStakePerJuror = roundInfo.getPnkAtStakePerJuror();
-  round.totalFeesForJurors = roundInfo.getTotalFeesForJurors();
-  round.nbVotes = roundInfo.getNbVotes();
-  round.repartitions = roundInfo.getRepartitions();
-  round.penalties = roundInfo.getPnkPenalties();
+  round.disputeKit = roundInfo.disputeKitID.toString();
+  round.tokensAtStakePerJuror = roundInfo.pnkAtStakePerJuror;
+  round.totalFeesForJurors = roundInfo.totalFeesForJurors;
+  round.nbVotes = roundInfo.nbVotes;
+  round.repartitions = roundInfo.repartitions;
+  round.penalties = roundInfo.pnkPenalties;
   round.dispute = disputeID.toString();
   round.save();
 }

subgraph/subgraph.yaml

@@ -6,9 +6,9 @@ dataSources:
     name: KlerosCore
     network: arbitrum-goerli
     source:
-      address: "0x791812B0B9f2ba260B2DA432BB02Ee23BC1bB509"
+      address: "0x813DCc76dbA91DD9f6bDD038aea0877FC95656bE"
       abi: KlerosCore
-      startBlock: 33640331
+      startBlock: 43823780
     mapping:
       kind: ethereum/events
       apiVersion: 0.0.6
@@ -26,9 +26,9 @@ dataSources:
         - Counter
       abis:
         - name: DisputeKitClassic
-          file: ../contracts/deployments/arbitrumGoerli/DisputeKitClassic.json
+          file: ../contracts/deployments/arbitrumGoerliDevnet/DisputeKitClassic.json
         - name: KlerosCore
-          file: ../contracts/deployments/arbitrumGoerli/KlerosCore.json
+          file: ../contracts/deployments/arbitrumGoerliDevnet/KlerosCore.json
       eventHandlers:
         - event: AppealDecision(indexed uint256,indexed address)
           handler: handleAppealDecision
@@ -48,7 +48,7 @@ dataSources:
           handler: handleDisputeKitEnabled
         - event: StakeSet(indexed address,uint256,uint256)
           handler: handleStakeSet
-        - event: StakeDelayed(indexed address,uint256,uint256,uint256)
+        - event: StakeDelayed(indexed address,uint256,uint256)
           handler: handleStakeDelayed
         - event: TokenAndETHShift(indexed address,indexed uint256,indexed uint256,uint256,int256,int256,address)
           handler: handleTokenAndETHShift
@@ -61,9 +61,9 @@ dataSources:
     name: PolicyRegistry
     network: arbitrum-goerli
     source:
-      address: "0x4c129b9836E4CC3Cf6D833b39a4B7cfA25D86c86"
+      address: "0x0d7EeA661C1f9cB1AD389c9Df90B3beDE86a1529"
       abi: PolicyRegistry
-      startBlock: 33436566
+      startBlock: 43823685
     mapping:
       kind: ethereum/events
       apiVersion: 0.0.6
@@ -72,7 +72,7 @@ dataSources:
         - Court
       abis:
         - name: PolicyRegistry
-          file: ../contracts/deployments/arbitrumGoerli/PolicyRegistry.json
+          file: ../contracts/deployments/arbitrumGoerliDevnet/PolicyRegistry.json
       eventHandlers:
         - event: PolicyUpdate(indexed uint256,string,string)
           handler: handlePolicyUpdate
@@ -81,9 +81,9 @@ dataSources:
     name: DisputeKitClassic
     network: arbitrum-goerli
     source:
-      address: "0x439f92b61783A752462527f9dA9C6c6180C9253a"
+      address: "0x6394A70cADD1376FdE5C38bA331761256DDd03E2"
       abi: DisputeKitClassic
-      startBlock: 34139950
+      startBlock: 43823737
     mapping:
       kind: ethereum/events
       apiVersion: 0.0.6
@@ -97,9 +97,9 @@ dataSources:
         - ClassicContribution
       abis:
         - name: DisputeKitClassic
-          file: ../contracts/deployments/arbitrumGoerli/DisputeKitClassic.json
+          file: ../contracts/deployments/arbitrumGoerliDevnet/DisputeKitClassic.json
         - name: KlerosCore
-          file: ../contracts/deployments/arbitrumGoerli/KlerosCore.json
+          file: ../contracts/deployments/arbitrumGoerliDevnet/KlerosCore.json
       eventHandlers:
         - event: DisputeCreation(indexed uint256,uint256,bytes)
           handler: handleDisputeCreation

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { useWindowSize } from "react-use";
 import { useParams } from "react-router-dom";
-import Skeleton from "react-loading-skeleton";
+import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton";
 import { StandardPagination } from "@kleros/ui-components-library";
-import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { useIsList } from "context/IsListProvider";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter } from "utils/uri";
@@ -17,17 +17,7 @@ const GridContainer = styled.div`
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  gap: 8px;
-  ${landscapeStyle(
-    () =>
-      css`
-        display: grid;
-        row-gap: 16px;
-        column-gap: 8px;
-        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
-        justify-content: space-between;
-      `
-  )}
+  gap: 24px;
 `;
 
 const ListContainer = styled.div`
@@ -37,11 +27,6 @@ const ListContainer = styled.div`
   gap: 8px;
 `;
 
-const StyledSkeleton = styled(Skeleton)`
-  height: 260px;
-  width: 310px;
-`;
-
 // 24px as margin-top since we already have 8px from the flex gap
 const StyledPagination = styled(StandardPagination)`
   margin-top: 24px;
@@ -71,15 +56,15 @@ const CasesGrid: React.FC<ICasesGrid> = ({ disputes, casesPerPage, totalPages, c
         <ListContainer>
           <CasesListHeader />
           {isUndefined(disputes)
-            ? [...Array(casesPerPage)].map((_, i) => <StyledSkeleton key={i} />)
+            ? [...Array(casesPerPage)].map((_, i) => <SkeletonDisputeListItem key={i} />)
             : disputes.map((dispute) => {
                 return <DisputeCard key={dispute.id} {...dispute} />;
               })}
         </ListContainer>
       ) : (
         <GridContainer>
           {isUndefined(disputes)
-            ? [...Array(casesPerPage)].map((_, i) => <StyledSkeleton key={i} />)
+            ? [...Array(casesPerPage)].map((_, i) => <SkeletonDisputeCard key={i} />)
             : disputes.map((dispute) => {
                 return <DisputeCard key={dispute.id} {...dispute} overrideIsList />;
               })}

web/src/components/DisputeCard/index.tsx

@@ -16,15 +16,21 @@ import PeriodBanner from "./PeriodBanner";
 import { isUndefined } from "utils/index";
 
 const StyledCard = styled(Card)`
-  width: 312px;
+  width: 100%;
   height: 260px;
   ${landscapeStyle(
     () =>
       css`
-        width: 380px;
+        /* Explanation of this formula:
+          - The 48px accounts for the total width of gaps: 2 gaps * 24px each.
+          - The 0.333 is used to equally distribute width among 3 cards per row.
+          - The 294px ensures the card has a minimum width.
+        */
+        width: max(calc((100% - 48px) * 0.333), 294px);
       `
   )}
 `;
+
 const StyledListItem = styled(Card)`
   display: flex;
   flex-grow: 1;

web/src/components/LatestCases.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Dispute_Filter } from "../graphql/graphql";
 import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
-import { StyledSkeleton } from "components/StyledSkeleton";
+import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
 
 const Container = styled.div`
@@ -30,7 +30,7 @@ const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
       <Title>Latest Cases</Title>
       <DisputeContainer>
         {isUndefined(disputes)
-          ? Array.from({ length: 3 }).map((_, index) => <StyledSkeleton key={index} width={312} height={260} />)
+          ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
           : disputes.map((dispute) => <DisputeCard key={dispute.id} {...dispute} overrideIsList />)}
       </DisputeContainer>
     </Container>

web/src/components/Popup/index.tsx

@@ -52,7 +52,7 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: calc(300px + (600 - 300) * (100vw - 375px) / (1250 - 375));
+  width: 82vw;
   max-width: 600px;
   border-radius: 3px;
   border: 1px solid ${({ theme }) => theme.stroke};
@@ -66,6 +66,7 @@ const Container = styled.div`
   ${landscapeStyle(
     () => css`
       overflow-y: hidden;
+      width: calc(300px + (600 - 300) * (100vw - 375px) / (1250 - 375));
     `
   )}
 `;

web/src/components/StyledSkeleton.tsx

@@ -1,6 +1,39 @@
-import styled from "styled-components";
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import Skeleton from "react-loading-skeleton";
 
 export const StyledSkeleton = styled(Skeleton)`
   z-index: 0;
 `;
+
+const SkeletonDisputeCardContainer = styled.div`
+  width: 100%;
+  ${landscapeStyle(
+    () =>
+      css`
+        /* Explanation of this formula:
+        - The 48px accounts for the total width of gaps: 2 gaps * 24px each.
+        - The 0.333 is used to equally distribute width among 3 cards per row.
+        - The 294px ensures the card has a minimum width.
+      */
+        width: max(calc((100% - 48px) * 0.333), 294px);
+      `
+  )}
+`;
+
+const StyledSkeletonDisputeCard = styled(Skeleton)`
+  height: 260px;
+`;
+
+const StyledSkeletonDisputeListItem = styled(Skeleton)`
+  height: 62px;
+`;
+
+export const SkeletonDisputeCard = () => (
+  <SkeletonDisputeCardContainer>
+    <StyledSkeletonDisputeCard />
+  </SkeletonDisputeCardContainer>
+);
+
+export const SkeletonDisputeListItem = () => <StyledSkeletonDisputeListItem />;

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

@@ -25,15 +25,15 @@ const Header = styled.h1`
 const Container = styled.div`
   display: flex;
   position: absolute;
-  max-height: 80vh;
+  max-height: 340px;
   top: 5%;
   left: 50%;
   transform: translate(-50%);
   z-index: 1;
   flex-direction: column;
   align-items: center;
 
-  width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375));
+  width: 82%;
   max-width: 480px;
   min-width: 300px;
   border-radius: 3px;
@@ -52,6 +52,8 @@ const Container = styled.div`
       left: 0;
       right: auto;
       transform: none;
+      width: calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375));
+      max-height: 80vh;
     `
   )}
 `;

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -16,7 +16,8 @@ const Container = styled.div`
   position: absolute;
   max-height: 80vh;
   overflow-y: auto;
-  width: auto;
+  width: 82%;
+  max-width: 444px;
   top: 5%;
   left: 50%;
   transform: translateX(-50%);