​
Configuration Options

Trails is easy to get started, however we have deep configuration options to address most use cases.
PropTypeRequiredDefaultDescription
toAddressstringYes—Prefill the recipient/destination address.
toAmountstringYes—Prefill the amount to send (e.g., “0.1”).
toChainIdnumber | stringYes—Prefill the destination chain ID.
toTokenstringYes—Prefill the destination token contract address (e.g., 0x...).
toCalldatastringNo—Optional calldata for contract interactions at the destination chain.
renderInlinebooleanNotruetrue renders inline; false renders a button that opens the modal.
theme'light' | 'dark' | 'auto'No'auto'Color theme; auto follows system.
walletOptionsstring[]No["injected", "privy"]Wallet providers to offer.
onOriginConfirmation(txHash: string, chainId: number) => voidNo—Called when the origin transaction confirms.
onDestinationConfirmation(txHash: string, chainId: number) => voidNo—Called when the destination transaction confirms.
privyAppIdstringNo—Privy App ID (if using Privy).
privyClientIdstringNo—Privy Client ID (if using Privy).
gaslessbooleanNofalseEnables gasless flow when a paymaster is configured.
paymasterUrlsArray<{ chainId: number; url: string }>No—Configure per-chain paymaster endpoints for gasless. Simply pass in the paymaster URLs for a 4337-compatible bundler. Requires gasless.
appIdstringNo—Your appId key. Generate one on the Sequence Builder.
mode'fund' | 'pay'No'pay'The operation mode: 'fund' for deposit actions (into chains, vaults, LPs, etc.), 'pay' for payment use cases (swaps, NFT purchases, etc.).
customCssstringNo—Custom CSS styles to apply to the component.
quoteProvider'lifi' | 'relay' | 'cctp' | 'auto'No'auto'The quote provider to use for price quotes. 'auto' selects the best provider automatically.

​
Custom Button Example

When using renderInline={false}, you can provide a custom button to trigger opening up the modal: 
import { TrailsWidget } from '0xtrails/widget'

<TrailsWidget renderInline={false}>
  <button className="custom-button-styles">
    Pay with Trails
  </button>
</TrailsComponent>