From 3a0e053bab17c6cd6afe5cec509be2607950a86e Mon Sep 17 00:00:00 2001 From: ankit723 Date: Sat, 28 Sep 2024 23:18:38 +0530 Subject: [PATCH 1/5] 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 f566d2ac..21f79790 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 711346e1..c9751bde 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 4c709d93..f40a1b4c 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 773265df..85992956 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 527883f7..f43b0c0f 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 a2101549..1d981783 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 ded48a18..0c916985 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 (