feat: jurors page

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/*"
                           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/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/Popup/MiniGuides/JurorLevels.tsx

@@ -5,8 +5,8 @@ import { Card as _Card } from "@kleros/ui-components-library";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import Coherence from "pages/Dashboard/JurorInfo/Coherence";
-import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import Coherence from "pages/Profile/JurorInfo/Coherence";
+import PixelArt from "pages/Profile/JurorInfo/PixelArt";
 
 import Template from "./MainStructureTemplate";
 import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate";

web/src/hooks/queries/useTopUsersByCoherenceScore.ts

@@ -9,7 +9,7 @@ export type { TopUsersByCoherenceScoreQuery };
 
 const topUsersByCoherenceScoreQuery = graphql(`
   query TopUsersByCoherenceScore($first: Int!, $orderBy: User_orderBy, $orderDirection: OrderDirection) {
-    users(first: $first, orderBy: $orderBy, orderDirection: $orderDirection) {
+    users(first: $first, orderBy: $orderBy, orderDirection: $orderDirection, where: { totalResolvedVotes_gt: 0 }) {
       id
       coherenceScore
       totalCoherentVotes

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

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

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -88,13 +88,13 @@ const AccordionTitle: React.FC<{
   commited: boolean;
   hiddenVotes: boolean;
 }> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${juror}`;
+  const profileLink = `/profile/1/desc/all?address=${juror}`;
 
   return (
     <TitleContainer>
       <AddressContainer>
         <Identicon size="20" string={juror} />
-        <StyledInternalLink to={dashboardLink}>
+        <StyledInternalLink to={profileLink}>
           <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
         </StyledInternalLink>
       </AddressContainer>

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

@@ -68,6 +68,8 @@ const SearchResultsContainer = styled(OverlayScrollbarsComponent)`
   overflow-y: auto;
   z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 `;
 
 const StyledCard = styled(Card)<{ selected: boolean }>`
@@ -79,6 +81,7 @@ const StyledCard = styled(Card)<{ selected: boolean }>`
   border: none;
   border-left: ${({ selected, theme }) => (selected ? `3px solid ${theme.primaryBlue}` : "none")};
   background-color: ${({ selected, theme }) => (selected ? theme.mediumBlue : "transparent")};
+  border-radius: 0;
 
   :hover {
     background-color: ${({ theme }) => theme.mediumBlue};

web/src/pages/Home/CourtOverview/Stats.tsx

@@ -37,7 +37,7 @@ const StyledCard = styled(Card)`
   )}
 `;
 
-const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) =>
+export const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) =>
   src.length > 0 ? src.at(-1)?.[stat] : 0n.toString();
 
 interface IStat {

web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx

@@ -11,21 +11,24 @@ const Container = styled.div`
   justify-content: center;
 `;
 
+const getPercent = (num: number, den: number): string => {
+  if (den === 0) return "0%";
+  return `${Math.floor((num * 100) / den)}%`;
+};
+
 interface ICoherence {
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
 }
 
 const Coherence: React.FC<ICoherence> = ({ totalCoherentVotes, totalResolvedVotes }) => {
   const coherenceRatio = `${totalCoherentVotes}/${totalResolvedVotes}`;
 
   return (
     <Container>
-      <Tooltip text={coherenceRatio}>{getPercent(totalCoherentVotes, totalResolvedVotes)}</Tooltip>
+      <Tooltip text={coherenceRatio}>{getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}</Tooltip>
     </Container>
   );
 };
 
-const getPercent = (num: number, den: number): string => `${Math.floor((num * 100) / den)}%`;
-
 export default Coherence;

web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx

@@ -39,10 +39,10 @@ const Container = styled.div`
 interface IDesktopCard {
   rank: number;
   address: string;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
-  coherenceScore: number;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
+  coherenceScore: string;
 }
 
 const DesktopCard: React.FC<IDesktopCard> = ({

web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx

@@ -5,7 +5,7 @@ import { getUserLevelData } from "utils/userLevelCalculation";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import PixelArt from "pages/Profile/JurorInfo/PixelArt";
 
 const Container = styled.div`
   display: flex;
@@ -39,12 +39,12 @@ const StyledLabel = styled.label`
 `;
 
 interface IJurorLevel {
-  coherenceScore: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalResolvedDisputes: string;
 }
 
 const JurorLevel: React.FC<IJurorLevel> = ({ coherenceScore, totalResolvedDisputes }) => {
-  const userLevelData = getUserLevelData(coherenceScore, totalResolvedDisputes);
+  const userLevelData = getUserLevelData(Number(coherenceScore), Number(totalResolvedDisputes));
   const level = userLevelData.level;
 
   return (

web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx

@@ -34,12 +34,12 @@ interface IJurorTitle {
 }
 
 const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
-  const dashboardLink = `/dashboard/1/desc/all?address=${address}`;
+  const profileLink = `/profile/1/desc/all?address=${address}`;
 
   return (
     <Container>
       <IdenticonOrAvatar address={address} />
-      <StyledInternalLink to={dashboardLink}>
+      <StyledInternalLink to={profileLink}>
         <AddressOrName address={address} />
       </StyledInternalLink>
     </Container>

web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx

@@ -80,10 +80,10 @@ const HeaderCoherenceAndCoherence = styled.div`
 interface IMobileCard {
   rank: number;
   address: string;
-  coherenceScore: number;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
 }
 
 const MobileCard: React.FC<IMobileCard> = ({

web/src/pages/Home/TopJurors/JurorCard/index.tsx

@@ -6,10 +6,10 @@ import MobileCard from "./MobileCard";
 interface IJurorCard {
   rank: number;
   address: `0x${string}`;
-  coherenceScore: number;
-  totalCoherentVotes: number;
-  totalResolvedVotes: number;
-  totalResolvedDisputes: number;
+  coherenceScore: string;
+  totalCoherentVotes: string;
+  totalResolvedVotes: string;
+  totalResolvedDisputes: string;
 }
 
 const JurorCard: React.FC<IJurorCard> = ({

web/src/pages/Home/TopJurors/index.tsx

@@ -22,7 +22,7 @@ const Title = styled.h1`
   font-size: ${responsiveSize(20, 24)};
 `;
 
-const ListContainer = styled.div`
+export const ListContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -35,7 +35,7 @@ const ListContainer = styled.div`
   )}
 `;
 
-const StyledLabel = styled.label`
+export const StyledLabel = styled.label`
   font-size: 16px;
 `;
 

web/src/pages/Jurors/Search.tsx

@@ -0,0 +1,76 @@
+import React, { useRef, useState } from "react";
+import styled, { css } from "styled-components";
+
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useDebounce } from "react-use";
+import { Searchbar } from "@kleros/ui-components-library";
+
+import { isEmpty } from "utils/index";
+import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${responsiveSize(8, 16)};
+
+  ${landscapeStyle(
+    () => css`
+      flex-direction: row;
+    `
+  )}
+`;
+
+const StyledSearchbar = styled(Searchbar)`
+  flex: 1;
+  flex-basis: 310px;
+
+  input {
+    font-size: 16px;
+    height: 45px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+
+const Search: React.FC = () => {
+  const { page, order, filter } = useParams();
+  const location = useRootPath();
+  const decodedFilter = decodeURIFilter(filter ?? "all");
+  const { id: searchValue, ...filterObject } = decodedFilter;
+  const [search, setSearch] = useState(searchValue ?? "");
+  const initialRenderRef = useRef(true);
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  useDebounce(
+    () => {
+      if (initialRenderRef.current && isEmpty(search)) {
+        initialRenderRef.current = false;
+        return;
+      }
+      initialRenderRef.current = false;
+      const newFilters = isEmpty(search) ? { ...filterObject } : { ...filterObject, id: search };
+      const encodedFilter = encodeURIFilter(newFilters);
+      navigate(`${location}/${page}/${order}/${encodedFilter}?${searchParams.toString()}`);
+    },
+    500,
+    [search]
+  );
+
+  return (
+    <Container>
+      <StyledSearchbar
+        dir="auto"
+        type="text"
+        placeholder="Search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+    </Container>
+  );
+};
+
+export default Search;

web/src/pages/Jurors/Stats.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styled from "styled-components";
+
+const FieldWrapper = styled.div`
+  display: inline-flex;
+  gap: 8px;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const Field: React.FC<{ label: string; value: string }> = ({ label, value }) => (
+  <FieldWrapper>
+    <StyledLabel>{label}</StyledLabel>
+    <small>{value}</small>
+  </FieldWrapper>
+);
+
+export interface IStats {
+  totalJurors: number;
+}
+
+const Stats: React.FC<IStats> = ({ totalJurors }) => {
+  return <Field label="Total" value={`${totalJurors} Jurors`} />;
+};
+
+export default Stats;

web/src/pages/Jurors/StatsAndFilters.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+
+import { responsiveSize } from "styles/responsiveSize";
+import Stats, { IStats } from "./Stats";
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: ${responsiveSize(4, 8)};
+  margin-bottom: ${responsiveSize(16, 32)};
+  justify-content: space-between;
+`;
+
+const StatsAndFilters: React.FC<IStats> = ({ totalJurors }) => (
+  <Container>
+    <Stats {...{ totalJurors }} />
+  </Container>
+);
+
+export default StatsAndFilters;