npm install @0xsequence/checkout

# or

pnpm install @0xsequence/checkout

# or

yarn add @0xsequence/checkout

import { SequenceCheckoutProvider } from '@0xsequence/checkout'

import { SequenceConnect } from '@0xsequence/connect'

import { config } from './config'



const App = () => {

  return (

    <SequenceConnect config={config}>

      <SequenceCheckoutProvider>

        <Page />

      </SequenceCheckoutProvider>

    </SequenceConnect>

  )

}

import { useSwapModal, type SwapModalSettings } from '@0xsequence/checkout'



const MyComponent = () => {

  const { openSwapModal } = useSwapModal()



  const onClick = () => {

    const chainId = 137

    const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'

    const currencyAmount = '20000'



    const contractAbiInterface = new ethers.Interface(['function demo()']) // Optionally, replace with your contract's abi interface



    const data = contractAbiInterface.encodeFunctionData('demo', []) as `0x${string}` // Optionally, replace 'demo' with the function you want to call,



    const swapModalSettings: SwapModalSettings = {

      onSuccess: () => {

        console.log('swap successful!')

      },

      chainId,

      currencyAddress,

      currencyAmount,

      postSwapTransactions: [ // Optionally, replace with the transaction you would like to execute after the swap has taken place.

        {

          to: '0x37470dac8a0255141745906c972e414b1409b470',

          data

        }

      ],

      title: 'Swap and Pay',

      description: 'Select a token in your wallet to swap to 0.2 USDC.'

    }



    openSwapModal(swapModalSettings)

  }



  return <button onClick={onClick}>Swap and Pay</button>

}