noves and celo tabs on address page

toolkit/theme/recipes/select.recipe.ts

@@ -55,7 +55,7 @@ export const recipe = defineSlotRecipe({
       background: 'popover.bg',
       display: 'flex',
       flexDirection: 'column',
-      zIndex: 'dropdown',
+      zIndex: 'popover',
       borderRadius: 'md',
       borderWidth: '0',
       outline: 0,

ui/address/AddressAccountHistory.tsx

-import { Box, Hide, Show, Table,
-  Tbody, Th, Tr } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -11,13 +10,13 @@ import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate';
 import { generateListStub } from 'stubs/utils';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import AddressAccountHistoryTableItem from 'ui/address/accountHistory/AddressAccountHistoryTableItem';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import { getFromToValue } from 'ui/shared/Noves/utils';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import TheadSticky from 'ui/shared/TheadSticky';
 
 import AddressAccountHistoryListItem from './accountHistory/AddressAccountHistoryListItem';
 import AccountHistoryFilter from './AddressAccountHistoryFilter';
@@ -75,7 +74,7 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled
 
   const content = (
     <Box position="relative">
-      <Hide above="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { filteredData?.map((item, i) => (
           <AddressAccountHistoryListItem
             key={ `${ i }-${ item.rawTransactionData.transactionHash }` }
@@ -84,24 +83,24 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled
             isPlaceholderData={ isPlaceholderData }
           />
         )) }
-      </Hide>
+      </Box>
 
-      <Show above="lg" ssr={ false }>
-        <Table>
-          <TheadSticky top={ 75 }>
-            <Tr>
-              <Th width="120px">
+      <Box hideBelow="lg">
+        <TableRoot>
+          <TableHeaderSticky top={ 75 }>
+            <TableRow>
+              <TableColumnHeader width="120px">
                 Age
-              </Th>
-              <Th>
+              </TableColumnHeader>
+              <TableColumnHeader>
                 Action
-              </Th>
-              <Th width="320px">
+              </TableColumnHeader>
+              <TableColumnHeader width="320px">
                 From/To
-              </Th>
-            </Tr>
-          </TheadSticky>
-          <Tbody maxWidth="full">
+              </TableColumnHeader>
+            </TableRow>
+          </TableHeaderSticky>
+          <TableBody maxWidth="full">
             { filteredData?.map((item, i) => (
               <AddressAccountHistoryTableItem
                 key={ `${ i }-${ item.rawTransactionData.transactionHash }` }
@@ -110,24 +109,25 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled
                 isPlaceholderData={ isPlaceholderData }
               />
             )) }
-          </Tbody>
-        </Table>
-      </Show>
+          </TableBody>
+        </TableRoot>
+      </Box>
     </Box>
   );
 
   return (
     <DataListDisplay
       isError={ isError }
-      items={ filteredData }
+      itemsNum={ filteredData?.length }
       emptyText="There are no transactions."
-      content={ content }
       actionBar={ actionBar }
       filterProps={{
         hasActiveFilters: Boolean(filterValue),
         emptyFilteredText: 'No match found for current filter',
       }}
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/address/AddressAccountHistoryFilter.tsx

+import { createListCollection } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NovesHistoryFilterValue } from 'types/api/noves';
@@ -11,6 +12,8 @@ const OPTIONS = [
   { value: 'sent', label: 'Sent to' },
 ];
 
+const collection = createListCollection({ items: OPTIONS });
+
 interface Props {
   hasActiveFilter: boolean;
   defaultFilter: NovesHistoryFilterValue;
@@ -24,11 +27,11 @@ const AccountHistoryFilter = ({ onFilterChange, defaultFilter, hasActiveFilter,
   return (
     <PopoverFilterRadio
       name="account_history_filter"
-      options={ OPTIONS }
+      collection={ collection }
       onChange={ onFilterChange }
       hasActiveFilter={ hasActiveFilter }
       isLoading={ isInitialLoading }
-      defaultValue={ defaultFilter || OPTIONS[0].value }
+      initialValue={ defaultFilter || OPTIONS[0].value }
     />
   );
 };

ui/address/AddressEpochRewards.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -51,14 +51,14 @@ const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled =
 
   const content = rewardsQuery.data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }>
+      <Box hideBelow="lg">
         <AddressEpochRewardsTable
           items={ rewardsQuery.data.items }
           top={ rewardsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ rewardsQuery.isPlaceholderData }
         />
-      </Hide>
-      <Show below="lg" ssr={ false }>
+      </Box>
+      <Box hideFrom="lg">
         { rewardsQuery.data.items.map((item, index) => (
           <AddressEpochRewardsListItem
             key={ item.block_hash + item.type + item.account.hash + item.associated_account.hash + (rewardsQuery.isPlaceholderData ? String(index) : '') }
@@ -66,7 +66,7 @@ const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled =
             isLoading={ rewardsQuery.isPlaceholderData }
           />
         )) }
-      </Show>
+      </Box>
     </>
   ) : null;
 
