From 8a12063fccfe46699f2e47ba5c71573cf2a6a3a8 Mon Sep 17 00:00:00 2001 From: raghukapur9 Date: Wed, 25 Sep 2024 21:44:55 -0400 Subject: [PATCH 01/40] update homepage --- package.json | 3 + packages/app-explorer/package.json | 2 + packages/app-explorer/src/app/layout.tsx | 2 +- .../systems/Core/components/Layout/Layout.tsx | 2 +- .../Home/components/BlockTableTile.tsx | 77 +++ .../Home/components/DailyTransaction.tsx | 126 +++++ .../DataTable/GridTable.stories.tsx | 60 +++ .../Home/components/DataTable/GridTable.tsx | 131 +++++ .../Home/components/DataTable/gridTable.css | 46 ++ .../Home/components/DataTable/index.tsx | 32 ++ .../Home/components/GasSpentChart/index.tsx | 143 ++++++ .../Home/components/Hero/Hero.stories.tsx | 36 ++ .../src/systems/Home/components/Hero/Hero.tsx | 196 +++++++- .../systems/Home/components/LatestBlock.tsx | 63 +++ .../src/systems/Home/components/TPS.tsx | 139 ++++++ .../Home/components/TotalDapps/TotalDapps.tsx | 136 ++++++ .../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 + .../ui/src/components/GridTable/GridTable.tsx | 80 +--- .../ui/src/components/GridTable/gridTable.css | 46 ++ packages/ui/src/index.ts | 2 + packages/ui/src/theme/tailwind-preset.ts | 6 + packages/ui/src/theme/theme.css | 6 +- pnpm-lock.yaml | 447 ++++++++++++++---- 33 files changed, 2375 insertions(+), 187 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.stories.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/gridTable.css 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 create mode 100644 packages/ui/src/components/GridTable/gridTable.css diff --git a/package.json b/package.json index 9576bd344..d89f07a6b 100644 --- a/package.json +++ b/package.json @@ -136,5 +136,8 @@ "ws@<8.17.1": ">=8.17.1", "fast-loops@<1.1.4": ">=1.1.4" } + }, + "dependencies": { + "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({ - + {children} 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..55b3bd8de 100644 --- a/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx +++ b/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx @@ -23,7 +23,7 @@ export function Layout({ children, contentClassName }: LayoutProps) { 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 = ({ block }) => { + const classes = styles(); + + return ( + + +
+

#{block.blockNo}

+

{+block.gasUsed / 10 ** 9} ETH

+
+
+

+ {block.producer} +

+
+ +
+ + + + + +

Settled

+ +

+ {fromNow(block.timeStamp)} +

+ +
+ + + ); +}; + +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..96a3a92fa --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx @@ -0,0 +1,126 @@ +import { ChartConfig, RoundedContainer } from '@fuels/ui'; +import dayjs from 'dayjs'; +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?.map((block: any) => ({ + time: dayjs(Number(block.time)).format('HH:mm'), + value: block.value, + })); + const cumilativeTsx = blocks.blocks.reduce( + (sum: any, block: any) => sum + Number(block.value), + 0, + ); + return ( + +
+
+
+
+
+ Daily Transactions + + + + + +
+
+ The total number of transactions completed on Fuel Network + within a 24-hour period. +
+
+
+
+ + 24h + +
+

+ {cumilativeTsx.toLocaleString()} +

+ + + + + + [`${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 }} + /> + + + + +
+ + ); +}; + +export default DailyTransaction; diff --git a/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.stories.tsx b/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.stories.tsx new file mode 100644 index 000000000..264a226cb --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.stories.tsx @@ -0,0 +1,60 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import GridTable, { GridTableProps } from './GridTable'; +import { columns, data } from './data'; + +const meta: Meta = { + title: 'Home/GridTable', + component: GridTable, + parameters: { + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj>; + +export const Desktop: Story = { + args: { + columns, + data: data.slice(0, 10), + totalRows: data.length, + rowsPerPage: 10, + pageCount: Math.ceil(data.length / 10), + onPageChanged: (selectedPage: number) => + console.log(`Page changed to: ${selectedPage}`), + }, +}; + +export const Tablet: Story = { + args: { + columns, + data: data.slice(0, 10), + totalRows: data.length, + rowsPerPage: 10, + pageCount: Math.ceil(data.length / 10), + onPageChanged: (selectedPage: number) => + console.log(`Page changed to: ${selectedPage}`), + }, + parameters: { + viewport: { + defaultViewport: 'ipad', + }, + }, +}; + +export const Mobile: Story = { + args: { + columns, + data: data.slice(0, 10), + totalRows: data.length, + rowsPerPage: 10, + pageCount: Math.ceil(data.length / 10), + onPageChanged: (selectedPage: number) => + console.log(`Page changed to: ${selectedPage}`), + }, + parameters: { + viewport: { + defaultViewport: 'iphonex', + }, + }, +}; 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 extends TableProps { + columns: TableColumn[]; + data: T[]; + pageCount: number; + onPageChanged: (selectedItem: number) => void; +} + +function GridTable({ + columns, + data, + pageCount, + onPageChanged, + ...props +}: GridTableProps): 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 ( + ← Previous} // Left Arrow + nextLabel={Next →} // 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 ( +
+ +
+ ); +} + +export default GridTable; diff --git a/packages/app-explorer/src/systems/Home/components/DataTable/gridTable.css b/packages/app-explorer/src/systems/Home/components/DataTable/gridTable.css new file mode 100644 index 000000000..0ac743449 --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/DataTable/gridTable.css @@ -0,0 +1,46 @@ +.pagination { + display: flex; + justify-content: end; + align-items: center; + list-style: none; + padding: 0; + margin: 1rem 0; +} + +.pagination li { +margin: 0 8px; /* Adjusts space between the pagination items */ +} + +.pagination li a { +padding: 8px 16px; /* Adjusts padding inside each pagination item */ +color: #f0f0f0; +background-color: rgb(32, 32, 32); +border-radius: 7px; +cursor: pointer; +text-decoration: none; +} + +.pagination li.selected a { +background-color: rgba(255, 255, 255, 0.2); /* Slightly lighter background */ +font-weight: bold; +} + +.pagination li a:hover { +background-color: rgba(255, 255, 255, 0.1); +} + +/* Remove background color for Previous and Next buttons */ +.pagination li.previous a, +.pagination li.next a { +background-color: transparent; +padding: 0; +} + +.pagination li.disabled a { +color: #888; /* Disabled color for previous/next buttons */ +cursor: not-allowed; +} + +.pagination li.disabled a:hover { +background-color: transparent; /* Keeps background same on hover */ +} \ No newline at end of file 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..9ab1264fb --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/DataTable/index.tsx @@ -0,0 +1,32 @@ +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 ( + + + {Array.from({ length: props.blocks.length }, (_, index) => ( + + + + ))} + + + + + + ); +}; 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..403e04287 --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx @@ -0,0 +1,143 @@ +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; +} +export 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 ( + +
+
+
+
+
+ Gas Spent + + + + + +
+
+ The percentage of block resources utilized by transactions. +
+
+
+
+ + 24h + +
+ +

+ {(totalGasSpent / 10 ** 9).toFixed(8)} +

+

+ ETH +

+ + + + + + [`${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 }} + /> + { + return Number((value / 10 ** 9).toFixed(6)).toExponential(); + }} + /> + + + + +
+
+ {/*
+
+
ETH
+
*/} + {/*
+
+
FUEL
+
*/} +
+ + ); +}; 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..51f030b43 --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.stories.tsx @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Hero } from './Hero'; + +const meta: Meta = { + title: 'Home/Hero', + component: Hero, + parameters: { + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +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..03a486dbb 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,204 @@ '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 { useEffect, useState } from 'react'; import { tv } from 'tailwind-variants'; +import projectJson from '../../../../../../app-portal/src/systems/Ecosystem/data/projects.json'; +import { DataTable } from '../../components/DataTable'; +import { Block } from '../../interface/blocks.interface'; +import DailyTransaction from '../DailyTransaction'; +import { GasSpentChart } from '../GasSpentChart'; +import { LatestBlock } from '../LatestBlock'; +import { TPS } from '../TPS'; +import TotalDapps from '../TotalDapps/TotalDapps'; +import { getBlocksDashboard } from './actions/get-blocks-dashboard'; +import { getTPS } from './actions/get-tps'; export function Hero() { const classes = styles(); + const [isLoading, setIsLoading] = useState(true); + const [tpsData, setTpsData] = useState(null); + const [blocksData, setBlocksData] = useState(null); + const [isFirstFetch, setIsFirstFetch] = useState(true); + + const getTPSData = async () => { + try { + const result = await getTPS(); + const dashboard = await getBlocksDashboard(); + + setTpsData(result); + + setBlocksData(dashboard); + + if (isFirstFetch) { + setIsLoading(false); // Set loading to false only after first fetch + setIsFirstFetch(false); // Mark that the first fetch is done + } + } catch (_e) {} + }; + + useEffect(() => { + 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 ( - - - - Explore Fuel - - - + + + + + + Fuel Explorer + + {/* + Trending Items + +
+ +
*/} + + +
+ } + regularEl={} + /> +
+
+ } + regularEl={ + + } + /> +
+
+ } + regularEl={ + + } + /> +
+
+ } + regularEl={} + /> +
+ +
+ } + regularEl={} + /> + {/* */} +
+
+ } + regularEl={} + /> +
+ + + + + ); } 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', + ], }, }); 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..652b99032 --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx @@ -0,0 +1,63 @@ +import { HStack, RoundedContainer, VStack } from '@fuels/ui'; + +import { fromNow } from '~/systems/Core/utils/dayjs'; +import { Block } from '../interface/blocks.interface'; + +export const LatestBlock = (block: Block) => { + return ( + +
+
+
+
+
+ Latest Block + + + + + +
+
+ The percentage of block resources utilized by transactions. +
+
+
+
+ + {fromNow(block?.timeStamp)} + +
+

+ {block.blockNo} +

+
+ + + +

+

+ {block.producer} +

+ + +

+ Block Reward +

+

+ {(+block.gasUsed / 10 ** 9).toFixed(2)} ETH +

