Skip to content

Commit 347aae0

Browse files
CamillebzdCamillebzd
authored
Update Network Activity and Header parts (#74)
* updated header and Network Activity parts * hidde live dot in header on screens smaller than large * update layout of the main page
1 parent c5ab67c commit 347aae0

File tree

10 files changed

+118
-68
lines changed

10 files changed

+118
-68
lines changed

‎frontend/app/globals.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -358,9 +358,9 @@
358358
--chart-5-dark: hsla(160, 60%, 45%, 1);
359359

360360
--chart-axis-light: var(--color-zinc-500);
361-
--chart-axis-dark: var(--color-zinc-500);
361+
--chart-axis-dark: var(--color-text-muted);
362362
--chart-grid-light: rgba(228, 228, 231, 0.25);
363-
--chart-grid-dark: rgba(63, 63, 70, 0.25);
363+
--chart-grid-dark: #27272a;
364364
--chart-cursor-light: var(--color-zinc-400);
365365
--chart-cursor-dark: var(--color-zinc-600);
366366

‎frontend/app/page.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,31 @@ export default function Home() {
1111
return (
1212
<div className="min-h-screen text-white font-sans">
1313
<main className="py-6 px-4 max-w-7xl mx-auto sm:py-8 sm:px-6 md:py-12 flex flex-col">
14-
<PageHeader />
15-
1614
{/* Sections container with continuous left/right borders */}
17-
<div className="flex flex-col border-x border-zinc-800">
15+
<div className="flex flex-col gap-20 border border-zinc-800 relative">
16+
<div className="absolute -top-px -left-px w-4 h-4 border-t border-l border-white" />
17+
<div className="absolute -top-px -right-px w-4 h-4 border-t border-r border-white" />
18+
<div className="absolute -bottom-px -left-px w-4 h-4 border-b border-l border-white" />
19+
<div className="absolute -bottom-px -right-px w-4 h-4 border-b border-r border-white" />
20+
<PageHeader />
21+
1822
<NetworkActivityTracker />
1923

20-
<BlockStateTracker />
24+
<div className="flex flex-col gap-1">
25+
<BlockStateTracker />
2126

22-
<SectionSeparator />
27+
<SectionSeparator />
2328

24-
<BlockTimeExecutionTracker />
29+
<BlockTimeExecutionTracker />
30+
</div>
2531

2632
<SwapTransferTracker />
27-
</div>
2833

29-
<section className="flex flex-col md:flex-row gap-8 md:gap-4 mt-8 md:mt-12">
30-
<HotAccountsBubbleMap />
31-
<HotSlotsBubbleMap />
32-
</section>
34+
<section className="flex flex-col md:flex-row gap-8 md:gap-4 mt-8 md:mt-12">
35+
<HotAccountsBubbleMap />
36+
<HotSlotsBubbleMap />
37+
</section>
38+
</div>
3339
</main>
3440
</div>
3541
)

‎frontend/components/common/page-header.tsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,27 @@
1+
import Image from 'next/image'
2+
13
export function PageHeader() {
24
return (
3-
<div className="pb-8 md:pb-12 border-b border-zinc-500/50">
4-
<h1 className="w-fit font-britti-sans text-3xl sm:text-4xl md:text-5xl font-medium leading-none tracking-[-0.04rem] text-white underline-glow">
5-
Execution Events SDK Showcase
6-
</h1>
7-
<p className="mt-4 text-base font-normal text-text-secondary">
8-
Live visualization of parallel EVM execution events streamed directly
9-
from Monad&apos;s execution engine.
10-
</p>
5+
<div className="flex flex-col items-center gap-20 pt-10">
6+
<Image src="/logo.svg" alt="Monad Logo" width={125} height={25} />
7+
<div className="flex flex-col items-center px-10 gap-4 w-full">
8+
<div className="flex flex-row items-center">
9+
<Image
10+
src="/live-dot.svg"
11+
alt="Monad Rings"
12+
width={60}
13+
height={60}
14+
className="-mr-1.5 hidden lg:inline-block"
15+
/>
16+
<h1 className="w-fit font-britti-sans text-4xl sm:text-5xl md:text-6xl font-medium leading-none tracking-[-0.08rem] text-white text-center">
17+
Live Blockchain Execution
18+
</h1>
19+
</div>
20+
<p className="font-britti-sans text-lg sm:text-xl md:text-2xl font-medium text-text-secondary sm:w-2/3 text-center">
21+
Live visualization of parallel EVM execution events, streamed directly
22+
from Monad&apos;s execution engine.
23+
</p>
24+
</div>
1125
</div>
1226
)
1327
}

‎frontend/components/network-activity-tracker/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@ import { TpsChart } from './tps-chart'
44

55
export function NetworkActivityTracker() {
66
return (
7-
<div className="w-full flex flex-col gap-4 sm:gap-6">
7+
<div className="w-full flex flex-col gap-4">
88
<SectionHeader
99
title="Network Activity"
1010
description="Live throughput and transaction count from execution events."
1111
/>
12-
<div className="dark-component-colors rounded-xl border p-4 sm:p-5 overflow-x-auto scrollbar-none">
13-
<div className="w-full h-72 md:h-52">
14-
<TpsChart />
12+
<div className="w-full py-3 px-5 md:py-6 md:px-10">
13+
<div className="bg-black rounded-xl border-[#737373] border p-6 sm:p-10 overflow-x-auto scrollbar-none">
14+
<div className="w-full h-92 md:h-72">
15+
<TpsChart />
16+
</div>
1517
</div>
1618
</div>
17-
<div className="flex items-center gap-2 text-sm text-zinc-500 md:hidden">
19+
<div className="flex items-center px-5 gap-2 text-sm text-text-secondary md:hidden">
1820
<Info className="w-4 h-lh" />
1921
<span>Scroll horizontally to see the latest data</span>
2022
</div>

‎frontend/components/network-activity-tracker/network-activity-stats.tsx‎

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import {
88
TooltipContent,
99
TooltipTrigger,
1010
} from '@/components/ui/tooltip'
11-
import { cn } from '@/lib/utils'
1211

1312
interface StatItemProps {
1413
label: string
1514
value: number
1615
info?: string
1716
colorClass?: string
17+
tooltipDistance?: number
1818
}
1919

2020
interface NetworkActivityStatsProps {
@@ -23,22 +23,22 @@ interface NetworkActivityStatsProps {
2323
totalTransactions: number
2424
}
2525

26-
function StatItem({
27-
label,
28-
value,
29-
info,
30-
colorClass = 'text-white',
31-
}: StatItemProps) {
26+
function StatItem({ label, value, info, tooltipDistance }: StatItemProps) {
3227
return (
33-
<div className="flex flex-col items-end gap-1">
34-
<div className="flex items-center gap-1">
35-
<span className="text-xs text-zinc-500 uppercase tracking-wider font-medium">
28+
<div className="flex flex-col items-center gap-2 relative">
29+
<div className="flex items-end gap-1">
30+
<span className="text-sm text-text-muted font-normal leading-5 max-w-18 text-center">
3631
{label}
3732
</span>
3833
{info && (
3934
<Tooltip>
4035
<TooltipTrigger asChild>
41-
<Info className="size-3 text-zinc-600 cursor-help" />
36+
<Info
37+
className="size-3 text-text-muted cursor-help absolute top-6 hidden sm:inline-block"
38+
style={{
39+
right: tooltipDistance ? `-${tooltipDistance * 4}px` : '0px',
40+
}}
41+
/>
4242
</TooltipTrigger>
4343
<TooltipContent side="top">{info}</TooltipContent>
4444
</Tooltip>
@@ -51,10 +51,7 @@ function StatItem({
5151
minimumFractionDigits: 0,
5252
maximumFractionDigits: 2,
5353
}}
54-
className={cn(
55-
'text-2xl sm:text-3xl font-bold leading-none',
56-
colorClass,
57-
)}
54+
className="text-xl sm:text-2xl font-medium leading-7 font-britti-sans text-text-secondary"
5855
/>
5956
</div>
6057
)
@@ -68,22 +65,18 @@ export const NetworkActivityStats = ({
6865
return (
6966
<AnimatedNumberGroup>
7067
<div className="flex justify-between gap-3 sm:gap-7 xs:justify-end">
68+
<StatItem label="Transaction per second" value={currentTps} />
7169
<StatItem
72-
label="Live TPS"
73-
value={currentTps}
74-
colorClass="text-[var(--color-chart-1)]"
75-
/>
76-
<StatItem
77-
label="Peak TPS"
70+
label="Peak Volume"
7871
value={peakTps}
7972
info="Highest TPS since page load"
80-
colorClass="text-amber-400"
73+
tooltipDistance={1}
8174
/>
8275
<StatItem
83-
label="Total Txns"
76+
label="Total transactions"
8477
value={totalTransactions}
8578
info="Total transactions since page load"
86-
colorClass="text-blue-400"
79+
tooltipDistance={5}
8780
/>
8881
</div>
8982
</AnimatedNumberGroup>

‎frontend/components/network-activity-tracker/tps-chart.tsx‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22

3-
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
3+
import Image from 'next/image'
4+
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
45
import {
56
type ChartConfig,
67
ChartContainer,
@@ -27,10 +28,22 @@ export function TpsChart() {
2728

2829
return (
2930
<div className="flex flex-col h-full">
30-
<div className="flex flex-col gap-3 pb-4 xs:flex-row xs:items-start xs:justify-between">
31+
<div className="flex flex-col gap-3 pb-10 xs:flex-row xs:items-start xs:justify-between">
3132
<div className="flex flex-col gap-0.5">
32-
<span className="text-base font-medium text-zinc-400">Live TPS</span>
33-
<span className="text-sm text-zinc-600">Last 5 minutes</span>
33+
<div className="flex flex-row justify-center gap-1">
34+
<span className="text-2xl font-medium text-white font-britti-sans leading-7">
35+
Transaction volume
36+
</span>
37+
<Image
38+
src="/live-dot.svg"
39+
alt="live indicator"
40+
width={24}
41+
height={24}
42+
/>
43+
</div>
44+
<span className="text-sm text-text-secondary">
45+
for the last 5 minutes
46+
</span>
3447
</div>
3548
<NetworkActivityStats
3649
currentTps={currentTps}
@@ -43,17 +56,25 @@ export function TpsChart() {
4356
{hasData ? (
4457
<ChartContainer
4558
config={chartConfig}
46-
className="h-full min-w-2xl w-full"
59+
className="h-full min-w-2xl w-full p-0"
4760
>
48-
<LineChart
61+
<AreaChart
4962
data={history}
5063
margin={{ top: 8, right: 8, bottom: 0, left: 0 }}
5164
>
52-
<CartesianGrid
53-
strokeDasharray="4 4"
54-
stroke="var(--chart-grid)"
55-
vertical={false}
56-
/>
65+
<defs>
66+
<linearGradient
67+
id="tpsGradient"
68+
x1="0%"
69+
y1="0%"
70+
x2="0%"
71+
y2="100%"
72+
>
73+
<stop offset="55%" stopColor="#6E54FF" />
74+
<stop offset="100%" stopColor="rgba(0, 0, 0, 0)" />
75+
</linearGradient>
76+
</defs>
77+
<CartesianGrid stroke="var(--chart-grid)" vertical={false} />
5778
<XAxis
5879
dataKey="timestamp"
5980
tickLine={false}
@@ -95,19 +116,20 @@ export function TpsChart() {
95116
/>
96117
}
97118
/>
98-
<Line
119+
<Area
99120
type="linear"
100121
dataKey="tps"
101-
stroke="var(--color-tps)"
122+
stroke="#6E54FF"
102123
strokeWidth={2}
124+
fill="url(#tpsGradient)"
103125
dot={false}
104126
isAnimationActive={false}
105127
/>
106-
</LineChart>
128+
</AreaChart>
107129
</ChartContainer>
108130
) : (
109131
<div className="size-full flex items-center justify-center">
110-
<p className="text-sm text-zinc-600">Waiting for data...</p>
132+
<p className="text-sm text-text-secondary">Waiting for data...</p>
111133
</div>
112134
)}
113135
</div>

‎frontend/components/ui/section-header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function SectionHeader({
3232

3333
{/* Description section */}
3434
<div className="hidden sm:flex w-2/5 h-full px-10 items-center">
35-
<div className="flex-1 text-gray-400 text-base font-normal leading-6">
35+
<div className="flex-1 text-text-secondary text-base font-normal leading-6">
3636
{description}
3737
</div>
3838
</div>

‎frontend/lib/timestamp.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,9 @@ export function formatDateDisplay(timestamp: string) {
3636
export function formatRelativeTime(timestamp: number): string {
3737
const diffSeconds = Math.floor((Date.now() - timestamp) / 1000)
3838
if (diffSeconds <= 0) return 'now'
39-
if (diffSeconds < 60) return `${diffSeconds}s ago`
4039
const mins = Math.floor(diffSeconds / 60)
4140
const secs = diffSeconds % 60
42-
return secs === 0 ? `${mins}m ago` : `${mins}m ${secs}s`
41+
return `${mins}:${secs.toString().padStart(2, '0')}`
4342
}
4443

4544
export function formatTimeHMS(timestamp: number): string {

‎frontend/public/live-dot.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎frontend/public/logo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)