VaultCatalogue

VaultCatalogue lists the vaults configured for the active network: which protocol, which deposit asset, whether the share is the vault itself or a separate LP token, the live exchange rate, the live withdrawal fee per route, and the exits the vault actually offers. Every value comes from a read, carries its provenance, and renders — when it is unknown.

Live#

The preview runs the gallery's own rows, built from the M7 Coston2 reads. The state switcher walks the cases the surface was verified against, so nothing here shows a row shape the catalogue never actually reached.

import { vaultsFor } from '@flarekit-dev/core'
import { VaultCatalogue, type VaultReadsView } from '@flarekit-dev/react-ui'
import '@flarekit-dev/react-ui/styles.css'

export function Vaults({
  reads,
  now,
}: {
  reads: Record<string, VaultReadsView | undefined>
  now: number
}) {
  const rows = vaultsFor('coston2').map((config) => ({
    config,
    // Undefined reads render "couldn't read this vault", never a zero.
    ...(reads[config.key] ? { reads: reads[config.key]! } : {}),
  }))

  return <VaultCatalogue rows={rows} now={now} networkLabel="Coston2" />
}

Usage#

Hand it the configured vaults and whatever reads you have. A vault with no reads is a row that says so — you do not have to hold the list back until every read lands.

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

export function Vaults({ reads, now }) {
  const rows = vaultsFor('coston2').map((config) => ({
    config,
    ...(reads[config.key] ? { reads: reads[config.key] } : {}),
  }))

  return <VaultCatalogue rows={rows} now={now} networkLabel="Coston2" />
}

Props#

What it renders#

A panel of vault rows. Each row leads with the protocol and its share model — Self-share vault with the vault's own token, or Separate LP token with the LP symbol — then the deposit asset, the exchange rate as assets per share, the withdrawal fee per route, the exit routes, and the caps that exist: Firelight's global deposit headroom, Upshift's withdrawal cap. It fetches nothing itself, so the same catalogue serves a page, a modal or an embed.

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:

• list — both vaults, each with its share model, live rate, live fees and exit-route chips.
• vault paused — a first-class state, not a user error. Deposits and reads are unaffected and the row says so; the withdraw action is unavailable until the vault resumes.
• withdraw unverified — the vault's reads all render, but its withdraw action is a declared-unbuilt affordance with the reason stated. This is the withdrawVerified: false flag: the path has not been driven live on this network, which is not proven, not broken.
• read unavailable — the reads could not be fetched. The row says it could not read the vault and that this is not a zero, because a confident 0 here would be an invented balance.

Mock to live#

The catalogue is prop-driven, so moving from the mock to a live network changes where the rows' reads come from, not the screen. Vault addresses come from @flarekit-dev/contracts; network is configuration.

// From this…
const adapter = createMockVaultAdapter('upshift-fxrp')

// …to this. The component does not change.
const adapter = makeVaultAdapter(publicClient, vaultByKey('coston2', 'upshift-fxrp')!)

What it will not do#

It will not render an unread value as 0, and it will not offer a withdraw action for a vault whose withdraw path is unverified on this network — it shows the affordance disabled with the reason, rather than a plan that could sign an approval and then revert. A paused vault is stated as paused, never as an error you caused.