New: EpochProgress component (src/components/ui/epochProgress.tsx)

  Generic progress bar that accepts a period(now) callback, recomputing boundaries on every 1s tick so it auto-restarts when a period ends. Displays metadata pills, a thin fill
  bar, percentage, and human-readable remaining time.

  Deleted files

  - countdown.tsx + countdown.css — Circular countdown component replaced by EpochProgress
  - userDelegations.tsx — Removed (was already unused; its import was also removed from delegateLocal.tsx)

  fsp-stats.tsx

  - Added two EpochProgress bars at the top: reward epoch progress (FireBrick) and current round progress (green)
  - StatsChart now takes a height prop directly instead of relying on a wrapper <div style={{ height }}>, fixing the recharts -1 width/height console error
  - Chart formatY changed from Formatter.number(100 * v) to Formatter.percent(v)

  Validator statistics (Flare + Avalanche)

  - Both statistics.tsx files: replaced <Countdown> with <EpochProgress>, showing a validator expiration progress bar
  - Both types.ts files: countdown type changed from { endTime: Date } to { startTimeMs: number, endTimeMs: number }
  - Both data.tsx files: now provide startTimeMs/endTimeMs in ms; dates formatted with new Formatter.dateHuman instead of Formatter.date

  rewardClaims.tsx

  - Simplified chainToTransactionUrl and chainToAddressUrl for Flare — removed protocol-based FSP/Validator branching, always uses EVM explorer URLs
  - Removed unused Protocol import

  formatter.ts

  - Added dateHuman(unix) — formats as "Apr 1, 2026, 18:00"
  - Added duration(ms) — formats as "1d 5h 23m 12s"

  main.jsx

  - Removed countdown.css import

Author: kuco23

src/assets/css/countdown.css

@@ -1,19 +1,23 @@
+import { useCallback } from "react"
 import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip } from "recharts"
 import { Formatter } from "~/utils/misc/formatter"
 import MeterBar from "~/components/ui/meterBar"
+import EpochProgress from "~/components/ui/epochProgress"
 import { Chain } from "~/enums"
 import { chainToSymbol } from "~/utils/misc/translations"
+import { FspEpoch, FTSO_CHAIN_CONFIG } from "~/utils/misc/flare"
 import type { FspStatisticsDto } from "~/backendApi"
 
 
 const chartMargin = { top: 20, right: 20, bottom: 5, left: 20 }
 
