feat: redesign - homepage - recent-blocks: BTC view

src/app/PageClient.tsx

@@ -7,9 +7,11 @@
 
 import { DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
 import { useGlobalContext } from '../common/context/useGlobalContext';
+import { isRedesignUrl } from '../common/utils/url-utils';
 import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
 import { HomePageBlockListSkeleton } from './_components/BlockList/Grouped/skeleton';
 import { PageTitle } from './_components/PageTitle';
+import { RecentBlocks } from './_components/RecentBlocks/RecentBlocks';
 import { Stats } from './_components/Stats/Stats';
 import HomePageSkeleton from './skeleton';
 
@@ -33,8 +35,10 @@
   txListTabs: ReactNode;
   blockList: ReactNode;
 }) {
+  const isRedesign = isRedesignUrl();
   return (
     <>
+      {isRedesign && <RecentBlocks />}
       {title}
       {stats}
       <Grid

src/app/_components/BlockList/Grouped/BlockListGrouped.tsx

@@ -10,7 +10,7 @@
 import { useBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock';
 import { truncateMiddle } from '../../../../common/utils/utils';
 import { Text } from '../../../../ui/Text';
-import BitcoinIcon from '../../../../ui/icons/BitcoinIcon';
+import BitcoinCircleIcon from '../../../../ui/icons/BitcoinCircleIcon';
 import StxIcon from '../../../../ui/icons/StxIcon';
 import { Caption } from '../../../../ui/typography';
 import { ListHeader } from '../../ListHeader';
@@ -264,7 +264,7 @@
           <ArrowElbowLeftDown />
         </Icon>
         <Icon h={4.5} w={4.5}>
-          <BitcoinIcon />
+          <BitcoinCircleIcon />
         </Icon>
         <Flex height="full" alignItems="center">
           <ExplorerLink

src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx

@@ -10,7 +10,7 @@
 import { useBlocksByBurnBlock } from '../../../../common/queries/useBlocksByBurnBlock';
 import { truncateMiddle } from '../../../../common/utils/utils';
 import { Text } from '../../../../ui/Text';
-import BitcoinIcon from '../../../../ui/icons/BitcoinIcon';
+import BitcoinCircleIcon from '../../../../ui/icons/BitcoinCircleIcon';
 import StxIcon from '../../../../ui/icons/StxIcon';
 import { Caption } from '../../../../ui/typography';
 import { ListHeader } from '../../ListHeader';
@@ -60,7 +60,7 @@
           <ArrowBendDownLeft />
         </Icon>
         <Icon h={18} w={18} position={'relative'} bottom={'1px'}>
-          <BitcoinIcon />
+          <BitcoinCircleIcon />
         </Icon>
         {isFirst ? (
           <Text fontSize="sm" color="textSubdued" fontWeight="medium">

src/app/_components/NavBar/BtcStxPrice.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from 'react';
 import { Circle } from '../../../common/components/Circle';
 import { TokenPrice } from '../../../common/types/tokenPrice';
 import { usdFormatter } from '../../../common/utils/utils';
-import BitcoinIcon from '../../../ui/icons/BitcoinIcon';
+import BitcoinCircleIcon from '../../../ui/icons/BitcoinCircleIcon';
 import StxIcon from '../../../ui/icons/StxIcon';
 import { ExplorerErrorBoundary } from '../ErrorBoundary';
 
@@ -33,7 +33,7 @@ function BtcStxPriceBase({ tokenPrice }: { tokenPrice: TokenPrice }) {
       <PriceContainer
         icon={
           <Icon h={4.5} w={4.5}>
-            <BitcoinIcon />
+            <BitcoinCircleIcon />
           </Icon>
         }
         minWidth={'92px'}

src/app/_components/PageWrapper.tsx

@@ -57,17 +57,20 @@
 }) {
   const [clientThemeCookie] = useCookies(['stacks-explorer-theme']);
   const isServer = typeof window === 'undefined';
-  const bgColor = isServer
-    ? serverThemeCookie
-      ? serverThemeCookie === 'light'
-        ? lightBg
-        : darkBg
-      : lightBg
-    : clientThemeCookie['stacks-explorer-theme']
-      ? clientThemeCookie['stacks-explorer-theme'] === 'light'
-        ? lightBg
-        : darkBg
-      : lightBg;
+  const isRedesign = isRedesignUrl();
+  const bgColor = isRedesign
+    ? 'surfaceTertiary'
+    : isServer
+      ? serverThemeCookie
+        ? serverThemeCookie === 'light'
+          ? lightBg
+          : darkBg
+        : lightBg
+      : clientThemeCookie['stacks-explorer-theme']
+        ? clientThemeCookie['stacks-explorer-theme'] === 'light'
+          ? lightBg
+          : darkBg
+        : lightBg;
   return (
     <StyledWrapper bg={bgColor} className="wrapper-with-bg">
       {children}

src/app/_components/RecentBlocks/BtcBlock.tsx

@@ -0,0 +1,180 @@
+import { Flex, HStack, Icon, Stack } from '@chakra-ui/react';
+import { CaretRight } from '@phosphor-icons/react';
+
+import { BurnBlock } from '@stacks/blockchain-api-client';
+
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
+import { Text } from '../../../ui/Text';
+import BitcoinCircleIcon from '../../../ui/icons/BitcoinCircleIcon';
+import StxSquareIcon from '../../../ui/icons/StxSquareIcon';
+import { BORDER_WIDTH, BTC_BLOCK_WIDTH, RING_WIDTH } from './consts';
+import { formatTimestamp } from './utils';
+
+export function BtcBlock({ burnBlock }: { burnBlock: BurnBlock }) {
+  const { btcBlockBaseUrl } = useGlobalContext().activeNetwork;
+  return (
+    <Flex
+      bg={
+        'linear-gradient(to bottom, var(--stacks-colors-accent-bitcoin-500), var(--stacks-colors-surface-primary))'
+      }
+      padding={`${BORDER_WIDTH}px`}
+      borderRadius={`calc(var(--stacks-radii-redesign-lg) + ${BORDER_WIDTH}px)`}
+      _hover={{
+        bg: 'var(--stacks-colors-accent-bitcoin-500)',
+        '& .block-height': { textDecoration: 'underline' },
+        '& .stacks-blocks-count': { color: 'textPrimary' },
+      }}
+      cursor={'pointer'}
+      asChild
+    >
+      <a
+        href={`${btcBlockBaseUrl}/${burnBlock.burn_block_height}`}
+        target={'_blank'}
+        rel="noreferrer"
+      >
+        <Stack
+          position="relative"
+          gap={0}
+          width={BTC_BLOCK_WIDTH}
+          p={3}
+          bg="surfacePrimary"
+          borderRadius="redesign.lg"
+          flex="0 0 auto"
+        >
+          <Stack gap={4}>
+            <Stack gap={2}>
+              <HStack gap={0} justifyContent={'space-between'}>
+                <HStack
+                  gap={1.5}
+                  px={1.5}
+                  py={1}
+                  borderRadius={'redesign.sm'}
+                  bg={'surfaceSecondary'}
+                >
+                  <Icon w={4} h={4}>
+                    <BitcoinCircleIcon />
+                  </Icon>
+                  <Text textStyle={'text-mono-sm'} color={'textPrimary'} className={'block-height'}>
+                    #{burnBlock.burn_block_height}
+                  </Text>
+                </HStack>
+                <Icon w={4} h={4} color={'iconTertiary'}>
+                  <CaretRight />
+                </Icon>
+              </HStack>
+              <Text textStyle={'text-medium-xs'} color={'textSecondary'}>
+                {formatTimestamp(burnBlock.burn_block_time)}
+              </Text>
+            </Stack>
+            <HStack gap={1.5} p={2} borderRadius={'redesign.md'} bg={'surfaceSecondary'}>
+              <Icon w={4} h={4} color={'iconTertiary'}>
+                <StxSquareIcon />
+              </Icon>
+              <Text
+                textStyle={'text-medium-xs'}
+                color={'textSecondary'}
+                className={'stacks-blocks-count'}
+              >
+                {burnBlock.stacks_blocks.length} Stacks blocks
+              </Text>
+            </HStack>
+          </Stack>
+        </Stack>
+      </a>
+    </Flex>
+  );
+}
+
+export function NewestBtcBlock({ burnBlock }: { burnBlock: BurnBlock }) {
+  const { btcBlockBaseUrl } = useGlobalContext().activeNetwork;
+  return (
+    <Flex
+      bg={
+        'linear-gradient(to bottom, var(--stacks-colors-alpha-bitcoin-500-alpha-15), var(--stacks-colors-alpha-bitcoin-200-alpha-15))'
+      }
+      padding={`${RING_WIDTH}px`}
+      borderRadius={`calc(var(--stacks-radii-redesign-lg) + ${BORDER_WIDTH + RING_WIDTH * 2}px)`}
+      my={`-${RING_WIDTH * 2}px`}
+      asChild
+      _hover={{
+        bg: 'linear-gradient(to bottom, var(--stacks-colors-alpha-bitcoin-500-alpha-25), var(--stacks-colors-alpha-bitcoin-200-alpha-25))',
+        '& .block-height': { textDecoration: 'underline' },
+      }}
+      role={'group'}
+    >
+      <a
+        href={`${btcBlockBaseUrl}/${burnBlock.burn_block_height}`}
+        target={'_blank'}
+        rel="noreferrer"
+      >
+        <Flex
+          bg={
+            'linear-gradient(to bottom, var(--stacks-colors-alpha-bitcoin-500-alpha-40), var(--stacks-colors-alpha-bitcoin-200-alpha-40))'
+          }
+          padding={`${RING_WIDTH}px`}
+          borderRadius={`calc(var(--stacks-radii-redesign-lg) + ${BORDER_WIDTH + RING_WIDTH}px)`}
+          _hover={{
+            bg: 'linear-gradient(to bottom, var(--stacks-colors-alpha-bitcoin-500-alpha-60), var(--stacks-colors-alpha-bitcoin-200-alpha-60))',
+          }}
+        >
+          <Flex
+            bg={
+              'linear-gradient(to bottom, var(--stacks-colors-alpha-bitcoin-500-alpha-75), var(--stacks-colors-accent-stacks-400))'
+            }
+            padding={`${BORDER_WIDTH}px`}
+            borderRadius={`calc(var(--stacks-radii-redesign-lg) + ${BORDER_WIDTH}px)`}
+          >
+            <Stack
+              position="relative"
+              gap={0}
+              width="184px"
+              p={3}
+              bg="surfacePrimary"
+              borderRadius="redesign.lg"
+              flex="0 0 auto"
+            >
+              <Stack gap={4}>
+                <Stack gap={2}>
+                  <HStack gap={0} justifyContent={'space-between'}>
+                    <HStack
+                      gap={1.5}
+                      px={1.5}
+                      py={1}
+                      borderRadius={'redesign.sm'}
+                      bg={'surfaceSecondary'}
+                    >
+                      <Icon w={4} h={4}>
+                        <BitcoinCircleIcon />
+                      </Icon>
+                      <Text
+                        textStyle={'text-mono-sm'}
+                        color={'textPrimary'}
+                        className={'block-height'}
+                      >
+                        #{burnBlock.burn_block_height}
+                      </Text>
+                    </HStack>
+                    <Icon w={4} h={4} color={'iconTertiary'}>
+                      <CaretRight />
+                    </Icon>
+                  </HStack>
+                  <Text textStyle={'text-medium-xs'} color={'textSecondary'}>
+                    {formatTimestamp(burnBlock.burn_block_time)}
+                  </Text>
+                </Stack>
+                <HStack gap={1.5} p={2} borderRadius={'redesign.md'} bg={'surfaceSecondary'}>
+                  <Icon w={4} h={4} color={'iconTertiary'}>
+                    <StxSquareIcon />
+                  </Icon>
+                  <Text textStyle={'text-medium-xs'} color={'textPrimary'}>
+                    {burnBlock.stacks_blocks.length} Stacks blocks
+                  </Text>
+                </HStack>
+              </Stack>
+            </Stack>
+          </Flex>
+        </Flex>
+      </a>
+    </Flex>
+  );
+}

src/app/_components/RecentBlocks/NewBlockPlaceholder.tsx

@@ -0,0 +1,77 @@
+import { Box, Icon, Stack } from '@chakra-ui/react';
+import { ArrowsClockwise } from '@phosphor-icons/react';
+import { useEffect, useRef, useState } from 'react';
+
+import { StacksApiSocketClient } from '@stacks/blockchain-api-client';
+
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
+import { Text } from '../../../ui/Text';
+import { BTC_BLOCK_WIDTH, EMPTY_BTC_BLOCK_WIDTH } from './consts';
+
+export function NewBlockPlaceholder({
+  newestBtcBlockHeight,
+  refetch,
+}: {
+  newestBtcBlockHeight: number;
+  refetch: () => void;
+}) {
+  const [hasNewBlocks, setHasNewBlocks] = useState(false);
+  const { activeNetwork } = useGlobalContext();
+  const lastBlockHeightRef = useRef(newestBtcBlockHeight);
+
+  useEffect(() => {
+    lastBlockHeightRef.current = newestBtcBlockHeight;
+    setHasNewBlocks(false);
+  }, [newestBtcBlockHeight]);
+
+  useEffect(() => {
+    const socketClient = new StacksApiSocketClient({ url: activeNetwork.url });
+
+    const blocksWebsocket = socketClient.subscribeBlocks(block => {
+      if (block.burn_block_height > lastBlockHeightRef.current) {
+        setHasNewBlocks(true);
+        blocksWebsocket.unsubscribe();
+      }
+    });
+
+    return () => {
+      blocksWebsocket.unsubscribe();
+    };
+  }, [activeNetwork.url]);
+
+  return (
+    <Stack
+      width={hasNewBlocks ? BTC_BLOCK_WIDTH : EMPTY_BTC_BLOCK_WIDTH}
+      border="1px dashed var(--stacks-colors-accent-bitcoin-500)"
+      flex="0 0 auto"
+      alignItems="center"
+      justifyContent="center"
+      gap={1.5}
+      p={5}
+      borderRadius={hasNewBlocks ? 'redesign.lg' : 'redesign.xs'}
+      transition="all 0.2s ease-in-out"
+      cursor={hasNewBlocks ? 'pointer' : 'default'}
+      onClick={hasNewBlocks ? refetch : undefined}
+      boxShadow={hasNewBlocks ? '0px 4px 12px 0px rgba(255, 145, 0, 0.25)' : undefined}
+    >
+      <Box opacity={hasNewBlocks ? 1 : 0} transition="opacity 0.2s ease-in-out">
+        <Text textStyle="text-medium-sm" color="textTertiary" textAlign="center" lineClamp={2}>
+          New blocks have been mined.
+        </Text>
+        <Text
+          textStyle="text-medium-sm"
+          color="textSecondary"
+          display="flex"
+          gap={1.5}
+          alignItems="center"
+          justifyContent="center"
+        >
+          Update
+          <Icon w={3.5} h={3.5}>
+            <ArrowsClockwise />
+          </Icon>
+        </Text>
+      </Box>
+    </Stack>
+  );
+}