Skip to content

Commit

Permalink
finsish responsive for home page, add Skeleton for validators, header…
Browse files Browse the repository at this point in the history 
… width and disable supply, community pool header information
  • Loading branch information
@lichdu29
lichdu29 committed Jan 8, 2025
1 parent 334bc58 commit d081576
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 26 deletions.
97 changes: 79 additions & 18 deletions src/components/home/blocks/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import {
Text,
Table,
For,
Box,
VStack,
useBreakpointValue,
} from "@chakra-ui/react";
import { useBlocks } from "./hooks";
import Link from "next/link";
Expand All @@ -16,6 +19,45 @@ import Proposer from "@/components/helper/proposer";
import { useProfileRecoil } from "@/recoil/profiles/hooks";
import NoData from "@/components/helper/nodata";
import Loading from "@/components/helper/loading";
import HelpLink from "@/components/helper/help_link";

const BlockItemMobile = ({ item, rowIndex }) => {
const { name, address, imageUrl } = useProfileRecoil(item.proposer);

return (
<Box p="5" w="full">
<VStack align="stretch">
<Flex gap={1} direction="column">
<Text>Height</Text>
<HelpLink
href={`/blocks/${item.height}`}
value={numeral(item.height).format("0,0")}
/>
</Flex>
<Flex gap={1} direction="column">
<Text>Proposer</Text>
<Proposer address={address} image={imageUrl} name={name} />
</Flex>
<Flex gap={1} direction="column">
<Text>Hash</Text>
<Text>
{getMiddleEllipsis(item.hash, { beginning: 6, ending: 5 })}
</Text>
</Flex>
<Flex justify="space-between">
<Flex gap={1} direction="column">
<Text>Txs</Text>
<Text>{numeral(item.txs).format("0,0")}</Text>
</Flex>
<Flex gap={1} direction="column">
<Text>Time</Text>
<Text>{dayjs.utc(item.timestamp).fromNow()}</Text>
</Flex>
</Flex>
</VStack>
</Box>
);
};

