block withdrawals, blob txs and epoch rewards tabs

toolkit/chakra/alert.tsx

@@ -14,6 +14,7 @@ export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
   closable?: boolean;
   onClose?: () => void;
   loading?: boolean;
+  showIcon?: boolean;
 }
 
 export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
@@ -27,15 +28,28 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       startElement,
       endElement,
       loading,
+      showIcon = false,
       ...rest
     } = props;
 
     const defaultIcon = <IconSvg name="info_filled" w="100%" h="100%"/>;
 
+    const iconElement = (() => {
+      if (startElement !== undefined) {
+        return startElement;
+      }
+
+      if (!showIcon && icon === undefined) {
+        return null;
+      }
+
+      return <ChakraAlert.Indicator>{ icon || defaultIcon }</ChakraAlert.Indicator>;
+    })();
+
     return (
       <Skeleton loading={ loading } asChild>
         <ChakraAlert.Root ref={ ref } { ...rest }>
-          { startElement !== undefined || icon !== undefined ? startElement : <ChakraAlert.Indicator>{ icon || defaultIcon }</ChakraAlert.Indicator> }
+          { iconElement }
           { children ? (
             <ChakraAlert.Content>
               { title && <ChakraAlert.Title>{ title }</ChakraAlert.Title> }

toolkit/chakra/skeleton.tsx

@@ -46,7 +46,7 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
 
 export const Skeleton = React.forwardRef<HTMLDivElement, ChakraSkeletonProps>(
   function Skeleton(props, ref) {
-    const { loading = false, ...rest } = props;
+    const { loading = true, ...rest } = props;
     return <ChakraSkeleton loading={ loading } { ...(loading ? { 'data-loading': true } : {}) } { ...rest } ref={ ref }/>;
   },
 );

toolkit/theme/recipes/alert.recipe.ts

@@ -95,6 +95,14 @@ export const recipe = defineSlotRecipe({
       },
     },
 
+    variant: {
+      subtle: {
+        root: {
+          color: 'alert.fg',
+        },
+      },
+    },
+
     inline: {
       'true': {
         root: {
@@ -134,5 +142,6 @@ export const recipe = defineSlotRecipe({
     status: 'neutral',
     size: 'md',
     inline: true,
+    variant: 'subtle',
   },
 });

toolkit/theme/recipes/table.recipe.ts

@@ -17,9 +17,10 @@ export const recipe = defineSlotRecipe({
       textAlign: 'start',
       alignItems: 'center',
       verticalAlign: 'top',
+      fontWeight: 'medium',
     },
     columnHeader: {
-      fontWeight: '500',
+      fontWeight: 'medium',
       textAlign: 'start',
     },
   },

ui/block/BlockWithdrawals.tsx

-import { Show, Hide } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -14,31 +14,32 @@ const TABS_HEIGHT = 88;
 const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
   const content = blockWithdrawalsQuery.data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         <BeaconChainWithdrawalsList
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
           view="block"
         />
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <BeaconChainWithdrawalsTable
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
           top={ blockWithdrawalsQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
           view="block"
         />
-      </Hide>
+      </Box>
     </>
   ) : null ;
 
   return (
     <DataListDisplay
       isError={ blockWithdrawalsQuery.isError }
-      items={ blockWithdrawalsQuery.data?.items }
+      itemsNum={ blockWithdrawalsQuery.data?.items?.length }
       emptyText="There are no withdrawals for this block."
-      content={ content }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx

-import { Box, Grid, GridItem, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Text } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -24,8 +24,6 @@ const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
   const router = useRouter();
   const heightOrHash = getQueryParamString(router.query.height_or_hash);
 
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
   const { cutRef, query } = useLazyLoadedList({
     rootRef,
     resourceName: 'block_election_rewards',
@@ -40,7 +38,7 @@ const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
   return (
     <Box
       p={ 4 }
-      bgColor={ bgColor }
+      bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
       borderRadius="base"
       maxH="360px"
       overflowY="scroll"

ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx

-import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -25,8 +25,6 @@ const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
   const router = useRouter();
   const heightOrHash = getQueryParamString(router.query.height_or_hash);
 
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
   const { cutRef, query } = useLazyLoadedList({
     rootRef,
     resourceName: 'block_election_rewards',
@@ -37,7 +35,15 @@ const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
   });
 
   return (
-    <Flex flexDir="column" rowGap={ 3 } p={ 4 } bgColor={ bgColor } borderRadius="base" maxH="360px" overflowY="scroll">
+    <Flex
+      flexDir="column"
+      rowGap={ 3 }
+      p={ 4 }
+      bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
+      borderRadius="base"
+      maxH="360px"
+      overflowY="scroll"
+    >
 
       { query.data?.pages
         .map((page) => page.items)

ui/block/epochRewards/BlockEpochElectionRewards.tsx

-import { Box, Heading, Hide, Show, Table, Tbody, Th, Thead, Tr } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { BlockEpoch } from 'types/api/block';
 
+import { Heading } from 'toolkit/chakra/heading';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+
 import BlockEpochElectionRewardsListItem from './BlockEpochElectionRewardsListItem';
 import BlockEpochElectionRewardsTableItem from './BlockEpochElectionRewardsTableItem';
 
@@ -14,18 +17,18 @@ interface Props {
 const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
   return (
     <Box mt={ 8 }>
-      <Heading as="h4" size="sm" mb={ 3 }>Election rewards</Heading>
-      <Hide below="lg" ssr={ false }>
-        <Table style={{ tableLayout: 'auto' }}>
-          <Thead>
-            <Tr>
-              <Th width="24px"/>
-              <Th width="180px">Reward type</Th>
-              <Th/>
-              <Th isNumeric>Value</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
+      <Heading level="3" mb={ 3 }>Election rewards</Heading>
+      <Box hideBelow="lg">
+        <TableRoot style={{ tableLayout: 'auto' }}>
+          <TableHeaderSticky>
+            <TableRow>
+              <TableColumnHeader width="24px"/>
+              <TableColumnHeader width="180px">Reward type</TableColumnHeader>
+              <TableColumnHeader/>
+              <TableColumnHeader isNumeric>Value</TableColumnHeader>
+            </TableRow>
+          </TableHeaderSticky>
+          <TableBody>
             { Object.entries(data.aggregated_election_rewards).map((entry) => {
               const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
               const value = entry[1];
@@ -43,10 +46,10 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
                 />
               );
             }) }
-          </Tbody>
-        </Table>
-      </Hide>
-      <Show below="lg" ssr={ false }>
+          </TableBody>
+        </TableRoot>
+      </Box>
+      <Box hideFrom="lg">
         { Object.entries(data.aggregated_election_rewards).map((entry) => {
           const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
           const value = entry[1];
@@ -64,7 +67,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
             />
           );
         }) }
-      </Show>
+      </Box>
     </Box>
   );
 };

ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx

-import { Box, Flex, IconButton, useDisclosure } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
 import IconSvg from 'ui/shared/IconSvg';
@@ -37,27 +39,26 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
     >
       <Flex my="3px" columnGap={ 3 } alignItems="center" flexWrap="wrap" rowGap={ 2 }>
         { data.count ? (
-          <Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
+          <Skeleton loading={ isLoading } display="flex" borderRadius="sm">
             <IconButton
-              aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
+              aria-label={ section.open ? 'Collapse section' : 'Expand section' }
               variant="link"
               boxSize={ 6 }
               flexShrink={ 0 }
-              icon={ (
-                <IconSvg
-                  name="arrows/east-mini"
-                  boxSize={ 6 }
-                  transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
-                  transitionDuration="faster"
-                />
-              ) }
-            />
+            >
+              <IconSvg
+                name="arrows/east-mini"
+                boxSize={ 6 }
+                transform={ section.open ? 'rotate(270deg)' : 'rotate(180deg)' }
+                transitionDuration="faster"
+              />
+            </IconButton>
           </Skeleton>
         ) : <Box boxSize={ 6 }/> }
         <EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
-        <Skeleton isLoaded={ !isLoading }>{ data.count }</Skeleton>
+        <Skeleton loading={ isLoading }>{ data.count }</Skeleton>
         <Flex columnGap={ 2 } alignItems="center" ml={{ base: 9, lg: 'auto' }} w={{ base: '100%', lg: 'fit-content' }} fontWeight={ 500 }>
-          <Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
+          <Skeleton loading={ isLoading }>{ valueStr }</Skeleton>
           <TokenEntity
             token={ data.token }
             noCopy
@@ -67,7 +68,7 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
           />
         </Flex>
       </Flex>
-      { section.isOpen && (
+      { section.open && (
         <Box mt={ 2 }>
           <BlockEpochElectionRewardDetailsMobile type={ type } token={ data.token }/>
         </Box>

ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx

-import { Flex, IconButton, Td, Tr, useDisclosure } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
 import IconSvg from 'ui/shared/IconSvg';
@@ -26,45 +29,42 @@ const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) =>
     decimals: data.token.decimals,
   });
 
-  const mainRowBorderColor = section.isOpen ? 'transparent' : 'border.divider';
+  const mainRowBorderColor = section.open ? 'transparent' : 'border.divider';
 
   return (
     <>
-      <Tr
+      <TableRow
         onClick={ isLoading || !data.count ? undefined : section.onToggle }
         cursor={ isLoading || !data.count ? undefined : 'pointer' }
       >
-        <Td borderColor={ mainRowBorderColor }>
+        <TableCell borderColor={ mainRowBorderColor }>
           { Boolean(data.count) && (
-            <Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
+            <Skeleton loading={ isLoading } display="flex" borderRadius="sm">
               <IconButton
-                aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
+                aria-label={ section.open ? 'Collapse section' : 'Expand section' }
                 variant="link"
-                boxSize={ 6 }
-                flexShrink={ 0 }
-                icon={ (
-                  <IconSvg
-                    name="arrows/east-mini"
-                    boxSize={ 6 }
-                    transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
-                    transitionDuration="faster"
-                  />
-                ) }
-              />
+              >
+                <IconSvg
+                  name="arrows/east-mini"
+                  boxSize={ 6 }
+                  transform={ section.open ? 'rotate(270deg)' : 'rotate(180deg)' }
+                  transitionDuration="faster"
+                />
+              </IconButton>
             </Skeleton>
           ) }
-        </Td>
-        <Td borderColor={ mainRowBorderColor }>
+        </TableCell>
+        <TableCell borderColor={ mainRowBorderColor }>
           <EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
-        </Td>
-        <Td borderColor={ mainRowBorderColor }>
-          <Skeleton isLoaded={ !isLoading } fontWeight={ 400 } my={ 1 }>
+        </TableCell>
+        <TableCell borderColor={ mainRowBorderColor }>
+          <Skeleton loading={ isLoading } fontWeight={ 400 } my={ 1 }>
             { getRewardNumText(type, data.count) }
           </Skeleton>
-        </Td>
-        <Td borderColor={ mainRowBorderColor }>
+        </TableCell>
+        <TableCell borderColor={ mainRowBorderColor }>
           <Flex columnGap={ 2 } alignItems="center" justifyContent="flex-end" my="2px">
-            <Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
+            <Skeleton loading={ isLoading }>{ valueStr }</Skeleton>
             <TokenEntity
               token={ data.token }
               noCopy
@@ -73,15 +73,15 @@ const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) =>
               isLoading={ isLoading }
             />
           </Flex>
-        </Td>
-      </Tr>
-      { section.isOpen && (
-        <Tr>
-          <Td/>
-          <Td colSpan={ 3 } pr={ 0 } pt={ 0 }>
+        </TableCell>
+      </TableRow>
+      { section.open && (
+        <TableRow>
+          <TableCell/>
+          <TableCell colSpan={ 3 } pr={ 0 } pt={ 0 }>
             <BlockEpochElectionRewardDetailsDesktop type={ type } token={ data.token }/>
-          </Td>
-        </Tr>
+          </TableCell>
+        </TableRow>
       ) }
     </>
   );

ui/pages/Block.tsx

@@ -78,30 +78,30 @@ const BlockPageContent = () => {
         </>
       ),
     },
-    // config.features.dataAvailability.isEnabled && blockQuery.data?.blob_transaction_count ?
-    //   {
-    //     id: 'blob_txs',
-    //     title: 'Blob txns',
-    //     component: (
-    //       <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
-    //     ),
-    //   } : null,
-    // config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?
-    //   {
-    //     id: 'withdrawals',
-    //     title: 'Withdrawals',
-    //     component: (
-    //       <>
-    //         { blockWithdrawalsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockWithdrawalsQuery.isPlaceholderData } mb={ 6 }/> }
-    //         <BlockWithdrawals blockWithdrawalsQuery={ blockWithdrawalsQuery }/>
-    //       </>
-    //     ),
-    //   } : null,
-    // blockQuery.data?.celo?.is_epoch_block ? {
-    //   id: 'epoch_rewards',
-    //   title: 'Epoch rewards',
-    //   component: <BlockEpochRewards heightOrHash={ heightOrHash }/>,
-    // } : null,
+    config.features.dataAvailability.isEnabled && blockQuery.data?.blob_transaction_count ?
+      {
+        id: 'blob_txs',
+        title: 'Blob txns',
+        component: (
+          <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
+        ),
+      } : null,
+    config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?
+      {
+        id: 'withdrawals',
+        title: 'Withdrawals',
+        component: (
+          <>
+            { blockWithdrawalsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockWithdrawalsQuery.isPlaceholderData } mb={ 6 }/> }
+            <BlockWithdrawals blockWithdrawalsQuery={ blockWithdrawalsQuery }/>
+          </>
+        ),
+      } : null,
+    blockQuery.data?.celo?.is_epoch_block ? {
+      id: 'epoch_rewards',
+      title: 'Epoch rewards',
+      component: <BlockEpochRewards heightOrHash={ heightOrHash }/>,
+    } : null,
   ].filter(Boolean)), [ blockBlobTxsQuery, blockQuery, blockTxsQuery, blockWithdrawalsQuery, hasPagination, heightOrHash ]);
 
   let pagination;

ui/shared/EpochRewardTypeTag.tsx

-import { Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
 import type { EpochRewardsType } from 'types/api/block';
 
-import Tag from 'ui/shared/chakra/Tag';
+import { Badge } from 'toolkit/chakra/badge';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 
 type Props = {
   type: EpochRewardsType;
@@ -39,10 +39,10 @@ const EpochRewardTypeTag = ({ type, isLoading }: Props) => {
   const { text, label, color } = TYPE_TAGS[type];
 
   return (
-    <Tooltip label={ label } maxW="322px" textAlign="center">
-      <Tag colorScheme={ color } isLoading={ isLoading }>
+    <Tooltip content={ label }>
+      <Badge colorScheme={ color } loading={ isLoading }>
         { text }
-      </Tag>
+      </Badge>
     </Tooltip>
   );
 };

ui/shared/SocketNewItemsNotice.tsx

@@ -62,7 +62,6 @@ const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, typ
       px={ 4 }
       py="6px"
       fontSize="sm"
-      startElement={ null }
     >
       { alertContent }
     </Alert>

ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx

@@ -9,8 +9,8 @@ import type {
   Erc404TotalPayload,
 } from 'types/api/tokenTransfer';
 
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 
 import TokenTransferSnippetFiat from './TokenTransferSnippetFiat';
 import TokenTransferSnippetNft from './TokenTransferSnippetNft';
@@ -26,7 +26,7 @@ const TokenTransferSnippet = ({ data, isLoading, noAddressIcons = true }: Props)
   const content = (() => {
 
     if (isLoading) {
-      return <Skeleton w="250px" h={ 6 }/>;
+      return <Skeleton loading w="250px" h={ 6 }/>;
     }
 
     switch (data.token?.type) {

ui/snippets/header/alerts/MaintenanceAlert.tsx

@@ -10,7 +10,7 @@ const MaintenanceAlert = () => {
   }
 
   return (
-    <Alert status="neutral">
+    <Alert status="neutral" showIcon>
       <Box
         dangerouslySetInnerHTML={{ __html: config.UI.maintenanceAlert.message }}
         css={{

ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx

@@ -6,7 +6,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
 
 import config from 'configs/app';
 import { currencyUnits } from 'lib/units';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -36,12 +36,12 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+        <Skeleton loading={ isLoading } display="inline-block">{ item.index }</Skeleton>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Validator index</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.validator_index }</Skeleton>
+        <Skeleton loading={ isLoading } display="inline-block">{ item.validator_index }</Skeleton>
       </ListItemMobileGrid.Value>
 
       { view !== 'block' && (

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressWithdrawalsItem } from 'types/api/address';
@@ -7,7 +6,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
 
 import config from 'configs/app';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import BeaconChainWithdrawalsTableItem from './BeaconChainWithdrawalsTableItem';
 
@@ -35,18 +34,18 @@ const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) =>
   }
 
   return (
-    <Table style={{ tableLayout: 'auto' }} minW="950px">
-      <Thead top={ top }>
-        <Tr>
-          <Th minW="140px">Index</Th>
-          <Th minW="200px">Validator index</Th>
-          { view !== 'block' && <Th w="25%">Block</Th> }
-          { view !== 'address' && <Th w="25%">To</Th> }
-          { view !== 'block' && <Th w="25%">Age</Th> }
-          <Th w="25%">{ `Value ${ feature.currency.symbol }` }</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader minW="140px">Index</TableColumnHeader>
+          <TableColumnHeader minW="200px">Validator index</TableColumnHeader>
+          { view !== 'block' && <TableColumnHeader w="25%">Block</TableColumnHeader> }
+          { view !== 'address' && <TableColumnHeader w="25%">To</TableColumnHeader> }
+          { view !== 'block' && <TableColumnHeader w="25%">Age</TableColumnHeader> }
+          <TableColumnHeader w="25%">{ `Value ${ feature.currency.symbol }` }</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { view === 'list' && (items as Array<WithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
           <BeaconChainWithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="list" isLoading={ isLoading }/>
         )) }
@@ -56,9 +55,9 @@ const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) =>
         { view === 'block' && (items as Array<BlockWithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
           <BeaconChainWithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="block" isLoading={ isLoading }/>
         )) }
-        <tr ref={ cutRef }/>
-      </Tbody>
-    </Table>
+        <TableRow ref={ cutRef }/>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressWithdrawalsItem } from 'types/api/address';
 import type { BlockWithdrawalsItem } from 'types/api/block';
 import type { WithdrawalsItem } from 'types/api/withdrawals';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -24,15 +24,15 @@ type Props = ({
 
 const BeaconChainWithdrawalsTableItem = ({ item, view, 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.validator_index }</Skeleton>
-      </Td>
+    <TableRow>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">{ item.index }</Skeleton>
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">{ item.validator_index }</Skeleton>
+      </TableCell>
       { view !== 'block' && (
-        <Td verticalAlign="middle">
+        <TableCell verticalAlign="middle">
           <BlockEntity
             number={ item.block_number }
             isLoading={ isLoading }
@@ -40,31 +40,31 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
             lineHeight={ 5 }
             noIcon
           />
-        </Td>
+        </TableCell>
       ) }
       { view !== 'address' && (
-        <Td verticalAlign="middle">
+        <TableCell verticalAlign="middle">
           <AddressEntity
             address={ item.receiver }
             isLoading={ isLoading }
             truncation="constant"
           />
-        </Td>
+        </TableCell>
       ) }
       { view !== 'block' && (
-        <Td verticalAlign="middle" pr={ 12 }>
+        <TableCell verticalAlign="middle" pr={ 12 }>
           <TimeAgoWithTooltip
             timestamp={ item.timestamp }
             isLoading={ isLoading }
             color="text_secondary"
             display="inline-block"
           />
-        </Td>
+        </TableCell>
       ) }
-      <Td verticalAlign="middle">
+      <TableCell verticalAlign="middle">
         <CurrencyValue value={ item.amount } isLoading={ isLoading }/>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };