Skip to content

F
frontend
Commit 4a55cf1a authored by tom's avatar tom
Browse files
Options

noves and celo tabs on address page

parent 4bf9bf5a
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 102 deletions
toolkit/theme/recipes/select.recipe.ts
View file @ 4a55cf1a
......@@ -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
View file @ 4a55cf1a
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
View file @ 4a55cf1a
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
View file @ 4a55cf1a
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
View file @ 4a55cf1a
......@@ -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
View file @ 4a55cf1a
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
View file @ 4a55cf1a
......@@ -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
View file @ 4a55cf1a
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
View file @ 4a55cf1a
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
View file @ 4a55cf1a
......@@ -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
View file @ 4a55cf1a
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment