Swap

import { Swap } from '0xtrails/widget'

export const BasicSwap = () => {
  return (
    <Swap
      apiKey="YOUR_API_KEY"
      onSwapSuccess={({ sessionId }) => {
        console.log('Swap completed:', sessionId)
      }}
      onSwapError={({ sessionId, error }) => {
        console.error('Swap failed:', sessionId, error)
      }}
    >
      <button>Swap Tokens</button>
    </Swap>
  )
}

import { Swap } from '0xtrails/widget'

export const ETHtoUSDC = () => {
  return (
    <Swap
      apiKey="YOUR_API_KEY"
      from={{ currency: "ETH", chain: "ethereum" }}
      to={{ currency: "USDC", chain: "base" }}
      onSwapSuccess={({ sessionId }) => {
        console.log('Swap completed:', sessionId)
      }}
    >
      <button>Swap ETH → USDC</button>
    </Swap>
  )
}

import { Swap } from '0xtrails/widget'

export const CCTPSwap = () => {
  return (
    <Swap
      apiKey="YOUR_API_KEY"
      bridgeProvider="CCTP"
      from={{ currency: "USDC", chain: "ethereum" }}
      to={{ currency: "USDC", chain: "base" }}
      onSwapSuccess={({ sessionId }) => {
        console.log('Swap completed:', sessionId)
      }}
    >
      <button>Bridge USDC via CCTP</button>
    </Swap>
  )
}

import { useQuote } from '0xtrails'
import { useWalletClient, useAccount } from 'wagmi'
import { useState } from 'react'

export const CustomSwapComponent = () => {
  const { data: walletClient } = useWalletClient()
  const { address } = useAccount()
  const [amount, setAmount] = useState('1') // human-readable USDC amount

  const { quote, send, isLoadingQuote, quoteError } = useQuote({
    walletClient,
    from: {
      token: 'USDC',
      chain: 'ethereum',
      amount,
    },
    to: {
      token: 'USDC',
      chain: 'base',
      recipient: address,
    },
    slippageTolerance: '0.005', // 0.5%
    onStatusUpdate: (states) => {
      console.log('Swap progress:', states)
    },
  })

  const handleSwap = async () => {
    if (!send) return
    
    try {
      const result = await send()
      console.log('Swap result:', result)
    } catch (error) {
      console.error('Swap failed:', error)
    }
  }

  if (isLoadingQuote) {
    return <div>Loading quote...</div>
  }

  if (quoteError) {
    return <div>Error getting quote: {String(quoteError)}</div>
  }

  if (!quote) {
    return <div>No quote available</div>
  }

  return (
    <div>
      <p>From: {quote.originAmountFormatted} {quote.originToken.symbol} on {quote.originChain.name}</p>
      <p>To: {quote.destinationAmountFormatted} {quote.destinationToken.symbol} on {quote.destinationChain.name}</p>
      <p>Fee: {quote.totalFeeAmountUsdDisplay}</p>
      <p>Estimated time: {quote.completionEstimateSeconds}s</p>
      <button onClick={() => swap?.()}>Execute Swap</button>
    </div>
  )
}