React SDK
Installation
Install @liteflow/react
and its react peer dependency.
npm i @liteflow/react
Wrap app with LiteflowProvider
Wrap your app with the LiteflowProvider
component, passing the apiKey
of your organization.
function App() {
return (
<LiteflowProvider apiKey="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX">
<TheRestOfYourApp />
</LiteflowProvider>
)
}
Authenticate your user
To authenticate your user you will need to have access to the Signer
of their wallet with your favorite Web3 library.
import { useAuthenticate, useIsLoggedIn } from '@liteflow/react'
import { useAccount, useSigner } from 'wagmi' // or your favorite web3 wallet
function Login() {
const { address } = useAccount()
const { data: signer } = useSigner()
const [authenticate, { resetAuthenticationToken }] = useAuthenticate()
const loggedIn = useIsLoggedIn(address)
if (!signer) return 'No wallet connected'
if (loggedIn)
return <button onClick={resetAuthenticationToken}>Logout</button>
return <button onClick={() => authenticate(signer)}>Login</button>
}
Use hooks
Every component inside the LiteflowProvider
is now set up to use the Liteflow hooks.
import { useCreateOffer } from '@liteflow/react'
import { BigNumber } from 'ethers'
import { useSigner } from 'wagmi' // or your favorite web3 wallet
function PlaceBid() {
const { data: signer } = useSigner()
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>
}
Want to learn more? Check out the example (opens in a new tab) to learn how to setup Liteflow and continue on reading the documentation.