Skip to content

Commit

Permalink
Fix latest blocks spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
selankon committed Sep 9, 2024
1 parent 54695a6 commit 9694d31
Showing 1 changed file with 13 additions and 33 deletions.
46 changes: 13 additions & 33 deletions src/components/Stats/LatestBlocks.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,30 @@
import { Button, Stack } from '@chakra-ui/react'
import { Flex } from '@chakra-ui/react'
import { keepPreviousData } from '@tanstack/react-query'
import { Trans } from 'react-i18next'
import { generatePath, Link as RouterLink } from 'react-router-dom'
import { BlockCard } from '~components/Blocks/BlockCard'
import { ContentError } from '~components/Layout/ContentError'
import { LoadingCards } from '~components/Layout/Loading'
import { RoutePath } from '~constants'
import { PaginatedAsyncList } from '~components/Layout/AsyncList'
import { useBlockList } from '~queries/blocks'
import { useChainInfo } from '~queries/stats'

export const LatestBlocks = () => {
const blockListSize = 3

const { data: stats, isLoading: isLoadingStats } = useChainInfo()
const {
data: blocks,
isLoading: isLoadingBlocks,
error,
isError,
} = useBlockList({
const { data, isLoading, error, isError } = useBlockList({
params: {
page: 0,
limit: blockListSize,
},
enabled: !!stats?.height,
placeholderData: keepPreviousData,
})

const isLoading = isLoadingStats || isLoadingBlocks

if (isLoading || !stats || !stats?.height || !blocks) {
return <LoadingCards length={blockListSize} />
}

if (isError) {
return <ContentError error={error} />
}

return (
<Stack spacing={4}>
{blocks.blocks.map((block, i) => (
<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>
</Button>
</Stack>
<Flex direction={'column'} gap={7}>
<PaginatedAsyncList
isLoading={isLoading}
elements={data?.blocks}
isError={isError}
error={error}
component={({ element }) => <BlockCard block={element} />}
skeletonProps={{ length: blockListSize }}
/>
</Flex>
)
}

0 comments on commit 9694d31

Please sign in to comment.