internal txs for address

ui/address/AddressInternalTxs.tsx

-import { Show, Hide } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -70,19 +70,19 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = t
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         <InternalTxsList data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <InternalTxsTable data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null ;
 
   const actionBar = (
     <ActionBar mt={ -6 } justifyContent="left">
       <AddressTxsFilter
-        defaultFilter={ filterValue }
+        initialValue={ filterValue }
         onFilterChange={ handleFilterChange }
         hasActiveFilter={ Boolean(filterValue) }
         isLoading={ pagination.isLoading }
@@ -100,12 +100,13 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = t
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      itemsNum={ data?.items.length }
       filterProps={{ emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`, hasActiveFilters: Boolean(filterValue) }}
       emptyText="There are no internal transactions for this address."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/internalTxs/InternalTxsListItem.tsx

@@ -6,9 +6,9 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import { currencyUnits } from 'lib/units';
+import { Badge } from 'toolkit/chakra/badge';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -38,7 +38,7 @@ const InternalTxsListItem = ({
   return (
     <ListItemMobile rowGap={ 3 }>
       <Flex columnGap={ 2 }>
-        { typeTitle && <Tag colorScheme="cyan" isLoading={ isLoading }>{ typeTitle }</Tag> }
+        { typeTitle && <Badge colorPalette="cyan" loading={ isLoading }>{ typeTitle }</Badge> }
         <TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
       </Flex>
       <Flex justifyContent="space-between" width="100%">
@@ -56,14 +56,13 @@ const InternalTxsListItem = ({
           fontSize="sm"
         />
       </Flex>
-      <HStack spacing={ 1 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>
+      <HStack gap={ 1 }>
+        <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>
         <BlockEntity
           isLoading={ isLoading }
           number={ blockNumber }
           noIcon
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
         />
       </HStack>
       <AddressFromTo
@@ -73,9 +72,9 @@ const InternalTxsListItem = ({
         isLoading={ isLoading }
         w="100%"
       />
-      <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>
+      <HStack gap={ 3 }>
+        <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
+        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>
           <span>{ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }</span>
         </Skeleton>
       </HStack>

ui/internalTxs/InternalTxsTable.tsx

-import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { currencyUnits } from 'lib/units';
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import InternalTxsTableItem from './InternalTxsTableItem';
 
@@ -18,19 +17,19 @@ interface Props {
 const InternalTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table>
-        <Thead top={ 68 }>
-          <Tr>
-            <Th width="15%">Parent txn hash</Th>
-            <Th width="15%">Type</Th>
-            <Th width="10%">Block</Th>
-            <Th width="40%">From/To</Th>
-            <Th width="20%" isNumeric>
+      <TableRoot>
+        <TableHeaderSticky top={ 68 }>
+          <TableRow>
+            <TableColumnHeader width="15%">Parent txn hash</TableColumnHeader>
+            <TableColumnHeader width="15%">Type</TableColumnHeader>
+            <TableColumnHeader width="10%">Block</TableColumnHeader>
+            <TableColumnHeader width="40%">From/To</TableColumnHeader>
+            <TableColumnHeader width="20%" isNumeric>
               Value { currencyUnits.ether }
-            </Th>
-          </Tr>
-        </Thead>
-        <Tbody>
+            </TableColumnHeader>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody>
           { data.map((item, index) => (
             <InternalTxsTableItem
               key={ item.transaction_hash + '_' + index }
@@ -39,8 +38,8 @@ const InternalTxsTable = ({ data, currentAddress, isLoading }: Props) => {
               isLoading={ isLoading }
             />
           )) }
-        </Tbody>
-      </Table>
+        </TableBody>
+      </TableRoot>
     </AddressHighlightProvider>
 
   );

ui/internalTxs/InternalTxsTableItem.tsx

-import { Tr, Td, Box, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
+import { Badge } from 'toolkit/chakra/badge';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
@@ -34,8 +35,8 @@ const InternalTxsTableItem = ({
   const toData = to ? to : createdContract;
 
   return (
-    <Tr alignItems="top">
-      <Td verticalAlign="middle">
+    <TableRow alignItems="top">
+      <TableCell verticalAlign="middle">
         <Flex rowGap={ 3 } flexDir="column">
           <TxEntity
             hash={ txnHash }
@@ -53,41 +54,38 @@ const InternalTxsTableItem = ({
             fontSize="sm"
           />
         </Flex>
-      </Td>
-      <Td verticalAlign="middle">
-        <Flex rowGap={ 2 } flexWrap="wrap">
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Flex rowGap={ 3 } flexDir="column">
           { typeTitle && (
-            <Box w="126px" display="inline-block">
-              <Tag colorScheme="cyan" mr={ 5 } isLoading={ isLoading }>{ typeTitle }</Tag>
-            </Box>
+            <Badge colorPalette="cyan" loading={ isLoading }>{ typeTitle }</Badge>
           ) }
           <TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
         </Flex>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <BlockEntity
           isLoading={ isLoading }
           number={ blockNumber }
           noIcon
-          fontSize="sm"
-          lineHeight={ 5 }
+          textStyle="sm"
           fontWeight={ 500 }
         />
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <AddressFromTo
           from={ from }
           to={ toData }
           current={ currentAddress }
           isLoading={ isLoading }
         />
-      </Td>
-      <Td isNumeric verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block" minW={ 6 }>
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block" minW={ 6 }>
           { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/pages/Address.tsx

@@ -201,12 +201,12 @@ const AddressPageContent = () => {
         component: <AddressTokens shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         subTabs: TOKEN_TABS,
       },
-      // {
-      //   id: 'internal_txns',
-      //   title: 'Internal txns',
-      //   count: addressTabsCountersQuery.data?.internal_transactions_count,
-      //   component: <AddressInternalTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      // },
+      {
+        id: 'internal_txns',
+        title: 'Internal txns',
+        count: addressTabsCountersQuery.data?.internal_transactions_count,
+        component: <AddressInternalTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+      },
       addressTabsCountersQuery.data?.celo_election_rewards_count ? {
         id: 'epoch_rewards',
         title: 'Epoch rewards',

ui/pages/InternalTxs.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -42,12 +42,12 @@ const InternalTxs = () => {
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         <InternalTxsList data={ data.items } isLoading={ isPlaceholderData }/>
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <InternalTxsTable data={ data.items } isLoading={ isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 
@@ -59,11 +59,12 @@ const InternalTxs = () => {
       />
       <DataListDisplay
         isError={ isError }
-        items={ data?.items }
+        itemsNum={ data?.items.length }
         emptyText="There are no internal transactions."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };