MintFXRP

The mint composer — quote FXRP against an XRPL payment, with every term on screen and a refusal below the protocol minimum that prevents an unrecoverable loss.

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

MintFXRP turns an XRPL payment into FXRP. It quotes through useDirectMint, shows the whole quote before you sign, and — this is the point — will not let you submit below the protocol minimum, where a payment mints nothing and cannot be recovered.

Live#

The preview runs the gallery's own states against createMockKit(). The state switcher walks the cases the surface was verified against, so nothing here shows a state the composer never actually reaches.

mock kit

State

Mint FMockXRP

XRP on the XRP Ledger becomes an FAsset on Flare

mock kit

You send

XRP

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

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

export function Mint() {
  return (
    <FlareProvider kit={kit}>
      <MintFXRP
        recipient="0xDeaD…beEF"
        xrplAccount="rPT1Sjq…bpAYe"
        onSubmit={(amountXrp) => console.log('mint', amountXrp)}
      />
    </FlareProvider>
  )
}

Usage#

Mount it under a FlareProvider and hand it the recipient and the XRPL account. It quotes on its own; you handle onSubmit.

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

export function Mint() {
  return (
    <FlareProvider kit={createMockKit({ seed: 'demo' })}>
      <MintFXRP
        recipient="0xDeaD…beEF"
        xrplAccount="rPT1Sjq…bpAYe"
        onSubmit={(amountXrp) => console.log('mint', amountXrp)}
      />
    </FlareProvider>
  )
}

Props#

Prop	Type	Default	Description
recipientrequired	string	—	The EVM address that receives the FXRP.
xrplAccountrequired	string	—	The XRPL account the payment is sent from.
defaultAmountXrp	string	—	Seeds the amount field. Uncontrolled — the initial value, not a binding, so typing still owns the field. Without it, only loading and the empty form are reachable from props, which is how the below-minimum refusal once shipped never rendered in a browser.
xrplBalance	Amount	—	The payer's XRPL balance, when the host knows it. Drives the exact-shortfall message on an over-balance amount.
executor	string	—	The executor to name once a quote exists. Shown only when there is a quote to attach it to.
now	number	—	The clock, for the quote's own expiry. Omit and expiry is simply not evaluated — a surface that guessed the time would be inventing one.
loading	boolean	—	True while the host is still fetching protocol state.
onSubmit	(amountXrp: string) => void	—	Called with the entered amount when the reader submits a quoted, in-window mint. Omit it and the composer is 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 composer.

What it renders#

A single panel that owns the amount field, holds the quote it fetched, and calls onSubmit with the amount string. It signs nothing and broadcasts nothing — submitting is the host's job — so the same composer drops into a page, a modal or an embed without carrying a transaction layer with it.

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 — protocol state is still being fetched.
empty — no amount entered; the form, no quote.
ready — quoted, with every term on screen.
below minimum — the refusal. Nothing to sign, because a payment this small mints nothing and cannot be recovered.
insufficient balance — states the shortfall exactly against xrplBalance.
large-mint delay — the wait is shown, and why.
executor named — the executor appears, because there is now a quote.
quote expired — terms the protocol will no longer honour; the mint is blocked until you re-quote.

Mock to live#

MintFXRP reads everything through the kit 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 offer a signable mint below the protocol minimum, and it will not present an expired quote as live. If it cannot quote, it says so and stays read-only rather than inviting a submit it knows the protocol will refuse.