const BlockItem = ({ item }) => {
const { name, address, imageUrl } = useProfileRecoil(item.proposer);
Expand Down Expand Up @@ -43,6 +85,7 @@ const BlockItem = ({ item }) => {

const Blocks = () => {
const { state } = useBlocks();
const isMobile = useBreakpointValue({ base: true, md: false });

if (state.loading)
return (
Expand All @@ -62,24 +105,42 @@ const Blocks = () => {
</ChakraLink>
</Flex>
{state.items.length ? (
<Table.Root bgColor="inherit" size="sm" showColumnBorder={false}>
<Table.Header>
<Table.Row bgColor="inherit">
<Table.ColumnHeader>Height</Table.ColumnHeader>
<Table.ColumnHeader>Proposer</Table.ColumnHeader>
<Table.ColumnHeader>Hash</Table.ColumnHeader>
<Table.ColumnHeader>Txs</Table.ColumnHeader>
<Table.ColumnHeader>Time</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
<For each={state.items}>
{(item, index) => (
<BlockItem key={`block-${index}`} item={item} />
)}
</For>
</Table.Body>
</Table.Root>
isMobile ? (
<VStack
divideY={"1px"}
divideStyle={"ridge"}
borderRadius="10px"
bg={"white"}
gap={0}
>
{state.items.map((item, index) => (
<BlockItemMobile
key={`block-${index}`}
item={item}
rowIndex={index}
/>
))}
</VStack>
) : (
<Table.Root bgColor="inherit" size="sm" showColumnBorder={false}>
<Table.Header>
<Table.Row bgColor="inherit">
<Table.ColumnHeader>Height</Table.ColumnHeader>
<Table.ColumnHeader>Proposer</Table.ColumnHeader>
<Table.ColumnHeader>Hash</Table.ColumnHeader>
<Table.ColumnHeader>Txs</Table.ColumnHeader>
<Table.ColumnHeader>Time</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
<For each={state.items}>
{(item, index) => (
<BlockItem key={`block-${index}`} item={item} />
)}
</For>
</Table.Body>
</Table.Root>
)
) : (
<NoData />
)}
Expand Down
55 changes: 53 additions & 2 deletions src/components/home/transactions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import {
Text,
Table,
For,
VStack,
Box,
useBreakpointValue,
StackSeparator
} from "@chakra-ui/react";
import { useTransactions } from "./hooks";
import Link from "next/link";
Expand All @@ -14,8 +18,49 @@ import dayjs from "@/utils/dayjs";
import { Status } from "@/components/ui/status";
import Loading from "@/components/helper/loading";

const TxItemMobile = ({ item, rowIndex }) => {
return (
<VStack align="stretch" p={4} key={`transaction-${rowIndex}`}>
<Flex direction={"column"} justify="space-between" gap={1} mb={2}>
<Text>Block</Text>
<ChakraLink asChild colorPalette="blue">
<Link href={`/blocks/${item.height}`}>
{numeral(item.height).format("0,0")}
</Link>
</ChakraLink>
</Flex>
<Flex direction={"column"} justify="space-between" gap={1} mb={2}>
<Text>Hash</Text>
<ChakraLink asChild colorPalette="blue">
<Link href={`/transactions/${item.hash}`}>
{getMiddleEllipsis(item.hash, { beginning: 12, ending: 6 })}
</Link>
</ChakraLink>
</Flex>
<Flex direction={"column"} justify="space-between" gap={1} mb={2}>
<Text>Messages</Text>
<Text>{numeral(item.messages.count).format("0,0")}</Text>
</Flex>
<Flex justify="space-between">
<Flex direction={"column"} justify="space-between" gap={1} mb={2}>
<Text>Result</Text>
<Status value={item.success ? "success" : "error"}>
<Text>{item.success ? "Success" : "Failed"}</Text>
</Status>
</Flex>
<Flex direction={"column"} justify="space-between" gap={1} mb={2}>
<Text>Time</Text>
<Text>{dayjs.utc(item.timestamp).fromNow()}</Text>
</Flex>
</Flex>
</VStack>
);
};

const Transactions = () => {
const { state } = useTransactions();
const isMobile = useBreakpointValue({ base: true, md: false });

if (!state?.items?.length)
return (
<GridItem borderRadius="20px" bgColor="#F6F7F8" py="5" px="8" colSpan={2}>
Expand All @@ -33,7 +78,13 @@ const Transactions = () => {
<Link href="/transactions">See more</Link>
</ChakraLink>
</Flex>
<Table.Root size={"sm"} bgColor="inherit" showColumnBorder={false}>
{isMobile? <Box bg="white" borderRadius="md" overflowY="auto" maxH="auto">
<VStack px={3} separator={<StackSeparator />} align="stretch">
{state.items.map((item, index) => (
<TxItemMobile item={item} rowIndex={index} />
))}
</VStack>
</Box> :<Table.Root size={"sm"} bgColor="inherit" showColumnBorder={false}>
<Table.Header>
<Table.Row bgColor="inherit">
<Table.ColumnHeader>Block</Table.ColumnHeader>
Expand Down Expand Up @@ -73,7 +124,7 @@ const Transactions = () => {
)}
</For>
</Table.Body>
</Table.Root>
</Table.Root>}
</GridItem>
);
};
Expand Down
8 changes: 4 additions & 4 deletions src/components/layout/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ export default function Header() {

return !isMobile ? (
<Flex w="full" gap="20px" align="center" pb="10" direction="column">
<HStack>
<HStack w="full">
<PageHeader />
<HStack divideX="2px">
{/* <HStack divideX="2px">
<Text fontSize="16px">
Supply:
{' '}
Expand All @@ -49,7 +49,7 @@ export default function Header() {
</Link>
{' '}
</Text>
</HStack>
</HStack> */}
<SearchBar />
<Center
w="250px"
Expand All @@ -72,7 +72,7 @@ export default function Header() {
</HStack>
</Flex>
) : (
<Flex flexDirection="column" w="100%" gap="20px" align="center" pb="10">
<Flex flexDirection="column" w="full" gap="20px" align="center" pb="10">
<Flex w="full" gap="10px" align="center" pb="2">
<Link asChild outline="none">
<NextLink href="/">
Expand Down
28 changes: 26 additions & 2 deletions src/components/validators/list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
Center,
Grid,
StackSeparator,
Skeleton
} from "@chakra-ui/react";
import { ProgressBar, ProgressRoot } from "@/components/ui/progress";
import { useValidators } from "./hooks";
Expand All @@ -28,6 +29,22 @@ import SearchValidator from "./search";
import { fetchColumns } from "./utils";
import ColumnHeader from "./header";

const SkeletonValidatorItems = ({ rowCount = 30, columnCount = 6 }) => {
return (
<>
{Array.from({ length: rowCount }).map((_, rowIndex) => (
<Table.Row key={`skeleton-row-${rowIndex}`}>
{Array.from({ length: columnCount }).map((_, colIndex) => (
<Table.Cell key={`skeleton-cell-${rowIndex}-${colIndex}`}>
<Skeleton height="20px" />
</Table.Cell>
))}
</Table.Row>
))}
</>
);
};

const ValidatorItemMobile = ({ item }) => {
const { t } = useTranslation("validators");
const status = getValidatorStatus(item.status, item.jailed, item.tombstoned);
Expand Down Expand Up @@ -239,6 +256,8 @@ const ValidatorList = () => {
borderRadius="10px"
px={"3"}
separator={<StackSeparator />}
maxH={'90vh'}
overflow={'auto'}
>
{items.map((val, idx) => (
<ValidatorItemMobile key={`validator-${idx}`} item={val} />
Expand Down Expand Up @@ -270,14 +289,19 @@ const ValidatorList = () => {
borderRadius: "xl",
}}
>
{!loading &&
{state.loading ? (
<>
<SkeletonValidatorItems />
</>
) : (
items.map((val, idx) => (
<ValidatorItem
item={val}
key={`$validator-${idx}`}
idx={idx}
/>
))}
))
)}
</Table.Body>
</Table.Root>
</Table.ScrollArea>
Expand Down

0 comments on commit d081576

Please sign in to comment.