From eeb658ce567b5e50c7e4a316dbf7bf5db16f902a Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Tue, 20 Aug 2024 03:34:50 -0500
Subject: [PATCH] Implement new stats/home page (#82)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 28fddc8b4fdbc3d7ef6a3408ed4c1ded79a7fe6b.

* 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 <elboletaire@gmail.com>
---
 src/components/Blocks/BlockCard.tsx           |  48 +++--
 src/components/Home/FeaturedContent.tsx       |   4 +-
 src/components/Layout/ContentError.tsx        |   4 +-
 src/components/Layout/DetailsGrid.tsx         |  39 +++--
 src/components/Layout/Hint.tsx                |  56 ++++++
 src/components/Layout/ShowRawButton.tsx       |  52 +++++-
 .../Stats/ChainDetails/ChainInfo.tsx          | 106 +++++++++++
 .../Stats/ChainDetails/PriceFactors.tsx       | 160 +++++++++++++++++
 .../Stats/ChainDetails/StatsCards.tsx         | 165 ++++++++++++++++++
 src/components/Stats/ChainDetails/TxCosts.tsx |  45 +++++
 src/components/Stats/ChainInfo.tsx            |  57 ------
 src/components/Stats/LatestBlocks.tsx         |  18 +-
 src/components/Stats/StatsCardWrapper.tsx     | 146 ++++++++++++++++
 src/components/Stats/index.tsx                | 100 ++---------
 src/components/Validators/Detail.tsx          |  13 +-
 src/components/Validators/ValidatorCard.tsx   |   4 +-
 src/pages/Home.tsx                            |  11 +-
 src/pages/validator.tsx                       |   6 +-
 src/queries/stats.ts                          |  24 ++-
 src/router/index.tsx                          |   1 +
 src/theme/components/Icons.ts                 |  18 ++
 yarn.lock                                     |  33 ++--
 22 files changed, 886 insertions(+), 224 deletions(-)
 create mode 100644 src/components/Layout/Hint.tsx
 create mode 100644 src/components/Stats/ChainDetails/ChainInfo.tsx
 create mode 100644 src/components/Stats/ChainDetails/PriceFactors.tsx
 create mode 100644 src/components/Stats/ChainDetails/StatsCards.tsx
 create mode 100644 src/components/Stats/ChainDetails/TxCosts.tsx
 delete mode 100644 src/components/Stats/ChainInfo.tsx
 create mode 100644 src/components/Stats/StatsCardWrapper.tsx
 create mode 100644 src/theme/components/Icons.ts

diff --git a/src/components/Blocks/BlockCard.tsx b/src/components/Blocks/BlockCard.tsx
index 55ef2adb..54ac28c7 100644
--- a/src/components/Blocks/BlockCard.tsx
+++ b/src/components/Blocks/BlockCard.tsx
@@ -1,39 +1,31 @@
-import { Box, Card, CardBody, Flex, HStack, Icon, Text } from '@chakra-ui/react'
+import { Box, Card, CardBody, Flex, Link, HStack, Icon, Text } from '@chakra-ui/react'
 import { BlockError, BlockNotFoundError } from '@vocdoni/extended-sdk'
 import { IChainBlockInfoResponse } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
 import { BiTransferAlt } from 'react-icons/bi'
-import { generatePath } from 'react-router-dom'
+
+import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import LinkCard from '~components/Layout/LinkCard'
 import { RoutePath } from '~constants'
 import { useDateFns } from '~i18n/use-date-fns'
+import { Icons } from '~src/theme/components/Icons'
 
-export const BlockCard = ({ block }: { block: IChainBlockInfoResponse | BlockError }) => {
-  if (block instanceof BlockError) return <BlockErrorCard error={block} height={block.height} />
-  return (
-    <BlockInfoCard
-      height={block.header.height}
-      time={block.header.time}
-      proposer={block.header.proposerAddress}
-      txn={block.data.txs.length}
-    />
-  )
+interface IBlockCardProps {
+  block: IChainBlockInfoResponse | BlockError
+  compact?: boolean
 }
 
-const BlockInfoCard = ({
-  height,
-  time,
-  proposer,
-  txn,
-}: {
-  height: number
-  time: string
-  proposer: string
-  txn: number
-}) => {
-  const date = new Date(time)
+export const BlockCard = ({ block, compact = false }: IBlockCardProps) => {
   const { formatDistance } = useDateFns()
+  if (block instanceof BlockError) return <BlockErrorCard error={block} height={block.height} />
+
+  const height = block.header.height
+  const time = block.header.time
+  const proposer = block.header.proposerAddress
+  const txn = block.data.txs.length
+
+  const date = new Date(time)
 
   return (
     <LinkCard to={generatePath(RoutePath.Block, { height: height.toString(), tab: null, page: null })}>
@@ -42,7 +34,7 @@ const BlockInfoCard = ({
           <Flex gap={3}>
             <Text fontWeight='bold'># {height}</Text>
             <HStack spacing={1}>
-              <Icon as={BiTransferAlt} boxSize={5} />
+              <Icon as={Icons.TxIcon} boxSize={5} />
               <Text fontSize={'sm'} fontWeight={'bold'}>
                 {txn}
               </Text>
@@ -54,7 +46,11 @@ const BlockInfoCard = ({
           <Box fontSize={'sm'}>
             <Flex gap={2} align={'center'}>
               <Trans i18nKey='blocks.proposer'>Proposer:</Trans>
-              <ReducedTextAndCopy color={'textAccent1'} toCopy={proposer}>
+              <ReducedTextAndCopy
+                breakPoint={compact ? { base: true } : undefined}
+                color={'textAccent1'}
+                toCopy={proposer}
+              >
                 {proposer}
               </ReducedTextAndCopy>
             </Flex>
diff --git a/src/components/Home/FeaturedContent.tsx b/src/components/Home/FeaturedContent.tsx
index 23641d00..0a2d31d4 100644
--- a/src/components/Home/FeaturedContent.tsx
+++ b/src/components/Home/FeaturedContent.tsx
@@ -14,7 +14,7 @@ export const FeaturedContent = () => {
 
   const icons = [
     {
-      width: '96px',
+      width: '72px',
       src: anonymous,
       alt: t('featured.anonymous_image_alt'),
     },
@@ -50,7 +50,7 @@ export const FeaturedContent = () => {
     <Flex direction={'column'} gap={12}>
       <Flex justify={'space-between'} wrap={'wrap'}>
         {icons.map((icon, i) => (
-          <Image key={i} maxW={icon.width} src={icon.src} alt={icon.alt} />
+          <Image key={i} maxW={icon.width} height={'88px'} src={icon.src} alt={icon.alt} />
         ))}
       </Flex>
       <Box>
diff --git a/src/components/Layout/ContentError.tsx b/src/components/Layout/ContentError.tsx
index 48c0d081..c2a396a0 100644
--- a/src/components/Layout/ContentError.tsx
+++ b/src/components/Layout/ContentError.tsx
@@ -6,7 +6,9 @@ export const NoResultsError = ({ msg }: { msg?: string }) => {
   return <Text>{msg ?? t('errors.no_results', { defaultValue: 'Looks like there are no results to show.' })}</Text>
 }
 
-export const ContentError = ({ error }: { error: Error | undefined | null | string }) => {
+export type ContentErrorType = Error | undefined | null | string
+
+export const ContentError = ({ error }: { error: ContentErrorType }) => {
   return (
     <Stack spacing={4}>
       <Alert status='warning'>
diff --git a/src/components/Layout/DetailsGrid.tsx b/src/components/Layout/DetailsGrid.tsx
index 3a1e5f35..975aff31 100644
--- a/src/components/Layout/DetailsGrid.tsx
+++ b/src/components/Layout/DetailsGrid.tsx
@@ -1,18 +1,19 @@
-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>
       ))}
@@ -20,14 +21,30 @@ export const DetailsGrid = ({ details }: { details: GridItemProps[] }) => {
   )
 }
 
-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>
     </>
   )
 }
diff --git a/src/components/Layout/Hint.tsx b/src/components/Layout/Hint.tsx
new file mode 100644
index 00000000..376a4f2f
--- /dev/null
+++ b/src/components/Layout/Hint.tsx
@@ -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))
diff --git a/src/components/Layout/ShowRawButton.tsx b/src/components/Layout/ShowRawButton.tsx
index 6e7339dc..db1f2fe6 100644
--- a/src/components/Layout/ShowRawButton.tsx
+++ b/src/components/Layout/ShowRawButton.tsx
@@ -1,7 +1,23 @@
-import { Box, BoxProps, Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
+import {
+  Box,
+  BoxProps,
+  Button,
+  ButtonProps,
+  IconButton,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from '@chakra-ui/react'
 import { Trans } from 'react-i18next'
 import { CopyButtonIcon } from '~components/Layout/CopyButton'
 import { JsonViewer } from '~components/Layout/JsonViewer'
+import { useTranslation } from 'react-i18next'
+import { FaCode } from 'react-icons/fa'
 
 const ShowRawButton = ({ obj, ...props }: { obj: object } & Omit<ButtonProps, 'onClick'>) => {
   const { getDisclosureProps, getButtonProps } = useDisclosure()
@@ -27,4 +43,38 @@ export const RawContentBox = ({ obj, ...rest }: { obj: object } & BoxProps) => (
   </Box>
 )
 
+export const RawModal = ({ obj, ...rest }: { obj: object } & Omit<ButtonProps, 'onClick'>) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { t } = useTranslation()
+  return (
+    <>
+      <IconButton
+        onClick={onOpen}
+        icon={<FaCode />}
+        h={0}
+        p={0}
+        justifyContent={'end'}
+        aria-label={t('raw')}
+        size={'lg'}
+        variant={'text'}
+      />
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            <Trans i18nKey={'raw'}></Trans>
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <RawContentBox obj={obj} />
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
 export default ShowRawButton
diff --git a/src/components/Stats/ChainDetails/ChainInfo.tsx b/src/components/Stats/ChainDetails/ChainInfo.tsx
new file mode 100644
index 00000000..e8a7ea73
--- /dev/null
+++ b/src/components/Stats/ChainDetails/ChainInfo.tsx
@@ -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>
+  )
+}
diff --git a/src/components/Stats/ChainDetails/PriceFactors.tsx b/src/components/Stats/ChainDetails/PriceFactors.tsx
new file mode 100644
index 00000000..56bc7131
--- /dev/null
+++ b/src/components/Stats/ChainDetails/PriceFactors.tsx
@@ -0,0 +1,160 @@
+import { useChainCosts } from '~queries/stats'
+import { useTranslation } from 'react-i18next'
+import { IoIosPricetag } from 'react-icons/io'
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  IconButton,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  VStack,
+} from '@chakra-ui/react'
+import { DetailsGrid } from '~components/Layout/DetailsGrid'
+import { Icons } from '~src/theme/components/Icons'
+import { ContentError } from '~components/Layout/ContentError'
+import { RawModal } from '~components/Layout/ShowRawButton'
+import { StatsModalWrapper } from '~components/Stats/StatsCardWrapper'
+
+export const PriceFactorsModal = () => {
+  const { t } = useTranslation()
+  const { data, isError, error, isLoading } = useChainCosts({})
+
+  return (
+    <>
+      <StatsModalWrapper
+        title={t('stats.price_factors', { defaultValue: 'Price factors' })}
+        icon={IoIosPricetag}
+        link={'https://developer.vocdoni.io/vocdoni-api/price-factors-information'}
+        isError={isError}
+        error={error}
+        isLoading={isLoading}
+        raw={data}
+      >
+        <PriceFactorsInfoSkeleton />
+      </StatsModalWrapper>
+    </>
+  )
+}
+
+const PriceFactorsInfoSkeleton = () => {
+  const { data, isError, error } = useChainCosts({})
+  const { t } = useTranslation()
+
+  if (isError) {
+    return <ContentError error={error} />
+  }
+
+  return (
+    <VStack align='stretch'>
+      <Text>
+        {t('stats.price_factors.info_text', {
+          defaultValue:
+            'The formula used to calculate an election price takes into account various factors, each reflecting one specific aspect of the election process. ',
+        })}
+      </Text>
+      <DetailsGrid
+        rowGap={0}
+        columnGap={6}
+        templateColumns={{ base: '1fr', sm: '1fr 1fr' }}
+        details={[
+          {
+            label: t('stats.price_factors.base', { defaultValue: 'Base' }),
+            children: data?.basePrice,
+            info: t('stats.price_factors.base_info', {
+              defaultValue:
+                'Fixed cost that serves as a starting point for the price calculation. It represents the minimal price for creating an election regardless of its size or duration.',
+            }),
+            isNumber: true,
+          },
+          {
+            label: t('stats.networkCapacity', { defaultValue: 'Capacity (votes/block)' }),
+            children: data?.capacity,
+            info: t('stats.price_factors.capacity_info', {
+              defaultValue: 'Capacity of the blockchain',
+            }),
+            isNumber: true,
+          },
+        ]}
+      />
+      <Text fontWeight={'bold'}>{t('stats.price_factors.factors', { defaultValue: 'Factors' })}</Text>
+      <DetailsGrid
+        templateColumns={{ base: '1fr', sm: '1fr 1fr' }}
+        rowGap={0}
+        columnGap={6}
+        details={[
+          {
+            label: t('stats.price_factors.sizePriceFactor', { defaultValue: 'Size' }),
+            children: data?.factors?.k1,
+            info: t('stats.price_factors.sizePriceFactor_info', {
+              defaultValue:
+                'The size price component is directly proportional to the maximum number of votes allowed in the election',
+            }),
+            isNumber: true,
+          },
+          {
+            label: t('stats.price_factors.durationPriceFactor', { defaultValue: 'Duration' }),
+            children: data?.factors?.k2,
+            info: t('stats.price_factors.durationPriceFactor_info', {
+              defaultValue:
+                'If the election lasts longer, the price increases, and if there are more votes in a shorter time, the price also increases to reflect the higher demand for resources.',
+            }),
+            isNumber: true,
+          },
+          {
+            label: t('stats.price_factors.encryptedPriceFactor', { defaultValue: 'Encryption' }),
+            children: data?.factors?.k3,
+            info: t('stats.price_factors.encryptedPriceFactor_info', {
+              defaultValue: 'If an election requires encryption for maintaining secrecy until the end (encryptedVotes)',
+            }),
+            isNumber: true,
+          },
+          {
+            label: t('stats.price_factors.anonymousPriceFactor', { defaultValue: 'Anonymous' }),
+            children: data?.factors?.k4,
+            info: t('stats.price_factors.anonymousPriceFactor_info', {
+              defaultValue: 'If it requires additional measures to ensure voter privacy (anonymousVotes)',
+            }),
+            isNumber: true,
+          },
+          {
+            label: t('stats.price_factors.overwritePriceFactor', { defaultValue: 'Overwrite' }),
+            children: data?.factors?.k5,
+            info: t('stats.price_factors.overwritePriceFactor_info', {
+              defaultValue:
+                "Is proportional to the maximum number of vote overwrites and the maximum number of votes allowed in the election. It also takes into account the blockchain's capacity to ensure the price reflects the current resource constraints.",
+            }),
+            isNumber: true,
+          },
+          {
+            label: t('stats.price_factors.sizeScaling', { defaultValue: 'Growth factor' }),
+            children: data?.factors?.k6,
+            info: t('stats.price_factors.sizeScaling_info', {
+              defaultValue:
+                'Rate of price growth for elections with a maximum number of votes (maxCensusSize) exceeding the k7 threshold.',
+            }),
+            isNumber: true,
+          },
+          {
+            label: t('stats.price_factors.censusSizeScaling', { defaultValue: 'Size trigger' }),
+            children: data?.factors?.k7,
+            info: t('stats.price_factors.censusSizeScaling_info', {
+              defaultValue:
+                'Represents a threshold value for the maximum number of votes (maxCensusSize) in an election. When the election size exceeds k7, the price growth becomes non-linear, increasing more rapidly beyond this point. ',
+            }),
+            isNumber: true,
+          },
+        ]}
+      />
+    </VStack>
+  )
+}
diff --git a/src/components/Stats/ChainDetails/StatsCards.tsx b/src/components/Stats/ChainDetails/StatsCards.tsx
new file mode 100644
index 00000000..b688277a
--- /dev/null
+++ b/src/components/Stats/ChainDetails/StatsCards.tsx
@@ -0,0 +1,165 @@
+import { IconType } from 'react-icons'
+import { Box, Card, CardBody, Flex, Grid, Heading, Icon, Link, Stack, Text } from '@chakra-ui/react'
+import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import { useChainInfo } from '~queries/stats'
+import { RefreshIntervalBlocks, RoutePath } from '~constants'
+import { useTranslation } from 'react-i18next'
+import { Icons } from '~src/theme/components/Icons'
+import { ContentError } from '~components/Layout/ContentError'
+
+interface IStatsCardProps {
+  title: string
+  description: string
+  link?: string
+  icon: IconType
+}
+
+const StatsCard = ({ title, description, link, icon }: IStatsCardProps) => (
+  <Link as={RouterLink} to={generatePath(link || '')}>
+    <Card direction={'row'} align={'center'}>
+      <Box px={3}>
+        <Icon as={icon} boxSize={7} />
+      </Box>
+      <Stack spacing={0} py={3}>
+        <CardBody p={0}>
+          <Text fontSize='sm'>{title}</Text>
+          <Text fontWeight={'bold'} fontSize='md'>
+            {description}
+          </Text>
+        </CardBody>
+      </Stack>
+    </Card>
+  </Link>
+)
+
+interface IncrementalStatProps {
+  value: number
+  label: string
+}
+
+const IncrementalStat = ({ value, label }: IncrementalStatProps) => {
+  const [displayNumber, setDisplayNumber] = useState(0)
+  const duration = 2000
+
+  // Incremental animation to create a counter effect
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout
+    let start = Date.now()
+    const stepTime = duration / value
+
+    intervalId = setInterval(() => {
+      const elapsed = Date.now() - start
+      const remainingTime = duration - elapsed
+      const randomOffset = Math.floor(Math.random() * 10) // Random offset between 0 and 9
+      const nextNumber = Math.min(value, Math.floor(elapsed / stepTime) + randomOffset)
+
+      // Ensure the final number is the target number
+      if (remainingTime <= stepTime) {
+        setDisplayNumber(value)
+        clearInterval(intervalId)
+      } else {
+        setDisplayNumber(nextNumber)
+      }
+    }, stepTime)
+
+    return () => clearInterval(intervalId)
+  }, [value, duration])
+
+  return (
+    <Flex flex={1} direction={'column'} align={'center'}>
+      <Box>
+        <Heading>{displayNumber}</Heading>
+      </Box>
+      <Text fontSize={'2xl'}>{label}</Text>
+    </Flex>
+  )
+}
+
+export const StatsCards = () => {
+  const {
+    data: stats,
+    isError,
+    error,
+  } = useChainInfo({
+    refetchInterval: RefreshIntervalBlocks,
+  })
+  const { t } = useTranslation()
+
+  if (!stats) return null
+
+  if (isError) {
+    return <ContentError error={error} />
+  }
+
+  const averageBlockTime = Number((stats?.blockTime[0] || 0) / 1000).toFixed(1)
+
+  const statsCards: IStatsCardProps[] = [
+    {
+      title: t('stats.average_block_time'),
+      description: t('stats.seconds', {
+        count: parseFloat(averageBlockTime),
+      }),
+      link: RoutePath.BlocksList,
+      icon: Icons.ClockIcon,
+    },
+    {
+      title: t('stats.block_height'),
+      description: t('stats.blocks', {
+        count: stats.height,
+        defaultValue: '{{count}} blocks',
+      }),
+      link: RoutePath.BlocksList,
+      icon: Icons.BlockIcon,
+    },
+    {
+      title: t('stats.transactions_count', { defaultValue: 'Transactions count' }),
+      description: t('stats.transactions', {
+        count: stats.transactionCount,
+        defaultValue: '{{count}} transactions',
+      }),
+      link: RoutePath.TransactionsList,
+      icon: Icons.TxIcon,
+    },
+    {
+      title: t('stats.validators_count', { defaultValue: 'Validators count' }),
+      description: t('stats.validators', {
+        count: stats.validatorCount,
+        defaultValue: '{{count}} validators',
+      }),
+      link: RoutePath.Validators,
+      icon: Icons.ValidatorIcon,
+    },
+  ]
+
+  const incrementalStats: IncrementalStatProps[] = [
+    {
+      label: t('stats.organizations', { defaultValue: 'Organizations' }),
+      value: stats.organizationCount,
+    },
+    {
+      label: t('stats.elections', { defaultValue: 'Elections' }),
+      value: stats.electionCount,
+    },
+    {
+      label: t('stats.votes', { defaultValue: 'Votes' }),
+      value: stats.voteCount,
+    },
+  ]
+
+  return (
+    <Flex direction={'column'} gap={4}>
+      <Grid templateColumns={{ base: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }} gap={4} mb={8}>
+        {statsCards.map((card, i) => (
+          <StatsCard key={i} {...card} />
+        ))}
+      </Grid>
+
+      <Flex w={'full'} justify={'space-around'} wrap={'wrap'}>
+        {incrementalStats.map((card, i) => (
+          <IncrementalStat key={i} {...card} />
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/src/components/Stats/ChainDetails/TxCosts.tsx b/src/components/Stats/ChainDetails/TxCosts.tsx
new file mode 100644
index 00000000..35fb27f1
--- /dev/null
+++ b/src/components/Stats/ChainDetails/TxCosts.tsx
@@ -0,0 +1,45 @@
+import { useChainCosts, useTxsCosts } from '~queries/stats'
+import { useTranslation } from 'react-i18next'
+import { Icons } from '~src/theme/components/Icons'
+import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
+import { StatsModalWrapper } from '~components/Stats/StatsCardWrapper'
+
+export const TxCostsModal = () => {
+  const { t } = useTranslation()
+  const { data, isLoading, isError, error } = useTxsCosts({})
+
+  return (
+    <>
+      <StatsModalWrapper
+        title={t('stats.voc_tokens', { defaultValue: 'VOC Tokens' })}
+        icon={Icons.TxIcon}
+        isError={isError}
+        error={error}
+        isLoading={isLoading}
+        raw={data}
+      >
+        <TxCosts />
+      </StatsModalWrapper>
+    </>
+  )
+}
+
+const TxCosts = () => {
+  const { data } = useTxsCosts({})
+
+  const { t } = useTranslation()
+
+  const prices: GridItemProps[] = []
+
+  if (data?.costs) {
+    Object.entries(data.costs).forEach(([key, value]) => {
+      prices.push({
+        label: key,
+        children: value,
+        isNumber: true,
+      })
+    })
+  }
+
+  return <DetailsGrid rowGap={0} columnGap={6} details={prices} />
+}
diff --git a/src/components/Stats/ChainInfo.tsx b/src/components/Stats/ChainInfo.tsx
deleted file mode 100644
index c71c9ab7..00000000
--- a/src/components/Stats/ChainInfo.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Flex, Heading, SkeletonText, Text } from '@chakra-ui/react'
-import { useTranslation } from 'react-i18next'
-import { useChainInfo } from '~queries/stats'
-import { useDateFns } from '~i18n/use-date-fns'
-
-export const ChainInfo = () => {
-  const { t } = useTranslation()
-  const { data: stats } = useChainInfo()
-  const { formatDistance } = useDateFns()
-
-  const syncing = stats?.syncing ? t('stats.syncing') : t('stats.in_sync')
-  const genesisBlockDate = stats?.genesisTime ? formatDistance(new Date(stats?.genesisTime), new Date()) : ''
-
-  const statsCards = [
-    {
-      name: t('stats.network_id'),
-      data: stats?.chainId,
-    },
-    {
-      name: t('stats.block_height'),
-      data: stats?.height,
-    },
-
-    {
-      name: t('stats.nr_of_validators'),
-      data: stats?.validatorCount,
-    },
-    {
-      name: t('stats.sync_status'),
-      data: syncing,
-    },
-
-    {
-      name: t('stats.genesis_block_date'),
-      data: genesisBlockDate,
-    },
-  ]
-
-  return (
-    <Flex direction={'column'} gap={8} align={'start'}>
-      {statsCards.map((stat, i) => {
-        return (
-          <Flex key={i} direction={'column'} gap={2} align={'start'}>
-            <Heading size={'sm'}>{stat.name}</Heading>
-            {!stats ? (
-              <SkeletonText noOfLines={1} spacing='3' skeletonHeight='3' />
-            ) : (
-              <Text color={'lightText'} fontSize='md'>
-                {stat.data}
-              </Text>
-            )}
-          </Flex>
-        )
-      })}
-    </Flex>
-  )
-}
diff --git a/src/components/Stats/LatestBlocks.tsx b/src/components/Stats/LatestBlocks.tsx
index 8d6007fe..7fee8aa4 100644
--- a/src/components/Stats/LatestBlocks.tsx
+++ b/src/components/Stats/LatestBlocks.tsx
@@ -7,12 +7,18 @@ import { LoadingCards } from '~components/Layout/Loading'
 import { RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
+import { ContentError } from '~components/Layout/ContentError'
 
 export const LatestBlocks = () => {
-  const blockListSize = 4
+  const blockListSize = 3
 
   const { data: stats, isLoading: isLoadingStats } = useChainInfo()
-  const { data: blocks, isLoading: isLoadingBlocks } = useBlockList({
+  const {
+    data: blocks,
+    isLoading: isLoadingBlocks,
+    error,
+    isError,
+  } = useBlockList({
     params: {
       page: 0,
       limit: blockListSize,
@@ -28,10 +34,14 @@ export const LatestBlocks = () => {
     return <LoadingCards length={blockListSize} />
   }
 
+  if (isError) {
+    return <ContentError error={error} />
+  }
+
   return (
-    <Stack>
+    <Stack spacing={4}>
       {blocks.blocks.map((block, i) => (
-        <BlockCard key={i} block={block} />
+        <BlockCard key={i} block={block} compact />
       ))}
       <Button as={RouterLink} to={generatePath(RoutePath.BlocksList)} bgColor='accent1' color={'white'}>
         <Trans i18nKey='stats.view_all_blocks'>View all blocks</Trans>
diff --git a/src/components/Stats/StatsCardWrapper.tsx b/src/components/Stats/StatsCardWrapper.tsx
new file mode 100644
index 00000000..44b4e155
--- /dev/null
+++ b/src/components/Stats/StatsCardWrapper.tsx
@@ -0,0 +1,146 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  Flex,
+  HStack,
+  Icon,
+  IconButton,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  SkeletonText,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+import { IconType } from 'react-icons'
+import { RawModal } from '~components/Layout/ShowRawButton'
+import { ContentError, ContentErrorType } from '~components/Layout/ContentError'
+import { useTranslation } from 'react-i18next/index'
+import { useChainCosts } from '~queries/stats'
+import { Icons } from '~src/theme/components/Icons'
+import { IoIosPricetag } from 'react-icons/io'
+
+interface StatisticsCardProps {
+  title: string
+  icon: IconType
+  raw?: object
+  link?: string
+  isLoading?: boolean
+  isError?: boolean
+  error?: ContentErrorType
+}
+
+export const StatsCardWrapper = ({
+  title,
+  icon,
+  raw,
+  children,
+  isLoading,
+  isError,
+  error,
+  ...rest
+}: StatisticsCardProps & PropsWithChildren & CardProps) => {
+  return (
+    <Card flex='1' w={'full'} {...rest}>
+      <CardHeader pb={0} display='flex' gap={3} alignItems='center' justifyContent={'space-between'} flexDir='row'>
+        <HStack spacing={3}>
+          <Icon color='textAccent1' fontSize='2xl' as={icon} />
+          <Text>{title}</Text>
+        </HStack>
+        {!!raw && <RawModal color={'lightText'} fontSize={'xs'} obj={raw} />}
+      </CardHeader>
+      <CardBody>
+        <CardBodyWrapper error={error} isError={isError} isLoading={isLoading}>
+          {children}
+        </CardBodyWrapper>
+      </CardBody>
+    </Card>
+  )
+}
+
+export const StatsModalWrapper = ({
+  title,
+  icon,
+  link,
+  children,
+  raw,
+  error,
+  isError,
+  isLoading,
+}: StatisticsCardProps & PropsWithChildren) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  return (
+    <>
+      <IconButton
+        variant={'text'}
+        onClick={onOpen}
+        icon={<Icon as={Icons.InfoIcon} boxSize={5} />}
+        aria-label={'info'}
+        height={1}
+        minW={2}
+        w={1}
+      />
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            <HStack spacing={3}>
+              <Icon color='textAccent1' fontSize='2xl' as={icon} />
+              <Text>{title}</Text>
+              {link && (
+                <Box as={Link} href={link} isExternal>
+                  <Icon boxSize={4} as={Icons.ExternalIcon} />
+                </Box>
+              )}
+            </HStack>
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <CardBodyWrapper error={error} isError={isError} isLoading={isLoading}>
+              {children}
+            </CardBodyWrapper>
+          </ModalBody>
+          <ModalFooter>
+            {raw && (
+              <Box pr={4}>
+                <RawModal obj={raw} />
+              </Box>
+            )}
+            <Button onClick={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+const CardBodyWrapper = ({
+  isLoading,
+  isError,
+  error,
+  children,
+}: Pick<StatisticsCardProps, 'isLoading' | 'isError' | 'error'> & PropsWithChildren) => {
+  if (isLoading) {
+    return <SkeletonText noOfLines={3} spacing={3} skeletonHeight={3} py={2} />
+  }
+  if (isError) {
+    return <ContentError error={error} />
+  }
+  return (
+    <Flex h={'full'} direction={'column'} justify={'space-between'}>
+      {children}
+    </Flex>
+  )
+}
diff --git a/src/components/Stats/index.tsx b/src/components/Stats/index.tsx
index 0b9b7dc5..df5d6cad 100644
--- a/src/components/Stats/index.tsx
+++ b/src/components/Stats/index.tsx
@@ -1,101 +1,23 @@
-import { Card, CardBody, CardHeader, Flex, Grid, Icon, Text } from '@chakra-ui/react'
-import { PropsWithChildren } from 'react'
+import { Flex, VStack } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
-import { IconType } from 'react-icons'
-import { MdSpeed } from 'react-icons/md'
 import { VscGraphLine } from 'react-icons/vsc'
-import { generatePath, Link } from 'react-router-dom'
-import { ChainInfo } from '~components/Stats/ChainInfo'
 import { LatestBlocks } from '~components/Stats/LatestBlocks'
-import { RefreshIntervalBlocks, RoutePath } from '~constants'
-import { useChainInfo } from '~queries/stats'
-
-interface IStatsCardProps {
-  title: string
-  description: string
-}
-
-const StatsCard = ({ title, description }: IStatsCardProps) => (
-  <Card>
-    <CardHeader pb={0} fontSize='md' fontWeight={600}>
-      {title}
-    </CardHeader>
-    <CardBody fontSize='sm' pt={1}>
-      {description}
-    </CardBody>
-  </Card>
-)
-
-interface StatisticsCardProps {
-  title: string
-  icon: IconType
-}
-
-const StatisticsCardWrapper = ({ title, icon, children }: StatisticsCardProps & PropsWithChildren) => (
-  <Card flex='1' w={'full'} minH={'530px'}>
-    <CardHeader pb={0} display='flex' gap={3} alignItems='center' flexDir='row'>
-      <Icon color='textAccent1' fontSize='2xl' as={icon} />
-      <Text>{title}</Text>
-    </CardHeader>
-    <CardBody>{children}</CardBody>
-  </Card>
-)
+import { ChainInfo } from '~components/Stats/ChainDetails/ChainInfo'
+import { StatsCards } from '~components/Stats/ChainDetails/StatsCards'
+import { StatsCardWrapper } from '~components/Stats/StatsCardWrapper'
 
 const Stats = () => {
-  const { data: stats } = useChainInfo({
-    refetchInterval: RefreshIntervalBlocks,
-  })
   const { t } = useTranslation()
-
-  const averageBlockTime = Number((stats?.blockTime[0] || 0) / 1000).toFixed(1)
-
-  const statsCards = [
-    {
-      title: t('stats.average_block_time'),
-      description: t('stats.seconds', {
-        count: parseFloat(averageBlockTime),
-      }),
-      link: RoutePath.BlocksList,
-    },
-    {
-      title: t('stats.total_elections'),
-      description: t('stats.electionCount', {
-        count: stats?.electionCount,
-      }),
-      link: RoutePath.ProcessesList,
-    },
-    {
-      title: t('stats.total_organizations'),
-      description: t('stats.organizations', {
-        count: stats?.organizationCount,
-      }),
-      link: RoutePath.OrganizationsList,
-    },
-    {
-      title: t('stats.total_votes'),
-      description: t('stats.votes', {
-        count: stats?.voteCount,
-      }),
-      link: RoutePath.TransactionsList,
-    },
-  ]
+  const cardSpacing = 4
 
   return (
-    <Flex direction={'column'} gap={4}>
-      <Grid templateColumns={{ base: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }} gap={4} mb={8}>
-        {statsCards.map((card, i) => (
-          <Link to={generatePath(card.link)}>
-            <StatsCard key={i} title={card.title} description={card.description} />
-          </Link>
-        ))}
-      </Grid>
-      <Flex direction={{ base: 'column', lg: 'row' }} alignItems='start' gap={4}>
-        <StatisticsCardWrapper title={t('stats.latest_blocks')} icon={VscGraphLine}>
+    <Flex direction={'column'} gap={8}>
+      <StatsCards />
+      <Flex direction={{ base: 'column', lg: 'row' }} alignItems='start' gap={cardSpacing}>
+        <StatsCardWrapper flex='2' title={t('stats.latest_blocks')} icon={VscGraphLine}>
           <LatestBlocks />
-        </StatisticsCardWrapper>
-        <StatisticsCardWrapper title={t('stats.blockchain_info')} icon={MdSpeed}>
-          <ChainInfo />
-        </StatisticsCardWrapper>
+        </StatsCardWrapper>
+        <ChainInfo />
       </Flex>
     </Flex>
   )
diff --git a/src/components/Validators/Detail.tsx b/src/components/Validators/Detail.tsx
index 4dd39bfe..4ca7bad5 100644
--- a/src/components/Validators/Detail.tsx
+++ b/src/components/Validators/Detail.tsx
@@ -10,16 +10,7 @@ import { ValidatorName } from '~components/Validators/ValidatorCard'
 import { generatePath } from 'react-router-dom'
 import { RoutePath } from '~constants'
 
-export type ValidatorFixedType = IChainValidator & {
-  // todo(kon): delete this type extension when https://github.com/vocdoni/vocdoni-sdk/pull/402 is merged
-  joinHeight: number
-  proposals: number
-  score: number
-  validatorAddress: string
-  votes: number
-}
-
-const DetailsTab = ({ validator }: { validator: ValidatorFixedType }) => {
+const DetailsTab = ({ validator }: { validator: IChainValidator }) => {
   const address = ensure0x(validator.address)
   const pubKey = ensure0x(validator.pubKey)
 
@@ -80,7 +71,7 @@ const DetailsTab = ({ validator }: { validator: ValidatorFixedType }) => {
   )
 }
 
-export const ValidatorDetail = ({ validator }: { validator: ValidatorFixedType }) => {
+export const ValidatorDetail = ({ validator }: { validator: IChainValidator }) => {
   return (
     <Flex direction={'column'} mt={{ base: '20px', lg: '40px' }} gap={6} wordBreak='break-all'>
       <VStack align='start' spacing={4}>
diff --git a/src/components/Validators/ValidatorCard.tsx b/src/components/Validators/ValidatorCard.tsx
index 27b1e1d3..392a999e 100644
--- a/src/components/Validators/ValidatorCard.tsx
+++ b/src/components/Validators/ValidatorCard.tsx
@@ -3,8 +3,8 @@ import { Trans } from 'react-i18next'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { generatePath } from 'react-router-dom'
 import { RoutePath } from '~constants'
-import { ValidatorFixedType } from '~components/Validators/Detail'
 import LinkCard from '~components/Layout/LinkCard'
+import { IChainValidator } from '@vocdoni/sdk'
 
 export const ValidatorName = ({ name, useCopy, address }: { name?: string; useCopy?: boolean; address: string }) => {
   const showName = !!name
@@ -40,7 +40,7 @@ export const ValidatorName = ({ name, useCopy, address }: { name?: string; useCo
   )
 }
 
-export const ValidatorCard = (validator: ValidatorFixedType) => {
+export const ValidatorCard = (validator: IChainValidator) => {
   return (
     <LinkCard to={generatePath(RoutePath.Validator, { address: validator.validatorAddress, tab: null })}>
       <CardBody>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7fd2c2fe..97956c68 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,5 +1,14 @@
 import LandingPage from '~components/Home'
+import { useLoaderData } from 'react-router-dom'
+import { IChainGetInfoResponse } from '@vocdoni/sdk'
+import { useChainInfo } from '~queries/stats'
 
-const Home = () => <LandingPage />
+const Home = () => {
+  const chainInfo = useLoaderData() as IChainGetInfoResponse
+  const {} = useChainInfo({
+    initialData: chainInfo,
+  })
+  return <LandingPage />
+}
 
 export default Home
diff --git a/src/pages/validator.tsx b/src/pages/validator.tsx
index 5ac56c01..a98bc2fb 100644
--- a/src/pages/validator.tsx
+++ b/src/pages/validator.tsx
@@ -1,9 +1,9 @@
 import { useLoaderData, useParams } from 'react-router-dom'
-import { ensure0x, IChainValidatorsListResponse } from '@vocdoni/sdk'
-import { ValidatorDetail, ValidatorFixedType } from '~components/Validators/Detail'
+import { ensure0x, IChainValidator, IChainValidatorsListResponse } from '@vocdoni/sdk'
+import { ValidatorDetail } from '~components/Validators/Detail'
 
 const Validator = () => {
-  const validators = (useLoaderData() as IChainValidatorsListResponse).validators as Array<ValidatorFixedType>
+  const validators = (useLoaderData() as IChainValidatorsListResponse).validators as Array<IChainValidator>
 
   const { address }: { address?: string } = useParams()
 
diff --git a/src/queries/stats.ts b/src/queries/stats.ts
index ae2943c8..1847c421 100644
--- a/src/queries/stats.ts
+++ b/src/queries/stats.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { useClient } from '@vocdoni/react-providers'
-import { ChainAPI, IChainGetInfoResponse } from '@vocdoni/sdk'
 import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
+import { useClient } from '@vocdoni/react-providers'
+import { ChainAPI, IChainGetCostsResponse, IChainGetInfoResponse, IChainTxCosts } from '@vocdoni/sdk'
 
 export type useChainInfoOptions = Omit<UseQueryOptions<IChainGetInfoResponse>, 'queryKey'>
 
@@ -9,7 +9,7 @@ export const useChainInfo = (options?: useChainInfoOptions) => {
   const { client } = useClient<ExtendedSDKClient>()
 
   return useQuery({
-    queryKey: ['chainStats'],
+    queryKey: ['chainStats', 'stats'],
     queryFn: client.chainInfo,
     ...options,
   })
@@ -28,3 +28,21 @@ export const useBlockToDate = ({
     ...options,
   })
 }
+
+export const useChainCosts = ({ ...options }: Omit<UseQueryOptions<IChainGetCostsResponse>, 'queryKey'>) => {
+  const { client } = useClient<ExtendedSDKClient>()
+  return useQuery({
+    queryKey: ['chainStats', 'costs'],
+    queryFn: () => client.fetchChainCosts(),
+    ...options,
+  })
+}
+
+export const useTxsCosts = ({ ...options }: Omit<UseQueryOptions<IChainTxCosts>, 'queryKey'>) => {
+  const { client } = useClient<ExtendedSDKClient>()
+  return useQuery({
+    queryKey: ['chainStats', 'txCost'],
+    queryFn: () => client.txCosts(),
+    ...options,
+  })
+}
diff --git a/src/router/index.tsx b/src/router/index.tsx
index dea6bb0e..d941b9c2 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -44,6 +44,7 @@ export const RoutesProvider = () => {
                   <Home />
                 </SuspenseLoader>
               ),
+              loader: async ({ params }) => await client.chainInfo(),
             },
             {
               path: RoutePath.Block,
diff --git a/src/theme/components/Icons.ts b/src/theme/components/Icons.ts
new file mode 100644
index 00000000..0538d460
--- /dev/null
+++ b/src/theme/components/Icons.ts
@@ -0,0 +1,18 @@
+import { IconType } from 'react-icons'
+import { BiTransferAlt } from 'react-icons/bi'
+import { HiOutlineCube } from 'react-icons/hi2'
+import { IoTimeOutline } from 'react-icons/io5'
+import { GrValidate } from 'react-icons/gr'
+import { FaExternalLinkAlt } from 'react-icons/fa'
+import { FiInfo } from 'react-icons/fi'
+
+type IconName = 'BlockIcon' | 'TxIcon' | 'ClockIcon' | 'ValidatorIcon' | 'ExternalIcon' | 'InfoIcon'
+
+export const Icons: { [key in IconName]: IconType } = {
+  TxIcon: BiTransferAlt,
+  BlockIcon: HiOutlineCube,
+  ClockIcon: IoTimeOutline,
+  ValidatorIcon: GrValidate,
+  ExternalIcon: FaExternalLinkAlt,
+  InfoIcon: FiInfo,
+}
diff --git a/yarn.lock b/yarn.lock
index 28a07840..25998dc9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -178,13 +178,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.8":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
   integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.15.4":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315"
@@ -1903,11 +1910,11 @@
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
 "@types/node@>=13.7.0":
-  version "20.14.12"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.12.tgz#129d7c3a822cb49fc7ff661235f19cfefd422b49"
-  integrity sha512-r7wNXakLeSsGT0H1AU863vS2wa5wBOK4bWMjZz2wj+8nBx+m5PeIn0k8AloSLpRuiwdRQZwarZqHE4FNArPuJQ==
+  version "22.4.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.4.1.tgz#9b595d292c65b94c20923159e2ce947731b6fdce"
+  integrity sha512-1tbpb9325+gPnKK0dMm+/LMriX0vKxf6RnB0SZUqfyVkQ4fMgUSySqhxE/y8Jvs4NyF1yHzTfG9KlnkIODxPKg==
   dependencies:
-    undici-types "~5.26.4"
+    undici-types "~6.19.2"
 
 "@types/parse-json@^4.0.0":
   version "4.0.2"
@@ -1970,9 +1977,9 @@
     "@vocdoni/react-providers" "~0.4.4"
 
 "@vocdoni/extended-sdk@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@vocdoni/extended-sdk/-/extended-sdk-0.1.3.tgz#390a77d9e434e33e0c6dd79fcb48e73db3bb3155"
-  integrity sha512-iMtlWybFdwqu0t458SdMS28q6A826Y7IBOK4UOKX+xmiemKu0Enl/o4YDBa6UVBMjNZ7LHuO60U1Jv3Rpt1gaA==
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@vocdoni/extended-sdk/-/extended-sdk-0.1.4.tgz#e411ea85d08477a3abe71a9bccf9f52428753d8a"
+  integrity sha512-Mu9YA8uywq+GTx8TFnnhp84R/5gfVdE/o6xLy+Om0iIgdCgOk/sAchFx9RUOH3BkDJsr7DkTLHm/AFPAVVL/xg==
 
 "@vocdoni/proto@1.15.8":
   version "1.15.8"
@@ -1989,7 +1996,7 @@
 
 "@vocdoni/sdk@https://github.com/vocdoni/vocdoni-sdk.git#main":
   version "0.8.3"
-  resolved "https://github.com/vocdoni/vocdoni-sdk.git#ef8eebceabb8466129f955c031c0cc00a8dcbb9b"
+  resolved "https://github.com/vocdoni/vocdoni-sdk.git#0f6707560b7c8d3f10888ef928ae6edaf9aeab57"
   dependencies:
     "@ethersproject/abstract-signer" "^5.7.0"
     "@ethersproject/address" "^5.7.0"
@@ -4697,10 +4704,10 @@ underscore.string@~3.3.4:
     sprintf-js "^1.1.1"
     util-deprecate "^1.0.2"
 
-undici-types@~5.26.4:
-  version "5.26.5"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
-  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+undici-types@~6.19.2:
+  version "6.19.6"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.6.tgz#e218c3df0987f4c0e0008ca00d6b6472d9b89b36"
+  integrity sha512-e/vggGopEfTKSvj4ihnOLTsqhrKRN3LeO6qSN/GxohhuRv8qH9bNQ4B8W7e/vFL+0XTnmHPB4/kegunZGA4Org==
 
 unified@^10.0.0:
   version "10.1.2"