shadcn.io is not affiliated with official shadcn/ui
Chain Selector Web3 Block for Svelte
A network switcher palette shown open over a Send funds form: eight networks in Mainnets, Layer 2s and Test networks with typed gas and block time, a check on the current one, number shortcuts and a search that names an empty result.
Installation
Overview
Let people change the network a transfer goes out on, without leaving the form, with this chain selector for Svelte with Ark UI. It's the network switcher of Netfold, a multi-network wallet, and the networks, gas prices and block times are typed samples. The page is a Send funds screen drawn under a soft scrim inside a hairline frame with a plus mark on each corner, and its header holds an outline button that shows the current network's two-letter tile and name. The open palette is the catalog Command: a search field and eight networks in three groups (Mainnets, Layer 2s and Test networks), each row with its tile, the name with the letters you typed marked, its gas price and block time, a check on the current network and an Alt and number key. An empty search names what you typed and what to try. Choosing a row, or pressing its number while the palette is open, switches the network chip and the status line says so. A palette has no primary button; Enter chooses. For preview the palette is drawn open in place when the page loads, and the header button, or Ctrl or ⌘ K while focus is in the block, opens the real Command Dialog with the same rows and the same query. For wallets, bridges and any app with a network switcher.
FAQ
Why is the palette already open, and what do I keep?
So you can see it without a click. On load the palette is the Command drawn inline over the form, in a plain shell that traps and focuses nothing. The header button opens the real CommandDialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same Palette and share the block's state, so what you typed in the copy is in the real one. In your app keep the CommandDialog and drop the copy: the "in-place" state, the scrim and the Escape and blur effects.
What stays local, and how do I wire a real switch?
All of it. The networks, gas and block times are typed constants (PAGES) and choosing one changes only the chip and the status line: no wallet is asked and no network is contacted. In your app call your wallet's switch-network request when a row is chosen, wait for the answer before changing the chip, and read gas and block time from your node or provider.
How do the shortcuts work?
Alt and a digit from 1 to 8 choose that network while focus is inside the palette (Option on Apple systems, shown as the cap). The key is read from the physical key, so Option's characters don't matter. Ctrl or ⌘ K opens the real palette only while focus is inside this block, never on the whole page, so the site's own search keeps the key.
What does the search match?
The name and a few hidden words, ignoring case and accents: typing test finds the three test networks, l2 the layer 2s. The groups stay in place and empty ones disappear, the count in the foot is spoken a moment after typing stops, and an empty result says what was typed.