Configuration - Trails

Focused components

All focused components accept these optional props in addition to their mode-specific props.

Prop	Type	Default	Description
`theme`	`"light" \| "dark" \| "auto"`	`"auto"`	Color theme; `auto` follows system preference
`customCss`	`string \| Record<string, string>`	—	Custom CSS to inject into the widget
`disableCss`	`boolean`	`false`	Disable default CSS injection
`renderInline`	`boolean`	`false`	Render inline instead of as a modal
`buttonText`	`string`	—	Custom CTA button text

Used in wallet connection dialogs (WalletConnect, etc.):

appMetadata={{
  name: "My App",
  url: "https://myapp.com",
  imageUrl: "https://myapp.com/logo.png",
  description: "Short description",
}}

Prop	Type	Description
`walletConnectProjectId`	`string`	WalletConnect project ID
`walletOptions`	`string[]`	Wallet connector IDs to show (e.g. `["metamask", "walletconnect"]`)
`wagmiConnectors`	`Connector[]`	Custom wagmi connectors
`decoupleWagmi`	`boolean`	Decouple from external wagmi provider
`hideDisconnect`	`boolean`	Hide the disconnect button
`hideAddWallet`	`boolean`	Hide “Add wallet” option
`isSmartWallet`	`boolean`	Signal that the connected wallet is a smart wallet

Prop	Type	Description
`slippageTolerance`	`number \| string`	Slippage tolerance (e.g. `0.005` for 0.5%)
`swapProvider`	`RouteProvider`	Preferred same-chain swap provider
`swapProviderFallback`	`boolean`	Fall back if preferred swap provider is unavailable
`bridgeProvider`	`RouteProvider`	Preferred bridge provider
`bridgeProviderFallback`	`boolean`	Fall back if preferred bridge provider is unavailable
`priceImpactWarningThresholdBps`	`number`	Basis points before showing a price impact warning
`priceImpactWarningMessage`	`string`	Custom price impact warning message
`priceImpactFallbackBridgeUrl`	`string`	URL to redirect when price impact is too high
`intentProtocolVersion`	`IntentProtocolVersion`	Force a specific intent protocol version

dev={{
  debug: true,
  sequenceIndexerUrl: "https://...",
  trailsApiUrl: "https://...",
}}

These callbacks are available on all focused components (in addition to mode-specific lifecycle callbacks):

Callback	When it fires
`onOpen`	Widget modal opens
`onClose`	Widget modal closes
`onOriginConfirmation`	Origin-chain transaction confirmed
`onDestinationConfirmation`	Destination-chain transaction confirmed
`onQuote`	Quote is received
`onSignRequest`	Wallet signature requested
`onSign`	Wallet signature obtained
`onSignReject`	User rejected the signature
`onApproveRequest`	ERC-20 approval requested
`onApprove`	ERC-20 approval confirmed
`onApproveReject`	User rejected the approval
`onStatus`	Transaction status update

All chain fields accept a ChainIdentifier, which can be:

A chain name string: "base", "ethereum", "polygon", "arbitrum", "optimism", "avalanche", "bsc", "katana", etc.
A numeric chain ID: 8453, 1, 137, etc.
A viem Chain object

The paymentMethod prop on focused components accepts:

Value	Method
`"CONNECTED_WALLET"`	Connected wallet (default when omitted)
`"CRYPTO_TRANSFER"`	QR code / address deposit
`"CREDIT_DEBIT_CARD"`	Fiat on-ramp (credit/debit card)
`"EXCHANGE"`	CEX transfer (Coinbase, Binance, etc.)

See the individual mode pages for full prop details:

Pay — to.recipient, to.currency, to.chain, to.amount, payMessage, onPaymentStart/Success/Error
Fund — to, fundMethodsList, hideUnlistedFundMethods, hideSwap, onFundingStart/Success/Error
Swap — from, to, onSwapStart/Success/Error
Withdraw — from, to, onWithdrawStart/Success/Error
Earn — to with calldata, onEarnStart/Success/Error