Feat/all blocks

packages/app-explorer/src/app/blocks/layout.tsx

@@ -0,0 +1,17 @@
+import { OverlayDialog, Providers } from 'app-portal';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'All Blocks',
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Providers>
+      <OverlayDialog />
+      {children}
+    </Providers>
+  );
+}
+
+export const dynamic = 'force-static';

packages/app-explorer/src/app/blocks/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { Box, Flex } from '@fuels/ui';
+import { tv } from 'tailwind-variants';
+import { BlocksScreen } from '~/systems/Block/screens/BlockScreen';
+
+const Blocks = () => {
+  const classes = styles();
+  return (
+    <Flex>
+      <Box className={classes.content()}>
+        <BlocksScreen />
+      </Box>
+    </Flex>
+  );
+};
+const styles = tv({
+  slots: {
+    content: 'w-full max-w-[100%]',
+  },
+});
+export default Blocks;
+
+export const dynamic = 'force-static';

packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx

@@ -0,0 +1,49 @@
+import { Box, HStack, Text, VStack } from '@fuels/ui';
+
+type BlockEfficiencyItemProps = {
+  current: number;
+  total: number;
+};
+
+export default function BlockEfficiencyItem({
+  current,
+  total,
+}: BlockEfficiencyItemProps) {
+  // Convert current and total to millions
+  const currentInMillions = current / 1_000_000;
+  const totalInMillions = total / 1_000_000;
+
+  // Calculate progress percentage
+  const progress = (current / total) * 100;
+
+  return (
+    <Box>
+      <VStack gap="2">
+        <HStack className="justify-between">
+          {/* Format current and total as M (millions) */}
+          <Text className="font-inter text-gray-10 text-[0.7rem]">
+            {currentInMillions % 1 === 0
+              ? currentInMillions.toFixed(0)
+              : currentInMillions.toFixed(1)}
+            M /
+            {totalInMillions % 1 === 0
+              ? totalInMillions.toFixed(0)
+              : totalInMillions.toFixed(1)}
+            M
+          </Text>
+          <Text className="font-inter text-gray-10 text-[0.7rem]">
+            ({progress.toFixed(2)}%)
+          </Text>
+        </HStack>
+        <div className="mt-[4px]">
+          <div className="w-full h-[4px] rounded-full bg-gray-5">
+            <div
+              className="h-full bg-brand rounded-full"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      </VStack>
+    </Box>
+  );
+}

packages/app-explorer/src/systems/Block/components/BlockHashItem.tsx

@@ -0,0 +1,28 @@
+import { Box, Copyable, HStack, VStack } from '@fuels/ui';
+
+type BlockHashItemProps = {
+  hashAddress: string;
+  width: string;
+};
+
+export default function BlockHashItem({
+  hashAddress,
+  width,
+}: BlockHashItemProps) {
+  return (
+    <VStack gap="1">
+      <Box>
+        <HStack width={width} maxWidth={'1'}>
+          <Copyable
+            value={hashAddress}
+            className="font-mono text-gray-10 w-full"
+          >
+            <p className="overflow-hidden text-ellipsis whitespace-nowrap">
+              {hashAddress}
+            </p>
+          </Copyable>
+        </HStack>
+      </Box>
+    </VStack>
+  );
+}

packages/app-explorer/src/systems/Block/components/BlockItem.tsx

@@ -0,0 +1,26 @@
+import { Box, Copyable, HStack, Text, VStack } from '@fuels/ui';
+
+export interface BlockItemProps {
+  blockId: string;
+  ethValue: string;
+}
+
+export default function BlockItem({ blockId, ethValue }: BlockItemProps) {
+  return (
+    <VStack gap="1">
+      <HStack>
+        <Box>
+          <Copyable
+            value={blockId}
+            className="font-mono font-semibold text-sm "
+          >
+            #{blockId}
+          </Copyable>
+        </Box>
+      </HStack>
+      <Text className="text-gray-10 text-xs text-ellipsis w-[7rem]">
+        {ethValue} ETH
+      </Text>
+    </VStack>
+  );
+}

packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx

@@ -0,0 +1,28 @@
+import { Text, VStack } from '@fuels/ui';
+
+type BlockTimeItemProps = {
+  time: Date;
+  timeAgo: string;
+};
+
+export default function BlockTimeItem({ time, 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,
+  });
+
+  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]">
+        {formattedTime}
+      </Text>
+    </VStack>
+  );
+}

packages/app-explorer/src/systems/Block/components/BlockValidatorItem.tsx

