Skip to content

F
frontend
Commit 836ee1b3 authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

Merge pull request #190 from blockscout/block-details-tab 

block page
parents 5969ae25 fcfc5256
Hide whitespace changes
Inline Side-by-side
Showing with 413 additions and 16 deletions
data/block.ts 0 → 100644
View file @ 836ee1b3
/* 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',
};
lib/link/routes.ts
View file @ 836ee1b3
...@@ -74,9 +74,12 @@ export const ROUTES = { ...@@ -74,9 +74,12 @@ export const ROUTES = {
pattern: `${ BASE_PATH }/blocks`, pattern: `${ BASE_PATH }/blocks`,
crossNetworkNavigation: true, crossNetworkNavigation: true,
}, },
block: { block_index: {
pattern: `${ BASE_PATH }/block/[id]`, pattern: `${ BASE_PATH }/block/[id]`,
}, },
block_txs: {
pattern: `${ BASE_PATH }/block/[id]/transactions`,
},
// TOKENS // TOKENS
tokens: { tokens: {
......
lib/next/block/BlockNextPage.tsx 0 → 100644
View file @ 836ee1b3
import type { NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import type { PageParams } from './types';
import Block from 'ui/pages/Block';
import type { Props as BlockProps } from 'ui/pages/Block';
import getSeo from './getSeo';
type Props = {
pageParams: PageParams;
tab: BlockProps['tab'];
}
const BlockNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
const { title, description } = getSeo(pageParams);
return (
<>
<Head>
<title>{ title }</title>
<meta name="description" content={ description }/>
</Head>
<Block tab={ tab }/>
</>
);
};
export default BlockNextPage;
lib/next/block/getSeo.ts 0 → 100644
View file @ 836ee1b3
import type { PageParams } from './types';
import getNetworkTitle from 'lib/networks/getNetworkTitle';
export default function getSeo(params?: PageParams) {
const networkTitle = getNetworkTitle(params || {});
return {
title: params ? `Block ${ params.id } - ${ networkTitle }` : '',
description: params ? `View the transactions, token transfers, and uncles for block number ${ params.id }` : '',
};
}
lib/next/block/getStaticPaths.ts 0 → 100644
View file @ 836ee1b3
import type { GetStaticPaths } from 'next';
export const getStaticPaths: GetStaticPaths = async() => {
return { paths: [], fallback: true };
};
lib/next/block/types.ts 0 → 100644
View file @ 836ee1b3
export type PageParams = {
network_type: string;
network_sub_type: string;
id: string;
}
lib/next/tx/TransactionNextPage.tsx
View file @ 836ee1b3
...@@ -15,10 +15,13 @@ type Props = { ...@@ -15,10 +15,13 @@ type Props = {
} }
const TransactionNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => { const TransactionNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
const { title } = getSeo(pageParams); const { title, description } = getSeo(pageParams);
return ( return (
<> <>
<Head><title>{ title }</title></Head> <Head>
<title>{ title }</title>
<meta name="description" content={ description }/>
</Head>
<Transaction tab={ tab }/> <Transaction tab={ tab }/>
</> </>
); );
......
pages/[network_type]/[network_sub_type]/block/[id]/index.tsx 0 → 100644
View file @ 836ee1b3
import type { NextPage } from 'next';
import React from 'react';
import type { PageParams } from 'lib/next/tx/types';
import BlockNextPage from 'lib/next/block/BlockNextPage';
type Props = {
pageParams: PageParams;
}
const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
return (
<BlockNextPage tab="block_index" pageParams={ pageParams }/>
);
};
export default BlockPage;
export { getStaticPaths } from 'lib/next/block/getStaticPaths';
export { getStaticProps } from 'lib/next/getStaticProps';
pages/[network_type]/[network_sub_type]/block/[id]/transactions.tsx 0 → 100644
View file @ 836ee1b3
import type { NextPage } from 'next';
import React from 'react';
import type { PageParams } from 'lib/next/tx/types';
import BlockNextPage from 'lib/next/block/BlockNextPage';
type Props = {
pageParams: PageParams;
}
const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
return (
<BlockNextPage tab="block_txs" pageParams={ pageParams }/>
);
};
export default BlockPage;
export { getStaticPaths } from 'lib/next/block/getStaticPaths';
export { getStaticProps } from 'lib/next/getStaticProps';
ui/block/BlockDetails.tsx 0 → 100644
View file @ 836ee1b3
import { Grid, GridItem, Text, Icon, Link, Stat, StatArrow, Box, Tooltip } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { scroller, Element } from 'react-scroll';
import { block } from 'data/block';
import clockIcon from 'icons/clock.svg';
import flameIcon from 'icons/flame.svg';
import dayjs from 'lib/date/dayjs';
import useNetwork from 'lib/hooks/useNetwork';
import { space } from 'lib/html-entities';
import useLink from 'lib/link/useLink';
import AddressLink from 'ui/shared/address/AddressLink';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import PrevNext from 'ui/shared/PrevNext';
import TextSeparator from 'ui/shared/TextSeparator';
import Utilization from 'ui/shared/Utilization';
const BlockDetails = () => {
const [ isExpanded, setIsExpanded ] = React.useState(false);
const link = useLink();
const router = useRouter();
const network = useNetwork();
const handleCutClick = React.useCallback(() => {
setIsExpanded((flag) => !flag);
scroller.scrollTo('BlockDetails__cutLink', {
duration: 500,
smooth: true,
});
}, []);
const gasUsedPercentage = Math.round((block.gas_used / block.gas_target - 1) * 100);
const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
return (
<Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden">
<DetailsInfoItem
title="Block height"
hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain."
>
{ block.height }
<PrevNext ml={ 6 }/>
</DetailsInfoItem>
<DetailsInfoItem
title="Size"
hint="Size of the block in bytes."
>
{ block.size.toLocaleString('en') }
</DetailsInfoItem>
<DetailsInfoItem
title="Timestamp"
hint="Date & time at which block was produced."
>
<Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
<Text ml={ 1 }>{ dayjs(block.timestamp).fromNow() }</Text>
<TextSeparator/>
<Text whiteSpace="normal">{ dayjs(block.timestamp).format('LLLL') }</Text>
</DetailsInfoItem>
<DetailsInfoItem
title="Transactions"
hint="The number of transactions in the block."
>
<Link href={ link('block_txs', { id: router.query.id }) }>
{ block.transactionsNum } transactions
</Link>
</DetailsInfoItem>
<DetailsInfoItem
title="Mined by"
hint="A block producer who successfully included the block onto the blockchain."
columnGap={ 1 }
>
<AddressLink hash={ block.miner.address }/>
{ block.miner.name && <Text>(Miner: { block.miner.name })</Text> }
<Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text>
</DetailsInfoItem>
<DetailsInfoItem
title="Block reward"
hint={
`For each block, the miner is rewarded with a finite amount of ${ network?.currency || 'native token' }
on top of the fees paid for all transactions in the block.`
}
columnGap={ 1 }
>
<Text>{ block.reward.static + block.reward.tx_fee - block.burnt_fees }</Text>
<Text variant="secondary" whiteSpace="break-spaces">(
<Tooltip label="Static block reward">
<span>{ block.reward.static }</span>
</Tooltip>
{ space }+{ space }
<Tooltip label="Txn fees">
<span>{ block.reward.tx_fee }</span>
</Tooltip>
{ space }-{ space }
<Tooltip label="Burnt fees">
<span>{ block.burnt_fees }</span>
</Tooltip>
)</Text>
</DetailsInfoItem>
{ sectionGap }
<DetailsInfoItem
title="Gas used"
hint="The total gas amount used in the block and its percentage of gas filled in the block."
>
<Text>{ block.gas_used.toLocaleString('en') }</Text>
<Utilization ml={ 4 } mr={ 5 } colorScheme="gray" value={ block.gas_used / block.gas_limit }/>
<Stat>
<StatArrow ml={ 1 } type={ gasUsedPercentage >= 0 ? 'increase' : 'decrease' }/>
<Text as="span" color={ gasUsedPercentage >= 0 ? 'green.500' : 'red.500' } fontWeight={ 600 }>{ Math.abs(gasUsedPercentage) } % Gas Target</Text>
</Stat>
</DetailsInfoItem>
<DetailsInfoItem
title="Gas limit"
hint="Total gas limit provided by all transactions in the block."
>
<Text>{ block.gas_limit.toLocaleString('en') }</Text>
</DetailsInfoItem>
<DetailsInfoItem
title="Base fee per gas"
hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion."
>
<Text>{ (block.base_fee_per_gas / 10 ** 9).toLocaleString('en', { minimumFractionDigits: 18 }) } { network?.currency } </Text>
<Text variant="secondary" whiteSpace="pre">{ space }({ block.base_fee_per_gas.toLocaleString('en', { minimumFractionDigits: 9 }) } Gwei)</Text>
</DetailsInfoItem>
<DetailsInfoItem
title="Burnt fees"
hint={ `Amount of ${ network?.currency || 'native token' } burned from transactions included in the block. Equals Block Base Fee per Gas * Gas Used.` }
>
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
<Text ml={ 1 }>{ block.burnt_fees.toLocaleString('en', { minimumFractionDigits: 18 }) } { network?.currency }</Text>
</DetailsInfoItem>
<DetailsInfoItem
title="Extra data"
hint="Any data that can be included by the miner in the block."
>
<Text whiteSpace="pre">{ block.data.utf } </Text>
<Text variant="secondary">(Hex: { block.data.hex })</Text>
</DetailsInfoItem>
{ /* CUT */ }
<GridItem colSpan={{ base: undefined, lg: 2 }}>
<Element name="BlockDetails__cutLink">
<Link
mt={ 6 }
display="inline-block"
fontSize="sm"
textDecorationLine="underline"
textDecorationStyle="dashed"
onClick={ handleCutClick }
>
{ isExpanded ? 'Hide details' : 'View details' }
</Link>
</Element>
</GridItem>
{ /* ADDITIONAL INFO */ }
{ isExpanded && (
<>
{ sectionGap }
<DetailsInfoItem
title="Difficulty"
hint="Block difficulty for miner, used to calibrate block generation time."
>
{ block.difficulty }
</DetailsInfoItem>
<DetailsInfoItem
title="Total difficulty"
hint="Total difficulty of the chain until this block."
>
{ block.totalDifficulty }
</DetailsInfoItem>
{ sectionGap }
<DetailsInfoItem
title="Hash"
hint="The SHA256 hash of the block."
flexWrap="nowrap"
>
<Box overflow="hidden">
<HashStringShortenDynamic hash={ block.hash }/>
</Box>
<CopyToClipboard text={ block.hash }/>
</DetailsInfoItem>
<DetailsInfoItem
title="Parent hash"
hint="The hash of the block from which this block was generated."
flexWrap="nowrap"
>
<AddressLink hash={ block.parent_hash } type="block" id={ String(block.parent_height) }/>
<CopyToClipboard text={ block.hash }/>
</DetailsInfoItem>
<DetailsInfoItem
title="State root"
hint="The root of the state trie."
>
<Text wordBreak="break-all" whiteSpace="break-spaces">{ block.state_root }</Text>
</DetailsInfoItem>
<DetailsInfoItem
title="Nonce"
hint="Block nonce is a value used during mining to demonstrate proof of work for a block."
>
{ block.nonce }
</DetailsInfoItem>
</>
) }
</Grid>
);
};
export default BlockDetails;
ui/block/BlockTxs.tsx 0 → 100644
View file @ 836ee1b3
import React from 'react';
import TxsContent from 'ui/txs/TxsContent';
const BlockTxs = () => {
return <TxsContent showDescription={ false } showSortButton={ false }/>;
};
export default BlockTxs;
ui/pages/Block.tsx 0 → 100644
View file @ 836ee1b3
import { useRouter } from 'next/router';
import React from 'react';
import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
import BlockDetails from 'ui/block/BlockDetails';
import BlockTxs from 'ui/block/BlockTxs';
import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle';
import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
const TABS: Array<RoutedTab> = [
{ routeName: 'block_index', title: 'Details', component: <BlockDetails/> },
{ routeName: 'block_txs', title: 'Transactions', component: <BlockTxs/> },
];
export interface Props {
tab: RoutedTab['routeName'];
}
const BlockPageContent = ({ tab }: Props) => {
const router = useRouter();
return (
<Page>
<PageTitle text={ `Block #${ router.query.id || '' }` }/>
<RoutedTabs
tabs={ TABS }
defaultActiveTab={ tab }
/>
</Page>
);
};
export default BlockPageContent;
ui/shared/address/AddressLink.tsx
View file @ 836ee1b3
...@@ -23,7 +23,7 @@ const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id, ...@@ -23,7 +23,7 @@ const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id,
} else if (type === 'token') { } else if (type === 'token') {
url = link('token_index', { id: id || hash }); url = link('token_index', { id: id || hash });
} else if (type === 'block') { } else if (type === 'block') {
url = link('block', { id: id || hash }); url = link('block_index', { id: id || hash });
} else { } else {
url = link('address_index', { id: id || hash }); url = link('address_index', { id: id || hash });
} }
......
ui/txs/TxsContent.tsx
View file @ 836ee1b3
...@@ -13,10 +13,11 @@ import TxsListItem from './TxsListItem'; ...@@ -13,10 +13,11 @@ import TxsListItem from './TxsListItem';
import TxsTable from './TxsTable'; import TxsTable from './TxsTable';
type Props = { type Props = {
isPending?: boolean; showDescription?: boolean;
showSortButton?: boolean;
} }
const TxsContent = ({ isPending }: Props) => { const TxsContent = ({ showSortButton = true, showDescription = true }: Props) => {
const [ sorting, setSorting ] = useState<Sort>(); const [ sorting, setSorting ] = useState<Sort>();
const [ sortedTxs, setSortedTxs ] = useState(txs); const [ sortedTxs, setSortedTxs ] = useState(txs);
...@@ -67,7 +68,7 @@ const TxsContent = ({ isPending }: Props) => { ...@@ -67,7 +68,7 @@ const TxsContent = ({ isPending }: Props) => {
return ( return (
<> <>
{ !isPending && <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box> } { showDescription && <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box> }
<HStack mb={ 6 }> <HStack mb={ 6 }>
{ /* TODO */ } { /* TODO */ }
<FilterButton <FilterButton
...@@ -76,12 +77,14 @@ const TxsContent = ({ isPending }: Props) => { ...@@ -76,12 +77,14 @@ const TxsContent = ({ isPending }: Props) => {
onClick={ () => {} } onClick={ () => {} }
appliedFiltersNum={ 0 } appliedFiltersNum={ 0 }
/> />
<SortButton { showSortButton && (
// eslint-disable-next-line react/jsx-no-bind <SortButton
handleSort={ () => {} } // eslint-disable-next-line react/jsx-no-bind
isSortActive={ Boolean(sorting) } handleSort={ () => {} }
display={{ base: 'block', lg: 'none' }} isSortActive={ Boolean(sorting) }
/> display={{ base: 'block', lg: 'none' }}
/>
) }
<FilterInput <FilterInput
// eslint-disable-next-line react/jsx-no-bind // eslint-disable-next-line react/jsx-no-bind
onChange={ () => {} } onChange={ () => {} }
......
ui/txs/TxsListItem.tsx
View file @ 836ee1b3
...@@ -79,7 +79,7 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => { ...@@ -79,7 +79,7 @@ const TxsListItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
</Flex> </Flex>
<Box mt={ 2 }> <Box mt={ 2 }>
<Text as="span">Block </Text> <Text as="span">Block </Text>
<Link href={ link('block', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link> <Link href={ link('block_index', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
</Box> </Box>
<Flex alignItems="center" height={ 6 } mt={ 6 }> <Flex alignItems="center" height={ 6 } mt={ 6 }>
<Address width="calc((100%-40px)/2)"> <Address width="calc((100%-40px)/2)">
......
ui/txs/TxsPending.tsx
View file @ 836ee1b3
...@@ -3,7 +3,7 @@ import React from 'react'; ...@@ -3,7 +3,7 @@ import React from 'react';
import TxsContent from './TxsContent'; import TxsContent from './TxsContent';
const TxsPending = () => { const TxsPending = () => {
return <TxsContent isPending/>; return <TxsContent showDescription={ false }/>;
}; };
export default TxsPending; export default TxsPending;
ui/txs/TxsTableItem.tsx
View file @ 836ee1b3
...@@ -104,7 +104,7 @@ const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => { ...@@ -104,7 +104,7 @@ const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
</TruncatedTextTooltip> </TruncatedTextTooltip>
</Td> </Td>
<Td> <Td>
<Link href={ link('block', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link> <Link href={ link('block_index', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
</Td> </Td>
<Show above="xl"> <Show above="xl">
<Td> <Td>
......
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