scroll, arbitrum and optimism views

.vscode/tasks.json

@@ -376,6 +376,7 @@
               "polygon",
               "rari_testnet",
               "rootstock_testnet",
+              "scroll_sepolia",
               "shibarium",
               "stability_testnet",
               "zkevm",

configs/envs/.env.optimism

@@ -9,45 +9,49 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED=true
+
 # Instance ENVs
-NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "749780", "width": "728", "height": "90" }
-NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "749779", "width": "320", "height": "100" }
-NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
 NEXT_PUBLIC_API_HOST=optimism.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
-NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'velodrome'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'rubic'},{'text':'Disperse','icon':'txn_batches_slim','dappId':'smol'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'},{'text':'Get gas','icon':'gas','dappId':'smol-refuel'}]
+NEXT_PUBLIC_DEX_POOLS_ENABLED=true
 NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/optimism-mainnet.json
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/optimism.json
+NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/sherblockHolmesBadge
+NEXT_PUBLIC_GAS_REFUEL_PROVIDER_CONFIG={'name': 'Need gas?', 'url_template': 'https://smolrefuel.com/?outboundChain={chainId}&partner=blockscout&utm_source=blockscout&disableBridges=true', 'dapp_id': 'smol-refuel', 'logo': 'https://blockscout-content.s3.amazonaws.com/smolrefuel-logo-action-button.png'}
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x97f34a4cf685e365460dd38dbe16e092d8e4cc4b6ac779e3abcf4c18df6b1329
+NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS=true
 NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap', 'secondary_coin_price']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgb(255, 255, 255)
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)'],'text_color':['rgb(255, 255, 255)']}
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_LOGOUT_URL=https://optimism-goerli.us.auth0.com/v2/logout
-NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maxaleks/0d18fc309ff499075127b364cc69306d/raw/2a51f961a8c1b9f884f2ab7eed79d4b69330e1ae/peanut_protocol_banner.html
-NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://optimism.blockscout.com/apps/peanut-protocol
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Joined recent campaigns? Mint your Merit Badge <a href="https://badges.blockscout.com?utm_source=instance&utm_medium=optimism">here</a></p>
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maikReal/974c47f86a3158c1a86b092ae2f044b3/raw/abcc7e02150cd85d4974503a0357162c0a2c35a9/merits-banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://swap.blockscout.com?utm_source=blockscout&utm_medium=optimism
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
 NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
 NEXT_PUBLIC_METASUITES_ENABLED=true
-NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
 NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
-NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/pools']
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/optimism/pools'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/optimistic'}},{'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/optimism/transaction','address':'/optimism/address'}}]
-NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
-NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism-mainnet-light.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism-mainnet-dark.svg
 NEXT_PUBLIC_NETWORK_ID=10
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
 NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
@@ -67,3 +71,4 @@ NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
 NEXT_PUBLIC_WEB3_WALLETS=['token_pocket', 'metamask']
+NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
\ No newline at end of file

configs/envs/.env.scroll_sepolia

@@ -14,7 +14,9 @@ NEXT_PUBLIC_API_BASE_PATH=/
 NEXT_PUBLIC_API_HOST=scroll-sepolia.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/scroll-testnet.json
+NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/sherblockHolmesBadge
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xa0d22caf6217a488b1e97b646c5ed88e8a3020a607bcd1f3fe8d4c430bb19ad5
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(255, 238, 218, 1)'],'text_color':['rgba(25, 6, 2, 1)']}
@@ -33,9 +35,8 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://sepolia-rpc.scroll.io
 NEXT_PUBLIC_NETWORK_SHORT_NAME=Scroll Sepolia Testnet
 NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/scroll-testnet.png
-NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=6Ld0iT8aAAAAAJdju0CmAwGjW7JTDvIw-Q5pwt5T
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=scroll
 NEXT_PUBLIC_STATS_API_HOST=https://stats-scroll-sepolia.k8s-prod-2.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
\ No newline at end of file
-NEXT_PUBLIC_ROLLUP_TYPE=scroll
-NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
\ No newline at end of file

pages/batches/[number].tsx

@@ -15,16 +15,16 @@ const Batch = dynamic(() => {
   }
 
   switch (rollupFeature.type) {
-    // case 'arbitrum':
-    //   return import('ui/pages/ArbitrumL2TxnBatch');
-    // case 'optimistic':
-    //   return import('ui/pages/OptimisticL2TxnBatch');
+    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');
+    case 'scroll':
+      return import('ui/pages/ScrollL2TxnBatch');
   }
   throw new Error('Txn batches feature is not enabled.');
 }, { ssr: false });

pages/batches/celestia/[height]/[commitment].tsx

@@ -9,24 +9,24 @@ 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');
-//   }
-//   throw new Error('Celestia 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');
+  }
+  throw new Error('Celestia txn batches feature is not enabled.');
+}, { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
     <PageNextJs pathname="/batches/celestia/[height]/[commitment]" query={ props.query }>
-      { /* <Batch/> */ }
+      <Batch/>
     </PageNextJs>
   );
 };

pages/batches/index.tsx

@@ -17,12 +17,12 @@ const Batches = dynamic(() => {
       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');
+    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 });

pages/deposits/index.tsx

@@ -8,13 +8,13 @@ import config from 'configs/app';
 const rollupFeature = config.features.rollup;
 
 const Deposits = dynamic(() => {
-  // if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
-  //   return import('ui/pages/OptimisticL2Deposits');
-  // }
+  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');
@@ -24,9 +24,9 @@ const Deposits = dynamic(() => {
     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 });

pages/dispute-games/index.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-// const DisputeGames = dynamic(() => import('ui/pages/OptimisticL2DisputeGames'), { ssr: false });
+const DisputeGames = dynamic(() => import('ui/pages/OptimisticL2DisputeGames'), { ssr: false });
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/dispute-games">
-      { /* <DisputeGames/> */ }
+      <DisputeGames/>
     </PageNextJs>
   );
 };

pages/output-roots/index.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-// const OutputRoots = dynamic(() => import('ui/pages/OptimisticL2OutputRoots'), { ssr: false });
+const OutputRoots = dynamic(() => import('ui/pages/OptimisticL2OutputRoots'), { ssr: false });
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/output-roots">
-      { /* <OutputRoots/> */ }
+      <OutputRoots/>
     </PageNextJs>
   );
 };

pages/txn-withdrawals/index.tsx

@@ -7,18 +7,18 @@ import PageNextJs from 'nextjs/PageNextJs';
 import config from 'configs/app';
 const rollupFeature = config.features.rollup;
 
-// const Withdrawals = dynamic(() => {
-//   if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
-//     return import('ui/pages/ArbitrumL2TxnWithdrawals');
-//   }
+const Withdrawals = dynamic(() => {
+  if (rollupFeature.isEnabled && rollupFeature.type === 'arbitrum') {
+    return import('ui/pages/ArbitrumL2TxnWithdrawals');
+  }
 
-//   throw new Error('Txn withdrawals feature is not enabled.');
-// }, { ssr: false });
+  throw new Error('Txn withdrawals feature is not enabled.');
+}, { ssr: false });
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/txn-withdrawals">
-      { /* <Withdrawals/> */ }
+      <Withdrawals/>
     </PageNextJs>
   );
 };

pages/withdrawals/index.tsx

