token transfers page

pages/token-transfers.tsx

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

ui/pages/TokenTransfers.tsx

-import { Show, Hide } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -15,6 +15,7 @@ import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import { getTokenFilterValue } from 'ui/tokens/utils';
 import TokenTransfersListItem from 'ui/tokenTransfers/TokenTransfersListItem';
 import TokenTransfersTable from 'ui/tokenTransfers/TokenTransfersTable';
+
 const TokenTransfers = () => {
   const router = useRouter();
   const [ typeFilter, setTypeFilter ] = React.useState<Array<TokenType>>(getTokenFilterValue(router.query.type) || []);
@@ -34,7 +35,7 @@ const TokenTransfers = () => {
 
   const content = (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { tokenTransfersQuery.data?.items.map((item, index) => (
           <TokenTransfersListItem
             key={ item.transaction_hash + item.log_index + (tokenTransfersQuery.isPlaceholderData ? index : '') }
@@ -42,14 +43,14 @@ const TokenTransfers = () => {
             item={ item }
           />
         )) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <TokenTransfersTable
           items={ tokenTransfersQuery.data?.items }
           top={ tokenTransfersQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ tokenTransfersQuery.isPlaceholderData }
         />
-      </Hide>
+      </Box>
     </>
   );
 
@@ -74,11 +75,12 @@ const TokenTransfers = () => {
       />
       <DataListDisplay
         isError={ tokenTransfersQuery.isError }
-        items={ tokenTransfersQuery.data?.items }
+        itemsNum={ tokenTransfersQuery.data?.items.length }
         emptyText="There are no token transfers."
-        content={ content }
         actionBar={ actionBar }
-      />
+      >
+        { content }
+      </DataListDisplay>
     </>
   );
 };

ui/shared/entities/address/AddressEntity.tsx

@@ -90,7 +90,7 @@ const Icon = (props: IconProps) => {
   })();
 
   return (
-    <Tooltip label={ label }>
+    <Tooltip content={ label }>
       <Flex marginRight={ styles.marginRight } position="relative">
         <AddressIdenticon
           size={ props.size === 'lg' ? 30 : 20 }

ui/shared/entities/nft/NftEntity.tsx

@@ -58,12 +58,12 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
 const NftEntity = (props: EntityProps) => {
   const partsProps = distributeEntityProps(props);
 
+  const content = <Content { ...partsProps.content }/>;
+
   return (
     <Container w="100%" { ...partsProps.container }>
       <Icon { ...partsProps.icon }/>
-      <Link { ...partsProps.link }>
-        <Content { ...partsProps.content }/>
-      </Link>
+      { props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }
     </Container>
   );
 };

ui/tokenTransfers/TokenTransfersListItem.tsx

@@ -5,8 +5,8 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
-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 AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
@@ -49,7 +49,7 @@ const TokenTransfersListItem = ({ item, isLoading }: Props) => {
       { item.method && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Method</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
-            <Tag isLoading={ isLoading }>{ item.method }</Tag>
+            <Badge loading={ isLoading }>{ item.method }</Badge>
           </ListItemMobileGrid.Value>
         </>
       ) }
@@ -88,7 +88,7 @@ const TokenTransfersListItem = ({ item, isLoading }: Props) => {
           <ListItemMobileGrid.Label isLoading={ isLoading }>Amount</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Flex gap={ 2 } overflow="hidden">
-              <Skeleton isLoaded={ !isLoading } wordBreak="break-all">
+              <Skeleton loading={ isLoading } wordBreak="break-all">
                 { valueStr }
               </Skeleton>
               <TokenEntity

ui/tokenTransfers/TokenTransfersTable.tsx

-import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 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 TokenTransferTableItem from 'ui/tokenTransfers/TokenTransfersTableItem';
 
 interface Props {
@@ -16,18 +15,18 @@ interface Props {
 const TokenTransferTable = ({ items, top, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm" minW="950px" style={{ tableLayout: 'auto' }}>
-        <Thead top={ top }>
-          <Tr>
-            <Th>Txn hash</Th>
-            <Th>Method</Th>
-            <Th>Block</Th>
-            <Th>From/To</Th>
-            <Th>Token ID</Th>
-            <Th isNumeric>Amount</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
+      <TableRoot minW="950px" tableLayout="auto">
+        <TableHeaderSticky top={ top }>
+          <TableRow>
+            <TableColumnHeader>Txn hash</TableColumnHeader>
+            <TableColumnHeader>Method</TableColumnHeader>
+            <TableColumnHeader>Block</TableColumnHeader>
+            <TableColumnHeader>From/To</TableColumnHeader>
+            <TableColumnHeader>Token ID</TableColumnHeader>
+            <TableColumnHeader isNumeric>Amount</TableColumnHeader>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody>
           { items?.map((item, index) => (
             <TokenTransferTableItem
               key={ item.transaction_hash + item.log_index + (isLoading ? index : '') }
@@ -35,8 +34,8 @@ const TokenTransferTable = ({ items, top, isLoading }: Props) => {
               isLoading={ isLoading }
             />
           )) }
-        </Tbody>
-      </Table>
+        </TableBody>
+      </TableRoot>
     </AddressHighlightProvider>
   );
 };

ui/tokenTransfers/TokenTransfersTableItem.tsx

-import { Tr, Td, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
+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 NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
@@ -29,8 +30,8 @@ const TokenTransferTableItem = ({ item, isLoading }: Props) => {
   }) : { valueStr: null };
 
   return (
-    <Tr>
-      <Td>
+    <TableRow>
+      <TableCell>
         <TxEntity
           hash={ item.transaction_hash }
           isLoading={ isLoading }
@@ -46,14 +47,14 @@ const TokenTransferTableItem = ({ item, isLoading }: Props) => {
           fontWeight="400"
           display="inline-block"
         />
-      </Td>
-      <Td maxW="120px">
-        { item.method && <Tag isLoading={ isLoading }>{ item.method }</Tag> }
-      </Td>
-      <Td>
+      </TableCell>
+      <TableCell maxW="120px">
+        { item.method && <Badge loading={ isLoading }>{ item.method }</Badge> }
+      </TableCell>
+      <TableCell>
         <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon/>
-      </Td>
-      <Td>
+      </TableCell>
+      <TableCell>
         <AddressFromTo
           maxW={{ lg: '220px', xl: '320px' }}
           from={ item.from }
@@ -61,8 +62,8 @@ const TokenTransferTableItem = ({ item, isLoading }: Props) => {
           isLoading={ isLoading }
           mode={{ lg: 'compact', xl: 'long' }}
         />
-      </Td>
-      <Td>
+      </TableCell>
+      <TableCell>
         { item.total && 'token_id' in item.total && item.token && (NFT_TOKEN_TYPE_IDS.includes(item.token.type)) && item.total.token_id !== null ? (
           <NftEntity
             hash={ item.token.address }
@@ -71,11 +72,11 @@ const TokenTransferTableItem = ({ item, isLoading }: Props) => {
             maxW="140px"
           />
         ) : '-' }
-      </Td>
-      <Td isNumeric verticalAlign="top">
+      </TableCell>
+      <TableCell isNumeric verticalAlign="top">
         { (item.token && valueStr) ? (
           <Flex gap={ 2 } overflow="hidden" justifyContent="flex-end">
-            <Skeleton isLoaded={ !isLoading } wordBreak="break-all">
+            <Skeleton loading={ isLoading } wordBreak="break-all">
               { valueStr }
             </Skeleton>
             <TokenEntity
@@ -90,8 +91,8 @@ const TokenTransferTableItem = ({ item, isLoading }: Props) => {
           </Flex>
         ) : '-'
         }
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };