shibarium, zksync and zkevm views

pages/batches/[number].tsx

@@ -9,30 +9,30 @@ import config from 'configs/app';
 
 const rollupFeature = config.features.rollup;
 
-// const Batch = dynamic(() => {
-//   if (!rollupFeature.isEnabled) {
-//     throw new Error('Rollup feature is not enabled.');
-//   }
-
-//   switch (rollupFeature.type) {
-//     case 'arbitrum':
-//       return import('ui/pages/ArbitrumL2TxnBatch');
-//     case 'optimistic':
-//       return import('ui/pages/OptimisticL2TxnBatch');
-//     case 'zkEvm':
-//       return import('ui/pages/ZkEvmL2TxnBatch');
-//     case 'zkSync':
-//       return import('ui/pages/ZkSyncL2TxnBatch');
-//     case 'scroll':
-//       return import('ui/pages/ScrollL2TxnBatch');
-//   }
-//   throw new Error('Txn batches feature is not enabled.');
-// }, { ssr: false });
+const Batch = dynamic(() => {
+  if (!rollupFeature.isEnabled) {
+    throw new Error('Rollup feature is not enabled.');
+  }
+
+  switch (rollupFeature.type) {
+    // case 'arbitrum':
+    //   return import('ui/pages/ArbitrumL2TxnBatch');
+    // case 'optimistic':
+    //   return import('ui/pages/OptimisticL2TxnBatch');
+    case 'zkEvm':
+      return import('ui/pages/ZkEvmL2TxnBatch');
+    case 'zkSync':
+      return import('ui/pages/ZkSyncL2TxnBatch');
+    // case 'scroll':
+    //   return import('ui/pages/ScrollL2TxnBatch');
+  }
+  throw new Error('Txn batches feature is not enabled.');
+}, { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
     <PageNextJs pathname="/batches/[number]" query={ props.query }>
-      { /* <Batch/> */ }
+      <Batch/>
     </PageNextJs>
   );
 };

pages/batches/index.tsx

@@ -7,30 +7,30 @@ import PageNextJs from 'nextjs/PageNextJs';
 import config from 'configs/app';
 const rollupFeature = config.features.rollup;
 
-// const Batches = dynamic(() => {
-//   if (!rollupFeature.isEnabled) {
-//     throw new Error('Rollup feature is not enabled.');
-//   }
+const Batches = dynamic(() => {
+  if (!rollupFeature.isEnabled) {
+    throw new Error('Rollup feature is not enabled.');
+  }
 
-//   switch (rollupFeature.type) {
-//     case 'zkEvm':
-//       return import('ui/pages/ZkEvmL2TxnBatches');
-//     case 'zkSync':
-//       return import('ui/pages/ZkSyncL2TxnBatches');
-//     case 'optimistic':
-//       return import('ui/pages/OptimisticL2TxnBatches');
-//     case 'arbitrum':
-//       return import('ui/pages/ArbitrumL2TxnBatches');
-//     case 'scroll':
-//       return import('ui/pages/ScrollL2TxnBatches');
-//   }
-//   throw new Error('Txn batches feature is not enabled.');
-// }, { ssr: false });
+  switch (rollupFeature.type) {
+    case 'zkEvm':
+      return import('ui/pages/ZkEvmL2TxnBatches');
+    case 'zkSync':
+      return import('ui/pages/ZkSyncL2TxnBatches');
+    // case 'optimistic':
+    //   return import('ui/pages/OptimisticL2TxnBatches');
+    // case 'arbitrum':
+    //   return import('ui/pages/ArbitrumL2TxnBatches');
+    // case 'scroll':
+    //   return import('ui/pages/ScrollL2TxnBatches');
+  }
+  throw new Error('Txn batches feature is not enabled.');
+}, { ssr: false });
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/batches">
-      { /* <Batches/> */ }
+      <Batches/>
     </PageNextJs>
   );
 };

pages/deposits/index.tsx

@@ -7,34 +7,34 @@ import PageNextJs from 'nextjs/PageNextJs';
 import config from 'configs/app';
 const rollupFeature = config.features.rollup;
 
