refactor: redesign slot progress timeline UI (#290)

samcm · web-flow · commit f4e004cd4443 · 2025-11-13T17:04:22.000-03:00
* fix: correct MEV block detection and improve phase node layout

Fixes two issues in the slot progress timeline:

1. MEV Detection: Changed the logic to check for the existence of the
   blockMev object rather than just builder_pubkey. A block is externally
   built if there is ANY data in the payload-delivered/MEV table, not just
   when builder_pubkey is present. This ensures blocks built via MEV relay
   are correctly identified as "External" instead of "Local".

2. Layout: Improved PhaseNode component styling to fix the "scuffed" third
   line appearance:
   - Increased gap between label/time/stats from 0.5 to 1 (gap-1)
   - Always render time badge with reserved space (min-h-[13px]) instead
     of conditional rendering to maintain consistent alignment
   - Increased stats font size from 8px to 9px for better readability
   - Added text-center class to time and stats for better alignment
   - All three lines now have consistent reserved space to prevent layout
     shifts

Affects both live slot view and static slot detail pages.

* refactor: improve slot progress timeline with distinct colors and remove unreliable MEV stats

Changes:
1. Removed "External" vs "Local" stats from Proposing phase - this was
   unreliable due to MEV data timing issues

2. Added distinct colors to each phase for better visual hierarchy:
   - Builders: accent (distinctive for MEV bidding)
   - Relaying: secondary (relay selection)
   - Proposing: primary (main block proposal action)
   - Gossiping: secondary (network propagation, slots only)
   - Attesting: warning (ongoing validation)
   - Accepted: success (completed, &gt;66% threshold)

3. All phases now have consistent color scheme across both live and
   static views

The monotonous all-primary color scheme made it hard to distinguish
phases. The new color palette provides clear visual separation while
maintaining semantic meaning.

* refactor: use muted secondary color for all timeline phases

Replaced the varied color scheme (accent, primary, warning, success)
with a uniform secondary color for all phases. This creates a more
cohesive, muted appearance that is easier on the eyes and less
visually noisy.

All phases now use 'secondary' color:
- Builders
- Relaying
- Proposing
- Gossiping (slots only)
- Attesting
- Accepted

The uniform color scheme provides a calmer, more professional look
while maintaining clear phase distinctions through labels and icons.

* revert: use primary color for all timeline phases

Secondary was too dark/muted. Going back to a simpler approach with
primary color across all phases for a cleaner, more consistent look.

* refactor: simplify and clean up slot progress timeline design

Completely redesigned the timeline for a cleaner, more professional look:

PhaseNode changes:
- Removed all animations (pulse, ring effects, scale on hover)
- Switched from large circular buttons (size-12) to compact rounded squares (size-8)
- Removed complex color mappings and dynamic styles
- Simplified to three states with subtle visual differences:
  - Pending: muted on surface background
  - Active: primary accent with light background
  - Completed: muted on surface background
- Smaller, cleaner icons (size-5)
- Better text hierarchy with proper font sizes (11px/10px/9px)
- Monospace font for time values for better alignment
- Conditional stats rendering (only show when present)

PhaseConnection changes:
- Removed dual-layer background/foreground approach
- Simplified to single subtle border line (border/50)
- Lighter progress fill (primary/20)
- Removed isActive color variations

Overall improvements:
- No more "scuffed" third line - proper conditional rendering
- No more uninspired look - clean, minimal, professional
- Better visual hierarchy without relying on animations
- More compact layout that doesn't dominate the UI
- Consistent spacing and alignment throughout

* fix: prevent layout shifts in slot progress timeline

Fixed height jumping by ensuring all text elements are always rendered:
- Added 'leading-tight' to all text spans for consistent line height
- Stats line now always renders with opacity-0 when empty instead of
  conditionally rendering, preventing the component from changing height
- Non-breaking space (\u00A0) used as fallback to maintain consistent
  spacing even when content is hidden

This prevents the page from jumping around when phases transition or
stats appear/disappear.

* feat: add success color to Accepted phase when 66% threshold reached

The Accepted phase now shows with a distinct success (green) color when
the block has achieved &gt;66% attestation acceptance, making it visually
stand out as a completion milestone.

Changes:
- Accepted phase uses 'success' color when acceptanceTime is defined
- PhaseNode component now respects the 'success' color for both active
  and completed states
- Icon background and text use success/10 and success colors
- Time badge also shows in success color when phase is successful
- Applied to both live and static slot views

When the phase is pending (acceptanceTime undefined), it remains muted
with primary color like other phases.
diff --git a/src/components/Ethereum/SlotProgressTimeline/components/PhaseConnection/PhaseConnection.tsx b/src/components/Ethereum/SlotProgressTimeline/components/PhaseConnection/PhaseConnection.tsx
@@ -3,63 +3,32 @@ import clsx from 'clsx';
 import type { PhaseConnectionProps } from '../../SlotProgressTimeline.types';
 
 /**
- * PhaseConnection - Progress line between phases in the slot timeline
- *
- * Displays a connection line that can be horizontal or vertical.
- * Animates fill progress in live mode using CSS transitions.
- *
- * @example
- * ```tsx
- * // Horizontal connection with 75% progress
- * <PhaseConnection
- *   progress={75}
- *   orientation="horizontal"
- *   isActive={true}
- * />
- *
- * // Vertical connection (completed)
- * <PhaseConnection
- *   progress={100}
- *   orientation="vertical"
- *   isActive={false}
- * />
- * ```
+ * PhaseConnection - Simple line between phases in the slot timeline
  */
 export function PhaseConnection({
   progress,
   orientation,
-  isActive = false,
+  isActive: _isActive = false,
   className,
 }: PhaseConnectionProps): JSX.Element {
   const isHorizontal = orientation === 'horizontal';
 
   return (
     <div
       className={clsx(
-        'relative',
-        // Horizontal: full width, fixed height
-        isHorizontal && 'h-0.5 w-full',
-        // Vertical: fixed width, full height
-        !isHorizontal && 'h-full w-0.5',
+        'relative bg-border/50',
+        isHorizontal && 'h-px w-full',
+        !isHorizontal && 'h-full w-px',
         className
       )}
       role="presentation"
       aria-hidden="true"
     >
-      {/* Background line */}
-      <div className={clsx('absolute bg-border', isHorizontal && 'h-full w-full', !isHorizontal && 'h-full w-full')} />
-
       {/* Progress fill */}
       <div
         className={clsx(
-          'absolute',
-          // Active state - use primary color
-          isActive && 'bg-primary',
-          // Inactive/completed state - use muted color
-          !isActive && 'bg-muted',
-          // Horizontal: fill from left to right
+          'absolute bg-primary/20',
           isHorizontal && 'top-0 left-0 h-full',
-          // Vertical: fill from top to bottom
           !isHorizontal && 'top-0 left-0 w-full'
         )}
         style={
diff --git a/src/components/Ethereum/SlotProgressTimeline/components/PhaseNode/PhaseNode.tsx b/src/components/Ethereum/SlotProgressTimeline/components/PhaseNode/PhaseNode.tsx
@@ -3,148 +3,87 @@ import clsx from 'clsx';
 import type { PhaseNodeProps } from '../../SlotProgressTimeline.types';
 
 /**
- * PhaseNode - Circular icon indicator for a phase in the slot timeline
+ * PhaseNode - Indicator for a phase in the slot timeline
  *
  * Displays a phase with three states:
- * - Pending: Gray/muted, 50% opacity
- * - Active: Full color with pulsing animation
- * - Completed: Full color, no animation
- *
- * @example
- * ```tsx
- * import { CubeIcon } from '@heroicons/react/24/outline';
- *
- * <PhaseNode
- *   phase={{
- *     id: 'builders',
- *     label: 'Builders',
- *     icon: CubeIcon,
- *     color: 'primary',
- *     description: 'MEV builders bidding',
- *     stats: '43 builders bidded'
- *   }}
- *   status="active"
- *   showStats={true}
- * />
- * ```
+ * - Pending: Muted appearance
+ * - Active: Highlighted
+ * - Completed: Standard appearance
  */
 export function PhaseNode({ phase, status, showStats = true, onClick, className }: PhaseNodeProps): JSX.Element {
   const Icon = phase.icon;
-
-  // Map phase color to CSS variable
-  const getCSSVar = (colorName: string): string => {
-    const colorMap: Record<string, string> = {
-      primary: 'var(--color-primary)',
-      secondary: 'var(--color-secondary)',
-      accent: 'var(--color-accent)',
-      success: 'var(--color-success)',
-      warning: 'var(--color-warning)',
-      danger: 'var(--color-danger)',
-    };
-    return colorMap[colorName] || colorMap.primary;
-  };
-
-  const phaseColor = getCSSVar(phase.color);
+  const isSuccess = phase.color === 'success';
 
   return (
-    <div className={clsx('flex w-20 flex-col items-center justify-center gap-2', className)}>
-      {/* Circular icon container */}
+    <div className={clsx('flex flex-col items-center justify-start gap-2', className)}>
+      {/* Icon container */}
       <button
         type="button"
         onClick={onClick}
         disabled={!onClick}
         className={clsx(
-          'relative flex size-12 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-300',
+          'relative flex size-8 shrink-0 items-center justify-center rounded-md',
           // Pending state
-          status === 'pending' && [
-            'border-border bg-surface opacity-50',
-            onClick && 'cursor-not-allowed',
-            !onClick && 'cursor-default',
-          ],
+          status === 'pending' && ['bg-surface text-muted', !onClick && 'cursor-default'],
           // Active state
           status === 'active' && [
-            'animate-pulse border-foreground/20 ring-4',
-            onClick && 'cursor-pointer hover:scale-105',
+            isSuccess ? 'bg-success/10 text-success' : 'bg-primary/10 text-primary',
+            onClick && 'cursor-pointer',
             !onClick && 'cursor-default',
           ],
           // Completed state
           status === 'completed' && [
-            'border-foreground/10',
-            onClick && 'cursor-pointer hover:scale-105',
+            isSuccess ? 'bg-success/10 text-success' : 'bg-surface text-muted',
+            onClick && 'cursor-pointer',
             !onClick && 'cursor-default',
           ]
         )}
-        style={
-          status !== 'pending'
-            ? {
-                backgroundColor: phaseColor,
-                boxShadow: status === 'active' ? `0 0 0 4px ${phaseColor}33` : undefined,
-              }
-            : undefined
-        }
         title={phase.description}
         aria-label={`${phase.label}: ${status}`}
       >
-        <Icon
-          className={clsx(
-            'size-6 transition-colors duration-300',
-            status === 'pending' && 'text-muted',
-            status === 'active' && 'text-background',
-            status === 'completed' && 'text-background'
-          )}
-        />
+        <Icon className="size-5" />
       </button>
 
-      {/* Phase label, time, and stats */}
+      {/* Phase label and time */}
       <div className="flex flex-col items-center justify-start gap-0.5">
+        {/* Label - always rendered with fixed line height */}
         <span
           className={clsx(
-            'text-center font-medium transition-colors duration-300',
-            status === 'pending' && 'text-muted opacity-50',
+            'text-center text-[11px] leading-tight font-medium',
+            status === 'pending' && 'text-muted/50',
             status === 'active' && 'text-foreground',
-            status === 'completed' && 'text-foreground'
+            status === 'completed' && 'text-muted'
           )}
-          style={{ fontSize: '10px' }}
         >
           {phase.label}
         </span>
 
-        {/* Time badge - shows when phase occurred */}
-        {phase.id !== 'attesting' && (
-          <span
-            className={clsx(
-              'transition-colors duration-300',
-              status === 'pending' && 'text-muted opacity-50',
-              status === 'active' && 'text-foreground',
-              status === 'completed' && 'text-muted'
-            )}
-            style={{
-              fontSize: '11px',
-              ...(status === 'active' ? { color: phaseColor } : {}),
-            }}
-          >
-            {phase.timestamp !== undefined
-              ? phase.timestamp < 0
-                ? `${Math.abs(phase.timestamp / 1000).toFixed(1)}s early`
-                : `${(phase.timestamp / 1000).toFixed(1)}s`
-              : '—'}
-          </span>
-        )}
+        {/* Time badge - always rendered with fixed line height */}
+        <span
+          className={clsx(
+            'text-center font-mono text-[10px] leading-tight',
+            status === 'pending' && 'text-muted/50',
+            status === 'active' && (isSuccess ? 'text-success' : 'text-primary'),
+            status === 'completed' && (isSuccess ? 'text-success/70' : 'text-muted/70')
+          )}
+        >
+          {phase.id !== 'attesting' && phase.timestamp !== undefined
+            ? phase.timestamp < 0
+              ? `${Math.abs(phase.timestamp / 1000).toFixed(1)}s`
+              : `${(phase.timestamp / 1000).toFixed(1)}s`
+            : '\u00A0'}
+        </span>
 
-        {/* Stats - always reserve space to prevent height changes */}
+        {/* Stats - always rendered with fixed line height, hidden with opacity when empty */}
         <span
           className={clsx(
-            'transition-colors duration-300',
-            status === 'pending' && 'text-muted opacity-50',
-            status === 'active' && 'text-foreground',
-            status === 'completed' && 'text-muted',
-            // Reserve space even when empty
-            'min-h-[0.5rem]'
+            'text-center text-[9px] leading-tight',
+            status === 'pending' && 'text-muted/50',
+            status === 'active' && 'text-muted',
+            status === 'completed' && 'text-muted/70',
+            // Hide with opacity when no stats, but maintain layout space
+            !showStats || !phase.stats ? 'opacity-0' : 'opacity-100'
           )}
-          style={{
-            fontSize: '8px',
-            ...(status === 'active' ? { color: phaseColor } : {}),
-          }}
         >
           {showStats && phase.stats ? phase.stats : '\u00A0'}
         </span>
diff --git a/src/pages/ethereum/live/hooks/useSlotProgressData/useSlotProgressData.ts b/src/pages/ethereum/live/hooks/useSlotProgressData/useSlotProgressData.ts
@@ -18,8 +18,7 @@ import type { SlotProgressRawData, UseSlotProgressDataReturn } from './useSlotPr
  */
 export function useSlotProgressData(rawData: SlotProgressRawData): UseSlotProgressDataReturn {
   const phases = useMemo<PhaseData[]>(() => {
-    const { blockHead, blockProposer, blockMev, blockPropagation, attestations, committees, mevBidding, relayBids } =
-      rawData;
+    const { blockHead, blockProposer, blockPropagation, attestations, committees, mevBidding, relayBids } = rawData;
 
     // Calculate total expected validators from committee data
     const totalExpectedValidators = committees.reduce((sum, committee) => {
@@ -94,7 +93,7 @@ export function useSlotProgressData(rawData: SlotProgressRawData): UseSlotProgre
         color: 'primary',
         timestamp: firstBlockSeenTime,
         description: isMissed ? 'Block was never proposed' : 'Block proposed to network',
-        stats: blockMev?.builder_pubkey ? 'External' : firstBlockSeenTime !== undefined ? 'Local' : undefined,
+        stats: undefined,
       },
       // Phase 4: Attesting - starts 50ms after Proposing
       {
@@ -115,7 +114,7 @@ export function useSlotProgressData(rawData: SlotProgressRawData): UseSlotProgre
         id: 'accepted',
         label: 'Accepted',
         icon: LockClosedIcon,
-        color: 'primary',
+        color: acceptanceTime !== undefined ? 'success' : 'primary',
         timestamp: acceptanceTime,
         description: 'Block achieved acceptance',
         stats: acceptanceTime !== undefined ? `>66%` : undefined,
diff --git a/src/pages/ethereum/slots/hooks/useSlotProgressData/useSlotProgressData.ts b/src/pages/ethereum/slots/hooks/useSlotProgressData/useSlotProgressData.ts
@@ -96,7 +96,7 @@ export function useSlotProgressData(rawData: SlotProgressRawData): UseSlotProgre
         id: 'builders',
         label: 'Builders',
         icon: CubeIcon,
-        color: 'accent',
+        color: 'primary',
         timestamp: earliestBidTime,
         duration: buildersEndTime - earliestBidTime,
         description: 'Block builders bidding phase',
@@ -123,17 +123,14 @@ export function useSlotProgressData(rawData: SlotProgressRawData): UseSlotProgre
 
     // Phase 3: Proposing
     if (firstBlockSeenTime !== undefined) {
-      const builderPubkey = blockMev?.builder_pubkey;
-      const builderName = builderPubkey ? 'external builder' : 'local build';
-
       phasesList.push({
         id: 'proposing',
         label: 'Proposing',
         icon: UserIcon,
-        color: 'secondary',
+        color: 'primary',
         timestamp: firstBlockSeenTime,
         description: 'Block proposed to network',
-        stats: `Built via ${builderName}`,
+        stats: undefined,
         isCompleted: true,
       });
     }
@@ -147,7 +144,7 @@ export function useSlotProgressData(rawData: SlotProgressRawData): UseSlotProgre
         id: 'gossiping',
         label: 'Gossiping',
         icon: ChatBubbleBottomCenterTextIcon,
-        color: 'success',
+        color: 'primary',
         timestamp: firstBlockSeenTime,
         duration: gossipDuration,
         description: 'Block propagating to network',