@@ -85,11 +85,12 @@ const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled =
   return (
     <DataListDisplay
       isError={ rewardsQuery.isError }
-      items={ rewardsQuery.data?.items }
+      itemsNum={ rewardsQuery.data?.items?.length }
       emptyText="There are no epoch rewards for this address."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/address/accountHistory/AddressAccountHistoryListItem.tsx

@@ -3,9 +3,9 @@ import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
@@ -26,7 +26,7 @@ const AddressAccountHistoryListItem = (props: Props) => {
 
   return (
     <ListItemMobile rowGap={ 4 } w="full">
-      <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData } w="full">
+      <Skeleton borderRadius="sm" loading={ props.isPlaceholderData } w="full">
         <Flex justifyContent="space-between" w="full">
           <Flex columnGap={ 2 }>
             <IconSvg
@@ -49,15 +49,15 @@ const AddressAccountHistoryListItem = (props: Props) => {
           />
         </Flex>
       </Skeleton>
-      <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>
-        <LinkInternal
+      <Skeleton borderRadius="sm" loading={ props.isPlaceholderData }>
+        <Link
           href={ `/tx/${ props.tx.rawTransactionData.transactionHash }` }
           fontWeight="bold"
           whiteSpace="break-spaces"
           wordBreak="break-word"
         >
           { parsedDescription }
-        </LinkInternal>
+        </Link>
       </Skeleton>
 
       <Box maxW="full">

ui/address/accountHistory/AddressAccountHistoryTableItem.tsx

-import { Td, Tr, Box } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import IconSvg from 'ui/shared/IconSvg';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
@@ -24,8 +25,8 @@ const AddressAccountHistoryTableItem = (props: Props) => {
   }, [ props.tx.classificationData.description ]);
 
   return (
-    <Tr>
-      <Td px={ 3 } py="18px" fontSize="sm" >
+    <TableRow>
+      <TableCell px={ 3 } py="18px" fontSize="sm" >
         <TimeAgoWithTooltip
           timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
           isLoading={ props.isPlaceholderData }
@@ -33,9 +34,9 @@ const AddressAccountHistoryTableItem = (props: Props) => {
           borderRadius="sm"
           flexShrink={ 0 }
         />
-      </Td>
-      <Td px={ 3 } py="18px" fontSize="sm" >
-        <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>
+      </TableCell>
+      <TableCell px={ 3 } py="18px" fontSize="sm" >
+        <Skeleton borderRadius="sm" loading={ props.isPlaceholderData }>
           <Box display="flex">
             <IconSvg
               name="lightning"
@@ -46,23 +47,23 @@ const AddressAccountHistoryTableItem = (props: Props) => {
               _dark={{ color: 'gray.400' }}
             />
 
-            <LinkInternal
+            <Link
               href={ `/tx/${ props.tx.rawTransactionData.transactionHash }` }
               fontWeight="bold"
               whiteSpace="break-spaces"
               wordBreak="break-word"
             >
               { parsedDescription }
-            </LinkInternal>
+            </Link>
           </Box>
         </Skeleton>
-      </Td>
-      <Td px={ 3 } py="18px" fontSize="sm">
+      </TableCell>
+      <TableCell px={ 3 } py="18px" fontSize="sm">
         <Box flexShrink={ 0 } >
           <NovesFromTo txData={ props.tx } currentAddress={ props.currentAddress } isLoaded={ !props.isPlaceholderData }/>
         </Box>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/address/epochRewards/AddressEpochRewardsListItem.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { AddressEpochRewardsItem } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
@@ -32,7 +32,7 @@ const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Epoch #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading }>
+        <Skeleton loading={ isLoading }>
           { item.epoch_number }
         </Skeleton>
       </ListItemMobileGrid.Value>
@@ -62,7 +62,7 @@ const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Skeleton isLoaded={ !isLoading } display="flex" alignItems="center" gap={ 2 }>
+        <Skeleton loading={ isLoading } display="flex" alignItems="center" gap={ 2 }>
           { valueStr }
           <TokenEntity token={ item.token } isLoading={ isLoading } onlySymbol width="auto" noCopy/>
         </Skeleton>

ui/address/epochRewards/AddressEpochRewardsTable.tsx

-import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressEpochRewardsItem } from 'types/api/address';
 
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import AddressEpochRewardsTableItem from './AddressEpochRewardsTableItem';
 
@@ -15,16 +14,16 @@ import AddressEpochRewardsTableItem from './AddressEpochRewardsTableItem';
 
 const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
   return (
-    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
-      <Thead top={ top }>
-        <Tr>
-          <Th>Block</Th>
-          <Th>Reward type</Th>
-          <Th>Associated address</Th>
-          <Th isNumeric>Value</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
+    <TableRoot minW="1000px" style={{ tableLayout: 'auto' }}>
+      <TableHeaderSticky top={ top }>
+        <TableRow>
+          <TableColumnHeader>Block</TableColumnHeader>
+          <TableColumnHeader>Reward type</TableColumnHeader>
+          <TableColumnHeader>Associated address</TableColumnHeader>
+          <TableColumnHeader isNumeric>Value</TableColumnHeader>
+        </TableRow>
+      </TableHeaderSticky>
+      <TableBody>
         { items.map((item, index) => {
           return (
             <AddressEpochRewardsTableItem
@@ -34,8 +33,8 @@ const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
             />
           );
         }) }
-      </Tbody>
-    </Table>
+      </TableBody>
+    </TableRoot>
   );
 };
 

ui/address/epochRewards/AddressEpochRewardsTableItem.tsx

-import { Flex, Td, Tr, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressEpochRewardsItem } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
@@ -19,29 +20,29 @@ import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => {
   const { valueStr } = getCurrencyValue({ value: item.amount, decimals: item.token.decimals });
   return (
-    <Tr>
-      <Td verticalAlign="middle">
+    <TableRow>
+      <TableCell verticalAlign="middle">
         <Flex alignItems="center" gap={ 3 }>
           <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon fontWeight={ 600 }/>
-          <Skeleton isLoaded={ !isLoading }>
+          <Skeleton loading={ isLoading }>
             <Text color="text_secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
           </Skeleton>
-          <TimeAgoWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } textColor="text_secondary" fontWeight={ 400 }/>
+          <TimeAgoWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>
         </Flex>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <EpochRewardTypeTag type={ item.type } isLoading={ isLoading }/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <AddressEntity address={ item.associated_account } isLoading={ isLoading } truncation="constant"/>
-      </Td>
-      <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } display="flex" alignItems="center" gap={ 2 } justifyContent="flex-end">
+      </TableCell>
+      <TableCell verticalAlign="middle" isNumeric>
+        <Skeleton loading={ isLoading } display="flex" alignItems="center" gap={ 2 } justifyContent="flex-end">
           { valueStr }
           <TokenEntity token={ item.token } isLoading={ isLoading } onlySymbol width="auto" noCopy/>
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/pages/Address.tsx

@@ -165,13 +165,13 @@ const AddressPageContent = () => {
         count: addressTabsCountersQuery.data?.transactions_count,
         component: <AddressTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       },
-      // txInterpretation.isEnabled && txInterpretation.provider === 'noves' ?
-      //   {
-      //     id: 'account_history',
-      //     title: 'Account history',
-      //     component: <AddressAccountHistory scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      //   } :
-      //   undefined,
+      txInterpretation.isEnabled && txInterpretation.provider === 'noves' ?
+        {
+          id: 'account_history',
+          title: 'Account history',
+          component: <AddressAccountHistory scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        } :
+        undefined,
       config.features.userOps.isEnabled && Boolean(userOpsAccountQuery.data?.total_ops) ?
         {
           id: 'user_ops',
@@ -207,12 +207,12 @@ const AddressPageContent = () => {
       //   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',
-      //   count: addressTabsCountersQuery.data?.celo_election_rewards_count,
-      //   component: <AddressEpochRewards scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      // } : undefined,
+      addressTabsCountersQuery.data?.celo_election_rewards_count ? {
+        id: 'epoch_rewards',
+        title: 'Epoch rewards',
+        count: addressTabsCountersQuery.data?.celo_election_rewards_count,
+        component: <AddressEpochRewards scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+      } : undefined,
       {
         id: 'coin_balance_history',
         title: 'Coin balance history',

ui/shared/EpochRewardTypeTag.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { EpochRewardsType } from 'types/api/block';
 
+import type { BadgeProps } from 'toolkit/chakra/badge';
 import { Badge } from 'toolkit/chakra/badge';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 
@@ -10,7 +11,7 @@ type Props = {
   isLoading?: boolean;
 };
 
-const TYPE_TAGS: Record<EpochRewardsType, { text: string; label: string; color: string }> = {
+const TYPE_TAGS: Record<EpochRewardsType, { text: string; label: string; color: BadgeProps['colorPalette'] }> = {
   group: {
     text: 'Validator group rewards',
     // eslint-disable-next-line max-len
@@ -40,7 +41,7 @@ const EpochRewardTypeTag = ({ type, isLoading }: Props) => {
 
   return (
     <Tooltip content={ label }>
-      <Badge colorScheme={ color } loading={ isLoading }>
+      <Badge colorPalette={ color } loading={ isLoading }>
         { text }
       </Badge>
     </Tooltip>