React Hooks

Install our library of React Hooks and Components to easily integrate Crane into your React app.

Make sure you wrap your app with the CraneProvider component. (See React Setup) 2. You must have an NFT in your wallet to use the hooks.

useCreateSellOrder

Hook for listing an NFT for sale. You can create a sell order to:

List an NFT for sale
List a bundle of NFTs for sale
List an NFT for sale for an ERC20 token
Create a private sale between two parties

import { useCreateSellOrder } from '@cranetech/sdk'

type SellOrder = {
  offer: Token[],
  price: number,
  currency?: string, // Optional ERC20 contract address or "wei". Default to network's native token (Ethereum -> ETH, Polygon -> MATIC)
  endTime?: string, // Optional unix time format input to specify ending time of the listing. Default to 30 days
  recipient?: string, // Optional wallet address if creating a private sale/trade
  fee?: FeeStructure, // Optional marketplace fee structure. Default to no fees
}

export const CreateSellOrderButton = ({ order: SellOrder }) => {
  const createSellOrder = useCreateSellOrder()

  return (
    <button
      className={`rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700`}
      onClick={() => {
        createSellOrder(order)
      }}
    >
      List NFT for sale
    </button>
  )
}

useCreateTradeOrder

Hook for creating a trade between two parties. You can create a trade order to:

Create a one-to-one trade between two parties
Create a many-to-many trade between two parties, including adding ETH or an ERC20 as part of the trade

import { useCreateTradeOrder } from '@cranetech/sdk'

type TradeOrder = {
  offer: Token[],
  consideration: Token[],
  endTime?: string, // Optional unix time. Default to 30 days
  recipient?: string, // Optional wallet address for private sale/trade
}

export const CreateTradeOrderButton = ({ order: TradeOrder }) => {
  const createTradeOrder = useCreateTradeOrder()

  return (
    <button
      className={`rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700`}
      onClick={() => {
        createTradeOrder(order)
      }}
    >
      Create trade order
    </button>
  )
}

useFulfillOrder

Hook for fulfilling an order. This hook grabs the matching order from your order book and is used to buy an NFT from a seller, accept a trade, or accept a bid.

import { useFulfillOrder } from '@cranetech/sdk'

type FulfillOrder = {
  offer: Token[],
  owner?: string, // Optional wallet address used for ERC1155.
}

export const FulfillOrderButton = ({ order: FulfillOrder }) => {
  const fulfillOrder = useFulfillOrder()

  return (
    <button
      className={`rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700`}
      onClick={() => {
        fulfillOrder(order)
      }}
    >
      Fulfill Order
    </button>
  )
}

useCancelOrder

Hook for cancelling an order, specified by the token address, token ID, and token owner (if ERC1155). Note: this cancels the order on-chain and

import { useCancelOrders } from '@cranetech/sdk'

type CancelOrder = {
  tokenAddress: string,
  tokenId: string,
  tokenOwner?: string, // Required if ERC1155, or can be used to cancel all orders of tokenOwner
}

export const CancelOrderButton = ({ order: CancelOrder }) => {
  const cancelOrder = useCancelOrder()

  return (
    <button
      className={`rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700`}
      onClick={() => {
        fulfillOrder(order)
      }}
    >
      Cancel Order
    </button>
  )
}

useFetchOrders

Hook for fetching orders from your order book. You can fetch orders using several methods:

fetchAllOrders() - All active orders
fetchOrdersByTokenAddress(tokenAddress) - All orders for a specific token address
fetchOrdersByWalletAddress(walletAddress) - All orders for a specific wallet address
fetchOrdersByToken({tokenAddress, tokenId}) - All orders for a specific token ID

import { useFetchOrders } from '@cranetech/sdk'

export const FetchAllOrders = () => {
  const fetchOrders = useFetchOrders()

  const [orders, setOrders] = useState([])

  useEffect(() => {
    const callFetchAllOrders = async () => {
      const orders = await fetchAllOrders()
      setOrders(orders)
    }
    callFetchOrders()
  }, [])

  return (
    <div>
      {orders.map((order) => (
        <div>
          {order.tokenAddress}
          {order.tokenId}
          {order.offerer}
        </div>
      ))}
    </div>
  )
}