refactor(web): abstraction user level coherency, level calculation, pixelart width and heights

Author: kemuru

web/src/pages/Dashboard/JurorInfo/PixelArt.tsx

@@ -7,33 +7,48 @@ import socratesImage from "assets/pngs/dashboard/socrates.png";
 import platoImage from "assets/pngs/dashboard/plato.png";
 import aristotelesImage from "assets/pngs/dashboard/aristoteles.png";
 
-const StyledImage = styled.img<{ show: boolean }>`
-  width: 189px;
-  height: 189px;
+interface IStyledImage {
+  show: boolean;
+  width: number | string;
+  height: number | string;
+}
+
+const StyledImage = styled.img<IStyledImage>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
   display: ${({ show }) => (show ? "block" : "none")};
 `;
 
-const StyledSkeleton = styled(Skeleton)`
-  width: 189px;
-  height: 189px;
+interface IStyledSkeleton {
+  width: number | string;
+  height: number | string;
+}
+
+const StyledSkeleton = styled(Skeleton)<IStyledSkeleton>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
 `;
 
 const images = [diogenesImage, pythagorasImage, socratesImage, platoImage, aristotelesImage];
 
 interface IPixelArt {
   level: number;
+  width: number | string;
+  height: number | string;
 }
 
-const PixelArt: React.FC<IPixelArt> = ({ level }) => {
+const PixelArt: React.FC<IPixelArt> = ({ level, width, height }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   return (
     <div>
-      {!imageLoaded && <StyledSkeleton />}
+      {!imageLoaded && <StyledSkeleton width={width} height={height} />}
       <StyledImage
         src={images[level]}
         alt="Pixel Art per Level"
         onLoad={() => setImageLoaded(true)}
         show={imageLoaded}
+        width={width}
+        height={height}
       />
     </div>
   );

web/src/pages/Dashboard/JurorInfo/index.tsx

@@ -7,6 +7,7 @@ import JurorRewards from "./JurorRewards";
 import PixelArt from "./PixelArt";
 import { useAccount } from "wagmi";
 import { useUserQuery } from "queries/useUser";
+import { getCoherencyScore, getUserLevelData } from "utils/userLevelCalculation";
 // import StakingRewards from "./StakingRewards";
 
 const Container = styled.div``;
@@ -35,35 +36,20 @@ const Card = styled(_Card)`
   )}
 `;
 
-const levelTitles = [
-  { scoreRange: [0, 20], level: 0, title: "Diogenes" },
-  { scoreRange: [20, 40], level: 1, title: "Pythagoras" },
-  { scoreRange: [40, 60], level: 2, title: "Socrates" },
-  { scoreRange: [60, 80], level: 3, title: "Plato" },
-  { scoreRange: [80, 100], level: 4, title: "Aristotle" },
-];
-
-const calculateCoherencyScore = (totalCoherent: number, totalDisputes: number): number =>
-  totalCoherent / (Math.max(totalDisputes, 1) + 10);
-
 const JurorInfo: React.FC = () => {
   const { address } = useAccount();
   const { data } = useUserQuery(address?.toLowerCase());
   const totalCoherent = data?.user ? parseInt(data?.user?.totalCoherent) : 0;
   const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 1;
 
-  const coherencyScore = calculateCoherencyScore(totalCoherent, totalResolvedDisputes);
-  const roundedCoherencyScore = Math.round(coherencyScore * 100);
-  const userLevelData =
-    levelTitles.find(({ scoreRange }) => {
-      return roundedCoherencyScore >= scoreRange[0] && roundedCoherencyScore < scoreRange[1];
-    }) ?? levelTitles[0];
+  const coherencyScore = getCoherencyScore(totalCoherent, totalResolvedDisputes);
+  const userLevelData = getUserLevelData(totalCoherent, totalResolvedDisputes);
 
   return (
     <Container>
       <Header>Juror Dashboard</Header>
       <Card>
-        <PixelArt level={userLevelData.level} />
+        <PixelArt level={userLevelData.level} width="189" height="189" />
         <Coherency
           userLevelData={userLevelData}
           score={coherencyScore}

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

@@ -3,6 +3,9 @@ import styled from "styled-components";
 import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay";
 import EthIcon from "assets/svgs/icons/eth.svg";
 import PnkIcon from "assets/svgs/icons/kleros.svg";
+import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
+import { getUserLevelData } from "utils/userLevelCalculation";
+import { useUserQuery } from "hooks/queries/useUser";
 
 const Container = styled.div`
   display: flex;
@@ -78,6 +81,12 @@ const StyledIcon = styled.div`
   }
 `;
 
+const HowItWorks = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+
 const StyledIdenticonOrAvatar = styled(IdenticonOrAvatar)``;
 
 interface IJurorCard {
@@ -90,6 +99,14 @@ const JurorCard: React.FC<IJurorCard> = ({ id, address }) => {
   const pnkReward = "30K";
   const coherentVotes = "10/12";
 
+  const { data } = useUserQuery(address?.toLowerCase());
+  const totalCoherent = data?.user ? parseInt(data?.user?.totalCoherent) : 0;
+  const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 1;
+  // const userLevelData = getUserLevelData(totalCoherent, totalResolvedDisputes);
+  const userLevelData = {
+    level: 4,
+  };
+
   return (
     <Container>
       <JurorTitle>
@@ -112,7 +129,10 @@ const JurorCard: React.FC<IJurorCard> = ({ id, address }) => {
             <label>{coherentVotes}</label>
           </Coherency>
         </RewardsAndCoherency>
-        {/*"How it works" section here*/}
+        <HowItWorks>
+          <label> Level {userLevelData.level}</label>
+          <PixelArt width="32" height="32" level={userLevelData.level} />
+        </HowItWorks>
       </JurorData>
     </Container>
   );

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

@@ -19,7 +19,7 @@ const ListContainer = styled.div`
   justify-content: center;
 `;
 
-const TopJurors: React.FC<ITopJurors> = () => {
+const TopJurors: React.FC = () => {
   const jurors = [
     { id: 1, address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" },
     { id: 2, address: "0x74199ddaC9607A3a694011793f674FA1E0d0Fe2D" },

web/src/utils/userLevelCalculation.tsx

@@ -0,0 +1,20 @@
+export const levelTitles = [
+  { scoreRange: [0, 20], level: 0, title: "Diogenes" },
+  { scoreRange: [20, 40], level: 1, title: "Pythagoras" },
+  { scoreRange: [40, 60], level: 2, title: "Socrates" },
+  { scoreRange: [60, 80], level: 3, title: "Plato" },
+  { scoreRange: [80, 100], level: 4, title: "Aristotle" },
+];
+
+export const getCoherencyScore = (totalCoherent: number, totalDisputes: number): number =>
+  totalCoherent / (Math.max(totalDisputes, 1) + 10);
+
+export const getUserLevelData = (totalCoherent: number, totalDisputes: number) => {
+  const coherencyScore = getCoherencyScore(totalCoherent, totalDisputes);
+  const roundedCoherencyScore = Math.round(coherencyScore * 100);
+  return (
+    levelTitles.find(({ scoreRange }) => {
+      return roundedCoherencyScore >= scoreRange[0] && roundedCoherencyScore < scoreRange[1];
+    }) ?? levelTitles[0]
+  );
+};