-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* ADd stats initial data * Create icons map * Improve stats cards * Refactor blockCard to accept compact * Pass grid props * Refactor stats card * Reuse component * WIP Implement ChainCosts * Use IncrementalStat * Implement details grid info * Implement show raw modal * Create hint component * Fix DetailsGrid layout * Implement ChainCosts * Minor layout fixes * Mock txCosts * Minor layout fixes * Create wide layout * Fix wide layout max width * Fix dancing words * Change read more use an icon instead * Fix image height * Refactor to use right component * Add close button to raw modal * Refactor price factors * Revert "Create wide layout" This reverts commit 28fddc8. * Refactor chain info card * Fix prettier * Change homepage layout * Add blockTimestamp * Add blockTimestamp tooltip * Multiple string fixes * Show last 3 blocks * Fix prettier * Update extended-sdk and remove mock * Upgrade sdk commit * Fix missing import * Add error handling It also refactors the `StatisticsCardWrapper` into a `StatsCardWrapper` component. * Delete unused component * Fix in sync badge color * Use Raw IconButton * Implement StatsModalWrapper This way the price factors and VOC tokens price are shown inside two separated modals that can be opened from the Blockhain info card * Minor fixes - Delete commented - Comment useEffect --------- Co-authored-by: Òscar Casajuana <[email protected]>
- Loading branch information
1 parent
7724bb8
commit eeb658c
Showing
22 changed files
with
886 additions
and
224 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,50 @@ | ||
| import { Grid, GridItem, Text } from '@chakra-ui/react' | ||
| import { Flex, Grid, GridItem, GridProps, Text } from '@chakra-ui/react' | ||
| import { PropsWithChildren } from 'react' | ||
| import Hint from '~components/Layout/Hint' | ||
|
|
||
| export type GridItemProps = { label: string } & PropsWithChildren | ||
| export type GridItemProps = { label: string; info?: string; isNumber?: boolean } & PropsWithChildren | ||
|
|
||
| /** | ||
| * Util component used to render a grid of details with its label | ||
| * @param details String label, and the component that should render on the grid | ||
| * @constructor | ||
| */ | ||
| export const DetailsGrid = ({ details }: { details: GridItemProps[] }) => { | ||
| export const DetailsGrid = ({ details, ...rest }: { details: GridItemProps[] } & GridProps) => { | ||
| return ( | ||
| <Grid templateColumns={{ base: '1fr', sm: '1fr 4fr' }} gap={4} alignItems={'baseline'}> | ||
| {details.map(({ label, children }, key) => ( | ||
| <DetailRow key={label} label={label}> | ||
| <Grid templateColumns={{ base: '1fr', sm: '1fr 4fr' }} columnGap={3} rowGap={2} {...rest}> | ||
| {details.map(({ children, ...rest }, key) => ( | ||
| <DetailRow key={key} {...rest}> | ||
| {children} | ||
| </DetailRow> | ||
| ))} | ||
| </Grid> | ||
| ) | ||
| } | ||
|
|
||
| const DetailRow = ({ label, children }: GridItemProps) => { | ||
| const gridProps = { display: 'flex', alignItems: 'center' } | ||
| const DetailRow = ({ label, info, isNumber, children }: GridItemProps) => { | ||
| return ( | ||
| <> | ||
| <GridItem {...gridProps}> | ||
| <Text fontWeight={'bold'}>{label}</Text> | ||
| <GridItem py={1} lineHeight={{ base: 5, lg: 6 }} _notFirst={{ mt: { base: 3, lg: 0 } }}> | ||
| <Flex columnGap={2} alignItems='flex-start'> | ||
| {info && <Hint label={info} isLoading={false} my={{ lg: '2px' }} />} | ||
| <Text my={{ lg: '2px' }} lineHeight={{ base: 5, lg: 6 }} align={'left'}> | ||
| {label} | ||
| </Text> | ||
| </Flex> | ||
| </GridItem> | ||
| <GridItem | ||
| display='flex' | ||
| alignItems='center' | ||
| flexWrap='wrap' | ||
| rowGap={3} | ||
| pl={{ base: 7, lg: 0 }} | ||
| py={1} | ||
| lineHeight={{ base: 5, lg: 6 }} | ||
| whiteSpace='nowrap' | ||
| justifyContent={isNumber ? 'end' : 'start'} | ||
| > | ||
| {children} | ||
| </GridItem> | ||
| <GridItem {...gridProps}>{children}</GridItem> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| // Based from https://github.com/blockscout/frontend/blob/main/ui/shared/Hint.tsx | ||
| import type { TooltipProps } from '@chakra-ui/react' | ||
| import { chakra, IconButton, Skeleton, Tooltip, useDisclosure } from '@chakra-ui/react' | ||
| import React from 'react' | ||
| import { GrStatusInfo } from 'react-icons/gr' | ||
|
|
||
| interface Props { | ||
| label: string | React.ReactNode | ||
| className?: string | ||
| tooltipProps?: Partial<TooltipProps> | ||
| isLoading?: boolean | ||
| } | ||
|
|
||
| const Hint = ({ label, className, tooltipProps, isLoading }: Props) => { | ||
| // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107 | ||
| const { isOpen, onOpen, onToggle, onClose } = useDisclosure() | ||
|
|
||
| const handleClick = React.useCallback( | ||
| (event: React.MouseEvent) => { | ||
| event.stopPropagation() | ||
| onToggle() | ||
| }, | ||
| [onToggle] | ||
| ) | ||
|
|
||
| if (isLoading) { | ||
| return <Skeleton className={className} boxSize={5} borderRadius='sm' /> | ||
| } | ||
|
|
||
| return ( | ||
| <Tooltip | ||
| label={label} | ||
| placement='top' | ||
| maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }} | ||
| isOpen={isOpen} | ||
| {...tooltipProps} | ||
| > | ||
| <IconButton | ||
| minW={2} | ||
| colorScheme='none' | ||
| aria-label='hint' | ||
| icon={<GrStatusInfo />} | ||
| boxSize={5} | ||
| variant='simple' | ||
| display='inline-block' | ||
| flexShrink={0} | ||
| className={className} | ||
| onMouseEnter={onOpen} | ||
| onMouseLeave={onClose} | ||
| onClick={handleClick} | ||
| /> | ||
| </Tooltip> | ||
| ) | ||
| } | ||
|
|
||
| export default React.memo(chakra(Hint)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { Badge, HStack, Text, VStack } from '@chakra-ui/react' | ||
| import { Trans, useTranslation } from 'react-i18next' | ||
| import { useChainInfo } from '~queries/stats' | ||
| import { useDateFns } from '~i18n/use-date-fns' | ||
| import { MdSpeed } from 'react-icons/md' | ||
| import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid' | ||
| import { StatsCardWrapper } from '~components/Stats/StatsCardWrapper' | ||
| import { TxCostsModal } from '~components/Stats/ChainDetails/TxCosts' | ||
| import { PriceFactorsModal } from '~components/Stats/ChainDetails/PriceFactors' | ||
|
|
||
| const SyncBadge = ({ syncing }: { syncing: boolean }) => { | ||
| const { t } = useTranslation() | ||
|
|
||
| const label = syncing ? t('stats.syncing') : t('stats.in_sync') | ||
| const color = syncing ? 'orange' : 'green' | ||
|
|
||
| return <Badge colorScheme={color}>{label}</Badge> | ||
| } | ||
|
|
||
| export const ChainInfo = () => { | ||
| const { t } = useTranslation() | ||
| const { data: stats, isError, error } = useChainInfo() | ||
| const { format } = useDateFns() | ||
|
|
||
| if (!stats) return null | ||
|
|
||
| const genesisBlockDate = format(new Date(stats.genesisTime), 'PPPpp') | ||
| const timestampInfo = format(new Date(stats?.blockTimestamp * 1000), 'hh:mm:ss') | ||
|
|
||
| const statsData: GridItemProps[] = [ | ||
| { | ||
| label: t('stats.maxCensusSize', { defaultValue: 'Max Census Size' }), | ||
| children: stats.maxCensusSize, | ||
| isNumber: true, | ||
| }, | ||
| { | ||
| label: t('stats.networkCapacity', { defaultValue: 'Capacity (votes/block)' }), | ||
| // Not typed on the SDK | ||
| // @ts-ignore | ||
| children: stats.networkCapacity, | ||
| isNumber: true, | ||
| }, | ||
| { | ||
| label: t('stats.initial_height', { defaultValue: 'Epoch initial Height' }), | ||
| // Not typed on the SDK | ||
| // @ts-ignore | ||
| children: stats.initialHeight, | ||
| isNumber: true, | ||
| }, | ||
| { | ||
| label: t('stats.blockTimestamp', { defaultValue: 'Block timestamp' }), | ||
| children: timestampInfo, | ||
| isNumber: true, | ||
| }, | ||
| { | ||
| label: t('stats.blockTimestamp', { defaultValue: 'Block timestamp' }), | ||
| children: timestampInfo, | ||
| isNumber: true, | ||
| }, | ||
| ] | ||
|
|
||
| const tokensData: GridItemProps[] = [ | ||
| { | ||
| label: t('stats.voc_tokens', { defaultValue: 'VOC Tokens' }), | ||
| children: <TxCostsModal />, | ||
| isNumber: true, | ||
| }, | ||
| { | ||
| label: t('stats.price_factors', { defaultValue: 'Price factors' }), | ||
| children: <PriceFactorsModal />, | ||
| isNumber: true, | ||
| }, | ||
| ] | ||
|
|
||
| return ( | ||
| <StatsCardWrapper | ||
| flex='2' | ||
| w={'full'} | ||
| icon={MdSpeed} | ||
| title={t('stats.blockchain_info')} | ||
| raw={stats} | ||
| isError={isError} | ||
| error={error} | ||
| > | ||
| <VStack pb={4} align={'start'} spacing={1}> | ||
| <HStack> | ||
| <Text fontSize='lg' fontWeight={'bold'}> | ||
| {stats.chainId} | ||
| </Text> | ||
| <SyncBadge syncing={stats.syncing} /> | ||
| </HStack> | ||
| <Text color={'lightText'} fontSize='md'> | ||
| {t('stats.genesis', { | ||
| date: genesisBlockDate, | ||
| defaultValue: 'Chain Genesis Epoch from {{date}}', | ||
| })} | ||
| </Text> | ||
| </VStack> | ||
| <DetailsGrid templateColumns={{ base: '1fr', sm: '1fr 1fr' }} details={statsData} rowGap={0} /> | ||
| <Text fontSize='lg' fontWeight={'bold'} pt={2}> | ||
| <Trans i18nKey={'stats.tokens'}>Tokens</Trans> | ||
| </Text> | ||
| <DetailsGrid templateColumns={{ base: '1fr', sm: '1fr 1fr' }} details={tokensData} rowGap={0} /> | ||
| </StatsCardWrapper> | ||
| ) | ||
| } |
Oops, something went wrong.
eeb658cThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://vocdoni-explorer-dev.netlify.app as production
🚀 Deployed on https://66c455850f84c3db9a809264--vocdoni-explorer-dev.netlify.app
eeb658cThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://vocdoni-explorer-stg.netlify.app as production
🚀 Deployed on https://66c457601793acdb652507b5--vocdoni-explorer-stg.netlify.app