ActivityTable

ActivityTable lists the operations you have started and keeps their underlying events reachable. A mint's ledger payment, its attestation round and its Flare execution are three identifiers on three systems, so they render as three groups of chips — never as one "transaction hash" column, because for this operation there is no such thing.

Live#

The preview renders the gallery's own cases — activity feeds built from the mock's own operation records, never re-authored here. The state switcher walks the cases the surface was verified against, so nothing here shows a state the table never actually reaches.

import { createMockKit } from '@flarekit-dev/core'
import { FlareProvider, useActivity } from '@flarekit-dev/react'
import { ActivityTable } from '@flarekit-dev/react-ui'
import '@flarekit-dev/react-ui/styles.css'

const kit = createMockKit({ seed: 'demo' })

function History() {
  const { feed, entries, exportError, exportJson } = useActivity()

  return (
    <ActivityTable
      feed={feed}
      entries={entries}
      exportError={exportError}
      onExport={() => exportJson()}
    />
  )
}

export function Activity() {
  return (
    <FlareProvider kit={kit}>
      <History />
    </FlareProvider>
  )
}

Usage#

Mount it under a FlareProvider. useActivity reads the operation registry, so the feed, the filtered view and the export all come from one source.

import { createMockKit } from '@flarekit-dev/core'
import { FlareProvider, useActivity } from '@flarekit-dev/react'
import { ActivityTable } from '@flarekit-dev/react-ui'
import '@flarekit-dev/react-ui/styles.css'

function History() {
  const { feed, entries, exportError, exportJson } = useActivity()

  return (
    <ActivityTable
      feed={feed}
      entries={entries}
      exportError={exportError}
      onExport={() => exportJson()}
    />
  )
}

export function Activity() {
  return (
    <FlareProvider kit={createMockKit({ seed: 'demo' })}>
      <History />
    </FlareProvider>
  )
}

Props#

What it renders#

A four-column table — Operation, State, Underlying events, Updated. The state cell is a chip carrying a glyph and a word as well as a colour, so Submitted reads as submitted and nothing else. The events cell groups evidence under XRP Ledger, Data Connector and Flare, each chip linking out to the system that actually holds the record; an operation with nothing recorded yet says so.

Around the table sit the honest edges: a backfilling notice while older operations are still being reconciled, the feed's own coverage reason whenever coverage is incomplete, and the export refusal when one happens.

States#

Every state in the switcher above is imported from packages/react-ui/gallery/, one source of truth for both the gallery and these docs:

• loading — the registry is still being read. Skeleton rows, no claims.
• empty — the feed arrived and holds nothing: you have not started an operation on this device.
• ready — operations with their evidence, grouped by the system that holds it.
• backfilling — history is still being reconciled, and the list will grow. Empty here means "nothing found yet", not "nothing exists".
• partial coverage — entries is narrower than the feed, and the table says which limit applies rather than passing the narrow view off as everything.
• export error — the export was refused, the reason is shown, and no file was written.

Mock to live#

ActivityTable renders whatever useActivity derived from the operation registry on the provider, so moving from the mock to a live network swaps the kit, not the screen. Addresses come from @flarekit-dev/contracts; network is configuration.

// From this…
<FlareProvider kit={createMockKit({ seed: 'demo' })}>

// …to this. The component does not change.
<FlareProvider kit={createFlareKit({ network: 'coston2', signer })}>

What it will not do#

It will not collapse an operation's three systems into one identifier, and it will not describe Submitted as done. When an outcome is not yet confirmed it stays unconfirmed rather than being called failed. An export that cannot be produced in full is refused outright — you get the reason, not a partial file.