From 45164f73e300a6122114d8a658926246a7302985 Mon Sep 17 00:00:00 2001
From: Raghu Kapur <64493087+raghukapur9@users.noreply.github.com>
Date: Fri, 27 Sep 2024 09:29:10 -0400
Subject: [PATCH] feat: update homepage (#589)

Co-authored-by: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com>
Co-authored-by: aashaykapoor-bimaplan <104904081+aashaykapoor-bimaplan@users.noreply.github.com>
Co-authored-by: shivam-25 <shivamdixit7077@gmail.com>
Co-authored-by: ankit723 <varanasiartist.omg@gmail.com>
---
 package.json                                  |   5 +
 packages/app-explorer/package.json            |   2 +
 packages/app-explorer/src/app/layout.tsx      |   2 +-
 .../src/systems/Block/screens/BlockScreen.tsx |  29 +-
 .../systems/Core/components/Layout/Layout.tsx |  16 +-
 .../Home/components/BlockTableTile.tsx        |  77 +++
 .../Home/components/DailyTransaction.tsx      | 141 ++++++
 .../Home/components/DataTable/GridTable.tsx   | 131 +++++
 .../Home/components/DataTable/index.tsx       |  34 ++
 .../Home/components/GasSpentChart/index.tsx   | 144 ++++++
 .../Home/components/Hero/Hero.stories.tsx     |  35 ++
 .../src/systems/Home/components/Hero/Hero.tsx | 227 ++++++++-
 .../Hero/actions/get-blocks-dashboard.ts      |   1 +
 .../Home/components/Hero/actions/get-tps.ts   |   1 +
 .../systems/Home/components/LatestBlock.tsx   |  64 +++
 .../src/systems/Home/components/TPS.tsx       | 151 ++++++
 .../Home/components/TotalDapps/TotalDapps.tsx | 140 ++++++
 .../components/TrendingCard/TrendingCard.tsx  |  31 ++
 .../Home/components/TrendingCardCarousel.tsx  | 132 +++++
 .../Home/interface/blocks.interface.ts        |   6 +
 .../components/TxsTitle/TxsTitle.tsx          |   1 -
 packages/ui/package.json                      |   1 +
 .../src/components/Box/RoundedContainer.tsx   |  25 +
 packages/ui/src/components/Box/index.tsx      |   3 +
 .../ui/src/components/Carousel/Carousel.tsx   | 195 ++++++++
 packages/ui/src/components/Carousel/index.tsx |  11 +
 packages/ui/src/components/Charts/Charts.tsx  | 366 ++++++++++++++
 packages/ui/src/components/Charts/index.tsx   |  10 +
 packages/ui/src/index.ts                      |   4 +-
 packages/ui/src/theme/tailwind-preset.ts      |   6 +
 pnpm-lock.yaml                                | 461 ++++++++++++++----
 31 files changed, 2321 insertions(+), 131 deletions(-)
 create mode 100644 packages/app-explorer/src/systems/Home/components/BlockTableTile.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/DataTable/GridTable.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/DataTable/index.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/Hero/Hero.stories.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/LatestBlock.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/TPS.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/TrendingCard/TrendingCard.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/components/TrendingCardCarousel.tsx
 create mode 100644 packages/app-explorer/src/systems/Home/interface/blocks.interface.ts
 create mode 100644 packages/ui/src/components/Box/RoundedContainer.tsx
 create mode 100644 packages/ui/src/components/Carousel/Carousel.tsx
 create mode 100644 packages/ui/src/components/Carousel/index.tsx
 create mode 100644 packages/ui/src/components/Charts/Charts.tsx
 create mode 100644 packages/ui/src/components/Charts/index.tsx

diff --git a/package.json b/package.json
index 9576bd344..ff0395e5e 100644
--- a/package.json
+++ b/package.json
@@ -136,5 +136,10 @@
       "ws@<8.17.1": ">=8.17.1",
       "fast-loops@<1.1.4": ">=1.1.4"
     }
+  },
+  "dependencies": {
+    "react-data-table-component": "7.6.2",
+    "react-paginate": "8.2.0",
+    "recharts": "2.12.7"
   }
 }
diff --git a/packages/app-explorer/package.json b/packages/app-explorer/package.json
index 142cbe77f..a261e57a0 100644
--- a/packages/app-explorer/package.json
+++ b/packages/app-explorer/package.json
@@ -40,8 +40,10 @@
     "react": "18.2.0",
     "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",
+    "recharts": "2.12.7",
     "tai64": "1.0.0",
     "tailwind-variants": "0.1.20",
     "wagmi": "2.12.7",
