Skip to content

Commit c1d4112

Browse files
Im-Madhur-GuptaIm-Madhur-Gupta
authored
fix(frontend): update bubble map UI as per latest Figma (#75)
* refactor(frontend): redesign bubble map components with improved layout and circle packing algorithm * fix(frontend): update bubble map sizing, positioning, and styling for improved visual consistency * fix(frontend): update bubble map layout to use consistent lg breakpoint and fixed height * fix(frontend): remove outdated comment in bubble maps section * refactor(frontend): replace custom link styling with Button component in block time tracker and update pause/resume control variant * fix(frontend): change bubble map animation mode from sync to popLayout for smoother transitions
1 parent 6c9ec99 commit c1d4112

File tree

8 files changed

+384
-141
lines changed

8 files changed

+384
-141
lines changed

‎frontend/app/globals.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -444,12 +444,13 @@
444444
--tooltip-text-accent: #9c6ef8;
445445
--tooltip-separator: #27272a;
446446

447-
/* Bubble map colors */
448-
--color-bubble-map-color-1: #d33636;
449-
--color-bubble-map-color-2: #d34936;
450-
--color-bubble-map-color-3: #d38736;
451-
--color-bubble-map-color-4: #afa10d;
452-
--color-bubble-map-color-5: #67ae11;
447+
/* Bubble map colors - heat scale from hottest (1) to coolest (6) */
448+
--color-bubble-map-color-1: #d23636;
449+
--color-bubble-map-color-2: #d24836;
450+
--color-bubble-map-color-3: #d28736;
451+
--color-bubble-map-color-4: #aea10c;
452+
--color-bubble-map-color-5: #66ad10;
453+
--color-bubble-map-color-6: #079818;
453454

454455
/* Text colors */
455456
--text-secondary-light: var(--color-neutral-500);

‎frontend/app/page.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,14 @@ export default function Home() {
2828

2929
<SwapTransferTracker />
3030

31-
<section className="flex flex-col md:flex-row gap-8 md:gap-4 mt-8 md:mt-12">
32-
<HotAccountsBubbleMap />
33-
<HotSlotsBubbleMap />
31+
{/* Bubble Maps Section */}
32+
<section className="flex flex-col lg:flex-row lg:gap-4">
33+
<div className="flex-1 lg:border-r lg:border-zinc-800">
34+
<HotAccountsBubbleMap />
35+
</div>
36+
<div className="flex-1 lg:border-l lg:border-zinc-800">
37+
<HotSlotsBubbleMap />
38+
</div>
3439
</section>
3540
</CornerDecorationsContainer>
3641
</main>

‎frontend/components/block-time-tracker/block-time.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { calculateBarMetrics } from '@/lib/block-metrics'
1111
import { formatBlockNumber } from '@/lib/ui'
1212
import { cn } from '@/lib/utils'
1313
import type { Block } from '@/types/block'
14+
import { Button } from '../ui/button'
1415

1516
interface BlockTimeProps {
1617
block: Block
@@ -156,14 +157,18 @@ export const BlockTime = ({ block, normalizedTimeScaleMs }: BlockTimeProps) => {
156157
{numberOfTransactions} tx
157158
{numberOfTransactions !== 1 ? 's' : ''}
158159
</span>
159-
<a
160-
href={`${EXPLORER_URL}/block/${block.number}`}
161-
target="_blank"
162-
rel="noopener noreferrer"
163-
className="h-9 px-4 py-2 bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(23,23,23,0.2)_0%,rgba(163,163,163,0.16)_100%),#0A0A0A] shadow-[0_0_0_1px_rgba(0,0,0,0.8)] rounded-md flex items-center justify-center font-mono text-sm text-white uppercase hover:opacity-80 transition-opacity"
160+
<Button
161+
variant="secondary"
162+
onClick={() =>
163+
window.open(
164+
`${EXPLORER_URL}/block/${block.number}`,
165+
'_blank',
166+
'noopener,noreferrer',
167+
)
168+
}
164169
>
165-
View on explorer
166-
</a>
170+
VIEW ON EXPLORER
171+
</Button>
167172
</div>
168173
</div>
169174
</TooltipContent>

‎frontend/components/common/pause-resume-control.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,7 @@ export function PauseResumeControl({
1717
}: PauseResumeControlProps) {
1818
return (
1919
<div className="flex items-center gap-3">
20-
<Button
21-
variant={isFollowingChain ? 'secondary' : 'primary'}
22-
onClick={onToggle}
23-
>
20+
<Button variant="secondary" onClick={onToggle}>
2421
{isFollowingChain ? 'Pause' : 'Resume'}
2522
</Button>
2623
<span className="text-sm text-[#52525E]">

‎frontend/components/hot-accounts-bubble-map.tsx‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ interface HotAccount {
1414
hits: number
1515
}
1616

17+
function getBubbleTextSizes(size: number) {
18+
if (size >= 100) return { address: 'text-[0.625rem]', count: 'text-base' }
19+
if (size >= 80) return { address: 'text-[0.5625rem]', count: 'text-sm' }
20+
return { address: 'text-[0.5rem]', count: 'text-xs' }
21+
}
22+
1723
/**
1824
* A bubble map component that displays the most accessed accounts.
1925
*/
@@ -35,36 +41,43 @@ export function HotAccountsBubbleMap() {
3541

3642
return (
3743
<BubbleMap
38-
title="Hot Accounts Map"
39-
description="Accounts most frequently accessed during parallel transaction execution."
44+
title="Most Active Accounts"
45+
description="Accounts accessed most frequently during parallel transaction execution."
4046
items={accounts}
41-
renderBubbleContent={(account) => (
42-
<>
43-
<span className="text-xs font-normal w-full">
44-
{shortenHex(account.address)}
45-
</span>
46-
<span className="text-sm font-bold font-mono mt-0.5">
47-
{formatIntNumber(account.hits)}
48-
</span>
49-
</>
50-
)}
47+
renderBubbleContent={(account, size) => {
48+
const textSizes = getBubbleTextSizes(size)
49+
return (
50+
<>
51+
<span
52+
className={`${textSizes.address} font-normal font-mono text-center text-white leading-[1.2]`}
53+
>
54+
{shortenHex(account.address)}
55+
</span>
56+
<span
57+
className={`${textSizes.count} font-medium font-britti-sans text-white leading-[1.2]`}
58+
>
59+
{formatIntNumber(account.hits)}
60+
</span>
61+
</>
62+
)
63+
}}
5164
renderTooltip={(account) => {
5265
const label = getLabel(account.address)
5366
const displayName = label?.displayName ?? shortenHex(account.address)
5467
return (
5568
<div className="flex flex-col gap-1">
5669
<div className="flex flex-col gap-2">
57-
<span className="text-sm text-tooltip-text-accent tracking-wider uppercase">
70+
<span className="text-sm uppercase tracking-wider text-tooltip-text-accent">
5871
{displayName}
5972
</span>
60-
<p className="text-xs font-mono text-tooltip-text-secondary break-all">
73+
<p className="break-all font-mono text-xs text-tooltip-text-secondary">
6174
{account.address}
6275
</p>
6376
</div>
6477
<div className="flex flex-col gap-0">
65-
<div className="border-t border-tooltip-separator my-2" />
78+
<div className="my-2 border-t border-tooltip-separator" />
6679
<div className="flex flex-row justify-between">
67-
<p className="text-white font-medium">
80+
<p className="font-medium text-white">
6881
{formatIntNumber(account.hits)}{' '}
6982
<span className="text-tooltip-text-secondary">hits</span>
7083
</p>
@@ -76,7 +89,6 @@ export function HotAccountsBubbleMap() {
7689
</div>
7790
)
7891
}}
79-
bottomDescription="Account access frequencies during transaction execution."
8092
/>
8193
)
8294
}

‎frontend/components/hot-slots-bubble-map.tsx‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ interface HotSlot {
1515
hits: number
1616
}
1717

18+
function getBubbleTextSizes(size: number) {
19+
if (size >= 100) return { address: 'text-[0.625rem]', count: 'text-base' }
20+
if (size >= 80) return { address: 'text-[0.5625rem]', count: 'text-sm' }
21+
return { address: 'text-[0.5rem]', count: 'text-xs' }
22+
}
23+
1824
/**
1925
* A bubble map component that displays the most accessed storage slots.
2026
*/
@@ -40,47 +46,54 @@ export function HotSlotsBubbleMap() {
4046

4147
return (
4248
<BubbleMap
43-
title="Hot Slots Map"
49+
title="Storage Contention Map"
4450
description="Storage slots with the highest concurrent access during block execution."
4551
items={slots}
46-
renderBubbleContent={(slot) => (
47-
<>
48-
<span className="text-xs font-normal w-full">
49-
{shortenHex(slot.slot)}
50-
</span>
51-
<span className="text-sm font-bold font-mono mt-0.5">
52-
{formatIntNumber(slot.hits)}
53-
</span>
54-
</>
55-
)}
52+
renderBubbleContent={(slot, size) => {
53+
const textSizes = getBubbleTextSizes(size)
54+
return (
55+
<>
56+
<span
57+
className={`${textSizes.address} font-normal font-mono text-center text-white leading-[1.2]`}
58+
>
59+
{shortenHex(slot.slot)}
60+
</span>
61+
<span
62+
className={`${textSizes.count} font-medium font-britti-sans text-white leading-[1.2]`}
63+
>
64+
{formatIntNumber(slot.hits)}
65+
</span>
66+
</>
67+
)
68+
}}
5669
renderTooltip={(slot) => {
5770
const label = getLabel(slot.address)
5871
const displayName = label?.displayName ?? shortenHex(slot.address)
5972
return (
6073
<div className="flex flex-col gap-1">
6174
<div className="flex flex-col gap-2">
62-
<span className="text-sm text-tooltip-text-accent uppercase tracking-wider">
75+
<span className="text-sm uppercase tracking-wider text-tooltip-text-accent">
6376
{displayName}
6477
</span>
6578
<div className="flex flex-col gap-1">
66-
<p className="text-2xs font-mono text-tooltip-text-secondary break-all">
79+
<p className="break-all font-mono text-2xs text-tooltip-text-secondary">
6780
Contract:{' '}
68-
<span className="text-white text-xs">
81+
<span className="text-xs text-white">
6982
{shortenHex(slot.address)}
7083
</span>
7184
</p>
72-
<p className="text-2xs font-mono text-tooltip-text-secondary break-all">
85+
<p className="break-all font-mono text-2xs text-tooltip-text-secondary">
7386
Slot:{' '}
74-
<span className="text-white text-xs">
87+
<span className="text-xs text-white">
7588
{shortenHex(slot.slot)}
7689
</span>
7790
</p>
7891
</div>
7992
</div>
8093
<div className="flex flex-col gap-0">
81-
<div className="border-t border-tooltip-separator my-2" />
94+
<div className="my-2 border-t border-tooltip-separator" />
8295
<div className="flex flex-row justify-between">
83-
<p className="text-white font-medium">
96+
<p className="font-medium text-white">
8497
{formatIntNumber(slot.hits)}{' '}
8598
<span className="text-tooltip-text-secondary">hits</span>
8699
</p>
@@ -92,7 +105,6 @@ export function HotSlotsBubbleMap() {
92105
</div>
93106
)
94107
}}
95-
bottomDescription="Storage slot access frequencies during transaction execution."
96108
/>
97109
)
98110
}

0 commit comments

Comments
 (0)