feat(web): jurors staked in this court section

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, address } = useAccount();
+  const profileLink = isConnected && address ? `/profile/1/desc/all?address=${address}` : 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/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(),
+        },
+      }),
+  });
+};

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

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Link, useLocation } from "react-router-dom";
+import { useAccount } from "wagmi";
 
 import { useOpenContext } from "../MobileHeader";
 
@@ -50,35 +51,41 @@ const StyledLink = styled(Link)<{ isActive: boolean; isMobileNavbar?: boolean }>
   )};
 `;
 
-const links = [
-  { to: "/", text: "Home" },
-  { to: "/cases/display/1/desc/all", text: "Cases" },
-  { to: "/courts", text: "Courts" },
-  { to: "/jurors/1/desc/all", text: "Jurors" },
-  { to: "/get-pnk", text: "Get PNK" },
-];
-
 interface IExplore {
   isMobileNavbar?: boolean;
 }
 
 const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
   const location = useLocation();
   const { toggleIsOpen } = useOpenContext();
+  const { isConnected, address } = useAccount();
+
+  const navLinks = useMemo(() => {
+    const base = [
+      { to: "/", text: "Home" },
+      { to: "/cases/display/1/desc/all", text: "Cases" },
+      { to: "/courts", text: "Courts" },
+      { to: "/jurors/1/desc/all", text: "Jurors" },
+      { to: "/get-pnk", text: "Get PNK" },
+    ];
+    if (isConnected && address) {
+      base.push({ to: `/profile/1/desc/all?address=${address}`, text: "My Profile" });
+    }
+    return base;
+  }, [isConnected, address]);
 
   return (
     <Container>
       <Title>Explore</Title>
-      {links.map(({ to, text }) => (
-        <StyledLink
-          key={text}
-          onClick={toggleIsOpen}
-          isActive={to === "/" ? location.pathname === "/" : location.pathname.split("/")[1] === to.split("/")[1]}
-          {...{ to, isMobileNavbar }}
-        >
-          {text}
-        </StyledLink>
-      ))}
+      {navLinks.map(({ to, text }) => {
+        const pathBase = to.split("?")[0];
+        const isActive = pathBase === "/" ? location.pathname === "/" : location.pathname.startsWith(pathBase);
+        return (
+          <StyledLink key={text} onClick={toggleIsOpen} isActive={isActive} {...{ to, isMobileNavbar }}>
+            {text}
+          </StyledLink>
+        );
+      })}
     </Container>
   );
 };

web/src/pages/Courts/CourtDetails/Description.tsx

@@ -2,8 +2,7 @@ import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import ReactMarkdown from "react-markdown";
-import { Routes, Route, Navigate, useParams, useNavigate, useLocation } from "react-router-dom";
-
+import { Routes, Route, Navigate, useParams, useNavigate, useLocation, useSearchParams } from "react-router-dom";
 import { Tabs } from "@kleros/ui-components-library";
 
 import { useCourtPolicy } from "queries/useCourtPolicy";
@@ -97,38 +96,34 @@ const Description: React.FC = () => {
   const { data: policy } = useCourtPolicy(id);
   const navigate = useNavigate();
   const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const suffix = searchParams.toString() ? `?${searchParams.toString()}` : "";
   const currentPathName = location.pathname.split("/").at(-1);
 
   const filteredTabs = TABS.filter(({ isVisible }) => isVisible(policy));
   const currentTab = TABS.findIndex(({ path }) => path === currentPathName);
 
-  const handleTabChange = (index: number) => {
-    navigate(TABS[index].path);
+  const handleTabChange = (i: number) => {
+    navigate(`${TABS[i].path}${suffix}`);
   };
-
   useEffect(() => {
     if (currentPathName && !filteredTabs.map((t) => t.path).includes(currentPathName) && filteredTabs.length > 0) {
-      navigate(filteredTabs[0].path, { replace: true });
+      navigate(`${filteredTabs[0].path}${suffix}`, { replace: true });
     }
-  }, [policy, currentPathName, filteredTabs, navigate]);
-
-  return (
-    <>
-      {policy ? (
-        <Container id="description">
-          <StyledTabs currentValue={currentTab} items={filteredTabs} callback={handleTabChange} />
-          <TextContainer>
-            <Routes>
-              <Route path="purpose" element={formatMarkdown(policy?.purpose)} />
-              <Route path="skills" element={formatMarkdown(policy?.requiredSkills)} />
-              <Route path="policy" element={formatMarkdown(policy?.rules)} />
-              <Route path="*" element={<Navigate to={filteredTabs.length > 0 ? filteredTabs[0].path : ""} replace />} />
-            </Routes>
-          </TextContainer>
-        </Container>
-      ) : null}
-    </>
-  );
+  }, [policy, currentPathName, filteredTabs, navigate, suffix]);
+  return policy ? (
+    <Container id="description">
+      <StyledTabs currentValue={currentTab} items={filteredTabs} callback={handleTabChange} />
+      <TextContainer>
+        <Routes>
+          <Route path="purpose" element={formatMarkdown(policy?.purpose)} />
+          <Route path="skills" element={formatMarkdown(policy?.requiredSkills)} />
+          <Route path="policy" element={formatMarkdown(policy?.rules)} />
+          <Route path="*" element={<Navigate to={filteredTabs.length > 0 ? filteredTabs[0].path : ""} replace />} />
+        </Routes>
+      </TextContainer>
+    </Container>
+  ) : null;
 };
 
 const formatMarkdown = (markdown?: string) =>

web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/DisplayJurors/Header.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBlue};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  padding: 18px 24px;
+  justify-content: space-between;
+  margin-top: ${responsiveSize(12, 16)};
+`;
+
+const StyledLabel = styled.label`
+  font-size: 14px;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+const Header: React.FC = () => {
+  return (
+    <Container>
+      <StyledLabel>Juror</StyledLabel>
+      <StyledLabel>PNK Staked</StyledLabel>
+    </Container>
+  );
+};
+
+export default Header;

web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/DisplayJurors/JurorCard.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
+import JurorTitle from "pages/Home/TopJurors/JurorCard/JurorTitle";
+import Stake from "./Stake";
+
+const Container = styled.div`
+  ${hoverShortTransitionTiming}
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  background-color: ${({ theme }) => theme.whiteBackground};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-top: none;
+  align-items: center;
+  padding: 18px 24px;
+
+  :hover {
+    background-color: ${({ theme }) => theme.lightGrey}BB;
+  }
+`;
+
+interface IJurorCard {
+  address: string;
+  effectiveStake: string;
+}
+
+const JurorCard: React.FC<IJurorCard> = ({ address, effectiveStake }) => {
+  return (
+    <Container>
+      <JurorTitle {...{ address }} smallDisplay />
+      <Stake {...{ effectiveStake }} />
+    </Container>
+  );
+};
+
+export default JurorCard;