Merge branch 'dev' into chore(subgraph)/amount-all-courts-calculations

Author: alcercu

web/src/components/Popup/MiniGuides/JurorLevels.tsx

@@ -31,64 +31,73 @@ const Card = styled(_Card)`
 `;
 
 const leftPageContents = [
+ {
+ title: "Juror Level 0: Diogenes",
+ paragraphs: [
+ "Coherence Score below 25.",
+ "This level is for new jurors or those frequently voting incoherently. A few coherent votes can help climb out of this level quickly.",
+ ],
+ },
  {
  title: "Juror Level 1: Pythagoras",
  paragraphs: [
- "Jurors are classified into distinct levels according to their performance starting from Level 1.",
- "Level 1: Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
+ "Coherence Score between 25 and 49.",
+ "Jurors here are gaining experience and starting to build voting reliability.",
  ],
  },
  {
  title: "Juror Level 2: Socrates",
- paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with more than 70% coherent votes."],
+ paragraphs: [
+ "Coherence Score between 50 and 69.",
+ "Mid-tier performance. Jurors at this level have demonstrated reasonable consistency in coherent voting.",
+ ],
  },
  {
  title: "Juror Level 3: Plato",
- paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with more than 80% of coherent votes."],
+ paragraphs: [
+ "Coherence Score between 70 and 89.",
+ "Reliable jurors with a consistent track record of coherent votes. Just a few more coherent votes away from reaching the top.",
+ ],
  },
  {
  title: "Juror Level 4: Aristotle",
- paragraphs: ["Level 4: Jurors with ≥ 10 cases arbitrated with more than 90% of coherent votes."],
- },
- {
- title: "Juror Level 0: Diogenes",
  paragraphs: [
- "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated" +
-  " with less than 50% of coherent votes.",
+ "Coherence Score between 90 and 100.",
+ "Top-tier jurors with excellent coherence. Trusted members of the platform.",
  ],
  },
 ];
 
 const userLevelData = [
+ {
+ level: 0,
+ title: "Diogenes",
+ totalCoherentVotes: 2,
+ totalResolvedVotes: 10,
+ },
  {
  level: 1,
  title: "Pythagoras",
  totalCoherentVotes: 6,
- totalResolvedVotes: 10,
+ totalResolvedVotes: 12,
  },
  {
  level: 2,
  title: "Socrates",
- totalCoherentVotes: 7,
- totalResolvedVotes: 10,
+ totalCoherentVotes: 22,
+ totalResolvedVotes: 34,
  },
  {
  level: 3,
  title: "Plato",
- totalCoherentVotes: 8,
- totalResolvedVotes: 10,
+ totalCoherentVotes: 52,
+ totalResolvedVotes: 65,
  },
  {
  level: 4,
  title: "Aristotle",
- totalCoherentVotes: 9,
- totalResolvedVotes: 10,
- },
- {
- level: 0,
- title: "Diogenes",
- totalCoherentVotes: 3,
- totalResolvedVotes: 10,
+ totalCoherentVotes: 90,
+ totalResolvedVotes: 90,
  },
 ];
 

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

@@ -11,7 +11,7 @@ const Container = styled.div`
  display: flex;
  font-size: 12px !important;
  &::before {
- content: "Coherence";
+ content: "Coherent\u00a0Votes";
  }
  color: ${({ theme }) => theme.secondaryText};
  align-items: center;
@@ -25,18 +25,17 @@ const Container = styled.div`
 `;
 
 const coherentVotesTooltipMsg =
- "This is the percentage of coherent votes made by a juror." +
- " Hover to see the ratio of coherent votes: " +
+ "This is the ratio of coherent votes made by a juror: " +
  "the number in the left is the number of times where the juror " +
  "voted coherently and the number in the right is the total number of times " +
- "the juror voted";
+ "the juror voted. Hover to see the percentage of coherent votes.";
 
 const Coherence: React.FC = () => {
  const isDesktop = useIsDesktop();
 
  return (
  <Container>
- <WithHelpTooltip place={isDesktop ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}></WithHelpTooltip>
+ <WithHelpTooltip place={isDesktop ? "top" : "right"} tooltipMsg={coherentVotesTooltipMsg}></WithHelpTooltip>
  </Container>
  );
 };

web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx

@@ -16,6 +16,7 @@ import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
 
 import Coherence from "./Coherence";
 import Rewards from "./Rewards";
+import Score from "./Score";
 
 const Container = styled.div<{ renderIcon?: boolean }>`
  display: none;
