feat: show no activity in this period, fix nan bug in court stats hook

Author: kemuru

web/src/hooks/queries/useHomePageBlockQuery.ts

@@ -128,8 +128,8 @@ const processData = (data: HomePageBlockQuery, allTime: boolean) => {
 };
 
 const addTreeValues = (court: Court): CourtWithTree => {
-  const votesPerPnk = Number(court.numberVotes) / (Number(court.effectiveStake) / 1e18);
-  const disputesPerPnk = Number(court.numberDisputes) / (Number(court.effectiveStake) / 1e18);
+  const votesPerPnk = Number(court.numberVotes) / (Number(court.effectiveStake) / 1e18) || 0;
+  const disputesPerPnk = Number(court.numberDisputes) / (Number(court.effectiveStake) / 1e18) || 0;
   const expectedRewardPerPnk = votesPerPnk * (Number(court.feeForJuror) / 1e18);
   return {
     ...court,
@@ -154,8 +154,8 @@ const addTreeValuesWithDiff = (presentCourt: Court, pastCourt: Court): CourtWith
   const diffNumberVotes = presentCourtWithTree.numberVotes - pastCourtWithTree.numberVotes;
   const diffNumberDisputes = presentCourtWithTree.numberDisputes - pastCourtWithTree.numberDisputes;
   const avgEffectiveStake = (presentCourtWithTree.effectiveStake + pastCourtWithTree.effectiveStake) / 2n;
-  const votesPerPnk = diffNumberVotes / (Number(avgEffectiveStake) / 1e18);
-  const disputesPerPnk = diffNumberDisputes / (Number(avgEffectiveStake) / 1e18);
+  const votesPerPnk = diffNumberVotes / (Number(avgEffectiveStake) / 1e18) || 0;
+  const disputesPerPnk = diffNumberDisputes / (Number(avgEffectiveStake) / 1e18) || 0;
   const expectedRewardPerPnk = votesPerPnk * (Number(presentCourt.feeForJuror) / 1e18);
   return {
     ...presentCourt,

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

@@ -17,6 +17,12 @@ const StyledCard = styled.div`
   justify-content: center;
 `;
 
+const StyledLabel = styled.label`
+  margin-top: 24px;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
 interface IStat {
   title: string;
   getText: (data) => string;
@@ -77,9 +83,13 @@ const ExtraStats = () => {
         }
         icon={LawBalance}
       />
-      {stats.map(({ title, getText, icon }) => (
-        <ExtraStatsDisplay key={title} {...{ title, icon }} text={getText(data)} />
-      ))}
+      {data.data?.mostDisputedCourt?.numberDisputes === 0 ? (
+        <StyledLabel>No activity in this period</StyledLabel>
+      ) : (
+        stats.map(({ title, getText, icon }) => (
+          <ExtraStatsDisplay key={title} {...{ title, icon }} text={getText(data)} />
+        ))
+      )}
     </StyledCard>
   );
 };