feat(ui-updates): completed ui updates

CHANGELOG.md

@@ -1,3 +1,33 @@
+# [1.145.0](https://github.com/hirosystems/explorer/compare/v1.144.1...v1.145.0) (2024-02-13)
+
+
+### Features
+
+* block page layout A ([a2774f3](https://github.com/hirosystems/explorer/commit/a2774f3d60931d811e4f6e0790e1996ceb21f7cb))
+
+## [1.144.1](https://github.com/hirosystems/explorer/compare/v1.144.0...v1.144.1) (2024-02-05)
+
+
+### Bug Fixes
+
+* hello world contract ([9b29136](https://github.com/hirosystems/explorer/commit/9b2913690f592a4776814f5614b4fb51b3d7397e))
+
+# [1.144.0](https://github.com/hirosystems/explorer/compare/v1.143.3...v1.144.0) (2024-01-24)
+
+
+### Features
+
+* block list layout a ([a826ac1](https://github.com/hirosystems/explorer/commit/a826ac1c7120ec4f40df735319257555b9c316db))
+
+## [1.143.3](https://github.com/hirosystems/explorer/compare/v1.143.2...v1.143.3) (2024-01-23)
+
+
+### Bug Fixes
+
+* **sip-10:** captured error and no longer show unknown error for non sip 10 fts ([60386af](https://github.com/hirosystems/explorer/commit/60386af783b5eef8b7eda70fffdcb4d10d9d618e))
+* **sip-10:** cleaning pr ([ba521ce](https://github.com/hirosystems/explorer/commit/ba521ce5af0ff1442d22b30af48060d82cba5244))
+* **sip-10:** cleaning pr ([0fe84ab](https://github.com/hirosystems/explorer/commit/0fe84abc6aa7d2030fdd7d1e70a82a7e18d729af))
+
 ## [1.143.2](https://github.com/hirosystems/explorer/compare/v1.143.1...v1.143.2) (2024-01-12)
 
 

README.md

@@ -15,7 +15,7 @@
 
 # Stacks Explorer
 
-The [Stacks Explorer](https://explorer.hiro.so/) is an observability tool that helps users, developers, miners, and investors understand the Stacks Blockchain. It's built with [React](https://reactjs.org/), [next.js](https://github.com/zeit/next.js) and [Chakra UI](https://chakra-ui.com/).
+The [Stacks Explorer](https://explorer.hiro.so/) is an observability tool that helps users, developers, miners, and investors understand the Stacks Blockchain. It's built with [React](https://reactjs.org/), [next.js](https://nextjs.org/) and [Chakra UI](https://chakra-ui.com/).
 
 This README will guide you through the process of setting up and running the Stacks Explorer locally and how to contribute to the project.
 
@@ -27,7 +27,7 @@ If you encounter a bug or have a feature request for the Stacks Explorer, we enc
  1. **Open a new issue:** If it hasn't been addressed, please [open a new issue](https://github.com/hirosystems/explorer/issues/new/choose). Choose the appropriate issue template and provide as much detail as possible, including steps to reproduce the bug or a clear description of the requested feature.
  1. **Evaluation SLA:** Our team reads and evaluates all the issues and pull requests. We are avaliable Monday to Friday and we make a best effort to respond within 7 business days.
 
-Please **do not** use the issue tracker for personal support requests or to ask for the status of a transaction. You'll find help at the [#support Discord channel](https://discord.gg/SK3DxdsP).
+Please **do not** use the issue tracker for personal support requests or to ask for the status of a transaction. You'll find help at the [#support Discord channel](https://discord.com/channels/621759717756370964/625538774230892545).
 
 
 ## Contributing

codecov.yml

@@ -1,2 +1,3 @@
 ignore:
-  "src/ui"
+  - "src/ui"
+  - "src/common/debug.ts"

src/app/PageClient.tsx

@@ -1,36 +1,49 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import * as React from 'react';
 
 import { DEFAULT_BLOCKS_LIST_LIMIT, DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
 import { useGlobalContext } from '../common/context/useAppContext';
 import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
-import { Flex } from '../ui/Flex';
 import { Grid } from '../ui/Grid';
-import { useColorMode } from '../ui/hooks/useColorMode';
 import { SkeletonBlockList } from './_components/BlockList/SkeletonBlockList';
 import { PageTitle } from './_components/PageTitle';
 import { Stats } from './_components/Stats/Stats';
 
+const NonPaginatedBlockListLayoutA = dynamic(
+  () =>
+    import('./_components/BlockList/LayoutA/NonPaginated').then(
+      mod => mod.NonPaginatedBlockListLayoutA
+    ),
+  {
+    loading: () => <SkeletonBlockList />,
+    ssr: false,
+  }
+);
+
 const BlocksList = dynamic(() => import('./_components/BlockList').then(mod => mod.BlocksList), {
   loading: () => <SkeletonBlockList />,
   ssr: false,
 });
 
 export default function Home() {
-  const { activeNetwork } = useGlobalContext();
+  const { activeNetwork, activeNetworkKey } = useGlobalContext();
   return (
     <>
       <PageTitle data-test="homepage-title">Stacks Explorer</PageTitle>
       {!activeNetwork.isSubnet && <Stats />}
       <Grid
         gap="7"
         width="full"
-        gridTemplateColumns={['100%', '100%', 'minmax(0, 0.6fr) minmax(0, 0.4fr)']}
+        gridTemplateColumns={['100%', '100%', '100%', 'minmax(0, 0.6fr) minmax(0, 0.4fr)']}
       >
         <TxListTabs limit={DEFAULT_LIST_LIMIT_SMALL} />
-        <BlocksList limit={DEFAULT_BLOCKS_LIST_LIMIT} />
+
+        {activeNetworkKey.indexOf('naka') !== -1 ? (
+          <NonPaginatedBlockListLayoutA />
+        ) : (
+          <BlocksList limit={DEFAULT_BLOCKS_LIST_LIMIT} />
+        )}
       </Grid>
     </>
   );

src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx

@@ -31,25 +31,23 @@ export const AnimatedBlockAndMicroblocksItem: FC<{
   }, [block.destroy]);
 
   return (
-    <>
-      <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>
-    </>
+    <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>
   );
 };