Skip to content

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

block withdrawals, blob txs and epoch rewards tabs

parent 31a8d6be
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 158 deletions
toolkit/chakra/alert.tsx
View file @ a19110b6
......@@ -14,6 +14,7 @@ export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
closable?: boolean;
onClose?: () => void;
loading?: boolean;
showIcon?: boolean;
}
export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
......@@ -27,15 +28,28 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
startElement,
endElement,
loading,
showIcon = false,
...rest
} = props;
const defaultIcon = <IconSvg name="info_filled" w="100%" h="100%"/>;
const iconElement = (() => {
if (startElement !== undefined) {
return startElement;
}
if (!showIcon && icon === undefined) {
return null;
}
return <ChakraAlert.Indicator>{ icon || defaultIcon }</ChakraAlert.Indicator>;
})();
return (
<Skeleton loading={ loading } asChild>
<ChakraAlert.Root ref={ ref } { ...rest }>
{ startElement !== undefined || icon !== undefined ? startElement : <ChakraAlert.Indicator>{ icon || defaultIcon }</ChakraAlert.Indicator> }
{ iconElement }
{ children ? (
<ChakraAlert.Content>
{ title && <ChakraAlert.Title>{ title }</ChakraAlert.Title> }
......
toolkit/chakra/skeleton.tsx
View file @ a19110b6
......@@ -46,7 +46,7 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
export const Skeleton = React.forwardRef<HTMLDivElement, ChakraSkeletonProps>(
function Skeleton(props, ref) {
const { loading = false, ...rest } = props;
const { loading = true, ...rest } = props;
return <ChakraSkeleton loading={ loading } { ...(loading ? { 'data-loading': true } : {}) } { ...rest } ref={ ref }/>;
},
);
toolkit/theme/recipes/alert.recipe.ts
View file @ a19110b6
......@@ -95,6 +95,14 @@ export const recipe = defineSlotRecipe({
},
},
variant: {
subtle: {
root: {
color: 'alert.fg',
},
},
},
inline: {
'true': {
root: {
......@@ -134,5 +142,6 @@ export const recipe = defineSlotRecipe({
status: 'neutral',
size: 'md',
inline: true,
variant: 'subtle',
},
});
toolkit/theme/recipes/table.recipe.ts
View file @ a19110b6
......@@ -17,9 +17,10 @@ export const recipe = defineSlotRecipe({
textAlign: 'start',
alignItems: 'center',
verticalAlign: 'top',
fontWeight: 'medium',
},
columnHeader: {
fontWeight: '500',
fontWeight: 'medium',
textAlign: 'start',
},
},
......
ui/block/BlockWithdrawals.tsx
View file @ a19110b6
import { Show, Hide } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import DataListDisplay from 'ui/shared/DataListDisplay';
......@@ -14,31 +14,32 @@ const TABS_HEIGHT = 88;
const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
const content = blockWithdrawalsQuery.data?.items ? (
<>
<Show below="lg" ssr={ false }>
<Box hideFrom="lg">
<BeaconChainWithdrawalsList
items={ blockWithdrawalsQuery.data.items }
isLoading={ blockWithdrawalsQuery.isPlaceholderData }
view="block"
/>
</Show>
<Hide below="lg" ssr={ false }>
</Box>
<Box hideBelow="lg">
<BeaconChainWithdrawalsTable
items={ blockWithdrawalsQuery.data.items }
isLoading={ blockWithdrawalsQuery.isPlaceholderData }
top={ blockWithdrawalsQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
view="block"
/>
</Hide>
</Box>
</>
) : null ;
return (
<DataListDisplay
isError={ blockWithdrawalsQuery.isError }
items={ blockWithdrawalsQuery.data?.items }
itemsNum={ blockWithdrawalsQuery.data?.items?.length }
emptyText="There are no withdrawals for this block."
content={ content }
/>
>
{ content }
</DataListDisplay>
);
};
......
ui/block/epochRewards/BlockEpochElectionRewardDetailsDesktop.tsx
View file @ a19110b6
import { Box, Grid, GridItem, Text, useColorModeValue } from '@chakra-ui/react';
import { Box, Grid, GridItem, Text } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
......@@ -24,8 +24,6 @@ const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
const router = useRouter();
const heightOrHash = getQueryParamString(router.query.height_or_hash);
const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
const { cutRef, query } = useLazyLoadedList({
rootRef,
resourceName: 'block_election_rewards',
......@@ -40,7 +38,7 @@ const BlockEpochElectionRewardDetailsDesktop = ({ type, token }: Props) => {
return (
<Box
p={ 4 }
bgColor={ bgColor }
bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
borderRadius="base"
maxH="360px"
overflowY="scroll"
......
ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx
View file @ a19110b6
import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
import { Box, Flex, Text } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
......@@ -25,8 +25,6 @@ const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
const router = useRouter();
const heightOrHash = getQueryParamString(router.query.height_or_hash);
const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
const { cutRef, query } = useLazyLoadedList({
rootRef,
resourceName: 'block_election_rewards',
......@@ -37,7 +35,15 @@ const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
});
return (
<Flex flexDir="column" rowGap={ 3 } p={ 4 } bgColor={ bgColor } borderRadius="base" maxH="360px" overflowY="scroll">
<Flex
flexDir="column"
rowGap={ 3 }
p={ 4 }
bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
borderRadius="base"
maxH="360px"
overflowY="scroll"
>
{ query.data?.pages
.map((page) => page.items)
......
ui/block/epochRewards/BlockEpochElectionRewards.tsx
View file @ a19110b6
import { Box, Heading, Hide, Show, Table, Tbody, Th, Thead, Tr } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import type { BlockEpoch } from 'types/api/block';
import { Heading } from 'toolkit/chakra/heading';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import BlockEpochElectionRewardsListItem from './BlockEpochElectionRewardsListItem';
import BlockEpochElectionRewardsTableItem from './BlockEpochElectionRewardsTableItem';
......@@ -14,18 +17,18 @@ interface Props {
const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
return (
<Box mt={ 8 }>
<Heading as="h4" size="sm" mb={ 3 }>Election rewards</Heading>
<Hide below="lg" ssr={ false }>
<Table style={{ tableLayout: 'auto' }}>
<Thead>
<Tr>
<Th width="24px"/>
<Th width="180px">Reward type</Th>
<Th/>
<Th isNumeric>Value</Th>
</Tr>
</Thead>
<Tbody>
<Heading level="3" mb={ 3 }>Election rewards</Heading>
<Box hideBelow="lg">
<TableRoot style={{ tableLayout: 'auto' }}>
<TableHeaderSticky>
<TableRow>
<TableColumnHeader width="24px"/>
<TableColumnHeader width="180px">Reward type</TableColumnHeader>
<TableColumnHeader/>
<TableColumnHeader isNumeric>Value</TableColumnHeader>
</TableRow>
</TableHeaderSticky>
<TableBody>
{ Object.entries(data.aggregated_election_rewards).map((entry) => {
const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
const value = entry[1];
......@@ -43,10 +46,10 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
/>
);
}) }
</Tbody>
</Table>
</Hide>
<Show below="lg" ssr={ false }>
</TableBody>
</TableRoot>
</Box>
<Box hideFrom="lg">
{ Object.entries(data.aggregated_election_rewards).map((entry) => {
const key = entry[0] as keyof BlockEpoch['aggregated_election_rewards'];
const value = entry[1];
......@@ -64,7 +67,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
/>
);
}) }
</Show>
</Box>
</Box>
);
};
......
ui/block/epochRewards/BlockEpochElectionRewardsListItem.tsx
View file @ a19110b6
import { Box, Flex, IconButton, useDisclosure } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import React from 'react';
import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
import getCurrencyValue from 'lib/getCurrencyValue';
import Skeleton from 'ui/shared/chakra/Skeleton';
import { IconButton } from 'toolkit/chakra/icon-button';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
import IconSvg from 'ui/shared/IconSvg';
......@@ -37,27 +39,26 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
>
<Flex my="3px" columnGap={ 3 } alignItems="center" flexWrap="wrap" rowGap={ 2 }>
{ data.count ? (
<Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
<Skeleton loading={ isLoading } display="flex" borderRadius="sm">
<IconButton
aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
aria-label={ section.open ? 'Collapse section' : 'Expand section' }
variant="link"
boxSize={ 6 }
flexShrink={ 0 }
icon={ (
<IconSvg
name="arrows/east-mini"
boxSize={ 6 }
transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
transitionDuration="faster"
/>
) }
/>
>
<IconSvg
name="arrows/east-mini"
boxSize={ 6 }
transform={ section.open ? 'rotate(270deg)' : 'rotate(180deg)' }
transitionDuration="faster"
/>
</IconButton>
</Skeleton>
) : <Box boxSize={ 6 }/> }
<EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading }>{ data.count }</Skeleton>
<Skeleton loading={ isLoading }>{ data.count }</Skeleton>
<Flex columnGap={ 2 } alignItems="center" ml={{ base: 9, lg: 'auto' }} w={{ base: '100%', lg: 'fit-content' }} fontWeight={ 500 }>
<Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
<Skeleton loading={ isLoading }>{ valueStr }</Skeleton>
<TokenEntity
token={ data.token }
noCopy
......@@ -67,7 +68,7 @@ const BlockEpochElectionRewardsListItem = ({ data, isLoading, type }: Props) =>
/>
</Flex>
</Flex>
{ section.isOpen && (
{ section.open && (
<Box mt={ 2 }>
<BlockEpochElectionRewardDetailsMobile type={ type } token={ data.token }/>
</Box>
......
ui/block/epochRewards/BlockEpochElectionRewardsTableItem.tsx
View file @ a19110b6
import { Flex, IconButton, Td, Tr, useDisclosure } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react';
import React from 'react';
import type { BlockEpoch, BlockEpochElectionReward } from 'types/api/block';
import getCurrencyValue from 'lib/getCurrencyValue';
import Skeleton from 'ui/shared/chakra/Skeleton';
import { IconButton } from 'toolkit/chakra/icon-button';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
import IconSvg from 'ui/shared/IconSvg';
......@@ -26,45 +29,42 @@ const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) =>
decimals: data.token.decimals,
});
const mainRowBorderColor = section.isOpen ? 'transparent' : 'border.divider';
const mainRowBorderColor = section.open ? 'transparent' : 'border.divider';
return (
<>
<Tr
<TableRow
onClick={ isLoading || !data.count ? undefined : section.onToggle }
cursor={ isLoading || !data.count ? undefined : 'pointer' }
>
<Td borderColor={ mainRowBorderColor }>
<TableCell borderColor={ mainRowBorderColor }>
{ Boolean(data.count) && (
<Skeleton isLoaded={ !isLoading } display="flex" borderRadius="sm">
<Skeleton loading={ isLoading } display="flex" borderRadius="sm">
<IconButton
aria-label={ section.isOpen ? 'Collapse section' : 'Expand section' }
aria-label={ section.open ? 'Collapse section' : 'Expand section' }
variant="link"
boxSize={ 6 }
flexShrink={ 0 }
icon={ (
<IconSvg
name="arrows/east-mini"
boxSize={ 6 }
transform={ section.isOpen ? 'rotate(270deg)' : 'rotate(180deg)' }
transitionDuration="faster"
/>
) }
/>
>
<IconSvg
name="arrows/east-mini"
boxSize={ 6 }
transform={ section.open ? 'rotate(270deg)' : 'rotate(180deg)' }
transitionDuration="faster"
/>
</IconButton>
</Skeleton>
) }
</Td>
<Td borderColor={ mainRowBorderColor }>
</TableCell>
<TableCell borderColor={ mainRowBorderColor }>
<EpochRewardTypeTag type={ type } isLoading={ isLoading }/>
</Td>
<Td borderColor={ mainRowBorderColor }>
<Skeleton isLoaded={ !isLoading } fontWeight={ 400 } my={ 1 }>
</TableCell>
<TableCell borderColor={ mainRowBorderColor }>
<Skeleton loading={ isLoading } fontWeight={ 400 } my={ 1 }>
{ getRewardNumText(type, data.count) }
</Skeleton>
</Td>
<Td borderColor={ mainRowBorderColor }>
</TableCell>
<TableCell borderColor={ mainRowBorderColor }>
<Flex columnGap={ 2 } alignItems="center" justifyContent="flex-end" my="2px">
<Skeleton isLoaded={ !isLoading }>{ valueStr }</Skeleton>
<Skeleton loading={ isLoading }>{ valueStr }</Skeleton>
<TokenEntity
token={ data.token }
noCopy
......@@ -73,15 +73,15 @@ const BlockEpochElectionRewardsTableItem = ({ isLoading, data, type }: Props) =>
isLoading={ isLoading }
/>
</Flex>
</Td>
</Tr>
{ section.isOpen && (
<Tr>
<Td/>
<Td colSpan={ 3 } pr={ 0 } pt={ 0 }>
</TableCell>
</TableRow>
{ section.open && (
<TableRow>
<TableCell/>
<TableCell colSpan={ 3 } pr={ 0 } pt={ 0 }>
<BlockEpochElectionRewardDetailsDesktop type={ type } token={ data.token }/>
</Td>
</Tr>
</TableCell>
</TableRow>
) }
</>
);
......
ui/pages/Block.tsx
View file @ a19110b6
......@@ -78,30 +78,30 @@ const BlockPageContent = () => {
</>
),
},
// config.features.dataAvailability.isEnabled && blockQuery.data?.blob_transaction_count ?
// {
// id: 'blob_txs',
// title: 'Blob txns',
// component: (
// <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
// ),
// } : null,
// config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?
// {
// id: 'withdrawals',
// title: 'Withdrawals',
// component: (
// <>
// { blockWithdrawalsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockWithdrawalsQuery.isPlaceholderData } mb={ 6 }/> }
// <BlockWithdrawals blockWithdrawalsQuery={ blockWithdrawalsQuery }/>
// </>
// ),
// } : null,
// blockQuery.data?.celo?.is_epoch_block ? {
// id: 'epoch_rewards',
// title: 'Epoch rewards',
// component: <BlockEpochRewards heightOrHash={ heightOrHash }/>,
// } : null,
config.features.dataAvailability.isEnabled && blockQuery.data?.blob_transaction_count ?
{
id: 'blob_txs',
title: 'Blob txns',
component: (
<TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
),
} : null,
config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?
{
id: 'withdrawals',
title: 'Withdrawals',
component: (
<>
{ blockWithdrawalsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockWithdrawalsQuery.isPlaceholderData } mb={ 6 }/> }
<BlockWithdrawals blockWithdrawalsQuery={ blockWithdrawalsQuery }/>
</>
),
} : null,
blockQuery.data?.celo?.is_epoch_block ? {
id: 'epoch_rewards',
title: 'Epoch rewards',
component: <BlockEpochRewards heightOrHash={ heightOrHash }/>,
} : null,
].filter(Boolean)), [ blockBlobTxsQuery, blockQuery, blockTxsQuery, blockWithdrawalsQuery, hasPagination, heightOrHash ]);
let pagination;
......
ui/shared/EpochRewardTypeTag.tsx
View file @ a19110b6
import { Tooltip } from '@chakra-ui/react';
import React from 'react';
import type { EpochRewardsType } from 'types/api/block';
import Tag from 'ui/shared/chakra/Tag';
import { Badge } from 'toolkit/chakra/badge';
import { Tooltip } from 'toolkit/chakra/tooltip';
type Props = {
type: EpochRewardsType;
......@@ -39,10 +39,10 @@ const EpochRewardTypeTag = ({ type, isLoading }: Props) => {
const { text, label, color } = TYPE_TAGS[type];
return (
<Tooltip label={ label } maxW="322px" textAlign="center">
<Tag colorScheme={ color } isLoading={ isLoading }>
<Tooltip content={ label }>
<Badge colorScheme={ color } loading={ isLoading }>
{ text }
</Tag>
</Badge>
</Tooltip>
);
};
......
ui/shared/SocketNewItemsNotice.tsx
View file @ a19110b6
......@@ -62,7 +62,6 @@ const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, typ
px={ 4 }
py="6px"
fontSize="sm"
startElement={ null }
>
{ alertContent }
</Alert>
......
ui/shared/TokenTransferSnippet/TokenTransferSnippet.tsx
View file @ a19110b6
......@@ -9,8 +9,8 @@ import type {
Erc404TotalPayload,
} from 'types/api/tokenTransfer';
import { Skeleton } from 'toolkit/chakra/skeleton';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Skeleton from 'ui/shared/chakra/Skeleton';
import TokenTransferSnippetFiat from './TokenTransferSnippetFiat';
import TokenTransferSnippetNft from './TokenTransferSnippetNft';
......@@ -26,7 +26,7 @@ const TokenTransferSnippet = ({ data, isLoading, noAddressIcons = true }: Props)
const content = (() => {
if (isLoading) {
return <Skeleton w="250px" h={ 6 }/>;
return <Skeleton loading w="250px" h={ 6 }/>;
}
switch (data.token?.type) {
......
ui/snippets/header/alerts/MaintenanceAlert.tsx
View file @ a19110b6
......@@ -10,7 +10,7 @@ const MaintenanceAlert = () => {
}
return (
<Alert status="neutral">
<Alert status="neutral" showIcon>
<Box
dangerouslySetInnerHTML={{ __html: config.UI.maintenanceAlert.message }}
css={{
......
ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx
View file @ a19110b6
......@@ -6,7 +6,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
import config from 'configs/app';
import { currencyUnits } from 'lib/units';
import Skeleton from 'ui/shared/chakra/Skeleton';
import { Skeleton } from 'toolkit/chakra/skeleton';
import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
......@@ -36,12 +36,12 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
<Skeleton loading={ isLoading } display="inline-block">{ item.index }</Skeleton>
</ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Validator index</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.validator_index }</Skeleton>
<Skeleton loading={ isLoading } display="inline-block">{ item.validator_index }</Skeleton>
</ListItemMobileGrid.Value>
{ view !== 'block' && (
......
ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx
View file @ a19110b6
import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react';
import type { AddressWithdrawalsItem } from 'types/api/address';
......@@ -7,7 +6,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
import config from 'configs/app';
import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
import { default as Thead } from 'ui/shared/TheadSticky';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import BeaconChainWithdrawalsTableItem from './BeaconChainWithdrawalsTableItem';
......@@ -35,18 +34,18 @@ const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) =>
}
return (
<Table style={{ tableLayout: 'auto' }} minW="950px">
<Thead top={ top }>
<Tr>
<Th minW="140px">Index</Th>
<Th minW="200px">Validator index</Th>
{ view !== 'block' && <Th w="25%">Block</Th> }
{ view !== 'address' && <Th w="25%">To</Th> }
{ view !== 'block' && <Th w="25%">Age</Th> }
<Th w="25%">{ `Value ${ feature.currency.symbol }` }</Th>
</Tr>
</Thead>
<Tbody>
<TableRoot style={{ tableLayout: 'auto' }} minW="950px">
<TableHeaderSticky top={ top }>
<TableRow>
<TableColumnHeader minW="140px">Index</TableColumnHeader>
<TableColumnHeader minW="200px">Validator index</TableColumnHeader>
{ view !== 'block' && <TableColumnHeader w="25%">Block</TableColumnHeader> }
{ view !== 'address' && <TableColumnHeader w="25%">To</TableColumnHeader> }
{ view !== 'block' && <TableColumnHeader w="25%">Age</TableColumnHeader> }
<TableColumnHeader w="25%">{ `Value ${ feature.currency.symbol }` }</TableColumnHeader>
</TableRow>
</TableHeaderSticky>
<TableBody>
{ view === 'list' && (items as Array<WithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
<BeaconChainWithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="list" isLoading={ isLoading }/>
)) }
......@@ -56,9 +55,9 @@ const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) =>
{ view === 'block' && (items as Array<BlockWithdrawalsItem>).slice(0, renderedItemsNum).map((item, index) => (
<BeaconChainWithdrawalsTableItem key={ item.index + (isLoading ? String(index) : '') } item={ item } view="block" isLoading={ isLoading }/>
)) }
<tr ref={ cutRef }/>
</Tbody>
</Table>
<TableRow ref={ cutRef }/>
</TableBody>
</TableRoot>
);
};
......
ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx
View file @ a19110b6
import { Td, Tr } from '@chakra-ui/react';
import React from 'react';
import type { AddressWithdrawalsItem } from 'types/api/address';
import type { BlockWithdrawalsItem } from 'types/api/block';
import type { WithdrawalsItem } from 'types/api/withdrawals';
import Skeleton from 'ui/shared/chakra/Skeleton';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
......@@ -24,15 +24,15 @@ type Props = ({
const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
return (
<Tr>
<Td verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
</Td>
<Td verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.validator_index }</Skeleton>
</Td>
<TableRow>
<TableCell verticalAlign="middle">
<Skeleton loading={ isLoading } display="inline-block">{ item.index }</Skeleton>
</TableCell>
<TableCell verticalAlign="middle">
<Skeleton loading={ isLoading } display="inline-block">{ item.validator_index }</Skeleton>
</TableCell>
{ view !== 'block' && (
<Td verticalAlign="middle">
<TableCell verticalAlign="middle">
<BlockEntity
number={ item.block_number }
isLoading={ isLoading }
......@@ -40,31 +40,31 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
lineHeight={ 5 }
noIcon
/>
</Td>
</TableCell>
) }
{ view !== 'address' && (
<Td verticalAlign="middle">
<TableCell verticalAlign="middle">
<AddressEntity
address={ item.receiver }
isLoading={ isLoading }
truncation="constant"
/>
</Td>
</TableCell>
) }
{ view !== 'block' && (
<Td verticalAlign="middle" pr={ 12 }>
<TableCell verticalAlign="middle" pr={ 12 }>
<TimeAgoWithTooltip
timestamp={ item.timestamp }
isLoading={ isLoading }
color="text_secondary"
display="inline-block"
/>
</Td>
</TableCell>
) }
<Td verticalAlign="middle">
<TableCell verticalAlign="middle">
<CurrencyValue value={ item.amount } isLoading={ isLoading }/>
</Td>
</Tr>
</TableCell>
</TableRow>
);
};
......
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