fnd-collection-hooks v1.2.3

DEVELOPER'S NOTES

Read my notes dev notes

fnd-collection-hooks

React hooks to create an NFT collection and mint ERC721 tokens

Install

Install fnd-collection-hooks and its peer dependency ethers

// using npm
npm install --save fnd-collection-hooks ethers

// using yarn
yarn add fnd-collection-hooks ethers

Usage

All hooks require a signer, you can use wagmi as shown in the examples below.

Wrap your app with our Provider

You will need to wrap your application with our Provider.

import { Provider } from 'fnd-collection-hooks'

const App = () => {
  <Provider>
    <YourApp />
  </Provider>
}

Create a new collection

To create a new collection, you will need to specify a name and a symbol as well as a unique nonce.

Here we're using Wagmi useSigner hook to provide a signer.

import React from 'react'

import { useCollectionCreate } from 'fnd-collection-hooks'
import { useSigner } from 'wagmi'

const Example = () => {
  const { data: mySigner } = useSigner()
  const {
    data,
    isLoading,
    isSuccess,
    error,
    write: createCollection
  } = useCollectionCreate({
    name: 'Collection Name',
    symbol: 'SYMBOL',
    nonce: 123,
    signer: mySigner
  })

  return (
    <button onClick={createCollection}>
      Create a new collection
    </button>
  )
}

Mint a token from a collection

To mint a token you will need to specify the address of the collection as well as the IPFS path for the NFT to mint.

You can use a service like Pinata to upload assets to IPFS.

import { useCollectionMint } from 'fnd-collection-hooks'
import { useSigner } from 'wagmi'

const Example = () => {
  const { data: mySigner } = useSigner()
  const {
    data,
    isLoading,
    isSuccess,
    error,
    write: mintToken
  } = useCollectionMint({
    collectionAddress: '0x0000000000000000000000000000000000000000',
    tokenIPFSPath: 'QmWGxCdoZJHo9tufoNZLPsz14oKr11YozKrVbW7c4ZnEDw',
    signer: mySigner
  })

  return (
    <button onClick={mintToken}>
      Mint 1 token
    </button>
  )
}

Set a global signer

You can set the signer as soon as your users connect their wallet. This example is using wagmi.

For a more detailed example, please see the example folder.

import { useEffect } from 'react'
import { useSigner } from 'wagmi'
import { useSigner as useFndSigner } from 'fnd-collection-hook'

const Component = () => {
  const { data: wagmiSigner } = useSigner()
  const [signer, setSigner] = useFndSigner()

  useEffect(() => {
    // this sets the signer on the global Provider so you can omit the `signer` prop whenever you use our hooks
    setSigner(wagmiSigner)
  }, [wagmiSigner, setSigner])
}

API

useCollectionCreate

Hook to create a brand new Collection from FNDCollectionFactory contract.

import { useCollectionCreate } from 'fnd-collection-hooks'

Arguments:

• name: String
• symbol: String
• nonce: Uint
• signer (optional): Signer

Return values:

{
  data: {
    txHash?: String,
    collectionAddress?: String
  },
  isLoading: Boolean,
  isSuccess: Boolean,
  error?: Error,
  write: () => void
}

useCollectionMint

Hook to mint a token from a NFT Collection

import { useCollectionMint } from 'fnd-collection-hooks'

Arguments:

• collectionAddress: String
• tokenIPFSPath: String
• signer (optional): Signer

Return values:

{
  data: {
    txHash?: String,
    tokenId?: Integer,
    rawTokenId?: BigNumber
  },
  isLoading: Boolean,
  isSuccess: Boolean,
  error?: Error,
  write: () => void
}

useSigner

Hook to set a global signer. Useful when you want to set it once instead of providing it on each hook.

You must wrap your application with Provider for this hook to work.

import { useSigner } from 'fnd-collection-hooks'

Arguments:

none

Return values:

[
  signer?: Signer,
  setSigner: () => void
]

Provider

Wrapper component that provides a context to get/set useful values.

Props:

• children: Element
• chain (optional): Integer - Chain ID to use across the app - default Goerli

Usage:

import { Provider } from 'fnd-collection-hooks'

const App = () => {
  <Provider chain={1}>
    <YourApp />
  </Provider>
}

License

MIT © maximebonhomme

This hook is created using create-react-hook.