Skip to content

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

Merge branch 'block-details-api' of github.com:blockscout/frontend into block-details-api

parents 0de954b9 433e3ed3
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 123 deletions
data/block.ts deleted 100644 → 0
View file @ 0de954b9
/* eslint-disable max-len */
export const block = {
height: 15006918,
size: 1754,
timestamp: 1662623567695,
transactionsNum: 99,
miner: {
name: 'Alex Emelyanov',
address: '0xdAd49e6CbDE849353ab27DeC6319E687BFc91A41',
},
minedIn: 20,
reward: {
'static': 2,
tx_fee: 0.1550895290904872,
},
burnt_fees: 0.15116230256264004,
gas_limit: 30000000,
gas_used: 12866397,
gas_target: 14266397,
base_fee_per_gas: 11.748611718,
data: {
hex: '0x7370657468303367c18300',
utf: 'speth03g��',
},
difficulty: '14,735,262,741,740,473',
totalDifficulty: '52,307,701,288,535,570,059,059',
hash: '0x1ea365d2144796f793883534aa51bf20d23292b19478994eede23dfc599e7c34',
parent_hash: '0x4585ac59fdfd84443d93c9216e5172f57ca204639d3e68d1908088b0ebd3e709',
parent_height: 29471346,
sha3_uncles: '0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347',
state_root: '0x434fb3f234c8cffc1d915ad26ea360b0261d183ad37af89e31b839df4dd0b00f',
nonce: '0xde80e5b4dd984384',
};
data/blocks.ts deleted 100644 → 0
View file @ 0de954b9
/* eslint-disable max-len */
import { block } from './block';
export const blocks = [
{
...block,
timestamp: Date.now() - 25_000,
},
{
...block,
height: 15006917,
timestamp: Date.now() - 1_000 * 60 * 2,
miner: {
address: '0xdAd49e6CbDE849353ab27DeC6319E687BFc91A41',
name: undefined,
},
transactionsNum: 185,
size: 452,
gas_limit: 30000000,
gas_used: 15671326,
gas_target: 14671326,
burnt_fees: 0.3988042215537949,
},
{
...block,
height: 15006916,
timestamp: Date.now() - 1_000 * 60 * 60 * 17,
transactionsNum: 377,
size: 5222,
gas_limit: 30000000,
gas_used: 23856751,
gas_target: 28856751,
burnt_fees: 0.0000019660909367,
},
];
pages/api/blocks/index.ts 0 → 100644
View file @ 30131a3b
import type { NextApiRequest } from 'next';
import handler from 'lib/api/handler';
const getUrl = (req: NextApiRequest) => {
return `/v2/blocks${ req.query.type ? `?type=${ req.query.type }` : '' }`;
};
const requestHandler = handler(getUrl, [ 'GET' ]);
export default requestHandler;
types/api/block.ts
View file @ 30131a3b
import type { AddressParam } from 'types/api/addressParams';
import type { Reward } from 'types/api/reward';
export type BlockType = 'block' | 'reorg' | 'uncle';
export interface Block {
height: number;
timestamp: string;
......@@ -11,7 +13,7 @@ export interface Block {
parent_hash: string;
difficulty: string;
total_difficulty: string;
gas_used: string;
gas_used: string | null;
gas_limit: string;
nonce: number;
base_fee_per_gas: number | null;
......@@ -23,12 +25,12 @@ export interface Block {
gas_target_percentage: number | null;
gas_used_percentage: number | null;
burnt_fees_percentage: number | null;
type: 'block' | 'reorg' | 'uncle';
type: BlockType;
tx_fees: string | null;
uncles_hashes: Array<string>;
}
export interface BlockResponse {
export interface BlocksResponse {
items: Array<Block>;
next_page_params: {
block_number: number;
......
ui/block/BlockDetails.tsx
View file @ 30131a3b
......@@ -160,12 +160,12 @@ const BlockDetails = () => {
title="Gas used"
hint="The total gas amount used in the block and its percentage of gas filled in the block."
>
<Text>{ BigNumber(data.gas_used).toFormat() }</Text>
<Text>{ BigNumber(data.gas_used || 0).toFormat() }</Text>
<Utilization
ml={ 4 }
mr={ 5 }
colorScheme="gray"
value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas_limit)).toNumber() }
value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
/>
<GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
</DetailsInfoItem>
......
ui/blocks/BlocksContent.tsx
View file @ 30131a3b
import { Box, Text, Show } from '@chakra-ui/react';
import { Box, Text, Show, Alert, Skeleton } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import React from 'react';
import type { BlockType, BlocksResponse } from 'types/api/block';
import useFetch from 'lib/hooks/useFetch';
import BlocksList from 'ui/blocks/BlocksList';
import BlocksSkeletonMobile from 'ui/blocks/BlocksSkeletonMobile';
import BlocksTable from 'ui/blocks/BlocksTable';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import Pagination from 'ui/shared/Pagination';
import SkeletonTable from 'ui/shared/SkeletonTable';
interface Props {
type?: BlockType;
}
const BlocksContent = ({ type }: Props) => {
const fetch = useFetch();
const { data, isLoading, isError } = useQuery<unknown, unknown, BlocksResponse>(
[ 'blocks', type ],
async() => await fetch(`/api/blocks${ type ? `?type=${ type }` : '' }`),
);
if (isLoading) {
return (
<>
<Show below="lg" key="skeleton-mobile">
<BlocksSkeletonMobile/>
</Show>
<Show above="lg" key="skeleton-desktop">
<Skeleton h={ 6 } mb={ 8 } w="150px"/>
<SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
</Show>
</>
);
}
if (isError) {
return <DataFetchAlert/>;
}
if (data.items.length === 0) {
return <Alert>There are no blocks.</Alert>;
}
const BlocksContent = () => {
return (
<>
<Text>Total of 15,044,883 blocks</Text>
<Show below="lg"><BlocksList/></Show>
<Show above="lg"><BlocksTable/></Show>
<Text>Total of { data.items[0].height.toLocaleString() } blocks</Text>
<Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
<Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
<Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
<Pagination currentPage={ 1 }/>
</Box>
......
ui/blocks/BlocksList.tsx
View file @ 30131a3b
import { Box } from '@chakra-ui/react';
import React from 'react';
import { blocks } from 'data/blocks';
import type { Block } from 'types/api/block';
import BlocksListItem from 'ui/blocks/BlocksListItem';
const BlocksList = () => {
interface Props {
data: Array<Block>;
}
const BlocksList = ({ data }: Props) => {
return (
<Box mt={ 8 }>
{ blocks.map((item, index) => <BlocksListItem key={ item.height } data={ item } isPending={ index === 0 }/>) }
{ data.map((item) => <BlocksListItem key={ item.height } data={ item }/>) }
</Box>
);
};
......
ui/blocks/BlocksListItem.tsx
View file @ 30131a3b
import { Flex, Link, Spinner, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import appConfig from 'configs/app/config';
import React from 'react';
import type ArrayElement from 'types/utils/ArrayElement';
import type { Block } from 'types/api/block';
import type { blocks } from 'data/blocks';
import flameIcon from 'icons/flame.svg';
import getBlockReward from 'lib/block/getBlockReward';
import { WEI } from 'lib/consts';
import dayjs from 'lib/date/dayjs';
import link from 'lib/link/link';
import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
......@@ -14,12 +16,13 @@ import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import Utilization from 'ui/shared/Utilization';
interface Props {
data: ArrayElement<typeof blocks>;
data: Block;
isPending?: boolean;
}
const BlocksListItem = ({ data, isPending }: Props) => {
const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
const { totalReward, burntFees, txFees } = getBlockReward(data);
return (
<AccountListItemMobile rowGap={ 3 }>
......@@ -41,29 +44,29 @@ const BlocksListItem = ({ data, isPending }: Props) => {
</Flex>
<Flex columnGap={ 2 }>
<Text fontWeight={ 500 }>Miner</Text>
<AddressLink alias={ data.miner?.name } hash={ data.miner.address } truncation="constant"/>
<AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant"/>
</Flex>
<Flex columnGap={ 2 }>
<Text fontWeight={ 500 }>Txn</Text>
<Text variant="secondary">{ data.transactionsNum }</Text>
<Text variant="secondary">{ data.tx_count }</Text>
</Flex>
<Box>
<Text fontWeight={ 500 }>Gas used</Text>
<Flex columnGap={ 4 }>
<Text variant="secondary">{ data.gas_used.toLocaleString('en') }</Text>
<Utilization colorScheme="gray" value={ data.gas_used / data.gas_limit }/>
<GasUsedToTargetRatio used={ data.gas_used } target={ data.gas_target }/>
<Text variant="secondary">{ BigNumber(data.gas_used || 0).toFormat() }</Text>
<Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).div(BigNumber(data.gas_limit)).toNumber() }/>
<GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
</Flex>
</Box>
<Flex columnGap={ 2 }>
<Text fontWeight={ 500 }>Reward { appConfig.network.currency }</Text>
<Text variant="secondary">{ (data.reward.static + data.reward.tx_fee - data.burnt_fees).toLocaleString('en', { maximumFractionDigits: 5 }) }</Text>
<Text variant="secondary">{ totalReward.div(WEI).toFixed() }</Text>
</Flex>
<Flex>
<Text fontWeight={ 500 }>Burnt fees</Text>
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500" ml={ 2 }/>
<Text variant="secondary" ml={ 1 }>{ data.burnt_fees.toLocaleString('en', { maximumFractionDigits: 6 }) }</Text>
<Utilization ml={ 4 } value={ data.burnt_fees / data.reward.tx_fee }/>
<Text variant="secondary" ml={ 1 }>{ burntFees.div(WEI).toFixed() }</Text>
<Utilization ml={ 4 } value={ burntFees.div(txFees).toNumber() }/>
</Flex>
</AccountListItemMobile>
);
......
ui/blocks/BlocksSkeletonMobile.tsx 0 → 100644
View file @ 30131a3b
import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
const BlocksSkeletonMobile = () => {
const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
return (
<Box>
{ Array.from(Array(2)).map((item, index) => (
<Flex
key={ index }
rowGap={ 3 }
flexDirection="column"
paddingY={ 6 }
borderTopWidth="1px"
borderColor={ borderColor }
_last={{
borderBottomWidth: '1px',
}}
>
<Flex h={ 6 } justifyContent="space-between">
<Skeleton w="75px"/>
<Skeleton w="90px"/>
</Flex>
<Skeleton h={ 6 } w="130px"/>
<Skeleton h={ 6 } w="180px"/>
<Skeleton h={ 6 } w="60px"/>
<Skeleton h={ 6 } w="100%"/>
<Skeleton h={ 6 } w="170px"/>
<Skeleton h={ 6 } w="100%"/>
</Flex>
)) }
</Box>
);
};
export default BlocksSkeletonMobile;
ui/blocks/BlocksTable.tsx
View file @ 30131a3b
......@@ -2,27 +2,32 @@ import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
import appConfig from 'configs/app/config';
import React from 'react';
import { blocks } from 'data/blocks';
import type { Block } from 'types/api/block';
import BlocksTableItem from 'ui/blocks/BlocksTableItem';
const BlocksTable = () => {
interface Props {
data: Array<Block>;
}
const BlocksTable = ({ data }: Props) => {
return (
<TableContainer width="100%" mt={ 8 }>
<Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
<Thead>
<Tr>
<Th width="124px">Block</Th>
<Th width="112px">Size</Th>
<Th width="144px">Miner</Th>
<Th width="125px">Block</Th>
<Th width="120px">Size</Th>
<Th width="21%" minW="144px">Miner</Th>
<Th width="64px" isNumeric>Txn</Th>
<Th width="40%">Gas used</Th>
<Th width="30%">Reward { appConfig.network.currency }</Th>
<Th width="30%">Burnt fees { appConfig.network.currency }</Th>
<Th width="35%">Gas used</Th>
<Th width="22%">Reward { appConfig.network.currency }</Th>
<Th width="22%">Burnt fees { appConfig.network.currency }</Th>
</Tr>
</Thead>
<Tbody>
{ blocks.map((item, index) => <BlocksTableItem key={ item.height } data={ item } isPending={ index === 0 }/>) }
{ data.map((item) => <BlocksTableItem key={ item.height } data={ item }/>) }
</Tbody>
</Table>
</TableContainer>
......
ui/blocks/BlocksTableItem.tsx
View file @ 30131a3b
import { Tr, Td, Text, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import type ArrayElement from 'types/utils/ArrayElement';
import type { Block } from 'types/api/block';
import type { blocks } from 'data/blocks';
import flameIcon from 'icons/flame.svg';
import getBlockReward from 'lib/block/getBlockReward';
import { WEI } from 'lib/consts';
import dayjs from 'lib/date/dayjs';
import link from 'lib/link/link';
import AddressLink from 'ui/shared/address/AddressLink';
......@@ -12,46 +14,50 @@ import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import Utilization from 'ui/shared/Utilization';
interface Props {
data: ArrayElement<typeof blocks>;
data: Block;
isPending?: boolean;
}
const BlocksTableItem = ({ data, isPending }: Props) => {
const { totalReward, burntFees, txFees } = getBlockReward(data);
return (
<Tr>
<Td fontSize="sm">
<Flex columnGap={ 2 } alignItems="center">
{ isPending && <Spinner size="sm"/> }
<Link
fontWeight={ 600 }
href={ link('block', { id: String(data.height) }) }
>
{ data.height }
</Link>
{ isPending && <Spinner size="sm" flexShrink={ 0 }/> }
<Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations">
<Link
fontWeight={ 600 }
href={ link('block', { id: String(data.height) }) }
>
{ data.height }
</Link>
</Tooltip>
</Flex>
<Text variant="secondary" mt={ 2 } fontWeight={ 400 }>{ dayjs(data.timestamp).fromNow() }</Text>
</Td>
<Td fontSize="sm">{ data.size.toLocaleString('en') } bytes</Td>
<Td fontSize="sm">
<AddressLink alias={ data.miner?.name } hash={ data.miner.address } truncation="constant"/>
<AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant" display="inline-flex" maxW="100%"/>
</Td>
<Td isNumeric fontSize="sm">{ data.transactionsNum }</Td>
<Td isNumeric fontSize="sm">{ data.tx_count }</Td>
<Td fontSize="sm">
<Box>{ data.gas_used.toLocaleString('en') }</Box>
<Box>{ BigNumber(data.gas_used || 0).toFormat() }</Box>
<Flex mt={ 2 }>
<Utilization colorScheme="gray" value={ data.gas_used / data.gas_limit }/>
<GasUsedToTargetRatio ml={ 2 } used={ data.gas_used } target={ data.gas_target }/>
<Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
<GasUsedToTargetRatio ml={ 2 } value={ data.gas_target_percentage || undefined }/>
</Flex>
</Td>
<Td fontSize="sm">{ (data.reward.static + data.reward.tx_fee - data.burnt_fees).toLocaleString('en', { maximumFractionDigits: 5 }) }</Td>
<Td fontSize="sm">{ totalReward.dividedBy(WEI).toFixed() }</Td>
<Td fontSize="sm">
<Flex alignItems="center" columnGap={ 1 }>
<Icon as={ flameIcon } boxSize={ 5 } color={ useColorModeValue('gray.500', 'inherit') }/>
{ data.burnt_fees.toLocaleString('en', { maximumFractionDigits: 6 }) }
{ burntFees.dividedBy(WEI).toFixed(8) }
</Flex>
<Tooltip label="Burnt fees / Txn fees * 100%">
<Box>
<Utilization mt={ 2 } value={ data.burnt_fees / data.reward.tx_fee }/>
<Box w="min-content">
<Utilization mt={ 2 } value={ burntFees.div(txFees).toNumber() }/>
</Box>
</Tooltip>
</Td>
......
ui/pages/Blocks.tsx
View file @ 30131a3b
......@@ -9,8 +9,8 @@ import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
const TABS: Array<RoutedTab> = [
{ id: 'blocks', title: 'All', component: <BlocksContent/> },
{ id: 'reorgs', title: 'Forked', component: <BlocksContent/> },
{ id: 'uncles', title: 'Uncles', component: <BlocksContent/> },
{ id: 'reorgs', title: 'Forked', component: <BlocksContent type="reorg"/> },
{ id: 'uncles', title: 'Uncles', component: <BlocksContent type="uncle"/> },
];
const BlocksPageContent = () => {
......
ui/shared/Utilization.tsx
View file @ 30131a3b
import { Box, Flex, Text, chakra, useColorModeValue } from '@chakra-ui/react';
import clamp from 'lodash/clamp';
import React from 'react';
interface Props {
......@@ -10,7 +11,7 @@ interface Props {
const WIDTH = 50;
const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
const valueString = (value * 100).toLocaleString('en', { maximumFractionDigits: 2 }) + '%';
const valueString = (clamp(value * 100, 0, 100)).toLocaleString('en', { maximumFractionDigits: 2 }) + '%';
const colorGrayScheme = useColorModeValue('gray.500', 'gray.500');
const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
......
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