state, blobs and user ops tabs

toolkit/components/CutLink/CutLink.tsx

@@ -14,6 +14,10 @@ interface Props extends LinkProps {
 
 const ID = 'CutLink';
 
+// TODO @tom2drum another variant of CutLink
+// ui/tx/TxAllowedPeekers.tsx
+// ui/tx/state/TxStateTokenIdList.tsx
+
 const CutLink = (props: Props) => {
   const { children, id = ID, onClick, isExpanded: isExpandedProp = false, ...rest } = props;
 

ui/pages/Transaction.tsx

@@ -59,16 +59,16 @@ const TransactionPageContent = () => {
       //   { id: 'wrapped', title: 'Regular tx details', component: <TxDetailsWrapped data={ data.wrapped }/> } :
       //   undefined,
       { id: 'token_transfers', title: 'Token transfers', component: <TxTokenTransfer txQuery={ txQuery }/> },
-      // config.features.userOps.isEnabled ?
-      //   { id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
-      //   undefined,
+      config.features.userOps.isEnabled ?
+        { id: 'user_ops', title: 'User operations', component: <TxUserOps txQuery={ txQuery }/> } :
+        undefined,
       { id: 'internal', title: 'Internal txns', component: <TxInternals txQuery={ txQuery }/> },
-      // config.features.dataAvailability.isEnabled && txQuery.data?.blob_versioned_hashes?.length ?
-      //   { id: 'blobs', title: 'Blobs', component: <TxBlobs txQuery={ txQuery }/> } :
-      //   undefined,
+      config.features.dataAvailability.isEnabled && txQuery.data?.blob_versioned_hashes?.length ?
+        { id: 'blobs', title: 'Blobs', component: <TxBlobs txQuery={ txQuery }/> } :
+        undefined,
       { id: 'logs', title: 'Logs', component: <TxLogs txQuery={ txQuery }/> },
-      // { id: 'state', title: 'State', component: <TxState txQuery={ txQuery }/> },
-      // { id: 'raw_trace', title: 'Raw trace', component: <TxRawTrace txQuery={ txQuery }/> },
+      { id: 'state', title: 'State', component: <TxState txQuery={ txQuery }/> },
+      { id: 'raw_trace', title: 'Raw trace', component: <TxRawTrace txQuery={ txQuery }/> },
     ].filter(Boolean);
   })();
 

ui/shared/blob/BlobDataType.tsx

