chore: added last block + load more

hirosystems · Aug 2, 2024 · 46d49a9 · 46d49a9
1 parent cdc6a37
commit 46d49a9
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 172 deletions.
diff --git a/src/app/_components/BlockList/BlockCount.tsx b/src/app/_components/BlockList/BlockCount.tsx
@@ -1,70 +1,65 @@
 import { useColorModeValue } from '@chakra-ui/react';
-import { ArrowUpRight } from '@phosphor-icons/react';
+import { CaretDown } from '@phosphor-icons/react';
 import pluralize from 'pluralize';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
-import { Circle } from '../../../common/components/Circle';
-import { ExplorerLink } from '../../../common/components/ExplorerLinks';
-import { Flex } from '../../../ui/Flex';
+import { Button } from '../../../ui/Button';
 import { Icon } from '../../../ui/Icon';
 import { Text } from '../../../ui/Text';
 
 export const BlockCount = memo(function ({
   count,
-  btcBlockHash,
   isFirst,
+  loadMoreStxBlocksHandler,
+  minimized = false,
 }: {
   count: number;
-  btcBlockHash?: string;
   isFirst?: boolean;
+  loadMoreStxBlocksHandler?: () => void;
+  minimized?: boolean;
 }) {
-  // TODO: remove. use theme
   const bgColor = useColorModeValue('purple.100', 'slate.900');
   const bgColorHover = useColorModeValue('purple.200', 'slate.850');
   const textColor = useColorModeValue('purple.600', 'purple.400');
   const iconColor = useColorModeValue('purple.600', 'purple.200');
-  const content = useMemo(() => {
-    return (
+
+  return (
+    <Button
+      onClick={minimized ? () => {} : loadMoreStxBlocksHandler}
+      cursor={minimized ? 'default' : 'pointer'}
+      py={3}
+      px={2}
+      width="fit-content"
+      height={8}
+      bg={bgColor}
+      rounded="full"
+      _hover={
+        minimized
+          ? {
+              bg: bgColor,
+            }
+          : {
+              bg: bgColorHover,
+            }
+      }
+    >
       <Text
-        display={'flex'}
-        color={isFirst ? 'text' : textColor}
-        fontSize={'xs'}
-        bg={bgColor}
-        rounded={'full'}
-        px={2}
-        alignItems={'center'}
+        display="flex"
+        color={isFirst || minimized ? 'text' : textColor}
+        fontSize="xs"
+        alignItems="center"
         gap={1}
-        width={'fit-content'}
-        height={8}
-        _hover={
-          isFirst
+        _groupHover={
+          minimized
             ? {}
             : {
-                textDecoration: 'underline',
-                bg: bgColorHover,
                 textDecorationColor: textColor,
               }
         }
       >
         +{count} {pluralize('block', count)}
-        {isFirst ? null : (
-          <Circle size={4.5} bg="surface">
-            <Icon as={ArrowUpRight} size={2.5} color={iconColor} />
-          </Circle>
-        )}
+        {minimized ? null : <Icon as={CaretDown} size={2.5} color={iconColor} />}
       </Text>
-    );
-  }, [count, bgColor, bgColorHover, textColor, iconColor, isFirst]);
-
-  return (
-    <Flex py={3}>
-      {isFirst ? (
-        <>{content}</>
-      ) : (
-        <ExplorerLink href={btcBlockHash ? `btcblock/${btcBlockHash}` : '/blocks'}>
-          {content}
-        </ExplorerLink>
-      )}
-    </Flex>
+    </Button>
   );
 });
diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx
@@ -23,7 +23,7 @@ function BlocksPageBlockListGroupedBase() {
     <>
       {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
       <Flex flexDirection="column" gap={4} pt={4}>
-        <BlockListGrouped blockList={blockList} minimized={false} stxBlocksLimit={10} />
+        <BlockListGrouped blockList={blockList} minimized={false} stxBlocksLimit={undefined} />
       </Flex>
       <Box pt={5} pb={5}>
         <ListFooter

diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx
@@ -22,7 +22,7 @@ function BlocksPageBlockListUngroupedBase() {
   return (
     <Box pb={6}>
       {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
-      <BlockListUngrouped blockList={blockList} stxBlocksLimit={10} />
+      <BlockListUngrouped blockList={blockList} stxBlocksLimit={undefined} />
       <Box pt={4}>
         <ListFooter
           isLoading={isFetchingNextPage}

diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageHeaders.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageHeaders.tsx
@@ -76,6 +76,9 @@ function AverageStacksBlockTimeCard() {
 }
 
 function LastConfirmedBitcoinBlockCard() {
+  const response = useSuspenseBurnBlocks(1);
+  const burnBlocks = useSuspenseInfiniteQueryResult<BurnBlock>(response);
+  const btcBlock = burnBlocks[0];
   return (
     <Stack py={5} px={9} gap={3} alignItems="flex-start" flexWrap="nowrap">
       <Text fontSize="xs" fontWeight="medium" whiteSpace="nowrap">
@@ -84,15 +87,15 @@ function LastConfirmedBitcoinBlockCard() {
       <Flex width="full" display="grid" gridTemplateColumns={['repeat(2, 50%)']}>
         <Stack gap={2}>
           <Text fontSize="xl" fontWeight="medium" whiteSpace="nowrap" display="inline-block" mr={1}>
-            214
+            {btcBlock.stacks_blocks.length}
           </Text>
           <Text fontSize="xs" fontWeight="medium" color="textSubdued">
             Stacks blocks
           </Text>
         </Stack>
         <Stack gap={2}>
           <Text fontSize="xl" fontWeight="medium" whiteSpace="nowrap" display="inline-block" mr={1}>
-            4354
+            {btcBlock.total_tx_count}
           </Text>
           <Text fontSize="xs" fontWeight="medium" color="textSubdued">
             Stacks transactions

diff --git a/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx b/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx
@@ -7,7 +7,6 @@ import { useInfiniteQueryResult } from '../../../../common/hooks/useInfiniteQuer
 import { useBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock';
 import { truncateMiddle } from '../../../../common/utils/utils';
 import { Box } from '../../../../ui/Box';
-import { Button } from '../../../../ui/Button';
 import { Flex } from '../../../../ui/Flex';
 import { Grid } from '../../../../ui/Grid';
 import { HStack } from '../../../../ui/HStack';
@@ -169,52 +168,56 @@ export function BurnBlockGroupGridLayout({
 }
 
 export function BurnBlockGroupGrid({
-  btcBlock,
   blocksCount,
   stxBlocks,
+  stxBlocksLimit,
   lastStxBlock,
   minimized,
   isFirst,
   loadMoreStxBlocksHandler,
 }: {
-  btcBlock: BlockListBtcBlock;
   stxBlocks: BlockListStxBlock[];
   lastStxBlock: BlockListStxBlock | null;
-  minimized: boolean;
+  stxBlocksLimit?: number;
   blocksCount: number;
   isFirst: boolean;
+  minimized?: boolean;
   loadMoreStxBlocksHandler?: () => void;
 }) {
-  const numStxBlocksNotDisplayed = blocksCount - stxBlocks.length;
+  const stxBlocksToDisplay = useMemo(
+    () => (stxBlocksLimit ? stxBlocks.slice(0, stxBlocksLimit) : stxBlocks),
+    [stxBlocks, stxBlocksLimit]
+  );
+  const numStxBlocksNotDisplayed = blocksCount - stxBlocksToDisplay.length;
   const showLastStxBlock = lastStxBlock && numStxBlocksNotDisplayed > 1;
 
   return (
     <Stack gap={0}>
       <BurnBlockGroupGridLayout minimized={minimized}>
-        {minimized || stxBlocks.length === 0 ? null : <GroupHeader />}
-        {stxBlocks.map((stxBlock, i) => (
+        {minimized || stxBlocksToDisplay.length === 0 ? null : <GroupHeader />}
+        {stxBlocksToDisplay.map((stxBlock, i) => (
           <React.Fragment key={`stx-block-row-${stxBlock.hash}`}>
             <StxBlockRow
               stxBlock={stxBlock}
               minimized={minimized}
               isFirst={i === 0}
-              isLast={i === stxBlocks.length - 1 && numStxBlocksNotDisplayed <= 0}
+              isLast={i === stxBlocksToDisplay.length - 1 && numStxBlocksNotDisplayed <= 0}
             />
-            {i < stxBlocks.length - 1 && (
+            {i < stxBlocksToDisplay.length - 1 && (
               <Box gridColumn={'1/5'} borderBottom={'1px'} borderColor="borderSecondary"></Box>
             )}
           </React.Fragment>
         ))}
       </BurnBlockGroupGridLayout>
-      {stxBlocks.length < blocksCount ? (
-        <Button onClick={loadMoreStxBlocksHandler}>Load STX blocks</Button>
-      ) : null}
       {numStxBlocksNotDisplayed > 0 ? (
-        <BlockCount
-          count={showLastStxBlock ? numStxBlocksNotDisplayed - 1 : numStxBlocksNotDisplayed}
-          btcBlockHash={btcBlock.hash}
-          isFirst={isFirst}
-        />
+        <Box py={2}>
+          <BlockCount
+            count={showLastStxBlock ? numStxBlocksNotDisplayed - 1 : numStxBlocksNotDisplayed}
+            isFirst={isFirst}
+            loadMoreStxBlocksHandler={loadMoreStxBlocksHandler}
+            minimized={minimized}
+          />
+        </Box>
       ) : null}
       {showLastStxBlock ? (
         <BurnBlockGroupGridLayout minimized={minimized}>
@@ -329,7 +332,7 @@ export function BurnBlockGroup({
   btcBlock: BlockListBtcBlock;
   stxBlocks: BlockListStxBlock[];
   isFirst: boolean;
-  stxBlocksLimit: number;
+  stxBlocksLimit?: number;
   minimized?: boolean;
 }) {
   const [enabled, setEnabled] = useState(false);
@@ -341,24 +344,27 @@ export function BurnBlockGroup({
       offset: stxBlocks.length,
       enabled,
     },
-    'additional-stx-blocks'
+    'additional-stx-blocks-loaded'
   );
   const { fetchNextPage, hasNextPage } = response;
-  const additionalStxBlocks = useInfiniteQueryResult(response);
+  const additionalStxBlocksLoaded = useInfiniteQueryResult(response);
 
   const handleLoadMoreStxBlocks = useCallback(() => {
     setEnabled(true);
     if (hasNextPage) {
-      console.log('fetching next page');
       fetchNextPage();
     }
   }, [fetchNextPage, hasNextPage]);
 
   const allStxBlocks = useMemo(() => {
-    return stxBlocks.concat(additionalStxBlocks.map(createBlockListStxBlock));
-  }, [stxBlocks, additionalStxBlocks]);
+    return stxBlocks.concat(additionalStxBlocksLoaded.map(createBlockListStxBlock));
+  }, [stxBlocks, additionalStxBlocksLoaded]);
 
-  const unaccountedStxBlocks = btcBlock.blockCount ? allStxBlocks.length - btcBlock.blockCount : 0;
+  // Live updates cause unaccounted blocks and txs
+  const unaccountedStxBlocks = useMemo(
+    () => allStxBlocks.length - btcBlock.blockCount,
+    [allStxBlocks, btcBlock.blockCount]
+  );
   const unaccountedTxs = useMemo(
     () =>
       unaccountedStxBlocks > 0
@@ -368,14 +374,22 @@ export function BurnBlockGroup({
         : 0,
     [allStxBlocks, unaccountedStxBlocks]
   );
+
   const txsCount = isFirst
     ? btcBlock.txsCount + unaccountedTxs // For the first btc block, if live is on, then the btc block tx count can be stale and we need to account for the unaccounted txs
     : btcBlock.txsCount;
-  const blocksCount = isFirst ? btcBlock.blockCount + unaccountedStxBlocks : btcBlock.blockCount;
-  const queryForLastStxBlockRequireed = allStxBlocks.length < blocksCount;
+  const blocksCount = useMemo(
+    () => (isFirst ? btcBlock.blockCount + unaccountedStxBlocks : btcBlock.blockCount),
+    [btcBlock, unaccountedStxBlocks, isFirst]
+  );
+
+  const queryForLastStxBlockRequired = useMemo(
+    () => allStxBlocks.length < blocksCount,
+    [allStxBlocks, blocksCount]
+  );
   const lastStxBlockResponse = useBlocksByBurnBlock(btcBlock.height, 1, {
     offset: blocksCount - 1,
-    enabled: queryForLastStxBlockRequireed,
+    enabled: queryForLastStxBlockRequired,
   });
   const lastStxBlock = useInfiniteQueryResult(lastStxBlockResponse)[0];
   const lastStxBlockFormatted = useMemo(
@@ -388,9 +402,9 @@ export function BurnBlockGroup({
       <BitcoinHeader btcBlock={btcBlock} minimized={minimized} isFirst={isFirst} />
       <ScrollableBox>
         <BurnBlockGroupGrid
-          btcBlock={btcBlock}
           stxBlocks={allStxBlocks}
           lastStxBlock={lastStxBlockFormatted}
+          stxBlocksLimit={stxBlocksLimit}
           minimized={minimized}
           blocksCount={blocksCount}
           isFirst={isFirst}
@@ -419,7 +433,7 @@ export function BlockListGrouped({
 }: {
   blockList: BlockListData[];
   minimized: boolean;
-  stxBlocksLimit: number;
+  stxBlocksLimit?: number;
 }) {
   return (
     <BlockListGroupedLayout>

diff --git a/src/app/_components/BlockList/Grouped/skeleton.tsx b/src/app/_components/BlockList/Grouped/skeleton.tsx
@@ -165,9 +165,9 @@ export function HomePageBlockListGroupedSkeleton() {
 export function BlocksPageBlockListGroupedSkeleton() {
   return (
     <BurnBlockGroupListSkeleton
-      numBurnBlockGroupsWithTxs={1}
+      numBurnBlockGroupsWithTxs={3}
       numTxsinBurnBlockGroupWithTxs={10}
-      numBurnBlockGroupsWithoutTxs={9}
+      numBurnBlockGroupsWithoutTxs={0}
     />
   );
 }

diff --git a/src/app/_components/BlockList/HomePage/HomePageBlockListUngrouped.tsx b/src/app/_components/BlockList/HomePage/HomePageBlockListUngrouped.tsx
@@ -18,7 +18,7 @@ function HomePageBlockListUngroupedBase() {
     <>
       {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
       <Flex flexDirection="column" gap={5}>
-        <BlockListUngrouped blockList={blockList} stxBlocksLimit={5} minimized={true} />
+        <BlockListUngrouped blockList={blockList} stxBlocksLimit={3} minimized={true} />
         <ListFooter href={'/blocks'} label={'blocks'} />
       </Flex>
     </>