@@ -9,13 +9,13 @@ const rollupFeature = config.features.rollup;
 const beaconChainFeature = config.features.beaconChain;
 
 const Withdrawals = dynamic(() => {
-  // if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
-  //   return import('ui/pages/OptimisticL2Withdrawals');
-  // }
+  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');
@@ -25,9 +25,9 @@ const Withdrawals = dynamic(() => {
     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');

toolkit/components/CutLink/CutLinkDetails.tsx

@@ -10,12 +10,13 @@ interface Props extends LinkProps {
   id?: string;
   onClick?: () => void;
   isExpanded?: boolean;
+  text?: [string, string];
 }
 
 const ID = 'CutLink';
 
 const CutLink = (props: Props) => {
-  const { children, id = ID, onClick, isExpanded: isExpandedProp = false, ...rest } = props;
+  const { children, id = ID, onClick, isExpanded: isExpandedProp = false, text: textProp, ...rest } = props;
 
   const [ isExpanded, setIsExpanded ] = React.useState(isExpandedProp);
 
@@ -36,7 +37,7 @@ const CutLink = (props: Props) => {
     });
   }, [ isExpandedProp, id ]);
 
-  const text = isExpanded ? 'Hide details' : 'View details';
+  const text = isExpanded ? (textProp?.[1] ?? 'Hide details') : (textProp?.[0] ?? 'View details');
 
   return (
     <>

ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -29,8 +29,6 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL1
           number={ item.l1_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
@@ -40,8 +38,6 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -60,8 +56,6 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -78,7 +72,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Gas limit</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(item.l2_transaction_gas_limit).toFormat() }</Skeleton>
+        <Skeleton loading={ isLoading } display="inline-block">{ BigNumber(item.l2_transaction_gas_limit).toFormat() }</Skeleton>
       </ListItemMobileGrid.Value>
 
     </ListItemMobileGrid.Container>

ui/deposits/optimisticL2/OptimisticDepositsTable.tsx

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

ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
 
 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 AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -23,59 +23,53 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BlockEntityL1
           number={ item.l1_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.l1_block_timestamp }
           isLoading={ isLoading }
           color="text_secondary"
           display="inline-block"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
           truncation="constant_long"
           noIcon
-          fontSize="sm"
-          lineHeight={ 5 }
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <AddressEntityL1
           address={{ hash: item.l1_transaction_origin, name: '', is_contract: false, is_verified: false, ens_domain_name: null, implementations: null }}
           isLoading={ isLoading }
           truncation="constant"
           noCopy
         />
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading } color="text_secondary" display="inline-block">
           <span>{ BigNumber(item.l2_transaction_gas_limit).toFormat() }</span>
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx

@@ -5,7 +5,7 @@ import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
 import getCurrencyValue from 'lib/getCurrencyValue';
-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';
@@ -31,15 +31,13 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL1
           number={ item.origination_transaction_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           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.id }
         </Skeleton>
       </ListItemMobileGrid.Value>
@@ -49,8 +47,6 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.origination_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -70,8 +66,6 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
           <TxEntity
             isLoading={ isLoading }
             hash={ item.completion_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
             truncation="constant_long"
           />
         ) : (
@@ -83,7 +77,7 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { `${ valueStr } ${ config.chain.currency.symbol }` }
         </Skeleton>
       </ListItemMobileGrid.Value>

ui/deposits/scrollL2/ScrollL2DepositsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ScrollL2DepositsTableItem from './ScrollL2DepositsTableItem';
 
@@ -16,23 +15,23 @@ import ScrollL2DepositsTableItem from './ScrollL2DepositsTableItem';
 
 const ScrollL2DepositsTable = ({ 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 { config.chain.currency.symbol }</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 { config.chain.currency.symbol }</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ScrollL2DepositsTableItem key={ String(item.id) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx

-import { Td, Tr, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
 import getCurrencyValue from 'lib/getCurrencyValue';
-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';
@@ -23,46 +24,40 @@ const ScrollL2DepositsTableItem = ({ item, isLoading }: Props) => {
   const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) });
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BlockEntityL1
           number={ item.origination_transaction_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading }>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading }>
           <span>{ item.id }</span>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.origination_transaction_hash }
           truncation="constant_long"
           noIcon
-          fontSize="sm"
-          lineHeight={ 5 }
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.completion_transaction_hash ? (
           <TxEntity
             isLoading={ isLoading }
             hash={ item.completion_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
             truncation="constant_long"
             noIcon
           />
@@ -71,13 +66,13 @@ const ScrollL2DepositsTableItem = ({ 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>{ valueStr }</span>
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import HashStringShorten from 'ui/shared/HashStringShorten';
@@ -24,17 +24,17 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+        <Skeleton loading={ isLoading } display="inline-block">{ item.index }</Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Game type</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.game_type }</Skeleton>
+        <Skeleton loading={ isLoading } display="inline-block">{ item.game_type }</Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value color="text">
-        <Skeleton isLoaded={ !isLoading } display="flex" overflow="hidden" w="100%" alignItems="center">
+        <Skeleton loading={ isLoading } display="flex" overflow="hidden" w="100%" alignItems="center">
           <HashStringShorten hash={ item.contract_address } type="long"/>
           <CopyToClipboard text={ item.contract_address } ml={ 2 } isLoading={ isLoading }/>
         </Skeleton>
@@ -45,8 +45,6 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL2
           isLoading={ isLoading }
           number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
           noIcon
         />
       </ListItemMobileGrid.Value>
@@ -62,7 +60,7 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value color="text">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+        <Skeleton loading={ isLoading } display="inline-block">{ item.status }</Skeleton>
       </ListItemMobileGrid.Value>
 
       { item.resolved_at && (

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import OptimisticL2DisputeGamesTableItem from './OptimisticL2DisputeGamesTableItem';
 
@@ -15,19 +14,19 @@ type Props = {
 
 const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>Index</Th>
-          <Th>Game type</Th>
-          <Th>Address</Th>
-          <Th>L2 block #</Th>
-          <Th>Age</Th>
-          <Th>Status</Th>
-          <Th>Resolution age</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>Index</TableColumnHeader>
+          <TableColumnHeader>Game type</TableColumnHeader>
+          <TableColumnHeader>Address</TableColumnHeader>
+          <TableColumnHeader>L2 block #</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>Status</TableColumnHeader>
+          <TableColumnHeader>Resolution age</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <OptimisticL2DisputeGamesTableItem
             key={ String(item.index) + (isLoading ? index : '') }
@@ -35,8 +34,8 @@ const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx

-import { Flex, Td, Tr } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
 
 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 CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import HashStringShorten from 'ui/shared/HashStringShorten';
@@ -20,49 +21,47 @@ const OptimisticL2DisputeGamesTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.game_type }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">{ item.index }</Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">{ item.game_type }</Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <Flex overflow="hidden" w="100%" alignItems="center">
-          <Skeleton isLoaded={ !isLoading }>
+          <Skeleton loading={ isLoading }>
             <HashStringShorten hash={ item.contract_address } type="long"/>
           </Skeleton>
           <CopyToClipboard text={ item.contract_address } ml={ 2 } isLoading={ isLoading }/>
         </Flex>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <BlockEntityL2
           isLoading={ isLoading }
           number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.created_at }
           isLoading={ isLoading }
           display="inline-block"
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
-      </Td>
-      <Td>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">{ item.status }</Skeleton>
+      </TableCell>
+      <TableCell>
         <TimeAgoWithTooltip
           timestamp={ item.resolved_at }
           fallbackText="N/A"
           isLoading={ isLoading }
           display="inline-block"
         />
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/messages/ArbitrumL2Messages.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 { ARBITRUM_MESSAGES_ITEM } from 'stubs/arbitrumL2';
 import { generateListStub } from 'stubs/utils';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import ArbitrumL2MessagesListItem from 'ui/messages/ArbitrumL2MessagesListItem';
 import ArbitrumL2MessagesTable from 'ui/messages/ArbitrumL2MessagesTable';
 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';
@@ -43,7 +43,7 @@ const ArbitrumL2Messages = ({ direction }: Props) => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ArbitrumL2MessagesListItem
             key={ String(item.id) + (isPlaceholderData ? index : '') }
@@ -52,15 +52,15 @@ const ArbitrumL2Messages = ({ direction }: Props) => {
             direction={ direction }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ArbitrumL2MessagesTable
           items={ data.items }
           direction={ direction }
           top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ isPlaceholderData }
         />
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -71,7 +71,7 @@ const ArbitrumL2Messages = ({ direction }: Props) => {
 
     return (
       <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
+        loading={ countersQuery.isPlaceholderData }
         display="inline-block"
       >
         A total of { countersQuery.data?.toLocaleString() } { type } found
@@ -91,11 +91,12 @@ const ArbitrumL2Messages = ({ direction }: Props) => {
       />
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText={ `There are no ${ type }.` }
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/messages/ArbitrumL2MessagesListItem.tsx

@@ -6,12 +6,12 @@ import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
@@ -41,8 +41,6 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
               <BlockEntityL1
                 number={ item.origination_transaction_block_number }
                 isLoading={ isLoading }
-                fontSize="sm"
-                lineHeight={ 5 }
                 fontWeight={ 600 }
               />
             ) : <chakra.span>N/A</chakra.span> }
@@ -58,8 +56,6 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
               address={{ hash: item.origination_address }}
               truncation="constant"
               isLoading={ isLoading }
-              fontSize="sm"
-              lineHeight={ 5 }
               fontWeight={ 600 }
             />
           </ListItemMobileGrid.Value>
@@ -68,7 +64,7 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Message #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { item.id }
         </Skeleton>
       </ListItemMobileGrid.Value>
@@ -79,8 +75,6 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
           <TxEntity
             isLoading={ isLoading }
             hash={ l2TxHash }
-            fontSize="sm"
-            lineHeight={ 5 }
             truncation="constant_long"
           />
         ) : (
@@ -106,7 +100,7 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         { item.status === 'confirmed' && direction === 'from-rollup' ?
-          <LinkInternal href={ route({ pathname: '/txn-withdrawals', query: { q: item.origination_transaction_hash } }) }>Ready for relay</LinkInternal> :
+          <Link href={ route({ pathname: '/txn-withdrawals', query: { q: item.origination_transaction_hash } }) }>Ready for relay</Link> :
           <ArbitrumL2MessageStatus status={ item.status } isLoading={ isLoading }/> }
       </ListItemMobileGrid.Value>
 
@@ -116,8 +110,6 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ l1TxHash }
-            fontSize="sm"
-            lineHeight={ 5 }
             truncation="constant_long"
           />
         ) : (

ui/messages/ArbitrumL2MessagesTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import type { MessagesDirection } from './ArbitrumL2Messages';
 import ArbitrumL2MessagesTableItem from './ArbitrumL2MessagesTableItem';
@@ -17,19 +16,19 @@ import ArbitrumL2MessagesTableItem from './ArbitrumL2MessagesTableItem';
 
 const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          { direction === 'to-rollup' && <Th>L1 block</Th> }
-          { direction === 'from-rollup' && <Th>From</Th> }
-          <Th>Message #</Th>
-          <Th>L2 transaction</Th>
-          <Th>Age</Th>
-          <Th>Status</Th>
-          <Th>L1 transaction</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          { direction === 'to-rollup' && <TableColumnHeader>L1 block</TableColumnHeader> }
+          { direction === 'from-rollup' && <TableColumnHeader>From</TableColumnHeader> }
+          <TableColumnHeader>Message #</TableColumnHeader>
+          <TableColumnHeader>L2 transaction</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>Status</TableColumnHeader>
+          <TableColumnHeader>L1 transaction</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ArbitrumL2MessagesTableItem
             key={ String(item.id) + (isLoading ? index : '') }
@@ -38,8 +37,8 @@ const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) =>
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/messages/ArbitrumL2MessagesTableItem.tsx

-import { Td, Tr, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
@@ -6,12 +6,13 @@ import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -30,45 +31,39 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
   const l2TxHash = direction === 'from-rollup' ? item.origination_transaction_hash : item.completion_transaction_hash;
 
   return (
-    <Tr>
+    <TableRow>
       { direction === 'to-rollup' && (
-        <Td verticalAlign="middle">
+        <TableCell verticalAlign="middle">
           { item.origination_transaction_block_number ? (
             <BlockEntityL1
               number={ item.origination_transaction_block_number }
               isLoading={ isLoading }
-              fontSize="sm"
-              lineHeight={ 5 }
               fontWeight={ 600 }
               noIcon
             />
           ) : <chakra.span color="text_secondary">N/A</chakra.span> }
-        </Td>
+        </TableCell>
       ) }
       { direction === 'from-rollup' && (
-        <Td verticalAlign="middle">
+        <TableCell verticalAlign="middle">
           <AddressEntity
             address={{ hash: item.origination_address }}
             truncation="constant"
             isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
             fontWeight={ 600 }
           />
-        </Td>
+        </TableCell>
       ) }
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading }>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading }>
           <span>{ item.id }</span>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { l2TxHash ? (
           <TxEntity
             isLoading={ isLoading }
             hash={ l2TxHash }
-            fontSize="sm"
-            lineHeight={ 5 }
             truncation="constant_long"
             noIcon
           />
@@ -77,36 +72,34 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
             N/A
           </chakra.span>
         ) }
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.status === 'confirmed' && direction === 'from-rollup' ?
-          <LinkInternal href={ route({ pathname: '/txn-withdrawals', query: { q: item.origination_transaction_hash } }) }>Ready for relay</LinkInternal> :
+          <Link href={ route({ pathname: '/txn-withdrawals', query: { q: item.origination_transaction_hash } }) }>Ready for relay</Link> :
           <ArbitrumL2MessageStatus status={ item.status } isLoading={ isLoading }/> }
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { l1TxHash ? (
           <TxEntityL1
             isLoading={ isLoading }
             hash={ l1TxHash }
             truncation="constant_long"
             noIcon
-            fontSize="sm"
-            lineHeight={ 5 }
           />
         ) : (
           <chakra.span color="text_secondary">
             N/A
           </chakra.span>
         ) }
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -26,7 +26,7 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L2 output index</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
+        <Skeleton loading={ isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
@@ -43,8 +43,6 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL2
           isLoading={ isLoading }
           number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
           noIcon
         />
       </ListItemMobileGrid.Value>
@@ -54,8 +52,6 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -63,7 +59,7 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Output root</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="start">
-          <Skeleton isLoaded={ !isLoading } color="text_secondary">
+          <Skeleton loading={ isLoading } color="text_secondary">
             <HashStringShorten hash={ item.output_root } type="long"/>
           </Skeleton>
           <CopyToClipboard text={ item.output_root } isLoading={ isLoading }/>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import OptimisticL2OutputRootsTableItem from './OptimisticL2OutputRootsTableItem';
 
@@ -15,17 +14,17 @@ type Props = {
 
 const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table minW="900px">
-      <Thead top={ top }>
-        <Tr>
-          <Th width="160px">L2 output index</Th>
-          <Th width="20%">Age</Th>
-          <Th width="20%">L2 block #</Th>
-          <Th width="30%">L1 txn hash</Th>
-          <Th width="30%">Output root</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot minW="900px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader width="160px">L2 output index</TableColumnHeader>
+          <TableColumnHeader width="20%">Age</TableColumnHeader>
+          <TableColumnHeader width="20%">L2 block #</TableColumnHeader>
+          <TableColumnHeader width="30%">L1 txn hash</TableColumnHeader>
+          <TableColumnHeader width="30%">Output root</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <OptimisticL2OutputRootsTableItem
             key={ item.l2_output_index + (Number(isLoading ? index : '') ? String(index) : '') }
@@ -33,8 +32,8 @@ const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx

-import { Flex, Td, Tr } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
 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 CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -21,47 +22,43 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
           display="inline-block"
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <BlockEntityL2
           isLoading={ isLoading }
           number={ item.l2_block_number }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           noIcon
           truncation="constant_long"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <Flex overflow="hidden" w="100%" alignItems="center">
-          <Skeleton isLoaded={ !isLoading }>
+          <Skeleton loading={ isLoading }>
             <HashStringShorten hash={ item.output_root } type="long"/>
           </Skeleton>
           <CopyToClipboard text={ item.output_root } ml={ 2 } isLoading={ isLoading }/>
         </Flex>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/pages/ArbitrumL2TxnBatch.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 { useAppContext } from 'lib/contexts/app';
 import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
@@ -11,13 +11,13 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import { BLOCK } from 'stubs/block';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
+import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
 import BlocksContent from 'ui/blocks/BlocksContent';
 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 ArbitrumL2TxnBatchDetails from 'ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails';
 import useBatchQuery from 'ui/txnBatches/arbitrumL2/useBatchQuery';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
@@ -81,7 +81,7 @@ const ArbitrumL2TxnBatch = () => {
 
   const hasPagination = !isMobile && pagination?.isVisible;
 
-  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+  const tabs: Array<TabItemRegular> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <ArbitrumL2TxnBatchDetails query={ batchQuery }/> },
     {
       id: 'txs',
@@ -117,10 +117,10 @@ const ArbitrumL2TxnBatch = () => {
         isLoading={ batchQuery.isPlaceholderData }
       />
       { 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 ? <Pagination { ...(pagination) }/> : null }
             stickyEnabled={ hasPagination }
           />

ui/pages/ArbitrumL2TxnBatches.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 { ARBITRUM_L2_TXN_BATCHES_ITEM } from 'stubs/arbitrumL2';
 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';
@@ -38,7 +38,7 @@ const ArbitrumL2TxnBatches = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ArbitrumL2TxnBatchesListItem
             key={ item.number + (isPlaceholderData ? String(index) : '') }
@@ -46,10 +46,10 @@ const ArbitrumL2TxnBatches = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ArbitrumL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +59,7 @@ const ArbitrumL2TxnBatches = () => {
     }
 
     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 ArbitrumL2TxnBatches = () => {
       <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/ArbitrumL2TxnWithdrawals.tsx

@@ -82,7 +82,7 @@ const ArbitrumL2TxnWithdrawals = () => {
           name="tx_hash"
           w={{ base: '100%', lg: '700px' }}
           mt={ 6 }
-          size="xs"
+          size="sm"
           placeholder="Search by transaction hash"
           initialValue={ searchTerm }
           onChange={ handleSearchTermChange }
@@ -94,13 +94,14 @@ const ArbitrumL2TxnWithdrawals = () => {
       <DataListDisplay
         mt={ 6 }
         isError={ isError }
-        items={ searchTerm ? data?.items : undefined }
+        itemsNum={ searchTerm ? data?.items.length : undefined }
         filterProps={{
           emptyFilteredText: `Couldn${ apos }t find any withdrawals for your transaction.`,
           hasActiveFilters: Boolean(searchTerm),
         }}
-        content={ content }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/OptimisticL2Deposits.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 { L2_DEPOSIT_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import OptimisticDepositsListItem from 'ui/deposits/optimisticL2/OptimisticDepositsListItem';
 import OptimisticDepositsTable from 'ui/deposits/optimisticL2/OptimisticDepositsTable';
 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';
@@ -40,7 +40,7 @@ const OptimisticL2Deposits = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <OptimisticDepositsListItem
             key={ item.l2_transaction_hash + (isPlaceholderData ? index : '') }
@@ -48,10 +48,10 @@ const OptimisticL2Deposits = () => {
             item={ item }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <OptimisticDepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -61,10 +61,7 @@ const OptimisticL2Deposits = () => {
     }
 
     return (
-      <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
-        display="inline-block"
-      >
+      <Skeleton loading={ countersQuery.isPlaceholderData } display="inline-block">
         A total of { countersQuery.data?.toLocaleString() } deposits found
       </Skeleton>
     );
@@ -77,11 +74,12 @@ const OptimisticL2Deposits = () => {
       <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/OptimisticL2DisputeGames.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 { L2_DISPUTE_GAMES_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import OptimisticL2DisputeGamesListItem from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem';
 import OptimisticL2DisputeGamesTable from 'ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable';
 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 OptimisticL2DisputeGames = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <OptimisticL2DisputeGamesListItem
             key={ item.index + (isPlaceholderData ? String(index) : '') }
@@ -46,10 +46,10 @@ const OptimisticL2DisputeGames = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <OptimisticL2DisputeGamesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +59,7 @@ const OptimisticL2DisputeGames = () => {
     }
 
     return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+      <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
         Dispute game index
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].index } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].index } </Text>
@@ -75,11 +75,12 @@ const OptimisticL2DisputeGames = () => {
       <PageTitle title="Dispute games" withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no dispute games."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/OptimisticL2OutputRoots.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 { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import OptimisticL2OutputRootsListItem from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem';
 import OptimisticL2OutputRootsTable from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable';
 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 OptimisticL2OutputRoots = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <OptimisticL2OutputRootsListItem
             key={ item.l2_output_index + (isPlaceholderData ? String(index) : '') }
@@ -46,10 +46,10 @@ const OptimisticL2OutputRoots = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <OptimisticL2OutputRootsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +59,7 @@ const OptimisticL2OutputRoots = () => {
     }
 
     return (
-      <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
+      <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
         L2 output index
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_output_index } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_output_index } </Text>
@@ -75,11 +75,12 @@ const OptimisticL2OutputRoots = () => {
       <PageTitle title="Output roots" withTextAd/>
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no output roots."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/pages/OptimisticL2TxnBatch.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 { useAppContext } from 'lib/contexts/app';
 import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
@@ -11,13 +11,13 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import { BLOCK } from 'stubs/block';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
+import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
 import BlocksContent from 'ui/blocks/BlocksContent';
 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 OptimisticL2TxnBatchDetails from 'ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails';
 import useBatchQuery from 'ui/txnBatches/optimisticL2/useBatchQuery';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
@@ -79,7 +79,7 @@ const OptimisticL2TxnBatch = () => {
 
   const hasPagination = !isMobile && pagination?.isVisible;
 
-  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+  const tabs: Array<TabItemRegular> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <OptimisticL2TxnBatchDetails query={ batchQuery }/> },
     {
       id: 'txs',
@@ -115,10 +115,10 @@ const OptimisticL2TxnBatch = () => {
         isLoading={ batchQuery.isPlaceholderData }
       />
       { 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 ? <Pagination { ...(pagination) }/> : null }
             stickyEnabled={ hasPagination }
           />

ui/pages/OptimisticL2TxnBatches.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 { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
 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';
@@ -38,7 +38,7 @@ const OptimisticL2TxnBatches = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <OptimisticL2TxnBatchesListItem
             key={ item.internal_id + (isPlaceholderData ? String(index) : '') }
@@ -46,10 +46,10 @@ const OptimisticL2TxnBatches = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <OptimisticL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +59,7 @@ const OptimisticL2TxnBatches = () => {
     }
 
     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].internal_id } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].internal_id } </Text>
@@ -75,11 +75,12 @@ const OptimisticL2TxnBatches = () => {
       <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/OptimisticL2Withdrawals.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 { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
 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 OptimisticL2Withdrawals = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>{ data.items.map(((item, index) => (
+      <Box hideFrom="lg">
+        { data.items.map(((item, index) => (
           <OptimisticL2WithdrawalsListItem
             key={ String(item.msg_nonce_version) + item.msg_nonce + (isPlaceholderData ? index : '') }
             item={ item }
             isLoading={ isPlaceholderData }
           />
-      ))) }</Show>
-      <Hide below="lg" ssr={ false }>
+        ))) }
+      </Box>
+      <Box hideBelow="lg">
         <OptimisticL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +61,7 @@ const OptimisticL2Withdrawals = () => {
 
     return (
       <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
+        loading={ countersQuery.isPlaceholderData }
         display="inline-block"
       >
         A total of { countersQuery.data?.toLocaleString() } withdrawals found
@@ -74,11 +76,12 @@ const OptimisticL2Withdrawals = () => {
       <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/ScrollL2Deposits.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 { SCROLL_L2_MESSAGE_ITEM } from 'stubs/scrollL2';
 import { generateListStub } from 'stubs/utils';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import ScrollL2DepositsListItem from 'ui/deposits/scrollL2/ScrollL2DepositsListItem';
 import ScrollL2DepositsTable from 'ui/deposits/scrollL2/ScrollL2DepositsTable';
 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 ScrollL2Deposits = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ScrollL2DepositsListItem
             key={ String(item.id) + (isPlaceholderData ? index : '') }
@@ -42,10 +42,10 @@ const ScrollL2Deposits = () => {
             item={ item }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ScrollL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -56,7 +56,7 @@ const ScrollL2Deposits = () => {
 
     return (
       <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
+        loading={ countersQuery.isPlaceholderData }
         display="inline-block"
       >
         A total of { countersQuery.data?.toLocaleString() } deposits found
@@ -71,11 +71,12 @@ const ScrollL2Deposits = () => {
       <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/ScrollL2TxnBatch.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';
@@ -13,13 +13,13 @@ import { BLOCK } from 'stubs/block';
 import { SCROLL_L2_TXN_BATCH } from 'stubs/scrollL2';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
+import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
 import BlocksContent from 'ui/blocks/BlocksContent';
 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 ScrollL2TxnBatchDetails from 'ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
@@ -86,7 +86,7 @@ const ScrollL2TxnBatch = () => {
 
   const hasPagination = !isMobile && pagination?.isVisible;
 
-  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+  const tabs: Array<TabItemRegular> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <ScrollL2TxnBatchDetails query={ batchQuery }/> },
     {
       id: 'txs',
@@ -121,10 +121,10 @@ const ScrollL2TxnBatch = () => {
         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 ? <Pagination { ...(pagination) }/> : null }
             stickyEnabled={ hasPagination }
           />

ui/pages/ScrollL2TxnBatches.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 { SCROLL_L2_TXN_BATCH } from 'stubs/scrollL2';
 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';
@@ -38,7 +38,7 @@ const ScrollL2TxnBatches = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ScrollL2TxnBatchesListItem
             key={ item.number + (isPlaceholderData ? String(index) : '') }
@@ -46,10 +46,10 @@ const ScrollL2TxnBatches = () => {
             isLoading={ isPlaceholderData }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ScrollL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,7 +59,7 @@ const ScrollL2TxnBatches = () => {
     }
 
     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 ScrollL2TxnBatches = () => {
       <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/ScrollL2Withdrawals.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 { SCROLL_L2_MESSAGE_ITEM } from 'stubs/scrollL2';
 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';
@@ -34,7 +34,7 @@ const ScrollL2Withdrawals = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map(((item, index) => (
           <ScrollL2WithdrawalsListItem
             key={ String(item.id) + (isPlaceholderData ? index : '') }
@@ -42,10 +42,10 @@ const ScrollL2Withdrawals = () => {
             item={ item }
           />
         ))) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <ScrollL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -56,7 +56,7 @@ const ScrollL2Withdrawals = () => {
 
     return (
       <Skeleton
-        isLoaded={ !countersQuery.isPlaceholderData }
+        loading={ countersQuery.isPlaceholderData }
         display="inline-block"
       >
         A total of { countersQuery.data?.toLocaleString() } withdrawals found
@@ -71,11 +71,12 @@ const ScrollL2Withdrawals = () => {
       <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/shared/ListItemMobile/ListItemMobileGrid.tsx

@@ -25,8 +25,7 @@ const Container = chakra(({ animation, children, className }: ContainerProps) =>
         borderBottomWidth: '1px',
       }}
       className={ className }
-      fontSize="sm"
-      lineHeight="20px"
+      textStyle="sm"
     >
       { children }
     </Grid>

ui/shared/batch/ArbitrumL2TxnBatchDA.tsx

-import { Tag } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Badge } from 'toolkit/chakra/badge';
 
 export interface Props {
   dataContainer: ArbitrumL2TxnBatchesItem['batch_data_container'];
@@ -39,11 +38,9 @@ const ArbitrumL2TxnBatchDA = ({ dataContainer, isLoading }: Props) => {
   }
 
   return (
-    <Skeleton isLoaded={ !isLoading }>
-      <Tag colorScheme={ dataContainer === 'in_blob4844' ? 'yellow' : 'gray' }>
+    <Badge loading={ isLoading } colorPalette={ dataContainer === 'in_blob4844' ? 'yellow' : 'gray' }>
       { text }
-      </Tag>
-    </Skeleton>
+    </Badge>
   );
 };
 

ui/shared/batch/CeleniumLink.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import celeniumIcon from 'icons/brands/celenium.svg';
 import hexToBase64 from 'lib/hexToBase64';
-import LinkExternal from 'ui/shared/links/LinkExternal';
+import { Link } from 'toolkit/chakra/link';
 
 interface Props {
   commitment: string;
@@ -26,7 +26,7 @@ const CeleniumLink = (props: Props) => {
   return (
     <Flex alignItems="center" columnGap={ 2 }>
       <Icon as={ celeniumIcon } boxSize={ 5 }/>
-      <LinkExternal href={ getCeleniumUrl(props) }>Blob page</LinkExternal>
+      <Link external href={ getCeleniumUrl(props) }>Blob page</Link>
     </Flex>
   );
 };

ui/shared/batch/OptimisticL2TxnBatchDA.tsx

@@ -24,7 +24,7 @@ const OptimisticL2TxnBatchDA = ({ container, isLoading }: Props) => {
   })();
 
   return (
-    <Badge colorScheme="yellow" loading={ isLoading }>
+    <Badge colorPalette="yellow" loading={ isLoading }>
       { text }
     </Badge>
   );

ui/shared/batch/ScrollL2TxnBatchDA.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
 import type { ExcludeUndefined } from 'types/utils';
 
-import Tag from 'ui/shared/chakra/Tag';
+import { Badge } from 'toolkit/chakra/badge';
 
 export interface Props {
   container: ExcludeUndefined<ScrollL2TxnBatch['data_availability']['batch_data_container']>;
@@ -22,9 +22,9 @@ const ScrollL2TxnBatchDA = ({ container, isLoading }: Props) => {
   })();
 
   return (
-    <Tag colorScheme="yellow" isLoading={ isLoading }>
+    <Badge colorPalette="yellow" loading={ isLoading }>
       { text }
-    </Tag>
+    </Badge>
   );
 };
 

ui/shared/forms/components/FieldError.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 const FieldError = ({ message, className }: Props) => {
-  return <Box className={ className } color="error" fontSize="sm" mt={ 2 } wordBreak="break-word">{ message }</Box>;
+  return <Box className={ className } color="error" textStyle="sm" mt={ 2 } wordBreak="break-word">{ message }</Box>;
 };
 
 export default chakra(FieldError);

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx

-import { Grid, GridItem, Link } from '@chakra-ui/react';
+import { Grid, GridItem } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { scroller, Element } from 'react-scroll';
 
 import type { ArbitrumL2TxnBatch } from 'types/api/arbitrumL2';
 
@@ -10,9 +9,11 @@ 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 CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
-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';
@@ -20,26 +21,17 @@ import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 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 ArbitrumL2TxnBatchDetailsAnyTrustDA from './ArbitrumL2TxnBatchDetailsAnyTrustDA';
 import ArbitrumL2TxnBatchDetailsCelestiaDA from './ArbitrumL2TxnBatchDetailsCelestiaDA';
+
 interface Props {
   query: UseQueryResult<ArbitrumL2TxnBatch, ResourceError>;
 }
 
 const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
   const router = useRouter();
-  const [ isExpanded, setIsExpanded ] = React.useState(false);
-
-  const handleCutClick = React.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-    scroller.scrollTo('BatchDetails__cutLink', {
-      duration: 500,
-      smooth: true,
-    });
-  }, []);
 
   const { data, isPlaceholderData, isError, error } = query;
 
@@ -82,7 +74,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
         Txn batch number
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData }>
           { data.number }
         </Skeleton>
         <PrevNext
@@ -115,11 +107,9 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
         Transactions
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+        <Link loading={ isPlaceholderData } href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
           { data.transactions_count.toLocaleString() } transaction{ data.transactions_count === 1 ? '' : 's' }
-          </LinkInternal>
-        </Skeleton>
+        </Link>
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -129,11 +119,9 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
         Blocks
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
+        <Link loading={ isPlaceholderData } href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
           { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
-          </LinkInternal>
-        </Skeleton>
+        </Link>
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -183,7 +171,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
         Before acc
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue flexWrap="nowrap" >
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+        <Skeleton loading={ isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.before_acc }/>
         </Skeleton>
         <CopyToClipboard text={ data.before_acc } isLoading={ isPlaceholderData }/>
@@ -196,33 +184,19 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
         After acc
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue flexWrap="nowrap">
-        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+        <Skeleton loading={ isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.after_acc }/>
         </Skeleton>
         <CopyToClipboard text={ data.after_acc } isLoading={ isPlaceholderData }/>
       </DetailedInfo.ItemValue>
 
       { (data.data_availability.batch_data_container === 'in_anytrust' || data.data_availability.batch_data_container === 'in_celestia') && (
-        <>
-          { /* CUT */ }
-          <GridItem colSpan={{ base: undefined, lg: 2 }}>
-            <Element name="BatchDetails__cutLink">
-              <Skeleton isLoaded={ !isPlaceholderData } mt={ 6 } display="inline-block">
-                <Link
-                  fontSize="sm"
-                  textDecorationLine="underline"
-                  textDecorationStyle="dashed"
-                  onClick={ handleCutClick }
+        <CutLinkDetails
+          loading={ isPlaceholderData }
+          mt={ 6 }
+          gridColumn={{ base: undefined, lg: '1 / 3' }}
+          text={ [ 'Show data availability info', 'Hide data availability info' ] }
         >
-                  { isExpanded ? 'Hide data availability info' : 'Show data availability info' }
-                </Link>
-              </Skeleton>
-            </Element>
-          </GridItem>
-
-          { /* ADDITIONAL INFO */ }
-          { isExpanded && !isPlaceholderData && (
-            <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
           { data.data_availability.batch_data_container === 'in_anytrust' && (
@@ -231,9 +205,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
           { data.data_availability.batch_data_container === 'in_celestia' && (
             <ArbitrumL2TxnBatchDetailsCelestiaDA data={ data.data_availability }/>
           ) }
-            </>
-          ) }
-        </>
+        </CutLinkDetails>
       ) }
     </Grid>
   );

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsAnyTrustDA.tsx

-import { Grid, Text, Flex, Box, useColorModeValue, Show, Hide, VStack } from '@chakra-ui/react';
+import { Grid, Text, Flex, Box, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2TxnBatchDAAnytrust } from 'types/api/arbitrumL2';
 
 import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
-import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
+import DetailsTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import IconSvg from 'ui/shared/IconSvg';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -16,28 +16,26 @@ type Props = {
 };
 
 const ArbitrumL2TxnBatchDetailsAnyTrustDA = ({ data }: Props) => {
-  const signersBg = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
   return (
     <>
-      <DetailsInfoItem.Label
+      <DetailedInfo.ItemLabel
         hint="Aggregated BLS signature of AnyTrust committee members"
       >
         Signature
-      </DetailsInfoItem.Label><DetailsInfoItem.Value wordBreak="break-all" whiteSpace="break-spaces">
+      </DetailedInfo.ItemLabel><DetailedInfo.ItemValue wordBreak="break-all" whiteSpace="break-spaces">
         { data.bls_signature }
-      </DetailsInfoItem.Value><DetailsInfoItem.Label
+      </DetailedInfo.ItemValue><DetailedInfo.ItemLabel
         hint="The hash of the data blob stored by the AnyTrust committee"
       >
         Data hash
-      </DetailsInfoItem.Label><DetailsInfoItem.Value>
+      </DetailedInfo.ItemLabel><DetailedInfo.ItemValue>
         { data.data_hash }
         <CopyToClipboard text={ data.data_hash } ml={ 2 }/>
-      </DetailsInfoItem.Value><DetailsInfoItem.Label
+      </DetailedInfo.ItemValue><DetailedInfo.ItemLabel
         hint="Expiration timeout for the data blob"
       >
         Timeout
-      </DetailsInfoItem.Label><DetailsInfoItem.Value>
+      </DetailedInfo.ItemLabel><DetailedInfo.ItemValue>
         { dayjs(data.timeout) < dayjs() ?
           <DetailsTimestamp timestamp={ data.timeout }/> :
           (
@@ -47,18 +45,18 @@ const ArbitrumL2TxnBatchDetailsAnyTrustDA = ({ data }: Props) => {
               <Text color="red.500">{ dayjs(data.timeout).diff(dayjs(), 'day') } days left</Text>
             </>
           ) }
-      </DetailsInfoItem.Value>
-      <DetailsInfoItem.Label
+      </DetailedInfo.ItemValue>
+      <DetailedInfo.ItemLabel
         hint="Members of AnyTrust committee"
       >
         Signers
-      </DetailsInfoItem.Label>
-      <DetailsInfoItem.Value overflowX="scroll" fontSize="sm">
-        <Show above="lg" ssr={ false }>
+      </DetailedInfo.ItemLabel>
+      <DetailedInfo.ItemValue overflowX="scroll" fontSize="sm">
         <Grid
+          hideBelow="lg"
           templateColumns="1fr auto auto"
           gap={ 5 }
-            backgroundColor={ signersBg }
+          backgroundColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
           padding={ 4 }
           borderRadius="md"
           minW="600px"
@@ -84,10 +82,8 @@ const ArbitrumL2TxnBatchDetailsAnyTrustDA = ({ data }: Props) => {
             </>
           )) }
         </Grid>
-        </Show>
 
-        <Hide above="lg" ssr={ false }>
-          <Box backgroundColor={ signersBg } borderRadius="md">
+        <Box hideFrom="lg" backgroundColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }} borderRadius="md">
           { data.signers.map(signer => (
             <VStack padding={ 4 } key={ signer.key } gap={ 2 }>
               <Flex w="100%" justifyContent="space-between">
@@ -113,8 +109,7 @@ const ArbitrumL2TxnBatchDetailsAnyTrustDA = ({ data }: Props) => {
             </VStack>
           )) }
         </Box>
-        </Hide>
-      </DetailsInfoItem.Value>
+      </DetailedInfo.ItemValue>
     </>
   );
 };

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsCelestiaDA.tsx

@@ -6,7 +6,7 @@ import type { ArbitrumL2TxnBatchDACelestia } from 'types/api/arbitrumL2';
 import config from 'configs/app';
 import CeleniumLink from 'ui/shared/batch/CeleniumLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 const feature = config.features.rollup;
@@ -18,21 +18,21 @@ interface Props {
 const ArbitrumL2TxnBatchDetailsCelestiaDA = ({ data }: Props) => {
   return (
     <>
-      <DetailsInfoItem.Label
+      <DetailedInfo.ItemLabel
         hint="The block number in Celestia where the Data Availability blob was published"
       >
         Height
-      </DetailsInfoItem.Label>
-      <DetailsInfoItem.Value wordBreak="break-all" whiteSpace="break-spaces">
+      </DetailedInfo.ItemLabel>
+      <DetailedInfo.ItemValue wordBreak="break-all" whiteSpace="break-spaces">
         { data.height }
-      </DetailsInfoItem.Value>
+      </DetailedInfo.ItemValue>
 
-      <DetailsInfoItem.Label
+      <DetailedInfo.ItemLabel
         hint="The Data Availability blob’s unique cryptographic proof"
       >
         Commitment
-      </DetailsInfoItem.Label>
-      <DetailsInfoItem.Value flexWrap="nowrap">
+      </DetailedInfo.ItemLabel>
+      <DetailedInfo.ItemValue flexWrap="nowrap">
         <Flex overflow="hidden" minW="0">
           <HashStringShortenDynamic hash={ data.transaction_commitment }/>
         </Flex>
@@ -44,7 +44,7 @@ const ArbitrumL2TxnBatchDetailsCelestiaDA = ({ data }: Props) => {
             height={ data.height }
           />
         ) }
-      </DetailsInfoItem.Value>
+      </DetailedInfo.ItemValue>
     </>
   );
 };

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx

@@ -5,12 +5,12 @@ import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
@@ -32,8 +32,6 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
@@ -48,8 +46,6 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL1
           number={ item.commitment_transaction.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
         />
       </ListItemMobileGrid.Value>
 
@@ -57,7 +53,7 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Block count</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count.toLocaleString() }</Skeleton>
+            <Skeleton loading={ isLoading } display="inline-block">{ item.blocks_count.toLocaleString() }</Skeleton>
           </ListItemMobileGrid.Value>
         </>
       ) }
@@ -67,8 +63,6 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           hash={ item.commitment_transaction.hash }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -85,15 +79,14 @@ const ArbitrumL2TxnBatchesListItem = ({ 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.transactions_count.toLocaleString() }
-          </Skeleton>
-        </LinkInternal>
+        </Link>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Data container</ListItemMobileGrid.Label>

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ArbitrumL2TxnBatchesTableItem from './ArbitrumL2TxnBatchesTableItem';
 
@@ -15,19 +14,19 @@ type Props = {
 
 const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
-      <Thead top={ top }>
-        <Tr>
-          <Th>Batch #</Th>
-          <Th>L1 status</Th>
-          <Th>L1 block</Th>
-          <Th>Block count</Th>
-          <Th>L1 transaction</Th>
-          <Th>Age</Th>
-          <Th>Txn count</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="1000px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>Batch #</TableColumnHeader>
+          <TableColumnHeader>L1 status</TableColumnHeader>
+          <TableColumnHeader>L1 block</TableColumnHeader>
+          <TableColumnHeader>Block count</TableColumnHeader>
+          <TableColumnHeader>L1 transaction</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>Txn count</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ArbitrumL2TxnBatchesTableItem
             key={ item.number + (isLoading ? String(index) : '') }
@@ -35,8 +34,8 @@ const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx

-import { Td, Tr, HStack } from '@chakra-ui/react';
+import { HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
@@ -6,12 +6,13 @@ import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -25,62 +26,55 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <HStack gap={ 1 }>
           <ArbitrumL2TxnBatchStatus status={ item.commitment_transaction.status } isLoading={ isLoading }/>
           <ArbitrumL2TxnBatchDA dataContainer={ item.batch_data_container } isLoading={ isLoading }/>
         </HStack>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <BlockEntityL1
           number={ item.commitment_transaction.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count ? item.blocks_count.toLocaleString() : 'N/A' }</Skeleton>
-      </Td>
-      <Td pr={ 12 } verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">{ item.blocks_count ? item.blocks_count.toLocaleString() : 'N/A' }</Skeleton>
+      </TableCell>
+      <TableCell pr={ 12 } verticalAlign="middle">
         <TxEntityL1
           hash={ item.commitment_transaction.hash }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.commitment_transaction.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"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
           { item.transactions_count.toLocaleString() }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-    </Tr>
+        </Link>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobWrapper.tsx

-import { chakra, Grid, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
@@ -8,20 +8,18 @@ interface Props {
 }
 
 const OptimisticL2TxnBatchBlobWrapper = ({ children, className, isLoading }: Props) => {
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
   return (
     <Grid
       className={ className }
       columnGap={ 3 }
       rowGap="10px"
       p={ 4 }
-      bgColor={ bgColor }
+      bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.100' }}
       gridTemplateColumns="auto 1fr"
       borderRadius="base"
       w="100%"
       h={ isLoading ? '140px' : undefined }
-      fontSize="sm"
-      lineHeight={ 5 }
+      textStyle="sm"
     >
       { isLoading ? null : children }
     </Grid>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx

@@ -9,13 +9,13 @@ 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 OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 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 OptimisticL2TxnBatchBlobCallData from './OptimisticL2TxnBatchBlobCallData';
@@ -70,7 +70,7 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
         Batch ID
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData }>
           { data.internal_id }
         </Skeleton>
         <PrevNext
@@ -103,10 +103,10 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
         Transactions
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'txs' } }) }>
+        <Skeleton loading={ isPlaceholderData }>
+          <Link href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'txs' } }) }>
             { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
-          </LinkInternal>
+          </Link>
           { ' ' }in this batch
         </Skeleton>
       </DetailedInfo.ItemValue>
@@ -118,10 +118,10 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
         Blocks
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'blocks' } }) }>
+        <Skeleton loading={ isPlaceholderData }>
+          <Link href={ route({ pathname: '/batches/[number]', query: { number: data.internal_id.toString(), tab: 'blocks' } }) }>
             { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
-          </LinkInternal>
+          </Link>
           { ' ' }in this batch
         </Skeleton>
       </DetailedInfo.ItemValue>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx

@@ -5,10 +5,10 @@ import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -51,33 +51,31 @@ const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn count</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } minW="40px">
+        <Skeleton loading={ isLoading } minW="40px">
           { item.l1_transaction_hashes.length }
         </Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L2 blocks</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <LinkInternal
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'blocks' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
+          minW="40px"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
           { item.l2_block_end - item.l2_block_start + 1 }
-          </Skeleton>
-        </LinkInternal>
+        </Link>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <LinkInternal
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
+          minW="40px"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
           { item.transaction_count }
-          </Skeleton>
-        </LinkInternal>
+        </Link>
       </ListItemMobileGrid.Value>
 
     </ListItemMobileGrid.Container>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import OptimisticL2TxnBatchesTableItem from './OptimisticL2TxnBatchesTableItem';
 
@@ -15,18 +14,18 @@ type Props = {
 
 const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table minW="850px" layout="auto">
-      <Thead top={ top }>
-        <Tr>
-          <Th>Batch ID</Th>
-          <Th >Storage</Th>
-          <Th >Age</Th>
-          <Th isNumeric>L1 txn count</Th>
-          <Th isNumeric>L2 blocks</Th>
-          <Th isNumeric>Txn</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="850px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>Batch ID</TableColumnHeader>
+          <TableColumnHeader>Storage</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader isNumeric>L1 txn count</TableColumnHeader>
+          <TableColumnHeader isNumeric>L2 blocks</TableColumnHeader>
+          <TableColumnHeader isNumeric>Txn</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <OptimisticL2TxnBatchesTableItem
             key={ item.internal_id + (isLoading ? String(index) : '') }
@@ -34,8 +33,8 @@ const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
@@ -6,10 +5,11 @@ import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
@@ -22,14 +22,14 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BatchEntityL2 number={ item.internal_id } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.batch_data_container ? <OptimisticL2TxnBatchDA container={ item.batch_data_container } isLoading={ isLoading }/> : '-' }
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
@@ -37,35 +37,33 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           color="text_secondary"
           my={ 1 }
         />
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading } minW="40px" display="inline-block">
           { item.l1_transaction_hashes.length }
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <LinkInternal
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'blocks' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
           justifyContent="flex-end"
+          minW="40px"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
           { item.l2_block_end - item.l2_block_start + 1 }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <LinkInternal
+        </Link>
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.internal_id.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
           justifyContent="flex-end"
+          minW="40px"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px" display="inline-block">
           { item.transaction_count }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-    </Tr>
+        </Link>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx

@@ -9,15 +9,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 ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
 import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
 
@@ -69,7 +69,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
         Txn batch number
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData }>
           { data.number }
         </Skeleton>
         <PrevNext
@@ -111,7 +111,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
       <DetailedInfo.ItemValue>
         { data.confirmation_transaction.timestamp ?
           <DetailedInfoTimestamp timestamp={ data.confirmation_transaction.timestamp }isLoading={ isPlaceholderData }/> :
-          <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton>
+          <Skeleton loading={ isPlaceholderData } display="inline-block">Pending</Skeleton>
         }
       </DetailedInfo.ItemValue>
 
@@ -122,11 +122,9 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
         Transactions
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+        <Link loading={ isPlaceholderData } href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
           { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
-          </LinkInternal>
-        </Skeleton>
+        </Link>
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -136,11 +134,9 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
         Blocks
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
+        <Link loading={ isPlaceholderData } href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
           { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
-          </LinkInternal>
-        </Skeleton>
+        </Link>
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -152,7 +148,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
       <DetailedInfo.ItemValue>
         { data.commitment_transaction.timestamp ?
           <DetailedInfoTimestamp timestamp={ data.commitment_transaction.timestamp }isLoading={ isPlaceholderData }/> :
-          <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton>
+          <Skeleton loading={ isPlaceholderData } display="inline-block">Pending</Skeleton>
         }
       </DetailedInfo.ItemValue>
 
@@ -196,7 +192,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
             hash={ data.confirmation_transaction.hash }
             maxW="100%"
           />
-        ) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> }
+        ) : <Skeleton loading={ isPlaceholderData } display="inline-block">Pending</Skeleton> }
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -211,7 +207,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
             isLoading={ isPlaceholderData }
             number={ data.confirmation_transaction.block_number }
           />
-        ) : <Skeleton isLoaded={ !isPlaceholderData } display="inline-block">Pending</Skeleton> }
+        ) : <Skeleton loading={ isPlaceholderData } display="inline-block">Pending</Skeleton> }
       </DetailedInfo.ItemValue>
     </Grid>
   );

ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx

@@ -5,12 +5,12 @@ import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
@@ -32,8 +32,6 @@ const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
         />
       </ListItemMobileGrid.Value>
@@ -53,8 +51,6 @@ const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         <BlockEntityL1
           number={ item.commitment_transaction.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
         />
       </ListItemMobileGrid.Value>
 
@@ -63,8 +59,6 @@ const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           hash={ item.commitment_transaction.hash }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
         />
       </ListItemMobileGrid.Value>
 
@@ -84,10 +78,8 @@ const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
           <BlockEntityL1
             number={ item.confirmation_transaction.block_number }
             isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
           />
-        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
+        ) : <Skeleton loading={ isLoading } display="inline-block">Pending</Skeleton> }
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Finalized txn hash</ListItemMobileGrid.Label>
@@ -96,36 +88,32 @@ const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             hash={ item.confirmation_transaction.hash }
             isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
           />
-        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
+        ) : <Skeleton loading={ isLoading } display="inline-block">Pending</Skeleton> }
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Blocks count</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <LinkInternal
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'blocks' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
           fontWeight={ 600 }
+          minW="40px"
         >
-          <Skeleton isLoaded={ !isLoading } minW="40px">
           { (item.end_block - item.start_block + 1).toLocaleString() }
-          </Skeleton>
-        </LinkInternal>
+        </Link>
       </ListItemMobileGrid.Value>
 
       <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.toLocaleString() }
-          </Skeleton>
-        </LinkInternal>
+        </Link>
       </ListItemMobileGrid.Value>
 
     </ListItemMobileGrid.Container>

ui/txnBatches/scrollL2/ScrollL2TxnBatchesTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ScrollL2TxnBatchesTableItem from './ScrollL2TxnBatchesTableItem';
 
@@ -15,22 +14,22 @@ type Props = {
 
 const ScrollL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
-      <Thead top={ top }>
-        <Tr>
-          <Th>Batch #</Th>
-          <Th>Container</Th>
-          <Th>Status</Th>
-          <Th>Committed block</Th>
-          <Th>Committed txn hash</Th>
-          <Th>Age</Th>
-          <Th>Finalized block</Th>
-          <Th>Finalized txn hash</Th>
-          <Th isNumeric>Blocks</Th>
-          <Th isNumeric>Txn</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="1000px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>Batch #</TableColumnHeader>
+          <TableColumnHeader>Container</TableColumnHeader>
+          <TableColumnHeader>Status</TableColumnHeader>
+          <TableColumnHeader>Committed block</TableColumnHeader>
+          <TableColumnHeader>Committed txn hash</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>Finalized block</TableColumnHeader>
+          <TableColumnHeader>Finalized txn hash</TableColumnHeader>
+          <TableColumnHeader isNumeric>Blocks</TableColumnHeader>
+          <TableColumnHeader isNumeric>Txn</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ScrollL2TxnBatchesTableItem
             key={ item.number + (isLoading ? String(index) : '') }
@@ -38,8 +37,8 @@ const ScrollL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
@@ -6,12 +5,13 @@ import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import ScrollL2TxnBatchDA from 'ui/shared/batch/ScrollL2TxnBatchDA';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -25,90 +25,76 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <ScrollL2TxnBatchDA container={ item.data_availability?.batch_data_container } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <ScrollL2TxnBatchStatus status={ item.confirmation_transaction.hash ? 'Finalized' : 'Committed' } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <BlockEntityL1
           number={ item.commitment_transaction.block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntityL1
           hash={ item.commitment_transaction.hash }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.commitment_transaction.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.confirmation_transaction.block_number ? (
           <BlockEntityL1
             number={ item.confirmation_transaction.block_number }
             isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
           />
-        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
-      </Td>
-      <Td verticalAlign="middle">
+        ) : <Skeleton loading={ isLoading } display="inline-block">Pending</Skeleton> }
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.confirmation_transaction.hash ? (
           <TxEntityL1
             hash={ item.confirmation_transaction.hash }
             isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
             truncation="constant_long"
           />
-        ) : <Skeleton isLoaded={ !isLoading } display="inline-block">Pending</Skeleton> }
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <LinkInternal
+        ) : <Skeleton loading={ isLoading } display="inline-block">Pending</Skeleton> }
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'blocks' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
         >