+ + + + ); +}; 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..5d93d88b2 --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/TPS.tsx @@ -0,0 +1,139 @@ +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?.map((block: any) => ({ + time: dayjs(Number(block.time)).format('HH:mm'), + value: block.value / 3600, + })); + + const averageTPS = + blocks.reduce((sum: any, block: any) => sum + Number(block.value), 0) / + blocks.length; + + const highestValue = Math.max( + ...chartData.map((data: any) => Number(data.value)), + ); + + const getTicks = () => { + const ticks: string[] = []; + for (let i = 0; i < chartData.length; i += 6) { + ticks.push(chartData[i].time); + } + return ticks; + }; + + return ( + +
+
+
+
+
+ TPS + + + + + +
+
+ Transactions Per Second processed by the Fuel network. +
+
+
+
+ + 24h + +
+ +

+ {`${Math.ceil(averageTPS / 3600)}`} +

+
TX/s
+ + + + + + 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 }} + /> + + {chartData.map((entry, index) => ( + + ))} + + + +
+ + ); +}; 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..464d442bb --- /dev/null +++ b/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx @@ -0,0 +1,136 @@ +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 = ({ + 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 ( + +
+

+ Fuel Dapps +

+ + View All + +
+

+ {total} +

+ +
+
+
+
+
+
+
+
+ + Active: {active} + + + Building: {total - active} + +
+ +
+ + + Featured Dapps + + + {featured.map((feature: any) => { + return ( + + +

{feature.name}

+ + ); + })} +
+ + ); +}; +; +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 ( + +
+ {title} +

{title}

+
+ + ); +}; + +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(); + 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 ( +
+ {/* Mext button */} + {current < count && ( + + )} + {/* Previous Button */} + {current > 1 && ( + + )} + + + {TRENDING_DATA.map((item, i) => ( + + + + ))} + + +
+ ); +}; 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; + +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 {children}; + }, +}); 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; +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[0]; + api: ReturnType[1]; + scrollPrev: () => void; + scrollNext: () => void; + canScrollPrev: boolean; + canScrollNext: boolean; +} & CarouselProps; + +const CarouselContext = React.createContext(null); + +function useCarousel() { + const context = React.useContext(CarouselContext); + + if (!context) { + throw new Error('useCarousel must be used within a '); + } + + return context; +} + +const Carousel = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & 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) => { + 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 ( + +
+ {children} +
+ + ); + }, +); +Carousel.displayName = 'Carousel'; + +const CarouselContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const { carouselRef, orientation } = useCarousel(); + + return ( +
+
+
+ ); +}); +CarouselContent.displayName = 'CarouselContent'; + +const CarouselItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const { orientation } = useCarousel(); + + return ( +
+ ); +}); +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 } + ); +}; + +type ChartContextProps = { + config: ChartConfig; +}; + +const ChartContext = React.createContext(null); + +function useChart() { + const context = React.useContext(ChartContext); + + if (!context) { + throw new Error('useChart must be used within a '); + } + + 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 ( + +
+ + + {children} + +
+ + ); +}); +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 ( + =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'} @@ -8822,6 +8842,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 +8994,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 +9221,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 +9411,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 +9500,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 +9733,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 +10747,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==} @@ -13115,6 +13201,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 +13222,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 +13315,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 +14784,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 +15102,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 +15217,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 +18422,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)': @@ -18796,7 +18906,7 @@ snapshots: - ts-node optional: true - '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4))': + '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0 @@ -18810,7 +18920,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) + jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -18983,7 +19093,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 +19162,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: @@ -19135,7 +19245,7 @@ snapshots: dependencies: '@metamask/rpc-errors': 6.2.1 '@metamask/safe-event-emitter': 3.1.1 - '@metamask/utils': 8.5.0 + '@metamask/utils': 8.4.0 transitivePeerDependencies: - supports-color @@ -19143,7 +19253,7 @@ snapshots: dependencies: '@metamask/json-rpc-engine': 8.0.2 '@metamask/safe-event-emitter': 3.1.1 - '@metamask/utils': 8.5.0 + '@metamask/utils': 8.4.0 readable-stream: 3.6.2 transitivePeerDependencies: - supports-color @@ -19164,7 +19274,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 @@ -19176,7 +19286,7 @@ snapshots: '@metamask/rpc-errors@6.2.1': dependencies: - '@metamask/utils': 8.5.0 + '@metamask/utils': 8.4.0 fast-safe-stringify: 2.1.1 transitivePeerDependencies: - supports-color @@ -19262,16 +19372,30 @@ snapshots: transitivePeerDependencies: - supports-color - '@metamask/utils@8.5.0': + '@metamask/utils@8.4.0': dependencies: '@ethereumjs/tx': 4.2.0 - '@metamask/superstruct': 3.1.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 + '@metamask/superstruct': 3.1.0 + '@noble/hashes': 1.5.0 + '@scure/base': 1.1.8 + '@types/debug': 4.1.12 + debug: 4.3.7(supports-color@8.1.1) + pony-cause: 2.1.11 + semver: 7.6.3 uuid: 9.0.1 transitivePeerDependencies: - supports-color @@ -19295,7 +19419,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 +19448,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 +19461,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 +19699,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 +23392,7 @@ snapshots: '@swc/helpers@0.5.12': dependencies: - tslib: 2.7.0 + tslib: 2.6.3 '@swc/helpers@0.5.5': dependencies: @@ -23645,7 +23769,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 +23830,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 +23860,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 +23900,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 +25715,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 +25781,7 @@ snapshots: ast-types@0.16.1: dependencies: - tslib: 2.6.3 + tslib: 2.7.0 astral-regex@2.0.0: {} @@ -26736,13 +26860,13 @@ snapshots: - ts-node optional: true - create-jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): + create-jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) + jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -26961,6 +27085,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 +27207,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 +27437,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 +27573,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 +27697,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 +28227,8 @@ snapshots: dependencies: pify: 2.3.0 + exenv@1.2.2: {} + exit@0.1.2: {} expand-template@2.0.3: {} @@ -29671,7 +29805,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 @@ -29691,7 +29825,7 @@ snapshots: '@babel/parser': 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 @@ -29811,6 +29945,25 @@ snapshots: - ts-node optional: true + jest-cli@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): + dependencies: + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) + '@jest/test-result': 29.7.0 + '@jest/types': 29.6.3 + chalk: 4.1.2 + create-jest: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) + exit: 0.1.2 + import-local: 3.1.0 + jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) + jest-util: 29.7.0 + jest-validate: 29.7.0 + yargs: 17.7.2 + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - supports-color + - ts-node + jest-cli@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): dependencies: '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) @@ -29913,6 +30066,37 @@ snapshots: - supports-color optional: true + jest-config@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): + dependencies: + '@babel/core': 7.23.9 + '@jest/test-sequencer': 29.7.0 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.23.9) + chalk: 4.1.2 + ci-info: 3.9.0 + deepmerge: 4.3.1 + glob: 7.2.3 + graceful-fs: 4.2.11 + jest-circus: 29.7.0 + jest-environment-node: 29.7.0 + jest-get-type: 29.6.3 + jest-regex-util: 29.6.3 + jest-resolve: 29.7.0 + jest-runner: 29.7.0 + jest-util: 29.7.0 + jest-validate: 29.7.0 + micromatch: 4.0.5 + parse-json: 5.2.0 + pretty-format: 29.7.0 + slash: 3.0.0 + strip-json-comments: 3.1.1 + optionalDependencies: + '@types/node': 20.14.15 + ts-node: 10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5) + transitivePeerDependencies: + - babel-plugin-macros + - supports-color + jest-config@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): dependencies: '@babel/core': 7.23.9 @@ -30266,12 +30450,12 @@ snapshots: - ts-node optional: true - jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): + jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) + jest-cli: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -30786,7 +30970,7 @@ snapshots: make-dir@4.0.0: dependencies: - semver: 7.6.3 + semver: 7.6.0 make-error@1.3.6: {} @@ -32150,7 +32334,7 @@ snapshots: pvtsutils@1.3.5: dependencies: - tslib: 2.7.0 + tslib: 2.6.3 pvutils@1.1.3: {} @@ -32362,6 +32546,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 +32589,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 +32633,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 +32768,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 @@ -34104,7 +34333,7 @@ snapshots: '@swc/core': 1.4.1(@swc/helpers@0.5.12) optional: true - ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4): + ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.9 @@ -34404,15 +34633,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 @@ -34464,14 +34684,10 @@ snapshots: undici-types@5.26.5: {} - undici-types@6.19.8: {} - undici@5.28.4: dependencies: '@fastify/busboy': 2.1.1 - undici@6.19.8: {} - unenv@1.9.0: dependencies: consola: 3.2.3 @@ -34688,6 +34904,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 +35272,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 +35302,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: {} From 5cddbf2b57fa6121958a3f0bfea3442aa115038f Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Thu, 26 Sep 2024 09:05:26 +0530 Subject: [PATCH 02/40] fix: key warning --- .../src/systems/Home/components/DailyTransaction.tsx | 4 ++++ .../src/systems/Home/components/DataTable/index.tsx | 1 + .../src/systems/Home/components/TotalDapps/TotalDapps.tsx | 6 +++++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx index 96a3a92fa..11d989c8f 100644 --- a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx +++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx @@ -1,5 +1,6 @@ import { ChartConfig, RoundedContainer } from '@fuels/ui'; import dayjs from 'dayjs'; +import { DateTime } from 'fuels'; import { CartesianGrid, Line, @@ -20,6 +21,7 @@ const chartConfig = { interface DailyTransactionProps { blocks: any; } + const DailyTransaction = (blocks: DailyTransactionProps) => { const chartData = blocks.blocks?.map((block: any) => ({ time: dayjs(Number(block.time)).format('HH:mm'), @@ -81,6 +83,7 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { dataKey="time" tick={{ fontSize: 10, + className: 'fill-heading', }} /> @@ -106,6 +109,7 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { tick={{ fontSize: 12, className: 'fill-heading', + key: DateTime.now(), }} /> { {Array.from({ length: props.blocks.length }, (_, index) => ( diff --git a/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx b/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx index 464d442bb..b44ecf67f 100644 --- a/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx +++ b/packages/app-explorer/src/systems/Home/components/TotalDapps/TotalDapps.tsx @@ -78,7 +78,11 @@ const TotalDapps: React.FC = ({ {featured.map((feature: any) => { return ( - + Date: Thu, 26 Sep 2024 09:15:07 +0530 Subject: [PATCH 03/40] fix: repeated time values --- .../Home/components/DailyTransaction.tsx | 23 ++++++++++---- .../src/systems/Home/components/TPS.tsx | 30 +++++++++++++------ 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx index 11d989c8f..87ba72967 100644 --- a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx +++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx @@ -23,10 +23,23 @@ interface DailyTransactionProps { } const DailyTransaction = (blocks: DailyTransactionProps) => { - const chartData = blocks.blocks?.map((block: any) => ({ - time: dayjs(Number(block.time)).format('HH:mm'), - value: block.value, - })); + const chartData = blocks.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 cumilativeTsx = blocks.blocks.reduce( (sum: any, block: any) => sum + Number(block.value), 0, @@ -71,7 +84,7 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { { const blocks = props.blocks; - const chartData = blocks?.map((block: any) => ({ - time: dayjs(Number(block.time)).format('HH:mm'), - value: block.value / 3600, - })); + 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) / blocks.length; const highestValue = Math.max( - ...chartData.map((data: any) => Number(data.value)), + ...chartDataArray.map((data: any) => Number(data.value)), ); const getTicks = () => { const ticks: string[] = []; - for (let i = 0; i < chartData.length; i += 6) { - ticks.push(chartData[i].time); + for (let i = 0; i < chartDataArray.length; i += 6) { + ticks.push(chartDataArray[i].time); } return ticks; }; @@ -81,7 +93,7 @@ export const TPS = (props: TPSProps) => { { cursor={{ strokeWidth: 0.1, radius: 10 }} /> - {chartData.map((entry, index) => ( + {chartDataArray.map((entry, index) => ( Date: Thu, 26 Sep 2024 12:41:32 +0530 Subject: [PATCH 04/40] fix: incorrect daily transactio value --- .../src/systems/Home/components/DailyTransaction.tsx | 4 +--- packages/app-explorer/src/systems/Home/components/TPS.tsx | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx index 87ba72967..8420475ff 100644 --- a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx +++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx @@ -26,8 +26,7 @@ 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 / 3600; - + const value = +block.value; acc[time] = (acc[time] || 0) + value; return acc; }, @@ -96,7 +95,6 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { dataKey="time" tick={{ fontSize: 10, - className: 'fill-heading', }} /> diff --git a/packages/app-explorer/src/systems/Home/components/TPS.tsx b/packages/app-explorer/src/systems/Home/components/TPS.tsx index 1f5945183..291fbd8bf 100644 --- a/packages/app-explorer/src/systems/Home/components/TPS.tsx +++ b/packages/app-explorer/src/systems/Home/components/TPS.tsx @@ -36,8 +36,7 @@ export const TPS = (props: TPSProps) => { : []; const averageTPS = - blocks.reduce((sum: any, block: any) => sum + Number(block.value), 0) / - blocks.length; + blocks.reduce((sum: any, block: any) => sum + Number(block.value), 0) / 24; const highestValue = Math.max( ...chartDataArray.map((data: any) => Number(data.value)), From 52935374fb6105c1d934ddc0eba838c18b03c4c1 Mon Sep 17 00:00:00 2001 From: aashaykapoor-bimaplan <104904081+aashaykapoor-bimaplan@users.noreply.github.com> Date: Thu, 26 Sep 2024 12:45:04 +0530 Subject: [PATCH 05/40] remove unused table component --- .../ui/src/components/GridTable/GridTable.tsx | 129 ------------------ .../ui/src/components/GridTable/gridTable.css | 46 ------- .../ui/src/components/GridTable/index.tsx | 1 - packages/ui/src/index.ts | 1 - 4 files changed, 177 deletions(-) delete mode 100644 packages/ui/src/components/GridTable/GridTable.tsx delete mode 100644 packages/ui/src/components/GridTable/gridTable.css delete mode 100644 packages/ui/src/components/GridTable/index.tsx diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx deleted file mode 100644 index c4fc56dcc..000000000 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ /dev/null @@ -1,129 +0,0 @@ -'use client'; -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 extends TableProps { - columns: TableColumn[]; - data: T[]; - pageCount: number; - onPageChanged: (selectedItem: number) => void; -} -export type GridTableColumn = TableColumn; -export const GridTable = ({ - columns, - data, - pageCount, - onPageChanged, - ...props -}: GridTableProps): React.JSX.Element => { - const [_currentPage, setCurrentPage] = useState(0); - - const customStyles = { - tableWrapper: { - style: { - borderRadius: '7px', - }, - }, - table: { - style: { - backgroundColor: 'transparent', - }, - }, - headRow: { - style: { - backgroundColor: 'transparent', - color: '#9f9f9f', - fontWeight: '600', - }, - }, - headCells: { - style: { - backgroundColor: 'transparent', - color: '#9f9f9f', - fontWeight: '600', - }, - }, - rows: { - style: { - cursor: 'pointer', - backgroundColor: 'transparent', - fontWeight: '400', - '&:hover': { - backgroundColor: 'var(--gray-2)', // Change background color on hover - }, - }, - }, - cells: { - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - paddingLeft: '0.5rem', - paddingRight: '0.5rem', - color: 'var(--gray-table-text)', - paddingTop: '0.9rem', - paddingBottom: '0.9rem', - backgroundColor: 'transparent', - fontWeight: '400', - }, - }, - 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 ( - ← Previous} - nextLabel={Next →} - breakLabel={'...'} - pageCount={pageCount} - marginPagesDisplayed={2} - pageRangeDisplayed={5} - onPageChange={handlePageClick} - containerClassName={'pagination'} - activeClassName={'selected'} - disabledClassName={'disabled'} - pageLinkClassName={'page-link'} - /> - ); - }; - - const handlePageClick = (data: { selected: number }) => { - setCurrentPage(data.selected); - onPageChanged(data.selected); - }; - - return ( -
- -
- ); -}; diff --git a/packages/ui/src/components/GridTable/gridTable.css b/packages/ui/src/components/GridTable/gridTable.css deleted file mode 100644 index 140882c8b..000000000 --- a/packages/ui/src/components/GridTable/gridTable.css +++ /dev/null @@ -1,46 +0,0 @@ -.pagination { - display: flex; - justify-content: end; - align-items: center; - list-style: none; - padding: 0; - margin: 1rem 0; - } - - .pagination li { - margin: 0 8px; - } - - .pagination li a { - padding: 8px 16px; - color: #f0f0f0; - background-color: rgb(32, 32, 32); - border-radius: 7px; - cursor: pointer; - text-decoration: none; - } - - .pagination li.selected a { - background-color: rgba(255, 255, 255, 0.2); - font-weight: bold; - } - - .pagination li a:hover { - background-color: rgba(255, 255, 255, 0.1); - } - - - .pagination li.previous a, - .pagination li.next a { - background-color: transparent; - padding: 0; - } - - .pagination li.disabled a { - color: #888; - cursor: not-allowed; - } - - .pagination li.disabled a:hover { - background-color: transparent; - } \ No newline at end of file diff --git a/packages/ui/src/components/GridTable/index.tsx b/packages/ui/src/components/GridTable/index.tsx deleted file mode 100644 index 42edf4b31..000000000 --- a/packages/ui/src/components/GridTable/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { GridTable } from './GridTable'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 196d5b426..76d8af8c2 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -34,7 +34,6 @@ export * from './components/Dropdown'; export * from './components/EntityItem'; export * from './components/Focus'; export * from './components/FuelLogo'; -export * from './components/GridTable'; export * from './components/Heading'; export * from './components/HelperIcon'; export * from './components/HoverCard'; From 77a56ca6357bebc6941189a0ecdb72d4b860b706 Mon Sep 17 00:00:00 2001 From: raghukapur9 Date: Thu, 26 Sep 2024 11:16:48 -0400 Subject: [PATCH 06/40] added Grid Table for view all blocks --- .../systems/Block/components/BlocksTable.tsx | 4 +- .../src/systems/Block/screens/BlockScreen.tsx | 2 +- .../ui/src/components/GridTable/GridTable.css | 46 +++++++ .../ui/src/components/GridTable/GridTable.tsx | 129 ++++++++++++++++++ .../ui/src/components/GridTable/index.tsx | 1 + packages/ui/src/index.ts | 1 + 6 files changed, 179 insertions(+), 4 deletions(-) create mode 100644 packages/ui/src/components/GridTable/GridTable.css create mode 100644 packages/ui/src/components/GridTable/GridTable.tsx create mode 100644 packages/ui/src/components/GridTable/index.tsx diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 4c709d937..d74cbe7c4 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -198,7 +198,7 @@ type BlocksTableProps = { setCurrentPage: (currentPage: number) => void; }; -function BlocksTable({ +export function BlocksTable({ blocks, onPageChanged, pageCount, @@ -222,5 +222,3 @@ function BlocksTable({
); } - -export default BlocksTable; diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index a428fa585..e4aff325a 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import { GQLBlocksQuery } from '@fuel-explorer/graphql'; import { getBlocks } from '../actions/get-blocks'; -import BlocksTable from '../components/BlocksTable'; +import { BlocksTable } from '../components/BlocksTable'; import { Hero } from '../components/Hero'; export const BlocksScreen = () => { diff --git a/packages/ui/src/components/GridTable/GridTable.css b/packages/ui/src/components/GridTable/GridTable.css new file mode 100644 index 000000000..140882c8b --- /dev/null +++ b/packages/ui/src/components/GridTable/GridTable.css @@ -0,0 +1,46 @@ +.pagination { + display: flex; + justify-content: end; + align-items: center; + list-style: none; + padding: 0; + margin: 1rem 0; + } + + .pagination li { + margin: 0 8px; + } + + .pagination li a { + padding: 8px 16px; + color: #f0f0f0; + background-color: rgb(32, 32, 32); + border-radius: 7px; + cursor: pointer; + text-decoration: none; + } + + .pagination li.selected a { + background-color: rgba(255, 255, 255, 0.2); + font-weight: bold; + } + + .pagination li a:hover { + background-color: rgba(255, 255, 255, 0.1); + } + + + .pagination li.previous a, + .pagination li.next a { + background-color: transparent; + padding: 0; + } + + .pagination li.disabled a { + color: #888; + cursor: not-allowed; + } + + .pagination li.disabled a:hover { + background-color: transparent; + } \ No newline at end of file diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx new file mode 100644 index 000000000..c4fc56dcc --- /dev/null +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -0,0 +1,129 @@ +'use client'; +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 extends TableProps { + columns: TableColumn[]; + data: T[]; + pageCount: number; + onPageChanged: (selectedItem: number) => void; +} +export type GridTableColumn = TableColumn; +export const GridTable = ({ + columns, + data, + pageCount, + onPageChanged, + ...props +}: GridTableProps): React.JSX.Element => { + const [_currentPage, setCurrentPage] = useState(0); + + const customStyles = { + tableWrapper: { + style: { + borderRadius: '7px', + }, + }, + table: { + style: { + backgroundColor: 'transparent', + }, + }, + headRow: { + style: { + backgroundColor: 'transparent', + color: '#9f9f9f', + fontWeight: '600', + }, + }, + headCells: { + style: { + backgroundColor: 'transparent', + color: '#9f9f9f', + fontWeight: '600', + }, + }, + rows: { + style: { + cursor: 'pointer', + backgroundColor: 'transparent', + fontWeight: '400', + '&:hover': { + backgroundColor: 'var(--gray-2)', // Change background color on hover + }, + }, + }, + cells: { + style: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + paddingLeft: '0.5rem', + paddingRight: '0.5rem', + color: 'var(--gray-table-text)', + paddingTop: '0.9rem', + paddingBottom: '0.9rem', + backgroundColor: 'transparent', + fontWeight: '400', + }, + }, + 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 ( + ← Previous} + nextLabel={Next →} + breakLabel={'...'} + pageCount={pageCount} + marginPagesDisplayed={2} + pageRangeDisplayed={5} + onPageChange={handlePageClick} + containerClassName={'pagination'} + activeClassName={'selected'} + disabledClassName={'disabled'} + pageLinkClassName={'page-link'} + /> + ); + }; + + const handlePageClick = (data: { selected: number }) => { + setCurrentPage(data.selected); + onPageChanged(data.selected); + }; + + return ( +
+ +
+ ); +}; diff --git a/packages/ui/src/components/GridTable/index.tsx b/packages/ui/src/components/GridTable/index.tsx new file mode 100644 index 000000000..42edf4b31 --- /dev/null +++ b/packages/ui/src/components/GridTable/index.tsx @@ -0,0 +1 @@ +export { GridTable } from './GridTable'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 76d8af8c2..d3dd3eefe 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -34,6 +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/Heading'; export * from './components/HelperIcon'; export * from './components/HoverCard'; From 6c42f5f12dcaf0bf5daaa81588cc1c9b0a707871 Mon Sep 17 00:00:00 2001 From: raghukapur9 Date: Thu, 26 Sep 2024 11:22:55 -0400 Subject: [PATCH 07/40] fixed import typo --- packages/ui/src/components/GridTable/GridTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index c4fc56dcc..3e898544e 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import DataTable, { TableProps, TableColumn } from 'react-data-table-component'; import ReactPaginate from 'react-paginate'; -import './gridTable.css'; +import './GridTable.css'; export interface GridTableProps extends TableProps { columns: TableColumn[]; From a49333001f3e38f31ae17017f67501b10fc63eb9 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Thu, 26 Sep 2024 23:02:22 +0530 Subject: [PATCH 08/40] fix: add use server to server component --- .../systems/Home/components/Hero/actions/get-blocks-dashboard.ts | 1 + .../src/systems/Home/components/Hero/actions/get-tps.ts | 1 + 2 files changed, 2 insertions(+) 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 () => { From 998caa3f6a8cc588b54212ad0098b919ad8cc555 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 27 Sep 2024 00:34:24 +0530 Subject: [PATCH 09/40] chore: sync all-blocks --- .../systems/Block/components/BlocksTable.tsx | 4 +- .../src/systems/Block/screens/BlockScreen.tsx | 31 +++- .../Home/components/DataTable/gridTable.css | 46 ----- .../src/systems/Home/components/TPS.tsx | 2 +- .../ui/src/components/GridTable/GridTable.css | 46 ----- .../ui/src/components/GridTable/GridTable.tsx | 80 +++++++-- packages/ui/src/theme/theme.css | 6 +- pnpm-lock.yaml | 168 ++++++++++-------- 8 files changed, 186 insertions(+), 197 deletions(-) delete mode 100644 packages/app-explorer/src/systems/Home/components/DataTable/gridTable.css delete mode 100644 packages/ui/src/components/GridTable/GridTable.css diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index d74cbe7c4..4c709d937 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -198,7 +198,7 @@ type BlocksTableProps = { setCurrentPage: (currentPage: number) => void; }; -export function BlocksTable({ +function BlocksTable({ blocks, onPageChanged, pageCount, @@ -222,3 +222,5 @@ export function BlocksTable({
); } + +export default BlocksTable; diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index e4aff325a..527883f74 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import { GQLBlocksQuery } from '@fuel-explorer/graphql'; import { getBlocks } from '../actions/get-blocks'; -import { BlocksTable } from '../components/BlocksTable'; +import BlocksTable from '../components/BlocksTable'; import { Hero } from '../components/Hero'; export const BlocksScreen = () => { @@ -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/Home/components/DataTable/gridTable.css b/packages/app-explorer/src/systems/Home/components/DataTable/gridTable.css deleted file mode 100644 index 0ac743449..000000000 --- a/packages/app-explorer/src/systems/Home/components/DataTable/gridTable.css +++ /dev/null @@ -1,46 +0,0 @@ -.pagination { - display: flex; - justify-content: end; - align-items: center; - list-style: none; - padding: 0; - margin: 1rem 0; -} - -.pagination li { -margin: 0 8px; /* Adjusts space between the pagination items */ -} - -.pagination li a { -padding: 8px 16px; /* Adjusts padding inside each pagination item */ -color: #f0f0f0; -background-color: rgb(32, 32, 32); -border-radius: 7px; -cursor: pointer; -text-decoration: none; -} - -.pagination li.selected a { -background-color: rgba(255, 255, 255, 0.2); /* Slightly lighter background */ -font-weight: bold; -} - -.pagination li a:hover { -background-color: rgba(255, 255, 255, 0.1); -} - -/* Remove background color for Previous and Next buttons */ -.pagination li.previous a, -.pagination li.next a { -background-color: transparent; -padding: 0; -} - -.pagination li.disabled a { -color: #888; /* Disabled color for previous/next buttons */ -cursor: not-allowed; -} - -.pagination li.disabled a:hover { -background-color: transparent; /* Keeps background same on hover */ -} \ No newline at end of file diff --git a/packages/app-explorer/src/systems/Home/components/TPS.tsx b/packages/app-explorer/src/systems/Home/components/TPS.tsx index 291fbd8bf..385d64aa7 100644 --- a/packages/app-explorer/src/systems/Home/components/TPS.tsx +++ b/packages/app-explorer/src/systems/Home/components/TPS.tsx @@ -85,7 +85,7 @@ export const TPS = (props: TPSProps) => {

- {`${Math.ceil(averageTPS / 3600)}`} + {`${(averageTPS / 3600).toFixed(2)}`}

TX/s
 diff --git a/packages/ui/src/components/GridTable/GridTable.css b/packages/ui/src/components/GridTable/GridTable.css deleted file mode 100644 index 140882c8b..000000000 --- a/packages/ui/src/components/GridTable/GridTable.css +++ /dev/null @@ -1,46 +0,0 @@ -.pagination { - display: flex; - justify-content: end; - align-items: center; - list-style: none; - padding: 0; - margin: 1rem 0; - } - - .pagination li { - margin: 0 8px; - } - - .pagination li a { - padding: 8px 16px; - color: #f0f0f0; - background-color: rgb(32, 32, 32); - border-radius: 7px; - cursor: pointer; - text-decoration: none; - } - - .pagination li.selected a { - background-color: rgba(255, 255, 255, 0.2); - font-weight: bold; - } - - .pagination li a:hover { - background-color: rgba(255, 255, 255, 0.1); - } - - - .pagination li.previous a, - .pagination li.next a { - background-color: transparent; - padding: 0; - } - - .pagination li.disabled a { - color: #888; - cursor: not-allowed; - } - - .pagination li.disabled a:hover { - background-color: transparent; - } \ No newline at end of file diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index 3e898544e..ded48a18a 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -1,29 +1,31 @@ 'use client'; -import React, { useState } from 'react'; +import React from 'react'; import DataTable, { TableProps, TableColumn } from 'react-data-table-component'; import ReactPaginate from 'react-paginate'; -import './GridTable.css'; export interface GridTableProps extends TableProps { columns: TableColumn[]; data: T[]; pageCount: number; onPageChanged: (selectedItem: number) => void; + currentPage: number; + setCurrentPage: (currentPage: number) => void; } export type GridTableColumn = TableColumn; + export const GridTable = ({ columns, data, pageCount, onPageChanged, + setCurrentPage, + currentPage, ...props }: GridTableProps): React.JSX.Element => { - const [_currentPage, setCurrentPage] = useState(0); - const customStyles = { tableWrapper: { style: { - borderRadius: '7px', + borderRadius: '0', }, }, table: { @@ -36,6 +38,7 @@ export const GridTable = ({ backgroundColor: 'transparent', color: '#9f9f9f', fontWeight: '600', + textAlign: 'left', }, }, headCells: { @@ -43,28 +46,31 @@ export const GridTable = ({ backgroundColor: 'transparent', color: '#9f9f9f', fontWeight: '600', + fontSize: '16px', + textAlign: 'left', }, }, rows: { style: { cursor: 'pointer', - backgroundColor: 'transparent', + backgroundColor: 'var(--gray-2)', fontWeight: '400', + borderRadius: '12px', + marginBottom: '8px', '&:hover': { - backgroundColor: 'var(--gray-2)', // Change background color on hover + backgroundColor: 'var(--gray-a1)', }, }, }, cells: { style: { display: 'flex', - alignItems: 'center', justifyContent: 'center', paddingLeft: '0.5rem', paddingRight: '0.5rem', color: 'var(--gray-table-text)', - paddingTop: '0.9rem', - paddingBottom: '0.9rem', + paddingTop: '0.4rem', + paddingBottom: '0.4rem', backgroundColor: 'transparent', fontWeight: '400', }, @@ -90,31 +96,73 @@ export const GridTable = ({ }, }, }; + const Pagination: React.FC = () => { return ( ← Previous} - nextLabel={Next →} + previousLabel={← Previous} // Left Arrow + nextLabel={Next →} // Right Arrow breakLabel={'...'} pageCount={pageCount} marginPagesDisplayed={2} pageRangeDisplayed={5} - onPageChange={handlePageClick} + onPageChange={(page) => handlePagination(page)} containerClassName={'pagination'} activeClassName={'selected'} disabledClassName={'disabled'} pageLinkClassName={'page-link'} + forcePage={currentPage !== 0 ? currentPage - 1 : 0} /> ); }; - const handlePageClick = (data: { selected: number }) => { - setCurrentPage(data.selected); - onPageChanged(data.selected); + const handlePagination = (page: any) => { + setCurrentPage(page.selected + 1); + onPageChanged(page.selected + 1); }; return (
+ =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: @@ -18896,7 +18930,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 @@ -18906,7 +18940,7 @@ snapshots: - ts-node optional: true - '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5))': + '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0 @@ -18920,7 +18954,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) + jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -18932,7 +18966,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 @@ -18967,7 +19001,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 @@ -19023,7 +19057,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 @@ -19051,7 +19085,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 @@ -19073,7 +19107,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 @@ -19082,7 +19116,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 @@ -23688,6 +23722,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 @@ -26860,13 +26918,13 @@ snapshots: - ts-node optional: true - create-jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): + create-jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) + jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -29493,6 +29551,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 @@ -29825,7 +29885,7 @@ snapshots: '@babel/parser': 7.23.9 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 - semver: 7.6.0 + semver: 7.6.3 transitivePeerDependencies: - supports-color @@ -29945,25 +30005,6 @@ snapshots: - ts-node optional: true - jest-cli@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): - dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) - '@jest/test-result': 29.7.0 - '@jest/types': 29.6.3 - chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) - exit: 0.1.2 - import-local: 3.1.0 - jest-config: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) - jest-util: 29.7.0 - jest-validate: 29.7.0 - yargs: 17.7.2 - transitivePeerDependencies: - - '@types/node' - - babel-plugin-macros - - supports-color - - ts-node - jest-cli@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): dependencies: '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) @@ -30021,7 +30062,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 @@ -30053,7 +30094,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 @@ -30066,37 +30107,6 @@ snapshots: - supports-color optional: true - jest-config@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): - dependencies: - '@babel/core': 7.23.9 - '@jest/test-sequencer': 29.7.0 - '@jest/types': 29.6.3 - babel-jest: 29.7.0(@babel/core@7.23.9) - chalk: 4.1.2 - ci-info: 3.9.0 - deepmerge: 4.3.1 - glob: 7.2.3 - graceful-fs: 4.2.11 - jest-circus: 29.7.0 - jest-environment-node: 29.7.0 - jest-get-type: 29.6.3 - jest-regex-util: 29.6.3 - jest-resolve: 29.7.0 - jest-runner: 29.7.0 - jest-util: 29.7.0 - jest-validate: 29.7.0 - micromatch: 4.0.5 - parse-json: 5.2.0 - pretty-format: 29.7.0 - slash: 3.0.0 - strip-json-comments: 3.1.1 - optionalDependencies: - '@types/node': 20.14.15 - ts-node: 10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5) - transitivePeerDependencies: - - babel-plugin-macros - - supports-color - jest-config@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): dependencies: '@babel/core': 7.23.9 @@ -30116,7 +30126,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 @@ -30147,7 +30157,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 @@ -30178,7 +30188,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 @@ -30248,7 +30258,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 @@ -30389,7 +30399,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 @@ -30450,12 +30460,12 @@ snapshots: - ts-node optional: true - jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)): + jest@29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) + '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5)) + jest-cli: 29.7.0(@types/node@20.14.15)(ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4)) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -34333,7 +34343,7 @@ snapshots: '@swc/core': 1.4.1(@swc/helpers@0.5.12) optional: true - ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.4.5): + ts-node@10.9.2(@swc/core@1.4.1(@swc/helpers@0.5.12))(@types/node@20.14.15)(typescript@5.5.4): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.9 @@ -34684,10 +34694,14 @@ snapshots: undici-types@5.26.5: {} + undici-types@6.19.8: {} + undici@5.28.4: dependencies: '@fastify/busboy': 2.1.1 + undici@6.19.8: {} + unenv@1.9.0: dependencies: consola: 3.2.3 @@ -34877,7 +34891,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 From 31f5da82453063bbbebc8dacff59f2bfc6e10ec6 Mon Sep 17 00:00:00 2001 From: raghukapur9 Date: Thu, 26 Sep 2024 16:28:58 -0400 Subject: [PATCH 10/40] removed GridTable stories file --- .../DataTable/GridTable.stories.tsx | 60 ------------------- 1 file changed, 60 deletions(-) delete mode 100644 packages/app-explorer/src/systems/Home/components/DataTable/GridTable.stories.tsx diff --git a/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.stories.tsx b/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.stories.tsx deleted file mode 100644 index 264a226cb..000000000 --- a/packages/app-explorer/src/systems/Home/components/DataTable/GridTable.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import GridTable, { GridTableProps } from './GridTable'; -import { columns, data } from './data'; - -const meta: Meta = { - title: 'Home/GridTable', - component: GridTable, - parameters: { - layout: 'fullscreen', - }, -}; - -export default meta; -type Story = StoryObj>; - -export const Desktop: Story = { - args: { - columns, - data: data.slice(0, 10), - totalRows: data.length, - rowsPerPage: 10, - pageCount: Math.ceil(data.length / 10), - onPageChanged: (selectedPage: number) => - console.log(`Page changed to: ${selectedPage}`), - }, -}; - -export const Tablet: Story = { - args: { - columns, - data: data.slice(0, 10), - totalRows: data.length, - rowsPerPage: 10, - pageCount: Math.ceil(data.length / 10), - onPageChanged: (selectedPage: number) => - console.log(`Page changed to: ${selectedPage}`), - }, - parameters: { - viewport: { - defaultViewport: 'ipad', - }, - }, -}; - -export const Mobile: Story = { - args: { - columns, - data: data.slice(0, 10), - totalRows: data.length, - rowsPerPage: 10, - pageCount: Math.ceil(data.length / 10), - onPageChanged: (selectedPage: number) => - console.log(`Page changed to: ${selectedPage}`), - }, - parameters: { - viewport: { - defaultViewport: 'iphonex', - }, - }, -}; From c52bdb5582525e229e9cc5cdb8fbbbe216c6a6d2 Mon Sep 17 00:00:00 2001 From: shivam-25 Date: Fri, 27 Sep 2024 02:15:06 +0530 Subject: [PATCH 11/40] Fix --- package.json | 2 ++ pnpm-lock.yaml | 16 +++++++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index d89f07a6b..ff0395e5e 100644 --- a/package.json +++ b/package.json @@ -138,6 +138,8 @@ } }, "dependencies": { + "react-data-table-component": "7.6.2", + "react-paginate": "8.2.0", "recharts": "2.12.7" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 917c4a1b2..87d2c2132 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,12 @@ 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) @@ -19279,7 +19285,7 @@ snapshots: dependencies: '@metamask/rpc-errors': 6.2.1 '@metamask/safe-event-emitter': 3.1.1 - '@metamask/utils': 8.4.0 + '@metamask/utils': 8.5.0 transitivePeerDependencies: - supports-color @@ -19287,7 +19293,7 @@ snapshots: dependencies: '@metamask/json-rpc-engine': 8.0.2 '@metamask/safe-event-emitter': 3.1.1 - '@metamask/utils': 8.4.0 + '@metamask/utils': 8.5.0 readable-stream: 3.6.2 transitivePeerDependencies: - supports-color @@ -19320,7 +19326,7 @@ snapshots: '@metamask/rpc-errors@6.2.1': dependencies: - '@metamask/utils': 8.4.0 + '@metamask/utils': 8.5.0 fast-safe-stringify: 2.1.1 transitivePeerDependencies: - supports-color @@ -19424,11 +19430,11 @@ snapshots: dependencies: '@ethereumjs/tx': 4.2.0 '@metamask/superstruct': 3.1.0 - '@noble/hashes': 1.5.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.11 + pony-cause: 2.1.10 semver: 7.6.3 uuid: 9.0.1 transitivePeerDependencies: From 67e4f78f058e7125702e3df208d71cf78d7211ac Mon Sep 17 00:00:00 2001 From: ankit723 Date: Fri, 27 Sep 2024 12:37:19 +0530 Subject: [PATCH 12/40] home page bug fix --- .../src/systems/Home/components/Hero/Hero.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) 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 03a486dbb..65c8337eb 100644 --- a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx +++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx @@ -101,14 +101,14 @@ export function Hero() {
*/} -
+
} regularEl={} />
-
+
} @@ -121,7 +121,7 @@ export function Hero() { } />
-
+
} @@ -148,7 +148,7 @@ export function Hero() { } />
-
+
} @@ -156,7 +156,7 @@ export function Hero() { />
-
+
} @@ -164,7 +164,7 @@ export function Hero() { /> {/* */}
-
+
} @@ -199,6 +199,7 @@ const styles = tv({ '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', ], }, }); From 81a34eb10721dbd324abaf0d8ae493cc1f9dce60 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 27 Sep 2024 13:33:50 +0530 Subject: [PATCH 13/40] fix: add lazy loading and performance improvements --- .../systems/Core/components/Layout/Layout.tsx | 14 +- .../Home/components/DataTable/index.tsx | 1 + .../Home/components/GasSpentChart/index.tsx | 3 +- .../src/systems/Home/components/Hero/Hero.tsx | 139 ++++++++++-------- .../systems/Home/components/LatestBlock.tsx | 3 +- .../src/systems/Home/components/TPS.tsx | 1 + 6 files changed, 97 insertions(+), 64 deletions(-) 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 55b3bd8de..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,11 +17,15 @@ export type LayoutProps = { export function Layout({ children, contentClassName }: LayoutProps) { const pathname = usePathname(); const isHomePage = pathname === '/'; - + console.log('Page loaded', DateTime.now); return ( - {isHomePage && } + {isHomePage && ( + }> + + + )} { ); }; +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 index 403e04287..0ce8f0907 100644 --- a/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx +++ b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx @@ -20,7 +20,7 @@ const chartConfig = { interface GasSpentProps { blocks: any; } -export const GasSpentChart = (gasSpent: GasSpentProps) => { +const GasSpentChart = (gasSpent: GasSpentProps) => { const totalGasSpent = gasSpent.blocks .map((block: any) => +block.value) .reduce((acc: any, value: any) => acc + value, 0); @@ -141,3 +141,4 @@ export const GasSpentChart = (gasSpent: GasSpentProps) => { ); }; +export default GasSpentChart; 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 65c8337eb..1252fa66b 100644 --- a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx +++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx @@ -1,22 +1,19 @@ -'use client'; - import { Box, Container, Heading, Theme, VStack } from '@fuels/ui'; - import { LoadingBox, LoadingWrapper } from '@fuels/ui'; -import { useEffect, useState } from 'react'; +import React, { Suspense, useEffect, useState } from 'react'; import { tv } from 'tailwind-variants'; import projectJson from '../../../../../../app-portal/src/systems/Ecosystem/data/projects.json'; -import { DataTable } from '../../components/DataTable'; -import { Block } from '../../interface/blocks.interface'; -import DailyTransaction from '../DailyTransaction'; -import { GasSpentChart } from '../GasSpentChart'; -import { LatestBlock } from '../LatestBlock'; -import { TPS } from '../TPS'; -import TotalDapps from '../TotalDapps/TotalDapps'; import { getBlocksDashboard } from './actions/get-blocks-dashboard'; import { getTPS } from './actions/get-tps'; -export function Hero() { +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')); + +function Hero() { const classes = styles(); const [isLoading, setIsLoading] = useState(true); const [tpsData, setTpsData] = useState(null); @@ -25,25 +22,27 @@ export function Hero() { const getTPSData = async () => { try { - const result = await getTPS(); - const dashboard = await getBlocksDashboard(); + const [result, dashboard] = await Promise.all([ + getTPS(), + getBlocksDashboard(), + ]); + setIsLoading(false); setTpsData(result); - setBlocksData(dashboard); if (isFirstFetch) { - setIsLoading(false); // Set loading to false only after first fetch - setIsFirstFetch(false); // Mark that the first fetch is done + setIsLoading(false); + setIsFirstFetch(false); } } catch (_e) {} }; useEffect(() => { + getTPSData(); const interval = setInterval(() => { getTPSData(); }, 10000); - return () => clearInterval(interval); }, []); @@ -93,19 +92,19 @@ export function Hero() { Fuel Explorer - {/* - Trending Items - -
- -
*/}
} - regularEl={} + regularEl={ + } + > + + + } />
@@ -113,11 +112,15 @@ export function Hero() { isLoading={isLoading} loadingEl={} regularEl={ - + } + > + + } />
@@ -126,33 +129,43 @@ export function Hero() { isLoading={isLoading} loadingEl={} regularEl={ - + } + > + + } />
-
+
} - regularEl={} + regularEl={ + } + > + + + } />
@@ -160,16 +173,25 @@ export function Hero() { } - regularEl={} + regularEl={ + } + > + + + } /> - {/* */}
- } - regularEl={} - /> + } + > + } + regularEl={} + /> +
@@ -203,3 +225,4 @@ const styles = tv({ ], }, }); +export default Hero; diff --git a/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx b/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx index 652b99032..5feb06800 100644 --- a/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx +++ b/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx @@ -3,7 +3,7 @@ import { HStack, RoundedContainer, VStack } from '@fuels/ui'; import { fromNow } from '~/systems/Core/utils/dayjs'; import { Block } from '../interface/blocks.interface'; -export const LatestBlock = (block: Block) => { +const LatestBlock = (block: Block) => { return (
@@ -61,3 +61,4 @@ export const LatestBlock = (block: Block) => { ); }; +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 index 385d64aa7..86dd94b34 100644 --- a/packages/app-explorer/src/systems/Home/components/TPS.tsx +++ b/packages/app-explorer/src/systems/Home/components/TPS.tsx @@ -148,3 +148,4 @@ export const TPS = (props: TPSProps) => { ); }; +export default TPS; From 29bf3bbaa9f5ca8ca44b3fefea74471001135217 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 27 Sep 2024 13:36:47 +0530 Subject: [PATCH 14/40] fix --- .../src/systems/Home/components/Hero/Hero.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 index 51f030b43..4cb0c1532 100644 --- a/packages/app-explorer/src/systems/Home/components/Hero/Hero.stories.tsx +++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.stories.tsx @@ -1,6 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; - -import { Hero } from './Hero'; +import { Hero } from '~/systems/Block/components/Hero'; const meta: Meta = { title: 'Home/Hero', From 16fab5bad93dbf99a04a91c9a46efbe859b6a747 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 27 Sep 2024 13:39:29 +0530 Subject: [PATCH 15/40] fix: type --- packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx | 1 + 1 file changed, 1 insertion(+) 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 1252fa66b..a21015491 100644 --- a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx +++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx @@ -3,6 +3,7 @@ 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'; From 3a0e053bab17c6cd6afe5cec509be2607950a86e Mon Sep 17 00:00:00 2001 From: ankit723 Date: Sat, 28 Sep 2024 23:18:38 +0530 Subject: [PATCH 16/40] site wide bug fix --- .../systems/Block/components/BlockItem.tsx | 30 ++++++- .../Block/components/BlockTimeItem.tsx | 25 +++--- .../systems/Block/components/BlocksTable.tsx | 78 +++++++++---------- .../src/systems/Block/components/Hero.tsx | 12 +-- .../src/systems/Block/screens/BlockScreen.tsx | 44 +++++++---- .../src/systems/Home/components/Hero/Hero.tsx | 24 +++--- .../ui/src/components/GridTable/GridTable.tsx | 57 +++++++++++--- 7 files changed, 167 insertions(+), 103 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx index f566d2ac2..21f797901 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -18,9 +18,33 @@ export default function BlockItem({ blockId, ethValue }: BlockItemProps) { - - {ethValue} ETH - +
+ {ethValue !== '0' ? ( + + + + + + + + ) : ( + '' + )} + + {ethValue} ETH + +
); } diff --git a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx index 711346e10..c9751bde4 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx @@ -1,28 +1,27 @@ import { Text, VStack } from '@fuels/ui'; type BlockTimeItemProps = { - time: Date; timeAgo: string; }; -export default function BlockTimeItem({ time, timeAgo }: BlockTimeItemProps) { - const timeDate = new Date(time); +export default function BlockTimeItem({ timeAgo }: BlockTimeItemProps) { + // const timeDate = new Date(time); - const formattedTime = timeDate.toLocaleString('en-US', { - year: 'numeric', - month: 'short', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - hour12: true, - }); + // const formattedTime = timeDate.toLocaleString('en-US', { + // year: 'numeric', + // month: 'short', + // day: 'numeric', + // hour: 'numeric', + // minute: 'numeric', + // hour12: true, + // }); return ( {timeAgo} - + {/* {formattedTime} - + */} ); } diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 4c709d937..f40a1b4cf 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -1,12 +1,10 @@ import { GQLBlocksQuery } from '@fuel-explorer/graphql'; import { GridTable } from '@fuels/ui'; -import { Link } from '@fuels/ui'; -import NextLink from 'next/link'; import BlockEfficiencyItem from './BlockEfficiencyItem'; -import BlockHashItem from './BlockHashItem'; +// import BlockHashItem from './BlockHashItem'; import BlockItem from './BlockItem'; import BlockTimeItem from './BlockTimeItem'; -import BlockValidatorItem from './BlockValidatorItem'; +// import BlockValidatorItem from './BlockValidatorItem'; const columns = [ { @@ -30,7 +28,7 @@ const columns = [ name: (
- Blockhash + daHeight
), - cell: (row: any) => ( - - ), + cell: (_row: any) => 'daHeight data', sortable: false, }, { @@ -103,26 +99,28 @@ const columns = [ ); return (
- {mintTransaction ? mintTransaction.mintAmount : 'No mint amount'}{' '} + {mintTransaction + ? mintTransaction.mintAmount / 10 ** 9 + : 'No mint amount'}{' '}
); }, sortable: false, }, - { - name: ( -
- Producer -
- ), - cell: (row: any) => ( -
- -
- ), - sortable: false, - }, + // { + // name: ( + //
+ // Producer + //
+ // ), + // cell: (row: any) => ( + //
+ // + //
+ // ), + // sortable: false, + // }, { name: (
@@ -151,7 +149,7 @@ const columns = [ ), cell: (row: any) => (
- +
), sortable: false, @@ -163,31 +161,29 @@ const columns = [
), cell: (row: any) => { - const unixTimestamp = row.node.time.rawUnix; - const date = new Date(unixTimestamp * 1000); - return (
- +
); }, sortable: false, }, - { - name: '', - cell: (row: any) => ( - - View - - ), - sortable: false, - }, + // { + // name: '', + // cell: (row: any) => ( + // // + // // View + // // + // "" + // ), + // sortable: false, + // }, ]; type BlocksTableProps = { diff --git a/packages/app-explorer/src/systems/Block/components/Hero.tsx b/packages/app-explorer/src/systems/Block/components/Hero.tsx index 773265dfc..859929560 100644 --- a/packages/app-explorer/src/systems/Block/components/Hero.tsx +++ b/packages/app-explorer/src/systems/Block/components/Hero.tsx @@ -1,20 +1,12 @@ -import { HStack, Heading, Theme, VStack } from '@fuels/ui'; -import { IconChevronRight } from '@tabler/icons-react'; +import { Heading, Theme, VStack } from '@fuels/ui'; export function Hero() { return ( - + Blocks - - -

Home

- - -

View All Blocks

- ); diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index 527883f74..f43b0c0fa 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -3,6 +3,7 @@ import { useRouter, useSearchParams } from 'next/navigation'; import { useEffect, useState } from 'react'; import { GQLBlocksQuery } from '@fuel-explorer/graphql'; +import { LoadingBox, LoadingWrapper } from '@fuels/ui'; import { getBlocks } from '../actions/get-blocks'; import BlocksTable from '../components/BlocksTable'; import { Hero } from '../components/Hero'; @@ -95,19 +96,36 @@ export const BlocksScreen = () => { return ( - {loading ? ( -

Loading blocks...

- ) : ( - data && ( - - ) - )} + + + + + + + + + + + + + } + regularEl={ + data && ( + <> + + + ) + } + /> ); }; 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 a21015491..1d9817830 100644 --- a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx +++ b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx @@ -98,10 +98,10 @@ function Hero() {
} + loadingEl={} regularEl={ } + fallback={} > @@ -111,10 +111,10 @@ function Hero() {
} + loadingEl={} regularEl={ } + fallback={} > } + loadingEl={} regularEl={ } + fallback={} > } + loadingEl={} regularEl={ } + fallback={} > @@ -185,12 +185,14 @@ function Hero() {
} + fallback={} > } - regularEl={} + loadingEl={} + regularEl={ + + } />
diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index ded48a18a..0c9169855 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -53,13 +53,11 @@ export const GridTable = ({ rows: { style: { cursor: 'pointer', - backgroundColor: 'var(--gray-2)', + backgroundColor: 'var(--gray-3)', fontWeight: '400', borderRadius: '12px', marginBottom: '8px', - '&:hover': { - backgroundColor: 'var(--gray-a1)', - }, + margin: '0.7rem 0', }, }, cells: { @@ -69,8 +67,8 @@ export const GridTable = ({ paddingLeft: '0.5rem', paddingRight: '0.5rem', color: 'var(--gray-table-text)', - paddingTop: '0.4rem', - paddingBottom: '0.4rem', + paddingTop: '0.5rem', + paddingBottom: '0.5rem', backgroundColor: 'transparent', fontWeight: '400', }, @@ -97,20 +95,40 @@ export const GridTable = ({ }, }; + // const Pagination: React.FC = () => { + // return ( + // ← Previous} // Left Arrow + // nextLabel={Next →} // Right Arrow + // breakLabel={'...'} + // pageCount={pageCount} + // marginPagesDisplayed={2} + // pageRangeDisplayed={5} + // onPageChange={(page) => handlePagination(page)} + // containerClassName={'pagination'} + // activeClassName={'selected'} + // disabledClassName={'disabled'} + // pageLinkClassName={'page-link'} + // forcePage={currentPage !== 0 ? currentPage - 1 : 0} + // /> + // ); + // }; + const Pagination: React.FC = () => { return ( ← Previous} // Left Arrow - nextLabel={Next →} // Right Arrow - breakLabel={'...'} + previousLabel={←} + nextLabel={ →} + breakLabel={''} // No break label pageCount={pageCount} - marginPagesDisplayed={2} - pageRangeDisplayed={5} + marginPagesDisplayed={0} // No margin pages + pageRangeDisplayed={0} // No range of pages onPageChange={(page) => handlePagination(page)} containerClassName={'pagination'} activeClassName={'selected'} disabledClassName={'disabled'} - pageLinkClassName={'page-link'} + previousLinkClassName={'previous-link'} + nextLinkClassName={'next-link'} forcePage={currentPage !== 0 ? currentPage - 1 : 0} /> ); @@ -124,6 +142,21 @@ export const GridTable = ({ return (
Date: Tue, 1 Oct 2024 18:50:56 +0530 Subject: [PATCH 21/40] add unit to block rewards --- .../systems/Block/components/BlockItem.tsx | 27 ------------------- .../systems/Block/components/BlocksTable.tsx | 2 +- 2 files changed, 1 insertion(+), 28 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx index ae6703afb..330c99468 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -18,33 +18,6 @@ export default function BlockItem({ blockId, ethValue }: BlockItemProps) { -
- {ethValue !== '0' ? ( - - - - - - - - ) : ( - '' - )} - {/* - {ethValue} ETH - */} -
); } diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 171d0d47d..54f036066 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -117,7 +117,7 @@ const columns = [ >
{mintTransaction - ? mintTransaction.mintAmount / 10 ** 9 + ? `${mintTransaction.mintAmount / 10 ** 9} ETH` : 'No mint amount'}{' '}
From 57fe71dd46a02a58771e0936bdd5dd3aeb32c116 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Tue, 1 Oct 2024 18:57:57 +0530 Subject: [PATCH 22/40] remove commented code --- .../systems/Block/components/BlocksTable.tsx | 60 +------------------ 1 file changed, 1 insertion(+), 59 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 54f036066..e9c0a86d4 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -2,10 +2,8 @@ import { GQLBlocksQuery } from '@fuel-explorer/graphql'; import { GridTable } from '@fuels/ui'; import Link from 'next/link'; import BlockEfficiencyItem from './BlockEfficiencyItem'; -// import BlockHashItem from './BlockHashItem'; import BlockItem from './BlockItem'; import BlockTimeItem from './BlockTimeItem'; -// import BlockValidatorItem from './BlockValidatorItem'; const columns = [ { @@ -35,35 +33,7 @@ const columns = [ }, sortable: false, }, - // { - // name: ( - //
- //
- // daHeight - // - // - // - // - // - //
- //
- // A unique identifier for this block, generated by hashing its data. - //
- //
- //
- // ), - // cell: (_row: any) => 'daHeight data', - // sortable: false, - // }, + { name: (
@@ -126,19 +96,6 @@ const columns = [ sortable: false, }, - // { - // name: ( - //
- // Producer - //
- // ), - // cell: (row: any) => ( - //
- // - //
- // ), - // sortable: false, - // }, { name: (
@@ -197,21 +154,6 @@ const columns = [ }, sortable: false, }, - // { - // name: '', - // cell: (row: any) => ( - // // - // // View - // // - // "" - // ), - // sortable: false, - // }, ]; type BlocksTableProps = { From f3bd1381f8e625e8df9c83d405b468953f0917ef Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Wed, 2 Oct 2024 00:32:27 +0530 Subject: [PATCH 23/40] fix block table css --- .../ui/src/components/GridTable/GridTable.tsx | 33 +++++-------------- 1 file changed, 9 insertions(+), 24 deletions(-) diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index 5eafbd040..735e5ca0e 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -24,8 +24,10 @@ export const GridTable = ({ }: GridTableProps): React.JSX.Element => { const customStyles = { tableWrapper: { + overflow: 'visible', style: { borderRadius: '0', + padding: '2px', }, }, table: { @@ -56,8 +58,12 @@ export const GridTable = ({ backgroundColor: 'var(--gray-3)', fontWeight: '400', borderRadius: '12px', - // border: '0.1px solid #ccc', - marginTop: '12px', + border: '1px solid var(--gray-5)', + margin: '0.7rem 0', + overflow: 'visible', + '&:not(:last-of-type)': { + borderBottomColor: 'tranparent', + }, }, }, cells: { @@ -69,7 +75,7 @@ export const GridTable = ({ color: 'var(--gray-table-text)', paddingTop: '0.6rem', paddingBottom: '0.6rem', - // backgroundColor: 'transparent', + backgroundColor: 'transparent', fontWeight: '400', }, }, @@ -83,7 +89,6 @@ export const GridTable = ({ margin: '0 4px', color: '#f0f0f0', borderRadius: '4px', - backgroundColor: 'var(--gray-2)', '&.selected': { backgroundColor: 'rgba(255, 255, 255, 0.1)', @@ -96,25 +101,6 @@ export const GridTable = ({ }, }; - // const Pagination: React.FC = () => { - // return ( - // ← Previous} // Left Arrow - // nextLabel={Next →} // Right Arrow - // breakLabel={'...'} - // pageCount={pageCount} - // marginPagesDisplayed={2} - // pageRangeDisplayed={5} - // onPageChange={(page) => handlePagination(page)} - // containerClassName={'pagination'} - // activeClassName={'selected'} - // disabledClassName={'disabled'} - // pageLinkClassName={'page-link'} - // forcePage={currentPage !== 0 ? currentPage - 1 : 0} - // /> - // ); - // }; - const Pagination: React.FC = () => { return ( ({ } `} Date: Wed, 2 Oct 2024 17:40:15 +0530 Subject: [PATCH 24/40] add mobile responsiveness to blocks --- .../systems/Block/components/BlockItem.tsx | 27 +- .../systems/Block/components/BlocksTable.tsx | 324 ++++++++++-------- .../ui/src/components/GridTable/GridTable.tsx | 7 +- 3 files changed, 205 insertions(+), 153 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx index 330c99468..943e42a52 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -1,4 +1,4 @@ -import { Box, Copyable, HStack, VStack } from '@fuels/ui'; +import { Box, Copyable, HStack, Text, VStack } from '@fuels/ui'; export interface BlockItemProps { blockId: string; @@ -18,6 +18,31 @@ export default function BlockItem({ blockId, ethValue }: BlockItemProps) { +
+ { + + + + + + + + } + + {ethValue} ETH + +
); } diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index e9c0a86d4..7ed0aee66 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -1,183 +1,207 @@ import { GQLBlocksQuery } from '@fuel-explorer/graphql'; -import { GridTable } from '@fuels/ui'; +import { GridTable, HStack, Text, VStack, useBreakpoints } from '@fuels/ui'; +import { IconPointFilled } from '@tabler/icons-react'; import Link from 'next/link'; import BlockEfficiencyItem from './BlockEfficiencyItem'; import BlockItem from './BlockItem'; import BlockTimeItem from './BlockTimeItem'; -const columns = [ - { - name: ( -
- Block -
- ), - cell: (row: any) => { - const totalGasUsed = ( - parseFloat(row.node.totalGasUsed) / - 10 ** 9 - ).toString(); - return ( - <> - - - - - ); - }, - sortable: false, - }, +type BlocksTableProps = { + blocks: GQLBlocksQuery['blocks']; + onPageChanged: (pageNumber: number) => void; + pageCount: number; + currentPage: number; + setCurrentPage: (currentPage: number) => void; +}; - { - name: ( -
- Transactions -
- ), - cell: (row: any) => ( - -
- {row.node.header.transactionsCount} +function BlocksTable({ + blocks, + onPageChanged, + pageCount, + currentPage, + setCurrentPage, +}: BlocksTableProps) { + const handlePageChanged = (pageNumber: number) => { + onPageChanged(pageNumber); + }; + const { isMobile } = useBreakpoints(); + const columns = [ + { + name: ( +
+ Block
- - ), - sortable: false, - }, - { - name: ( -
-
- Rewards - - { + const totalGasUsed = ( + parseFloat(row.node.totalGasUsed) / + 10 ** 9 + ).toString(); + return ( + <> + - - - -
-
- The total reward distributed to the validator for producing this - block. -
+ + + ); + }, + sortable: false, + }, + + { + name: ( +
+ Transactions
-
- ), - cell: (row: any) => { - const mintTransaction = row.node.transactions.find( - (trans: any) => trans.mintAmount != null, - ); - return ( + ), + cell: (row: any) => ( -
- {mintTransaction - ? `${mintTransaction.mintAmount / 10 ** 9} ETH` - : 'No mint amount'}{' '} +
+ {row.node.header.transactionsCount}
- ); + ), + sortable: false, }, - sortable: false, - }, - - { - name: ( -
-
- Efficiency - - - - - -
-
- The percentage of block resources utilized by transactions. -
+ { + name: ( +
+
+ Rewards + + + + + +
+
+ The total reward distributed to the validator for producing this + block. +
+
-
- ), - cell: (row: any) => ( - -
- + ), + cell: (row: any) => { + const mintTransaction = row.node.transactions.find( + (trans: any) => trans.mintAmount != null, + ); + return ( + +
+ {mintTransaction + ? `${mintTransaction.mintAmount / 10 ** 9} ETH` + : 'No mint amount'}{' '} +
+ + ); + }, + sortable: false, + }, + + { + name: ( +
+
+ Efficiency + + + + + +
+
+ The percentage of block resources utilized by transactions. +
+
- - ), - sortable: false, - }, - { - name: ( -
- Time -
- ), - cell: (row: any) => { - return ( + ), + cell: (row: any) => ( -
- +
+
- ); + ), + sortable: false, }, - sortable: false, - }, -]; - -type BlocksTableProps = { - blocks: GQLBlocksQuery['blocks']; - onPageChanged: (pageNumber: number) => void; - pageCount: number; - currentPage: number; - setCurrentPage: (currentPage: number) => void; -}; - -function BlocksTable({ - blocks, - onPageChanged, - pageCount, - currentPage, - setCurrentPage, -}: BlocksTableProps) { - const handlePageChanged = (pageNumber: number) => { - onPageChanged(pageNumber); - }; + { + name: ( +
+ Time +
+ ), + cell: (row: any) => { + return ( + + {!isMobile ? ( + + ) : ( + + + + + Txn Count + + +
+ {row.node.header.transactionsCount} +
+ + + )} + + ); + }, + sortable: false, + }, + ]; + if (isMobile) { + columns.splice(1, 3); + } return (
({ }: GridTableProps): React.JSX.Element => { const customStyles = { tableWrapper: { - overflow: 'visible', style: { borderRadius: '0', padding: '2px', @@ -60,7 +59,6 @@ export const GridTable = ({ borderRadius: '12px', border: '1px solid var(--gray-5)', margin: '0.7rem 0', - overflow: 'visible', '&:not(:last-of-type)': { borderBottomColor: 'tranparent', }, @@ -181,6 +179,11 @@ export const GridTable = ({ } .pagination li.disabled a:hover { background-color: transparent; + } + @media (max-width: 640px) { + .rdt_TableHead { + display: none; + } } `} Date: Thu, 3 Oct 2024 01:33:46 +0530 Subject: [PATCH 25/40] ui refactorings --- .../Block/components/BlockEfficiencyItem.tsx | 6 +- .../systems/Block/components/BlockItem.tsx | 2 +- .../Block/components/BlockTimeItem.tsx | 2 +- .../systems/Block/components/BlocksTable.tsx | 99 ++++++++++++++++--- .../src/systems/Home/components/Hero/Hero.tsx | 16 ++- .../ui/src/components/GridTable/GridTable.tsx | 27 ++--- packages/ui/src/theme/theme.css | 4 + 7 files changed, 113 insertions(+), 43 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx index e145d1ec9..f40ffddec 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx @@ -9,16 +9,14 @@ export default function BlockEfficiencyItem({ current, total, }: BlockEfficiencyItemProps) { - // Convert current and total to millions const currentInMillions = current / 1_000_000; const totalInMillions = total / 1_000_000; - // Calculate progress percentage const progress = (current / total) * 100; return ( - + {/* Format current and total as M (millions) */} @@ -39,7 +37,7 @@ export default function BlockEfficiencyItem({
100 ? 100 : progress}%` }} />
diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx index 943e42a52..0091b67d0 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -12,7 +12,7 @@ export default function BlockItem({ blockId, ethValue }: BlockItemProps) { #{blockId} diff --git a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx index c9751bde4..f2f1909f7 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx @@ -18,7 +18,7 @@ export default function BlockTimeItem({ timeAgo }: BlockTimeItemProps) { return ( - {timeAgo} + {timeAgo} {/* {formattedTime} */} diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 7ed0aee66..921f8cc7a 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -2,6 +2,7 @@ import { GQLBlocksQuery } from '@fuel-explorer/graphql'; import { GridTable, HStack, Text, VStack, useBreakpoints } from '@fuels/ui'; import { IconPointFilled } from '@tabler/icons-react'; import Link from 'next/link'; +import { Alignment } from 'react-data-table-component'; import BlockEfficiencyItem from './BlockEfficiencyItem'; import BlockItem from './BlockItem'; import BlockTimeItem from './BlockTimeItem'; @@ -24,7 +25,7 @@ function BlocksTable({ const handlePageChanged = (pageNumber: number) => { onPageChanged(pageNumber); }; - const { isMobile } = useBreakpoints(); + const { isMobile, isTablet, isLaptop } = useBreakpoints(); const columns = [ { name: ( @@ -40,7 +41,11 @@ function BlocksTable({ return ( <> - Transactions +
+
+ Transactions + + + + + +
+ The height of the base chain via relayer (i.e. Ethereum or DA) +
+
+
), cell: (row: any) => ( -
+ {row.node.header.transactionsCount} -
+ ), sortable: false, @@ -75,6 +103,41 @@ function BlocksTable({ { name: (
+
+ daHeight + + + + + +
+
+ The height of the base chain via relayer (i.e. Ethereum or DA) +
+
+
+ ), + cell: (row: any) => { + return ( + + {row.node.header.daHeight} + + ); + }, + sortable: false, + }, + { + name: ( +
Rewards @@ -108,7 +171,7 @@ function BlocksTable({ className="w-full" href={`/block/${row.node.header.height}/simple`} > -
+
{mintTransaction ? `${mintTransaction.mintAmount / 10 ** 9} ETH` : 'No mint amount'}{' '} @@ -150,9 +213,9 @@ function BlocksTable({ className=" w-full" href={`/block/${row.node.header.height}/simple`} > -
+
@@ -163,7 +226,7 @@ function BlocksTable({ { name: (
- Time + Time
), cell: (row: any) => { @@ -175,14 +238,14 @@ function BlocksTable({ {!isMobile ? ( ) : ( - + - + Txn Count -
+
{row.node.header.transactionsCount}
@@ -196,13 +259,17 @@ function BlocksTable({ ]; if (isMobile) { - columns.splice(1, 3); + columns.splice(1, 4); + } + if (isTablet && !isLaptop) { + columns.splice(4, 1); } return (
} + loadingEl={} regularEl={ } + fallback={} > @@ -111,10 +111,10 @@ function Hero() {
} + loadingEl={} regularEl={ } + fallback={} > } + loadingEl={} regularEl={ } + fallback={} > } - regularEl={ - - } + regularEl={} />
diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index d27c11d28..09993bc04 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -40,6 +40,8 @@ export const GridTable = ({ color: '#9f9f9f', fontWeight: '600', textAlign: 'left', + justifyContent: 'left', + borderBottom: 'none', }, }, headCells: { @@ -49,12 +51,13 @@ export const GridTable = ({ fontWeight: '600', fontSize: '16px', textAlign: 'left', + justifyContent: 'left', }, }, rows: { style: { cursor: 'pointer', - backgroundColor: 'var(--gray-3)', + backgroundColor: 'var(--gray-13)', fontWeight: '400', borderRadius: '12px', border: '1px solid var(--gray-5)', @@ -79,21 +82,21 @@ export const GridTable = ({ }, pagination: { style: { - backgroundColor: 'var(--gray-2)', - color: '#f0f0f0', + backgroundColor: 'var(--gray-3)', + color: 'var(--gray-2)', }, pageButtonsStyle: { padding: '8px 16px', margin: '0 4px', - color: '#f0f0f0', + color: 'var(--gray-2)', borderRadius: '4px', - backgroundColor: 'var(--gray-2)', + backgroundColor: 'var(--gray-4)', '&.selected': { - backgroundColor: 'rgba(255, 255, 255, 0.1)', + backgroundColor: 'var(--gray-4)', fontWeight: 'bold', }, '&:hover': { - backgroundColor: 'rgba(255, 255, 255, 0.2)', + backgroundColor: 'var(--gray-4)', }, }, }, @@ -102,12 +105,12 @@ export const GridTable = ({ const Pagination: React.FC = () => { return ( ←} + previousLabel={currentPage > 1 ? ← : null} nextLabel={ →} - breakLabel={''} // No break label + breakLabel={''} pageCount={pageCount} - marginPagesDisplayed={0} // No margin pages - pageRangeDisplayed={0} // No range of pages + marginPagesDisplayed={0} + pageRangeDisplayed={0} onPageChange={(page) => handlePagination(page)} containerClassName={'pagination'} activeClassName={'selected'} @@ -130,7 +133,7 @@ export const GridTable = ({ .pagination span{ padding: 8px 16px; color: var(--white-2); - background-color: var(--gray-7); + background-color: var(--gray-2); font-weight: bold; border-radius: 7px; cursor: pointer; diff --git a/packages/ui/src/theme/theme.css b/packages/ui/src/theme/theme.css index 6f9c76571..d97b70147 100644 --- a/packages/ui/src/theme/theme.css +++ b/packages/ui/src/theme/theme.css @@ -832,6 +832,7 @@ --gray-a10: #ffffff72; --gray-a11: #ffffffaf; --gray-a12: #ffffffed; + --gray-a13: #222; --gray-contrast: #FFFFFF; --gray-table-text: #FFFFFF; @@ -857,6 +858,7 @@ --gray-10: #838383; --gray-11: #646464; --gray-12: #202020; + --gray-13: #222; --gray-a1: #00000000; --gray-a2: #00000003; @@ -900,6 +902,7 @@ --gray-10: oklch(58.29% 0 none); --gray-11: oklch(76.99% 0 none); --gray-12: oklch(94.91% 0 none); + --gray-13: oklch(25.2% 0 none); --gray-a1: color(display-p3 0 0 0 / 0); --gray-a2: color(display-p3 1 1 1 / 0.0336); @@ -939,6 +942,7 @@ --gray-10: oklch(61% 0 none); --gray-11: oklch(50.32% 0 none); --gray-12: oklch(24.35% 0 none); + --gray-13: #FFFFFF; --gray-a1: color(display-p3 0 0 0 / 0); --gray-a2: color(display-p3 0 0 0 / 0.0119); From 1e43118364a07388477235154af877bb4fbd7a11 Mon Sep 17 00:00:00 2001 From: ankit723 Date: Thu, 3 Oct 2024 23:33:52 +0530 Subject: [PATCH 26/40] tooltip and the pagination fixed --- .../systems/Block/components/BlocksTable.tsx | 12 ++-- .../ui/src/components/GridTable/GridTable.tsx | 68 +++++++++++++++++-- 2 files changed, 69 insertions(+), 11 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 921f8cc7a..8eef4649b 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -62,8 +62,8 @@ function BlocksTable({ { name: (
-
- Transactions +
+ Transactions -
- The height of the base chain via relayer (i.e. Ethereum or DA) -
-
+
+
+ The height of the base chain via relayer (i.e. Ethereum or DA) +
), diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index 09993bc04..bbf87d2ab 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -87,7 +87,7 @@ export const GridTable = ({ }, pageButtonsStyle: { padding: '8px 16px', - margin: '0 4px', + margin: '0 2px', color: 'var(--gray-2)', borderRadius: '4px', backgroundColor: 'var(--gray-4)', @@ -105,8 +105,66 @@ export const GridTable = ({ const Pagination: React.FC = () => { return ( 1 ? ← : null} - nextLabel={ →} + previousLabel={ + currentPage > 1 ? ( + <> + + + + + ) : null + } + nextLabel={ + + } breakLabel={''} pageCount={pageCount} marginPagesDisplayed={0} @@ -154,12 +212,12 @@ export const GridTable = ({ margin: 1rem 0; } .pagination li { - margin: 0 8px; + margin: 0 2px; } .pagination li a { padding: 8px 16px; color: var(--white-2); - background-color: var(--gray-2); + background-color: var(--gray-3); border-radius: 7px; cursor: pointer; text-decoration: none; From 043bdf6088523155d0ddf3fec175db73e2c64d27 Mon Sep 17 00:00:00 2001 From: ankit723 Date: Thu, 3 Oct 2024 23:35:02 +0530 Subject: [PATCH 27/40] tooltip and the pagination fixed --- packages/ui/src/components/GridTable/GridTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index bbf87d2ab..1aa14b103 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -136,7 +136,7 @@ export const GridTable = ({ data-accent-color="gray" className=" ml-1 rt-reset rt-BaseButton rt-r-size-2 rt-variant-soft rt-Button fuel-Button fuel-Button cursor-pointer" > - {currentPage} page of {pageCount} + Page {currentPage} of {pageCount} ) : null From c664f24b312fdc2218ae2ef67d0301c1d8a70d15 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 4 Oct 2024 09:34:36 +0530 Subject: [PATCH 28/40] fix: overflow --- .../app-explorer/src/systems/Block/components/BlocksTable.tsx | 2 +- packages/ui/src/theme/theme.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 8eef4649b..5a7a96787 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -171,7 +171,7 @@ function BlocksTable({ className="w-full" href={`/block/${row.node.header.height}/simple`} > -
+
{mintTransaction ? `${mintTransaction.mintAmount / 10 ** 9} ETH` : 'No mint amount'}{' '} diff --git a/packages/ui/src/theme/theme.css b/packages/ui/src/theme/theme.css index d97b70147..148a186fd 100644 --- a/packages/ui/src/theme/theme.css +++ b/packages/ui/src/theme/theme.css @@ -819,6 +819,7 @@ --gray-10: #7b7b7b; --gray-11: #b4b4b4; --gray-12: #eee; + --gray-13:#191919; --gray-a1: #00000000; --gray-a2: #ffffff09; @@ -858,7 +859,7 @@ --gray-10: #838383; --gray-11: #646464; --gray-12: #202020; - --gray-13: #222; + --gray-13: #F9F9F9; --gray-a1: #00000000; --gray-a2: #00000003; From 6e245f5669827b6b1993d4f80f9bbf7a7e3da500 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 4 Oct 2024 09:40:34 +0530 Subject: [PATCH 29/40] fix: overflows --- .../Block/components/BlockTimeItem.tsx | 4 +++- .../systems/Block/components/BlocksTable.tsx | 4 ++-- .../ui/src/components/GridTable/GridTable.tsx | 23 +++++++++---------- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx index f2f1909f7..0d8367b0f 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx @@ -18,7 +18,9 @@ export default function BlockTimeItem({ timeAgo }: BlockTimeItemProps) { return ( - {timeAgo} + + {timeAgo} + {/* {formattedTime} */} diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 5a7a96787..07641d3e1 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -238,9 +238,9 @@ function BlocksTable({ {!isMobile ? ( ) : ( - + - + Txn Count diff --git a/packages/ui/src/components/GridTable/GridTable.tsx b/packages/ui/src/components/GridTable/GridTable.tsx index 1aa14b103..2a115fce5 100644 --- a/packages/ui/src/components/GridTable/GridTable.tsx +++ b/packages/ui/src/components/GridTable/GridTable.tsx @@ -106,8 +106,8 @@ export const GridTable = ({ return ( 1 ? ( - <> + <> + {currentPage > 1 && ( - - - - ) : null + )} + + } nextLabel={
- The height of the base chain via relayer (i.e. Ethereum or DA) + A unique identifier for this block, generated by hashing its data.
From 44c37af3b09d4f4f305af2b8021155d7b98e1638 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 4 Oct 2024 21:01:34 +0530 Subject: [PATCH 31/40] fix copy onclick --- .../systems/Block/components/BlockItem.tsx | 55 ++++++++++--------- .../systems/Block/components/BlocksTable.tsx | 29 ++++------ 2 files changed, 39 insertions(+), 45 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx index 0091b67d0..4db9052d4 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -1,4 +1,5 @@ import { Box, Copyable, HStack, Text, VStack } from '@fuels/ui'; +import Link from 'next/link'; export interface BlockItemProps { blockId: string; @@ -8,7 +9,7 @@ export interface BlockItemProps { export default function BlockItem({ blockId, ethValue }: BlockItemProps) { return ( - + -
- { - - - - - - - - } - - {ethValue} ETH - -
+ +
+ { + + + + + + + + } + + {ethValue} ETH + +
+ ); } diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index bb4ddc3c2..5eae90f40 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -39,21 +39,7 @@ function BlocksTable({ 10 ** 9 ).toString(); return ( - <> - - - - + ); }, sortable: false, @@ -80,7 +66,7 @@ function BlocksTable({
- A unique identifier for this block, generated by hashing its data. + Total number of transactions processed by the network every Block.
@@ -128,9 +114,14 @@ function BlocksTable({ ), cell: (row: any) => { return ( - - {row.node.header.daHeight} - + + + {row.node.header.daHeight} + + ); }, sortable: false, From bd4fadf14cf768a29c88e6ac26a216be73497022 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Fri, 4 Oct 2024 23:52:57 +0530 Subject: [PATCH 32/40] fix: loader --- packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index dc56b0110..8b7b4106a 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -19,7 +19,7 @@ export const BlocksScreen = () => { const [totalPages, setTotalPages] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [currentCursor, setCurrentCursor] = useState(null); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const limit = 10; const fetchBlockData = async ( From c0f63909b997c1ac564ab4b80f5fe7b57eb95434 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Sat, 5 Oct 2024 00:33:25 +0530 Subject: [PATCH 33/40] chore: responsive fixes --- .../systems/Block/components/BlockItem.tsx | 6 ++--- .../Block/components/BlockTimeItem.tsx | 24 +++++++------------ .../systems/Block/components/BlocksTable.tsx | 9 ++++++- .../src/systems/Block/screens/BlockScreen.tsx | 4 ++-- 4 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx index 4db9052d4..44966e3f7 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -8,7 +8,7 @@ export interface BlockItemProps { export default function BlockItem({ blockId, ethValue }: BlockItemProps) { return ( - + - -
+ +
{ - + {timeAgo} - {/* - {formattedTime} - */} ); } diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 5eae90f40..9f1d10997 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -39,7 +39,14 @@ function BlocksTable({ 10 ** 9 ).toString(); return ( - + <> +
+ +
+ ); }, sortable: false, diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index 8b7b4106a..4fa38aef3 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -94,7 +94,7 @@ export const BlocksScreen = () => { }, [currentCursor, dir]); return ( - + { {[...Array(10)].map((_, index) => ( ))} From 2bf041026cb426b2624e977c54ffba2cf40e9dbb Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Sat, 5 Oct 2024 00:36:28 +0530 Subject: [PATCH 34/40] fix blocs --- .../app-explorer/src/systems/Block/components/BlockItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx index 44966e3f7..252c7770b 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockItem.tsx @@ -8,7 +8,7 @@ export interface BlockItemProps { export default function BlockItem({ blockId, ethValue }: BlockItemProps) { return ( - + Date: Sat, 5 Oct 2024 01:50:06 +0530 Subject: [PATCH 35/40] update tool tip --- .../Block/components/BlockTimeItem.tsx | 26 +-- .../systems/Block/components/BlocksTable.tsx | 188 ++++++++++-------- 2 files changed, 115 insertions(+), 99 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx index ed6e97e5c..4941d2db1 100644 --- a/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx @@ -1,4 +1,4 @@ -import { Text, VStack, useBreakpoints } from '@fuels/ui'; +import { Box, Text, VStack, useBreakpoints } from '@fuels/ui'; type BlockTimeItemProps = { timeAgo: string; @@ -8,16 +8,18 @@ export default function BlockTimeItem({ timeAgo }: BlockTimeItemProps) { const { isMobile } = useBreakpoints(); return ( - - - {timeAgo} - - + + + + {timeAgo} + + + ); } diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 9f1d10997..74b1c579b 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -1,5 +1,12 @@ import { GQLBlocksQuery } from '@fuel-explorer/graphql'; -import { GridTable, HStack, Text, VStack, useBreakpoints } from '@fuels/ui'; +import { + GridTable, + HStack, + Text, + Tooltip, + VStack, + useBreakpoints, +} from '@fuels/ui'; import { IconPointFilled } from '@tabler/icons-react'; import Link from 'next/link'; import { Alignment } from 'react-data-table-component'; @@ -55,27 +62,29 @@ function BlocksTable({ { name: (
-
- Transactions - - - - - -
-
- Total number of transactions processed by the network every Block. -
-
+ +
+ Transactions + + + + + +
+
), cell: (row: any) => ( @@ -96,27 +105,29 @@ function BlocksTable({ { name: (
-
- daHeight - - - - - -
-
- The height of the base chain via relayer (i.e. Ethereum or DA) -
-
+ +
+ daHeight + + + + + +
+
), cell: (row: any) => { @@ -136,28 +147,29 @@ function BlocksTable({ { name: (
-
- Rewards - - - - - -
-
- The total reward distributed to the validator for producing this - block. -
-
+ +
+ Rewards + + + + + +
+
), cell: (row: any) => { @@ -183,27 +195,29 @@ function BlocksTable({ { name: (
-
- Efficiency - - - - - -
-
- The percentage of block resources utilized by transactions. -
-
+ +
+ Efficiency + + + + + +
+
), cell: (row: any) => ( @@ -236,7 +250,7 @@ function BlocksTable({ {!isMobile ? ( ) : ( - + From e2003f801a937a886a8d3aa11d53918b8034655a Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Sat, 5 Oct 2024 02:00:12 +0530 Subject: [PATCH 36/40] chore: remove tooltip on tab --- .../systems/Block/components/BlocksTable.tsx | 106 ++++++++++-------- 1 file changed, 57 insertions(+), 49 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index 74b1c579b..cde970219 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -68,20 +68,22 @@ function BlocksTable({ } >
- Transactions + Transactions {' '} - - - + {isLaptop && ( + + + + )}
@@ -113,18 +115,20 @@ function BlocksTable({
daHeight - - - + {isLaptop && ( + + + + )}
@@ -155,18 +159,20 @@ function BlocksTable({
Rewards - - - + {isLaptop && ( + + + + )}
@@ -203,18 +209,20 @@ function BlocksTable({
Efficiency - - - + {isLaptop && ( + + + + )}
From 1208ef3b9cbed2758f17b5c8f4d8c6d8ec62cd10 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Sat, 5 Oct 2024 13:07:10 +0530 Subject: [PATCH 37/40] fix: scrolling while pagination --- .../src/systems/Block/screens/BlockScreen.tsx | 15 ++++----------- packages/ui/src/theme/theme.css | 4 ++-- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index 4fa38aef3..f8f4e95ed 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -10,7 +10,7 @@ import { Hero } from '../components/Hero'; export const BlocksScreen = () => { const router = useRouter(); - const searchParams = useSearchParams(); + const _searchParams = useSearchParams(); const [data, setData] = useState( undefined, @@ -76,19 +76,12 @@ export const BlocksScreen = () => { router.push('/blocks'); return; } - router.push(`/blocks?page=${newPageNumber}&cursor=${newCursor}`); + router.push(`/blocks?page=${newPageNumber}&cursor=${newCursor}`, { + scroll: false, + }); } }; - useEffect(() => { - const page = parseInt(searchParams.get('page') || '1'); - const cursor = searchParams.get('cursor') || null; - - setCurrentPage(page); - setCurrentCursor(cursor); - setDir(page > currentPage ? 'after' : 'before'); - }, [searchParams]); - useEffect(() => { fetchBlockData(currentCursor, dir); }, [currentCursor, dir]); diff --git a/packages/ui/src/theme/theme.css b/packages/ui/src/theme/theme.css index 148a186fd..28f76d3c9 100644 --- a/packages/ui/src/theme/theme.css +++ b/packages/ui/src/theme/theme.css @@ -819,7 +819,7 @@ --gray-10: #7b7b7b; --gray-11: #b4b4b4; --gray-12: #eee; - --gray-13:#191919; + --gray-13:#212121; --gray-a1: #00000000; --gray-a2: #ffffff09; @@ -903,7 +903,7 @@ --gray-10: oklch(58.29% 0 none); --gray-11: oklch(76.99% 0 none); --gray-12: oklch(94.91% 0 none); - --gray-13: oklch(25.2% 0 none); + --gray-13:#212121; --gray-a1: color(display-p3 0 0 0 / 0); --gray-a2: color(display-p3 1 1 1 / 0.0336); From b54423f46206ded6489441583733085a2e586eb3 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Mon, 7 Oct 2024 13:10:55 +0530 Subject: [PATCH 38/40] normalize rewards --- .../src/systems/Block/components/BlocksTable.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx index cde970219..8e46ed1d1 100644 --- a/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx +++ b/packages/app-explorer/src/systems/Block/components/BlocksTable.tsx @@ -187,9 +187,13 @@ function BlocksTable({ className="w-full" href={`/block/${row.node.header.height}/simple`} > -
+
{mintTransaction - ? `${mintTransaction.mintAmount / 10 ** 9} ETH` + ? `${ + mintTransaction.mintAmount > 0 + ? (mintTransaction.mintAmount / 10 ** 9).toFixed(9) + : 0 + } ETH` : 'No mint amount'}{' '}
From bbc170555493b3e4027dfe727425c7232fb10a02 Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Mon, 7 Oct 2024 13:11:10 +0530 Subject: [PATCH 39/40] disable scrolling on back --- .../src/systems/Block/screens/BlockScreen.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index f8f4e95ed..60b3eb89d 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -73,7 +73,7 @@ export const BlocksScreen = () => { setCurrentPage(newPageNumber); setCurrentCursor(newCursor); if (newPageNumber === 1) { - router.push('/blocks'); + router.push('/blocks', { scroll: false }); return; } router.push(`/blocks?page=${newPageNumber}&cursor=${newCursor}`, { @@ -92,14 +92,15 @@ export const BlocksScreen = () => { - {[...Array(10)].map((_, index) => ( + + {[...Array(11)].map((_, index) => ( ))} - + + } regularEl={ data && ( From 5115a34d090d1913e38f99f194f06b85f7e6575b Mon Sep 17 00:00:00 2001 From: Aashay Kapoor <38524076+aashaykapoor@users.noreply.github.com> Date: Mon, 7 Oct 2024 13:19:20 +0530 Subject: [PATCH 40/40] fix ui padding --- .../app-explorer/src/systems/Block/screens/BlockScreen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx index 60b3eb89d..757af1f12 100644 --- a/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx +++ b/packages/app-explorer/src/systems/Block/screens/BlockScreen.tsx @@ -92,8 +92,8 @@ export const BlocksScreen = () => { - {[...Array(11)].map((_, index) => ( + + {[...Array(10)].map((_, index) => (