DeFiLive Preview

Bridge Widget

Cross-chain bridge UI with from/to network selectors, token picker, amount input, and swap button. Pure UI — parent controls all state via props.

bridgecross-chaintransferl2

Bridge

From

To

Token

Amount

4 networks supported

API Reference

Prop	Type	Default	Description
`networks*`	`BridgeNetwork[]`	`—`	Available networks (id, name, icon?, color?)
`tokens*`	`BridgeToken[]`	`—`	Available tokens (symbol, name, icon?, balance?)
`fromNetwork`	`BridgeNetwork`	`—`	Currently selected source network
`toNetwork`	`BridgeNetwork`	`—`	Currently selected destination network
`selectedToken`	`BridgeToken`	`—`	Currently selected token
`onBridge`	`(params: { from, to, token, amount }) => void`	`—`	Called when user clicks the bridge button
`onFromNetworkChange`	`(network: BridgeNetwork) => void`	`—`	Called when source network changes
`onToNetworkChange`	`(network: BridgeNetwork) => void`	`—`	Called when destination network changes
`onTokenChange`	`(token: BridgeToken) => void`	`—`	Called when token changes
`loading`	`boolean`	`false`	Show loading state on the bridge button
`className`	`string`	`—`	Additional CSS classes