-          <Skeleton isLoaded={ !isLoading }>
           { (item.end_block - item.start_block + 1).toLocaleString() }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <LinkInternal
+        </Link>
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          isLoading={ isLoading }
+          loading={ isLoading }
         >
-          <Skeleton isLoaded={ !isLoading }>
           { item.transaction_count.toLocaleString() }
-          </Skeleton>
-        </LinkInternal>
-      </Td>
-    </Tr>
+        </Link>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsClaimButton.tsx

-import { Button } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 import { useSendTransaction, useSwitchChain } from 'wagmi';
@@ -13,9 +12,10 @@ import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
 import getErrorMessage from 'lib/errors/getErrorMessage';
 import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
 import getErrorProp from 'lib/errors/getErrorProp';
-import useToast from 'lib/hooks/useToast';
 import useWallet from 'lib/web3/useWallet';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Button } from 'toolkit/chakra/button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { toaster } from 'toolkit/chakra/toaster';
 
 import ArbitrumL2TxnWithdrawalsClaimTx from './ArbitrumL2TxnWithdrawalsClaimTx';
 
@@ -32,7 +32,6 @@ const ArbitrumL2TxnWithdrawalsClaimButton = ({ messageId, txHash, completionTxHa
   const [ isPending, setIsPending ] = React.useState(false);
   const [ claimTxHash, setClaimTxHash ] = React.useState<string | undefined>(completionTxHash);
   const apiFetch = useApiFetch();
-  const toast = useToast();
 
   const { sendTransactionAsync } = useSendTransaction();
   const { switchChainAsync } = useSwitchChain();
@@ -65,14 +64,13 @@ const ArbitrumL2TxnWithdrawalsClaimButton = ({ messageId, txHash, completionTxHa
     } catch (error) {
       const apiError = getErrorObjPayload<{ message: string }>(error);
       const message = capitalizeFirstLetter(apiError?.message || getErrorProp(error, 'shortMessage') || getErrorMessage(error) || 'Something went wrong');
-      toast({
-        status: 'error',
+      toaster.error({
         title: 'Error',
         description: message,
       });
       setIsPending(false);
     }
-  }, [ apiFetch, messageId, sendTransactionAsync, toast, switchChainAsync ]);
+  }, [ apiFetch, messageId, sendTransactionAsync, switchChainAsync ]);
 
   const web3Wallet = useWallet({ source: 'Smart contracts', onConnect: sendClaimTx });
 
@@ -103,13 +101,12 @@ const ArbitrumL2TxnWithdrawalsClaimButton = ({ messageId, txHash, completionTxHa
   }, [ messageId, queryClient, txHash ]);
 
   const handleError = React.useCallback((error: Error) => {
-    toast({
-      status: 'error',
+    toaster.error({
       title: 'Error',
       description: error.message,
     });
     setIsPending(false);
-  }, [ toast ]);
+  }, [ ]);
 
   if (claimTxHash) {
     return (
@@ -125,12 +122,12 @@ const ArbitrumL2TxnWithdrawalsClaimButton = ({ messageId, txHash, completionTxHa
   const isLoading = isPending || web3Wallet.isOpen;
 
   return (
-    <Skeleton isLoaded={ !isDataLoading }>
+    <Skeleton loading={ isDataLoading }>
       <Button
         size="sm"
         variant="outline"
         onClick={ handleClaimClick }
-        isLoading={ isLoading }
+        loading={ isLoading }
         loadingText="Claim"
       >
         Claim

ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsListItem.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { ArbitrumL2TxnWithdrawalsItem } from 'types/api/arbitrumL2';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
@@ -29,7 +29,7 @@ const ArbitrumL2TxnWithdrawalsListItem = ({ data, isLoading, txHash }: Props) =>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Message #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading }>{ data.id }</Skeleton>
+        <Skeleton loading={ isLoading }>{ data.id }</Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Receiver</ListItemMobileGrid.Label>
@@ -39,7 +39,7 @@ const ArbitrumL2TxnWithdrawalsListItem = ({ data, isLoading, txHash }: Props) =>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading }>
+        <Skeleton loading={ isLoading }>
           <ArbitrumL2TxnWithdrawalsValue data={ data }/>
         </Skeleton>
       </ListItemMobileGrid.Value>

ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsTable.tsx

-import { Tbody, Tr, Thead, Table, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2TxnWithdrawalsItem } from 'types/api/arbitrumL2';
 
+import { TableBody, TableColumnHeader, TableHeader, TableRoot, TableRow } from 'toolkit/chakra/table';
+
 import ArbitrumL2TxnWithdrawalsTableItem from './ArbitrumL2TxnWithdrawalsTableItem';
 
 interface Props {
@@ -13,16 +14,16 @@ interface Props {
 
 const ArbitrumL2TxnWithdrawalsTable = ({ data, txHash, isLoading }: Props) => {
   return (
-    <Table minW="900px">
-      <Thead>
-        <Tr>
-          <Th width="150px">Message #</Th>
-          <Th width="30%">Receiver</Th>
-          <Th width="30%" isNumeric>Value</Th>
-          <Th width="40%">Status</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot minW="900px">
+      <TableHeader>
+        <TableRow>
+          <TableColumnHeader width="150px">Message #</TableColumnHeader>
+          <TableColumnHeader width="30%">Receiver</TableColumnHeader>
+          <TableColumnHeader width="30%" isNumeric>Value</TableColumnHeader>
+          <TableColumnHeader width="40%">Status</TableColumnHeader>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
         { data.map((item, index) => (
           <ArbitrumL2TxnWithdrawalsTableItem
             key={ String(item.id) + (isLoading ? index : '') }
@@ -30,8 +31,8 @@ const ArbitrumL2TxnWithdrawalsTable = ({ data, txHash, isLoading }: Props) => {
             isLoading={ isLoading }
             txHash={ txHash }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsTableItem.tsx

-import { Tr, Td, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ArbitrumL2TxnWithdrawalsItem } from 'types/api/arbitrumL2';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
 
@@ -18,19 +19,19 @@ interface Props {
 
 const ArbitrumL2TxnWithdrawalsTableItem = ({ data, isLoading, txHash }: Props) => {
   return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading }>{ data.id }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading }>{ data.id }</Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <AddressEntityL1 address={{ hash: data.token?.destination || data.destination }} isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading }>
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading }>
           <ArbitrumL2TxnWithdrawalsValue data={ data }/>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <Flex alignItems="center" justifyContent="space-between" columnGap={ 8 }>
           <ArbitrumL2MessageStatus status={ data.status } isLoading={ isLoading }/>
           { (data.status === 'confirmed' || data.status === 'relayed') && (
@@ -42,8 +43,8 @@ const ArbitrumL2TxnWithdrawalsTableItem = ({ data, isLoading, txHash }: Props) =
             />
           ) }
         </Flex>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx

@@ -4,11 +4,11 @@ import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkExternal from 'ui/shared/links/LinkExternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -28,7 +28,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Msg nonce</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { item.msg_nonce_version + '-' + item.msg_nonce }
         </Skeleton>
       </ListItemMobileGrid.Value>
@@ -51,8 +51,6 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -73,8 +71,8 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ?
-          <LinkExternal href={ rollupFeature.L2WithdrawalUrl }>{ item.status }</LinkExternal> :
-          <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton> }
+          <Link external href={ rollupFeature.L2WithdrawalUrl }>{ item.status }</Link> :
+          <Skeleton loading={ isLoading } display="inline-block">{ item.status }</Skeleton> }
       </ListItemMobileGrid.Value>
 
       { item.l1_transaction_hash && (
@@ -84,8 +82,6 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
             <TxEntityL1
               isLoading={ isLoading }
               hash={ item.l1_transaction_hash }
-              fontSize="sm"
-              lineHeight={ 5 }
               truncation="constant_long"
             />
           </ListItemMobileGrid.Value>

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import OptimisticL2WithdrawalsTableItem from './OptimisticL2WithdrawalsTableItem';
 
@@ -15,19 +14,19 @@ import OptimisticL2WithdrawalsTableItem from './OptimisticL2WithdrawalsTableItem
 
 const OptimisticL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>Msg nonce</Th>
-          <Th>From</Th>
-          <Th>L2 txn hash</Th>
-          <Th>Age</Th>
-          <Th>Status</Th>
-          <Th>L1 txn hash</Th>
-          <Th>Time left</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>Msg nonce</TableColumnHeader>
+          <TableColumnHeader>From</TableColumnHeader>
+          <TableColumnHeader>L2 txn hash</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>Status</TableColumnHeader>
+          <TableColumnHeader>L1 txn hash</TableColumnHeader>
+          <TableColumnHeader>Time left</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <OptimisticL2WithdrawalsTableItem
             key={ String(item.msg_nonce_version) + item.msg_nonce + (isLoading ? index : '') }
@@ -35,8 +34,8 @@ const OptimisticL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
             isLoading={ isLoading }
           />
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkExternal from 'ui/shared/links/LinkExternal';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 const rollupFeature = config.features.rollup;
@@ -24,11 +24,11 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
   }
 
   return (
-    <Tr>
-      <Td verticalAlign="middle" fontWeight={ 600 }>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.msg_nonce_version + '-' + item.msg_nonce }</Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle" fontWeight={ 600 }>
+        <Skeleton loading={ isLoading } display="inline-block">{ item.msg_nonce_version + '-' + item.msg_nonce }</Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.from ? (
           <AddressEntity
             address={ item.from }
@@ -36,18 +36,16 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
             truncation="constant"
           />
         ) : 'N/A' }
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.l2_timestamp }
           fallbackText="N/A"
@@ -55,31 +53,29 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
           display="inline-block"
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ?
-          <LinkExternal href={ rollupFeature.L2WithdrawalUrl }>{ item.status }</LinkExternal> :
-          <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+          <Link external href={ rollupFeature.L2WithdrawalUrl }>{ item.status }</Link> :
+          <Skeleton loading={ isLoading } display="inline-block">{ item.status }</Skeleton>
         }
-      </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 }
           />
         ) :
           'N/A'
         }
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" minW="50px" minH="20px" display="inline-block">{ timeToEnd }</Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } color="text_secondary" minW="50px" minH="20px" display="inline-block">{ timeToEnd }</Skeleton>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx

@@ -5,7 +5,7 @@ import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
 import getCurrencyValue from 'lib/getCurrencyValue';
-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';
@@ -31,15 +31,13 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <BlockEntity
           number={ item.origination_transaction_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           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.id }
         </Skeleton>
       </ListItemMobileGrid.Value>
@@ -49,8 +47,6 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <TxEntity
           isLoading={ isLoading }
           hash={ item.origination_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
@@ -70,8 +66,6 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.completion_transaction_hash }
-            fontSize="sm"
-            lineHeight={ 5 }
             truncation="constant_long"
           />
         ) : (
@@ -83,7 +77,7 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton loading={ isLoading } display="inline-block">
           { `${ valueStr } ${ config.chain.currency.symbol }` }
         </Skeleton>
       </ListItemMobileGrid.Value>

ui/withdrawals/scrollL2/ScrollL2WithdrawalsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import ScrollL2WithdrawalsTableItem from './ScrollL2WithdrawalsTableItem';
 
@@ -16,23 +15,23 @@ import ScrollL2WithdrawalsTableItem from './ScrollL2WithdrawalsTableItem';
 
 const ScrollL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th>L2 block</Th>
-          <Th>Index</Th>
-          <Th>L2 txn hash</Th>
-          <Th>Age</Th>
-          <Th>L1 txn hash</Th>
-          <Th isNumeric>{ `Value ${ config.chain.currency.symbol }` }</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot tableLayout="auto" minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>L2 block</TableColumnHeader>
+          <TableColumnHeader>Index</TableColumnHeader>
+          <TableColumnHeader>L2 txn hash</TableColumnHeader>
+          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>L1 txn hash</TableColumnHeader>
+          <TableColumnHeader isNumeric>{ `Value ${ config.chain.currency.symbol }` }</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => (
           <ScrollL2WithdrawalsTableItem key={ String(item.id) + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx

-import { Td, Tr, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
 import getCurrencyValue from 'lib/getCurrencyValue';
-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';
@@ -22,61 +23,55 @@ const ScrollL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
 
   const { valueStr } = getCurrencyValue({ value: item.value, decimals: String(config.chain.currency.decimals) });
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <BlockEntity
           number={ item.origination_transaction_block_number }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
           fontWeight={ 600 }
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading }>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading }>
           <span>{ item.id }</span>
         </Skeleton>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TxEntity
           isLoading={ isLoading }
           hash={ item.origination_transaction_hash }
-          fontSize="sm"
-          lineHeight={ 5 }
           truncation="constant_long"
           noIcon
         />
-      </Td>
-      <Td verticalAlign="middle" pr={ 12 }>
+      </TableCell>
+      <TableCell verticalAlign="middle" pr={ 12 }>
         <TimeAgoWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           color="text_secondary"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { item.completion_transaction_hash ? (
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.completion_transaction_hash }
             truncation="constant_long"
             noIcon
-            fontSize="sm"
-            lineHeight={ 5 }
           />
         ) : (
           <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>{ valueStr }</span>
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };