shadcn.io is not affiliated with official shadcn/ui
Bridge Web3 Block for Svelte
A cross-network transfer form: two networks and an amount, three typed routes shown as cards with fee, amount received and arrival time, a Cheapest and Fastest re-order, and a three-step tracker advanced by a ghost button.
Installation
Overview
Compare ways to move ETH between networks before committing to one, with this bridge panel for Svelte with Ark UI. It's the transfer screen of Isthmus, a cross-network transfer tool, and fees and times are samples, not market data. Two Native Selects pick the network you send from and the one you send to (the same one on both says Choose two different networks), an Input takes the amount, and a drawn strip names the pair with a two-letter tile for each network. Three typed routes for the pair, a fast relayer, a standard route and the canonical bridge, are radio cards that show the fee, what you receive after it, how long it takes and when it arrives from a fixed clock. A Cheapest and Fastest pair of pills re-orders the cards and puts the word on the top one. Bridge, the one Shine Button, starts a three-step tracker (Deposit, Relay, Receive) that a ghost button advances one step at a time, and the status line says no funds moved. For wallets and apps that move value between networks.
FAQ
How are the fees and times set?
Each route has a percent cut and a multiplier on the destination network's typed delivery cost, so the fee is amount x cut + delivery x multiplier in ETH, and what you receive is the amount minus it. Times are typed per route: 2 minutes for the relayer, 12 or 20 for the standard route, and the canonical bridge takes 15 minutes into a layer 2 and 7 days out of one. Arrivals count from a fixed clock, 14:20 UTC on 12 October, not from now.
What do Cheapest and Fastest do?
They sort the same three routes by fee or by time and put the word on the card at the top, and they choose that card for you. You can still pick another card; the choice is kept until you change the sort.
What does the tracker do?
Bridge starts it: Deposit is in progress, and each press of Simulate next step moves one step along until Receive is done and the panel says what arrived. While it runs the form is locked so the numbers can't change under it, and Start over unlocks it. Nothing waits on a network and nothing ticks by itself.
What stays local, and how do I wire a real bridge?
All of it. The networks, fees, balance and times are typed constants and no wallet or network is contacted. In your app get quotes for the pair from your bridge provider, send the deposit from the connected wallet, then follow the transfer by its hash and replace the button with a status read from the destination. Always show the real fee and arrival your provider quotes.
What does the form refuse?
The same network on both sides, an amount of zero or less, more than the 3.5 ETH in the demo wallet and anything under the 0.005 ETH minimum. The reason shows under the fields and in the status line, and Bridge stays quiet until it is fixed.
Is it accessible, and how does it look on a phone?
Yes. Every field has a label, the route cards and the sort are native radio groups, the tracker is an ordered list that says each step's state in words, and one polite status message reports each change. On a phone the cards and the steps stack and the Bridge button is pinned to the foot.