feat: added table component

.storybook/main.ts

@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
     'storybook-addon-next-router',
+    '@storybook/addon-viewport',
   ],
   framework: {
     name: '@storybook/nextjs',

.storybook/manager.css

@@ -0,0 +1,4 @@
+#storybook-root {
+    width: 100% !important;
+  }
+

.storybook/preview.css

@@ -0,0 +1,3 @@
+#storybook-root, .sb-show-main {
+  width: 100% !important;
+}

.storybook/preview.tsx

@@ -1,10 +1,8 @@
-import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react';
 import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import React, { useEffect } from 'react';
 
-import { DesktopColorModeButton } from '../src/app/_components/NavBar/DesktopColorModeButton';
 import { Providers } from '../src/app/_components/Providers';
 import {
   instrumentSans,
@@ -13,6 +11,7 @@ import {
   matterRegular,
   openSauce,
 } from '../src/common/fonts';
+import './preview.css';
 
 const preview: Preview = {
   globalTypes: {
@@ -67,7 +66,7 @@ const preview: Preview = {
           <main
             className={`${inter.variable} ${instrumentSans.variable} ${openSauce.variable} ${matterRegular.variable} ${matterMonoRegular.variable}`}
           >
-            <Story />
+            <Story w="100%" className="preview-story" />
           </main>
         </Providers>
       );

package.json

@@ -58,6 +58,7 @@
     "@stacks/transactions": "6.15.1-pr.0bcf867e.0+0bcf867e",
     "@storybook/addon-themes": "^8.4.7",
     "@tanstack/react-query": "5.8.4",
+    "@tanstack/react-table": "^8.21.2",
     "@tippyjs/react": "4.2.6",
     "@types/cookie": "0.5.2",
     "@types/react-redux": "7.1.26",
@@ -133,6 +134,7 @@
     "@storybook/addon-interactions": "8.3.5",
     "@storybook/addon-links": "8.3.5",
     "@storybook/addon-onboarding": "8.3.5",
+    "@storybook/addon-viewport": "^8.5.6",
     "@storybook/blocks": "8.3.5",
     "@storybook/experimental-nextjs-vite": "8.5.2",
     "@storybook/nextjs": "8.3.5",

src/app/PageClient.tsx

@@ -8,10 +8,8 @@ import { ReactNode } from 'react';
 import { DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
 import { useGlobalContext } from '../common/context/useGlobalContext';
 import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
-import { HomePageBlockListSkeleton } from './_components/BlockList/Grouped/skeleton';
 import { PageTitle } from './_components/PageTitle';
 import { Stats } from './_components/Stats/Stats';
-import HomePageSkeleton from './skeleton';
 
 const HomePageBlockListDynamic = dynamic(
   () =>

src/app/_components/NewFooter.tsx

@@ -105,7 +105,7 @@ const TopFooterContent = () => {
       <Box hideFrom="lg" className="top-footer-content-hide-from-lg">
         <Grid templateColumns={['repeat(2, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)']} gap={4}>
           {rightSideLinks.concat(leftSideLinks).map(link => (
-            <ExplorerLink href={link.href} fontWeight="medium" fontSize="xs">
+            <ExplorerLink key={link.label} href={link.href} fontWeight="medium" fontSize="xs">
               {link.label}
             </ExplorerLink>
           ))}

src/app/transactions/PageClient.tsx

@@ -1,9 +1,10 @@
 'use client';
 
+import { TxsTable } from '@/common/components/table/table-examples/TxsTable';
+import { TxListTabs } from '@/features/txs-list/tabs/TxListTabs';
 import { Flex } from '@chakra-ui/react';
 
 import { TokenPrice } from '../../common/types/tokenPrice';
-import { TxListTabs } from '../../features/txs-list/tabs/TxListTabs';
 import { PageTitle } from '../_components/PageTitle';
 import { FilterProps } from '../search/filters';
 import { MempoolFeeStatsWithErrorBoundary } from './MempoolFeeStats';
@@ -14,6 +15,7 @@ export default function ({ tokenPrice, filters }: { tokenPrice: TokenPrice } & F
       <Flex justifyContent={'space-between'} alignItems={'flex-end'}>
         <PageTitle>Transactions</PageTitle>
       </Flex>
+      <TxsTable />
       <MempoolFeeStatsWithErrorBoundary tokenPrice={tokenPrice} />
       <TxListTabs filters={filters} />
     </>