Skip to content

Commit

Permalink
Merge pull request #27 from DevForce99/fix/ui-issues
Browse files Browse the repository at this point in the history 
Fix/UI issues
  • Loading branch information
@aashaykapoor
aashaykapoor authored Oct 1, 2024
2 parents 2ced675 + 6e0389a commit ad41d6d
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 143 deletions.
32 changes: 28 additions & 4 deletions packages/app-explorer/src/systems/Block/components/BlockItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Copyable, HStack, Text, VStack } from '@fuels/ui';
import { Box, Copyable, HStack, VStack } from '@fuels/ui';

export interface BlockItemProps {
blockId: string;
Expand All @@ -18,9 +18,33 @@ export default function BlockItem({ blockId, ethValue }: BlockItemProps) {
</Copyable>
</Box>
</HStack>
<Text className="text-gray-10 text-xs text-ellipsis w-[7rem]">
{ethValue} ETH
</Text>
<div className="flex items-center gap-2">
{ethValue !== '0' ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
className="text-icon inline-flex items-center fuel-Icon"
>
<path d="M14 11h1a2 2 0 0 1 2 2v3a1.5 1.5 0 0 0 3 0v-7l-3 -3" />
<path d="M4 20v-14a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v14" />
<path d="M3 20l12 0" />
<path d="M18 7v1a1 1 0 0 0 1 1h1" />
<path d="M4 11l10 0" />
</svg>
) : (
''
)}
{/* <Text className="text-gray-10 text-xs text-ellipsis w-[7rem]">
{ethValue} ETH
</Text> */}
</div>
</VStack>
);
}
25 changes: 12 additions & 13 deletions packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
import { Text, VStack } from '@fuels/ui';

type BlockTimeItemProps = {
time: Date;
timeAgo: string;
};

export default function BlockTimeItem({ time, timeAgo }: BlockTimeItemProps) {
const timeDate = new Date(time);
export default function BlockTimeItem({ timeAgo }: BlockTimeItemProps) {
// const timeDate = new Date(time);

const formattedTime = timeDate.toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true,
});
// const formattedTime = timeDate.toLocaleString('en-US', {
// year: 'numeric',
// month: 'short',
// day: 'numeric',
// hour: 'numeric',
// minute: 'numeric',
// hour12: true,
// });

return (
<VStack gap="0px">
<Text className="text-[0.7rem] p-0 m-0 text-[#9f9f9f]">{timeAgo}</Text>
<Text className="text-[0.7rem] p-0 m-0 text-[#9f9f9f] whitespace-nowrap">
{/* <Text className="text-[0.7rem] p-0 m-0 text-[#9f9f9f] whitespace-nowrap">
{formattedTime}
</Text>
</Text> */}
</VStack>
);
}
180 changes: 102 additions & 78 deletions packages/app-explorer/src/systems/Block/components/BlocksTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { GQLBlocksQuery } from '@fuel-explorer/graphql';
import { GridTable } from '@fuels/ui';
import { Link } from '@fuels/ui';
import NextLink from 'next/link';
import Link from 'next/link';
import BlockEfficiencyItem from './BlockEfficiencyItem';
import BlockHashItem from './BlockHashItem';
// import BlockHashItem from './BlockHashItem';
import BlockItem from './BlockItem';
import BlockTimeItem from './BlockTimeItem';
import BlockValidatorItem from './BlockValidatorItem';
// import BlockValidatorItem from './BlockValidatorItem';

