From f65c634f459d68582de8a3e474c097ac9bbbbe77 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 19 Mar 2024 17:24:10 +0700
Subject: [PATCH] feat: uptime & penalty section

---
 .../components/performance/PenaltyEvent.tsx   | 27 ++++++
 .../components/performance/PenaltySection.tsx | 22 +++--
 .../performance/PenaltyStatusSection.tsx      | 46 ---------
 .../performance/RecentBlocksLegends.tsx       | 32 ++++---
 .../components/performance/UptimeSection.tsx  | 96 ++++++++++++++++---
 .../components/performance/index.tsx          | 57 +++++++----
 .../components/validator-overview/index.tsx   | 12 ++-
 src/lib/pages/validator-details/index.tsx     |  2 +-
 src/lib/pages/validator-details/types.ts      |  6 --
 src/lib/providers/query-client.tsx            |  3 +-
 src/lib/services/validator.ts                 |  6 +-
 src/lib/services/validatorService.ts          |  2 +-
 src/lib/types/validator.ts                    | 11 +++
 13 files changed, 216 insertions(+), 106 deletions(-)
 create mode 100644 src/lib/pages/validator-details/components/performance/PenaltyEvent.tsx
 delete mode 100644 src/lib/pages/validator-details/components/performance/PenaltyStatusSection.tsx

