(DO NOT MERGE) Feat/explorer homepage UI

package.json

@@ -125,5 +125,9 @@
       "ws@<8.17.1": ">=8.17.1",
       "fast-loops@<1.1.4": ">=1.1.4"
     }
+  },
+  "dependencies": {
+    "embla-carousel-react": "8.1.8",
+    "recharts": "2.12.7"
   }
 }

packages/app-commons/src/components/PageTitle/PageTitle.tsx

@@ -1,6 +1,6 @@
 'use client';
 import type { BaseProps } from '@fuels/ui';
-import { Badge, HStack, Heading } from '@fuels/ui';
+import { HStack, Heading } from '@fuels/ui';
 import { tv } from 'tailwind-variants';
 
 export type PageTitleProps = BaseProps<{
@@ -15,18 +15,12 @@ export function PageTitle({
   children,
   as = 'h2',
   size = '1',
-  icon,
   rightElement,
   className,
 }: PageTitleProps) {
   const classes = styles({ size });
   return (
     <Heading as={as} className={classes.root({ className })}>
-      {icon && (
-        <Badge color="gray" size="2" className={classes.icon()}>
-          {icon}
-        </Badge>
-      )}
       <HStack className={classes.title()}>{children}</HStack>
       <div className="flex items-center h-full tablet:self-center">
         {rightElement}
@@ -38,8 +32,7 @@ export function PageTitle({
 const styles = tv({
   slots: {
     root: [
-      'first:mb-8 flex items-center justify-between gap-2',
-      'border-border border-b',
+      'first:mb-4 flex items-center justify-between gap-2',
       'tablet:flex-nowrap tablet:gap-4',
     ],
     icon: ['h-full flex-shrink-0 px-2', 'tablet:self-start tablet:mt-1.5'],

packages/app-explorer/package.json

@@ -23,6 +23,7 @@
     "@vercel/analytics": "1.1.3",
     "app-commons": "workspace:*",
     "app-portal": "workspace:*",
+    "chart.js": "4.4.3",
     "clsx": "2.1.0",
     "csstype": "3.1.3",
     "dayjs": "1.11.10",
@@ -38,10 +39,15 @@
     "next": "14.1.0",
     "next-themes": "0.2.1",
     "react": "18.2.0",
+    "react-chartjs-2": "5.2.0",
+    "react-data-table-component": "7.6.2",
     "react-dom": "18.2.0",
     "react-json-view-lite": "1.4.0",
+    "react-modal": "3.16.1",
     "react-use": "17.5.0",
     "react-window": "1.8.10",
+    "styled-components": "6.1.12",
+    "recharts": "2.12.7",
     "tai64": "1.0.0",
     "tailwind-variants": "0.1.20",
     "wagmi": "2.12.1",
@@ -68,6 +74,7 @@
     "@types/node": "20.11.6",
     "@types/react": "18.2.54",
     "@types/react-dom": "18.2.22",
+    "@types/react-modal": "3.16.3",
     "@types/react-window": "1.8.8",
     "@xstate/cli": "^0.5.17",
     "autoprefixer": "10.4.17",

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 justify="center">
+      <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/app/globals.css

@@ -1,8 +1,8 @@
 :root {
   --hero-bg: #000;
+  --font-geist-mono: 'GeistMono', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Courier, monospace;
 }
 
-h1,
 h2,
 h3,
 h4,
@@ -11,6 +11,11 @@ h6 {
   font-weight: 600;
   letter-spacing: -0.025em;
 }
+
+h1,
+h2{
+  font-family: var(--font-geist-mono);
+}
 kbd {
   font-size: 0.875rem;
   font-family: var(--default-font-family);

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

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

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

@@ -0,0 +1,14 @@
+import dynamicImport from 'next/dynamic';
+
+const Page = dynamicImport(
+  async () => import('~/systems/NFTs/screens/NFTsScreen'),
+  {
+    ssr: false,
+  },
+);
+
+export default function NFTs() {
+  return <Page />;
+}
+
+export const dynamic = 'force-static';

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

@@ -1,20 +1,42 @@
+'use client';
+import { GridTable } from '@fuels/ui';
 import { Suspense } from 'react';
+import { useState } from 'react';
+import { columns, data } from '~/systems/Home/components/DataTable/data';
 import { TxListLoader } from '~/systems/Transactions/components/TxList/TxListLoader';
+import { TxsAccountTable } from '~/systems/Transactions/components/TxsAccontTable/TxsAccountTable';
 import { TxsTitle } from '~/systems/Transactions/components/TxsTitle/TxsTitle';
-import { TxsScreenSync } from '~/systems/Transactions/pages/TxsScreenSync';
+import { TxsTokenTable } from '~/systems/Transactions/components/TxsTokenTable/TxsTokenTable';
 import type { TxsRouteProps } from '~/systems/Transactions/types';
 
-export default async function Home({
-  searchParams: { cursor, dir },
-}: TxsRouteProps) {
+export default function Home({ searchParams: { page = '1' } }: TxsRouteProps) {
+  const [activeTab, setActiveTab] = useState('Top Tokens');
+  const [currentGridPage, setCurrentGridPage] = useState<number>(0);
   return (
     <>
-      <TxsTitle />
-      <Suspense key={cursor} fallback={<TxListLoader numberOfTxs={10} />}>
-        <TxsScreenSync cursor={cursor} dir={dir} />
+      <TxsTitle activeTab={activeTab} setActiveTab={setActiveTab} />
+
+      <Suspense
+        key={page}
+        fallback={<TxListLoader page={page} numberOfTxs={10} />}
+      >
+        {activeTab === 'Top Tokens' ? (
+          <GridTable
+            onPageChanged={() => {}}
+            data={data}
+            columns={columns}
+            pageCount={1}
+            currentPage={currentGridPage}
+            setCurrentPage={setCurrentGridPage}
+          />
+        ) : activeTab === 'Top NFTs' ? (
+          <TxsTokenTable />
+        ) : activeTab === 'Top Accounts' ? (
+          <TxsAccountTable />
+        ) : (
+          ''
+        )}
       </Suspense>
     </>
   );
 }
-
-export const revalidate = 10;

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

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

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

@@ -0,0 +1,15 @@
+import dynamicImport from 'next/dynamic';
+
+const Page = dynamicImport(
+  async () => import('~/systems/Statistics/screens/StatisticsScreen'),
+  {
+    ssr: false,
+    // loading: EcosystemScreenLoader,
+  },
+);
+
+export default function Statistics() {
+  return <Page />;
+}
+
+export const dynamic = 'force-static';

packages/app-explorer/src/systems/Block/actions/get-blocks.ts

@@ -0,0 +1,30 @@
+'use server';
+
+import { z } from 'zod';
+import { act } from '~/systems/Core/utils/act-server';
+import { sdk } from '~/systems/Core/utils/sdk';
+
+const PER_PAGE = 10;
+
+const schema = z.object({
+  cursor: z.string().optional().nullable(),
+  dir: z.enum(['after', 'before']).optional(),
+});
+
+export const getBlocks = act(schema, async ({ cursor, dir = 'after' }) => {
+  const params = { last: PER_PAGE } as {
+    first?: number;
+    last?: number;
+    before?: string;
+    after?: string;
+  };
+  if (cursor && dir === 'after') {
+    params.after = cursor;
+  }
+  if (cursor && dir === 'before') {
+    params.before = cursor;
+  }
+
+  const { data } = await sdk.blocks(params);
+  return data;
+});

packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem/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/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/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>
+  );
+}