const columns = [
{
Expand All @@ -21,52 +20,62 @@ const columns = [
10 ** 9
).toString();
return (
<BlockItem blockId={row.node.header.height} ethValue={totalGasUsed} />
<>
<Link
className="w-full mx-3"
href={`/block/${row.node.header.height}/simple`}
>
<BlockItem
blockId={row.node.header.height}
ethValue={totalGasUsed}
/>
</Link>
</>
);
},
sortable: false,
},
{
name: (
<div className="group">
<div className="flex items-center ">
<span className="">Blockhash</span>
<span className="ml-2 cursor-pointer group">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 0.5C5.71442 0.5 4.45772 0.881218 3.3888 1.59545C2.31988 2.30968 1.48676 3.32484 0.994786 4.51256C0.502816 5.70028 0.374095 7.00721 0.624899 8.26809C0.875703 9.52896 1.49477 10.6872 2.40381 11.5962C3.31285 12.5052 4.47104 13.1243 5.73192 13.3751C6.99279 13.6259 8.29973 13.4972 9.48744 13.0052C10.6752 12.5132 11.6903 11.6801 12.4046 10.6112C13.1188 9.54229 13.5 8.28558 13.5 7C13.4982 5.27665 12.8128 3.62441 11.5942 2.40582C10.3756 1.18722 8.72335 0.50182 7 0.5ZM6.75 3.5C6.89834 3.5 7.04334 3.54399 7.16668 3.6264C7.29002 3.70881 7.38615 3.82594 7.44291 3.96299C7.49968 4.10003 7.51453 4.25083 7.48559 4.39632C7.45665 4.5418 7.38522 4.67544 7.28033 4.78033C7.17544 4.88522 7.04181 4.95665 6.89632 4.98559C6.75083 5.01453 6.60003 4.99968 6.46299 4.94291C6.32595 4.88614 6.20881 4.79001 6.1264 4.66668C6.04399 4.54334 6 4.39834 6 4.25C6 4.05109 6.07902 3.86032 6.21967 3.71967C6.36032 3.57902 6.55109 3.5 6.75 3.5ZM7.5 10.5C7.23479 10.5 6.98043 10.3946 6.7929 10.2071C6.60536 10.0196 6.5 9.76522 6.5 9.5V7C6.36739 7 6.24022 6.94732 6.14645 6.85355C6.05268 6.75979 6 6.63261 6 6.5C6 6.36739 6.05268 6.24021 6.14645 6.14645C6.24022 6.05268 6.36739 6 6.5 6C6.76522 6 7.01957 6.10536 7.20711 6.29289C7.39465 6.48043 7.5 6.73478 7.5 7V9.5C7.63261 9.5 7.75979 9.55268 7.85356 9.64645C7.94732 9.74021 8 9.86739 8 10C8 10.1326 7.94732 10.2598 7.85356 10.3536C7.75979 10.4473 7.63261 10.5 7.5 10.5Z"
fill="#646464"
/>
</svg>
</span>
</div>
<div className="absolute left-[20px] top-[30px] w-[20rem] opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 px-3 py-2 text-xs font-light text-black dark:text-white bg-gray-3 rounded-lg shadow-sm">
A unique identifier for this block, generated by hashing its data.
<div className="absolute left-[10px] top-[-6px] w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[6px] border-b-gray-3" />
</div>
</div>
),
cell: (row: any) => (
<BlockHashItem hashAddress={row.node.id} width="108px" />
),
sortable: false,
},
// {
// name: (
// <div className="group">
// <div className="flex items-center ">
// <span className="">daHeight</span>
// <span className="ml-2 cursor-pointer group">
// <svg
// width="14"
// height="14"
// viewBox="0 0 14 14"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// >
// <path
// d="M7 0.5C5.71442 0.5 4.45772 0.881218 3.3888 1.59545C2.31988 2.30968 1.48676 3.32484 0.994786 4.51256C0.502816 5.70028 0.374095 7.00721 0.624899 8.26809C0.875703 9.52896 1.49477 10.6872 2.40381 11.5962C3.31285 12.5052 4.47104 13.1243 5.73192 13.3751C6.99279 13.6259 8.29973 13.4972 9.48744 13.0052C10.6752 12.5132 11.6903 11.6801 12.4046 10.6112C13.1188 9.54229 13.5 8.28558 13.5 7C13.4982 5.27665 12.8128 3.62441 11.5942 2.40582C10.3756 1.18722 8.72335 0.50182 7 0.5ZM6.75 3.5C6.89834 3.5 7.04334 3.54399 7.16668 3.6264C7.29002 3.70881 7.38615 3.82594 7.44291 3.96299C7.49968 4.10003 7.51453 4.25083 7.48559 4.39632C7.45665 4.5418 7.38522 4.67544 7.28033 4.78033C7.17544 4.88522 7.04181 4.95665 6.89632 4.98559C6.75083 5.01453 6.60003 4.99968 6.46299 4.94291C6.32595 4.88614 6.20881 4.79001 6.1264 4.66668C6.04399 4.54334 6 4.39834 6 4.25C6 4.05109 6.07902 3.86032 6.21967 3.71967C6.36032 3.57902 6.55109 3.5 6.75 3.5ZM7.5 10.5C7.23479 10.5 6.98043 10.3946 6.7929 10.2071C6.60536 10.0196 6.5 9.76522 6.5 9.5V7C6.36739 7 6.24022 6.94732 6.14645 6.85355C6.05268 6.75979 6 6.63261 6 6.5C6 6.36739 6.05268 6.24021 6.14645 6.14645C6.24022 6.05268 6.36739 6 6.5 6C6.76522 6 7.01957 6.10536 7.20711 6.29289C7.39465 6.48043 7.5 6.73478 7.5 7V9.5C7.63261 9.5 7.75979 9.55268 7.85356 9.64645C7.94732 9.74021 8 9.86739 8 10C8 10.1326 7.94732 10.2598 7.85356 10.3536C7.75979 10.4473 7.63261 10.5 7.5 10.5Z"
// fill="#646464"
// />
// </svg>
// </span>
// </div>
// <div className="absolute left-[20px] top-[30px] w-[20rem] opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 px-3 py-2 text-xs font-light text-black dark:text-white bg-gray-3 rounded-lg shadow-sm">
// A unique identifier for this block, generated by hashing its data.
// <div className="absolute left-[10px] top-[-6px] w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[6px] border-b-gray-3" />
// </div>
// </div>
// ),
// cell: (_row: any) => 'daHeight data',
// sortable: false,
// },
{
name: (
<div className="relative flex items-center group">
<span className="group">Transactions</span>
</div>
),
cell: (row: any) => (
<div className="font-mono text-sm text-gray-contrast">
{row.node.header.transactionsCount}
</div>
<Link className="w-full" href={`/block/${row.node.header.height}/simple`}>
<div className="font-mono text-sm text-gray-contrast">
{row.node.header.transactionsCount}
</div>
</Link>
),
sortable: false,
},
Expand Down Expand Up @@ -102,27 +111,34 @@ const columns = [
(trans: any) => trans.mintAmount != null,
);
return (
<div className="font-mono text-sm text-gray-contrast w-full flex justify-start pl-6 px-1">
{mintTransaction ? mintTransaction.mintAmount : 'No mint amount'}{' '}
</div>
<Link
className="w-full"
href={`/block/${row.node.header.height}/simple`}
>
<div className="font-mono text-sm text-gray-contrast w-full flex justify-start pl-6 px-1">
{mintTransaction
? mintTransaction.mintAmount / 10 ** 9
: 'No mint amount'}{' '}
</div>
</Link>
);
},
sortable: false,
},

