Bridge Status
A cross-chain transfer as its two legs. Not one progress bar: the legs fail independently and the second cannot begin until the first is final, so a single bar implies a state that does not exist.
src/components/ui/bridge-status.tsxAbout
From the component's own source, where it was written.
A cross-chain transfer, shown as its two legs.
Two legs, not one progress bar, because they fail independently and the second cannot begin until the first is final. A single bar implies a transfer that can be at 60% — it cannot; it is either waiting on source finality or waiting on destination execution, and those have very different remedies.
The waiting state names what is being waited on. "Pending" for twenty minutes with no explanation is the most common bridge support ticket; "waiting for 64 source confirmations" is the same wait with the anxiety removed.
Install
npx astralyx-ui add bridge-status
Usage
import { BridgeStatus } from '@/components/ui/bridge-status'
<BridgeStatus source={source} destination={destination} amount="0.5 ETH" />Composer
Change the props and the source below follows.
Source
12 / 64 confirmations
Destination
Waiting for source finality
Started
<BridgeStatus source={source} destination={destination} amount="0.5 ETH" />Examples
Legs
<BridgeStatus source={source} destination={destination} amount="0.5 ETH" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
BridgeStatus
A cross-chain transfer, shown as its two legs.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| source | BridgeLeg | required | { chain, state, detail?, progress?, href? }. |
| destination | BridgeLeg | required | { chain, state, detail?, progress?, href? }. |
| amount | ReactNode | — | — |
| startedAt | Date | — | — |
| now | Date | — | — |
| estimate | ReactNode | — | Expected total time. |
| error | ReactNode | — | — |
Types
BridgeLeg
| Field | Type | Description |
|---|---|---|
| chain | ReactNode | — |
| state | 'pending' | 'active' | 'done' | 'failed' | — |
| detail? | ReactNode | Names what is being waited on. "Pending" for twenty minutes is the most common bridge support ticket; "waiting for 64 confirmations" is the same wait without the anxiety. |
| progress? | number | — |
| href? | string | — |