-// const Deposits = dynamic(() => {
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
-//     return import('ui/pages/OptimisticL2Deposits');
-//   }
+const Deposits = dynamic(() => {
+  // if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
+  //   return import('ui/pages/OptimisticL2Deposits');
+  // }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
-//     return import('ui/pages/ArbitrumL2Deposits');
-//   }
+  // if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
+  //   return import('ui/pages/ArbitrumL2Deposits');
+  // }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
-//     return import('ui/pages/ShibariumDeposits');
-//   }
+  if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
+    return import('ui/pages/ShibariumDeposits');
+  }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
-//     return import('ui/pages/ZkEvmL2Deposits');
-//   }
+  if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
+    return import('ui/pages/ZkEvmL2Deposits');
+  }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
-//     return import('ui/pages/ScrollL2Deposits');
-//   }
+  // if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
+  //   return import('ui/pages/ScrollL2Deposits');
+  // }
 
-//   throw new Error('Deposits feature is not enabled.');
-// }, { ssr: false });
+  throw new Error('Deposits feature is not enabled.');
+}, { ssr: false });
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/deposits">
-      { /* <Deposits/> */ }
+      <Deposits/>
     </PageNextJs>
   );
 };

pages/withdrawals/index.tsx

@@ -8,38 +8,38 @@ import config from 'configs/app';
 const rollupFeature = config.features.rollup;
 const beaconChainFeature = config.features.beaconChain;
 
-// const Withdrawals = dynamic(() => {
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
-//     return import('ui/pages/OptimisticL2Withdrawals');
-//   }
+const Withdrawals = dynamic(() => {
+  // if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
+  //   return import('ui/pages/OptimisticL2Withdrawals');
+  // }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
-//     return import('ui/pages/ArbitrumL2Withdrawals');
-//   }
+  // if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
+  //   return import('ui/pages/ArbitrumL2Withdrawals');
+  // }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
-//     return import('ui/pages/ShibariumWithdrawals');
-//   }
+  if (rollupFeature.isEnabled && rollupFeature.type === 'shibarium') {
+    return import('ui/pages/ShibariumWithdrawals');
+  }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
-//     return import('ui/pages/ZkEvmL2Withdrawals');
-//   }
+  if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
+    return import('ui/pages/ZkEvmL2Withdrawals');
+  }
 
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
-//     return import('ui/pages/ScrollL2Withdrawals');
-//   }
+  // if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
+  //   return import('ui/pages/ScrollL2Withdrawals');
+  // }
 
-//   if (beaconChainFeature.isEnabled) {
-//     return import('ui/pages/BeaconChainWithdrawals');
-//   }
+  if (beaconChainFeature.isEnabled) {
+    return import('ui/pages/BeaconChainWithdrawals');
+  }
 
-//   throw new Error('Withdrawals feature is not enabled.');
-// }, { ssr: false });
+  throw new Error('Withdrawals feature is not enabled.');
+}, { ssr: false });
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/withdrawals">
-      { /* <Withdrawals/> */ }
+      <Withdrawals/>
     </PageNextJs>
   );
 };

toolkit/chakra/badge.tsx

