hirosystems · BLuEScioN · Jun 24, 2024 · Jun 21, 2024
diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockList.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockList.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useRef } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
 
 import { Section } from '../../../../common/components/Section';
 import { Stack } from '../../../../ui/Stack';
@@ -11,41 +11,66 @@
 import { BlocksPageBlockListGrouped } from './BlocksPageBlockListGrouped';
 import { BlocksPageBlockListUngrouped } from './BlocksPageBlockListUngrouped';
 
+export function BlocksPageBlockListLayout({ children }: { children: ReactNode }) {
+  return <Section>{children}</Section>;
+}
+
+export function BlocksPageControlsLayout({
+  liveUpdates,
+  children,
+}: {
+  liveUpdates?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Stack
+      marginX={-6}
+      px={6}
+      py={5}
+      borderBottom={liveUpdates ? '1px solid var(--stacks-colors-borderPrimary)' : 'none'}
+    >
+      {children}
+    </Stack>
+  );
+}
+
 function BlocksPageBlockListBase() {
   const { groupedByBtc, setGroupedByBtc, liveUpdates, setLiveUpdates } = useBlockListContext();
 
   const lastClickTimeRef = useRef(0);
-  const toggleLiveUpdates = useCallback(() => {
-    const now = Date.now();
-    if (now - lastClickTimeRef.current > 2000) {
-      lastClickTimeRef.current = now;
-      setLiveUpdates(!liveUpdates);
-    }
-  }, [liveUpdates, setLiveUpdates]);
+  const toggleLiveUpdates = useCallback(
+    (immediately?: boolean) => {
+      const now = Date.now();
+      if (immediately || now - lastClickTimeRef.current > 2000) {
+        lastClickTimeRef.current = now;
+        setLiveUpdates(!liveUpdates);
+      }
+    },
+    [liveUpdates, setLiveUpdates]
+  );
 
   return (
-    <Section>
-      <Stack
-        marginX={-6}
-        px={6}
-        borderBottom={liveUpdates ? '1px solid var(--stacks-colors-borderPrimary)' : 'none'}
-      >
+    <BlocksPageBlockListLayout>
+      <BlocksPageControlsLayout liveUpdates={liveUpdates}>
         <Controls
           groupByBtc={{
             onChange: () => {
               setGroupedByBtc(!groupedByBtc);
+              if (liveUpdates) {
+                toggleLiveUpdates(true);
+              }
             },
             isChecked: groupedByBtc,
           }}
           liveUpdates={{
-            onChange: toggleLiveUpdates,
+            onChange: () => toggleLiveUpdates(),
             isChecked: liveUpdates,
           }}
           horizontal={true}
         />
-      </Stack>
+      </BlocksPageControlsLayout>
       {groupedByBtc ? <BlocksPageBlockListGrouped /> : <BlocksPageBlockListUngrouped />}
-    </Section>
+    </BlocksPageBlockListLayout>
   );
 }
 

diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { ListFooter } from '../../../../common/components/ListFooter';
 import { Section } from '../../../../common/components/Section';
@@ -17,22 +17,26 @@
   const { liveUpdates } = useBlockListContext();
   const { blockList, updateBlockList, isFetchingNextPage, hasNextPage, fetchNextPage } =
     useBlocksPageBlockListGrouped();
