Skip to content

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

genesis block

parent d301754e
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 54 deletions
lib/block/getBlockReward.ts
View file @ c1829e8d
...@@ -5,7 +5,13 @@ import type { Block } from 'types/api/block'; ...@@ -5,7 +5,13 @@ import type { Block } from 'types/api/block';
export default function getBlockReward(block: Block) { export default function getBlockReward(block: Block) {
const txFees = utils.parseUnits(block.tx_fees || '0', 'wei'); const txFees = utils.parseUnits(block.tx_fees || '0', 'wei');
const burntFees = utils.parseUnits(String(block.burnt_fees || '0'), 'wei'); const burntFees = utils.parseUnits(String(block.burnt_fees || '0'), 'wei');
const totalReward = utils.parseUnits(String(block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward || '0'), 'wei'); const totalReward = utils.parseUnits(
String(
block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward ||
'0',
),
'wei',
);
const staticReward = totalReward.sub(txFees).add(burntFees); const staticReward = totalReward.sub(txFees).add(burntFees);
return { return {
......
ui/block/BlockDetails.tsx
View file @ c1829e8d
import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, Alert } from '@chakra-ui/react'; import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, Alert } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { utils } from 'ethers'; import { utils, constants } from 'ethers';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import { scroller, Element } from 'react-scroll'; import { scroller, Element } from 'react-scroll';
...@@ -75,12 +75,13 @@ const BlockDetails = () => { ...@@ -75,12 +75,13 @@ const BlockDetails = () => {
hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain." hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain."
> >
{ data.height } { data.height }
{ data.height === 0 && <Text whiteSpace="pre"> - Genesis Block</Text> }
<PrevNext <PrevNext
ml={ 6 } ml={ 6 }
onClick={ handlePrevNextClick } onClick={ handlePrevNextClick }
prevLabel="View previous block" prevLabel="View previous block"
nextLabel="View next block" nextLabel="View next block"
isPrevDisabled={ router.query.id === '0' } isPrevDisabled={ data.height === 0 }
/> />
</DetailsInfoItem> </DetailsInfoItem>
<DetailsInfoItem <DetailsInfoItem
...@@ -116,29 +117,41 @@ const BlockDetails = () => { ...@@ -116,29 +117,41 @@ const BlockDetails = () => {
{ /* api doesn't return the block processing time yet */ } { /* api doesn't return the block processing time yet */ }
{ /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ } { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
</DetailsInfoItem> </DetailsInfoItem>
<DetailsInfoItem { !totalReward.eq(constants.Zero) && (
title="Block reward" <DetailsInfoItem
hint={ title="Block reward"
`For each block, the miner is rewarded with a finite amount of ${ network?.currency || 'native token' } 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.` on top of the fees paid for all transactions in the block.`
} }
columnGap={ 1 } columnGap={ 1 }
> >
<Text>{ utils.formatUnits(totalReward) } { network?.currency }</Text> <Text>{ utils.formatUnits(totalReward) } { network?.currency }</Text>
<Text variant="secondary" whiteSpace="break-spaces">( { (!txFees.eq(constants.Zero) || !burntFees.eq(constants.Zero)) && (
<Tooltip label="Static block reward"> <Text variant="secondary" whiteSpace="break-spaces">(
<span>{ utils.formatUnits(staticReward) }</span> <Tooltip label="Static block reward">
</Tooltip> <span>{ utils.formatUnits(staticReward) }</span>
{ space }+{ space } </Tooltip>
<Tooltip label="Txn fees"> { !txFees.eq(constants.Zero) && (
<span>{ utils.formatUnits(txFees) }</span> <>
</Tooltip> { space }+{ space }
{ space }-{ space } <Tooltip label="Txn fees">
<Tooltip label="Burnt fees"> <span>{ utils.formatUnits(txFees) }</span>
<span>{ utils.formatUnits(burntFees) }</span> </Tooltip>
</Tooltip> </>
) }
{ !burntFees.eq(constants.Zero) && (
<>
{ space }-{ space }
<Tooltip label="Burnt fees">
<span>{ utils.formatUnits(burntFees) }</span>
</Tooltip>
</>
) }
)</Text> )</Text>
</DetailsInfoItem> ) }
</DetailsInfoItem>
) }
{ sectionGap } { sectionGap }
...@@ -172,28 +185,26 @@ const BlockDetails = () => { ...@@ -172,28 +185,26 @@ const BlockDetails = () => {
</Text> </Text>
</DetailsInfoItem> </DetailsInfoItem>
) } ) }
{ data.burnt_fees && ( <DetailsInfoItem
<DetailsInfoItem title="Burnt fees"
title="Burnt fees" hint={
hint={ `Amount of ${ network?.currency || 'native token' } burned from transactions included in the block.
`Amount of ${ network?.currency || 'native token' } burned from transactions included in the block.
Equals Block Base Fee per Gas * Gas Used.` Equals Block Base Fee per Gas * Gas Used.`
} }
> >
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/> <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
<Text ml={ 1 }>{ utils.formatUnits(burntFees) } { network?.currency }</Text> <Text ml={ 1 }>{ utils.formatUnits(burntFees) } { network?.currency }</Text>
{ data.tx_fees && ( { !txFees.eq(constants.Zero) && (
<Tooltip label="Burnt fees / Txn fees * 100%"> <Tooltip label="Burnt fees / Txn fees * 100%">
<Box> <Box>
<Utilization <Utilization
ml={ 4 } ml={ 4 }
value={ burntFees.mul(10_000).div(txFees).toNumber() / 10_000 } value={ burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }
/> />
</Box> </Box>
</Tooltip> </Tooltip>
) } ) }
</DetailsInfoItem> </DetailsInfoItem>
) }
{ /* api doesn't support extra data yet */ } { /* api doesn't support extra data yet */ }
{ /* <DetailsInfoItem { /* <DetailsInfoItem
title="Extra data" title="Extra data"
...@@ -272,15 +283,17 @@ const BlockDetails = () => { ...@@ -272,15 +283,17 @@ const BlockDetails = () => {
> >
{ data.nonce } { data.nonce }
</DetailsInfoItem> </DetailsInfoItem>
{ data.rewards?.map(({ type, reward }) => ( { data.rewards
<DetailsInfoItem ?.filter(({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward')
key={ type } .map(({ type, reward }) => (
title={ type } <DetailsInfoItem
hint="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees." key={ type }
> title={ type }
{ utils.formatUnits(utils.parseUnits(String(reward), 'wei')) } { network?.currency } hint="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
</DetailsInfoItem> >
)) } { utils.formatUnits(utils.parseUnits(String(reward), 'wei')) } { network?.currency }
</DetailsInfoItem>
)) }
</> </>
) } ) }
</Grid> </Grid>
......
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