React Hooks

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

useCreateSellOrder

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

  1. List an NFT for sale
  2. List a bundle of NFTs for sale
  3. List an NFT for sale for an ERC20 token
  4. 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:

  1. Create a one-to-one trade between two parties
  2. 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>
  )
}