Skip to content

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

Merge pull request #194 from blockscout/blocks-page 

blocks page
parents 836ee1b3 bb7529a8
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 11 deletions
data/blocks.ts 0 → 100644
View file @ ce672c4d
/* 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,
},
];
lib/date/dayjs.ts
View file @ ce672c4d
......@@ -5,8 +5,6 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
import relativeTime from 'dayjs/plugin/relativeTime';
import updateLocale from 'dayjs/plugin/updateLocale';
dayjs.locale('en');
const relativeTimeConfig = {
thresholds: [
{ l: 's', r: 1 },
......@@ -51,4 +49,27 @@ dayjs.updateLocale('en', {
},
});
dayjs.locale('en-short', {
name: 'en-short',
relativeTime: {
s: '1s',
future: 'in %s',
past: '%s ago',
m: '1m',
mm: '%dm',
h: '1h',
hh: '%dh',
d: '1d',
dd: '%dd',
M: '1mo',
MM: '%dmo',
y: '1y',
yy: '%dy',
// have to trick typescript 🎩 🐇
...{ ss: '%ds' },
},
});
dayjs.locale('en');
export default dayjs;
lib/hooks/useNavItems.tsx
View file @ ce672c4d
......@@ -20,7 +20,7 @@ export default function useNavItems() {
return React.useMemo(() => {
const mainNavItems = [
{ text: 'Blocks', url: link('blocks'), icon: blocksIcon, isActive: currentRoute === 'blocks' },
{ text: 'Blocks', url: link('blocks'), icon: blocksIcon, isActive: currentRoute.startsWith('block') },
{ text: 'Transactions', url: link('txs_validated'), icon: transactionsIcon, isActive: currentRoute.startsWith('tx') },
{ text: 'Tokens', url: link('tokens'), icon: tokensIcon, isActive: currentRoute === 'tokens' },
{ text: 'Apps', url: link('apps'), icon: appsIcon, isActive: currentRoute === 'apps' },
......
lib/link/routes.ts
View file @ ce672c4d
......@@ -74,6 +74,14 @@ export const ROUTES = {
pattern: `${ BASE_PATH }/blocks`,
crossNetworkNavigation: true,
},
blocks_uncles: {
pattern: `${ BASE_PATH }/uncles`,
crossNetworkNavigation: true,
},
blocks_reorgs: {
pattern: `${ BASE_PATH }/reorgs`,
crossNetworkNavigation: true,
},
block_index: {
pattern: `${ BASE_PATH }/block/[id]`,
},
......
lib/next/blocks/BlocksNextPage.tsx 0 → 100644
View file @ ce672c4d
import type { NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import type { PageParams } from './types';
import Blocks from 'ui/pages/Blocks';
import type { Props as BlocksProps } from 'ui/pages/Blocks';
import getSeo from './getSeo';
type Props = {
pageParams: PageParams;
tab: BlocksProps['tab'];
}
const BlocksNextPage: NextPage<Props> = ({ pageParams, tab }: Props) => {
const { title } = getSeo(pageParams);
return (
<>
<Head>
<title>{ title }</title>
</Head>
<Blocks tab={ tab }/>
</>
);
};
export default BlocksNextPage;
lib/next/blocks/getSeo.ts 0 → 100644
View file @ ce672c4d
import type { PageParams } from './types';
import getNetworkTitle from 'lib/networks/getNetworkTitle';
export default function getSeo(params?: PageParams) {
const networkTitle = getNetworkTitle(params || {});
return {
title: params ? `${ networkTitle } - BlockScout` : '',
};
}
lib/next/blocks/types.ts 0 → 100644
View file @ ce672c4d
export type PageParams = {
network_type: string;
network_sub_type: string;
}
pages/[network_type]/[network_sub_type]/blocks.tsx 0 → 100644
View file @ ce672c4d
import type { NextPage } from 'next';
import React from 'react';
import type { PageParams } from 'lib/next/tx/types';
import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
type Props = {
pageParams: PageParams;
}
const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
return (
<BlocksNextPage tab="blocks" pageParams={ pageParams }/>
);
};
export default BlockPage;
export { getStaticPaths } from 'lib/next/block/getStaticPaths';
export { getStaticProps } from 'lib/next/getStaticProps';
pages/[network_type]/[network_sub_type]/reorgs.tsx 0 → 100644
View file @ ce672c4d
import type { NextPage } from 'next';
import React from 'react';
import type { PageParams } from 'lib/next/tx/types';
import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
type Props = {
pageParams: PageParams;
}
const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
return (
<BlocksNextPage tab="blocks_reorgs" pageParams={ pageParams }/>
);
};
export default BlockPage;
export { getStaticPaths } from 'lib/next/block/getStaticPaths';
export { getStaticProps } from 'lib/next/getStaticProps';
pages/[network_type]/[network_sub_type]/uncles.tsx 0 → 100644
View file @ ce672c4d
import type { NextPage } from 'next';
import React from 'react';
import type { PageParams } from 'lib/next/tx/types';
import BlocksNextPage from 'lib/next/blocks/BlocksNextPage';
type Props = {
pageParams: PageParams;
}
const BlockPage: NextPage<Props> = ({ pageParams }: Props) => {
return (
<BlocksNextPage tab="blocks_uncles" pageParams={ pageParams }/>
);
};
export default BlockPage;
export { getStaticPaths } from 'lib/next/block/getStaticPaths';
export { getStaticProps } from 'lib/next/getStaticProps';
ui/block/BlockDetails.tsx
View file @ ce672c4d
import { Grid, GridItem, Text, Icon, Link, Stat, StatArrow, Box, Tooltip } from '@chakra-ui/react';
import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { scroller, Element } from 'react-scroll';
......@@ -13,6 +13,7 @@ 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 GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import PrevNext from 'ui/shared/PrevNext';
import TextSeparator from 'ui/shared/TextSeparator';
......@@ -32,8 +33,6 @@ const BlockDetails = () => {
});
}, []);
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 (
......@@ -109,10 +108,7 @@ const BlockDetails = () => {
>
<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>
<GasUsedToTargetRatio used={ block.gas_used } target={ block.gas_target }/>
</DetailsInfoItem>
<DetailsInfoItem
title="Gas limit"
......@@ -133,6 +129,11 @@ const BlockDetails = () => {
>
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
<Text ml={ 1 }>{ block.burnt_fees.toLocaleString('en', { minimumFractionDigits: 18 }) } { network?.currency }</Text>
<Tooltip label="Burnt fees / Txn fees * 100%">
<Box>
<Utilization ml={ 4 } value={ block.burnt_fees / block.reward.tx_fee }/>
</Box>
</Tooltip>
</DetailsInfoItem>
<DetailsInfoItem
title="Extra data"
......
ui/blocks/BlocksContent.tsx 0 → 100644
View file @ ce672c4d
import { Box, Text, Show } from '@chakra-ui/react';
import React from 'react';
import BlocksList from 'ui/blocks/BlocksList';
import BlocksTable from 'ui/blocks/BlocksTable';
import Pagination from 'ui/shared/Pagination';
const BlocksContent = () => {
return (
<>
<Text>Total of 15,044,883 blocks</Text>
<Show below="lg"><BlocksList/></Show>
<Show above="lg"><BlocksTable/></Show>
<Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
<Pagination currentPage={ 1 }/>
</Box>
</>
);
};
export default BlocksContent;
ui/blocks/BlocksList.tsx 0 → 100644
View file @ ce672c4d
import { Box } from '@chakra-ui/react';
import React from 'react';
import { blocks } from 'data/blocks';
import BlocksListItem from 'ui/blocks/BlocksListItem';
const BlocksList = () => {
return (
<Box mt={ 8 }>
{ blocks.map((item, index) => <BlocksListItem key={ item.height } data={ item } isPending={ index === 0 }/>) }
</Box>
);
};
export default BlocksList;
ui/blocks/BlocksListItem.tsx 0 → 100644
View file @ ce672c4d
import { Flex, Link, Spinner, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import type ArrayElement from 'types/utils/ArrayElement';
import type { blocks } from 'data/blocks';
import flameIcon from 'icons/flame.svg';
import dayjs from 'lib/date/dayjs';
import useNetwork from 'lib/hooks/useNetwork';
import useLink from 'lib/link/useLink';
import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
import AddressLink from 'ui/shared/address/AddressLink';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import Utilization from 'ui/shared/Utilization';
interface Props {
data: ArrayElement<typeof blocks>;
isPending?: boolean;
}
const BlocksListItem = ({ data, isPending }: Props) => {
const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
const link = useLink();
const network = useNetwork();
return (
<AccountListItemMobile rowGap={ 3 }>
<Flex justifyContent="space-between" w="100%">
<Flex columnGap={ 2 } alignItems="center">
{ isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor }/> }
<Link
fontWeight={ 600 }
href={ link('block_index', { id: String(data.height) }) }
>
{ data.height }
</Link>
</Flex>
<Text variant="secondary"fontWeight={ 400 }>{ dayjs(data.timestamp).locale('en-short').fromNow() }</Text>
</Flex>
<Flex columnGap={ 2 }>
<Text fontWeight={ 500 }>Size</Text>
<Text variant="secondary">{ data.size.toLocaleString('en') } bytes</Text>
</Flex>
<Flex columnGap={ 2 }>
<Text fontWeight={ 500 }>Miner</Text>
<AddressLink alias={ data.miner?.name } hash={ data.miner.address } truncation="constant"/>
</Flex>
<Flex columnGap={ 2 }>
<Text fontWeight={ 500 }>Txn</Text>
<Text variant="secondary">{ data.transactionsNum }</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 }/>
</Flex>
</Box>
<Flex columnGap={ 2 }>
<Text fontWeight={ 500 }>Reward { network?.currency }</Text>
<Text variant="secondary">{ (data.reward.static + data.reward.tx_fee - data.burnt_fees).toLocaleString('en', { maximumFractionDigits: 5 }) }</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 }/>
</Flex>
</AccountListItemMobile>
);
};
export default BlocksListItem;
ui/blocks/BlocksTable.tsx 0 → 100644
View file @ ce672c4d
import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
import React from 'react';
import { blocks } from 'data/blocks';
import useNetwork from 'lib/hooks/useNetwork';
import BlocksTableItem from 'ui/blocks/BlocksTableItem';
const BlocksTable = () => {
const network = useNetwork();
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="64px" isNumeric>Txn</Th>
<Th width="40%">Gas used</Th>
<Th width="30%">Reward { network?.currency }</Th>
<Th width="30%">Burnt fees { network?.currency }</Th>
</Tr>
</Thead>
<Tbody>
{ blocks.map((item, index) => <BlocksTableItem key={ item.height } data={ item } isPending={ index === 0 }/>) }
</Tbody>
</Table>
</TableContainer>
);
};
export default BlocksTable;
ui/blocks/BlocksTableItem.tsx 0 → 100644
View file @ ce672c4d
import { Tr, Td, Text, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import type ArrayElement from 'types/utils/ArrayElement';
import type { blocks } from 'data/blocks';
import flameIcon from 'icons/flame.svg';
import dayjs from 'lib/date/dayjs';
import useLink from 'lib/link/useLink';
import AddressLink from 'ui/shared/address/AddressLink';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import Utilization from 'ui/shared/Utilization';
interface Props {
data: ArrayElement<typeof blocks>;
isPending?: boolean;
}
const BlocksTableItem = ({ data, isPending }: Props) => {
const link = useLink();
const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
return (
<Tr>
<Td fontSize="sm">
<Flex columnGap={ 2 } alignItems="center">
{ isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor }/> }
<Link
fontWeight={ 600 }
href={ link('block_index', { id: String(data.height) }) }
>
{ data.height }
</Link>
</Flex>
<Text variant="secondary" mt={ 2 } fontWeight={ 400 }>{ dayjs(data.timestamp).locale('en-short').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"/>
</Td>
<Td isNumeric fontSize="sm">{ data.transactionsNum }</Td>
<Td fontSize="sm">
<Box>{ data.gas_used.toLocaleString('en') }</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 }/>
</Flex>
</Td>
<Td fontSize="sm">{ (data.reward.static + data.reward.tx_fee - data.burnt_fees).toLocaleString('en', { maximumFractionDigits: 5 }) }</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 }) }
</Flex>
<Tooltip label="Burnt fees / Txn fees * 100%">
<Box>
<Utilization mt={ 2 } value={ data.burnt_fees / data.reward.tx_fee }/>
</Box>
</Tooltip>
</Td>
</Tr>
);
};
export default React.memo(BlocksTableItem);
ui/pages/Blocks.tsx 0 → 100644
View file @ ce672c4d
import React from 'react';
import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
import BlocksContent from 'ui/blocks/BlocksContent';
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: 'blocks', title: 'All', component: <BlocksContent/> },
{ routeName: 'blocks_reorgs', title: 'Forked', component: <BlocksContent/> },
{ routeName: 'blocks_uncles', title: 'Uncles', component: <BlocksContent/> },
];
export interface Props {
tab: RoutedTab['routeName'];
}
const BlocksPageContent = ({ tab }: Props) => {
return (
<Page>
<PageTitle text="Blocks"/>
<RoutedTabs
tabs={ TABS }
defaultActiveTab={ tab }
/>
</Page>
);
};
export default BlocksPageContent;
ui/shared/GasUsedToTargetRatio.tsx 0 → 100644
View file @ ce672c4d
import { Stat, StatArrow, Text, chakra } from '@chakra-ui/react';
import React from 'react';
interface Props {
used: number;
target: number;
className?: string;
}
const GasUsedToTargetRatio = ({ used, target, className }: Props) => {
const percentage = (used / target - 1) * 100;
return (
<Stat className={ className }>
<StatArrow type={ percentage >= 0 ? 'increase' : 'decrease' }/>
<Text as="span" color={ percentage >= 0 ? 'green.500' : 'red.500' } fontWeight={ 600 }>
{ Math.abs(percentage).toLocaleString('en', { maximumFractionDigits: 2 }) } %
</Text>
</Stat>
);
};
export default React.memo(chakra(GasUsedToTargetRatio));
ui/shared/Utilization.tsx
View file @ ce672c4d
......@@ -10,7 +10,7 @@ interface Props {
const WIDTH = 50;
const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
const valueString = (value * 100).toFixed(2) + '%';
const valueString = (value * 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