-import { Flex, useColorModeValue } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import * as blobUtils from 'lib/blob';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
-
 interface Props {
   data: string;
   isLoading?: boolean;
@@ -18,8 +17,6 @@ const TYPES: Record<string, { iconName: IconName; label: string }> = {
 };
 
 const BlobDataType = ({ data, isLoading }: Props) => {
-  const iconColor = useColorModeValue('gray.500', 'gray.400');
-
   const guessedType = React.useMemo(() => {
     if (isLoading) {
       return;
@@ -48,8 +45,8 @@ const BlobDataType = ({ data, isLoading }: Props) => {
 
   return (
     <Flex alignItems="center" columnGap={ 2 }>
-      <IconSvg name={ iconName } boxSize={ 5 } color={ iconColor } isLoading={ isLoading }/>
-      <Skeleton isLoaded={ !isLoading }>{ label }</Skeleton>
+      <IconSvg name={ iconName } boxSize={ 5 } color={{ _light: 'gray.500', _dark: 'gray.400' }} isLoading={ isLoading }/>
+      <Skeleton loading={ isLoading }>{ label }</Skeleton>
     </Flex>
   );
 };

ui/shared/userOps/UserOpStatus.tsx

 import React from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import StatusTag from 'ui/shared/statusTag/StatusTag';
 
 type Props = {
@@ -14,9 +13,7 @@ const UserOpStatus = ({ status, isLoading }: Props) => {
   }
 
   return (
-    <Skeleton isLoaded={ !isLoading } display="inline-block">
-      <StatusTag type={ status === true ? 'ok' : 'error' } text={ status === true ? 'Success' : 'Failed' }/>
-    </Skeleton>
+    <StatusTag isLoading={ isLoading } type={ status === true ? 'ok' : 'error' } text={ status === true ? 'Success' : 'Failed' }/>
   );
 };
 

ui/tx/TxAllowedPeekers.tsx

@@ -11,7 +11,6 @@ interface Props {
 
 const CUT_LENGTH = 2;
 
-// TODO @tom2drum another variant of CutLink
 const TxAllowedPeekers = ({ items }: Props) => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 

ui/tx/TxBlobs.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { TX_BLOB } from 'stubs/blobs';
@@ -34,12 +34,12 @@ const TxBlobs = ({ txQuery }: Props) => {
 
   const content = data ? (
     <>
-      <Hide below="lg" ssr={ false }>
+      <Box hideBelow="lg">
         <TxBlobsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
-      </Hide>
-      <Show below="lg" ssr={ false }>
+      </Box>
+      <Box hideFrom="lg">
         <TxBlobsList data={ data.items } isLoading={ isPlaceholderData }/>
-      </Show>
+      </Box>
     </>
   ) : null;
 
@@ -52,11 +52,12 @@ const TxBlobs = ({ txQuery }: Props) => {
   return (
     <DataListDisplay
       isError={ isError || txQuery.isError }
-      items={ data?.items }
+      itemsNum={ data?.items.length }
       emptyText="There are no blobs for this transaction."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/tx/TxState.tsx

-import { Hide, Show, Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import { TX_STATE_CHANGES } from 'stubs/txStateChanges';
@@ -39,12 +39,12 @@ const TxState = ({ txQuery }: Props) => {
 
   const content = data ? (
     <>
-      <Hide below="lg" ssr={ false }>
+      <Box hideBelow="lg">
         <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
-      </Hide>
-      <Show below="lg" ssr={ false }>
+      </Box>
+      <Box hideFrom="lg">
         <TxStateList data={ data.items } isLoading={ isPlaceholderData }/>
-      </Show>
+      </Box>
     </>
   ) : null;
 
@@ -64,11 +64,12 @@ const TxState = ({ txQuery }: Props) => {
       ) }
       <DataListDisplay
         isError={ isError || txQuery.isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no state changes for this transaction."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/tx/blobs/TxBlobListItem.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import type { TxBlob } from 'types/api/blobs';
 
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlobDataType from 'ui/shared/blob/BlobDataType';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
@@ -29,7 +29,7 @@ const TxBlobListItem = ({ data, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Size, bytes</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading }>
+        <Skeleton loading={ isLoading }>
           { size.toLocaleString() }
         </Skeleton>
       </ListItemMobileGrid.Value>

ui/tx/blobs/TxBlobsTable.tsx

-import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxBlob } from 'types/api/blobs';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import TxBlobsTableItem from './TxBlobsTableItem';
 
@@ -16,20 +15,20 @@ interface Props {
 const TxInternalsTable = ({ data, top, isLoading }: Props) => {
 
   return (
-    <Table>
-      <Thead top={ top }>
-        <Tr>
-          <Th width="60%">Blob hash</Th>
-          <Th width="20%">Data type</Th>
-          <Th width="20%">Size, bytes</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot>
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader width="60%">Blob hash</TableColumnHeader>
+          <TableColumnHeader width="20%">Data type</TableColumnHeader>
+          <TableColumnHeader width="20%">Size, bytes</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { data.map((item, index) => (
           <TxBlobsTableItem key={ item.hash + (isLoading ? index : '') } data={ item } isLoading={ isLoading }/>
         )) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/tx/blobs/TxBlobsTableItem.tsx

-import { Tr, Td } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxBlob } from 'types/api/blobs';
 
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlobDataType from 'ui/shared/blob/BlobDataType';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 
 interface Props {
@@ -16,19 +16,19 @@ const TxBlobsTableItem = ({ data, isLoading }: Props) => {
   const size = data.blob_data ? data.blob_data.replace('0x', '').length / 2 : '-';
 
   return (
-    <Tr alignItems="top">
-      <Td>
+    <TableRow alignItems="top">
+      <TableCell>
         <BlobEntity hash={ data.hash } noIcon isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         { data.blob_data ? <BlobDataType isLoading={ isLoading } data={ data.blob_data }/> : '-' }
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">
           { size.toLocaleString() }
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/tx/state/TxStateTable.tsx

-import {
-  Table,
-  Tbody,
-  Tr,
-  Th,
-} from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxStateChange } from 'types/api/txStateChanges';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
 
 interface Props {
@@ -21,21 +15,21 @@ interface Props {
 const TxStateTable = ({ data, isLoading, top }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table minWidth="1000px" w="100%">
-        <Thead top={ top }>
-          <Tr>
-            <Th width="140px">Type</Th>
-            <Th width="160px">Address</Th>
-            <Th width="33%" isNumeric>Before</Th>
-            <Th width="33%" isNumeric>After</Th>
-            <Th width="33%" isNumeric>Change</Th>
-            <Th width="150px" minW="80px" maxW="150px">Token ID</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
+      <TableRoot minWidth="1000px" w="100%">
+        <TableHeaderSticky top={ top }>
+          <TableRow>
+            <TableColumnHeader width="140px">Type</TableColumnHeader>
+            <TableColumnHeader width="160px">Address</TableColumnHeader>
+            <TableColumnHeader width="33%" isNumeric>Before</TableColumnHeader>
+            <TableColumnHeader width="33%" isNumeric>After</TableColumnHeader>
+            <TableColumnHeader width="33%" isNumeric>Change</TableColumnHeader>
+            <TableColumnHeader width="150px" minW="80px" maxW="150px">Token ID</TableColumnHeader>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody>
           { data.map((item, index) => <TxStateTableItem data={ item } key={ index } isLoading={ isLoading }/>) }
-        </Tbody>
-      </Table>
+        </TableBody>
+      </TableRoot>
     </AddressHighlightProvider>
   );
 };

ui/tx/state/TxStateTableItem.tsx

-import { Tr, Td, Box } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxStateChange } from 'types/api/txStateChanges';
 
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 import { getStateElements } from './utils';
@@ -16,13 +17,13 @@ const TxStateTableItem = ({ data, isLoading }: Props) => {
   const { before, after, change, tag, tokenId } = getStateElements(data, isLoading);
 
   return (
-    <Tr>
-      <Td>
+    <TableRow>
+      <TableCell>
         <Box py="3px">
           { tag }
         </Box>
-      </Td>
-      <Td>
+      </TableCell>
+      <TableCell>
         <AddressEntity
           address={ data.address }
           isLoading={ isLoading }
@@ -30,12 +31,12 @@ const TxStateTableItem = ({ data, isLoading }: Props) => {
           my="7px"
           w="100%"
         />
-      </Td>
-      <Td isNumeric><Box py="7px">{ before }</Box></Td>
-      <Td isNumeric><Box py="7px">{ after }</Box></Td>
-      <Td isNumeric><Box py="7px">{ change }</Box></Td>
-      <Td>{ tokenId }</Td>
-    </Tr>
+      </TableCell>
+      <TableCell isNumeric><Box py="7px">{ before }</Box></TableCell>
+      <TableCell isNumeric><Box py="7px">{ after }</Box></TableCell>
+      <TableCell isNumeric><Box py="7px">{ change }</Box></TableCell>
+      <TableCell>{ tokenId }</TableCell>
+    </TableRow>
   );
 };
 

ui/tx/state/TxStateTokenIdList.tsx

-import { Flex, Text, Link, useBoolean } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import { Link } from 'toolkit/chakra/link';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 
 interface Props {
@@ -10,7 +11,11 @@ interface Props {
 }
 
 const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
-  const [ isCut, setIsCut ] = useBoolean(true);
+  const [ isCut, setIsCut ] = React.useState(true);
+
+  const handleToggle = React.useCallback(() => {
+    setIsCut((prev) => !prev);
+  }, []);
 
   return (
     <Flex flexDir="column" rowGap={ 2 }>
@@ -33,7 +38,7 @@ const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
           fontWeight={ 400 }
           textDecoration="underline dashed"
           _hover={{ textDecoration: 'underline dashed', color: 'link_hovered' }}
-          onClick={ setIsCut.toggle }
+          onClick={ handleToggle }
           pb={{ base: '5px', md: 0 }}
         >
           View { isCut ? 'more' : 'less' }

ui/tx/state/utils.tsx

-import { Flex, Tooltip } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -9,8 +9,9 @@ import { ZERO_ADDRESS } from 'lib/consts';
 import { nbsp, space } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import { currencyUnits } from 'lib/units';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import Tag from 'ui/shared/chakra/Tag';
+import { Badge } from 'toolkit/chakra/badge';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
@@ -20,10 +21,10 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
   const tag = (() => {
     if (data.is_miner) {
       return (
-        <Tooltip label="A block producer who successfully included the block into the blockchain">
-          <Tag textTransform="capitalize" colorScheme="yellow" isLoading={ isLoading }>
+        <Tooltip content="A block producer who successfully included the block into the blockchain">
+          <Badge textTransform="capitalize" colorPalette="yellow" loading={ isLoading }>
             { getNetworkValidatorTitle() }
-          </Tag>
+          </Badge>
         </Tooltip>
       );
     }
@@ -40,8 +41,8 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
       if (changeDirection) {
         const text = changeDirection === 'from' ? 'Mint' : 'Burn';
         return (
-          <Tooltip label="Address used in tokens mintings and burnings">
-            <Tag textTransform="capitalize" colorScheme="yellow" isLoading={ isLoading }>{ text } address</Tag>
+          <Tooltip content="Address used in tokens mintings and burnings">
+            <Badge textTransform="capitalize" colorPalette="yellow" loading={ isLoading }>{ text } address</Badge>
           </Tooltip>
         );
       }
@@ -60,17 +61,17 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
 
       return {
         before: (
-          <Skeleton isLoaded={ !isLoading } wordBreak="break-all" display="inline-block">
+          <Skeleton loading={ isLoading } wordBreak="break-all" display="inline-block">
             { beforeBn.toFormat() } { currencyUnits.ether }
           </Skeleton>
         ),
         after: (
-          <Skeleton isLoaded={ !isLoading } wordBreak="break-all" display="inline-block">
+          <Skeleton loading={ isLoading } wordBreak="break-all" display="inline-block">
             { afterBn.toFormat() } { currencyUnits.ether }
           </Skeleton>
         ),
         change: (
-          <Skeleton isLoaded={ !isLoading } display="inline-block" color={ changeColor }>
+          <Skeleton loading={ isLoading } display="inline-block" color={ changeColor }>
             <span>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</span>
           </Skeleton>
         ),
@@ -106,7 +107,7 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
         const changeSign = differenceBn.isGreaterThanOrEqualTo(0) ? '+' : '-';
 
         return (
-          <Skeleton isLoaded={ !isLoading } display="inline-block" color={ changeColor } wordBreak="break-all">
+          <Skeleton loading={ isLoading } display="inline-block" color={ changeColor } wordBreak="break-all">
             <span>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</span>
           </Skeleton>
         );
@@ -133,14 +134,14 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
       return {
         before: data.balance_before ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
-            <Skeleton isLoaded={ !isLoading } wordBreak="break-all">{ beforeBn.toFormat() }</Skeleton>
+            <Skeleton loading={ isLoading } wordBreak="break-all">{ beforeBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }
           </Flex>
         ) : null,
         after: data.balance_after ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
-            <Skeleton isLoaded={ !isLoading } wordBreak="break-all">{ afterBn.toFormat() }</Skeleton>
+            <Skeleton loading={ isLoading } wordBreak="break-all">{ afterBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }
           </Flex>

ui/userOps/UserOpsContent.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
@@ -23,7 +23,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
 
   const content = query.data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }>
+      <Box hideBelow="lg">
         <UserOpsTable
           items={ query.data.items }
           top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
@@ -31,8 +31,8 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
           showTx={ showTx }
           showSender={ showSender }
         />
-      </Hide>
-      <Show below="lg" ssr={ false }>
+      </Box>
+      <Box hideFrom="lg">
         { query.data.items.map((item, index) => (
           <UserOpsListItem
             key={ item.hash + (query.isPlaceholderData ? String(index) : '') }
@@ -42,7 +42,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
             showSender={ showSender }
           />
         )) }
-      </Show>
+      </Box>
     </>
   ) : null;
 
@@ -55,11 +55,12 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
   return (
     <DataListDisplay
       isError={ query.isError }
-      items={ query.data?.items }
+      itemsNum={ query.data?.items?.length }
       emptyText="There are no user operations."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/userOps/UserOpsListItem.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -76,8 +75,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
         <BlockEntity
           number={ Number(item.block_number) }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           noIcon
         />
       </ListItemMobileGrid.Value>
@@ -86,9 +84,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Fee</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Skeleton isLoaded={ !isLoading }>
-              <CurrencyValue value={ item.fee } isLoading={ isLoading } accuracy={ 8 } currency={ config.chain.currency.symbol }/>
-            </Skeleton>
+            <CurrencyValue value={ item.fee } isLoading={ isLoading } accuracy={ 8 } currency={ config.chain.currency.symbol }/>
           </ListItemMobileGrid.Value>
         </>
       ) }

ui/userOps/UserOpsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import UserOpsTableItem from './UserOpsTableItem';
 
@@ -18,19 +17,19 @@ import UserOpsTableItem from './UserOpsTableItem';
 
 const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
   return (
-    <Table minW="1000px">
-      <Thead top={ top }>
-        <Tr>
-          <Th w="60%">User op hash</Th>
-          <Th w="110px">Age</Th>
-          <Th w="140px">Status</Th>
-          { showSender && <Th w="160px">Sender</Th> }
-          { showTx && <Th w="160px">Tx hash</Th> }
-          <Th w="40%">Block</Th>
-          { !config.UI.views.tx.hiddenFields?.tx_fee && <Th w="120px" isNumeric>{ `Fee ${ config.chain.currency.symbol }` }</Th> }
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot minW="1000px">
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader w="60%">User op hash</TableColumnHeader>
+          <TableColumnHeader w="110px">Age</TableColumnHeader>
+          <TableColumnHeader w="140px">Status</TableColumnHeader>
+          { showSender && <TableColumnHeader w="160px">Sender</TableColumnHeader> }
+          { showTx && <TableColumnHeader w="160px">Tx hash</TableColumnHeader> }
+          <TableColumnHeader w="40%">Block</TableColumnHeader>
+          { !config.UI.views.tx.hiddenFields?.tx_fee && <TableColumnHeader w="120px" isNumeric>{ `Fee ${ config.chain.currency.symbol }` }</TableColumnHeader> }
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => {
           return (
             <UserOpsTableItem
@@ -42,8 +41,8 @@ const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
             />
           );
         }) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/userOps/UserOpsTableItem.tsx

-import { Td, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -21,55 +21,54 @@ import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
 const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 } truncation="constant_long"/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           display="inline-block"
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <UserOpStatus status={ item.status } isLoading={ isLoading }/>
-      </Td>
+      </TableCell>
       { showSender && (
-        <Td verticalAlign="middle">
+        <TableCell verticalAlign="middle">
           <AddressStringOrParam
             address={ item.address }
             isLoading={ isLoading }
             truncation="constant"
           />
-        </Td>
+        </TableCell>
       ) }
       { showTx && (
-        <Td verticalAlign="middle">
+        <TableCell verticalAlign="middle">
           <TxEntity
             hash={ item.transaction_hash }
             isLoading={ isLoading }
             truncation="constant"
             noIcon
           />
-        </Td>
+        </TableCell>
       ) }
-      <Td verticalAlign="middle">
+      <TableCell verticalAlign="middle">
         <BlockEntity
           number={ Number(item.block_number) }
           isLoading={ isLoading }
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           noIcon
         />
-      </Td>
+      </TableCell>
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <Td verticalAlign="middle" isNumeric>
+        <TableCell verticalAlign="middle" isNumeric>
           <CurrencyValue value={ item.fee } isLoading={ isLoading } accuracy={ 8 }/>
-        </Td>
+        </TableCell>
       ) }
-    </Tr>
+    </TableRow>
   );
 };