feat: added all-blocks UI (#568)

Co-authored-by: Aashay Kapoor <[email protected]>
Co-authored-by: ankit723 <[email protected]>

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 items-center">
+          {/* Format current and total as M (millions) */}
+          <Text className="font-inter text-gray-10 text-[0.7rem] whitespace-nowrap">
+            {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] whitespace-nowrap">
+            ({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,26 @@
+import { Copyable, HStack, VStack } from '@fuels/ui';
+
+type BlockHashItemProps = {
+  hashAddress: string;
+  width: string;
+};
+
+export default function BlockHashItem({
+  hashAddress,
+  width,
+}: BlockHashItemProps) {
+  return (
+    <VStack>
+      <HStack width={width} maxWidth={'1'}>
+        <Copyable
+          value={hashAddress}
+          className="font-mono text-gray-contrast w-full"
+        >
+          <p className="overflow-hidden text-ellipsis whitespace-nowrap text-left">
+            {hashAddress}
+          </p>
+        </Copyable>
+      </HStack>
+    </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] whitespace-nowrap">
+        {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>
+  );
+}