-const StatsChart = ({ data, keys, formatY }: {
+const StatsChart = ({ data, keys, formatY, height = 200 }: {
   data: Record<string, number>[],
   keys: string[],
-  formatY: (v: number) => string
+  formatY: (v: number) => string,
+  height?: number
 }) => (
-  <ResponsiveContainer width="100%" height="100%">
+  <ResponsiveContainer width="100%" height={height}>
     <LineChart data={data} margin={chartMargin}>
       <XAxis dataKey="x" tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 12 }} tickLine={false} axisLine={false} />
       <YAxis hide domain={['auto', 'auto']} />
@@ -43,6 +47,32 @@ const FspStatsComponent = ({ stats, chain }: { stats: FspStatisticsDto, chain: C
   const symbol = chainToSymbol(chain)
   const lastDelegationEpoch = Math.max(...stats.delegations.result.map(x => x.rewardEpoch))
 
+  const cfg = FTSO_CHAIN_CONFIG[chain as keyof typeof FTSO_CHAIN_CONFIG]
+
+  const epochPeriod = useCallback((now: number) => {
+    const round = FspEpoch.timestampToRound(chain, now)
+    const epoch = FspEpoch.roundToRewardEpoch(chain, round)
+    const epochStart = epoch * cfg.rewardEpochDurationRounds
+    return {
+      startMs: FspEpoch.roundToTimestamp(chain, epochStart),
+      endMs: FspEpoch.roundToTimestamp(chain, epochStart + cfg.rewardEpochDurationRounds),
+      metadata: [
+        { label: "Reward Epoch", value: epoch },
+        { label: "Round", value: `${round - epochStart} / ${cfg.rewardEpochDurationRounds}` },
+      ],
+    }
+  }, [chain, cfg])
+
+  const roundPeriod = useCallback((now: number) => {
+    const round = FspEpoch.timestampToRound(chain, now)
+    const startMs = FspEpoch.roundToTimestamp(chain, round)
+    return {
+      startMs,
+      endMs: startMs + cfg.roundDurationMs,
+      metadata: [{ label: "Current Round", value: round }],
+    }
+  }, [chain, cfg])
+
   const d1 = stats.submissions.result.map(({ rewardEpoch, primary, secondary }) => ({
     x: rewardEpoch, 'Primary Success Rate': primary, 'Secondary Success Rate': secondary
   }))
@@ -59,7 +89,14 @@ const FspStatsComponent = ({ stats, chain }: { stats: FspStatisticsDto, chain: C
 
   const component = <>
     <div className='single-project-page-right wow fadeInUp delay-0-4s mt-30'>
-      <h2>Provider Statistics</h2>
+      <div className="row mb-30">
+        <div className="col-lg-6">
+          <EpochProgress period={epochPeriod} color="FireBrick" />
+        </div>
+        <div className="col-lg-6">
+          <EpochProgress period={roundPeriod} color="#76B768" />
+        </div>
+      </div>
       <p>
         We value transparency, and stream a part of our monitoring to this site,
         so you can see live data of our provider's performance for the current <i>reward epoch</i> {last.rewardEpoch}.
@@ -86,9 +123,7 @@ const FspStatsComponent = ({ stats, chain }: { stats: FspStatisticsDto, chain: C
           success. Each <i>reward epoch</i> is a sequence of 3360 rounds (3.5 days), after which each provider's results are evaluated and the provider,
           along with its delegators, rewarded accordingly.
         </p>
-        <div style={{ height: 250 }}>
-          <StatsChart data={d1} keys={['Primary Success Rate', 'Secondary Success Rate']} formatY={v => Formatter.number(100 * v)} />
-        </div>
+        <StatsChart data={d1} keys={['Primary Success Rate', 'Secondary Success Rate']} formatY={v => Formatter.percent(v)} height={250} />
       </div>
 
       <div className="row mt-40">
@@ -100,9 +135,7 @@ const FspStatsComponent = ({ stats, chain }: { stats: FspStatisticsDto, chain: C
           In the graphs below we also append the current state of our delegations as an approximation
           for the provider's weight in the following epoch {lastDelegationEpoch}.
         </p>
-        <div style={{ height: 200 }}>
-          <StatsChart data={d2} keys={[`${symbol} Delegated`]} formatY={v => Formatter.number(v)} />
-        </div>
+        <StatsChart data={d2} keys={[`${symbol} Delegated`]} formatY={v => Formatter.number(v)} />
       </div>
 
       <div className="row mt-40">
@@ -112,9 +145,7 @@ const FspStatsComponent = ({ stats, chain }: { stats: FspStatisticsDto, chain: C
           provider's performance and delegation weight during the vote power block.
           Note that due to protocol's reward capping, high delegation volume can result in lower APY.
         </p>
-        <div style={{ height: 200 }}>
-          <StatsChart data={d4} keys={['APY']} formatY={v => Formatter.number(100 * v, 3)} />
-        </div>
+        <StatsChart data={d4} keys={['APY']} formatY={v => Formatter.percent(v)} />
       </div>
 
     </div>

src/components/pages/fsp-stats.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from "react"
+import { Formatter } from "~/utils/misc/formatter"
+
+type MetadataItem = { label: string; value: string | number }
+
+export type EpochPeriod = {
+  startMs: number
+  endMs: number
+  metadata: MetadataItem[]
+}
+
+type Props = {
+  /** Compute the current period boundaries and metadata from a timestamp */
+  period: (now: number) => EpochPeriod
+  /** Optional accent color for the fill (default: white) */
+  color?: string
+}
+
+const EpochProgress = ({ period, color = "white" }: Props) => {
+  const [now, setNow] = useState(Date.now)
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    return () => clearInterval(id)
+  }, [])
+
+  const { startMs, endMs, metadata } = period(now)
+  const total = endMs - startMs
+  const elapsed = Math.min(Math.max(now - startMs, 0), total)
+  const progress = total > 0 ? (elapsed / total) * 100 : 0
+  const remaining = Math.max(endMs - now, 0)
+
+  return (
+    <div style={styles.wrapper}>
+      {metadata.length > 0 && (
+        <div style={styles.metaRow}>
+          {metadata.map((m) => (
+            <span key={m.label} style={styles.pill}>
+              <span style={styles.pillLabel}>{m.label}</span>
+              <span style={styles.pillValue}>{m.value}</span>
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div style={styles.barOuter}>
+        <div
+          style={{
+            ...styles.barFill,
+            width: `${progress}%`,
+            background: color,
+          }}
+        />
+      </div>
+
+      <div style={styles.footer}>
+        <span style={styles.footerText}>{progress.toFixed(1)}%</span>
+        <span style={styles.footerText}>{Formatter.duration(remaining)} remaining</span>
+      </div>
+    </div>
+  )
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  wrapper: {
+    width: "100%",
+  },
+  metaRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 8,
+    marginBottom: 10.5,
+  },
+  pill: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    background: "rgba(255,255,255,0.06)",
+    borderRadius: 6,
+    padding: "4px 10px",
+    fontSize: 13,
+  },
+  pillLabel: {
+    color: "rgba(255,255,255,0.45)",
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.04em",
+    fontWeight: 500,
+  },
+  pillValue: {
+    color: "rgba(255,255,255,0.9)",
+    fontVariantNumeric: "tabular-nums",
+    fontWeight: 600,
+  },
+  barOuter: {
+    width: "100%",
+    height: 6,
+    borderRadius: 3,
+    background: "rgba(255,255,255,0.08)",
+    overflow: "hidden",
+  },
+  barFill: {
+    height: "100%",
+    borderRadius: 3,
+    transition: "width 1s linear",
+  },
+  footer: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: 6,
+    fontSize: 12,
+    color: "rgba(255,255,255,0.5)",
+    fontVariantNumeric: "tabular-nums",
+  },
+  footerText: {},
+}
+
+export default EpochProgress