diff --git a/src/lib/pages/validator-details/components/performance/PenaltyEvent.tsx b/src/lib/pages/validator-details/components/performance/PenaltyEvent.tsx
new file mode 100644
index 000000000..2547d14ad
--- /dev/null
+++ b/src/lib/pages/validator-details/components/performance/PenaltyEvent.tsx
@@ -0,0 +1,27 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import type { ValidatorUptimeResponse } from "lib/services/validator";
+
+interface PenaltyEventProps {
+  event: ValidatorUptimeResponse["events"][0];
+}
+export const PenaltyEvent = ({ event }: PenaltyEventProps) => (
+  <Flex alignItems="center" gap={2}>
+    <Flex alignItems="center" gap={1}>
+      <CustomIcon
+        name="alert-triangle"
+        color={event.isJailed ? "warning.main" : "error.main"}
+      />
+      <Text variant="body2" color="text.main">
+        {event.isJailed ? "Jailed" : "Slashed"} at block height
+      </Text>
+      <ExplorerLink
+        type="block_height"
+        value={event.height.toString()}
+        showCopyOnHover
+      />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/validator-details/components/performance/PenaltySection.tsx b/src/lib/pages/validator-details/components/performance/PenaltySection.tsx
index 797d556f3..766487309 100644
--- a/src/lib/pages/validator-details/components/performance/PenaltySection.tsx
+++ b/src/lib/pages/validator-details/components/performance/PenaltySection.tsx
@@ -1,10 +1,14 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
 
-import { PenaltyStatus } from "../../types";
+import type { ValidatorUptimeResponse } from "lib/services/validator";
 
-import { PenaltyStatusSection } from "./PenaltyStatusSection";
+import { PenaltyEvent } from "./PenaltyEvent";
 
-export const PenaltySection = () => (
+interface PenaltySectionProps {
+  penaltyEvents: ValidatorUptimeResponse["events"];
+}
+
+export const PenaltySection = ({ penaltyEvents }: PenaltySectionProps) => (
   <Flex
     direction="column"
     gap={4}
@@ -22,9 +26,15 @@ export const PenaltySection = () => (
       </Text>
     </Flex>
     <Flex direction="column" gap={2}>
-      <PenaltyStatusSection status={PenaltyStatus.Jailed} />
-      <PenaltyStatusSection status={PenaltyStatus.Slashed} />
-      <PenaltyStatusSection status={PenaltyStatus.Jailed} />
+      {penaltyEvents.length === 0 ? (
+        <Text variant="body2" color="text.dark">
+          This validator never had any slash or jailed history within 90 days.
+        </Text>
+      ) : (
+        penaltyEvents.map((event) => (
+          <PenaltyEvent key={event.height} event={event} />
+        ))
+      )}
     </Flex>
   </Flex>
 );
diff --git a/src/lib/pages/validator-details/components/performance/PenaltyStatusSection.tsx b/src/lib/pages/validator-details/components/performance/PenaltyStatusSection.tsx
deleted file mode 100644
index c31973c11..000000000
--- a/src/lib/pages/validator-details/components/performance/PenaltyStatusSection.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Flex, Text } from "@chakra-ui/react";
-
-import { PenaltyStatus } from "../../types";
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { CustomIcon } from "lib/components/icon";
-
-// TODO add block height in interface
-interface PenaltyStatusSectionProps {
-  validatorName?: string;
-  status: PenaltyStatus;
-  hasBorder?: boolean;
-}
-export const PenaltyStatusSection = ({
-  validatorName = "This validator",
-  status,
-  hasBorder = false,
-}: PenaltyStatusSectionProps) => {
-  return (
-    <Flex
-      alignItems="center"
-      gap={2}
-      pt={hasBorder ? 4 : 0}
-      borderTop={hasBorder ? "1px solid" : "0px"}
-      borderTopColor="gray.700"
-    >
-      {status === PenaltyStatus.Never ? (
-        <Text variant="body2" color="text.dark">
-          {validatorName} never had any slash or jailed history within 90 days.
-        </Text>
-      ) : (
-        <Flex alignItems="center" gap={1}>
-          <CustomIcon
-            name="alert-triangle"
-            color={
-              status === PenaltyStatus.Slashed ? "error.main" : "warning.main"
-            }
-          />
-          <Text variant="body2" color="text.main">
-            {status} at block height
-          </Text>
-          <ExplorerLink type="block_height" value="123456789" showCopyOnHover />
-        </Flex>
-      )}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx b/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx
index 652071482..eea90085c 100644
--- a/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx
+++ b/src/lib/pages/validator-details/components/performance/RecentBlocksLegends.tsx
@@ -1,15 +1,18 @@
 import { Flex, Text } from "@chakra-ui/react";
 
+import type { ComputedUptime, Ratio } from "lib/types";
+import { formatRatio } from "lib/utils";
+
 const LegendItem = ({
   label,
   color,
   value,
-  percent,
+  ratio,
 }: {
   label: string;
   color: string;
-  value: string;
-  percent: string;
+  value: number;
+  ratio: Ratio<number>;
 }) => (
   <Flex gap={2} w="full">
     <Flex w={3} h={3} borderRadius="2px" backgroundColor={color} mt={1} />
@@ -34,31 +37,38 @@ const LegendItem = ({
         {value}
       </Text>
       <Text variant="body3" color="text.dark">
-        {percent}
+        {formatRatio(ratio)}
       </Text>
     </Flex>
   </Flex>
 );
-export const RecentBlocksLegends = () => {
+
+interface RecentBlocksLegendsProps {
+  uptime: ComputedUptime;
+}
+
+export const RecentBlocksLegends = ({
+  uptime: { signed, proposed, missed, signedRatio, proposedRatio, missedRatio },
+}: RecentBlocksLegendsProps) => {
   return (
     <Flex direction={{ base: "column", md: "row" }}>
       <LegendItem
         label="Signed Blocks"
         color="primary.main"
-        value="88"
-        percent="95.21%"
+        value={signed}
+        ratio={signedRatio}
       />
       <LegendItem
         label="Proposed Blocks"
         color="secondary.main"
-        value="12"
-        percent="3.00%"
+        value={proposed}
+        ratio={proposedRatio}
       />
       <LegendItem
         label="Missed Blocks"
         color="error.dark"
-        value="3"
-        percent="1.11%"
+        value={missed}
+        ratio={missedRatio}
       />
     </Flex>
   );
diff --git a/src/lib/pages/validator-details/components/performance/UptimeSection.tsx b/src/lib/pages/validator-details/components/performance/UptimeSection.tsx
index 469076cf4..022766ef8 100644
--- a/src/lib/pages/validator-details/components/performance/UptimeSection.tsx
+++ b/src/lib/pages/validator-details/components/performance/UptimeSection.tsx
@@ -1,24 +1,71 @@
-import { Button, Flex, Heading, Text } from "@chakra-ui/react";
+import {
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from "@chakra-ui/react";
+import { isUndefined } from "lodash";
+import { useMemo } from "react";
 
-import { PenaltyStatus } from "../../types";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
 import { ValueWithIcon } from "lib/components/ValueWithIcon";
+import type { ValidatorUptimeResponse } from "lib/services/validator";
+import type { ComputedUptime, Option, Ratio } from "lib/types";
+import { formatRatio } from "lib/utils";
 
-import { PenaltyStatusSection } from "./PenaltyStatusSection";
+import { PenaltyEvent } from "./PenaltyEvent";
 import { RecentBlocksLegends } from "./RecentBlocksLegends";
 import { RecentBlocksSection } from "./RecentBlocksSection";
 
 interface UptimeSectionProps {
-  isDetailPage?: boolean;
+  uptimeData: Option<ValidatorUptimeResponse>;
+  uptimeBlock: number;
+  setUptimeBlock?: (block: number) => void;
   onViewMore?: () => void;
 }
 
 export const UptimeSection = ({
+  uptimeData,
+  uptimeBlock,
+  setUptimeBlock,
   onViewMore,
-  isDetailPage = false,
 }: UptimeSectionProps) => {
   const isMobile = useMobile();
+
+  const computed = useMemo<ComputedUptime>(() => {
+    const data = uptimeData?.uptime;
+    if (!data)
+      return {
+        signed: 0,
+        proposed: 0,
+        missed: 0,
+        signedRatio: 0 as Ratio<number>,
+        proposedRatio: 0 as Ratio<number>,
+        missedRatio: 0 as Ratio<number>,
+        uptimeRatio: 0 as Ratio<number>,
+      };
+
+    return {
+      signed: data.signedBlocks,
+      proposed: data.proposedBlocks,
+      missed: data.missedBlocks,
+      signedRatio: (data.signedBlocks / data.total) as Ratio<number>,
+      proposedRatio: (data.proposedBlocks / data.total) as Ratio<number>,
+      missedRatio: (data.missedBlocks / data.total) as Ratio<number>,
+      uptimeRatio: ((data.signedBlocks + data.proposedBlocks) /
+        data.total) as Ratio<number>,
+    };
+  }, [uptimeData?.uptime]);
+
+  if (isUndefined(uptimeData)) return <Loading />;
+
   return (
     <Flex
       direction="column"
@@ -34,9 +81,31 @@ export const UptimeSection = ({
             <Heading variant="h6" as="h6" color="text.main">
               Uptime
             </Heading>
-            <Text variant="body2" color="text.dark">
-              Latest 100 Blocks
-            </Text>
+            {setUptimeBlock ? (
+              <Menu>
+                <MenuButton>
+                  <Text variant="body2" color="text.dark">
+                    Latest {uptimeBlock} Blocks
+                    <CustomIcon name="chevron-down" ml={2} />
+                  </Text>
+                </MenuButton>
+                <MenuList>
+                  <MenuItem onClick={() => setUptimeBlock(100)}>
+                    Latest 100 Blocks
+                  </MenuItem>
+                  <MenuItem onClick={() => setUptimeBlock(1000)}>
+                    Latest 1000 Blocks
+                  </MenuItem>
+                  <MenuItem onClick={() => setUptimeBlock(10000)}>
+                    Latest 10000 Blocks
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            ) : (
+              <Text variant="body2" color="text.dark">
+                Latest 100 Blocks
+              </Text>
+            )}
           </Flex>
           {onViewMore && !isMobile && (
             <Button
@@ -48,13 +117,16 @@ export const UptimeSection = ({
             </Button>
           )}
         </Flex>
-        <ValueWithIcon icon="block" value="98.21%" />
+        <ValueWithIcon icon="block" value={formatRatio(computed.uptimeRatio)} />
       </Flex>
-      <RecentBlocksLegends />
-      {!isDetailPage && (
+      <RecentBlocksLegends uptime={computed} />
+      {onViewMore && (
         <>
           {isMobile && <RecentBlocksSection />}
-          <PenaltyStatusSection hasBorder status={PenaltyStatus.Jailed} />{" "}
+          {uptimeData.events.length !== 0 && <Divider />}
+          {uptimeData.events.map((event) => (
+            <PenaltyEvent key={event.height} event={event} />
+          ))}
         </>
       )}
       {onViewMore && isMobile && (
diff --git a/src/lib/pages/validator-details/components/performance/index.tsx b/src/lib/pages/validator-details/components/performance/index.tsx
index 64964a269..ba3debc3d 100644
--- a/src/lib/pages/validator-details/components/performance/index.tsx
+++ b/src/lib/pages/validator-details/components/performance/index.tsx
@@ -1,6 +1,11 @@
 import { Flex } from "@chakra-ui/react";
+import { isUndefined } from "lodash";
+import { useState } from "react";
 
 import { ProposedBlocksTable } from "../tables/ProposedBlocksTable";
+import { Loading } from "lib/components/Loading";
+import { ErrorFetching } from "lib/components/state";
+import { useValidatorUptime } from "lib/services/validatorService";
 import type { ValidatorAddr } from "lib/types";
 
 import { PenaltySection } from "./PenaltySection";
@@ -11,24 +16,40 @@ interface PerformanceProps {
   validatorAddress: ValidatorAddr;
 }
 
-export const Performance = ({ validatorAddress }: PerformanceProps) => (
-  <Flex direction="column" gap={{ base: 4, md: 6 }} pt={6}>
-    <Flex gap={{ base: 4, md: 6 }} direction={{ base: "column", md: "row" }}>
-      <Flex flex={{ md: "2" }}>
-        <UptimeSection isDetailPage />
+export const Performance = ({ validatorAddress }: PerformanceProps) => {
+  const [uptimeBlock, setUptimeBlock] = useState(100);
+  const { data: uptimeData, isLoading } = useValidatorUptime(
+    validatorAddress,
+    uptimeBlock
+  );
+
+  if (isLoading) return <Loading />;
+  if (isUndefined(uptimeData))
+    return <ErrorFetching dataName="performance data" />;
+
+  return (
+    <Flex direction="column" gap={{ base: 4, md: 6 }} pt={6}>
+      <Flex gap={{ base: 4, md: 6 }} direction={{ base: "column", md: "row" }}>
+        <Flex flex={{ md: "2" }}>
+          <UptimeSection
+            uptimeData={uptimeData}
+            uptimeBlock={uptimeBlock}
+            setUptimeBlock={(block) => setUptimeBlock(block)}
+          />
+        </Flex>
+        <Flex flex={{ md: "1" }}>
+          <PenaltySection penaltyEvents={uptimeData.events} />
+        </Flex>
       </Flex>
-      <Flex flex={{ md: "1" }}>
-        <PenaltySection />
+      <Flex
+        backgroundColor="gray.900"
+        p={{ base: 4, md: 6 }}
+        rounded={8}
+        w="100%"
+      >
+        <RecentBlocksSection hasTitle />
       </Flex>
+      <ProposedBlocksTable validatorAddress={validatorAddress} />
     </Flex>
-    <Flex
-      backgroundColor="gray.900"
-      p={{ base: 4, md: 6 }}
-      rounded={8}
-      w="100%"
-    >
-      <RecentBlocksSection hasTitle />
-    </Flex>
-    <ProposedBlocksTable validatorAddress={validatorAddress} />
-  </Flex>
-);
+  );
+};
diff --git a/src/lib/pages/validator-details/components/validator-overview/index.tsx b/src/lib/pages/validator-details/components/validator-overview/index.tsx
index 979cf1417..03fba95a8 100644
--- a/src/lib/pages/validator-details/components/validator-overview/index.tsx
+++ b/src/lib/pages/validator-details/components/validator-overview/index.tsx
@@ -9,6 +9,7 @@ import { VotedProposalsTable } from "../tables/VotedProposalsTable";
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
+import { useValidatorUptime } from "lib/services/validatorService";
 import type { AssetInfos, Option, ValidatorAddr } from "lib/types";
 
 import { ValidatorDescription } from "./ValidatorDescription";
@@ -38,13 +39,22 @@ export const ValidatorOverview = ({
   assetInfos,
 }: ValidatorOverviewProps) => {
   const isMobile = useMobile();
+  const uptimeBlock = 100;
+  const { data: uptimeData } = useValidatorUptime(
+    validatorAddress,
+    uptimeBlock
+  );
 
   return isActive && !isJailed ? (
     <Flex direction="column" gap={{ base: 4, md: 6 }} pt={6}>
       <ValidatorDescription details={details} />
       <Flex gap={{ base: 4, md: 6 }} direction={{ base: "column", md: "row" }}>
         <VotingPowerOverview />
-        <UptimeSection onViewMore={onSelectPerformance} />
+        <UptimeSection
+          uptimeData={uptimeData}
+          uptimeBlock={uptimeBlock}
+          onViewMore={onSelectPerformance}
+        />
       </Flex>
       {isMobile ? (
         <BondedTokenChangeMobileCard
diff --git a/src/lib/pages/validator-details/index.tsx b/src/lib/pages/validator-details/index.tsx
index a1c97bc63..81c415564 100644
--- a/src/lib/pages/validator-details/index.tsx
+++ b/src/lib/pages/validator-details/index.tsx
@@ -104,6 +104,7 @@ const ValidatorDetailsBody = ({
           <TabPanels>
             <TabPanel p={0} pt={{ base: 2, md: 0 }}>
               <ValidatorOverview
+                validatorAddress={validatorAddress}
                 onSelectVotes={handleTabChange(TabIndex.Votes)}
                 onSelectPerformance={handleTabChange(TabIndex.Performance)}
                 onSelectBondedTokenChanges={handleTabChange(
@@ -112,7 +113,6 @@ const ValidatorDetailsBody = ({
                 isActive={data.info.isActive}
                 isJailed={data.info.isJailed}
                 details={data.info.details}
-                validatorAddress={validatorAddress}
                 singleStakingDenom={singleStakingDenom}
                 assetInfos={assetInfos}
               />
diff --git a/src/lib/pages/validator-details/types.ts b/src/lib/pages/validator-details/types.ts
index d302fac54..8ef8a5aa6 100644
--- a/src/lib/pages/validator-details/types.ts
+++ b/src/lib/pages/validator-details/types.ts
@@ -9,12 +9,6 @@ export enum TabIndex {
   BondedTokenChanges = "bonded-token-changes",
 }
 
-export enum PenaltyStatus {
-  Jailed = "Jailed",
-  Slashed = "Slashed",
-  Never = "Never",
-}
-
 export const zValidatorDetailsQueryParams = z.object({
   validatorAddress: zValidatorAddr,
   tab: z.union([
diff --git a/src/lib/providers/query-client.tsx b/src/lib/providers/query-client.tsx
index 06c54d13a..e81f52435 100644
--- a/src/lib/providers/query-client.tsx
+++ b/src/lib/providers/query-client.tsx
@@ -2,10 +2,11 @@ import {
   QueryClientProvider as Provider,
   QueryClient,
 } from "@tanstack/react-query";
+import { useState } from "react";
 import type { ReactNode } from "react";
 
 export const QueryClientProvider = ({ children }: { children: ReactNode }) => {
-  const queryClient = new QueryClient();
+  const [queryClient] = useState(() => new QueryClient());
 
   return <Provider client={queryClient}>{children}</Provider>;
 };
diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts
index a3a97e1af..8f95454d5 100644
--- a/src/lib/services/validator.ts
+++ b/src/lib/services/validator.ts
@@ -186,12 +186,12 @@ export const getValidatorData = async (
 const zValidatorUptimeResponse = z
   .object({
     uptime: z.object({
-      signed_block: z.number(),
-      proposed_block: z.number(),
+      signed_blocks: z.number(),
+      proposed_blocks: z.number(),
       missed_blocks: z.number(),
       total: z.number(),
     }),
-    recent_blocks: z
+    recent_100_blocks: z
       .object({
         height: z.number(),
         vote: z.nativeEnum(BlockVote),
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index d686df212..3f23b8d2c 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -158,7 +158,7 @@ export const useValidatorUptime = (
   const endpoint = useBaseApiRoute("validators");
 
   return useQuery<ValidatorUptimeResponse>(
-    [CELATONE_QUERY_KEYS.VALIDATOR_UPTIME, endpoint, validatorAddress],
+    [CELATONE_QUERY_KEYS.VALIDATOR_UPTIME, endpoint, validatorAddress, blocks],
     async () => getValidatorUptime(endpoint, validatorAddress, blocks),
     {
       retry: 1,
diff --git a/src/lib/types/validator.ts b/src/lib/types/validator.ts
index 3e9ef76bf..241cfd008 100644
--- a/src/lib/types/validator.ts
+++ b/src/lib/types/validator.ts
@@ -5,6 +5,7 @@ import { formatUrl } from "lib/utils/formatter/url";
 
 import { zBechAddr20, zValidatorAddr } from "./addrs";
 import { zBig } from "./big";
+import type { Ratio } from "./currency";
 
 export const zValidator = z
   .object({
@@ -47,3 +48,13 @@ export enum BlockVote {
   VOTE = "VOTE",
   ABSTAIN = "ABSTAIN",
 }
+
+export type ComputedUptime = {
+  signed: number;
+  proposed: number;
+  missed: number;
+  signedRatio: Ratio<number>;
+  proposedRatio: Ratio<number>;
+  missedRatio: Ratio<number>;
+  uptimeRatio: Ratio<number>;
+};