@@ -0,0 +1,16 @@
+import { HStack } from '@fuels/ui';
+import BlockHashItem from './BlockHashItem';
+
+type BlockValidatorItemProps = {
+  hashAddress: string;
+};
+
+export default function BlockValidatorItem({
+  hashAddress,
+}: BlockValidatorItemProps) {
+  return (
+    <HStack gap="2" width={'100px'} flexBasis={'100%'}>
+      <BlockHashItem hashAddress={hashAddress} width="100px" />
+    </HStack>
+  );
+}

packages/app-explorer/src/systems/Block/components/BlocksTable.tsx

@@ -0,0 +1,132 @@
+import { GQLBlocksQuery } from '@fuel-explorer/graphql';
+import { GridTable } from '@fuels/ui';
+import { Link } from '@fuels/ui';
+import NextLink from 'next/link';
+import BlockEfficiencyItem from './BlockEfficiencyItem';
+import BlockHashItem from './BlockHashItem';
+import BlockItem from './BlockItem';
+import BlockTimeItem from './BlockTimeItem';
+import BlockValidatorItem from './BlockValidatorItem';
+
+const columns = [
+  {
+    name: 'Block',
+    cell: (row: any) => {
+      const totalGasUsed = (
+        parseFloat(row.node.totalGasUsed) /
+        10 ** 9
+      ).toString();
+      return (
+        <BlockItem blockId={row.node.header.height} ethValue={totalGasUsed} />
+      );
+    },
+    sortable: false,
+  },
+  {
+    name: 'Blockhash',
+    cell: (row: any) => (
+      <BlockHashItem hashAddress={row.node.id} width="100px" />
+    ),
+    sortable: false,
+  },
+  {
+    name: 'Transactions',
+    cell: (row: any) => (
+      <div className="font-mono text-sm text-gray-9">
+        {row.node.header.transactionsCount}
+      </div>
+    ),
+    sortable: false,
+  },
+  {
+    name: 'Rewards',
+    cell: (row: any) => {
+      const mintTransaction = row.node.transactions.find(
+        (trans: any) => trans.mintAmount != null,
+      );
+      return (
+        <div className="font-mono text-sm text-gray-9">
+          {mintTransaction ? mintTransaction.mintAmount : 'No mint amount'}{' '}
+        </div>
+      );
+    },
+    sortable: false,
+  },
+  {
+    name: 'Validator',
+    cell: (row: any) => (
+      <div className="flex items-center justify-center w-full">
+        <BlockValidatorItem hashAddress={row.node.producer} />
+      </div>
+    ),
+    sortable: false,
+  },
+  {
+    name: 'Efficiency',
+    cell: (row: any) => (
+      <div className="w-[10rem]">
+        <BlockEfficiencyItem current={row.node.totalGasUsed} total={30000000} />
+      </div>
+    ),
+    sortable: false,
+  },
+  {
+    name: 'Time',
+    cell: (row: any) => {
+      const unixTimestamp = row.node.time.rawUnix;
+      const date = new Date(unixTimestamp * 1000);
+
+      return <BlockTimeItem timeAgo={row.node.time.fromNow} time={date} />;
+    },
+    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 = {
+  blocks: GQLBlocksQuery['blocks'];
+  onPageChanged: (pageNumber: number) => void;
+  pageCount: number;
+  currentPage: number;
+  setCurrentPage: (currentPage: number) => void;
+};
+
+function BlocksTable({
+  blocks,
+  onPageChanged,
+  pageCount,
+  currentPage,
+  setCurrentPage,
+}: BlocksTableProps) {
+  const handlePageChanged = (pageNumber: number) => {
+    onPageChanged(pageNumber);
+  };
+
+  return (
+    <div>
+      <GridTable
+        columns={columns}
+        data={blocks.edges}
+        onPageChanged={handlePageChanged}
+        pageCount={pageCount}
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+      />
+    </div>
+  );
+}
+
+export default BlocksTable;

packages/app-explorer/src/systems/Block/components/Hero.tsx

@@ -0,0 +1,21 @@
+import { HStack, Heading, Theme, VStack } from '@fuels/ui';
+import { IconChevronRight } from '@tabler/icons-react';
+
+export function Hero() {
+  return (
+    <Theme>
+      <VStack className="gap-0">
+        <Heading as="h1" className="m-0 p-0 font-mono">
+          Blocks
+        </Heading>
+        <HStack align={'center'}>
+          <a href="/" className="text-[#9f9f9f]  r">
+            <p className="m-0">Home</p>
+          </a>
+          <IconChevronRight color="#9f9f9f" size={20} />
+          <p className="m-0">View All Blocks</p>
+        </HStack>
+      </VStack>
+    </Theme>
+  );
+}