React SDK

npm i @liteflow/react

function App() {
  return (
    <LiteflowProvider apiKey="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX">
      <TheRestOfYourApp />
    </LiteflowProvider>
  )
}

import { useAuthenticate, useIsLoggedIn } from '@liteflow/react'
import { useMemo } from 'react'
import { publicActions } from 'viem'
import { useWalletClient } from 'wagmi'
 
function Login() {
  const { address } = useAccount()
  const { data: walletClient } = useWalletClient()
  const signer = useMemo(() => {
    return walletClient?.extend(publicActions)
  }, [walletClient])
 
  const [authenticate, { resetAuthenticationToken }] = useAuthenticate()
  const loggedIn = useIsLoggedIn(walletClient?.account.address)
 
  if (!signer) return 'No wallet connected'
  if (loggedIn)
    return <button onClick={resetAuthenticationToken}>Logout</button>
  return <button onClick={() => authenticate(signer)}>Login</button>
}

import { BigNumber } from '@ethersproject/bignumber'
import { useCreateOffer } from '@liteflow/react'
import { useMemo } from 'react'
import { publicActions } from 'viem'
import { useWalletClient } from 'wagmi'
 
function PlaceBid() {
  const { data: walletClient } = useWalletClient()
  const signer = useMemo(() => {
    return walletClient?.extend(publicActions)
  }, [walletClient])
 
  const [createOffer] = useCreateOffer(signer)
 
  const handleClick = async () => {
    const offerId = await createOffer({
      type: 'BUY',
      chain: 1, // Ethereum
      collection: `0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d`,
      token: '100',
      quantity: BigNumber.from(1),
      unitPrice: {
        amount: BigNumber.from(1).mul(BigNumber.from(10).pow(18)), // this value is in base unit of the token. This is equivalent to 1 ETH. Use BigNumber
        currency: null, // currency can be set as an address to use ERC20 tokens
      },
    })
    alert(`Offer created: ${offerId}`)
  }
 
  return <button onClick={handleClick}>Create Offer</button>
}