chore: addr blklist feedback. load blks btn + last block

src/app/_components/BlockList/BlockCount.tsx

@@ -1,68 +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={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)}
-        <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>
   );
 });

src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx

@@ -23,12 +23,7 @@ function BlocksPageBlockListGroupedBase() {
     <>
       {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
       <Flex flexDirection="column" gap={4} pt={4}>
-        <BlockListGrouped
-          blockList={blockList}
-          minimized={false}
-          stxBlocksLimit={10}
-          onlyShowStxBlocksForFirstBtcBlock={true}
-        />
+        <BlockListGrouped blockList={blockList} minimized={false} stxBlocksLimit={undefined} />
       </Flex>
       <Box pt={5} pb={5}>
         <ListFooter

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}

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