feat: add total stake info in stakes tab

Author: kemuru

web/src/components/NumberDisplay.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
 import { Tooltip } from "@kleros/ui-components-library";
+
+import { commify } from "utils/commify";
 interface INumberDisplay {
   value: string | number;
   unit?: string;
@@ -31,7 +33,7 @@ const NumberDisplay: React.FC<INumberDisplay> = ({
   isCurrency = false,
 }) => {
   const parsedValue = Number(value);
-  const formattedValue = getFormattedValue(parsedValue, decimals);
+  const formattedValue = commify(getFormattedValue(parsedValue, decimals));
   const tooltipValue = isCurrency ? `${unit} ${value}` : `${value} ${unit}`;
   const displayUnit = showUnitInDisplay ? unit : "";
   const displayValue = isCurrency ? `${displayUnit} ${formattedValue}` : `${formattedValue} ${displayUnit}`;

web/src/pages/Profile/Stakes/Header.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
 import { formatUnits } from "viem";
 
+import PnkIcon from "svgs/icons/pnk.svg";
 import LockerIcon from "svgs/icons/locker.svg";
 
 import { isUndefined } from "utils/index";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-
 import NumberDisplay from "components/NumberDisplay";
 
 const Container = styled.div`
@@ -28,48 +29,72 @@ const Container = styled.div`
   )}
 `;
 
-const LockedPnk = styled.div`
+const StakedPnk = styled.div`
   display: flex;
-  flex-wrap: nowrap;
   gap: 8px;
-  justify-content: flex-start;
+  align-items: center;
+`;
 
-  ${landscapeStyle(
-    () => css`
-      align-self: center;
-    `
-  )}
+const LockedPnk = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
 `;
 
 const StyledTitle = styled.h1`
   margin-bottom: 0;
   font-size: ${responsiveSize(20, 24)};
 `;
 
+const TotalStakeAndLockedPnk = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 12px 24px;
+  flex-wrap: wrap;
+`;
+
+const StyledPnkIcon = styled(PnkIcon)`
+  fill: ${({ theme }) => theme.secondaryPurple};
+  width: 14px;
+`;
+
 const StyledLockerIcon = styled(LockerIcon)`
   fill: ${({ theme }) => theme.secondaryPurple};
   width: 14px;
 `;
 
 interface IHeader {
-  lockedStake: bigint;
+  totalStake: string;
+  lockedStake: string;
 }
 
-const Header: React.FC<IHeader> = ({ lockedStake }) => {
-  const formattedLockedStake = !isUndefined(lockedStake) && formatUnits(lockedStake, 18);
+const Header: React.FC<IHeader> = ({ totalStake, lockedStake }) => {
+  const formattedTotalStake = formatUnits(BigInt(totalStake), 18);
+  const formattedLockedStake = formatUnits(BigInt(lockedStake), 18);
 
   return (
     <Container>
       <StyledTitle>Stakes</StyledTitle>
-      {!isUndefined(lockedStake) ? (
-        <LockedPnk>
-          <StyledLockerIcon />
-          <label> Locked Stake: </label>
-          <small>
-            <NumberDisplay value={formattedLockedStake.toString()} unit="PNK" />
-          </small>
-        </LockedPnk>
-      ) : null}
+      <TotalStakeAndLockedPnk>
+        {!isUndefined(totalStake) ? (
+          <StakedPnk>
+            <StyledPnkIcon />
+            <label> Total Stake: </label>
+            <small>
+              <NumberDisplay value={formattedTotalStake} unit="PNK" />
+            </small>
+          </StakedPnk>
+        ) : null}
+        {!isUndefined(lockedStake) ? (
+          <LockedPnk>
+            <StyledLockerIcon />
+            <label> Locked Stake: </label>
+            <small>
+              <NumberDisplay value={formattedLockedStake} unit="PNK" />
+            </small>
+          </LockedPnk>
+        ) : null}
+      </TotalStakeAndLockedPnk>
     </Container>
   );
 };

web/src/pages/Profile/Stakes/index.tsx

@@ -3,8 +3,6 @@ import styled, { css } from "styled-components";
 
 import Skeleton from "react-loading-skeleton";
 
-import { useReadSortitionModuleGetJurorBalance } from "hooks/contracts/generated";
-
 import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -40,16 +38,14 @@ interface IStakes {
 
 const Stakes: React.FC<IStakes> = ({ searchParamAddress }) => {
   const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(searchParamAddress);
-  const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({
-    args: [searchParamAddress, BigInt(1)],
-  });
   const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0);
   const isStaked = stakedCourts && stakedCourts.length > 0;
-  const lockedStake = jurorBalance?.[1];
+  const totalStake = stakeData?.jurorTokensPerCourts?.[0]?.effectiveStake ?? "0";
+  const lockedStake = stakeData?.jurorTokensPerCourts?.[0]?.locked ?? "0";
 
   return (
     <Container>
-      <Header lockedStake={lockedStake ?? BigInt(0)} />
+      <Header {...{ totalStake, lockedStake }} />
       {isLoading ? <Skeleton /> : null}
       {!isStaked && !isLoading ? <StyledLabel>No stakes found</StyledLabel> : null}
       {isStaked && !isLoading ? (