{
name: (
<div className="flex group">
<span className="">Producer</span>
</div>
),
cell: (row: any) => (
<div className="flex items-center justify-center w-130">
<BlockValidatorItem hashAddress={row.node.producer} />
</div>
),
sortable: false,
},
// {
// name: (
// <div className="flex group">
// <span className="">Producer</span>
// </div>
// ),
// cell: (row: any) => (
// <div className="flex items-center justify-center w-130">
// <BlockValidatorItem hashAddress={row.node.producer} />
// </div>
// ),
// sortable: false,
// },
{
name: (
<div className=" group">
Expand Down Expand Up @@ -150,9 +166,14 @@ const columns = [
</div>
),
cell: (row: any) => (
<div className="w-[6.8rem]">
<BlockEfficiencyItem current={row.node.totalGasUsed} total={30000000} />
</div>
<Link className="w-full" href={`/block/${row.node.header.height}/simple`}>
<div className="w-[6.8rem]">
<BlockEfficiencyItem
current={row.node.totalGasUsed / 128000}
total={30000000}
/>
</div>
</Link>
),
sortable: false,
},
Expand All @@ -163,31 +184,34 @@ const columns = [
</div>
),
cell: (row: any) => {
const unixTimestamp = row.node.time.rawUnix;
const date = new Date(unixTimestamp * 1000);

return (
<div className="w-[6.5rem]">
<BlockTimeItem timeAgo={row.node.time.fromNow} time={date} />
</div>
<Link
className="w-full"
href={`/block/${row.node.header.height}/simple`}
>
<div className="w-[6.5rem]">
<BlockTimeItem timeAgo={row.node.time.fromNow} />
</div>
</Link>
);
},
sortable: false,
},
{
name: '',
cell: (row: any) => (
<Link
as={NextLink}
isExternal={false}
href={`/block/${row.node.header.height}/simple`}
className="px-4 py-[0.4rem] bg-gray-3 hover:bg-black hover:text-white dark:hover:bg-brand text-black dark:text-white rounded font-semibold font-mono"
>
View
</Link>
),
sortable: false,
},
// {
// name: '',
// cell: (row: any) => (
// // <Link
// // as={NextLink}
// // isExternal={false}
// // href={`/block/${row.node.header.height}/simple`}
// // className="px-4 py-[0.4rem] bg-gray-3 hover:bg-black hover:text-white dark:hover:bg-brand text-black dark:text-white rounded font-semibold font-mono"
// // >
// // View
// // </Link>
// ""
// ),
// sortable: false,
// },
];

type BlocksTableProps = {
Expand Down
15 changes: 5 additions & 10 deletions packages/app-explorer/src/systems/Block/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import { HStack, Heading, Theme, VStack } from '@fuels/ui';
import { IconChevronRight } from '@tabler/icons-react';
import { Heading, Theme, VStack } from '@fuels/ui';

export function Hero() {
return (
<Theme>
<VStack className="gap-0 px-[0.85rem]">
<Heading as="h1" className="m-0 p-0 font-mono">
<Heading
as="h1"
className="text-2xl leading-snug text-heading justify-center tablet:text-left tablet:text-4xl tablet:justify-start"
>
Blocks
</Heading>
<HStack align={'center'} className="mb-3">
<a href="/" className="text-[#9f9f9f] r">
<p className="m-0 text-[14px]">Home</p>
</a>
<IconChevronRight color="#9f9f9f" size={20} />
<p className="m-0">View All Blocks</p>
</HStack>
</VStack>
</Theme>
);
Expand Down
Loading

0 comments on commit ad41d6d

Please sign in to comment.