@cdr-kit/react/Components/TimeWindowBadge

<TimeWindowBadge>

Status badge for TimeWindowCondition-gated vaults: opens in 3d 4h, closes in 2h 15m, or closed. Ticks every second client-side, no extra RPC traffic after the first read.

import { TimeWindowBadge } from "@cdr-kit/react"

Live preview

cycles

vault #5101TimeWindow

closes in 59m 30scycles every 2.5s · in-component logic ticks every 1s in live

import { TimeWindowBadge } from "@cdr-kit/react";

<TimeWindowBadge uuid={5101} />

// Render-prop for custom presentation:
<TimeWindowBadge uuid={5101}>
{({ isOpen, opensInMs, closesInMs }) =>
  isOpen
    ? <span>open · closes in {Math.floor(closesInMs / 60_000)}m</span>
    : <span>opens in {Math.floor(opensInMs / 3_600_000)}h</span>
}
</TimeWindowBadge>

Props

Prop	Type	Default	Description
uuidrequired	number	—	TimeWindowCondition-gated vault uuid.
children	(state: TimeWindowState) => ReactNode	—	Optional render-prop. Receives { startTs, endTs, blockBased, isOpen, opensInMs, closesInMs, isLoading }.

Block-based windows

For windows configured with blockBased: true, the client-side opensInMs/closesInMs return 0 — block.number can't be ticked client-side cheaply. Render the raw block bounds from the state object instead.

← Previous

HeartbeatTimer

MultiSigApprovalTracker