• Installation
• Getting Started
• Get User NFTs
• Buy NFTs
• Smart Contract Metadata
• Smart Contract Data
• Allow List Tickets

Installation

npm install --save @inkerlabs/react-sdk

Getting Started

To inject the SDK into your react app, wrap your App component with the Provider.

All of the following examples are assuming you built your project with the Simultaneous Reveal use case. If this is not the case, update the imports accordingly.

import { Provider } from '@inkerlabs/react-sdk/'
import { UseCase } from '@inkerlabs/sdk'

// Assuming your use case is Simultaneous Reveal
const useCase = UseCase.SR

// These informations are available in your dashboard
const config = {
  contractAddress: CONTRACT_ADDRESS,
  version: VERSION,
  chain: CHAIN,
}

ReactDOM.render(
  <React.StrictMode>
    <Provider useCase={useCase} config={config}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
)

Get User NFTs

You can use the useNFTs hook to retrieve the NFTs that the user holds. The user will be prompted to log in with MetaMask if not already.

import { useNFTs } from '@inkerlabs/react-sdk/build/simultaneousReveal'

function YourComponent() {
  const [nfts, nftsError] = useNFTs()
}

Buy NFTs

You can use the useBuyPublic and useBuyPrivate hooks to buy NFTs. Buy public will only work if the public sales are open. Buy private will only work if the private sales are open and the user holds at least one allow list entry.

import {
  useBuyPublic,
  useBuyPrivate,
} from '@inkerlabs/react-sdk/build/simultaneousReveal'

function YourComponent() {
  const buyPublic = useBuyPublic()
  const buyPrivate = useBuyPrivate()
}

Smart Contract Metadata

You can fetch the contract metadata with the useContractMetadata hook. The contract metadata includes the name, description and image identifying the smart contract.

import {
  useContractMetadata,
} from '@inkerlabs/react-sdk/build/simultaneousReveal'

function YourComponent() {
  const [contractMetadata, metadataError] = useContractMetadata()
}

Smart Contract Data

You can fetch the contract data with the useContractData hook. The contract data includes the states of the sales, the pricing and more.

import {
  useContractData,
} from '@inkerlabs/react-sdk/build/simultaneousReveal'

function YourComponent() {
  const [data, dataError] = useContractData()
}

Allow List Tickets

If you want to display how many allow list tickets the user possesses you can use the useWhiteListTickets hook. Note that the SDK handles the tickets automatically for private sales buying.

import {
  useWhiteListTickets,
} from '@inkerlabs/react-sdk/build/simultaneousReveal'

function YourComponent() {
  const [tickets, ticketsError] = useWhiteListTickets()
}