+  const latestBlock = useMemo(() => blockList?.[0], [blockList]);
 
   return (
     <>
-      {!liveUpdates && <UpdateBar onClick={updateBlockList} />}
+      {!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={10}
+          onlyShowStxBlocksForFirstBtcBlock={true}
+        />
       </Flex>
       <Box pt={5} pb={5}>
-        {!liveUpdates && (
-          <ListFooter
-            isLoading={isFetchingNextPage}
-            hasNextPage={hasNextPage}
-            fetchNextPage={fetchNextPage}
-            label={'blocks'}
-          />
-        )}
+        <ListFooter
+          isLoading={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
+          label={'blocks'}
+        />
       </Box>
     </>
   );

diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { ListFooter } from '../../../../common/components/ListFooter';
 import { Section } from '../../../../common/components/Section';
@@ -17,20 +17,19 @@
 
   const { blockList, hasNextPage, fetchNextPage, isFetchingNextPage, updateBlockList } =
     useBlocksPageBlockListUngrouped();
+  const latestBlock = useMemo(() => blockList?.[0], [blockList]);
 
   return (
     <Box pb={6}>
-      {!liveUpdates && <UpdateBar onClick={updateBlockList} />}
-      <BlockListUngrouped blockList={blockList} />
+      {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
+      <BlockListUngrouped blockList={blockList} stxBlocksLimit={10} />
       <Box pt={4}>
-        {!liveUpdates && (
-          <ListFooter
-            isLoading={isFetchingNextPage}
-            hasNextPage={hasNextPage}
-            fetchNextPage={fetchNextPage}
-            label={'blocks'}
-          />
-        )}
+        <ListFooter
+          isLoading={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
+          label={'blocks'}
+        />
       </Box>
     </Box>
   );

diff --git a/src/app/_components/BlockList/Controls.tsx b/src/app/_components/BlockList/Controls.tsx
@@ -21,7 +21,7 @@ export function ControlsLayout({
   children: ReactNode;
 } & FlexProps) {
   return (
-    <Flex py={4} direction={horizontal ? ['column', 'row'] : 'column'} {...rest}>
+    <Flex direction={horizontal ? ['column', 'row'] : 'column'} gap={3} {...rest}>
       {children}
     </Flex>
   );
@@ -35,6 +35,7 @@ export function Controls({ groupByBtc, liveUpdates, horizontal, ...rest }: Contr
         <FormLabel
           htmlFor="group-by-btc"
           mb="0"
+          mr={0}
           fontSize={'14px'}
           lineHeight={'1.5em'}
           fontWeight={400}
@@ -50,6 +51,7 @@ export function Controls({ groupByBtc, liveUpdates, horizontal, ...rest }: Contr
         <FormLabel
           htmlFor="live-updates"
           mb="0"
+          mr={0}
           fontSize={'14px'}
           lineHeight={'1.5em'}
           fontWeight={400}

diff --git a/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx b/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx
@@ -1,4 +1,4 @@
-import { ArrowElbowLeftDown } from '@phosphor-icons/react';
+import { ArrowElbowLeftDown, Clock } from '@phosphor-icons/react';
 import React, { ReactNode, useMemo } from 'react';
 
 import { BlockLink, ExplorerLink } from '../../../../common/components/ExplorerLinks';
@@ -80,12 +80,18 @@
         <LineAndNode rowHeight={14} width={6} icon={icon} isLast={isLast} />
         <BlockLink hash={stxBlock.hash}>
           <Text color="text" fontWeight="medium" fontSize="sm">
-            #{stxBlock.height}
+            #{stxBlock.height} isLast: {isLast?.toString()}
           </Text>
         </BlockLink>
       </Flex>
 
-      <HStack divider={<Caption>∙</Caption>} gap={1} whiteSpace="nowrap" gridColumn="3 / 4">
+      <HStack
+        divider={<Caption>∙</Caption>}
+        gap={1}
+        whiteSpace="nowrap"
+        gridColumn="3 / 4"
+        justifyContent="flex-end"
+      >
         <BlockLink hash={stxBlock.hash}>
           <Text color="textSubdued" fontWeight="medium" fontSize="xs" whiteSpace="nowrap">
             {truncateMiddle(stxBlock.hash, 3)}
@@ -176,7 +182,7 @@
             stxBlock={stxBlock}
             minimized={minimized}
             isFirst={i === 0}
-            isLast={i === stxBlocks.length - 1 && numStxBlocksNotDisplayed === 0}
+            isLast={i === stxBlocks.length - 1 && numStxBlocksNotDisplayed <= 0}
           />
           {i < stxBlocks.length - 1 && (
             <Box gridColumn={'1/5'} borderBottom={'1px'} borderColor="borderSecondary"></Box>
@@ -206,35 +212,52 @@
       px={PADDING}
       borderBottom={minimized ? '1px solid var(--stacks-colors-borderPrimary)' : 'none'}
       flexWrap={'wrap'}
+      // height={5}
     >
       <Flex alignItems={'center'} gap={1.5} flexWrap={'nowrap'}>
-        <Icon as={ArrowElbowLeftDown} size={3.5} color={'textSubdued'} />
+        <Icon as={ArrowElbowLeftDown} size={3.5} color="textSubdued" />
         <Icon as={BitcoinIcon} size={4.5} />
         {isFirst ? (
-          <Text fontSize="sm" color={'textSubdued'}>
-            {btcBlock.height}
-          </Text>
+          <Flex height="full" alignItems="center">
+            <Text fontSize="sm" color="textSubdued">
+              Next Bitcoin block
+            </Text>
+          </Flex>
         ) : (
-          <ExplorerLink fontSize="sm" color={'textSubdued'} href={`/btcblock/${btcBlock.hash}`}>
-            #{btcBlock.height}
-          </ExplorerLink>
+          <Flex height="full" alignItems="center">
+            <ExplorerLink
+              fontSize="sm"
+              color="textSubdued"
+              href={`/btcblock/${btcBlock.hash}`}
+              height="full"
+            >
+              #{btcBlock.height}
+            </ExplorerLink>
+          </Flex>
         )}
       </Flex>
-      <HStack divider={<Caption>∙</Caption>} gap={1} flexWrap={'wrap'}>
+      <Box>
         {isFirst ? (
-          <Text fontSize="xs" color={'textSubdued'} whiteSpace={'nowrap'}>
-            {truncateMiddle(btcBlock.hash, 6)}
-          </Text>
+          <Flex gap={1} alignItems="center">
+            <Icon as={Clock} size={4} color="iconSubdued" />
+            <Text color="textSubdued" fontSize="xs">
+              Unconfirmed
+            </Text>
+          </Flex>
         ) : (
-          <ExplorerLink
-            fontSize="xs"
-            color={'textSubdued'}
-            href={`/btcblock/${btcBlock.hash}`}
-            whiteSpace={'nowrap'}
-          ></ExplorerLink>
+          <HStack divider={<Caption>∙</Caption>} gap={1} flexWrap={'wrap'}>
+            <ExplorerLink
+              fontSize="xs"
+              color="textSubdued"
+              href={`/btcblock/${btcBlock.hash}`}
+              whiteSpace={'nowrap'}
+            >
+              {truncateMiddle(btcBlock.hash, 6)}
+            </ExplorerLink>
+            <Timestamp ts={btcBlock.timestamp} whiteSpace={'nowrap'} />
+          </HStack>
         )}
-        <Timestamp ts={btcBlock.timestamp} whiteSpace={'nowrap'} />
-      </HStack>
+      </Box>
     </Flex>
   );
 }
@@ -266,12 +289,14 @@
   isFirst,
   stxBlocksLimit,
   minimized = false,
+  onlyShowStxBlocksForFirstBtcBlock,
 }: {
   btcBlock: BlockListBtcBlock;
   stxBlocks: BlockListStxBlock[];
   isFirst: boolean;
   stxBlocksLimit?: number;
   minimized?: boolean;
+  onlyShowStxBlocksForFirstBtcBlock?: boolean;
 }) {
   const unaccountedStxBlocks = btcBlock.blockCount ? stxBlocks.length - btcBlock.blockCount : 0;
   const unaccountedTxs = useMemo(
@@ -293,21 +318,30 @@
       ? btcBlock.blockCount + unaccountedStxBlocks
       : btcBlock.blockCount
     : undefined;
-  const numStxBlocksNotDisplayed = blocksCount ? blocksCount - (stxBlocksLimit || 0) : 0;
+  const numStxBlocksNotDisplayed =
+    onlyShowStxBlocksForFirstBtcBlock && !isFirst
+      ? blocksCount
+        ? blocksCount
+        : 0
+      : blocksCount
+        ? blocksCount - (stxBlocksLimit || 0)
+        : 0;
   const displayedStxBlocks = useMemo(
     () => (stxBlocksLimit ? stxBlocks.slice(0, stxBlocksLimit) : stxBlocks),
     [stxBlocks, stxBlocksLimit]
   );
   return (
     <Box border={'1px'} rounded={'lg'} p={PADDING}>
       <BitcoinHeader btcBlock={btcBlock} minimized={minimized} isFirst={isFirst} />
-      <ScrollableBox>
-        <BurnBlockGroupGrid
-          stxBlocks={displayedStxBlocks}
-          minimized={minimized}
-          numStxBlocksNotDisplayed={numStxBlocksNotDisplayed}
-        />
-      </ScrollableBox>
+      {onlyShowStxBlocksForFirstBtcBlock && !isFirst ? null : (
+        <ScrollableBox>
+          <BurnBlockGroupGrid
+            stxBlocks={displayedStxBlocks}
+            minimized={minimized}
+            numStxBlocksNotDisplayed={numStxBlocksNotDisplayed}
+          />
+        </ScrollableBox>
+      )}
       {numStxBlocksNotDisplayed > 0 ? (
         <BlockCount
           count={numStxBlocksNotDisplayed}
@@ -334,10 +368,12 @@
   blockList,
   minimized,
   stxBlocksLimit,
+  onlyShowStxBlocksForFirstBtcBlock,
 }: {
   blockList: BlockListData[];
   minimized: boolean;
   stxBlocksLimit?: number;
+  onlyShowStxBlocksForFirstBtcBlock?: boolean;
 }) {
   return (
     <BlockListGroupedLayout>
@@ -349,6 +385,7 @@
           minimized={minimized}
           stxBlocksLimit={stxBlocksLimit}
           isFirst={i === 0}
+          onlyShowStxBlocksForFirstBtcBlock={onlyShowStxBlocksForFirstBtcBlock}
         />
       ))}
     </BlockListGroupedLayout>