DelegationCard

DelegationCard is the whole FTSO participation flow in one panel: the wrap leg between the native token and WNat, up to two provider rows with their shares in bips, and the position the last read observed. It plans through useDelegation and signs nothing itself.

Live#

The preview runs the gallery's own states, built from the delegation round trip observed on Coston2 on 2026-08-12. The state switcher walks the cases the surface was verified against, so nothing here shows a state the composer never actually reaches.

import { useDelegation } from '@flarekit-dev/react'
import { DelegationCard } from '@flarekit-dev/react-ui'
import { createMockDelegationAdapter } from '@flarekit-dev/core'
import '@flarekit-dev/react-ui/styles.css'

const adapter = createMockDelegationAdapter()

export function Delegate({ account, nativeToken, wrappedToken }) {
  const [providers, setProviders] = useState([{ to: '', bips: 10000 }])
  const { position, operation, buildPlan, submit } = useDelegation({
    account,
    adapter,
    operation: undefined,
    reconcile: (owner) => adapter.read(owner),
  })
  const planResult = buildPlan({ kind: 'delegate', targets: providers })

  return (
    <DelegationCard
      position={position}
      operation={operation}
      planResult={planResult}
      providers={providers}
      nativeToken={nativeToken}
      wrappedToken={wrappedToken}
      networkLabel="Coston2"
      onProviderChange={(index, patch) =>
        setProviders((rows) => rows.map((row, n) => (n === index ? { ...row, ...patch } : row)))
      }
      onSubmit={() => planResult?.kind === 'plan' && submit(planResult.plan)}
    />
  )
}

Usage#

Drive it from useDelegation: the hook's position is the state panel, its buildPlan is the refusal, and its submit hands the plan to your own wallet. nativeToken and wrappedToken are DexTokens — the WNat one comes from @flarekit-dev/contracts (dexFor(chainId).tokens.WNAT), never a literal in your screen.

import { useDelegation } from '@flarekit-dev/react'
import { DelegationCard } from '@flarekit-dev/react-ui'
import { createMockDelegationAdapter } from '@flarekit-dev/core'
import '@flarekit-dev/react-ui/styles.css'

const adapter = createMockDelegationAdapter()

export function Delegate({ account, nativeToken, wrappedToken }) {
  const [providers, setProviders] = useState([{ to: '', bips: 10000 }])
  const { position, operation, buildPlan, submit } = useDelegation({
    account,
    adapter,
    operation: undefined,
    reconcile: (owner) => adapter.read(owner),
  })
  const planResult = buildPlan({ kind: 'delegate', targets: providers })

  return (
    <DelegationCard
      position={position}
      operation={operation}
      planResult={planResult}
      providers={providers}
      nativeToken={nativeToken}
      wrappedToken={wrappedToken}
      networkLabel="Coston2"
      onProviderChange={(index, patch) =>
        setProviders((rows) => rows.map((row, n) => (n === index ? { ...row, ...patch } : row)))
      }
      onSubmit={() => planResult?.kind === 'plan' && submit(planResult.plan)}
    />
  )
}

Props#

What it renders#

One panel holding four things: the wrap/unwrap leg, the observed position (wrapped balance, vote power, and one row per delegate carrying its bips and percentage), the provider rows with the account's current on-chain delegation mode, and — once an operation is in flight — the shared OperationTimeline spine. Every exact value renders in the mono face carrying its asset at full precision.

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:

• compose — the real observed position: 5.000000000000000000 WC2FLR delegated 10000 bips (100%) to one provider, mode PERCENTAGE.
• no-balance — a real observed-empty holding: nothing wrapped, no delegates. A read that landed and returned nothing.
• needs-wrap — a delegate is being composed with no wrapped balance behind it. Vote power comes from WNat, so the wrap comes first.
• wrapping — the wrap call is in flight.
• delegating — the delegate call is in flight.
• submitted — broadcast, with the transaction hash as evidence. The delegatesOf read is still pending, so this is not success.
• awaiting — waiting for Flare to record the delegation.
• succeeded — reached only once delegatesOf reflects the target.
• unavailable — the last read did not land. Every value renders —: the position is unknown, not zero, and this is never collapsed into no-balance.
• too-many-delegates — the two-provider cap, refused before a call is built.
• bips-over-100 — the shares sum past 10000 bips, refused before a call is built.
• mode-conflict — the account is already in the other delegation mode, so the card states the delegation style is fixed for the account rather than submitting a call the chain ignores — delegationModeOf never resets, not even after undelegating.
• not-verified — the delegation path is declared unverified on this build and the kit will not sign against it.

Mock to live#

The card is prop-driven, so moving from the mock to a live network swaps the adapter behind useDelegation, not the screen. The WNat address comes from @flarekit-dev/contracts; network is configuration.

// From this…
const adapter = createMockDelegationAdapter()

// …to this. The component does not change.
const adapter = makeDelegationAdapter(publicClient, delegationFor('coston2'))

What it will not do#

It will not render an unavailable read as zero delegation, and it will not submit a delegate with no provider filled in. It will not offer a partial unwrap, because the reconciler cannot confirm one. And it will not switch you between percentage and amount delegation behind your back — the two are exclusive on chain and the choice never resets, so a conflict says the style is fixed for this account instead of quietly doing nothing.