Skip to main content
LayerswapWidget takes a small set of top-level props. The config object configures the widget itself (API key, network set, theme, initial form values); the sibling props wire up callbacks, wallets, and loading behavior.
config, callbacks, walletDefaults, and walletProvidersConfig are compared by reference — hoist them to module scope or memoize them so the widget isn’t re-initialized on every render.

​
Top-level props

​
WidgetConfig
Widget configuration — see the config object below.
​
WidgetCallbacks
Event callbacks for the swap lifecycle (onSwapCreate, onSwapComplete, onError, …). See Event Callbacks.
​
{ include?: WalletProviderId[]; exclude?: WalletProviderId[] }
Limit which chain wallets are available. Use include to keep only listed wallet types or exclude to remove listed wallet types. See Wallets.
​
WalletDefaults
Credentials for the widget’s built-in wallet providers — your WalletConnect projectId and metadata, TON configuration, Immutable Passport configuration. See Wallets.
​
Config (from wagmi)
Your app’s wagmi Config. When supplied, the widget’s EVM provider adopts it — shared account, chain, and signer with your app. See Sharing your wagmi config.
​
ReactNode
Rendered while the widget bundle is being fetched and initialized, and during server-side rendering. Also rendered if loading fails.
​
() => void
Fires once, when the widget has loaded and mounted.
​
(error: unknown) => void
Fires when the widget fails to load (receives a ManifestError for manifest issues) or throws during render. This is distinct from callbacks.onError, which reports runtime errors inside a working widget — see Widget delivery and security.

​
The config object

​
string
Your Layerswap API key from the Partner Dashboard.
​
"mainnet" | "testnet"
The environment the Widget should use. Your API key selects mainnet or testnet; this value must match the key’s environment.
​
ThemeData | null
Visual theme overrides — colors, border radius, header visibility, and more. See Customization.
​
InitialSettings
Prefill, lock, or hide swap form fields — source/destination network, tokens, amount, destination address, default tab, and more. See the Initial Values reference.
​
ReactNode
Custom skeleton rendered inside the widget while its settings load (this is a later stage than the loader-level fallback).