Commit 78e8800a authored by tom's avatar tom

Merge branch 'main' of github.com:blockscout/frontend into short-logo

parents 2393c993 4032c901
...@@ -23,7 +23,7 @@ const BLOCK_MARGIN = 24; ...@@ -23,7 +23,7 @@ const BLOCK_MARGIN = 24;
const LatestBlocks = () => { const LatestBlocks = () => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const blocksMaxCount = isMobile ? 2 : 4; const blocksMaxCount = isMobile ? 2 : 3;
const fetch = useFetch(); const fetch = useFetch();
const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Block>>( const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Block>>(
[ QueryKeys.indexBlocks ], [ QueryKeys.indexBlocks ],
...@@ -87,7 +87,7 @@ const LatestBlocks = () => { ...@@ -87,7 +87,7 @@ const LatestBlocks = () => {
<Skeleton h="24px" w="170px" mb={{ base: 6, lg: 9 }}/> <Skeleton h="24px" w="170px" mb={{ base: 6, lg: 9 }}/>
) } ) }
{ statsQueryResult.data?.network_utilization_percentage !== undefined && ( { statsQueryResult.data?.network_utilization_percentage !== undefined && (
<Box mb={{ base: 6, lg: 9 }}> <Box mb={{ base: 6, lg: 3 }}>
<Text as="span" fontSize="sm"> <Text as="span" fontSize="sm">
Network utilization:{ nbsp } Network utilization:{ nbsp }
</Text> </Text>
...@@ -96,7 +96,7 @@ const LatestBlocks = () => { ...@@ -96,7 +96,7 @@ const LatestBlocks = () => {
</Text> </Text>
</Box> </Box>
) } ) }
<VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 6 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden"> <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 4 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
<AnimatePresence initial={ false } > <AnimatePresence initial={ false } >
{ dataToShow.map((block => <LatestBlocksItem key={ block.height } block={ block } h={ BLOCK_HEIGHT }/>)) } { dataToShow.map((block => <LatestBlocksItem key={ block.height } block={ block } h={ BLOCK_HEIGHT }/>)) }
</AnimatePresence> </AnimatePresence>
...@@ -110,7 +110,7 @@ const LatestBlocks = () => { ...@@ -110,7 +110,7 @@ const LatestBlocks = () => {
return ( return (
<Box width={{ base: '100%', lg: '280px' }}> <Box width={{ base: '100%', lg: '280px' }}>
<Heading as="h4" size="sm" mb={ 4 }>Latest Blocks</Heading> <Heading as="h4" size="sm" mb={ 4 }>Latest blocks</Heading>
{ content } { content }
</Box> </Box>
); );
......
...@@ -27,7 +27,7 @@ const LatestTransactions = () => { ...@@ -27,7 +27,7 @@ const LatestTransactions = () => {
if (isLoading) { if (isLoading) {
content = ( content = (
<> <>
<Skeleton h="56px" w="100%" borderBottomLeftRadius={ 0 } borderBottomRightRadius={ 0 }/> <Skeleton h="32px" w="100%" borderBottomLeftRadius={ 0 } borderBottomRightRadius={ 0 }/>
{ Array.from(Array(txsCount)).map((item, index) => <LatestTxsItemSkeleton key={ index }/>) } { Array.from(Array(txsCount)).map((item, index) => <LatestTxsItemSkeleton key={ index }/>) }
</> </>
); );
...@@ -42,7 +42,7 @@ const LatestTransactions = () => { ...@@ -42,7 +42,7 @@ const LatestTransactions = () => {
content = ( content = (
<> <>
<TxsNewItemNotice borderBottomRadius={ 0 } url={ link('txs') }/> <TxsNewItemNotice borderBottomRadius={ 0 } url={ link('txs') }/>
<Box mb={{ base: 3, lg: 6 }}> <Box mb={{ base: 3, lg: 4 }}>
{ data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) } { data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) }
</Box> </Box>
<Flex justifyContent="center"> <Flex justifyContent="center">
......
...@@ -51,7 +51,7 @@ const LatestBlocksItem = ({ tx }: Props) => { ...@@ -51,7 +51,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
width="100%" width="100%"
borderTop="1px solid" borderTop="1px solid"
borderColor={ borderColor } borderColor={ borderColor }
py={{ base: 4, lg: 6 }} py={ 4 }
px={{ base: 0, lg: 4 }} px={{ base: 0, lg: 4 }}
_last={{ borderBottom: '1px solid', borderColor }} _last={{ borderBottom: '1px solid', borderColor }}
> >
......
...@@ -16,7 +16,7 @@ const LatestTxsItemSkeleton = () => { ...@@ -16,7 +16,7 @@ const LatestTxsItemSkeleton = () => {
width="100%" width="100%"
borderTop="1px solid" borderTop="1px solid"
borderColor={ borderColor } borderColor={ borderColor }
py={{ base: 4, lg: 6 }} py={ 4 }
px={{ base: 0, lg: 4 }} px={{ base: 0, lg: 4 }}
_last={{ borderBottom: '1px solid', borderColor }} _last={{ borderBottom: '1px solid', borderColor }}
> >
......
...@@ -41,6 +41,8 @@ const Stats = () => { ...@@ -41,6 +41,8 @@ const Stats = () => {
content = Array.from(Array(itemsCount)).map((item, index) => <StatsItemSkeleton key={ index }/>); content = Array.from(Array(itemsCount)).map((item, index) => <StatsItemSkeleton key={ index }/>);
} }
const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
if (data) { if (data) {
content = ( content = (
<> <>
...@@ -65,12 +67,14 @@ const Stats = () => { ...@@ -65,12 +67,14 @@ const Stats = () => {
icon={ walletIcon } icon={ walletIcon }
title="Wallet addresses" title="Wallet addresses"
value={ Number(data.total_addresses).toLocaleString() } value={ Number(data.total_addresses).toLocaleString() }
_last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
/> />
{ hasGasTracker && ( { hasGasTracker && (
<StatsItem <StatsItem
icon={ gasIcon } icon={ gasIcon }
title="Gas tracker" title="Gas tracker"
value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` } value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` }
_last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
/> />
) } ) }
</> </>
......
import { Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; import { Flex, Icon, Text, useColorModeValue, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
type Props = { type Props = {
icon: React.FC<React.SVGAttributes<SVGElement>>; icon: React.FC<React.SVGAttributes<SVGElement>>;
title: string; title: string;
value: string; value: string;
className?: string;
} }
const StatsItem = ({ icon, title, value }: Props) => { const StatsItem = ({ icon, title, value, className }: Props) => {
return ( return (
<Flex <Flex
backgroundColor={ useColorModeValue('blue.50', 'blue.800') } backgroundColor={ useColorModeValue('blue.50', 'blue.800') }
...@@ -17,14 +18,16 @@ const StatsItem = ({ icon, title, value }: Props) => { ...@@ -17,14 +18,16 @@ const StatsItem = ({ icon, title, value }: Props) => {
alignItems="center" alignItems="center"
columnGap={ 3 } columnGap={ 3 }
rowGap={ 2 } rowGap={ 2 }
className={ className }
color={ useColorModeValue('black', 'white') }
> >
<Icon as={ icon } boxSize={ 7 }/> <Icon as={ icon } boxSize={ 7 }/>
<Flex flexDirection="column" alignItems={{ base: 'start', lg: 'center', xl: 'start' }}> <Flex flexDirection="column" alignItems={{ base: 'start', lg: 'center', xl: 'start' }}>
<Text variant="secondary" fontSize="xs" lineHeight="16px">{ title }</Text> <Text variant="secondary" fontSize="xs" lineHeight="16px">{ title }</Text>
<Text fontWeight={ 500 } fontSize="md">{ value }</Text> <Text fontWeight={ 500 } fontSize="md" color={ useColorModeValue('black', 'white') }>{ value }</Text>
</Flex> </Flex>
</Flex> </Flex>
); );
}; };
export default StatsItem; export default chakra(StatsItem);
...@@ -47,7 +47,7 @@ const Home = () => { ...@@ -47,7 +47,7 @@ const Home = () => {
</Box> </Box>
<Stats/> <Stats/>
<ChainIndicators/> <ChainIndicators/>
<Flex mt={ 12 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }> <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
<LatestBlocks/> <LatestBlocks/>
<LatestTxs/> <LatestTxs/>
</Flex> </Flex>
......
...@@ -32,6 +32,7 @@ const SearchBarDesktop = ({ onChange, onSubmit, isHomepage }: Props) => { ...@@ -32,6 +32,7 @@ const SearchBarDesktop = ({ onChange, onSubmit, isHomepage }: Props) => {
onChange={ onChange } onChange={ onChange }
border={ isHomepage ? 'none' : '2px solid' } border={ isHomepage ? 'none' : '2px solid' }
borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') } borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
_focusWithin={{ _placeholder: { color: 'gray.300' } }}
color={ useColorModeValue('black', 'white') } color={ useColorModeValue('black', 'white') }
/> />
</InputGroup> </InputGroup>
......
...@@ -44,6 +44,7 @@ const TxsNewItemNotice = ({ children, className, url }: Props) => { ...@@ -44,6 +44,7 @@ const TxsNewItemNotice = ({ children, className, url }: Props) => {
fontWeight={ 400 } fontWeight={ 400 }
fontSize="sm" fontSize="sm"
bgColor={ useColorModeValue('orange.50', transparentize('orange.200', 0.16)(theme)) } bgColor={ useColorModeValue('orange.50', transparentize('orange.200', 0.16)(theme)) }
color={ useColorModeValue('blackAlpha.800', 'whiteAlpha.800') }
> >
{ alertContent } { alertContent }
</Alert> </Alert>
......
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