block tx tab

eslint.config.mjs

@@ -27,6 +27,7 @@ const RESTRICTED_MODULES = {
     { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
     { name: 'ui/shared/chakra/Skeleton', message: 'Please use Skeleton component from toolkit/chakra instead' },
     { name: 'ui/shared/Tabs/RoutedTabs', message: 'Please use RoutedTabs component from toolkit/components/RoutedTabs instead' },
+    { name: 'ui/shared/chakra/Tag', message: 'Please use Tag component from toolkit/chakra instead' },
     {
       name: '@chakra-ui/react',
       importNames: [

toolkit/chakra/badge.tsx

 import type { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
-import { Badge as ChakraBadge } from '@chakra-ui/react';
+import { chakra, Badge as ChakraBadge } from '@chakra-ui/react';
 import React from 'react';
 
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 import { Skeleton } from './skeleton';
 
 export interface BadgeProps extends ChakraBadgeProps {
   loading?: boolean;
   iconStart?: IconName;
+  truncated?: boolean;
 }
 
 export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
   function Badge(props, ref) {
-    const { loading, iconStart, children, asChild = true, ...rest } = props;
+    const { loading, iconStart, children, asChild = true, truncated = false, ...rest } = props;
+
+    const child = <chakra.span overflow="hidden" textOverflow="ellipsis">{ children }</chakra.span>;
+
+    const childrenElement = truncated ? (
+      <TruncatedTextTooltip label={ children }>
+        { child }
+      </TruncatedTextTooltip>
+    ) : child;
 
     return (
       <Skeleton loading={ loading } asChild={ asChild }>
-        <ChakraBadge ref={ ref } display="flex" alignItems="center" gap={ 1 } { ...rest }>
+        <ChakraBadge ref={ ref } display="inline-flex" alignItems="center" whiteSpace="nowrap" { ...rest }>
           { iconStart && <IconSvg name={ iconStart } boxSize="10px"/> }
-          { children }
+          { childrenElement }
         </ChakraBadge>
       </Skeleton>
     );

toolkit/chakra/icon-button.tsx

@@ -6,6 +6,7 @@ import { Skeleton } from './skeleton';
 export interface IconButtonProps extends ButtonProps {}
 
 // TODO @tom2drum variants for icon buttons: prev-next, top-bar, copy-to-clipboard
+// TODO @tom2drum fix loading state for outlined variant
 
 export const IconButton = React.forwardRef<HTMLDivElement, IconButtonProps>(
   function IconButton(props, ref) {

toolkit/components/RoutedTabs/RoutedTabsSkeleton.tsx

@@ -15,6 +15,7 @@ const SkeletonTabText = ({ size, title }: { size: TabsProps['size']; title: TabI
     fontWeight={ 600 }
     mx={ size === 'sm' ? 3 : 4 }
     flexShrink={ 0 }
+    loading
   >
     { typeof title === 'string' ? title : title() }
   </Skeleton>

toolkit/theme/foundations/semanticTokens.ts

@@ -333,6 +333,12 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       backTo: { value: '{colors.gray.400}' },
       externalLink: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.400}' } },
     },
+    address: {
+      highlighted: {
+        bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.900}' } },
+        border: { value: { _light: '{colors.blue.200}', _dark: '{colors.blue.600}' } },
+      },
+    },
     global: {
       body: {
         bg: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },

toolkit/theme/globalCss.ts

-import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import type { SystemConfig } from '@chakra-ui/react';
 
-// TODO @tom2drum check address highlight feature
 import addressEntity from './globals/address-entity';
 import recaptcha from './globals/recaptcha';
 import scrollbar from './globals/scrollbar';
 
-const globalCss: Record<string, SystemStyleObject> = {
+const globalCss: SystemConfig['globalCss'] = {
   body: {
     bg: 'global.body.bg',
     color: 'global.body.fg',
-    '-webkit-tap-highlight-color': 'transparent',
+    WebkitTapHighlightColor: 'transparent',
     fontVariantLigatures: 'no-contextual',
   },
   mark: {
@@ -25,7 +24,7 @@ const globalCss: Record<string, SystemStyleObject> = {
   },
   ...recaptcha,
   ...scrollbar,
-  // ...addressEntity(props),
+  ...addressEntity,
 };
 
 export default globalCss;

toolkit/theme/globals/address-entity.ts

-import { mode } from '@chakra-ui/theme-tools';
-import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-
-const styles = (props: StyleFunctionProps) => {
-  return {
+const styles = {
   '.address-entity': {
     '&.address-entity_highlighted': {
       _before: {
@@ -13,13 +9,13 @@ const styles = (props: StyleFunctionProps) => {
         pr: 0,
         top: '-5px',
         left: '-5px',
-          width: `100%`,
-          height: '100%',
+        width: `calc(100% + 6px)`,
+        height: 'calc(100% + 10px)',
         borderRadius: 'base',
-          borderColor: mode('blue.200', 'blue.600')(props),
+        borderColor: 'address.highlighted.border',
         borderWidth: '1px',
         borderStyle: 'dashed',
-          bgColor: mode('blue.50', 'blue.900')(props),
+        bgColor: 'address.highlighted.bg',
         zIndex: -1,
       },
     },
@@ -31,7 +27,6 @@ const styles = (props: StyleFunctionProps) => {
       },
     },
   },
-  };
 };
 
 export default styles;

toolkit/theme/recipes/badge.recipe.ts

@@ -7,6 +7,8 @@ export const recipe = defineRecipe({
     borderRadius: 'sm',
     gap: '1',
     fontWeight: '500',
+    width: 'fit-content',
+    maxWidth: '100%',
     whiteSpace: 'nowrap',
     userSelect: 'none',
     _loading: {

ui/blocks/BlocksContent.tsx

@@ -87,7 +87,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
 
   const content = query.data?.items ? (
     <>
-      <Box display={{ base: 'block', lg: 'none' }}>
+      <Box hideFrom="lg">
         { query.pagination.page === 1 && enableSocket && (
           <SocketNewItemsNotice.Mobile
             url={ window.location.href }
@@ -99,7 +99,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
         ) }
         <BlocksList data={ query.data.items } isLoading={ query.isPlaceholderData } page={ query.pagination.page }/>
       </Box>
-      <Box display={{ base: 'none', lg: 'block' }}>
+      <Box hideBelow="lg">
         <BlocksTable
           data={ query.data.items }
           top={ top || (query.pagination.isVisible ? TABS_HEIGHT : 0) }

ui/pages/Block.tsx

@@ -68,16 +68,16 @@ const BlockPageContent = () => {
         </>
       ),
     },
-    // {
-    //   id: 'txs',
-    //   title: 'Transactions',
-    //   component: (
-    //     <>
-    //       { blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
-    //       <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>
-    //     </>
-    //   ),
-    // },
+    {
+      id: 'txs',
+      title: 'Transactions',
+      component: (
+        <>
+          { blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
+          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>
+        </>
+      ),
+    },
     // config.features.dataAvailability.isEnabled && blockQuery.data?.blob_transaction_count ?
     //   {
     //     id: 'blob_txs',

ui/shared/CurrencyValue.tsx

@@ -18,7 +18,7 @@ interface Props {
 const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className, accuracy, accuracyUsd, isLoading }: Props) => {
   if (isLoading) {
     return (
-      <Skeleton className={ className } display="inline-block">0.00 ($0.00)</Skeleton>
+      <Skeleton className={ className } loading display="inline-block">0.00 ($0.00)</Skeleton>
     );
   }
 

ui/shared/entities/address/AddressEntity.tsx

@@ -172,6 +172,7 @@ const AddressEntry = (props: EntityProps) => {
       onMouseLeave={ highlightContext?.onMouseLeave }
       position="relative"
       zIndex={ 0 }
+      fontWeight="medium"
     >
       <Icon { ...partsProps.icon }/>
       { props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }

ui/shared/tx/TxFee.tsx

@@ -35,7 +35,7 @@ const TxFee = ({ className, tx, accuracy, accuracyUsd, isLoading, withCurrency =
       <Skeleton whiteSpace="pre-wrap" wordBreak="break-word" loading={ isLoading } display="flex" flexWrap="wrap" className={ className }>
         <span>{ valueStr } </span>
         <TokenEntity token={ token } noCopy onlySymbol w="auto" ml={ 1 }/>
-        { usd && withUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
+        { usd && withUsd && <chakra.span color="text.secondary"> (${ usd })</chakra.span> }
       </Skeleton>
     );
   }

ui/showcases/Badges.tsx

+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { Badge } from 'toolkit/chakra/badge';
@@ -53,6 +54,8 @@ const BadgesShowcase = () => {
             <Badge colorPalette="purple" loading>Content</Badge>
           </Sample>
         </SamplesStack>
+      </Section>
+      <Section>
         <SectionHeader>Size</SectionHeader>
         <SamplesStack>
           <Sample label="size: md">
@@ -68,6 +71,18 @@ const BadgesShowcase = () => {
           </Sample>
         </SamplesStack>
       </Section>
+      <Section>
+        <SectionHeader>Truncate</SectionHeader>
+        <SamplesStack>
+          <Sample label="truncated: true">
+            <Box maxW="150px">
+              <Badge truncated>
+                Very long content that should be truncated
+              </Badge>
+            </Box>
+          </Sample>
+        </SamplesStack>
+      </Section>
       <Section>
         <SectionHeader>Icon</SectionHeader>
         <SamplesStack>

ui/showcases/Tabs.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs';
 import AdaptiveTabs from 'toolkit/components/AdaptiveTabs/AdaptiveTabs';
+import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
 
 import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
 
@@ -61,6 +62,13 @@ const TabsShowcase = () => {
             />
           </Sample>
         </SamplesStack>
+
+        <SectionSubHeader>Tabs skeleton</SectionSubHeader>
+        <SamplesStack>
+          <Sample>
+            <RoutedTabsSkeleton tabs={ tabs }/>
+          </Sample>
+        </SamplesStack>
       </Section>
     </Container>
   );

ui/txs/TxTranslationType.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { TransactionType } from 'types/api/transaction';
 
-import Tag from 'ui/shared/chakra/Tag';
+import { Badge } from 'toolkit/chakra/badge';
 
 import { camelCaseToSentence } from './noves/utils';
 import TxType from './TxType';
@@ -22,9 +22,9 @@ const TxTranslationType = ({ types, isLoading, translatationType }: Props) => {
   }
 
   return (
-    <Tag colorScheme="purple" isLoading={ isLoading }>
+    <Badge colorScheme="purple" loading={ isLoading }>
       { camelCaseToSentence(translatationType) }
-    </Tag>
+    </Badge>
   );
 
 };

ui/txs/TxsContent.tsx

-import { Show, Hide } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressFromToFilter } from 'types/api/address';
@@ -69,7 +69,7 @@ const TxsContent = ({
 
   const content = itemsWithTranslation ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         <TxsList
           showBlockInfo={ showBlockInfo }
           showSocketInfo={ showSocketInfo }
@@ -80,8 +80,8 @@ const TxsContent = ({
           currentAddress={ currentAddress }
           items={ itemsWithTranslation }
         />
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <TxsTable
           txs={ itemsWithTranslation }
           sort={ onSortToggle }
@@ -95,7 +95,7 @@ const TxsContent = ({
           enableTimeIncrement={ enableTimeIncrement }
           isLoading={ isPlaceholderData }
         />
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -121,11 +121,12 @@ const TxsContent = ({
   return (
     <DataListDisplay
       isError={ isError }
-      items={ itemsWithTranslation }
+      itemsNum={ itemsWithTranslation?.length }
       emptyText="There are no transactions."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/txs/TxsHeaderMobile.tsx

@@ -29,13 +29,14 @@ const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps
     <ActionBar className={ className }>
       <HStack>
         { filterComponent }
-        <Sort
+        { /* TODO @tom2drum fix sort select */ }
+        { /* <Sort
           name="transactions_sorting"
           defaultValue={ sorting }
           options={ SORT_OPTIONS }
           onChange={ setSorting }
           isLoading={ paginationProps.isLoading }
-        />
+        /> */ }
         { /* api is not implemented */ }
         { /* <FilterInput
           // eslint-disable-next-line react/jsx-no-bind

ui/txs/TxsList.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
+import useInitialList from 'lib/hooks/useInitialList';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
@@ -21,6 +22,11 @@ interface Props {
 
 const TxsList = (props: Props) => {
   const { cutRef, renderedItemsNum } = useLazyRenderedList(props.items, !props.isLoading);
+  const initialList = useInitialList({
+    data: props.items ?? [],
+    idFn: (item) => item.hash,
+    enabled: !props.isLoading,
+  });
 
   return (
     <Box>
@@ -40,6 +46,7 @@ const TxsList = (props: Props) => {
           currentAddress={ props.currentAddress }
           enableTimeIncrement={ props.enableTimeIncrement }
           isLoading={ props.isLoading }
+          animation={ initialList.getAnimationProp(tx) }
         />
       )) }
       <Box ref={ cutRef } h={ 0 }/>

ui/txs/TxsListItem.tsx

@@ -11,8 +11,8 @@ import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import { space } from 'lib/html-entities';
 import { currencyUnits } from 'lib/units';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -31,13 +31,14 @@ type Props = {
   currentAddress?: string;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
+  animation?: string;
 };
 
-const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
+const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement, animation }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
   return (
-    <ListItemMobile display="block" width="100%" isAnimated key={ tx.hash }>
+    <ListItemMobile display="block" width="100%" animation={ animation } key={ tx.hash }>
       <Flex justifyContent="space-between" mt={ 4 }>
         <HStack flexWrap="wrap">
           { tx.translation ? (
@@ -75,9 +76,9 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
       </Flex>
       { tx.method && (
         <Flex mt={ 3 }>
-          <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Method </Skeleton>
+          <Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Method </Skeleton>
           <Skeleton
-            isLoaded={ !isLoading }
+            loading={ isLoading }
             color="text_secondary"
             overflow="hidden"
             whiteSpace="nowrap"
@@ -89,7 +90,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
       ) }
       { showBlockInfo && tx.block_number !== null && (
         <Flex mt={ 2 }>
-          <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Block </Skeleton>
+          <Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Block </Skeleton>
           <BlockEntity
             isLoading={ isLoading }
             number={ tx.block_number }
@@ -107,11 +108,13 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
       />
       { !config.UI.views.tx.hiddenFields?.value && (
         <Flex mt={ 2 } columnGap={ 2 }>
-          <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Value</Skeleton>
-          <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary" whiteSpace="pre">
+          <Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Value</Skeleton>
+          <Skeleton loading={ isLoading } display="inline-block" color="text.secondary" whiteSpace="pre">
+            <span>
               { getValueWithUnit(tx.value).toFormat() }
               { space }
               { currencyUnits.ether }
+            </span>
           </Skeleton>
         </Flex>
       ) }
@@ -119,7 +122,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
         <Flex mt={ 2 } mb={ 3 } columnGap={ 2 }>
           { (tx.stability_fee !== undefined || tx.fee.value !== null) && (
             <>
-              <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Fee</Skeleton>
+              <Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Fee</Skeleton>
               <TxFee tx={ tx } isLoading={ isLoading }/>
             </>
           ) }

ui/txs/TxsTable.tsx

-import { Link, Table, Tbody, Tr, Th } from '@chakra-ui/react';
-import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
 import type { Transaction, TransactionsSortingField, TransactionsSortingValue } from 'types/api/transaction';
 
 import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import useInitialList from 'lib/hooks/useInitialList';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
 import { currencyUnits } from 'lib/units';
+import { Link } from 'toolkit/chakra/link';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import IconSvg from 'ui/shared/IconSvg';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-import TheadSticky from 'ui/shared/TheadSticky';
 
 import TxsTableItem from './TxsTableItem';
 
@@ -42,6 +42,11 @@ const TxsTable = ({
   isLoading,
 }: Props) => {
   const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading);
+  const initialList = useInitialList({
+    data: txs ?? [],
+    idFn: (item) => item.hash,
+    enabled: !isLoading,
+  });
 
   const feeCurrency = config.UI.views.tx.hiddenFields?.fee_currency || config.chain.hasMultipleGasCurrencies ?
     '' :
@@ -49,44 +54,44 @@ const TxsTable = ({
 
   return (
     <AddressHighlightProvider>
-      <Table minWidth="950px">
-        <TheadSticky top={ top }>
-          <Tr>
-            <Th width="54px"></Th>
-            <Th width="180px">Txn hash</Th>
-            <Th width="160px">Type</Th>
-            <Th width="20%">Method</Th>
+      <TableRoot minWidth="950px">
+        <TableHeaderSticky top={ top }>
+          <TableRow>
+            <TableColumnHeader width="54px"></TableColumnHeader>
+            <TableColumnHeader width="180px">Txn hash</TableColumnHeader>
+            <TableColumnHeader width="160px">Type</TableColumnHeader>
+            <TableColumnHeader width="20%">Method</TableColumnHeader>
             { showBlockInfo && (
-              <Th width="18%">
+              <TableColumnHeader width="18%">
                 <Link onClick={ isLoading ? undefined : sort('block_number') } display="flex" alignItems="center">
                   { sorting === 'block_number-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'block_number-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
                   Block
                 </Link>
-              </Th>
+              </TableColumnHeader>
             ) }
-            <Th width="224px">From/To</Th>
+            <TableColumnHeader width="224px">From/To</TableColumnHeader>
             { !config.UI.views.tx.hiddenFields?.value && (
-              <Th width="20%" isNumeric>
+              <TableColumnHeader width="20%" isNumeric>
                 <Link onClick={ isLoading ? undefined : sort('value') } display="flex" alignItems="center" justifyContent="end">
                   { sorting === 'value-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'value-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
                   { `Value ${ currencyUnits.ether }` }
                 </Link>
-              </Th>
+              </TableColumnHeader>
             ) }
             { !config.UI.views.tx.hiddenFields?.tx_fee && (
-              <Th width="20%" isNumeric pr={ 5 }>
+              <TableColumnHeader width="20%" isNumeric pr={ 5 }>
                 <Link onClick={ isLoading ? undefined : sort('fee') } display="flex" alignItems="center" justifyContent="end">
                   { sorting === 'fee-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
                   { sorting === 'fee-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
                   { `Fee${ feeCurrency }` }
                 </Link>
-              </Th>
+              </TableColumnHeader>
             ) }
-          </Tr>
-        </TheadSticky>
-        <Tbody>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody>
           { showSocketInfo && (
             <SocketNewItemsNotice.Desktop
               url={ window.location.href }
@@ -95,7 +100,6 @@ const TxsTable = ({
               isLoading={ isLoading }
             />
           ) }
-          <AnimatePresence initial={ false }>
           { txs.slice(0, renderedItemsNum).map((item, index) => (
             <TxsTableItem
               key={ item.hash + (isLoading ? index : '') }
@@ -104,11 +108,11 @@ const TxsTable = ({
               currentAddress={ currentAddress }
               enableTimeIncrement={ enableTimeIncrement }
               isLoading={ isLoading }
+              animation={ initialList.getAnimationProp(item) }
             />
           )) }
-          </AnimatePresence>
-        </Tbody>
-      </Table>
+        </TableBody>
+      </TableRoot>
       <div ref={ cutRef }/>
     </AddressHighlightProvider>
   );

ui/txs/TxsTableItem.tsx

-import {
-  Tr,
-  Td,
-  VStack,
-} from '@chakra-ui/react';
-import { motion } from 'framer-motion';
+import { VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
 import config from 'configs/app';
+import { Badge } from 'toolkit/chakra/badge';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import Tag from 'ui/shared/chakra/Tag';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -29,29 +25,23 @@ type Props = {
   currentAddress?: string;
   enableTimeIncrement?: boolean;
   isLoading?: boolean;
+  animation?: string;
 };
 
-const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading }: Props) => {
+const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading, animation }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
   return (
-    <Tr
-      as={ motion.tr }
-      initial={{ opacity: 0, scale: 0.97 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transitionDuration="normal"
-      transitionTimingFunction="linear"
-      key={ tx.hash }
-    >
-      <Td pl={ 4 }>
+    <TableRow key={ tx.hash } animation={ animation }>
+      <TableCell pl={ 4 }>
         <TxAdditionalInfo tx={ tx } isLoading={ isLoading }/>
-      </Td>
-      <Td pr={ 4 }>
+      </TableCell>
+      <TableCell pr={ 4 }>
         <VStack alignItems="start" lineHeight="24px">
           <TxEntity
             hash={ tx.hash }
             isLoading={ isLoading }
-            fontWeight={ 700 }
+            fontWeight="bold"
             noIcon
             maxW="100%"
             truncation="constant_long"
@@ -60,12 +50,11 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
             timestamp={ tx.timestamp }
             enableIncrement={ enableTimeIncrement }
             isLoading={ isLoading }
-            color="text_secondary"
-            fontWeight="400"
+            color="text.secondary"
           />
         </VStack>
-      </Td>
-      <Td>
+      </TableCell>
+      <TableCell>
         <VStack alignItems="start">
           { tx.translation ? (
             <TxTranslationType
@@ -79,16 +68,16 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
           <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
         </VStack>
-      </Td>
-      <Td whiteSpace="nowrap">
+      </TableCell>
+      <TableCell whiteSpace="nowrap">
         { tx.method && (
-          <Tag colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' } isLoading={ isLoading } isTruncated>
-            { tx.method }
-          </Tag>
+          <Badge colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' } loading={ isLoading } truncated>
+            <span>{ tx.method }</span>
+          </Badge>
         ) }
-      </Td>
+      </TableCell>
       { showBlockInfo && (
-        <Td>
+        <TableCell>
           { tx.block_number && (
             <BlockEntity
               isLoading={ isLoading }
@@ -99,9 +88,9 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
               fontWeight={ 500 }
             />
           ) }
-        </Td>
+        </TableCell>
       ) }
-      <Td>
+      <TableCell>
         <AddressFromTo
           from={ tx.from }
           to={ dataTo }
@@ -110,14 +99,14 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
           mt="2px"
           mode="compact"
         />
-      </Td>
+      </TableCell>
       { !config.UI.views.tx.hiddenFields?.value && (
-        <Td isNumeric>
+        <TableCell isNumeric>
           <CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
-        </Td>
+        </TableCell>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <Td isNumeric maxW="220px">
+        <TableCell isNumeric maxW="220px">
           <TxFee
             tx={ tx }
             accuracy={ 8 }
@@ -125,9 +114,9 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
             withCurrency={ Boolean(tx.celo || tx.stability_fee) }
             justifyContent="end"
           />
-        </Td>
+        </TableCell>
       ) }
-    </Tr>
+    </TableRow>
   );
 };