Omnichain Liquidity Routing on Rootstock with LI.FI
Rootstock is natively supported by LI.FI, a cross-chain liquidity aggregator. LI.FI routes swaps and bridges across dozens of chains and protocols, including Hop, Stargate, Across, and Gas.zip. It delivers the specific destination token your users select (for example, bridged USDC on Rootstock), straight to Rootstock, in a single transaction.
This guide covers three integration paths:
- LI.FI Widget - embed a pre-configured, customizable UI component
@lifi/sdk- fetch quotes and execute routes programmaticallygetContractCallsQuote(Advanced) - bridge assets and call a Rootstock contract atomically in one user click
Prerequisites
- Node.js 18+
- A Next.js or React project
- Basic familiarity with
viemand EVM wallets - LI.FI API access (no API key required for basic rate limits; register at portal.li.fi for higher limits)
Rootstock does not have native USDC issued by Circle. USDC on Rootstock is bridged from other networks via protocols such as LayerZero or Stargate. Always verify the exact contract address of the bridged asset you wish to interact with on Rootstock before deploying.
Integration 1: The LI.FI Widget
The LI.FI Widget is a self-contained React component. Lock the destination chain to Rootstock so users always land on Chain ID 30. The widget handles wallet connection, route selection, approvals, and transaction execution automatically.
Set Up a Project
Before installing the widget, you need a Next.js or React project with a configured wallet provider. If you do not already have one, start from a Rootstock quick start such as the Rootstock Dynamic starter kit, which ships with Wagmi, viem, and wallet connection wired up out of the box.
Install
npm install @lifi/widget @lifi/wallet-management
Embed and Configure
// app/bridge/page.tsx
"use client";
import { LiFiWidget, WidgetConfig } from "@lifi/widget";
// Lock the destination to Rootstock (Chain ID 30)
// and pre-fill a default destination token (bridged USDC on Rootstock)
const widgetConfig: WidgetConfig = {
toChain: 30,
// Replace with the exact bridged USDC address your dApp uses on Rootstock
toToken: "0x74C9F2B00581F1b11Aa7Ff05aa9f608B7389de67",
appearance: "light",
theme: {
palette: {
primary: { main: "#FF6B00" },
},
container: {
border: "1px solid rgb(234, 234, 234)",
borderRadius: "16px",
},
},
// Hide the destination chain selector so users cannot change the target chain
hiddenUI: ["toChain"],
// Replace with your integrator identifier for analytics (max 23 chars, alphanumeric)
integrator: "my-rootstock-dapp",
};
export default function BridgePage() {
return (
<main className="flex justify-center p-8">
<LiFiWidget config={widgetConfig} integrator="my-rootstock-dapp" />
</main>
);
}
Once rendered, the widget appears as a self-contained bridge UI in your app:

If your dApp already uses Wagmi, wrap the widget inside your WagmiProvider. The widget detects the existing context and reuses your wallet setup automatically, with no extra configuration required.
Users pick a source chain and token, and the widget routes everything to Rootstock. Visit the LI.FI Playground to preview customization options before shipping.
Integration 2: The @lifi/sdk
Use the SDK when you need programmatic control over quotes, route selection, or execution. This is the right path for custom swap UIs or automated liquidity flows.