⚠️ You'll need a Trails API key first!

Please visit https://dashboard.trails.build to:
1. Create an account (or sign in)
2. Generate your API key

Once you have your key, add it to your .env file:

pnpm add @0xtrails/trails

_app.tsx

import { TrailsProvider } from '@0xtrails/trails';
import { WagmiProvider } from 'wagmi';

export default function App({ children }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <TrailsProvider trailsApiKey={process.env.NEXT_PUBLIC_TRAILS_API_KEY}>
        {children}
      </TrailsProvider>
    </WagmiProvider>
  );
}

import { TrailsWidget } from '@0xtrails/trails';

<TrailsWidget
  mode="pay"
  destinationChainId={8453}
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationAmount="10000000" // 10 USDC (6 decimals)
  destinationRecipient="0xYourMerchantAddress"
/>

pnpm add @0xtrails/trails

import { TrailsProvider, TrailsHookModal } from '@0xtrails/trails';

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <TrailsProvider trailsApiKey={process.env.NEXT_PUBLIC_TRAILS_API_KEY}>
        <TrailsHookModal />
        {/* Your app */}
      </TrailsProvider>
    </WagmiProvider>
  );
}

import { useTrailsSendTransaction, useSupportedTokens } from '@0xtrails/trails';

function SwapPanel() {
  const { data: tokens } = useSupportedTokens();
  const { sendTransaction, isPending } = useTrailsSendTransaction();

  const handleSwap = () => {
    sendTransaction({
      destinationChainId: 8453,
      destinationTokenAddress: '0x...',
      destinationAmount: '1000000',
    });
  };

  return <button onClick={handleSwap} disabled={isPending}>Swap</button>;
}

pnpm add @0xtrails/trails-api

import { TrailsAPI } from '@0xtrails/trails-api';

const trails = new TrailsAPI({ apiKey: process.env.TRAILS_API_KEY });

async function executeSettlement() {
  // 1. Quote
  const quote = await trails.quoteIntent({
    sourceChainId: 1,
    sourceTokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
    destinationChainId: 8453,
    destinationTokenAddress: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
    amount: '1000000000', // 1000 USDC
    tradeType: 'EXACT_INPUT',
  });

  // 2. Commit (locks the quote)
  const intent = await trails.commitIntent({ quoteId: quote.quoteId });

  // 3. Execute (user signs, or use a signer)
  const execution = await trails.executeIntent({
    intentId: intent.intentId,
    // signature or signer config
  });

  // 4. Wait for receipt
  const receipt = await trails.waitIntentReceipt({
    intentId: intent.intentId,
    timeout: 120000,
  });

  return receipt;
}

EXACT_INPUT

import { encodeFunctionData } from 'viem';

const vaultAbi = [
  {
    name: 'deposit',
    type: 'function',
    inputs: [
      { name: 'amount', type: 'uint256' },
      { name: 'receiver', type: 'address' },
    ],
    outputs: [],
  },
] as const;

// Use placeholder for amount (Trails fills actual value)
const PLACEHOLDER_AMOUNT = '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff';

const calldata = encodeFunctionData({
  abi: vaultAbi,
  functionName: 'deposit',
  args: [BigInt(PLACEHOLDER_AMOUNT), userAddress],
});

<TrailsWidget
  mode="fund"
  destinationChainId={42161}
  destinationTokenAddress="0xaf88d065e77c8cC2239327C5EDb3A432268e5831"
  destinationRecipient="0xYourVaultContract"
  destinationCalldata={calldata}
/>

⚠️ You need a Trails API key to use this integration.

Please visit: https://dashboard.trails.build

Steps:
1. Create an account (or sign in if you have one)
2. Navigate to the API Keys section
3. Generate a new API key
4. Copy the key

Once you have your key, add it to your .env file and let me know!