feat: add subgraph field, ranking icon, fix extra stats bug, filters, new button, fx, etc

Author: kemuru

subgraph/core/schema.graphql

@@ -69,6 +69,7 @@ interface Evidence {
 
 type User @entity {
   id: ID! # address
+  userAddress: String!
   tokens: [JurorTokensPerCourt!]! @derivedFrom(field: "juror")
   totalStake: BigInt!
   totalDelayed: BigInt!

subgraph/core/src/entities/User.ts

@@ -27,6 +27,7 @@ export function ensureUser(id: string): User {
 
 export function createUserFromAddress(id: string): User {
   const user = new User(id);
+  user.userAddress = id.toLowerCase();
   user.totalStake = ZERO;
   user.totalDelayed = ZERO;
   user.activeDisputes = ZERO;

web/src/assets/svgs/icons/ranking.svg

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
+export const BlueIconTextButtonContainer = styled.div`
+  ${hoverShortTransitionTiming}
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  gap: 8px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.primaryBlue};
+
+  svg path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.secondaryBlue};
+    svg path {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+`;

web/src/components/BlueIconTextButtonContainer.tsx

@@ -8,7 +8,13 @@ import { InternalLink } from "./InternalLink";
 const Container = styled.div`
   display: flex;
   gap: 8px;
-  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  gap: 8px;
 `;
 
 const SVGContainer = styled.div`
@@ -22,12 +28,12 @@ const SVGContainer = styled.div`
   }
 `;
 
-const TextContainer = styled.div`
+const ContentContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  justify-content: center;
+  text-align: center;
 `;
 
 const StyledInternalLink = styled(InternalLink)`
@@ -49,17 +55,19 @@ export interface IExtraStatsDisplay {
 const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, courtId, text, content, icon: Icon, ...props }) => {
   return (
     <Container {...props}>
-      <SVGContainer>{<Icon />}</SVGContainer>
-      <TextContainer>
+      <TitleContainer>
+        <SVGContainer>{<Icon />}</SVGContainer>
         <label>{title}:</label>
+      </TitleContainer>
+      <ContentContainer>
         {content ? (
           content
         ) : (
           <StyledInternalLink to={`/courts/${courtId?.toString()}`}>
             {!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}
           </StyledInternalLink>
         )}
-      </TextContainer>
+      </ContentContainer>
     </Container>
   );
 };

web/src/components/ExtraStatsDisplay.tsx

@@ -1,31 +1,8 @@
 import React from "react";
-import styled from "styled-components";
-
-import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import BookOpenIcon from "svgs/icons/book-open.svg";
 
-const Container = styled.div`
-  ${hoverShortTransitionTiming}
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 400;
-  gap: 8px;
-  cursor: pointer;
-  color: ${({ theme }) => theme.primaryBlue};
-
-  svg path {
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-
-  &:hover {
-    color: ${({ theme }) => theme.secondaryBlue};
-    svg path {
-      fill: ${({ theme }) => theme.secondaryBlue};
-    }
-  }
-`;
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
 
 interface IHowItWorks {
   isMiniGuideOpen: boolean;
@@ -36,10 +13,10 @@ interface IHowItWorks {
 const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, MiniGuideComponent }) => {
   return (
     <>
-      <Container onClick={toggleMiniGuide}>
+      <BlueIconTextButtonContainer onClick={toggleMiniGuide}>
         <BookOpenIcon />
         How it works
-      </Container>
+      </BlueIconTextButtonContainer>
       {isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
     </>
   );

web/src/components/HowItWorks.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import RankingIcon from "svgs/icons/ranking.svg";
+
+import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
+import { InternalLink } from "./InternalLink";
+
+const JurorsLeaderboardButton: React.FC = () => {
+  return (
+    <>
+      <InternalLink to={"/jurors/1/desc/all"}>
+        <BlueIconTextButtonContainer>
+          <RankingIcon />
+          Jurors Leaderboard
+        </BlueIconTextButtonContainer>
+      </InternalLink>
+    </>
+  );
+};
+
+export default JurorsLeaderboardButton;

web/src/components/JurorsLeaderboardButton.tsx

@@ -1,20 +1,22 @@
 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) {
+  query JurorsByCoherenceScore(
+    $skip: Int
+    $first: Int
+    $orderBy: User_orderBy
+    $orderDirection: OrderDirection
+    $search: String
+  ) {
     users(
       first: $first
       skip: $skip
       orderBy: $orderBy
       orderDirection: $orderDirection
-      where: { totalResolvedVotes_gt: 0 }
+      where: { totalResolvedVotes_gt: 0, userAddress_contains: $search }
     ) {
       id
       coherenceScore
@@ -25,26 +27,23 @@ const jurorsByCoherenceScoreQuery = graphql(`
   }
 `);
 
-export const useJurorsByCoherenceScore = (skip = 0, first = 20, orderBy: string, orderDirection: string) => {
-  const isEnabled = !isUndefined(first);
+export const useJurorsByCoherenceScore = (
+  skip = 0,
+  first = 20,
+  orderBy: string,
+  orderDirection: string,
+  search = ""
+) => {
   const { graphqlBatcher } = useGraphqlBatcher();
 
   return useQuery<JurorsByCoherenceScoreQuery>({
-    queryKey: [`JurorsByCoherenceScore`, skip, first, orderBy, orderDirection],
-    enabled: isEnabled,
+    queryKey: ["JurorsByCoherenceScore", skip, first, orderBy, orderDirection, search],
     staleTime: Infinity,
     queryFn: async () =>
-      isEnabled
-        ? await graphqlBatcher.fetch({
-            id: crypto.randomUUID(),
-            document: jurorsByCoherenceScoreQuery,
-            variables: {
-              skip,
-              first,
-              orderBy,
-              orderDirection,
-            },
-          })
-        : undefined,
+      await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: jurorsByCoherenceScoreQuery,
+        variables: { skip, first, orderBy, orderDirection, search },
+      }),
   });
 };

web/src/hooks/queries/useJurorsByCoherenceScore.ts

@@ -1,13 +1,16 @@
 import React from "react";
 import styled from "styled-components";
 
+import { hoverLongTransitionTiming } from "styles/commonStyles";
+
 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`
+  ${hoverLongTransitionTiming}
   display: flex;
   justify-content: center;
   align-items: center;
@@ -21,6 +24,10 @@ const Container = styled.div`
     font-size: 16px;
     font-weight: 600;
   }
+
+  :hover {
+    background-color: ${({ theme }) => theme.lightBlue};
+  }
 `;
 
 const AvatarAndAddressContainer = styled.div`

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

@@ -14,12 +14,10 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-top: 12px;
 `;
 
 const StyledChainContainer = styled.div`
   display: flex;
-  height: 34px;
   gap: 0.5rem;
   justify-content: center;
   align-items: center;
@@ -38,19 +36,20 @@ const StyledChainContainer = styled.div`
 const StyledButton = styled.div`
   display: flex;
   justify-content: center;
-  margin-top: 16px;
+  margin-top: 8px;
 `;
 
 const EnsureChainContainer = styled.div`
   display: flex;
   justify-content: center;
-  padding: 16px;
+  padding-top: 24px;
+  padding-bottom: 20px;
 `;
 
 const UserContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 `;
 
 export const DisconnectWalletButton: React.FC = () => {