feat: ui updates

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.136.2](https://github.com/hirosystems/explorer/compare/v1.136.1...v1.136.2) (2023-12-27)
+
+
+### Bug Fixes
+
+* api url search param ([d71b374](https://github.com/hirosystems/explorer/commit/d71b374f8cfc16298b34515c5588b3e454de194a))
+
 ## [1.136.1](https://github.com/hirosystems/explorer/compare/v1.136.0...v1.136.1) (2023-12-27)
 
 

src/app/_components/AppConfig.tsx

@@ -7,6 +7,7 @@
 
 import { useAppSelector } from '../../common/state/hooks';
 import { NetworkMode } from '../../common/types/network';
+import { Text } from '../../ui/Text';
 import { selectUserSession } from '../sandbox/sandbox-slice';
 
 export const AppConfig: React.FC<{
@@ -18,7 +19,7 @@
   const userSession = useAppSelector(selectUserSession);
   useEffect(() => {
     toast(
-      <div>
+      <Text fontSize={'sm'}>
         You're viewing {querySubnet ? 'a subnet' : `the ${queryNetworkMode}`}
         {querySubnet || queryApiUrl ? (
           <>
@@ -27,7 +28,7 @@
           </>
         ) : null}{' '}
         Explorer
-      </div>,
+      </Text>,
       {
         id: 'network-mode-toast',
         style: {

src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx

@@ -1,12 +1,16 @@
 'use client';
 
+import { ScaleFade, SlideFade } from '@chakra-ui/react';
 import { FC, memo, useEffect, useState } from 'react';
 
+import { Box } from '../../../ui/Box';
+import { Button } from '../../../ui/Button';
 import { Collapse } from '../../../ui/Collapse';
+import { useDisclosure } from '../../../ui/hooks/useDisclosure';
 import { BlockAndMicroblocksItem } from './BlockAndMicroblocksItem';
 import { EnhancedBlock } from './types';
 
-export const animationDuration = 0.25;
+export const animationDuration = 0.8;
 
 export const AnimatedBlockAndMicroblocksItem: FC<{
   block: EnhancedBlock;
@@ -16,7 +20,9 @@ export const AnimatedBlockAndMicroblocksItem: FC<{
     const [show, setShow] = useState(!block.animate);
     useEffect(() => {
       if (block.animate) {
-        setShow(true);
+        setTimeout(() => {
+          setShow(true);
+        }, 100);
       }
     }, [block.animate]);
     useEffect(() => {
@@ -26,22 +32,26 @@ export const AnimatedBlockAndMicroblocksItem: FC<{
     }, [block.destroy]);
 
     return (
-      <Collapse
-        in={show}
-        animateOpacity
-        transition={{
-          enter: { duration: animationDuration },
-          exit: { duration: animationDuration },
-        }}
-        onAnimationComplete={state => {
-          if (state === 'exit') {
-            onAnimationExit?.();
-          }
-        }}
-        data-testid={`block-item-${block.hash}`}
-      >
-        <BlockAndMicroblocksItem block={block} />
-      </Collapse>
+      <>
+        <Box borderBottom={'1px'} _last={{ borderBottom: 'none' }}>
+          <Collapse
+            in={show}
+            animateOpacity
+            transition={{
+              enter: { duration: animationDuration },
+              exit: { duration: animationDuration },
+            }}
+            onAnimationComplete={state => {
+              if (state === 'exit') {
+                onAnimationExit?.();
+              }
+            }}
+            data-testid={`block-item-${block.hash}`}
+          >
+            <BlockAndMicroblocksItem block={block} />
+          </Collapse>
+        </Box>
+      </>
     );
   },
   (prevProps, currentProps) =>

src/app/_components/BlockList/BlockAndMicroblocksItem.tsx

@@ -2,7 +2,6 @@ import React, { memo } from 'react';
 
 import { Block } from '@stacks/stacks-blockchain-api-types';
 
-import { useVerticallyStackedElementsBorderStyle } from '../../../common/hooks/useVerticallyStackedElementsBorderStyle';
 import { AccordionButton } from '../../../ui/AccordionButton';
 import { AccordionIcon } from '../../../ui/AccordionIcon';
 import { AccordionItem } from '../../../ui/AccordionItem';
@@ -15,7 +14,11 @@ import { MicroblockListItem } from './MicroblockListItem';
 export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = memo(
   ({ block }) => {
     return (
-      <AccordionItem pl={'20px'} border={'none'}>
+      <AccordionItem
+        border={'none'}
+        borderBottom={'1px solid var(--stacks-colors-border)'}
+        _last={{ border: 'none' }}
+      >
         <Flex gap={'6px'}>
           <BlockListItem block={block} data-test={`block-${block.hash}`} />
           <AccordionButton
@@ -29,7 +32,7 @@ export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = memo(
             <AccordionIcon />
           </AccordionButton>
         </Flex>
-        <AccordionPanel p={'0 30px 0 0'} css={useVerticallyStackedElementsBorderStyle}>
+        <AccordionPanel p={'0 30px 0 0'}>
           {!!block.microblocks_accepted?.length ? (
             block.microblocks_accepted.map((microblockHash, microblockIndex) => (
               <MicroblockListItem

src/app/_components/BlockList/BlockListItem.tsx

@@ -4,33 +4,21 @@ import React from 'react';
 import { Block } from '@stacks/stacks-blockchain-api-types';
 
 import { BtcStxBlockLinks } from '../../../common/components/BtcStxBlockLinks';
-import { BlockLink } from '../../../common/components/ExplorerLinks';
 import { TwoColsListItem } from '../../../common/components/TwoColumnsListItem';
 import { addSepBetweenStrings, toRelativeTime, truncateMiddle } from '../../../common/utils/utils';
-import { Circle } from '../../../ui/Circle';
 import { Flex, FlexProps } from '../../../ui/Flex';
-import { Icon } from '../../../ui/Icon';
-import { CheckIcon } from '../../../ui/icons';
 import { Caption, Text } from '../../../ui/typography';
 
 export const BlockListItem: React.FC<{ block: Block } & FlexProps> = React.memo(
   ({ block, ...rest }) => {
     return (
       <TwoColsListItem
-        icon={
-          <BlockLink hash={block.hash}>
-            <Circle size="40px">
-              <Icon as={CheckIcon} size="16px" color={'textCaption.light'} />
-            </Circle>
-          </BlockLink>
-        }
         leftContent={{
           title: (
             <Flex
               onClick={e => {
                 e.stopPropagation();
               }}
-              color={'textTitle'}
               alignItems="center"
             >
               <BtcStxBlockLinks
@@ -42,7 +30,7 @@ export const BlockListItem: React.FC<{ block: Block } & FlexProps> = React.memo(
             </Flex>
           ),
           subtitle: (
-            <Caption display="block">
+            <Caption display="block" color={'secondaryText'}>
               {addSepBetweenStrings([
                 `${block?.microblocks_accepted?.length || 0} ${pluralize(
                   'microblock',
@@ -57,19 +45,8 @@ export const BlockListItem: React.FC<{ block: Block } & FlexProps> = React.memo(
           ),
         }}
         rightContent={{
-          title: (
-            <Text
-              fontSize="14px"
-              width="100%"
-              textAlign="right"
-              color={'textBody'}
-              display="block"
-              suppressHydrationWarning={true}
-            >
-              {toRelativeTime(block.burn_block_time * 1000)}
-            </Text>
-          ),
-          subtitle: <Caption display="block">{truncateMiddle(block.hash)}</Caption>,
+          title: toRelativeTime(block.burn_block_time * 1000),
+          subtitle: truncateMiddle(block.hash),
         }}
         {...rest}
       />

src/app/_components/BlockList/BlockListWithControls.tsx

@@ -50,7 +50,7 @@ export function BlockListWithControls() {
     <SectionWithControls
       title="Recent Blocks"
       controls={
-        <Stack spacing={'6px'}>
+        <Stack gap={1.5}>
           <Flex justifyContent={'space-between'}>
             <FormControl display="flex" alignItems="center" gap={'12px'} minW={0}>
               <Switch
@@ -158,7 +158,7 @@ export function BlockListWithControls() {
             </Text>
             <TextLink
               href={'javascript:void(0)'}
-              color={`brand.${colorMode}`}
+              color={`brand`}
               _hover={{ textDecoration: 'underline' }}
               onClick={() => {
                 setLoading(true);
@@ -187,20 +187,9 @@ export function BlockListWithControls() {
         </Stack>
       }
       footer={
-        <>
-          <Button
-            width={'100%'}
-            backgroundColor={'#fff'}
-            color={'#242629'}
-            fontWeight={500}
-            borderWidth={'1px'}
-            _hover={{
-              backgroundColor: '#F9F9FA',
-            }}
-          >
-            View all recent blocks <Icon as={HiMiniArrowUpRight} width={'16px'} height={'16px'} />
-          </Button>
-        </>
+        <Button width={'full'} variant={'secondary'}>
+          View all recent blocks <Icon as={HiMiniArrowUpRight} size={4} />
+        </Button>
       }
     ></SectionWithControls>
   );

src/app/_components/BlockList/MicroblockListItem.tsx

@@ -2,10 +2,11 @@ import { useColorMode } from '@chakra-ui/react';
 import React from 'react';
 import { FiZap } from 'react-icons/fi';
 
+import { Circle } from '../../../common/components/Circle';
 import { MicroBlockLink } from '../../../common/components/ExplorerLinks';
 import { toRelativeTime } from '../../../common/utils/utils';
-import { Circle } from '../../../ui/Circle';
 import { Flex } from '../../../ui/Flex';
+import { HStack } from '../../../ui/HStack';
 import { Icon } from '../../../ui/Icon';
 import { Stack } from '../../../ui/Stack';
 import { Caption, Text, Title } from '../../../ui/typography';
@@ -19,28 +20,21 @@ export const MicroblockListItem: React.FC<{
     <Flex
       justifyContent="space-between"
       py="24px"
-      color={'textBody'}
       _hover={{
         borderLeftColor: 'accent',
       }}
       {...rest}
     >
-      <Stack as="span" isInline alignItems="center" spacing="16px" minWidth={0}>
+      <HStack as="span" alignItems="center" gap={4} minWidth={0}>
         <Circle size="40px" flexShrink={0}>
           <Icon as={FiZap} size="16px" fill={'textCaption.light'} color={'textCaption.light'} />
         </Circle>
-        <Stack spacing="8px" as="span" minWidth={0}>
+        <Stack gap={2} as="span" minWidth={0}>
           <Flex alignItems="center" minWidth={0}>
             <MicroBlockLink hash={hash}>
               <Title
                 display="block"
-                fontSize={'14px'}
-                as="a"
-                color={`links.${useColorMode().colorMode}`}
-                _hover={{
-                  cursor: 'pointer',
-                  textDecoration: 'underline',
-                }}
+                fontSize={'sm'}
                 minWidth={0}
                 textOverflow={'ellipsis'}
                 overflow={'hidden'}
@@ -52,8 +46,8 @@ export const MicroblockListItem: React.FC<{
           </Flex>
           <Caption display="block">Microblock</Caption>
         </Stack>
-      </Stack>
-      <Stack spacing="8px" textAlign="right" as="span" minWidth={'80px'}>
+      </HStack>
+      <Stack gap={2} textAlign="right" as="span" minWidth={'80px'}>
         <Text
           fontSize="14px"
           width="100%"

src/app/_components/BlockList/SkeletonBlockList.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { Section } from '../../../common/components/Section';
+import { TwoColumnsListItemSkeleton } from '../../../common/components/TwoColumnsListItemSkeleton';
+
+export const SkeletonBlockList = () => {
+  return (
+    <Section title="Recent Blocks">
+      {[...Array(10)].map((_, i) => (
+        <TwoColumnsListItemSkeleton
+          key={i}
+          leftContentSubtitle
+          leftContentTitle
+          rightContentSubtitle
+          rightContentTitle
+        />
+      ))}
+    </Section>
+  );
+};

src/app/_components/BlockList/__tests__/BlocksListBase.test.tsx

@@ -1,4 +1,3 @@
-import { hash } from '@noble/hashes/_assert';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
@@ -10,6 +9,7 @@ import {
 import { Block } from '@stacks/stacks-blockchain-api-types';
 
 import { useSuspenseBlockListInfinite as useSuspenseBlockListInfiniteActual } from '../../../../common/queries/useBlockListInfinite';
+import '../../../../common/utils/test-utils/matchMedia.mock';
 import { BlocksList } from '../index';
 import { EnhancedBlock } from '../types';