React Hooks

This is the documentation for the Liteflow's hooks. This package contains a set of React Hooks that facilitates the creation of your own NFT Marketplace.

Before installation

To use the @nft/hooks package you will need an app with React version 17.

Installation

npm i @nft/hooks

Quick Start

This quick start showcase examples using Next.js (opens in a new tab).

1. Include your favorite web3 provider

Your application is relying on a web3 wallet. Please refer to your preferred web3 provider for the setup. Our example is using Wagmi but here are a few providers tested and supported:

2. Wrap app with `LiteflowProvider`, `AccountProvider` and a Web3 provider.

Wrap your app with a Web3 provider (in this case WagmiConfig) and their configurations.
Inside the Web3 provider, wrap your app with the LiteflowProvider and pass your Liteflow API endpoint to its endpoint property (similar to https://api.acme.com/graphql).
Inside the LiteflowProvider wrap the rest of the app with the AccountProvider provider.

import { LiteflowProvider, useAuthenticate } from '@nft/hooks'
import { AppProps } from 'next/app'
import { PropsWithChildren } from 'react'
import {
  configureChains,
  createClient,
  goerli,
  mainnet,
  useAccount,
  useDisconnect,
  WagmiConfig,
} from 'wagmi'
import { bsc, bscTestnet, polygon, polygonMumbai } from 'wagmi/chains'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { publicProvider } from 'wagmi/providers/public'
 
const { chains, provider } = configureChains(
  [mainnet, goerli, bscTestnet, bsc, polygon, polygonMumbai],
  [publicProvider()],
)
 
const client = createClient({
  autoConnect: true,
  connectors: [new InjectedConnector()],
  provider,
})
 
function AccountProvider(props: PropsWithChildren<{}>) {
  const [authenticate, { resetAuthenticationToken }] = useAuthenticate()
  const { disconnect } = useDisconnect()
  useAccount({
    async onConnect({ connector }) {
      const login = async () => {
        try {
          const signer = await connector.getSigner()
          await authenticate(signer)
        } catch (e) {
          disconnect()
        }
      }
      connector.on('change', login)
      connector.on('disconnect', () => connector.off('change', login))
      await login()
    },
    onDisconnect() {
      resetAuthenticationToken()
    },
  })
 
  return <>{props.children}</>
}
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={client}>
      <LiteflowProvider endpoint={process.env.NEXT_PUBLIC_ENDPOINT}>
        <AccountProvider>
          <Component {...pageProps} />
        </AccountProvider>
      </LiteflowProvider>
    </WagmiConfig>
  )
}
 
export default MyApp

3. You're all set!

Every component inside your App has now access to Liteflow's hooks.

import { Signer, TypedDataSigner } from '@ethersproject/abstract-signer'
import { useCreateOffer } from '@nft/hooks'
import { BigNumber } from 'ethers'
import { useCallback } from 'react'
import { useSigner } from 'wagmi'
 
export default function Home(): JSX.Element {
  const { data: signer } = useSigner<Signer & TypedDataSigner>()
  const [createOffer] = useCreateOffer(signer)
 
  const create = useCallback(async () => {
    const price = parseFloat(prompt('Price of the offer'))
    const id = await createOffer({
      type: 'BUY',
      assetId: process.env.NEXT_PUBLIC_ASSET_ID, // Pass a desired asset ID,
      currencyId: process.env.NEXT_PUBLIC_CURRENCY_ID, // Pass the desired currency ID
      expiredAt: new Date(Date.now() + 1000 * 60 * 60),
      quantity: BigNumber.from(1),
      unitPrice: BigNumber.from(price * 1e6), // Replace `1e6` by the right number of decimals of the used currency to shift the price to unit.
    })
    alert(id)
  }, [createOffer])
 
  return <button onClick={create}>Create offer</button>
}

Check out the example (opens in a new tab) to see this example in a working app.

Want to learn more about the hooks? Check out the hooks docs.

Changelog LiteflowProvider