Multi chain swap

Block

Swap one asset for another across networks, with a quote.

Installs components/ui/multi-chain-swap.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/multi-chain-swap.json

You pay

Amount of ETH

You receive

0.0

Rate and costs

Network and service fee: —
Route: Bridge · about 4 min
Slippage
Minimum received: —

Estimates only, based on the prices supplied. Sample interface for demonstration.

When to use #

Use it for

Showing a swap with fees and route.

Skip it when

The user hasn't checked the quote.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/multi-chain-swap.json

Adds its 10 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { MultiChainSwap } from "@/components/ui/multi-chain-swap"

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export function MultiChainSwapDemo() {
  return (
    <MultiChainSwap
            chains={[{ id: "eth", name: "Ethereum", minutes: 4 }, { id: "arb", name: "Arbitrum", minutes: 2 }, { id: "base", name: "Base", minutes: 2 }]}
            tokens={[
              { symbol: "ETH", name: "Ether", price: 3120, balance: { eth: 1.8, arb: 0.4, base: 0 } },
              { symbol: "USDC", name: "USD Coin", price: 1, balance: { eth: 940, arb: 1200, base: 310 } },
              { symbol: "WBTC", name: "Wrapped Bitcoin", price: 64500, balance: { eth: 0.02, arb: 0, base: 0 } },
            ]}
            onReview={async () => {
              await wait(800);
            }}
          />
  );
}

API reference #

MultiChainSwap

component

PropTypeDefault

chains *readonly SwapChain[]—

tokens *readonly SwapToken[]—

onReview *(quote: SwapQuote) => SwapResult | Promise<SwapResult>—

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.