Skip to content

Commit 45ad210

Browse files
CamillebzdCamillebzd
committed
merge main
2 parents 066f8cf + c5ab67c commit 45ad210

File tree

21 files changed

+301
-203
lines changed

21 files changed

+301
-203
lines changed

‎frontend/app/globals.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,17 @@
126126
--color-tracker-row-hover: #2b233d;
127127
--color-tracker-badge-bg: #2a233a;
128128
--color-tracker-active: #836ef9;
129+
--color-tracker-live-dot-core: var(--color-brand-purple-primary);
130+
--color-tracker-live-dot-ring-inner: rgba(110, 84, 255, 0.2);
131+
--color-tracker-live-dot-ring-middle: rgba(110, 84, 255, 0.1);
132+
--color-tracker-live-dot-ring-outer: rgba(110, 84, 255, 0.1);
133+
134+
/* Corner decoration border color */
135+
--color-border-corner: #e5e5e5;
136+
137+
/* Tabs component colors */
138+
--shadow-tabs: 0px 4px 16px 0px rgba(14, 16, 15, 0.6);
139+
--shadow-tabs-inset: 0px 0px 24px 0px rgba(255, 255, 255, 0.08) inset;
129140

130141
/* Block time tracker colors - new design */
131142
--color-block-exec-bar: #38bdf8;
@@ -804,3 +815,20 @@
804815
inset 0 -0.5px 0.5px 0 rgba(255, 255, 255, 0.25),
805816
0 0 0 1px rgba(0, 0, 0, 0.8);
806817
}
818+
819+
/* Live dot pulse animation */
820+
@keyframes live-dot-pulse {
821+
0%,
822+
100% {
823+
opacity: 1;
824+
transform: scale(1);
825+
}
826+
50% {
827+
opacity: 0.7;
828+
transform: scale(0.95);
829+
}
830+
}
831+
832+
.animate-live-dot-pulse {
833+
animation: live-dot-pulse 2s ease-in-out infinite;
834+
}

