-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6ade6b9
commit 09045ce
Showing
16 changed files
with
708 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { OverlayDialog, Providers } from 'app-portal'; | ||
import type { Metadata } from 'next'; | ||
|
||
export const metadata: Metadata = { | ||
title: 'All Blocks', | ||
}; | ||
|
||
export default function Layout({ children }: { children: React.ReactNode }) { | ||
return ( | ||
<Providers> | ||
<OverlayDialog /> | ||
{children} | ||
</Providers> | ||
); | ||
} | ||
|
||
export const dynamic = 'force-static'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
'use client'; | ||
import { Box, Flex } from '@fuels/ui'; | ||
import { tv } from 'tailwind-variants'; | ||
import { BlocksScreen } from '~/systems/Block/screens/BlockScreen'; | ||
|
||
const Blocks = () => { | ||
const classes = styles(); | ||
return ( | ||
<Flex> | ||
<Box className={classes.content()}> | ||
<BlocksScreen /> | ||
</Box> | ||
</Flex> | ||
); | ||
}; | ||
const styles = tv({ | ||
slots: { | ||
content: 'w-full max-w-[100%]', | ||
}, | ||
}); | ||
export default Blocks; | ||
|
||
export const dynamic = 'force-static'; |
49 changes: 49 additions & 0 deletions
49
packages/app-explorer/src/systems/Block/components/BlockEfficiencyItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import { Box, HStack, Text, VStack } from '@fuels/ui'; | ||
|
||
type BlockEfficiencyItemProps = { | ||
current: number; | ||
total: number; | ||
}; | ||
|
||
export default function BlockEfficiencyItem({ | ||
current, | ||
total, | ||
}: BlockEfficiencyItemProps) { | ||
// Convert current and total to millions | ||
const currentInMillions = current / 1_000_000; | ||
const totalInMillions = total / 1_000_000; | ||
|
||
// Calculate progress percentage | ||
const progress = (current / total) * 100; | ||
|
||
return ( | ||
<Box> | ||
<VStack gap="2"> | ||
<HStack className="justify-between"> | ||
{/* Format current and total as M (millions) */} | ||
<Text className="font-inter text-gray-10 text-[0.7rem]"> | ||
{currentInMillions % 1 === 0 | ||
? currentInMillions.toFixed(0) | ||
: currentInMillions.toFixed(1)} | ||
M / | ||
{totalInMillions % 1 === 0 | ||
? totalInMillions.toFixed(0) | ||
: totalInMillions.toFixed(1)} | ||
M | ||
</Text> | ||
<Text className="font-inter text-gray-10 text-[0.7rem]"> | ||
({progress.toFixed(2)}%) | ||
</Text> | ||
</HStack> | ||
<div className="mt-[4px]"> | ||
<div className="w-full h-[4px] rounded-full bg-gray-5"> | ||
<div | ||
className="h-full bg-brand rounded-full" | ||
style={{ width: `${progress}%` }} | ||
/> | ||
</div> | ||
</div> | ||
</VStack> | ||
</Box> | ||
); | ||
} |
28 changes: 28 additions & 0 deletions
28
packages/app-explorer/src/systems/Block/components/BlockHashItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { Box, Copyable, HStack, VStack } from '@fuels/ui'; | ||
|
||
type BlockHashItemProps = { | ||
hashAddress: string; | ||
width: string; | ||
}; | ||
|
||
export default function BlockHashItem({ | ||
hashAddress, | ||
width, | ||
}: BlockHashItemProps) { | ||
return ( | ||
<VStack gap="1"> | ||
<Box> | ||
<HStack width={width} maxWidth={'1'}> | ||
<Copyable | ||
value={hashAddress} | ||
className="font-mono text-gray-10 w-full" | ||
> | ||
<p className="overflow-hidden text-ellipsis whitespace-nowrap"> | ||
{hashAddress} | ||
</p> | ||
</Copyable> | ||
</HStack> | ||
</Box> | ||
</VStack> | ||
); | ||
} |
26 changes: 26 additions & 0 deletions
26
packages/app-explorer/src/systems/Block/components/BlockItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { Box, Copyable, HStack, Text, VStack } from '@fuels/ui'; | ||
|
||
export interface BlockItemProps { | ||
blockId: string; | ||
ethValue: string; | ||
} | ||
|
||
export default function BlockItem({ blockId, ethValue }: BlockItemProps) { | ||
return ( | ||
<VStack gap="1"> | ||
<HStack> | ||
<Box> | ||
<Copyable | ||
value={blockId} | ||
className="font-mono font-semibold text-sm " | ||
> | ||
#{blockId} | ||
</Copyable> | ||
</Box> | ||
</HStack> | ||
<Text className="text-gray-10 text-xs text-ellipsis w-[7rem]"> | ||
{ethValue} ETH | ||
</Text> | ||
</VStack> | ||
); | ||
} |
28 changes: 28 additions & 0 deletions
28
packages/app-explorer/src/systems/Block/components/BlockTimeItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { Text, VStack } from '@fuels/ui'; | ||
|
||
type BlockTimeItemProps = { | ||
time: Date; | ||
timeAgo: string; | ||
}; | ||
|
||
export default function BlockTimeItem({ time, timeAgo }: BlockTimeItemProps) { | ||
const timeDate = new Date(time); | ||
|
||
const formattedTime = timeDate.toLocaleString('en-US', { | ||
year: 'numeric', | ||
month: 'short', | ||
day: 'numeric', | ||
hour: 'numeric', | ||
minute: 'numeric', | ||
hour12: true, | ||
}); | ||
|
||
return ( | ||
<VStack gap="0px"> | ||
<Text className="text-[0.7rem] p-0 m-0 text-[#9f9f9f]">{timeAgo}</Text> | ||
<Text className="text-[0.7rem] p-0 m-0 text-[#9f9f9f]"> | ||
{formattedTime} | ||
</Text> | ||
</VStack> | ||
); | ||
} |
16 changes: 16 additions & 0 deletions
16
packages/app-explorer/src/systems/Block/components/BlockValidatorItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { HStack } from '@fuels/ui'; | ||
import BlockHashItem from './BlockHashItem'; | ||
|
||
type BlockValidatorItemProps = { | ||
hashAddress: string; | ||
}; | ||
|
||
export default function BlockValidatorItem({ | ||
hashAddress, | ||
}: BlockValidatorItemProps) { | ||
return ( | ||
<HStack gap="2" width={'100px'} flexBasis={'100%'}> | ||
<BlockHashItem hashAddress={hashAddress} width="100px" /> | ||
</HStack> | ||
); | ||
} |
132 changes: 132 additions & 0 deletions
132
packages/app-explorer/src/systems/Block/components/BlocksTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,132 @@ | ||
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 BlockItem from './BlockItem'; | ||
import BlockTimeItem from './BlockTimeItem'; | ||
import BlockValidatorItem from './BlockValidatorItem'; | ||
|
||
const columns = [ | ||
{ | ||
name: 'Block', | ||
cell: (row: any) => { | ||
const totalGasUsed = ( | ||
parseFloat(row.node.totalGasUsed) / | ||
10 ** 9 | ||
).toString(); | ||
return ( | ||
<BlockItem blockId={row.node.header.height} ethValue={totalGasUsed} /> | ||
); | ||
}, | ||
sortable: false, | ||
}, | ||
{ | ||
name: 'Blockhash', | ||
cell: (row: any) => ( | ||
<BlockHashItem hashAddress={row.node.id} width="100px" /> | ||
), | ||
sortable: false, | ||
}, | ||
{ | ||
name: 'Transactions', | ||
cell: (row: any) => ( | ||
<div className="font-mono text-sm text-gray-9"> | ||
{row.node.header.transactionsCount} | ||
</div> | ||
), | ||
sortable: false, | ||
}, | ||
{ | ||
name: 'Rewards', | ||
cell: (row: any) => { | ||
const mintTransaction = row.node.transactions.find( | ||
(trans: any) => trans.mintAmount != null, | ||
); | ||
return ( | ||
<div className="font-mono text-sm text-gray-9"> | ||
{mintTransaction ? mintTransaction.mintAmount : 'No mint amount'}{' '} | ||
</div> | ||
); | ||
}, | ||
sortable: false, | ||
}, | ||
{ | ||
name: 'Validator', | ||
cell: (row: any) => ( | ||
<div className="flex items-center justify-center w-full"> | ||
<BlockValidatorItem hashAddress={row.node.producer} /> | ||
</div> | ||
), | ||
sortable: false, | ||
}, | ||
{ | ||
name: 'Efficiency', | ||
cell: (row: any) => ( | ||
<div className="w-[10rem]"> | ||
<BlockEfficiencyItem current={row.node.totalGasUsed} total={30000000} /> | ||
</div> | ||
), | ||
sortable: false, | ||
}, | ||
{ | ||
name: 'Time', | ||
cell: (row: any) => { | ||
const unixTimestamp = row.node.time.rawUnix; | ||
const date = new Date(unixTimestamp * 1000); | ||
|
||
return <BlockTimeItem timeAgo={row.node.time.fromNow} time={date} />; | ||
}, | ||
sortable: false, | ||
}, | ||
{ | ||
name: '', | ||
cell: (row: any) => ( | ||
<Link | ||
as={NextLink} | ||
isExternal={false} | ||
href={`/block/${row.node.header.height}/simple`} | ||
className="px-4 py-[0.4rem] bg-gray-3 hover:bg-black hover:text-white dark:hover:bg-brand text-black dark:text-white rounded font-semibold font-mono" | ||
> | ||
View | ||
</Link> | ||
), | ||
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); | ||
}; | ||
|
||
return ( | ||
<div> | ||
<GridTable | ||
columns={columns} | ||
data={blocks.edges} | ||
onPageChanged={handlePageChanged} | ||
pageCount={pageCount} | ||
currentPage={currentPage} | ||
setCurrentPage={setCurrentPage} | ||
/> | ||
</div> | ||
); | ||
} | ||
|
||
export default BlocksTable; |
21 changes: 21 additions & 0 deletions
21
packages/app-explorer/src/systems/Block/components/Hero.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { HStack, Heading, Theme, VStack } from '@fuels/ui'; | ||
import { IconChevronRight } from '@tabler/icons-react'; | ||
|
||
export function Hero() { | ||
return ( | ||
<Theme> | ||
<VStack className="gap-0"> | ||
<Heading as="h1" className="m-0 p-0 font-mono"> | ||
Blocks | ||
</Heading> | ||
<HStack align={'center'}> | ||
<a href="/" className="text-[#9f9f9f] r"> | ||
<p className="m-0">Home</p> | ||
</a> | ||
<IconChevronRight color="#9f9f9f" size={20} /> | ||
<p className="m-0">View All Blocks</p> | ||
</HStack> | ||
</VStack> | ||
</Theme> | ||
); | ||
} |
Oops, something went wrong.