SwapWidget

import { SwapWidget } from '@reservoir0x/relay-kit-ui'
import { useConnectModal } from '@rainbow-me/rainbowkit'
import { useState } from 'react'

export default function MyComponent() {
  const { openConnectModal } = useConnectModal()
  const [fromToken, setFromToken] = useState({
    chainId: 8453,
    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
    decimals: 6,
    name: 'USDC',
    symbol: 'USDC',
    logoURI: 'https://ethereum-optimism.github.io/data/USDC/logo.png'
  })
  const [toToken, setToToken] = useState({
    chainId: 10,
    address: '0x7f5c764cbc14f9669b88837ca1490cca17c31607',
    decimals: 6,
    name: 'USDC',
    symbol: 'USDC',
    logoURI: 'https://ethereum-optimism.github.io/data/USDC/logo.png'
  })

  return (
    <SwapWidget
      fromToken={fromToken}
      setFromToken={setFromToken}
      toToken={toToken}
      setToToken={setToToken}
      defaultAmount={'5'}
      supportedWalletVMs={['evm']}
      onConnectWallet={openConnectModal}
      onAnalyticEvent={(eventName, data) => {
        console.log('Analytic Event', eventName, data)
      }}
    />
  )
}

import { SwapWidget, SlippageToleranceConfig } from '@reservoir0x/relay-kit-ui'
import { useState } from 'react'

export default function SwapPage() {
  const [slippageTolerance, setSlippageTolerance] = useState<string | undefined>(undefined)

  return (
    <div>
      <SlippageToleranceConfig
        setSlippageTolerance={setSlippageTolerance}
        onAnalyticEvent={(eventName, data) => {
          console.log('Analytic Event', eventName, data)
       }}
      />
      <SwapWidget
        slippageTolerance={slippageTolerance}
        // ... other SwapWidget props
      />
    </div>
  )
}