@@ -14,7 +14,7 @@ export interface BadgeProps extends Omit<ChakraBadgeProps, 'colorScheme'> {
   truncated?: boolean;
 }
 
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
   function Badge(props, ref) {
     const { loading, iconStart, children, asChild = true, truncated = false, ...rest } = props;
 
@@ -27,8 +27,8 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     ) : child;
 
     return (
-      <Skeleton loading={ loading } asChild={ asChild }>
-        <ChakraBadge ref={ ref } display="inline-flex" alignItems="center" whiteSpace="nowrap" { ...rest }>
+      <Skeleton loading={ loading } asChild={ asChild } ref={ ref }>
+        <ChakraBadge display="inline-flex" alignItems="center" whiteSpace="nowrap" { ...rest }>
           { iconStart && <IconSvg name={ iconStart } boxSize="10px"/> }
           { childrenElement }
         </ChakraBadge>

ui/deposits/shibarium/DepositsListItem.tsx

@@ -27,8 +27,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL1
           number={ item.l1_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
@@ -38,8 +37,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -49,8 +47,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>

ui/deposits/shibarium/DepositsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumDepositsItem } from 'types/api/shibarium';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import DepositsTableItem from './DepositsTableItem';
 
@@ -15,22 +14,22 @@ import DepositsTableItem from './DepositsTableItem';
 
 const DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>L1 block No</Th>
-          <Th>L1 txn hash</Th>
-          <Th>L2 txn hash</Th>
-          <Th>User</Th>
-          <Th>Age</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>L1 block No</TableColumnHeader>
+          <TableColumnHeader>L1 txn hash</TableColumnHeader>
+          <TableColumnHeader>L2 txn hash</TableColumnHeader>
+          <TableColumnHeader>User</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <DepositsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/deposits/shibarium/DepositsTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumDepositsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -21,51 +21,48 @@ const DepositsTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BlockEntityL1
           number={ item.l1_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
           truncation="constant_long"
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <AddressStringOrParam
           address={ item.user }
           isLoading={ isLoading }
           truncation="constant"
           noCopy
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text_secondary"
           display="inline-block"
         />
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -29,15 +29,14 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL1
           number={ item.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { item.index }
         </Skeleton>
       </ListItemMobileGrid.Value>
@@ -47,8 +46,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -68,8 +66,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
           <TxEntity
             isLoading={ isLoading }
             hash={ item.l2_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
           />
         ) : (
@@ -81,14 +78,14 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { BigNumber(item.value).toFormat() }
         </Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { item.symbol }
         </Skeleton>
       </ListItemMobileGrid.Value>

ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
 
@@ -15,24 +14,24 @@ import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
 
 const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>L1 block</Th>
-          <Th>Index</Th>
-          <Th>L1 txn hash</Th>
-          <Th>Age</Th>
-          <Th>L2 txn hash</Th>
-          <Th isNumeric>Value</Th>
-          <Th>Token</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>L1 block</TableColumnHeader>
+          <TableColumnHeader>Index</TableColumnHeader>
+          <TableColumnHeader>L1 txn hash</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>L2 txn hash</TableColumnHeader>
+          <TableColumnHeader isNumeric>Value</TableColumnHeader>
+          <TableColumnHeader>Token</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ZkEvmL2DepositsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx

-import { Td, Tr, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -21,46 +22,43 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BlockEntityL1
           number={ item.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading }>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading }>
           <span>{ item.index }</span>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
           truncation="constant_long"
           noIcon
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.l2_transaction_hash ? (
           <TxEntity
             isLoading={ isLoading }
             hash={ item.l2_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
             noIcon
           />
@@ -69,18 +67,18 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
             Pending Claim
           </chakra.span>
         ) }
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading } display="inline-block">
           <span>{ BigNumber(item.value).toFormat() }</span>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">
           <span>{ item.symbol }</span>
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/pages/BeaconChainWithdrawals.tsx

-import { Hide, Show, Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -8,8 +8,8 @@ import getCurrencyValue from 'lib/getCurrencyValue';
 import { currencyUnits } from 'lib/units';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -41,7 +41,7 @@ const Withdrawals = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <BeaconChainWithdrawalsListItem
             key={ item.index + (isPlaceholderData ? String(index) : '') }
@@ -50,15 +50,15 @@ const Withdrawals = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <BeaconChainWithdrawalsTable
           items={ data.items }
           view="list"
           top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ isPlaceholderData }
         />
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -68,7 +68,7 @@ const Withdrawals = () => {
     }
 
     return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+      <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
         { countersQuery.data && (
           <Text lineHeight={{ base: '24px', lg: '32px' }}>
             { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
@@ -89,11 +89,12 @@ const Withdrawals = () => {
       />
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no withdrawals."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/ShibariumDeposits.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { SHIBARIUM_DEPOSIT_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import DepositsListItem from 'ui/deposits/shibarium/DepositsListItem';
 import DepositsTable from 'ui/deposits/shibarium/DepositsTable';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -39,7 +39,7 @@ const L2Deposits = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <DepositsListItem
             key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
@@ -47,10 +47,10 @@ const L2Deposits = () => {
             item={ item }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -61,7 +61,7 @@ const L2Deposits = () => {
 
     return (
       <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
+        loading={ countersQuery.isPlaceholderData }
         display="inline-block"
       >
         A total of { countersQuery.data?.toLocaleString() } deposits found
@@ -76,11 +76,12 @@ const L2Deposits = () => {
       <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no deposits."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/ShibariumWithdrawals.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -39,16 +39,18 @@ const L2Withdrawals = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>{ data.items.map(((item, index) => (
+      <Box hideFrom="lg">
+        { data.items.map(((item, index) => (
           <WithdrawalsListItem
             key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
             item={ item }
             isLoading={ isPlaceholderData }
           />
-      ))) }</Show>
-      <Hide below="lg" ssr={ false }>
+        ))) }
+      </Box>
+      <Box hideBelow="lg">
         <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -58,10 +60,7 @@ const L2Withdrawals = () => {
     }
 
     return (
-      <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
-        display="inline-block"
-      >
+      <Skeleton loading={ countersQuery.isPlaceholderData } display="inline-block">
         A total of { countersQuery.data?.toLocaleString() } withdrawals found
       </Skeleton>
     );
@@ -74,11 +73,12 @@ const L2Withdrawals = () => {
       <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no withdrawals."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/ZkEvmL2Deposits.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import ZkEvmL2DepositsListItem from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem';
 import ZkEvmL2DepositsTable from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsTable';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -34,7 +34,7 @@ const ZkEvmL2Deposits = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ZkEvmL2DepositsListItem
             key={ String(item.index) + (isPlaceholderData ? index : '') }
@@ -42,10 +42,10 @@ const ZkEvmL2Deposits = () => {
             item={ item }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ZkEvmL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -56,7 +56,7 @@ const ZkEvmL2Deposits = () => {
 
     return (
       <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
+        loading={ countersQuery.isPlaceholderData }
         display="inline-block"
       >
         A total of { countersQuery.data?.toLocaleString() } deposits found
@@ -71,11 +71,12 @@ const ZkEvmL2Deposits = () => {
       <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no deposits."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/ZkEvmL2TxnBatch.tsx

 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { RoutedTab } from 'ui/shared/Tabs/types';
+import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
@@ -11,11 +11,11 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import { TX_ZKEVM_L2 } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_L2_TXN_BATCH } from 'stubs/zkEvmL2';
+import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
 import TextAd from 'ui/shared/ad/TextAd';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import ZkEvmL2TxnBatchDetails from 'ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
@@ -46,7 +46,7 @@ const ZkEvmL2TxnBatch = () => {
   throwOnAbsentParamError(number);
   throwOnResourceLoadError(batchQuery);
 
-  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+  const tabs: Array<TabItemRegular> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <ZkEvmL2TxnBatchDetails query={ batchQuery }/> },
     { id: 'txs', title: 'Transactions', component: <TxsWithFrontendSorting query={ batchTxsQuery } showSocketInfo={ false }/> },
   ].filter(Boolean)), [ batchQuery, batchTxsQuery ]);
@@ -71,7 +71,7 @@ const ZkEvmL2TxnBatch = () => {
         title={ `Txn batch #${ number }` }
         backLink={ backLink }
       />
-      { batchQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : (
+      { batchQuery.isPlaceholderData ? <RoutedTabsSkeleton tabs={ tabs }/> : (
         <RoutedTabs
           tabs={ tabs }
         />

ui/pages/ZkEvmL2TxnBatches.tsx

-import { Hide, Show, Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -38,7 +38,7 @@ const ZkEvmL2TxnBatches = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ZkEvmTxnBatchesListItem
             key={ item.number + (isPlaceholderData ? String(index) : '') }
@@ -46,10 +46,10 @@ const ZkEvmL2TxnBatches = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +59,7 @@ const ZkEvmL2TxnBatches = () => {
     }
 
     return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+      <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
         Txn batch
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
@@ -75,11 +75,12 @@ const ZkEvmL2TxnBatches = () => {
       <PageTitle title="Txn batches" withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no txn batches."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/ZkEvmL2Withdrawals.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -34,7 +34,7 @@ const ZkEvmL2Withdrawals = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ZkEvmL2WithdrawalsListItem
             key={ String(item.index) + (isPlaceholderData ? index : '') }
@@ -42,10 +42,10 @@ const ZkEvmL2Withdrawals = () => {
             item={ item }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ZkEvmL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -56,7 +56,7 @@ const ZkEvmL2Withdrawals = () => {
 
     return (
       <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
+        loading={ countersQuery.isPlaceholderData }
         display="inline-block"
       >
         A total of { countersQuery.data?.toLocaleString() } withdrawals found
@@ -71,11 +71,12 @@ const ZkEvmL2Withdrawals = () => {
       <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no withdrawals."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/ZkSyncL2TxnBatch.tsx

 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { RoutedTab } from 'ui/shared/Tabs/types';
+import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
@@ -12,12 +12,12 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
 import { ZKSYNC_L2_TXN_BATCH } from 'stubs/zkSyncL2';
+import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
 import TextAd from 'ui/shared/ad/TextAd';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
-import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import ZkSyncL2TxnBatchDetails from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
@@ -63,7 +63,7 @@ const ZkSyncL2TxnBatch = () => {
 
   const hasPagination = !isMobile && batchTxsQuery.pagination.isVisible && tab === 'txs';
 
-  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+  const tabs: Array<TabItemRegular> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <ZkSyncL2TxnBatchDetails query={ batchQuery }/> },
     {
       id: 'txs',
@@ -93,10 +93,10 @@ const ZkSyncL2TxnBatch = () => {
         backLink={ backLink }
       />
       { batchQuery.isPlaceholderData ?
-        <TabsSkeleton tabs={ tabs }/> : (
+        <RoutedTabsSkeleton tabs={ tabs }/> : (
           <RoutedTabs
             tabs={ tabs }
-            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            listProps={ isMobile ? undefined : TAB_LIST_PROPS }
             rightSlot={ hasPagination ? <Pagination { ...(batchTxsQuery.pagination) }/> : null }
             stickyEnabled={ hasPagination }
           />

ui/pages/ZkSyncL2TxnBatches.tsx

-import { Hide, Show, Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { generateListStub } from 'stubs/utils';
 import { ZKSYNC_L2_TXN_BATCHES_ITEM } from 'stubs/zkSyncL2';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -38,7 +38,7 @@ const ZkSyncL2TxnBatches = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ZkSyncTxnBatchesListItem
             key={ item.number + (isPlaceholderData ? String(index) : '') }
@@ -46,10 +46,10 @@ const ZkSyncL2TxnBatches = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +59,7 @@ const ZkSyncL2TxnBatches = () => {
     }
 
     return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+      <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
         Txn batch
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].number } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].number } </Text>
@@ -75,11 +75,12 @@ const ZkSyncL2TxnBatches = () => {
       <PageTitle title="Txn batches" withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no txn batches."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/shared/StickyPaginationWithText.tsx

@@ -11,7 +11,7 @@ type Props = {
   text: React.ReactNode;
 };
 
-const TextSeparator = ({ pagination, text }: Props) => {
+const StickyPaginationWithText = ({ pagination, text }: Props) => {
   if (!pagination.isVisible) {
     return <Box mb={ 6 }>{ text }</Box>;
   }
@@ -31,4 +31,4 @@ const TextSeparator = ({ pagination, text }: Props) => {
   );
 };
 
-export default TextSeparator;
+export default StickyPaginationWithText;

ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx

@@ -10,16 +10,15 @@ import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
-
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 
@@ -68,7 +67,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
         Txn batch number
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData }>
           { data.number }
         </Skeleton>
         <PrevNext
@@ -120,10 +119,10 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
         Transactions
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+        <Skeleton loading={ isPlaceholderData }>
+          <Link href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
             { data.transactions.length } transaction{ data.transactions.length === 1 ? '' : 's' }
-          </LinkInternal>
+          </Link>
         </Skeleton>
       </DetailedInfo.ItemValue>
 
@@ -137,7 +136,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       <DetailedInfo.ItemValue
         flexWrap="nowrap"
       >
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+        <Skeleton loading={ isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.global_exit_root }/>
         </Skeleton>
         <CopyToClipboard text={ data.global_exit_root } isLoading={ isPlaceholderData }/>
@@ -151,7 +150,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       <DetailedInfo.ItemValue
         flexWrap="nowrap"
       >
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+        <Skeleton loading={ isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.acc_input_hash }/>
         </Skeleton>
         <CopyToClipboard text={ data.acc_input_hash } isLoading={ isPlaceholderData }/>
@@ -180,7 +179,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       <DetailedInfo.ItemValue
         flexWrap="nowrap"
       >
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+        <Skeleton loading={ isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.state_root }/>
         </Skeleton>
         <CopyToClipboard text={ data.state_root } isLoading={ isPlaceholderData }/>

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx

@@ -6,10 +6,9 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
@@ -31,8 +30,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
@@ -54,15 +52,14 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <LinkInternal
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
           fontWeight={ 600 }
+          minW="40px"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
           { item.transaction_count }
-          </Skeleton>
-        </LinkInternal>
+        </Link>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Verify tx hash</ListItemMobileGrid.Label>
@@ -71,8 +68,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.verify_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
           />
         ) : <Text>Pending</Text> }
@@ -84,8 +80,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.sequence_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
           />
         ) : <Text>Pending</Text> }

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ZkEvmTxnBatchesTableItem from './ZkEvmTxnBatchesTableItem';
 
@@ -15,18 +14,18 @@ type Props = {
 
 const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table minW="1000px">
-      <Thead top={ top }>
-        <Tr>
-          <Th width="33%">Batch #</Th>
-          <Th width="33%">Status</Th>
-          <Th width="150px">Age</Th>
-          <Th width="150px">Txn count</Th>
-          <Th width="230px">Verify tx hash</Th>
-          <Th width="230px">Sequence hash</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot minW="1000px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader width="33%">Batch #</TableColumnHeader>
+          <TableColumnHeader width="33%">Status</TableColumnHeader>
+          <TableColumnHeader width="150px">Age</TableColumnHeader>
+          <TableColumnHeader width="150px">Txn count</TableColumnHeader>
+          <TableColumnHeader width="230px">Verify tx hash</TableColumnHeader>
+          <TableColumnHeader width="230px">Sequence hash</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ZkEvmTxnBatchesTableItem
             key={ item.number + (isLoading ? String(index) : '') }
@@ -34,8 +33,8 @@ const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx

-import { Td, Tr, Text } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
@@ -6,10 +6,10 @@ import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -23,63 +23,60 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <LinkInternal
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
+          minW="40px"
+          my={ 1 }
+          loading={ isLoading }
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
           { item.transaction_count }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-      <Td pr={ 12 } verticalAlign="middle">
+        </Link>
+      </TableCell>
+      <TableCell pr={ 12 } verticalAlign="middle">
         { item.verify_transaction_hash ? (
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.verify_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
             noIcon
           />
         ) : <Text>Pending</Text> }
-      </Td>
-      <Td pr={ 12 } verticalAlign="middle">
+      </TableCell>
+      <TableCell pr={ 12 } verticalAlign="middle">
         { item.sequence_transaction_hash ? (
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.sequence_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
             noIcon
           />
         ) : <Text>Pending</Text> }
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx

-import { Grid, GridItem, Link, Text } from '@chakra-ui/react';
+import { Grid, GridItem, Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { scroller, Element } from 'react-scroll';
 
 import { ZKSYNC_L2_TX_BATCH_STATUSES, type ZkSyncBatch } from 'types/api/zkSyncL2';
 
@@ -13,14 +12,14 @@ import type { ResourceError } from 'lib/api/resources';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import { currencyUnits } from 'lib/units';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
-
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
@@ -33,7 +32,6 @@ interface Props {
 
 const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
   const router = useRouter();
-  const [ isExpanded, setIsExpanded ] = React.useState(false);
 
   const { data, isPlaceholderData, isError, error } = query;
 
@@ -48,14 +46,6 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
     router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
   }, [ data, router ]);
 
-  const handleCutClick = React.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-    scroller.scrollTo('ZkSyncL2TxnBatchDetails__cutLink', {
-      duration: 500,
-      smooth: true,
-    });
-  }, []);
-
   if (isError) {
     if (isCustomAppError(error)) {
       throwOnResourceLoadError({ isError, error });
@@ -84,7 +74,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         Txn batch number
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData }>
           { data.number }
         </Skeleton>
         <PrevNext
@@ -124,10 +114,10 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         Transactions
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+        <Skeleton loading={ isPlaceholderData }>
+          <Link href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
             { txNum } transaction{ txNum === 1 ? '' : 's' }
-          </LinkInternal>
+          </Link>
         </Skeleton>
       </DetailedInfo.ItemValue>
 
@@ -135,24 +125,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
 
       <ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/>
 
-      <GridItem colSpan={{ base: undefined, lg: 2 }}>
-        <Element name="ZkSyncL2TxnBatchDetails__cutLink">
-          <Skeleton isLoaded={ !isPlaceholderData } mt={ 6 } display="inline-block">
-            <Link
-              display="inline-block"
-              fontSize="sm"
-              textDecorationLine="underline"
-              textDecorationStyle="dashed"
-              onClick={ handleCutClick }
-            >
-              { isExpanded ? 'Hide details' : 'View details' }
-            </Link>
-          </Skeleton>
-        </Element>
-      </GridItem>
-
-      { isExpanded && (
-        <>
+      <CutLinkDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}>
         <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
         <DetailedInfo.ItemLabel
@@ -175,7 +148,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         </DetailedInfo.ItemLabel>
         <DetailedInfo.ItemValue>
           <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
-            <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
+          <Text color="text.secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
         </DetailedInfo.ItemValue>
 
         <DetailedInfo.ItemLabel
@@ -185,10 +158,9 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         </DetailedInfo.ItemLabel>
         <DetailedInfo.ItemValue>
           <Text mr={ 1 }>{ BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
-            <Text variant="secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
+          <Text color="text.secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
         </DetailedInfo.ItemValue>
-        </>
-      ) }
+      </CutLinkDetails>
     </Grid>
   );
 };

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx

@@ -6,10 +6,9 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
@@ -31,8 +30,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
@@ -54,15 +52,14 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <LinkInternal
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
           fontWeight={ 600 }
+          minW="40px"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
           { item.transaction_count }
-          </Skeleton>
-        </LinkInternal>
+        </Link>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Commit tx</ListItemMobileGrid.Label>
@@ -71,8 +68,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.commit_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
           />
         ) : <Text>Pending</Text> }
@@ -84,8 +80,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.prove_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
           />
         ) : <Text>Pending</Text> }

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ZkSyncTxnBatchesTableItem from './ZkSyncTxnBatchesTableItem';
 
@@ -15,18 +14,18 @@ type Props = {
 
 const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table minW="1000px">
-      <Thead top={ top }>
-        <Tr>
-          <Th width="40%">Batch #</Th>
-          <Th width="60%">Status</Th>
-          <Th width="150px">Age</Th>
-          <Th width="150px">Txn count</Th>
-          <Th width="210px">Commit tx</Th>
-          <Th width="210px">Prove tx</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot minW="1000px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader width="40%">Batch #</TableColumnHeader>
+          <TableColumnHeader width="60%">Status</TableColumnHeader>
+          <TableColumnHeader width="150px">Age</TableColumnHeader>
+          <TableColumnHeader width="150px">Txn count</TableColumnHeader>
+          <TableColumnHeader width="210px">Commit tx</TableColumnHeader>
+          <TableColumnHeader width="210px">Prove tx</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ZkSyncTxnBatchesTableItem
             key={ item.number + (isLoading ? String(index) : '') }
@@ -34,8 +33,8 @@ const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx

-import { Td, Tr, Text } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
@@ -6,10 +6,10 @@ import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -23,63 +23,60 @@ const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <ZkSyncL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <LinkInternal
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
+          minW="40px"
+          my={ 1 }
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>
           { item.transaction_count }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-      <Td verticalAlign="middle">
+        </Link>
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.commit_transaction_hash ? (
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.commit_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
             noIcon
           />
         ) : <Text>Pending</Text> }
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.prove_transaction_hash ? (
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.prove_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
             noIcon
           />
         ) : <Text>Pending</Text> }
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/withdrawals/shibarium/WithdrawalsListItem.tsx

@@ -27,8 +27,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <BlockEntity
           number={ item.l2_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
@@ -38,8 +37,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -49,8 +47,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>

ui/withdrawals/shibarium/WithdrawalsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import WithdrawalsTableItem from './WithdrawalsTableItem';
 
@@ -15,22 +14,22 @@ import WithdrawalsTableItem from './WithdrawalsTableItem';
 
 const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>L2 block No</Th>
-          <Th>L2 txn hash</Th>
-          <Th>L1 txn hash</Th>
-          <Th>User</Th>
-          <Th>Age</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>L2 block No</TableColumnHeader>
+          <TableColumnHeader>L2 txn hash</TableColumnHeader>
+          <TableColumnHeader>L1 txn hash</TableColumnHeader>
+          <TableColumnHeader>User</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <WithdrawalsTableItem key={ item.l2_transaction_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/withdrawals/shibarium/WithdrawalsTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -20,51 +20,48 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BlockEntity
           number={ item.l2_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
           truncation="constant_long"
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <AddressStringOrParam
           address={ item.user }
           isLoading={ isLoading }
           truncation="constant"
           noCopy
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           display="inline-block"
           color="text_secondary"
         />
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -29,15 +29,14 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <BlockEntity
           number={ item.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { item.index }
         </Skeleton>
       </ListItemMobileGrid.Value>
@@ -47,8 +46,7 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -68,8 +66,7 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.l1_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             truncation="constant_long"
           />
         ) : (
@@ -81,14 +78,14 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { BigNumber(item.value).toFormat() }
         </Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Token</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { item.symbol }
         </Skeleton>
       </ListItemMobileGrid.Value>

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem';
 
@@ -15,24 +14,24 @@ import ZkEvmL2WithdrawalsTableItem from './ZkEvmL2WithdrawalsTableItem';
 
 const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>Block</Th>
-          <Th>Index</Th>
-          <Th>L2 txn hash</Th>
-          <Th>Age</Th>
-          <Th>L1 txn hash</Th>
-          <Th isNumeric>Value</Th>
-          <Th>Token</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>Block</TableColumnHeader>
+          <TableColumnHeader>Index</TableColumnHeader>
+          <TableColumnHeader>L2 txn hash</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>L1 txn hash</TableColumnHeader>
+          <TableColumnHeader isNumeric>Value</TableColumnHeader>
+          <TableColumnHeader>Token</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ZkEvmL2WithdrawalsTableItem key={ String(item.index) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx

-import { Td, Tr, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -21,66 +22,63 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BlockEntity
           number={ item.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading }>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading }>
           <span>{ item.index }</span>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           truncation="constant_long"
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.l1_transaction_hash ? (
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.l1_transaction_hash }
             truncation="constant_long"
             noIcon
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
           />
         ) : (
           <chakra.span color="text_secondary">
             Pending Claim
           </chakra.span>
         ) }
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading } display="inline-block">
           <span>{ BigNumber(item.value).toFormat() }</span>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">
           <span>{ item.symbol }</span>
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };