OperationTimeline

The operation spine — every step, the actor being waited on, and the evidence gathered, for any operation the kit models.

import { OperationTimeline } from '@flarekit-dev/react-ui'

The hardest design problem in this product is time. A mint spans minutes across three actors, and any of them can be late. So a wait is never a spinner: it states the stage, the expected end, the actor being waited on, and the safe action, in that order.

Live#

The preview below runs the real mock state machine. Changing the scenario or the state walks the trace the machine actually produced — the states listed are the ones that exist, so nothing here can show a state the operation never reached.

mock kit

State

Operation is ready.

Send the XRP paymentyour wallet
Core vaultrMOCKC…dgerMemo0x46425052…adbeef
Confirm on the XRP Ledgerthe XRP Ledger
Prove the payment through the Flare Data Connectorthe Flare Data Connector
Execute the mintingthe executor
Credit the FAssetFlare
Recipient0xDeaD…beeF

Nothing for you to do yet

This operation is progressing on its own. Nothing has to be resubmitted, and nothing is at risk while it completes.

import { createMockKit } from '@flarekit-dev/core'
import { OperationTimeline } from '@flarekit-dev/react-ui'
import '@flarekit-dev/react-ui/styles.css'

const kit = createMockKit({ seed: 'docs', scenario: 'happy' })
const trace = kit.trace(
  kit.start({
    amountXrp: '25.000000',
    recipient: '0xDeaD…beEF',
    xrplAccount: 'rPT1Sjq…bpAYe',
  }),
)

export function Mint() {
  return <OperationTimeline operation={trace[2]} />
}

Usage#

OperationTimeline renders a record it is handed. It holds no state and fetches nothing, so the same component serves a mint, a redemption and an attestation rather than three spines that drift apart.

import { OperationTimeline } from '@flarekit-dev/react-ui'
import '@flarekit-dev/react-ui/styles.css'

export function Mint({ record }) {
  return <OperationTimeline operation={record} onAction={handleAction} />
}

Props#

Prop	Type	Default	Description
operationrequired	OperationRecord	—	The record to render. The spine reads state, steps, evidence and awaiting — all on the base record, so every capability shares one component.
stepEvidence	Record<string, readonly string[]>	DIRECT_MINT_STEP_EVIDENCE	Which evidence sits beside which step. A capability with different steps passes its own, rather than getting a spine with no identifiers on it.
onAction	(actionId: string) => void	—	Called when the reader takes a recovery action. Omit it and the recovery panel renders read-only.
theme	'light' \| 'dark'	—	Overrides the inherited theme. Normally left unset — the widget follows data-theme.
className	string	—	Extra class on the outer element, so a host layout can place the spine.

What it will not do#

It will not render submitted as succeeded, and it will not render an unknown outcome as failed. If an operation's result is not yet known, the spine says the outcome is not confirmed yet and names who is being waited on.