> ## Documentation Index > Fetch the complete documentation index at: https://docs.polygon.technology/llms.txt > Use this file to discover all available pages before exploring further. # Fund your protocol > Let users fund your app, wallet, or protocol from any token on any chain, or directly from a credit card or bank account. Trails Fund mode consolidates every funding path into a single integration. Users can deposit from their existing crypto balance, from a wallet on another chain, or via fiat onramp — credit card, debit card, or bank account — without leaving your app. You add one widget; Trails handles routing, bridging, gas, and onramp compliance automatically. ## What users can fund from * **Crypto wallet**: any token on any supported chain — Polygon, Ethereum, Base, Arbitrum, and more * **Another app or exchange**: funds held in Coinbase, Binance, or any other wallet the user connects * **Credit or debit card**: card payments convert to USDC and land in your destination address in one flow * **Bank account**: ACH and bank transfer onramp, built in All three paths appear automatically in the widget. No separate onramp integration required. ## Drop-in widget The fastest integration is the `Fund` mode widget: ```tsx theme={null} import { Fund } from "0xtrails/widget"; { // verify server-side and update the user's balance console.log("Funded:", sessionId); }} /> ``` The widget surfaces crypto funding, cross-chain options, and card/bank onramp in a single UI. Users pick their preferred source; Trails routes from there. ## Pre-set the source Pass `from` when you want to start with a specific source chain, token, or amount. Amounts are human-readable strings: ```tsx theme={null} updateBalance(sessionId)} /> ``` ## Start with card onramp Set `paymentMethod="CREDIT_DEBIT_CARD"` when you want the funding flow to start with card onramp. You can optionally pass a fiat `from.amount` to pre-fill the amount the user will pay: ```tsx theme={null} updateBalance(sessionId)} /> ``` ## Fund and deposit into a protocol For supported earn destinations, use the `Earn` mode widget. It gives users a drop-in flow for funding from any supported source and depositing into a supported vault or lending market: ```tsx theme={null} import { Earn } from "0xtrails/widget"; updateVaultBalance(sessionId)} /> ``` For a custom UI or a specific action sequence, use composable actions instead of hand-encoded calldata. The example below routes funds to Polygon USDC and deposits them into an ERC-4626 vault in the same intent: ```tsx theme={null} import { useQuote, deposit } from "0xtrails"; const morphoMarketId = "MARKET_ID_FROM_USE_EARN_MARKETS"; export function DepositToVaultButton({ walletAddress, }: { walletAddress: `0x${string}`; }) { const { send, isLoadingQuote, quoteError } = useQuote({ walletAddress, from: { chain: "base", token: "USDC", amount: "100" }, to: { chain: "polygon", token: "USDC" }, actions: [ deposit({ marketId: morphoMarketId, amount: "100", receiverAddress: walletAddress, }), ], }); if (isLoadingQuote) return ; if (quoteError) return

{quoteError.message}

; return ; } ``` Use `useEarnMarkets({ chain: "polygon", type: "vault" })` to discover live `marketId` values instead of hard-coding them. Use `lend({ marketId, amount })` for lending markets such as Aave, and `deposit({ marketId, amount })` for vaults such as Morpho. ## Widget props | Prop | Type | Description | | ------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `apiKey` | `string` | Your Trails API key | | `to.recipient` | `string` | Destination wallet address. Defaults to the connected wallet when omitted | | `to.chain` | `string \| number` | Destination chain name or ID. When used with `to.token`, locks the destination chain and token | | `to.token` | `string` | Destination token symbol or address. Locks the destination token | | `to.defaultChain` | `string \| number` | Pre-selected destination chain that the user can change | | `to.defaultToken` | `string` | Pre-selected destination token that the user can change | | `to.tokenList` | `string[]` | Destination token allowlist. Ignored when `to.token` locks the destination | | `to.calldata` | `string` | Low-level encoded destination call. Prefer composable actions with `useQuote` for protocol deposits | | `from.chain` | `string \| number` | Optional source chain | | `from.token` | `string` | Optional source token symbol or address | | `from.currency` | `string` | Source token/currency alias. For card onramp, use fiat currency codes such as `"USD"` | | `from.amount` | `string \| number` | Optional source amount in human-readable units | | `from.walletAddress` | `string` | Optional source wallet address. Defaults to the connected wallet | | `from.exchange` | `string` | Optional exchange key when `paymentMethod="EXCHANGE"` | | `paymentMethod` | `"CONNECTED_WALLET" \| "CRYPTO_TRANSFER" \| "CREDIT_DEBIT_CARD" \| "EXCHANGE"` | Optional funding method to start from | | `defaultInputMode` | `"fiat" \| "token"` | Initial amount input unit. `"fiat"` lets the user enter a fiat value that is converted into the selected crypto amount; `"token"` lets the user enter the token amount directly | | `hideSwap` | `boolean` | Hide the swap tab in the fund screen header | | `hideWallets` | `string[]` | Wallet addresses to exclude from funding wallet selection | | `fundMethodsList` | `string[]` | Ordered funding methods to show, such as `"connected-wallet"`, `"crypto-transfer"`, `"cc-onramp"`, or `"exchange"` | | `hideUnlistedFundMethods` | `boolean` | Fully hide funding methods not listed in `fundMethodsList` | | `buttonText` | `string` | Custom CTA label | | `appMetadata` | `{ name?: string; url?: string; imageUrl?: string; description?: string }` | App metadata shown in the widget | | `theme` | `object` | Widget theme overrides | | `intentProtocolVersion` | `string` | Pin the intent protocol version for this widget instance | | `onFundingStart` | `function` | Called when deposit is initiated | | `onFundingSuccess` | `({ sessionId }) => void` | Called on successful deposit | | `onFundingError` | `function` | Called on failure | | `onQuote` | `function` | Called when a quote is created | | `onStatus` | `function` | Called when transaction status updates | | `onOpen` / `onClose` | `function` | Called when the widget opens or closes | `Fund` widget amounts are human-readable strings or numbers. Raw base-unit inputs are available in the headless SDK with `from.amountRaw` or `to.amountRaw`. ## Headless SDK For custom UI, use `useQuote` from the headless SDK. You control the presentation; Trails handles execution: ```tsx theme={null} import { useQuote } from "0xtrails"; const { quote, send, isLoadingQuote, quoteError } = useQuote({ from: { chain: "base", token: "USDC", amount: "100" }, to: { chain: "polygon", token: "USDC", recipient: "0xYourDepositAddress", }, onStatusUpdate: (status) => console.log("Fund status:", status), }); // Show quote.fees, quote.estimatedTime in your UI, then: await send?.(); ``` If you already have a raw onchain amount, use `amountRaw` instead of `amount`: ```tsx theme={null} const { send } = useQuote({ from: { chain: "base", token: "USDC", amountRaw: "100000000" }, to: { chain: "polygon", token: "USDC", recipient: "0xYourDepositAddress", }, }); ``` ## Supported chains and tokens Trails supports all major EVM chains. Users can fund from any supported chain regardless of where your destination address lives. ```typescript theme={null} // Query tokens available on a specific chain const { tokens } = await trails.getTokenList({ chainId: 137 }); ``` See [Supported Chains](https://docs.trails.build/resources/supported-chains) for the full network list. ## Next steps Move tokens between wallets and chains without protocol interaction. Route funded USDC directly into a Morpho yield vault on arrival. Automate recurring deposits without per-transaction prompts. Full endpoint reference, SDK docs, and widget customization options.