‎frontend/components/block-state-tracker/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export function BlockStateTracker() {
116116
<Blockchain blocks={blocks} isFollowingChain={!isPaused} />
117117
</div>
118118

119-
<HoverPauseFooter />
119+
<HoverPauseFooter label="Hovering on the Block stream pauses the update." />
120120
</div>
121121
</div>
122122
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export function BlockTimeExecutionTracker() {
104104
/>
105105
</div>
106106

107-
<HoverPauseFooter />
107+
<HoverPauseFooter label="Hovering on the Block stream pauses the update." />
108108
</div>
109109
</div>
110110
</div>

‎frontend/components/common/hover-pause-footer.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22

33
import { Pointer } from 'lucide-react'
44

5-
export function HoverPauseFooter() {
5+
interface HoverPauseFooterProps {
6+
label: string
7+
}
8+
9+
export function HoverPauseFooter({ label }: HoverPauseFooterProps) {
610
return (
711
<div className="hidden md:block px-6 sm:px-10 bg-[linear-gradient(153deg,#18181B_0%,rgba(24,24,27,0)_100%)] border-t border-l border-b border-zinc-800">
812
<div className="flex items-center gap-4 py-3">
913
<Pointer className="w-5 h-5 text-[#52525E]" />
1014
<span className="text-base text-[#52525E] font-normal leading-6">
11-
Hovering on the Block stream pauses the update.
15+
{label}
1216
</span>
1317
</div>
1418
</div>

‎frontend/components/swap-transfer-tracker/cumulative-transfer-counter.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { TrendingUp } from 'lucide-react'
44
import { formatUnits } from 'viem'
5-
import { StatCard } from '@/components/ui/stat-card'
65
import { formatAmount } from '@/lib/ui'
76

87
interface CumulativeTransferCounterProps {
@@ -16,13 +15,21 @@ export function CumulativeTransferCounter({
1615
const amount = Number(formattedAmount)
1716

1817
return (
19-
<section className="m-4">
20-
<StatCard
21-
label="Live MON + WMON Transferred"
22-
value={formatAmount(amount)}
23-
description="Total value transferred since page load. Resets on refresh."
24-
icon={TrendingUp}
25-
/>
26-
</section>
18+
<div className="bg-[#18181B] mt-6 mb-8 mx-4 sm:mx-6 p-4 sm:p-6 flex flex-col sm:flex-row sm:items-stretch sm:justify-between gap-4 sm:gap-14">
19+
<div className="flex flex-col gap-1 gap-2 lg:gap-4">
20+
<span className="font-inter text-sm sm:text-base font-normal leading-normal text-text-secondary">
21+
Live MON + WMON Transferred
22+
</span>
23+
<span className="font-britti-sans text-4xl sm:text-5xl md:text-6xl font-medium leading-none tracking-tight">
24+
{formatAmount(amount)}
25+
</span>
26+
</div>
27+
<div className="flex flex-row sm:flex-col items-center sm:items-end justify-between gap-3 sm:w-2/5">
28+
<TrendingUp className="text-secondary size-10 sm:size-12 md:size-14" />
29+
<span className="text-xs sm:text-sm text-muted-dark sm:text-right">
30+
Total value transferred since page load. Resets on refresh.
31+
</span>
32+
</div>
33+
</div>
2734
)
2835
}

‎frontend/components/swap-transfer-tracker/index.tsx‎

Lines changed: 16 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
11
'use client'
22

3-
import { ArrowLeftRight, Pointer, Send } from 'lucide-react'
43
import { useState } from 'react'
5-
import { LiveBadge } from '@/components/common/live-badge'
4+
import { LiveDot } from '@/components/ui/live-dot'
65
import { SectionHeader } from '@/components/ui/section-header'
76
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
87
import { useSwapEvents } from '@/hooks/use-swap-events'
98
import { useTransferEvents } from '@/hooks/use-transfer-events'
10-
import { cn } from '@/lib/utils'
9+
import { HoverPauseFooter } from '../common/hover-pause-footer'
10+
import { PauseResumeControl } from '../common/pause-resume-control'
1111
import { Swaps } from './swaps'
1212
import { Transfers } from './transfers'
1313

14-
const TAB_TRIGGER_CLASS = cn(
15-
'mx-1 w-36 flex items-center justify-center gap-2 px-4 py-3',
16-
'rounded-none border-0 bg-transparent cursor-pointer transition-colors',
17-
'text-zinc-400 data-[state=active]:text-tracker-active',
18-
'relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5',
19-
'after:bg-transparent data-[state=active]:after:bg-tracker-active',
20-
'data-[state=active]:bg-transparent data-[state=active]:shadow-none',
21-
)
22-
2314
export function SwapTransferTracker() {
2415
const { allSwaps, isConnected: isSwapConnected } = useSwapEvents()
2516
const {
@@ -33,27 +24,26 @@ export function SwapTransferTracker() {
3324
<div className="w-full flex flex-col">
3425
<SectionHeader
3526
title="Live Transaction Log"
27+
titleAdornment={isSwapConnected && isTransferConnected && <LiveDot />}
3628
description="Real-time swaps and transfers observed directly from execution events."
3729
/>
3830

3931
<div className="flex flex-col border-b border-zinc-800 overflow-hidden">
4032
<Tabs defaultValue="transfers" className="w-full">
4133
<div className="flex flex-col">
42-
<div className="overflow-x-auto scrollbar-none">
43-
<TabsList className="w-fit h-auto py-1 px-4 gap-2 bg-transparent rounded-none">
44-
<TabsTrigger value="transfers" className={TAB_TRIGGER_CLASS}>
45-
<Send className="size-4" />
46-
<span className="text-sm font-medium">Transfers</span>
47-
<LiveBadge isConnected={isTransferConnected} />
48-
</TabsTrigger>
49-
<TabsTrigger value="swaps" className={TAB_TRIGGER_CLASS}>
50-
<ArrowLeftRight className="size-4" />
51-
<span className="text-sm font-medium">Swaps</span>
52-
<LiveBadge isConnected={isSwapConnected} />
53-
</TabsTrigger>
34+
<div className="flex items-center justify-between overflow-x-auto scrollbar-none">
35+
<TabsList className="mx-6 my-4 sm:mx-10 sm:my-6">
36+
<TabsTrigger value="transfers">Transfers</TabsTrigger>
37+
<TabsTrigger value="swaps">Swaps</TabsTrigger>
5438
</TabsList>
5539
</div>
56-
<div className="w-full h-px bg-zinc-800" />
40+
{/* Mobile: Pause/Resume button */}
41+
<div className="md:hidden pl-6 pb-6">
42+
<PauseResumeControl
43+
isFollowingChain={isFollowingData}
44+
onToggle={() => setIsFollowingData(!isFollowingData)}
45+
/>
46+
</div>
5747
</div>
5848

5949
<TabsContent value="transfers" className="mt-0">
@@ -74,30 +64,7 @@ export function SwapTransferTracker() {
7464
</TabsContent>
7565
</Tabs>
7666

77-
{/* Footer with hover pause info */}
78-
<div className="flex items-center gap-4 px-6 sm:px-10 py-2.5 border-t border-zinc-800">
79-
{/* Mobile pause/resume button */}
80-
<button
81-
type="button"
82-
onClick={() => setIsFollowingData(!isFollowingData)}
83-
className={cn(
84-
'md:hidden h-9 px-4 py-2 rounded-md font-mono text-sm text-white uppercase cursor-pointer transition-all duration-200',
85-
isFollowingData
86-
? '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)]'
87-
: 'bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(110,84,255,0)_0%,rgba(255,255,255,0.12)_100%),#6E54FF] shadow-[0_0_0_1px_rgba(79,71,235,0.9)]',
88-
)}
89-
>
90-
{isFollowingData ? 'Pause' : 'Resume'}
91-
</button>
92-
93-
{/* Desktop hover pause info */}
94-
<div className="hidden md:flex items-center gap-4">
95-
<Pointer className="w-5 h-5 text-[#52525E]" />
96-
<span className="text-base text-[#52525E]">
97-
Hovering on the data stream pauses the update.
98-
</span>
99-
</div>
100-
</div>
67+
<HoverPauseFooter label="Hovering on the tables pauses the update." />
10168
</div>
10269
</div>
10370
)

‎frontend/components/swap-transfer-tracker/swap-row.tsx‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { formatTimeDisplay } from '@/lib/timestamp'
77
import { formatTokenAmount } from '@/lib/ui'
88
import { cn, shortenHex } from '@/lib/utils'
99
import type { SwapData } from '@/types/swap'
10-
import { TokenBadge } from './token-badge'
10+
import { TokenIcon } from './token-icon'
1111

1212
interface SwapRowProps {
1313
swap: SwapData
@@ -20,55 +20,51 @@ export function SwapRow({ swap, gridClass }: SwapRowProps) {
2020
return (
2121
<div
2222
className={cn(
23-
'py-3 items-center border-b border-zinc-800/50 hover:bg-tracker-row-hover transition-colors',
23+
'h-14 border-b hover:bg-tracker-row-hover transition-colors',
2424
gridClass,
2525
)}
2626
>
2727
<ExternalLink
2828
href={`${EXPLORER_URL}/tx/${swap.txHash}`}
29-
className="text-sm font-mono text-zinc-400 hover:text-white transition-colors truncate"
29+
className="w-32 text-sm transition-colors truncate"
3030
title={swap.txHash}
3131
>
3232
{shortenHex(swap.txHash)}
3333
</ExternalLink>
3434

35-
<div className="flex items-center gap-2">
36-
<span className="text-sm font-mono text-white tabular-nums">
37-
{formatTokenAmount(swap.amountIn, swap.tokenIn, swap.tokenInAddress)}
38-
</span>
39-
<TokenBadge symbol={swap.tokenIn} />
40-
</div>
35+
<span className="w-28 flex items-center justify-end gap-1.5 text-sm tabular-nums">
36+
{formatTokenAmount(swap.amountIn, swap.tokenIn, swap.tokenInAddress)}
37+
<TokenIcon address={swap.tokenInAddress} size={16} />
38+
</span>
4139

42-
<div className="flex items-center gap-2">
43-
<span className="text-sm font-mono text-white tabular-nums">
44-
{formatTokenAmount(
45-
swap.amountOut,
46-
swap.tokenOut,
47-
swap.tokenOutAddress,
48-
)}
49-
</span>
50-
<TokenBadge symbol={swap.tokenOut} />
51-
</div>
40+
<span className="w-28 flex items-center justify-end gap-1.5 text-sm tabular-nums">
41+
{formatTokenAmount(swap.amountOut, swap.tokenOut, swap.tokenOutAddress)}
42+
<TokenIcon address={swap.tokenOutAddress} size={16} />
43+
</span>
5244

53-
{config && (
54-
<span
55-
className="w-fit inline-flex items-center px-2 py-0.5 rounded text-xs font-mono"
56-
style={{ backgroundColor: `${config.color}20`, color: config.color }}
57-
>
58-
{config.name}
59-
</span>
60-
)}
61-
{!config && <span />}
45+
<span className="w-32">
46+
{config && (
47+
<span
48+
className="inline-flex items-center text-sm"
49+
style={{
50+
backgroundColor: `${config.color}20`,
51+
color: config.color,
52+
}}
53+
>
54+
{config.name}
55+
</span>
56+
)}
57+
</span>
6258

6359
<ExternalLink
6460
href={`${EXPLORER_URL}/address/${swap.sender}`}
65-
className="text-sm font-mono text-zinc-400 hover:text-white transition-colors truncate"
61+
className="w-32 text-sm transition-colors truncate"
6662
title={swap.sender}
6763
>
6864
{shortenHex(swap.sender)}
6965
</ExternalLink>
7066

71-
<span className="text-sm font-mono text-zinc-400 tabular-nums">
67+
<span className="w-24 text-sm tabular-nums">
7268
{formatTimeDisplay(swap.timestamp)}
7369
</span>
7470
</div>

0 commit comments

Comments
 (0)