diff --git a/packages/app-explorer/src/app/layout.tsx b/packages/app-explorer/src/app/layout.tsx
index f3323df9f..82c379600 100644
--- a/packages/app-explorer/src/app/layout.tsx
+++ b/packages/app-explorer/src/app/layout.tsx
@@ -43,7 +43,7 @@ export default function RootLayout({
       <body>
         <ThemeProvider>
           <PointsProgramEyebrow />
-          <Layout contentClassName="[&_.rt-ContainerInner]:flex-col [&_.rt-ContainerInner]:gap-10">
+          <Layout contentClassName="[&_.rt-ContainerInner]:flex-col [&_.rt-ContainerInner]:gap-10 bg-gray-3 dark:bg-gray-1">
             {children}
           </Layout>
           <Analytics />
diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx
index a428fa585..527883f74 100644
--- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx
+++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx
@@ -46,14 +46,35 @@ export const BlocksScreen = () => {
       let newCursor: string | null = null;
       setDir(newDir);
 
-      if (newDir === 'before' && data.pageInfo.endCursor) {
-        newCursor = data.pageInfo.endCursor;
-      } else if (newDir === 'after' && data.pageInfo.startCursor) {
-        newCursor = data.pageInfo.startCursor;
+      if (
+        newPageNumber === currentPage + 1 ||
+        newPageNumber === currentPage - 1
+      ) {
+        if (newDir === 'before' && data.pageInfo.endCursor) {
+          newCursor = data.pageInfo.endCursor;
+        } else if (newDir === 'after' && data.pageInfo.startCursor) {
+          newCursor = data.pageInfo.startCursor;
+        }
+      } else {
+        if (newDir === 'before' && data.pageInfo.endCursor) {
+          newCursor = (
+            +data.pageInfo.endCursor -
+            (newPageNumber - currentPage) * limit
+          ).toString();
+        } else if (newDir === 'after' && data.pageInfo.startCursor) {
+          newCursor = (
+            +data.pageInfo.startCursor +
+            (currentPage - newPageNumber) * limit
+          ).toString();
+        }
       }
 
       setCurrentPage(newPageNumber);
       setCurrentCursor(newCursor);
+      if (newPageNumber === 1) {
+        router.push('/blocks');
+        return;
+      }
       router.push(`/blocks?page=${newPageNumber}&cursor=${newCursor}`);
     }
   };
diff --git a/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx b/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx
index 0041f44ed..82e808434 100644
--- a/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx
+++ b/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { Container, VStack } from '@fuels/ui';
+import { Container, LoadingBox, VStack } from '@fuels/ui';
 import { usePathname } from 'next/navigation';
-import { Hero } from '~/systems/Home/components/Hero/Hero';
+const Hero = React.lazy(() => import('~/systems/Home/components/Hero/Hero'));
+import { DateTime } from 'fuels';
+import React, { Suspense } from 'react';
 import { cx } from '../../utils/cx';
 import { Footer } from '../Footer/Footer';
 import { TopNav } from '../TopNav/TopNav';
@@ -15,15 +17,19 @@ export type LayoutProps = {
 export function Layout({ children, contentClassName }: LayoutProps) {
   const pathname = usePathname();
   const isHomePage = pathname === '/';
-
+  console.log('Page loaded', DateTime.now);
   return (
     <VStack className="min-w-screen min-h-screen" gap="0">
       <TopNav />
-      {isHomePage && <Hero />}
+      {isHomePage && (
+        <Suspense fallback={<LoadingBox className="w-full h-[12rem]" />}>
+          <Hero />
+        </Suspense>
+      )}
       <Container
         size="4"
         className={cx(
-          'py-8 pb-10 px-6 tablet:px-10 tablet:py-12 tablet:pb-8 laptop:py-16 laptop:pb-18 min-h-[80vh]',
+          'py-8 pb-10 px-6 tablet:px-10 tablet:py-8 tablet:pb-8 laptop:py-8 laptop:pb-18 min-h-[80vh]',
           contentClassName,
         )}
       >
diff --git a/packages/app-explorer/src/systems/Home/components/BlockTableTile.tsx b/packages/app-explorer/src/systems/Home/components/BlockTableTile.tsx
new file mode 100644
index 000000000..597fc2560
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/BlockTableTile.tsx
@@ -0,0 +1,77 @@
+import { HStack, RoundedContainer, VStack } from '@fuels/ui';
+import { tv } from 'tailwind-variants';
+import { fromNow } from '~/systems/Core/utils/dayjs';
+import { Block } from '../interface/blocks.interface';
+
+interface BlockTableProps {
+  block: Block;
+}
+
+export const BlockTableTile: React.FC<BlockTableProps> = ({ block }) => {
+  const classes = styles();
+
+  return (
+    <RoundedContainer className="bg-white hover:bg-gray-5 py-3">
+      <HStack align={'center'} className="justify-between">
+        <div className="space-y-[4px]">
+          <p className={classes.paragraphStrong()}>#{block.blockNo}</p>
+          <p className={classes.paragraph()}>{+block.gasUsed / 10 ** 9} ETH</p>
+        </div>
+        <div className="flex items-center gap-[4px] overflow-hidden">
+          <p
+            className={`${classes.paragraph()} overflow-hidden text-ellipsis whitespace-nowrap w-[100px]`}
+          >
+            {block.producer}
+          </p>
+        </div>
+
+        <div className="space-y-[4px]">
+          <VStack gap={'0'}>
+            <HStack gap={'1'} className="items-center">
+              <svg
+                width="11"
+                height="8"
+                viewBox="0 0 11 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.875 4.25L3.5 6.875L9.5 0.875"
+                  stroke="#00F58C"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              <p className={classes.paragraphAccent()}>Settled</p>
+            </HStack>
+            <p
+              className={`${classes.paragraph()} overflow-hidden text-ellipsis whitespace-nowrap`}
+            >
+              {fromNow(block.timeStamp)}
+            </p>
+          </VStack>
+        </div>
+      </HStack>
+    </RoundedContainer>
+  );
+};
+
+const styles = tv({
+  slots: {
+    paragraphStrong: [
+      'text-[12px]',
+      'text-[color:var(--gray-12)]',
+      'font-bold',
+      ' w-[110px]',
+    ],
+    paragraph: [
+      'text-muted',
+      'text-[12px]',
+      'p-0',
+      'whitespace-nowrap',
+      'text-ellipsis',
+    ],
+    paragraphAccent: ['text-accent text-[12px] p-0'],
+  },
+});
diff --git a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx
new file mode 100644
index 000000000..8420475ff
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx
@@ -0,0 +1,141 @@
+import { ChartConfig, RoundedContainer } from '@fuels/ui';
+import dayjs from 'dayjs';
+import { DateTime } from 'fuels';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: '#00F58C',
+  },
+} satisfies ChartConfig;
+
+interface DailyTransactionProps {
+  blocks: any;
+}
+
+const DailyTransaction = (blocks: DailyTransactionProps) => {
+  const chartData = blocks.blocks?.reduce(
+    (acc: { [key: string]: number }, block: any) => {
+      const time = dayjs(Number(block.time)).format('HH:mm');
+      const value = +block.value;
+      acc[time] = (acc[time] || 0) + value;
+      return acc;
+    },
+    {},
+  );
+
+  const chartDataArray = chartData
+    ? Object.entries(chartData).map(([time, value]) => ({
+        time,
+        value,
+      }))
+    : [];
+  const cumilativeTsx = blocks.blocks.reduce(
+    (sum: any, block: any) => sum + Number(block.value),
+    0,
+  );
+  return (
+    <RoundedContainer className="py-4 px-5 h-full space-y-8 ">
+      <div className="space-y-[16px]">
+        <div className="flex items-center justify-between">
+          <div className="text-[15px] leading-[24px] text-heading font-semibold group relative">
+            <div className=" relative group">
+              <div className="flex items-center group">
+                <span className="">Daily Transactions</span>
+                <span className="ml-2 group cursor-pointer">
+                  <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">
+                The total number of transactions completed on Fuel Network
+                within a 24-hour period.
+                <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>
+          </div>
+          <span className="text-[13px] leading-[20px] text-muted block">
+            24h
+          </span>
+        </div>
+        <h2 className="text-[32px] leading-[36px] text-heading font-bold">
+          {cumilativeTsx.toLocaleString()}
+        </h2>
+
+        <ResponsiveContainer width="100%" height={160}>
+          <LineChart
+            data={chartDataArray}
+            margin={{ top: 10, right: 0, left: -20, bottom: 0 }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="#333"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="time"
+              tick={{
+                fontSize: 10,
+                className: 'fill-heading',
+              }}
+            />
+            <Tooltip
+              formatter={(value) => [`${Number(value)}`]}
+              labelFormatter={(label) => label.toLocaleString()}
+              contentStyle={{
+                backgroundColor: 'var(--gray-1)',
+                borderColor: 'var(--gray-2)',
+                borderRadius: '8px',
+                color: 'var(--gray-1)',
+              }}
+              labelStyle={{
+                color: 'var(--gray-12)',
+                fontWeight: 'bold',
+              }}
+              itemStyle={{
+                color: '#00F58C',
+              }}
+              cursor={{ strokeWidth: 0.1, radius: 10 }}
+            />
+            <YAxis
+              tick={{
+                fontSize: 12,
+                className: 'fill-heading',
+                key: DateTime.now(),
+              }}
+            />
+            <Line
+              type="monotone"
+              dataKey="value"
+              stroke={chartConfig.desktop.color}
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </RoundedContainer>
+  );
+};
+
+export default DailyTransaction;
diff --git a/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.tsx b/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.tsx
new file mode 100644
index 000000000..62f7ba152
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.tsx
@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import DataTable, { TableProps, TableColumn } from 'react-data-table-component';
+import ReactPaginate from 'react-paginate';
+import './gridTable.css';
+
+export interface GridTableProps<T> extends TableProps<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+  pageCount: number;
+  onPageChanged: (selectedItem: number) => void;
+}
+
+function GridTable<T>({
+  columns,
+  data,
+  pageCount,
+  onPageChanged,
+  ...props
+}: GridTableProps<T>): React.JSX.Element {
+  const [_currentPage, setCurrentPage] = useState(0);
+
+  const customStyles = {
+    tableWrapper: {
+      style: {
+        borderRadius: '7px',
+        overflow: 'hidden',
+      },
+    },
+    table: {
+      style: {
+        backgroundColor: 'var(--gray-2)',
+        tableLayout: 'auto',
+      },
+    },
+    headRow: {
+      style: {
+        backgroundColor: 'var(--gray-2)',
+        color: '#9f9f9f',
+        fontWeight: '600',
+      },
+    },
+    headCells: {
+      style: {
+        backgroundColor: 'var(--gray-2)',
+        color: '#9f9f9f',
+        paddingLeft: '1rem',
+        paddingRight: '1rem',
+        paddingTop: '1.2rem',
+        paddingBottom: '1.2rem',
+        fontWeight: '600',
+        whiteSpace: 'nowrap',
+      },
+    },
+    rows: {
+      style: {
+        backgroundColor: 'var(--gray-2)',
+        fontWeight: '400',
+      },
+    },
+    cells: {
+      style: {
+        paddingLeft: '1rem',
+        paddingRight: '1rem',
+        color: 'var(--gray-table-text)',
+        paddingTop: '1.2rem',
+        paddingBottom: '1.2rem',
+        backgroundColor: 'var(--gray-2)',
+        fontWeight: '400',
+        whiteSpace: 'nowrap',
+      },
+    },
+    pagination: {
+      style: {
+        backgroundColor: 'var(--gray-2)',
+        color: '#f0f0f0',
+      },
+      pageButtonsStyle: {
+        padding: '8px 16px',
+        margin: '0 4px',
+        color: '#f0f0f0',
+        borderRadius: '4px',
+        backgroundColor: 'var(--gray-2)',
+        '&.selected': {
+          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+          fontWeight: 'bold',
+        },
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        },
+      },
+    },
+  };
+  const Pagination: React.FC = () => {
+    return (
+      <ReactPaginate
+        previousLabel={<span>&#x2190; Previous</span>} // Left Arrow
+        nextLabel={<span>Next &#x2192;</span>} // Right Arrow
+        breakLabel={'...'}
+        pageCount={pageCount}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5}
+        onPageChange={handlePageClick}
+        containerClassName={'pagination'}
+        activeClassName={'selected'}
+        disabledClassName={'disabled'} // Handles styling for disabled state
+        pageLinkClassName={'page-link'} // Ensures consistent page link styling
+      />
+    );
+  };
+
+  const handlePageClick = (data: { selected: number }) => {
+    setCurrentPage(data.selected);
+    onPageChanged(data.selected);
+  };
+
+  return (
+    <div style={customStyles.tableWrapper.style}>
+      <DataTable
+        customStyles={customStyles}
+        columns={columns}
+        data={data}
+        paginationComponent={Pagination}
+        pagination
+        dense
+        {...props}
+      />
+    </div>
+  );
+}
+
+export default GridTable;
diff --git a/packages/app-explorer/src/systems/Home/components/DataTable/index.tsx b/packages/app-explorer/src/systems/Home/components/DataTable/index.tsx
new file mode 100644
index 000000000..753d5d79e
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/DataTable/index.tsx
@@ -0,0 +1,34 @@
+import { Button, Link, RoundedContainer, VStack } from '@fuels/ui';
+
+import NextLink from 'next/link';
+import React from 'react';
+import { Block } from '../../interface/blocks.interface';
+import { BlockTableTile } from '../BlockTableTile';
+interface DataTableProps {
+  blocks: Block[];
+}
+
+export const DataTable = (props: DataTableProps) => {
+  return (
+    <RoundedContainer className="flex flex-col justify-between h-full">
+      <VStack gap={'0.1'}>
+        {Array.from({ length: props.blocks.length }, (_, index) => (
+          <Link
+            as={NextLink}
+            key={index}
+            isExternal={false}
+            href={`/block/${props.blocks[index].blockNo}/simple`}
+          >
+            <BlockTableTile block={props.blocks[index]} />
+          </Link>
+        ))}
+      </VStack>
+      <Link href="/blocks">
+        <Button className="w-full bg-green-9 text-black py-0.5">
+          View All Blocks
+        </Button>
+      </Link>
+    </RoundedContainer>
+  );
+};
+export default DataTable;
diff --git a/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx
new file mode 100644
index 000000000..0ce8f0907
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx
@@ -0,0 +1,144 @@
+import { ChartConfig, HStack, RoundedContainer } from '@fuels/ui';
+import dayjs from 'dayjs';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+const chartConfig = {
+  fuel: {
+    label: 'FUEL',
+    color: '#00F58C', // Light green for FUEL
+  },
+} satisfies ChartConfig;
+
+interface GasSpentProps {
+  blocks: any;
+}
+const GasSpentChart = (gasSpent: GasSpentProps) => {
+  const totalGasSpent = gasSpent.blocks
+    .map((block: any) => +block.value)
+    .reduce((acc: any, value: any) => acc + value, 0);
+  const chartData = gasSpent.blocks.map((e: any) => {
+    return {
+      time: dayjs(Number(e.time)).format('HH:mm'),
+      ETH: +e.value,
+    };
+  });
+  const minGasUsed = Math.min(...chartData.map((e: any) => e.ETH)) / 10 ** 9;
+  const maxGasUsed = Math.max(...chartData.map((e: any) => e.ETH)) / 10 ** 9;
+
+  return (
+    <RoundedContainer className="py-4 h-full px-5 space-y-3 ">
+      <div className="space-y-[16px]">
+        <div className="flex items-center justify-between">
+          <div className="text-[15px] leading-[24px] text-heading font-semibold group">
+            <div className="relative group">
+              <div className="flex items-center group">
+                <span className="">Gas Spent</span>
+                <span className="ml-2 group cursor-pointer">
+                  <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">
+                The percentage of block resources utilized by transactions.
+                <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>
+          </div>
+          <span className="text-[13px] leading-[20px] text-muted block">
+            24h
+          </span>
+        </div>
+        <HStack align={'baseline'}>
+          <h2 className="text-[32px] leading-[34px] text-heading font-bold whitespace-no-wrap">
+            {(totalGasSpent / 10 ** 9).toFixed(8)}
+          </h2>
+          <p className="text-[11px] text-heading font-regular text-muted tracking-tight] ">
+            ETH
+          </p>
+        </HStack>
+        <ResponsiveContainer width="100%" height={170}>
+          <LineChart
+            data={chartData}
+            margin={{ top: 10, left: -25, right: 0, bottom: 0 }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="#333"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="time"
+              tick={{ className: 'fill-heading', fontSize: '12px' }}
+            />
+            <Tooltip
+              formatter={(value) => [`${Number(value) / 10 ** 9} ETH`]}
+              labelFormatter={(label) => label.toLocaleString()}
+              contentStyle={{
+                backgroundColor: 'var(--gray-1)',
+                borderColor: 'var(--gray-2)',
+                borderRadius: '8px',
+                color: 'var(--gray-1)',
+              }}
+              labelStyle={{
+                color: 'var(--gray-12)',
+                fontWeight: 'bold',
+              }}
+              itemStyle={{
+                color: '#00F58C',
+              }}
+              cursor={{ strokeWidth: 0.1, radius: 10 }}
+            />
+            <YAxis
+              tick={{
+                className: 'fill-heading whitespace-no-wrap',
+                fontSize: '12px',
+              }}
+              domain={[minGasUsed, maxGasUsed]}
+              tickFormatter={(value) => {
+                return Number((value / 10 ** 9).toFixed(6)).toExponential();
+              }}
+            />
+
+            <Line
+              type="monotone"
+              dataKey="ETH"
+              stroke={chartConfig.fuel.color}
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+      <div className="flex items-center gap-[24px]">
+        {/* <div className="flex items-center gap-[8px]">
+          <div className="w-[6px] h-[6px] bg-[#0090FFE0]/85 rounded-full gap-[8px]" />
+          <div className="text-[12px] leading-[16px] text-heading">ETH</div>
+        </div> */}
+        {/* <div className="flex items-center gap-[8px]">
+          <div className="w-[6px] h-[6px] bg-brand rounded-full gap-[8px]" />
+          <div className="text-[12px] leading-[16px] text-heading">FUEL</div>
+        </div> */}
+      </div>
+    </RoundedContainer>
+  );
+};
+export default GasSpentChart;
diff --git a/packages/app-explorer/src/systems/Home/components/Hero/Hero.stories.tsx b/packages/app-explorer/src/systems/Home/components/Hero/Hero.stories.tsx
new file mode 100644
index 000000000..4cb0c1532
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Hero } from '~/systems/Block/components/Hero';
+
+const meta: Meta<typeof Hero> = {
+  title: 'Home/Hero',
+  component: Hero,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Hero>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Tablet: Story = {
+  args: {},
+  parameters: {
+    viewport: {
+      defaultViewport: 'ipad',
+    },
+  },
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
+  },
+};
diff --git a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx
index 3c96f6422..a21015491 100644
--- a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx
+++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx
@@ -1,36 +1,229 @@
-'use client';
-
-import { Box, Container, Heading } from '@fuels/ui';
+import { Box, Container, Heading, Theme, VStack } from '@fuels/ui';
+import { LoadingBox, LoadingWrapper } from '@fuels/ui';
+import React, { Suspense, useEffect, useState } from 'react';
 import { tv } from 'tailwind-variants';
+import projectJson from '../../../../../../app-portal/src/systems/Ecosystem/data/projects.json';
+import { Block } from '../../interface/blocks.interface';
+import { getBlocksDashboard } from './actions/get-blocks-dashboard';
+import { getTPS } from './actions/get-tps';
+
+const DailyTransaction = React.lazy(() => import('../DailyTransaction'));
+const GasSpentChart = React.lazy(() => import('../GasSpentChart/index'));
+const LatestBlock = React.lazy(() => import('../LatestBlock'));
+const TPS = React.lazy(() => import('../TPS'));
+const TotalDapps = React.lazy(() => import('../TotalDapps/TotalDapps'));
+const DataTable = React.lazy(() => import('../../components/DataTable'));
 
-export function Hero() {
+function Hero() {
   const classes = styles();
+  const [isLoading, setIsLoading] = useState(true);
+  const [tpsData, setTpsData] = useState<any>(null);
+  const [blocksData, setBlocksData] = useState<any>(null);
+  const [isFirstFetch, setIsFirstFetch] = useState(true);
+
+  const getTPSData = async () => {
+    try {
+      const [result, dashboard] = await Promise.all([
+        getTPS(),
+        getBlocksDashboard(),
+      ]);
+      setIsLoading(false);
+
+      setTpsData(result);
+      setBlocksData(dashboard);
+
+      if (isFirstFetch) {
+        setIsLoading(false);
+        setIsFirstFetch(false);
+      }
+    } catch (_e) {}
+  };
+
+  useEffect(() => {
+    getTPSData();
+    const interval = setInterval(() => {
+      getTPSData();
+    }, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const blocks: Block[] =
+    blocksData?.getBlocksDashboard.nodes.map((node: any) => ({
+      blockNo: node.blockNo ?? '',
+      producer: node.producer ?? '',
+      timeStamp: node.timestamp,
+      gasUsed: node.gasUsed,
+      tps: node.tps,
+    })) || [];
+
+  const tps: any =
+    tpsData?.tps.nodes.map((node: any) => ({
+      start: node.start ?? '',
+      end: node.end ?? '',
+      totalGas: node.totalGas,
+      txCount: node.txCount,
+    })) || [];
+
+  const dailyTsxData = tps?.map((t: any) => ({
+    time: t.start ?? '',
+    value: t.txCount,
+  }));
+
+  const tpsTsxData = tps?.map((t: any) => ({
+    time: t.start ?? '',
+    value: t.txCount,
+  }));
+
+  const totalProjects = projectJson.length;
+  const activeProjects = projectJson.filter(
+    (item) => item.isLive === true,
+  ).length;
+
+  const elementsWithImage = projectJson.filter((item) => item.image);
+
+  const top3Projects = elementsWithImage
+    .filter((element) => element.isFeatured && element.isLive)
+    .slice(0, 3);
 
   return (
-    <Box className={classes.root()}>
-      <Container className={classes.container()} size="4">
-        <Heading as="h1" className={classes.title()}>
-          Explore Fuel
-        </Heading>
-      </Container>
-    </Box>
+    <Theme appearance="light">
+      <Box className={classes.root()}>
+        <Container className={classes.container()}>
+          <VStack>
+            <Heading as="h1" className={classes.title()}>
+              Fuel Explorer
+            </Heading>
+
+            <Box className={classes.searchWrapper()}>
+              <div className="row-span-2 col-span-6 sm:col-span-4">
+                <LoadingWrapper
+                  isLoading={isLoading}
+                  loadingEl={<LoadingBox className="w-full h-[12rem]" />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <DailyTransaction blocks={dailyTsxData} />
+                    </Suspense>
+                  }
+                />
+              </div>
+              <div className="row-span-2 col-span-6 sm:col-span-3">
+                <LoadingWrapper
+                  isLoading={isLoading}
+                  loadingEl={<LoadingBox className="w-full h-[12rem]" />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <TotalDapps
+                        active={activeProjects}
+                        total={totalProjects}
+                        featured={top3Projects}
+                      />
+                    </Suspense>
+                  }
+                />
+              </div>
+              <div className="row-span-1 col-span-6 sm:col-span-5">
+                <LoadingWrapper
+                  isLoading={isLoading}
+                  loadingEl={<LoadingBox className="w-full h-[12rem]" />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <LatestBlock
+                        blockNo={
+                          blocksData?.getBlocksDashboard.nodes[0].blockNo
+                            ? blocksData.getBlocksDashboard.nodes[0].blockNo
+                                .toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+                            : ''
+                        }
+                        gasUsed={
+                          blocksData?.getBlocksDashboard.nodes[0].gasUsed ?? ''
+                        }
+                        producer={
+                          blocksData?.getBlocksDashboard.nodes[0].producer ?? ''
+                        }
+                        timeStamp={
+                          blocksData?.getBlocksDashboard.nodes[0].timestamp ??
+                          ''
+                        }
+                      />
+                    </Suspense>
+                  }
+                />
+              </div>
+              <div className="col-span-6 row-span-3 sm:col-span-5">
+                <LoadingWrapper
+                  isLoading={isLoading}
+                  loadingEl={<LoadingBox className="w-full h-full" />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-full" />}
+                    >
+                      <DataTable blocks={blocks.slice(0, 5)} />
+                    </Suspense>
+                  }
+                />
+              </div>
+
+              <div className="row-span-2 col-span-6 sm:col-span-4">
+                <LoadingWrapper
+                  isLoading={isLoading}
+                  loadingEl={<LoadingBox className="w-full h-[12rem]" />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <TPS blocks={tpsTsxData} />
+                    </Suspense>
+                  }
+                />
+              </div>
+              <div className="row-span-2 col-span-6 sm:col-span-3">
+                <Suspense
+                  fallback={<LoadingBox className="w-full h-[12rem]" />}
+                >
+                  <LoadingWrapper
+                    isLoading={isLoading}
+                    loadingEl={<LoadingBox className="w-full h-[12rem]" />}
+                    regularEl={<GasSpentChart blocks={dailyTsxData} />}
+                  />
+                </Suspense>
+              </div>
+            </Box>
+          </VStack>
+        </Container>
+      </Box>
+    </Theme>
   );
 }
 
 const styles = tv({
   slots: {
-    root: 'hero-bg overflow-clip relative w-full border-b border-border',
+    root: 'overflow-clip relative w-full border-border bg-gray-3 dark:bg-gray-1',
     container: [
-      'z-20 relative py-8 pt-6 px-8 tablet:py-28 tablet:pt-24 tablet:px-10',
-      'tablet:max-laptop:max-w-[500px] [&_.rt-ContainerInner]:p-2 [&_.rt-ContainerInner]:min-h-[120px]',
-      '[&_.rt-ContainerInner]:tablet:max-laptop:bg-black [&_.rt-ContainerInner]:tablet:max-laptop:bg-opacity-60 [&_.rt-ContainerInner]:tablet:max-laptop:rounded-lg [&_.rt-ContainerInner]:tablet:max-laptop:shadow-2xl',
+      'z-20 relative py-8 pt-6 px-8 tablet:pt-18 tablet:px-10',
+      'tablet:max-laptop:max-w-[500px] [&_.rt-ContainerInner]:p-2',
+      ' [&_.rt-ContainerInner]:tablet:max-laptop:bg-opacity-60 [&_.rt-ContainerInner]:tablet:max-laptop:rounded-lg [&_.rt-ContainerInner]:tablet:max-laptop:shadow-2xl',
     ],
     input: 'w-full tablet:w-[400px]',
     title: [
-      'text-2xl leading-snug text-white mb-4 justify-center',
+      'text-2xl leading-snug text-heading justify-center',
       'tablet:text-left tablet:text-4xl tablet:justify-start',
     ],
     subtitle: ['text-base mb-8 justify-center'],
-    searchWrapper: 'max-w-[400px]',
+    searchWrapper: [
+      'grid gap-5',
+      'grid-cols-1 grid-rows-auto auto-rows-min',
+      'md:grid-cols-1 md:grid-rows-[auto,auto]',
+      'lg:grid-cols-12 lg:grid-rows-[repeat(4,auto)]',
+      'gap-y-5 gap-x-4',
+      'sm:grid-cols-1',
+    ],
   },
 });
+export default Hero;
diff --git a/packages/app-explorer/src/systems/Home/components/Hero/actions/get-blocks-dashboard.ts b/packages/app-explorer/src/systems/Home/components/Hero/actions/get-blocks-dashboard.ts
index ac4622aa0..b3bae9f68 100644
--- a/packages/app-explorer/src/systems/Home/components/Hero/actions/get-blocks-dashboard.ts
+++ b/packages/app-explorer/src/systems/Home/components/Hero/actions/get-blocks-dashboard.ts
@@ -1,3 +1,4 @@
+'use server';
 import { sdk } from '~/systems/Core/utils/sdk';
 
 export const getBlocksDashboard = async () => {
diff --git a/packages/app-explorer/src/systems/Home/components/Hero/actions/get-tps.ts b/packages/app-explorer/src/systems/Home/components/Hero/actions/get-tps.ts
index 467c7a701..a97708e91 100644
--- a/packages/app-explorer/src/systems/Home/components/Hero/actions/get-tps.ts
+++ b/packages/app-explorer/src/systems/Home/components/Hero/actions/get-tps.ts
@@ -1,3 +1,4 @@
+'use server';
 import { sdk } from '~/systems/Core/utils/sdk';
 
 export const getTPS = async () => {
diff --git a/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx b/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx
new file mode 100644
index 000000000..5feb06800
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx
@@ -0,0 +1,64 @@
+import { HStack, RoundedContainer, VStack } from '@fuels/ui';
+
+import { fromNow } from '~/systems/Core/utils/dayjs';
+import { Block } from '../interface/blocks.interface';
+
+const LatestBlock = (block: Block) => {
+  return (
+    <RoundedContainer className="py-4 px-5 space-y-[24px] h-full bg-light-gradient dark:bg-dark-gradient">
+      <div className="space-y-[16px]">
+        <div className="flex items-center justify-between">
+          <div className="text-[15px] leading-[24px] text-heading font-semibold group relative">
+            <div className=" relative group">
+              <div className="flex items-center group">
+                <span className="">Latest Block</span>
+                <span className="ml-2 group cursor-pointer">
+                  <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">
+                The percentage of block resources utilized by transactions.
+                <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>
+          </div>
+          <span className="text-[13px] leading-[20px] text-muted block">
+            {fromNow(block?.timeStamp)}
+          </span>
+        </div>
+        <h2 className="text-[32px] leading-[36px] text-heading font-bold">
+          {block.blockNo}
+        </h2>
+      </div>
+
+      <HStack className="flex items-start justify-between w-full">
+        <VStack>
+          <p> </p>
+          <p className="w-full max-w-[144px] line-clamp-1 text-[13px] leading-[20px] text-muted whitespace-nowrap overflow-hidden overflow-ellipsis">
+            {block.producer}
+          </p>
+        </VStack>
+        <VStack gap={'0'} className="items-end">
+          <p className="line-clamp-1 text-[13px] leading-[20px]">
+            Block Reward
+          </p>
+          <p className="line-clamp-1 text-[13px] leading-[20px] text-muted">
+            {(+block.gasUsed / 10 ** 9).toFixed(2)} ETH
+          </p>
+        </VStack>
+      </HStack>
+    </RoundedContainer>
+  );
+};
+export default LatestBlock;
diff --git a/packages/app-explorer/src/systems/Home/components/TPS.tsx b/packages/app-explorer/src/systems/Home/components/TPS.tsx
new file mode 100644
index 000000000..86dd94b34
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/TPS.tsx
@@ -0,0 +1,151 @@
+import { HStack, RoundedContainer } from '@fuels/ui';
+import dayjs from 'dayjs';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+export interface TPSProps {
+  blocks: any;
+}
+
+export const TPS = (props: TPSProps) => {
+  const blocks = props.blocks;
+
+  const chartData = blocks.reduce(
+    (acc: { [key: string]: number }, block: any) => {
+      const time = dayjs(Number(block.time)).format('HH:mm');
+      const value = +block.value / 3600;
+      acc[time] = (acc[time] || 0) + value;
+      return acc;
+    },
+    {},
+  );
+
+  const chartDataArray = chartData
+    ? Object.entries(chartData).map(([time, value]) => ({
+        time,
+        value,
+      }))
+    : [];
+
+  const averageTPS =
+    blocks.reduce((sum: any, block: any) => sum + Number(block.value), 0) / 24;
+
+  const highestValue = Math.max(
+    ...chartDataArray.map((data: any) => Number(data.value)),
+  );
+
+  const getTicks = () => {
+    const ticks: string[] = [];
+    for (let i = 0; i < chartDataArray.length; i += 6) {
+      ticks.push(chartDataArray[i].time);
+    }
+    return ticks;
+  };
+
+  return (
+    <RoundedContainer className="py-4 px-5 h-full space-y-8">
+      <div className="space-y-[16px]">
+        <div className="flex items-center justify-between">
+          <div className="text-[15px] leading-[24px] text-heading font-semibold group relative">
+            <div className=" relative group">
+              <div className="flex items-center group">
+                <span className="">TPS</span>
+                <span className="ml-2 group cursor-pointer">
+                  <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">
+                Transactions Per Second processed by the Fuel network.
+                <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>
+          </div>
+          <span className="text-[13px] leading-[20px] text-muted block">
+            24h
+          </span>
+        </div>
+        <HStack className="items-baseline" gap={'0'}>
+          <h2 className="text-[32px] leading-[36px] text-heading font-bold">
+            {`${(averageTPS / 3600).toFixed(2)}`}
+          </h2>
+          <div className="text-[12px] leading-[12px] text-heading ">TX/s</div>
+        </HStack>
+
+        <ResponsiveContainer width="100%" height={160}>
+          <BarChart
+            data={chartDataArray}
+            margin={{ top: 10, right: 0, left: -20, bottom: 0 }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 0"
+              stroke="#333"
+              vertical={true}
+              horizontal={false}
+            />
+            <XAxis
+              dataKey="time"
+              ticks={getTicks()}
+              tick={{ className: 'fill-heading', fontSize: '12px' }}
+              interval={0}
+              tickFormatter={(value) => value}
+            />
+            <YAxis tick={{ className: 'fill-heading', fontSize: '12px' }} />
+            <Tooltip
+              formatter={(value) => [
+                `${Number(value).toFixed(2)}`,
+                'Avg TPS per hour',
+              ]}
+              labelFormatter={(label) => label.toLocaleString()}
+              contentStyle={{
+                backgroundColor: 'var(--gray-1)',
+                borderColor: 'var(--gray-2)',
+                borderRadius: '8px',
+                color: 'var(--gray-1)',
+              }}
+              labelStyle={{
+                color: 'var(--gray-12)',
+                fontWeight: 'bold',
+              }}
+              itemStyle={{
+                color: '#00F58C',
+              }}
+              cursor={{ strokeWidth: 0.1, radius: 10 }}
+            />
+            <Bar dataKey="value" radius={[10, 10, 10, 10]} barSize={5}>
+              {chartDataArray.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  className={`${
+                    entry.value === highestValue
+                      ? 'text-[#00F58C]'
+                      : 'text-[rgb(180,180,180)] dark:text-[rgb(223,223,223)]'
+                  } fill-current`}
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </RoundedContainer>
+  );
+};
+export default TPS;
diff --git a/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx b/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx
new file mode 100644
index 000000000..b44ecf67f
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx
@@ -0,0 +1,140 @@
+import { RoundedContainer } from '@fuels/ui';
+import Link from 'next/link';
+import React from 'react';
+
+interface ValidatorStatusProps {
+  active: number;
+  total: number;
+  featured: any;
+}
+
+const TotalDapps: React.FC<ValidatorStatusProps> = ({
+  active,
+  total,
+  featured,
+}) => {
+  const activePercentage = (active / total) * 100;
+  const buildingPercentage = ((total - active) / total) * 100;
+
+  const activeBarStyle = {
+    width: `${activePercentage}%`,
+    height: '5px',
+    borderRadius: '4px',
+    transition: 'width 0.4s ease-in-out',
+  };
+
+  const buildingBarStyle = {
+    width: `${buildingPercentage}%`,
+    height: '5px',
+    borderRadius: '4px',
+    transition: 'width 0.4s ease-in-out',
+  };
+  const _image = 'zap';
+
+  return (
+    <RoundedContainer className="validators-chart h-full">
+      <div className="flex items-center justify-between">
+        <h3 className="text-[15px] leading-[24px] text-heading font-semibold">
+          Fuel Dapps
+        </h3>
+        <Link
+          className="text-[13px] leading-[20px] text-muted block"
+          href="https://app.fuel.network/ecosystem"
+        >
+          View All
+        </Link>
+      </div>
+      <h2 className="text-[32px] leading-[36px] text-heading font-bold">
+        {total}
+      </h2>
+
+      <div className="py-4">
+        <div className="progress-bar-background">
+          <div className="w-full flex">
+            <div
+              style={activeBarStyle}
+              className="dark:bg-[rgb(73,211,112)] bg-[rgb(82,238,135)]"
+            />
+            <div
+              style={buildingBarStyle}
+              className="dark:bg-[rgb(87, 87, 87)] bg-[rgb(234,234,234)]"
+            />
+          </div>
+        </div>
+        <div className="flex items-center justify-between mt-1">
+          <span className="text-[12px] leading-[20px] text-muted block font-bold">
+            Active: {active}
+          </span>
+          <span className="text-[12px] leading-[20px] text-muted block font-bold">
+            Building: {total - active}
+          </span>
+        </div>
+
+        <div className="my-2 h-[1px] bg-[rgba(255,255,255,0.04)]" />
+
+        <span className="text-[12px] leading-[20px] text-muted block font-bold">
+          Featured Dapps
+        </span>
+
+        {featured.map((feature: any) => {
+          return (
+            <Link
+              className="flex items-center gap-3 mt-3"
+              href={feature.url}
+              key={feature.name}
+            >
+              <img
+                src={`https://app.fuel.network/ecosystem/images/${feature.image}.jpeg`}
+                alt=""
+                className="w-5 rounded"
+              />
+              <p className="text-[13px] leading-[20px] block">{feature.name}</p>
+            </Link>
+          );
+        })}
+      </div>
+    </RoundedContainer>
+  );
+};
+<style jsx>{`
+  .validators-chart {
+    width: 100%;
+    max-width: 350px;
+    padding: 20px;
+    background-color: #1e1e1e;
+    border-radius: 12px;
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  h3 {
+    margin-bottom: 16px;
+    font-size: 18px;
+    font-weight: 500;
+  }
+  .status-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .status-label {
+    font-size: 14px;
+    color: #ccc;
+  }
+  .status-number {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .progress-bar-background {
+    width: 100%;
+    background-color: #333;
+    border-radius: 4px;
+  }
+  .percentage-label {
+    margin-top: 8px;
+    text-align: right;
+    font-size: 14px;
+    color: #fff;
+  }
+`}</style>;
+export default TotalDapps;
diff --git a/packages/app-explorer/src/systems/Home/components/TrendingCard/TrendingCard.tsx b/packages/app-explorer/src/systems/Home/components/TrendingCard/TrendingCard.tsx
new file mode 100644
index 000000000..65ae217ca
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/TrendingCard/TrendingCard.tsx
@@ -0,0 +1,31 @@
+import { RoundedContainer } from '@fuels/ui';
+import { tv } from 'tailwind-variants';
+
+export interface TrendingCardProps {
+  title: string;
+  icon: string;
+}
+
+export const TrendingCard = ({ icon, title }: TrendingCardProps) => {
+  const classes = styles();
+  return (
+    <RoundedContainer className="px-4 py-3 w-full">
+      <div className="flex items-center gap-2">
+        <img
+          width={24}
+          height={24}
+          className="h-[24px] w-[24px]"
+          src={icon}
+          alt={title}
+        />
+        <p className={classes.paragraphStrong()}>{title}</p>
+      </div>
+    </RoundedContainer>
+  );
+};
+
+const styles = tv({
+  slots: {
+    paragraphStrong: ['text-sm px-2 whitespace-nowrap'],
+  },
+});
diff --git a/packages/app-explorer/src/systems/Home/components/TrendingCardCarousel.tsx b/packages/app-explorer/src/systems/Home/components/TrendingCardCarousel.tsx
new file mode 100644
index 000000000..964461392
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/components/TrendingCardCarousel.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { Button, Carousel, CarouselContent, CarouselItem } from '@fuels/ui';
+import { CarouselApi } from '@fuels/ui/src/components/Carousel/Carousel';
+import React from 'react';
+import { TrendingCard } from '../components/TrendingCard/TrendingCard';
+
+export const TRENDING_DATA = [
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+  {
+    title: 'Bored Ape',
+    icon: 'https://s3-alpha-sig.figma.com/img/5749/3ce7/292d2723de1ca424839b5b023c2aa32a?Expires=1724025600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ErIqnWTWbaxPj5AuflxmF-maSANAvESYDz~GS7U4C8fZwxqzOaBMWZvcMPMloF5b6EeNzRktU6-YsGzlCz31S3Ch9EhGzGCCuqb2U6JNoOMKfsO7i2VTvsGT2ScFn1tTyxVYegQTRIwyhnV7feQW7KU7biO4W0Ahs-Ncvytj0wohz2dNXjrHeYN7Yap5o5aU-No2ct54EaevLGiGFgeDWO9Ysbl1o4AcCAH4Eua9~S3IBV035RSXQNYdSqQjYOsuRcpBKfbbZoZOHw5yWCNEUOqnTjFpXbFC7bGqwPCaaYbSjElFObIpqI83GNbZ0UOEQb-eI9lPJEX-2lOvJFdm3g__',
+  },
+];
+
+export const TrendingCardCarousel = () => {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on('select', () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  return (
+    <div className="relative">
+      {/* Mext button */}
+      {current < count && (
+        <Button
+          className="absolute z-10 top-1/2 -translate-y-1/2 translate-x-1/2 right-0 bg-gray-4 rounded-full w-8 h-8 p-0"
+          onClick={() => api?.scrollNext()}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.354 8.35378L6.35403 13.3538C6.30757 13.4002 6.25242 13.4371 6.19173 13.4622C6.13103 13.4874 6.06598 13.5003 6.00028 13.5003C5.93458 13.5003 5.86953 13.4874 5.80883 13.4622C5.74813 13.4371 5.69298 13.4002 5.64653 13.3538C5.60007 13.3073 5.56322 13.2522 5.53808 13.1915C5.51294 13.1308 5.5 13.0657 5.5 13C5.5 12.9343 5.51294 12.8693 5.53808 12.8086C5.56322 12.7479 5.60007 12.6927 5.64653 12.6463L10.2934 8.00003L5.64653 3.35378C5.55271 3.25996 5.5 3.13272 5.5 3.00003C5.5 2.86735 5.55271 2.7401 5.64653 2.64628C5.74035 2.55246 5.8676 2.49976 6.00028 2.49976C6.13296 2.49976 6.26021 2.55246 6.35403 2.64628L11.354 7.64628C11.4005 7.69272 11.4374 7.74786 11.4626 7.80856C11.4877 7.86926 11.5007 7.93433 11.5007 8.00003C11.5007 8.06574 11.4877 8.13081 11.4626 8.1915C11.4374 8.2522 11.4005 8.30735 11.354 8.35378Z"
+              fill="var(--gray-10)"
+            />
+          </svg>
+        </Button>
+      )}
+      {/* Previous Button */}
+      {current > 1 && (
+        <Button
+          className="absolute z-10 top-1/2 -translate-y-1/2 -translate-x-1/2 left-0 bg-gray-4 rounded-full w-8 h-8 p-0"
+          onClick={() => api?.scrollPrev()}
+        >
+          <svg
+            className="rotate-180 "
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.354 8.35378L6.35403 13.3538C6.30757 13.4002 6.25242 13.4371 6.19173 13.4622C6.13103 13.4874 6.06598 13.5003 6.00028 13.5003C5.93458 13.5003 5.86953 13.4874 5.80883 13.4622C5.74813 13.4371 5.69298 13.4002 5.64653 13.3538C5.60007 13.3073 5.56322 13.2522 5.53808 13.1915C5.51294 13.1308 5.5 13.0657 5.5 13C5.5 12.9343 5.51294 12.8693 5.53808 12.8086C5.56322 12.7479 5.60007 12.6927 5.64653 12.6463L10.2934 8.00003L5.64653 3.35378C5.55271 3.25996 5.5 3.13272 5.5 3.00003C5.5 2.86735 5.55271 2.7401 5.64653 2.64628C5.74035 2.55246 5.8676 2.49976 6.00028 2.49976C6.13296 2.49976 6.26021 2.55246 6.35403 2.64628L11.354 7.64628C11.4005 7.69272 11.4374 7.74786 11.4626 7.80856C11.4877 7.86926 11.5007 7.93433 11.5007 8.00003C11.5007 8.06574 11.4877 8.13081 11.4626 8.1915C11.4374 8.2522 11.4005 8.30735 11.354 8.35378Z"
+              fill="var(--gray-10)"
+            />
+          </svg>
+        </Button>
+      )}
+      <Carousel
+        opts={{
+          align: 'start',
+        }}
+        setApi={setApi}
+        className="relative"
+      >
+        <CarouselContent>
+          {TRENDING_DATA.map((item, i) => (
+            <CarouselItem
+              key={i}
+              className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4"
+            >
+              <TrendingCard title={item.title} icon={item.icon} />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  );
+};
diff --git a/packages/app-explorer/src/systems/Home/interface/blocks.interface.ts b/packages/app-explorer/src/systems/Home/interface/blocks.interface.ts
new file mode 100644
index 000000000..96c58b59d
--- /dev/null
+++ b/packages/app-explorer/src/systems/Home/interface/blocks.interface.ts
@@ -0,0 +1,6 @@
+export interface Block {
+  blockNo: string;
+  producer: string;
+  timeStamp: string;
+  gasUsed: string;
+}
diff --git a/packages/app-explorer/src/systems/Transactions/components/TxsTitle/TxsTitle.tsx b/packages/app-explorer/src/systems/Transactions/components/TxsTitle/TxsTitle.tsx
index eaefa40c2..0f242c8ee 100644
--- a/packages/app-explorer/src/systems/Transactions/components/TxsTitle/TxsTitle.tsx
+++ b/packages/app-explorer/src/systems/Transactions/components/TxsTitle/TxsTitle.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { PageTitle } from 'app-commons';
 
 export function TxsTitle() {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f48c0edd4..21567c3b3 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -71,6 +71,7 @@
     "react-data-table-component": "7.6.2",
     "clsx": "2.1.0",
     "csstype": "3.1.3",
+    "embla-carousel-react": "8.2.1",
     "framer-motion": "11.0.5",
     "geist": "1.2.2",
     "modern-normalize": "2.0.0",
diff --git a/packages/ui/src/components/Box/RoundedContainer.tsx b/packages/ui/src/components/Box/RoundedContainer.tsx
new file mode 100644
index 000000000..c652a60d2
--- /dev/null
+++ b/packages/ui/src/components/Box/RoundedContainer.tsx
@@ -0,0 +1,25 @@
+import { Box as RadixBox } from '@radix-ui/themes';
+
+import { tv } from 'tailwind-variants';
+import { createComponent } from '../../utils/component';
+import type { PropsOf, WithAsProps } from '../../utils/types';
+
+export type RoundedContainerProps = WithAsProps & PropsOf<typeof RadixBox>;
+
+const styles = tv({
+  slots: {
+    root: 'rounded-[13px] p-4 bg-white dark:bg-card-bg',
+  },
+});
+
+export const RoundedContainer = createComponent<
+  RoundedContainerProps,
+  typeof RadixBox
+>({
+  id: 'RoundedContainer',
+  baseElement: RadixBox,
+  className: ({ className }) => styles().root({ className }),
+  render: (Comp, { children, ...props }) => {
+    return <Comp {...props}>{children}</Comp>;
+  },
+});
diff --git a/packages/ui/src/components/Box/index.tsx b/packages/ui/src/components/Box/index.tsx
index d0dc5bdda..392656237 100644
--- a/packages/ui/src/components/Box/index.tsx
+++ b/packages/ui/src/components/Box/index.tsx
@@ -15,3 +15,6 @@ export type { VStackProps } from './VStack';
 
 export { HStack } from './HStack';
 export type { HStackProps } from './HStack';
+
+export { RoundedContainer } from './RoundedContainer';
+export type { RoundedContainerProps } from './RoundedContainer';
diff --git a/packages/ui/src/components/Carousel/Carousel.tsx b/packages/ui/src/components/Carousel/Carousel.tsx
new file mode 100644
index 000000000..f6d71d73f
--- /dev/null
+++ b/packages/ui/src/components/Carousel/Carousel.tsx
@@ -0,0 +1,195 @@
+'use client';
+
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+import * as React from 'react';
+
+import { cx } from '../../utils/css';
+
+type CarouselApi = UseEmblaCarouselType[1];
+export type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+export type CarouselOptions = UseCarouselParameters[0];
+export type CarouselPlugin = UseCarouselParameters[1];
+
+export type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+export type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
+
+      return () => {
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cx('relative', className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cx(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cx(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem };
diff --git a/packages/ui/src/components/Carousel/index.tsx b/packages/ui/src/components/Carousel/index.tsx
new file mode 100644
index 000000000..7cbb397d3
--- /dev/null
+++ b/packages/ui/src/components/Carousel/index.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+export { Carousel, CarouselContent, CarouselItem } from './Carousel';
+
+export type {
+  CarouselContextProps,
+  CarouselOptions,
+  CarouselPlugin,
+  CarouselProps,
+  UseCarouselParameters,
+} from './Carousel';
diff --git a/packages/ui/src/components/Charts/Charts.tsx b/packages/ui/src/components/Charts/Charts.tsx
new file mode 100644
index 000000000..53431a871
--- /dev/null
+++ b/packages/ui/src/components/Charts/Charts.tsx
@@ -0,0 +1,366 @@
+'use client';
+
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+import { cx } from '../../utils/css';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >['children'];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cx(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = 'Chart';
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<'div'> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: 'line' | 'dot' | 'dashed';
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = 'dot',
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || 'value'}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === 'string'
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cx('font-medium', labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cx('font-medium', labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cx(
+                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                  indicator === 'dot' && 'items-center',
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cx(
+                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                            {
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            },
+                          )}
+                          style={
+                            {
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cx(
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center',
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          'flex items-center justify-center gap-4',
+          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cx(
+                'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = 'ChartLegend';
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/packages/ui/src/components/Charts/index.tsx b/packages/ui/src/components/Charts/index.tsx
new file mode 100644
index 000000000..0c68d84fd
--- /dev/null
+++ b/packages/ui/src/components/Charts/index.tsx
@@ -0,0 +1,10 @@
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+} from './Charts';
+
+export type { ChartConfig } from './Charts';
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 9aa443a79..d3dd3eefe 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -22,8 +22,10 @@ export * from './components/ButtonClose';
 export * from './components/ButtonGroup';
 export * from './components/Card';
 export * from './components/CardList';
+export * from './components/Charts';
 export * from './components/Checkbox';
 export * from './components/ContextMenu';
+export * from './components/Carousel';
 export * from './components/Collapsible';
 export * from './components/Copyable';
 export * from './components/Dialog';
@@ -32,7 +34,7 @@ export * from './components/Dropdown';
 export * from './components/EntityItem';
 export * from './components/Focus';
 export * from './components/FuelLogo';
-export * from './components/GridTable';
+export * from './components/GridTable/';
 export * from './components/Heading';
 export * from './components/HelperIcon';
 export * from './components/HoverCard';
diff --git a/packages/ui/src/theme/tailwind-preset.ts b/packages/ui/src/theme/tailwind-preset.ts
index 289933aeb..4c354645a 100644
--- a/packages/ui/src/theme/tailwind-preset.ts
+++ b/packages/ui/src/theme/tailwind-preset.ts
@@ -77,6 +77,12 @@ const preset: Config = {
         sans: ['var(--font-inter)'],
         mono: ['var(--font-geist-mono)'],
       },
+      backgroundImage: {
+        'dark-gradient':
+          'linear-gradient(243.06deg, #00F58C -52.89%, #0F4B32 10.83%, #141414 65.48%)',
+        'light-gradient':
+          'linear-gradient(243.06deg, #00F58C -52.89%, #A7FFD4 10.83%, #FFFFFF 65.48%)',
+      },
       keyframes,
       animation,
       width: tailwindDefaultTheme.maxWidth,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abed6c342..87d2c2132 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,16 @@ overrides:
 importers:
 
   .:
+    dependencies:
+      react-data-table-component:
+        specifier: 7.6.2
+        version: 7.6.2(react@18.2.0)(styled-components@5.3.11(@babel/core@7.23.9)(react-dom@18.2.0(react@18.2.0))(react-is@18.2.0)(react@18.2.0))
+      react-paginate:
+        specifier: 8.2.0
+        version: 8.2.0(react@18.2.0)
+      recharts:
+        specifier: 2.12.7
+        version: 2.12.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@babel/core':
         specifier: ^7.23.9
@@ -295,12 +305,18 @@ importers:
       react-json-view-lite:
         specifier: 1.4.0
         version: 1.4.0(react@18.2.0)
+      react-modal:
+        specifier: 3.16.1
+        version: 3.16.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-use:
         specifier: 17.5.0
         version: 17.5.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-window:
         specifier: 1.8.10
         version: 1.8.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      recharts:
+        specifier: 2.12.7
+        version: 2.12.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       tai64:
         specifier: 1.0.0
         version: 1.0.0
@@ -851,6 +867,9 @@ importers:
       csstype:
         specifier: 3.1.3
         version: 3.1.3
+      embla-carousel-react:
+        specifier: 8.2.1
+        version: 8.2.1(react@18.2.0)
       framer-motion:
         specifier: 11.0.5
         version: 11.0.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3834,6 +3853,10 @@ packages:
     resolution: {integrity: sha512-yfmE79bRQtnMzarnKfX7AEJBwFTxvTyw3nBQlu/5rmGXrjAeAMltoGxO62TFurxrQAFMNa/fEjIHNvungZp0+g==}
     engines: {node: '>=14.0.0'}
 
+  '@metamask/utils@8.4.0':
+    resolution: {integrity: sha512-dbIc3C7alOe0agCuBHM1h71UaEaEqOk2W8rAtEn8QGz4haH2Qq7MoK6i7v2guzvkJVVh79c+QCzIqphC3KvrJg==}
+    engines: {node: '>=16.0.0'}
+
   '@metamask/utils@8.5.0':
     resolution: {integrity: sha512-I6bkduevXb72TIM9q2LRO63JSsF9EXduh3sBr9oybNX2hNNpr/j1tEjXrsG0Uabm4MJ1xkGAQEMwifvKZIkyxQ==}
     engines: {node: '>=16.0.0'}
@@ -6748,6 +6771,33 @@ packages:
   '@types/cors@2.8.17':
     resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
 
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.0':
+    resolution: {integrity: sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==}
+
+  '@types/d3-scale@4.0.8':
+    resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==}
+
+  '@types/d3-shape@3.1.6':
+    resolution: {integrity: sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==}
+
+  '@types/d3-time@3.0.3':
+    resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -8822,6 +8872,50 @@ packages:
     engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
     hasBin: true
 
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
   dashdash@1.14.1:
     resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
     engines: {node: '>=0.10'}
@@ -8930,6 +9024,9 @@ packages:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
 
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
   decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
@@ -9154,6 +9251,9 @@ packages:
   dom-converter@0.2.0:
     resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==}
 
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
@@ -9341,6 +9441,19 @@ packages:
   email-addresses@5.0.0:
     resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
 
+  embla-carousel-react@8.2.1:
+    resolution: {integrity: sha512-YKtARk101mp00Zb6UAFkkvK+5XRo92LAtO9xLFeDnQ/XU9DqFhKnRy1CedRRj0/RSk6MTFDx3MqOQue3gJj9DA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0
+
+  embla-carousel-reactive-utils@8.2.1:
+    resolution: {integrity: sha512-LXMVOOyv09ZKRxRQXYMX1FpVGcypsuxdcidNcNlBQUN2mK7hkmjVFQwwhfnnY39KMi88XYnYPBgMxfTe0vxSrA==}
+    peerDependencies:
+      embla-carousel: 8.2.1
+
+  embla-carousel@8.2.1:
+    resolution: {integrity: sha512-9mTDtyMZJhFuuW5pixhTT4iLiJB1l3dH3IpXUKCsgLlRlHCiySf/wLKy5xIAzmxIsokcQ50xea8wi7BCt0+Rxg==}
+
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -9417,10 +9530,6 @@ packages:
     resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
     engines: {node: '>= 0.4'}
 
-  es-abstract@1.23.2:
-    resolution: {integrity: sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==}
-    engines: {node: '>= 0.4'}
-
   es-abstract@1.23.3:
     resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
     engines: {node: '>= 0.4'}
@@ -9654,6 +9763,9 @@ packages:
     resolution: {integrity: sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==}
     engines: {node: '>=4'}
 
+  exenv@1.2.2:
+    resolution: {integrity: sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==}
+
   exit@0.1.2:
     resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
     engines: {node: '>= 0.8.0'}
@@ -10665,6 +10777,10 @@ packages:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
 
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   intl-messageformat@10.5.11:
     resolution: {integrity: sha512-eYq5fkFBVxc7GIFDzpFQkDOZgNayNTQn4Oufe8jw6YY6OHVw70/4pA3FyCsQ0Gb2DnvEJEMmN2tOaXUGByM+kg==}
 
@@ -13080,6 +13196,16 @@ packages:
     peerDependencies:
       react: ^16.13.1 || ^17.0.0 || ^18.0.0
 
+  react-lifecycles-compat@3.0.4:
+    resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
+
+  react-modal@3.16.1:
+    resolution: {integrity: sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+      react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+
   react-native-webview@11.26.1:
     resolution: {integrity: sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==}
     peerDependencies:
@@ -13115,6 +13241,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-smooth@4.0.1:
+    resolution: {integrity: sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   react-stately@3.29.1:
     resolution: {integrity: sha512-hc4ZHy/ahvMwr6z7XMjYJ7EgzNVrXhzM4l2Qj17rdRhERo7/ovWmQencf9pF7K8kD5TraEHxPHLrYzGN4fxfUQ==}
     peerDependencies:
@@ -13130,6 +13262,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
   react-transition-state@1.1.5:
     resolution: {integrity: sha512-ITY2mZqc2dWG2eitJkYNdcSFW8aKeOlkL2A/vowRrLL8GH3J6Re/SpD/BLvQzrVOTqjsP0b5S9N10vgNNzwMUQ==}
     peerDependencies:
@@ -13217,6 +13355,16 @@ packages:
     resolution: {integrity: sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==}
     engines: {node: '>= 4'}
 
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.12.7:
+    resolution: {integrity: sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -14676,10 +14824,6 @@ packages:
   typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
 
-  typed-array-length@1.0.5:
-    resolution: {integrity: sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==}
-    engines: {node: '>= 0.4'}
-
   typed-array-length@1.0.6:
     resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
     engines: {node: '>= 0.4'}
@@ -14998,6 +15142,9 @@ packages:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
 
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
   viem@1.21.4:
     resolution: {integrity: sha512-BNVYdSaUjeS2zKQgPs+49e5JKocfo60Ib2yiXOWBT6LuVxY1I/6fFX3waEtpXvL1Xn4qu+BVitVtMh9lyThyhQ==}
     peerDependencies:
@@ -15110,6 +15257,9 @@ packages:
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
   watchpack@2.4.0:
     resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
     engines: {node: '>=10.13.0'}
@@ -18312,7 +18462,7 @@ snapshots:
       '@graphql-tools/utils': 10.5.4(graphql@16.8.1)
       dataloader: 2.2.2
       graphql: 16.8.1
-      tslib: 2.7.0
+      tslib: 2.6.3
       value-or-promise: 1.0.12
 
   '@graphql-tools/batch-execute@9.0.4(graphql@16.8.1)':
@@ -18786,7 +18936,7 @@ snapshots:
       jest-util: 29.7.0
       jest-validate: 29.7.0
       jest-watcher: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       pretty-format: 29.7.0
       slash: 3.0.0
       strip-ansi: 6.0.1
@@ -18822,7 +18972,7 @@ snapshots:
       jest-util: 29.7.0
       jest-validate: 29.7.0
       jest-watcher: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       pretty-format: 29.7.0
       slash: 3.0.0
       strip-ansi: 6.0.1
@@ -18857,7 +19007,7 @@ snapshots:
       jest-util: 29.7.0
       jest-validate: 29.7.0
       jest-watcher: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       pretty-format: 29.7.0
       slash: 3.0.0
       strip-ansi: 6.0.1
@@ -18913,7 +19063,7 @@ snapshots:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.22
+      '@jridgewell/trace-mapping': 0.3.25
       '@types/node': 20.14.15
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
@@ -18941,7 +19091,7 @@ snapshots:
 
   '@jest/source-map@29.6.3':
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.22
+      '@jridgewell/trace-mapping': 0.3.25
       callsites: 3.1.0
       graceful-fs: 4.2.11
 
@@ -18963,7 +19113,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.9
       '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.22
+      '@jridgewell/trace-mapping': 0.3.25
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 2.0.0
@@ -18972,7 +19122,7 @@ snapshots:
       jest-haste-map: 29.7.0
       jest-regex-util: 29.6.3
       jest-util: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       pirates: 4.0.6
       slash: 3.0.0
       write-file-atomic: 4.0.2
@@ -18983,7 +19133,7 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.14.15
+      '@types/node': 18.19.14
       '@types/yargs': 15.0.19
       chalk: 4.1.2
 
@@ -19052,8 +19202,8 @@ snapshots:
 
   '@jridgewell/source-map@0.3.5':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.22
 
   '@jridgewell/source-map@0.3.6':
     dependencies:
@@ -19164,7 +19314,7 @@ snapshots:
       '@metamask/object-multiplex': 2.0.0
       '@metamask/rpc-errors': 6.2.1
       '@metamask/safe-event-emitter': 3.1.1
-      '@metamask/utils': 8.5.0
+      '@metamask/utils': 8.4.0
       detect-browser: 5.3.0
       extension-port-stream: 3.0.0
       fast-deep-equal: 3.1.3
@@ -19262,6 +19412,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@metamask/utils@8.4.0':
+    dependencies:
+      '@ethereumjs/tx': 4.2.0
+      '@noble/hashes': 1.4.0
+      '@scure/base': 1.1.8
+      '@types/debug': 4.1.12
+      debug: 4.3.7(supports-color@8.1.1)
+      pony-cause: 2.1.10
+      semver: 7.6.3
+      superstruct: 1.0.4
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@metamask/utils@8.5.0':
     dependencies:
       '@ethereumjs/tx': 4.2.0
@@ -19295,7 +19459,7 @@ snapshots:
       '@motionone/easing': 10.17.0
       '@motionone/types': 10.17.0
       '@motionone/utils': 10.17.0
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   '@motionone/dom@10.12.0':
     dependencies:
@@ -19324,7 +19488,7 @@ snapshots:
     dependencies:
       '@motionone/types': 10.17.0
       '@motionone/utils': 10.17.0
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   '@motionone/svelte@10.16.4':
     dependencies:
@@ -19337,7 +19501,7 @@ snapshots:
     dependencies:
       '@motionone/types': 10.17.0
       hey-listen: 1.0.8
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   '@motionone/vue@10.16.4':
     dependencies:
@@ -19575,11 +19739,11 @@ snapshots:
     dependencies:
       asn1js: 3.0.5
       pvtsutils: 1.3.5
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   '@peculiar/json-schema@1.1.12':
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   '@peculiar/webcrypto@1.4.5':
     dependencies:
@@ -23268,7 +23432,7 @@ snapshots:
 
   '@swc/helpers@0.5.12':
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   '@swc/helpers@0.5.5':
     dependencies:
@@ -23564,6 +23728,30 @@ snapshots:
     dependencies:
       '@types/node': 20.14.15
 
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.0': {}
+
+  '@types/d3-scale@4.0.8':
+    dependencies:
+      '@types/d3-time': 3.0.3
+
+  '@types/d3-shape@3.1.6':
+    dependencies:
+      '@types/d3-path': 3.1.0
+
+  '@types/d3-time@3.0.3': {}
+
+  '@types/d3-timer@3.0.2': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 0.7.34
@@ -23645,7 +23833,7 @@ snapshots:
 
   '@types/http-proxy@1.17.14':
     dependencies:
-      '@types/node': 20.14.15
+      '@types/node': 18.19.14
 
   '@types/istanbul-lib-coverage@2.0.6': {}
 
@@ -23706,7 +23894,7 @@ snapshots:
 
   '@types/node-forge@1.3.11':
     dependencies:
-      '@types/node': 20.14.15
+      '@types/node': 18.19.14
 
   '@types/node@10.12.18': {}
 
@@ -23736,7 +23924,7 @@ snapshots:
 
   '@types/pbkdf2@3.1.2':
     dependencies:
-      '@types/node': 20.14.15
+      '@types/node': 18.19.14
 
   '@types/pg@8.11.6':
     dependencies:
@@ -23776,7 +23964,7 @@ snapshots:
 
   '@types/secp256k1@4.0.6':
     dependencies:
-      '@types/node': 20.14.15
+      '@types/node': 18.19.14
 
   '@types/semver@7.5.6': {}
 
@@ -25591,7 +25779,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-shim-unscopables: 1.0.2
       get-intrinsic: 1.2.4
 
@@ -25657,7 +25845,7 @@ snapshots:
 
   ast-types@0.16.1:
     dependencies:
-      tslib: 2.6.3
+      tslib: 2.7.0
 
   astral-regex@2.0.0: {}
 
@@ -26961,6 +27149,44 @@ snapshots:
       untildify: 4.0.0
       yauzl: 2.10.0
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
   dashdash@1.14.1:
     dependencies:
       assert-plus: 1.0.0
@@ -27045,6 +27271,8 @@ snapshots:
 
   decamelize@1.2.0: {}
 
+  decimal.js-light@2.5.1: {}
+
   decimal.js@10.4.3: {}
 
   decode-uri-component@0.2.2: {}
@@ -27273,6 +27501,11 @@ snapshots:
     dependencies:
       utila: 0.4.0
 
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.25.0
+      csstype: 3.1.3
+
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -27404,6 +27637,18 @@ snapshots:
 
   email-addresses@5.0.0: {}
 
+  embla-carousel-react@8.2.1(react@18.2.0):
+    dependencies:
+      embla-carousel: 8.2.1
+      embla-carousel-reactive-utils: 8.2.1(embla-carousel@8.2.1)
+      react: 18.2.0
+
+  embla-carousel-reactive-utils@8.2.1(embla-carousel@8.2.1):
+    dependencies:
+      embla-carousel: 8.2.1
+
+  embla-carousel@8.2.1: {}
+
   emittery@0.13.1: {}
 
   emoji-regex@10.3.0: {}
@@ -27516,55 +27761,6 @@ snapshots:
       unbox-primitive: 1.0.2
       which-typed-array: 1.1.14
 
-  es-abstract@1.23.2:
-    dependencies:
-      array-buffer-byte-length: 1.0.1
-      arraybuffer.prototype.slice: 1.0.3
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      data-view-buffer: 1.0.1
-      data-view-byte-length: 1.0.1
-      data-view-byte-offset: 1.0.0
-      es-define-property: 1.0.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-set-tostringtag: 2.0.3
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.4
-      get-symbol-description: 1.0.2
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
-      hasown: 2.0.2
-      internal-slot: 1.0.7
-      is-array-buffer: 3.0.4
-      is-callable: 1.2.7
-      is-data-view: 1.0.1
-      is-negative-zero: 2.0.3
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.3
-      is-string: 1.0.7
-      is-typed-array: 1.1.13
-      is-weakref: 1.0.2
-      object-inspect: 1.13.1
-      object-keys: 1.1.1
-      object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.2
-      safe-array-concat: 1.1.2
-      safe-regex-test: 1.0.3
-      string.prototype.trim: 1.2.9
-      string.prototype.trimend: 1.0.8
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.2
-      typed-array-byte-length: 1.0.1
-      typed-array-byte-offset: 1.0.2
-      typed-array-length: 1.0.5
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.15
-
   es-abstract@1.23.3:
     dependencies:
       array-buffer-byte-length: 1.0.1
@@ -28095,6 +28291,8 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
+  exenv@1.2.2: {}
+
   exit@0.1.2: {}
 
   expand-template@2.0.3: {}
@@ -29359,6 +29557,8 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.0.6
 
+  internmap@2.0.3: {}
+
   intl-messageformat@10.5.11:
     dependencies:
       '@formatjs/ecma402-abstract': 1.18.2
@@ -29671,7 +29871,7 @@ snapshots:
       '@babel/core': 7.23.9
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
-      semver: 7.6.3
+      semver: 7.6.0
     transitivePeerDependencies:
       - supports-color
 
@@ -29868,7 +30068,7 @@ snapshots:
       jest-runner: 29.7.0
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       parse-json: 5.2.0
       pretty-format: 29.7.0
       slash: 3.0.0
@@ -29900,7 +30100,7 @@ snapshots:
       jest-runner: 29.7.0
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       parse-json: 5.2.0
       pretty-format: 29.7.0
       slash: 3.0.0
@@ -29932,7 +30132,7 @@ snapshots:
       jest-runner: 29.7.0
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       parse-json: 5.2.0
       pretty-format: 29.7.0
       slash: 3.0.0
@@ -29963,7 +30163,7 @@ snapshots:
       jest-runner: 29.7.0
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       parse-json: 5.2.0
       pretty-format: 29.7.0
       slash: 3.0.0
@@ -29994,7 +30194,7 @@ snapshots:
       jest-runner: 29.7.0
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       parse-json: 5.2.0
       pretty-format: 29.7.0
       slash: 3.0.0
@@ -30064,7 +30264,7 @@ snapshots:
       jest-regex-util: 29.6.3
       jest-util: 29.7.0
       jest-worker: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       walker: 1.0.8
     optionalDependencies:
       fsevents: 2.3.3
@@ -30205,7 +30405,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.6.0
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
 
@@ -30786,7 +30986,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.6.3
+      semver: 7.6.0
 
   make-error@1.3.6: {}
 
@@ -32150,7 +32350,7 @@ snapshots:
 
   pvtsutils@1.3.5:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   pvutils@1.1.3: {}
 
@@ -32362,6 +32562,17 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  react-lifecycles-compat@3.0.4: {}
+
+  react-modal@3.16.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      exenv: 1.2.2
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-lifecycles-compat: 3.0.4
+      warning: 4.0.3
+
   react-native-webview@11.26.1(react@18.2.0):
     dependencies:
       escape-string-regexp: 2.0.0
@@ -32394,6 +32605,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.54
 
+  react-smooth@4.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      fast-equals: 5.0.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-transition-group: 4.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+
   react-stately@3.29.1(react@18.2.0):
     dependencies:
       '@react-stately/calendar': 3.4.3(react@18.2.0)
@@ -32430,6 +32649,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.54
 
+  react-transition-group@4.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      '@babel/runtime': 7.25.0
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   react-transition-state@1.1.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -32556,6 +32784,23 @@ snapshots:
       tiny-invariant: 1.3.3
       tslib: 2.7.0
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.12.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      clsx: 2.1.0
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 16.13.1
+      react-smooth: 4.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -34404,15 +34649,6 @@ snapshots:
       for-each: 0.3.3
       is-typed-array: 1.1.13
 
-  typed-array-length@1.0.5:
-    dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-      possible-typed-array-names: 1.0.0
-
   typed-array-length@1.0.6:
     dependencies:
       call-bind: 1.0.7
@@ -34661,7 +34897,7 @@ snapshots:
 
   v8-to-istanbul@9.2.0:
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.22
+      '@jridgewell/trace-mapping': 0.3.25
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
@@ -34688,6 +34924,23 @@ snapshots:
       core-util-is: 1.0.2
       extsprintf: 1.3.0
 
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.8
+      '@types/d3-shape': 3.1.6
+      '@types/d3-time': 3.0.3
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
   viem@1.21.4(bufferutil@4.0.8)(typescript@5.5.4)(utf-8-validate@5.0.10)(zod@3.23.8):
     dependencies:
       '@adraffy/ens-normalize': 1.10.0
@@ -35039,6 +35292,10 @@ snapshots:
     dependencies:
       makeerror: 1.0.12
 
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
   watchpack@2.4.0:
     dependencies:
       glob-to-regexp: 0.4.1
@@ -35065,7 +35322,7 @@ snapshots:
       '@peculiar/json-schema': 1.1.12
       asn1js: 3.0.5
       pvtsutils: 1.3.5
-      tslib: 2.7.0
+      tslib: 2.6.3
 
   webextension-polyfill@0.10.0: {}