@@ -32,9 +33,9 @@ const Container = styled.div<{ renderIcon?: boolean }>`
  () => css`
  display: grid;
  grid-template-columns: ${renderIcon
- ? `min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto`
- : `repeat(3, ${responsiveSize(160, 180, 900)}) auto`};
- column-gap: ${responsiveSize(12, 28, 900)};
+ ? `min-content minmax(160px, 1fr) minmax(60px, 1fr) minmax(80px, 0.8fr) minmax(180px, 1.5fr) minmax(100px, 1fr)`
+ : `minmax(160px, 1fr) minmax(60px, 1fr) minmax(80px, 0.8fr) minmax(180px, 1.5fr) minmax(100px, 1fr)`};
+ column-gap: ${responsiveSize(12, 24, 900)};
  align-items: center;
  `
  )}
@@ -65,8 +66,9 @@ export const DesktopHeader: React.FC = () => {
  <Container renderIcon={renderIcon}>
  {renderIcon ? <StyledRankingIcon /> : null}
  <StyledLabel>Juror</StyledLabel>
- <Rewards />
+ <Score />
  <Coherence />
+ <Rewards />
  <HowItWorksContainer>
  <HowItWorks
  isMiniGuideOpen={isJurorLevelsMiniGuideOpen}

web/src/pages/Home/TopJurors/Header/Score.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import useIsDesktop from "hooks/useIsDesktop";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+const Container = styled.div`
+ display: flex;
+ font-size: 12px !important;
+ &::before {
+ content: "Score";
+ }
+ color: ${({ theme }) => theme.secondaryText};
+ align-items: center;
+
+ ${landscapeStyle(
+ () => css`
+ font-size: 14px !important;
+ justify-content: center;
+ `
+ )}
+`;
+
+const scoreTooltipMsg =
+ "A score from 0 to 100 reflecting coherent voting, smoothed " +
+ "to prevent jurors with low vote counts from ranking too high.";
+
+const Score: React.FC = () => {
+ const isDesktop = useIsDesktop();
+
+ return (
+ <Container>
+ <WithHelpTooltip place={isDesktop ? "top" : "right"} tooltipMsg={scoreTooltipMsg}></WithHelpTooltip>
+ </Container>
+ );
+};
+export default Score;

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

@@ -12,6 +12,7 @@ const Container = styled.div`
  color: ${({ theme }) => theme.primaryText};
  flex-wrap: wrap;
  justify-content: center;
+ margin-top: 2px;
 `;
 
 interface ICoherence {
@@ -24,8 +25,8 @@ const Coherence: React.FC<ICoherence> = ({ totalCoherentVotes, totalResolvedVote
 
  return (
  <Container>
- <Tooltip text={coherenceRatio}>
- {getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}
+ <Tooltip text={getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}>
+ {coherenceRatio}
  </Tooltip>
  </Container>
  );

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

@@ -10,6 +10,7 @@ import JurorLevel from "./JurorLevel";
 import JurorTitle from "./JurorTitle";
 import Rank from "./Rank";
 import Rewards from "./Rewards";
+import Score from "./Score";
 
 const Container = styled.div<{ renderRank?: boolean }>`
  ${hoverShortTransitionTiming}
@@ -26,9 +27,9 @@ const Container = styled.div<{ renderRank?: boolean }>`
  () => css`
  display: grid;
  grid-template-columns: ${renderRank
- ? `min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto`
- : `repeat(3, ${responsiveSize(160, 180, 900)}) auto`};
- column-gap: ${responsiveSize(12, 28, 900)};
+ ? `min-content minmax(160px, 1fr) minmax(60px, 1fr) minmax(80px, 0.8fr) minmax(180px, 1.5fr) minmax(100px, 1fr)`
+ : `minmax(160px, 1fr) minmax(60px, 1fr) minmax(80px, 0.8fr) minmax(180px, 1.5fr) minmax(100px, 1fr)`};
+ column-gap: ${responsiveSize(12, 24, 900)};
  `
  )}
 
@@ -40,27 +41,28 @@ const Container = styled.div<{ renderRank?: boolean }>`
 interface IDesktopCard {
  rank?: number;
  address: string;
+ coherenceScore: string;
  totalCoherentVotes: string;
  totalResolvedVotes: string;
- totalResolvedDisputes: string;
 }
 
 const DesktopCard: React.FC<IDesktopCard> = ({
  rank,
  address,
+ coherenceScore,
  totalCoherentVotes,
  totalResolvedVotes,
- totalResolvedDisputes,
 }) => {
  const renderRank = !!rank;
 
  return (
  <Container renderRank={renderRank}>
  {renderRank && <Rank rank={rank} />}
  <JurorTitle address={address} />
- <Rewards address={address} />
+ <Score coherenceScore={coherenceScore} />
  <Coherence {...{ totalCoherentVotes, totalResolvedVotes }} />
- <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />
+ <Rewards address={address} />
+ <JurorLevel coherenceScore={Number(coherenceScore)} />
  </Container>
  );
 };

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

@@ -4,7 +4,6 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import { getUserLevelData } from "utils/userLevelCalculation";
-import { getCoherencePercent } from "utils/getCoherencePercent";
 
 import PixelArt from "pages/Profile/JurorInfo/PixelArt";
 
@@ -40,14 +39,11 @@ const StyledLabel = styled.label`
 `;
 
 interface IJurorLevel {
- totalCoherentVotes: string;
- totalResolvedVotes: string;
- totalResolvedDisputes: string;
+ coherenceScore: number;
 }
 
-const JurorLevel: React.FC<IJurorLevel> = ({ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }) => {
- const coherencePercentage = getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
- const userLevelData = getUserLevelData(coherencePercentage, Number(totalResolvedDisputes));
+const JurorLevel: React.FC<IJurorLevel> = ({ coherenceScore }) => {
+ const userLevelData = getUserLevelData(coherenceScore);
  const level = userLevelData.level;
 
  return (