Frontend homepage

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

@@ -9,16 +9,14 @@ 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">
+      <VStack gap="0.5" p={'1'}>
         <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">
@@ -39,7 +37,7 @@ export default function BlockEfficiencyItem({
           <div className="w-full h-[4px] rounded-full bg-gray-5">
             <div
               className="h-full bg-brand rounded-full"
-              style={{ width: `${progress}%` }}
+              style={{ width: `${progress > 100 ? 100 : progress}%` }}
             />
           </div>
         </div>

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

@@ -1,4 +1,5 @@
 import { Box, Copyable, HStack, Text, VStack } from '@fuels/ui';
+import Link from 'next/link';
 
 export interface BlockItemProps {
   blockId: string;
@@ -7,20 +8,44 @@ export interface BlockItemProps {
 
 export default function BlockItem({ blockId, ethValue }: BlockItemProps) {
   return (
-    <VStack gap="1">
-      <HStack>
+    <VStack gap="">
+      <HStack gap={'0'}>
         <Box>
           <Copyable
             value={blockId}
-            className="font-mono font-semibold text-sm "
+            className="font-mono font-semibold text-sm whitespace-nowrap"
           >
             #{blockId}
           </Copyable>
         </Box>
       </HStack>
-      <Text className="text-gray-10 text-xs text-ellipsis w-[7rem]">
-        {ethValue} ETH
-      </Text>
+      <Link href={`/block/${blockId}/simple`}>
+        <div className="flex sm:hidden items-center gap-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>
+      </Link>
     </VStack>
   );
 }

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

@@ -1,28 +1,25 @@
-import { Text, VStack } from '@fuels/ui';
+import { Box, Text, VStack, useBreakpoints } 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,
-  });
+export default function BlockTimeItem({ timeAgo }: BlockTimeItemProps) {
+  const { isMobile } = useBreakpoints();
 
   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>
+    <Box className="text-ellipsis">
+      <VStack gap="0px" className={isMobile ? 'w-full' : ''}>
+        <Text
+          className={
+            isMobile
+              ? 'truncate w-100 text-[0.7rem] text-end text-ellipsis overflow-hidden'
+              : 'text-[0.7rem] text-center whitespace-nowrap max-w-full'
+          }
+        >
+          {timeAgo}
+        </Text>
+      </VStack>
+    </Box>
   );
 }