Validator proposed blocks table

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#821](https://github.com/alleslabs/celatone-frontend/pull/821) Add Validator's proposed blocks table
 - [#818](https://github.com/alleslabs/celatone-frontend/pull/818) bonded tokens voting powers replacement with real data from api v1
 - [#801](https://github.com/alleslabs/celatone-frontend/pull/801) Add validator detail ui structure
 - [#817](https://github.com/alleslabs/celatone-frontend/pull/817) api v1 - validator voted proposals

src/lib/components/table/MobileCardTemplate.tsx

@@ -1,9 +1,9 @@
-import { Flex } from "@chakra-ui/react";
+import { Divider, Flex } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 
 interface MobileCardTemplateProps {
   topContent: ReactNode;
-  middleContent: ReactNode;
+  middleContent?: ReactNode;
   bottomContent?: ReactNode;
   onClick?: () => void;
 }
@@ -26,16 +26,19 @@ export const MobileCardTemplate = ({
     <Flex align="center" justify="space-between">
       {topContent}
     </Flex>
-    <Flex
-      borderTop="1px solid"
-      borderBottom={bottomContent ? "1px solid" : "0px"}
-      borderColor="gray.700"
-      pt={3}
-      pb={bottomContent ? 3 : 0}
-      direction="column"
-    >
-      {middleContent}
-    </Flex>
+    {middleContent && (
+      <Flex
+        borderTop="1px solid"
+        borderBottom={bottomContent ? "1px solid" : "0px"}
+        borderColor="gray.700"
+        pt={3}
+        pb={bottomContent ? 3 : 0}
+        direction="column"
+      >
+        {middleContent}
+      </Flex>
+    )}
+    {!middleContent && <Divider color="gray.700" size="1px" />}
     {bottomContent && <Flex>{bottomContent}</Flex>}
   </Flex>
 );

src/lib/components/table/ViewMore.tsx

@@ -8,12 +8,14 @@ interface ViewMoreProps {
   onClick: () => void;
   borderRadius?: BorderProps["borderRadius"];
   minH?: LayoutProps["minH"];
+  text?: string;
 }
 
 export const ViewMore = ({
   onClick,
   borderRadius = "0",
   minH = "64px",
+  text = "View More",
 }: ViewMoreProps) => (
   <Flex w="full" justifyContent="center" textAlign="center">
     <Button
@@ -27,7 +29,7 @@ export const ViewMore = ({
         onClick();
       }}
     >
-      View More
+      {text}
       <CustomIcon name="chevron-right" boxSize="12px" />
     </Button>
   </Flex>

src/lib/pages/blocks/components/BlocksTableHeader.tsx

@@ -6,11 +6,13 @@ import { TableHeader } from "lib/components/table";
 interface BlocksTableHeaderProps {
   templateColumns: GridProps["templateColumns"];
   scrollComponentId: string;
+  hideProposer?: boolean;
 }
 
 export const BlocksTableHeader = ({
   templateColumns,
   scrollComponentId,
+  hideProposer = false,
 }: BlocksTableHeaderProps) => (
   <Grid
     templateColumns={templateColumns}
@@ -19,7 +21,7 @@ export const BlocksTableHeader = ({
   >
     <TableHeader>Block Height</TableHeader>
     <TableHeader>Block Hash</TableHeader>
-    <TableHeader>Proposed by</TableHeader>
+    {!hideProposer && <TableHeader>Proposed by</TableHeader>}
     <TableHeader textAlign="center">Transactions</TableHeader>
     <TableHeader>Timestamp</TableHeader>
   </Grid>

src/lib/pages/blocks/components/BlocksTableMobileCard.tsx

@@ -9,9 +9,11 @@ import { dateFromNow, formatUTC, truncate } from "lib/utils";
 
 interface BlocksTableMobileCardProps {
   blockData: Block;
+  hideProposer?: boolean;
 }
 export const BlocksTableMobileCard = ({
   blockData,
+  hideProposer = false,
 }: BlocksTableMobileCardProps) => {
   const navigate = useInternalNavigate();
   return (
@@ -23,8 +25,8 @@ export const BlocksTableMobileCard = ({
         })
       }
       topContent={
-        <Flex align="center" justify="center" gap={2} w="full">
-          <Flex direction="column" flex="1">
+        <Flex align="center" gap={4} w="full">
+          <Flex direction="column">
             <MobileLabel label="Block Height" />
             <ExplorerLink
               type="block_height"
@@ -34,15 +36,22 @@ export const BlocksTableMobileCard = ({
               {blockData.height}
             </ExplorerLink>
           </Flex>
-          <Flex direction="column" flex="1">
+          <Flex direction="column">
             <MobileLabel label="Block Hash" />
             <Flex h={6} align="end">
               <Text variant="body2" color="text.main">
                 {truncate(blockData.hash.toUpperCase())}
               </Text>
             </Flex>
           </Flex>
-          <Flex direction="column" flex="1">
+        </Flex>
+      }
+      middleContent={
+        !hideProposer && <ValidatorBadge validator={blockData.proposer} />
+      }
+      bottomContent={
+        <Flex gap={8}>
+          <Flex direction="column">
             <MobileLabel label="Transactions" />
             <Flex h={6} align="end">
               <Text
@@ -53,15 +62,6 @@ export const BlocksTableMobileCard = ({
               </Text>
             </Flex>
           </Flex>
-        </Flex>
-      }
-      middleContent={
-        <Flex>
-          <ValidatorBadge validator={blockData.proposer} />
-        </Flex>
-      }
-      bottomContent={
-        <Flex direction="column" gap={3}>
           <Flex direction="column" gap={0}>
             <Text variant="body3">{formatUTC(blockData.timestamp)}</Text>
             <Text variant="body3" color="text.dark">

src/lib/pages/blocks/components/BlocksTableRow.tsx

@@ -11,11 +11,13 @@ import { dateFromNow, formatUTC, truncate } from "lib/utils";
 interface BlocksTableRowProps {
   templateColumns: GridProps["templateColumns"];
   blockData: Block;
+  hideProposer?: boolean;
 }
 
 export const BlocksTableRow = ({
   templateColumns,
   blockData,
+  hideProposer = false,
 }: BlocksTableRowProps) => {
   const navigate = useInternalNavigate();
 
@@ -42,14 +44,18 @@ export const BlocksTableRow = ({
           {blockData.height}
         </ExplorerLink>
       </TableRow>
-      <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
       <TableRow>
-        <ValidatorBadge
-          validator={blockData.proposer}
-          badgeSize={7}
-          maxWidth="220px"
-        />
+        {truncate(blockData.hash.toUpperCase(), hideProposer ? [9, 9] : [6, 6])}
       </TableRow>
+      {!hideProposer && (
+        <TableRow>
+          <ValidatorBadge
+            validator={blockData.proposer}
+            badgeSize={7}
+            maxWidth="220px"
+          />
+        </TableRow>
+      )}
       <TableRow
         justifyContent="center"
         color={blockData.txCount === 0 ? "text.dark" : "text.main"}

src/lib/pages/validator-details/components/performance/index.tsx

@@ -1,31 +1,34 @@
 import { Flex } from "@chakra-ui/react";
 
 import { ProposedBlocksTable } from "../tables/ProposedBlocksTable";
+import type { ValidatorAddr } from "lib/types";
 
 import { PenaltySection } from "./PenaltySection";
 import { RecentBlocksSection } from "./RecentBlocksSection";
 import { UptimeSection } from "./UptimeSection";
 
-export const Performance = () => {
-  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 isDetailPage />
-        </Flex>
-        <Flex flex={{ md: "1" }}>
-          <PenaltySection />
-        </Flex>
+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 />
       </Flex>
-      <Flex
-        backgroundColor="gray.900"
-        p={{ base: 4, md: 6 }}
-        rounded={8}
-        w="100%"
-      >
-        <RecentBlocksSection hasTitle />
+      <Flex flex={{ md: "1" }}>
+        <PenaltySection />
       </Flex>
-      <ProposedBlocksTable />
     </Flex>
-  );
-};
+    <Flex
+      backgroundColor="gray.900"
+      p={{ base: 4, md: 6 }}
+      rounded={8}
+      w="100%"
+    >
+      <RecentBlocksSection hasTitle />
+    </Flex>
+    <ProposedBlocksTable validatorAddress={validatorAddress} />
+  </Flex>
+);

src/lib/pages/validator-details/components/tables/ProposedBlocksTable.tsx

@@ -1,31 +1,126 @@
-import { Flex, Heading } from "@chakra-ui/react";
-
 import { useMobile } from "lib/app-provider";
-import { MobileTitle } from "lib/components/table";
+import { Loading } from "lib/components/Loading";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState, ErrorFetching } from "lib/components/state";
+import {
+  MobileTableContainer,
+  TableContainer,
+  TableTitle,
+  ViewMore,
+} from "lib/components/table";
+import { BlocksTableHeader } from "lib/pages/blocks/components/BlocksTableHeader";
+import { BlocksTableMobileCard } from "lib/pages/blocks/components/BlocksTableMobileCard";
+import { BlocksTableRow } from "lib/pages/blocks/components/BlocksTableRow";
+import { useValidatorProposedBlocks } from "lib/services/validatorService";
+import type { ValidatorAddr } from "lib/types";
 
 interface ProposedBlocksTableProps {
+  validatorAddress: ValidatorAddr;
   onViewMore?: () => void;
 }
+
+const TEMPLATE_COLUMNS = "150px minmax(160px, 1fr) 180px 280px";
+const scrollComponentId = "proposed-block-table-header";
+
 export const ProposedBlocksTable = ({
+  validatorAddress,
   onViewMore,
 }: ProposedBlocksTableProps) => {
   const isMobile = useMobile();
-  const isMobileOverview = isMobile && !!onViewMore;
+
+  const {
+    pagesQuantity,
+    setTotalData,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const { data, isLoading, error } = useValidatorProposedBlocks(
+    validatorAddress,
+    onViewMore ? 5 : pageSize,
+    offset,
+    {
+      onSuccess: ({ total }) => setTotalData(total),
+    }
+  );
+
+  if (isLoading) return <Loading />;
+  if (error) return <ErrorFetching dataName="blocks" />;
+  if (!data?.total)
+    return (
+      <EmptyState
+        imageVariant="empty"
+        message="This validator never proposed any blocks."
+        withBorder
+      />
+    );
+
   return (
     <>
-      {isMobileOverview ? (
-        <MobileTitle
-          title="Recently Proposed Blocks"
-          count={10}
-          onViewMore={onViewMore}
-        />
+      <TableTitle
+        title="Proposed Blocks"
+        count={data?.total}
+        mb={2}
+        helperText="Display the proposed blocks by this validator within the last 30 days"
+      />
+      {isMobile ? (
+        <MobileTableContainer>
+          {data.items.map((block) => (
+            <BlocksTableMobileCard
+              key={block.hash}
+              blockData={block}
+              hideProposer
+            />
+          ))}
+        </MobileTableContainer>
       ) : (
-        <Flex direction="column" gap={{ base: 4, md: 6 }}>
-          <Heading as="h6" variant="h6">
-            Recently Proposed Blocks
-          </Heading>
-          {isMobile ? <Flex>mobile table</Flex> : <Flex>table</Flex>}
-        </Flex>
+        <TableContainer>
+          <BlocksTableHeader
+            templateColumns={TEMPLATE_COLUMNS}
+            scrollComponentId={scrollComponentId}
+            hideProposer
+          />
+          {data.items.map((block) => (
+            <BlocksTableRow
+              key={block.hash}
+              templateColumns={TEMPLATE_COLUMNS}
+              blockData={block}
+              hideProposer
+            />
+          ))}
+        </TableContainer>
+      )}
+      {onViewMore && data.total > 5 && (
+        <ViewMore
+          onClick={onViewMore}
+          text={`View all proposed blocks (${data.total})`}
+        />
+      )}
+      {!onViewMore && data.total > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={data.total}
+          scrollComponentId={scrollComponentId}
+          pageSize={pageSize}
+          onPageChange={setCurrentPage}
+          onPageSizeChange={(e) => {
+            const size = Number(e.target.value);
+            setPageSize(size);
+            setCurrentPage(1);
+          }}
+        />
       )}
     </>
   );