React Hooks
useCreateNFT

useCreateNFT

Hook for creating an NFT, accessing the active process step as well as the transaction hash

Usage

import { CreateNftStep, useCreateNFT } from '@nft/hooks'
import React from 'react'
 
export default function Component() {
  const signer = undefined // type of "Signer & TypedDataSigner" Get the signer from the wallet. Need to be an Ethers Signer (https://docs.ethers.io/v5/api/signer/)
  const [createNFT, { activeStep, transactionHash }] = useCreateNFT(signer, {
    uploadUrl: 'Your liteflow upload URL',
  })
 
  const handleClick = async () => {
    await createNFT({
      chainId: 1, // chainId of the network to mint on
      collectionAddress: '0x0000', // address of the collection to use
      name: 'Azuki #1', // name of the NFT
      description: 'Take the red bean to join the garden.', // description of the NFT
      content: azukiImage, // content file uploaded by the user
      isAnimation: false, // set to true if content file is a video. Require to set preview
      isPrivate: false, // set to true if content is private. Require to set preview.
      // optional
      amount: 1, // number of NFT to create. Require ERC1155
      royalties: 10, // royalty amount in percentage
      preview: azukiImagePreview, // preview in the case of private or animation content uploaded by user
      traits: [
        { type: 'Head', value: 'Cap' },
        { type: 'Body', value: 'Samurai' },
      ], // Array of traits associated to the NFT
    })
  }
 
  return (
    <>
      {activeStep === CreateNftStep.INITIAL && (
        <button onClick={handleClick}>Create NFT</button>
      )}
      {activeStep === CreateNftStep.UPLOAD && <p>Images are uploading</p>}
      {activeStep === CreateNftStep.LAZYMINT_SIGNATURE && (
        <p>Please sign transaction for lazy mint in wallet</p>
      )}
      {activeStep === CreateNftStep.LAZYMINT_PENDING && (
        <p>Transaction for lazy mint is pending</p>
      )}
      {activeStep === CreateNftStep.TRANSACTION_SIGNATURE && (
        <p>Please sign transaction in wallet</p>
      )}
      {activeStep === CreateNftStep.TRANSACTION_PENDING && (
        <p>Transaction is pending</p>
      )}
      {activeStep === CreateNftStep.OWNERSHIP && <p>Verifying ownership</p>}
      {transactionHash && <p>Transaction hash is {transactionHash}</p>}
    </>
  )
}

Configuration

useCreateNFT(
  signer: Signer & TypedDataSigner, // Ethers signer: https://docs.ethers.io/v5/api/signer/
  {
    uploadUrl: string, // Your Liteflow API upload url
  }
)

Return values

[
  ({
    chainId: number
    collectionAddress: string
    name: string
    description: string
    content: File
    preview?: File
    isAnimation: boolean
    isPrivate: boolean
    amount?: number
    royalties?: number
    traits?: { type: string; value: string }[]
  }) => Promise<string>, // createNFT function
  {
    activeStep: CreateNftStep, // steps of the NFT creation process
    transactionHash: string | undefined // returns the transaction hash after transaction has been placed on the blockchain
  }
]

createNFT

Function to create an NFT. It returns the created NFT ID.

Arguments:

{
  chainId: Number,                              // id of the chain to mint on
  collectionAddress: string,                    // address of the collection to mint on
  name: string,                                 // name of the NFT
  description: string,                          // description of the NFT
  content: File,                                // content file uploaded by the user
  preview?: File,                               // preview in the case of private or animation content uploaded by user
  isAnimation: boolean,                         // set to true if content file is a video. Require to set preview
  isPrivate: boolean,                           // set to true if content is private. Require to set preview.
  amount?: number,                              // number of NFT to create. Require ERC1155
  royalties?: number,                           // royalty amount in percentage
  traits?: { type: string, value: string }[]    // Array of traits associated to the NFT
}

activeStep

The status of the transaction as an enum CreateNftStep executed in this order. Once the NFT creation has been complete the state returns to CreateNftStep.INITIAL

enum CreateNftStep {
  INITIAL, // Default
  UPLOAD, // Upload has started
  LAZYMINT_SIGNATURE, // Asking signature for lazy mint (only for lazy mint)
  LAZYMINT_PENDING, // Lazy mint is pending (only for lazy mint)
  TRANSACTION_SIGNATURE, // Transaction has been initiated (only for normal mint)
  TRANSACTION_PENDING, // Transaction is pending (only for normal mint)
  OWNERSHIP, // Ownership is being verified (only for normal mint)
}

transactionHash

The hash of the blockchain transaction of the created NFT. This is only accessible after the approval of the transaction (after CreateNftStep.TRANSACTION_SIGNATURE)

Last updated on December 22, 2022