Fetching an order from your Order Book

When you create an order, your orders are stored in your order book. Use the useFetchOrders hook to fetch your orders.

Use the fetched orders to display what's on sale on your frontend.

Fetch a listing

You can fetch orders from your order book by specific parameters:

fetchAllOrders() - fetches all orders
fetchOrdersByTokenAddress({tokenAddress}) - fetch all orders for a specific token address
fetchOrdersByWalletAddress({tokenOwner}) - fetch all orders for a specific wallet address

The example below shows how to fetch orders using the 3 methods above.

import { useState } from 'react'
import { useFetchOrders } from '@cranetech/sdk'

function App() {
  const [allOrders, setAllOrders] = useState([])
  const [tokenAddressOrders, setTokenAddressOrders] = useState([])
  const [walletAddressOrders, setWalletAddressOrders] = useState([])

  // Retrieve fetch functions from the useFetchOrders hook
  const { fetchOrders, fetchOrdersByTokenAddress, fetchOrdersByWalletAddress } =
    useFetchOrders()

  const tokenAddress = '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D' // YOUR COLLECTION ADDRESS
  const tokenOwnerAddress = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045' // YOUR HOLDERS ADDRESS

  useEffect(() => {
    const callFetchOrders = async () => {
      // Fetch all active orders from order book
      const allOrders = await fetchAllOrders()
      setAllOrders(allOrders)

      // Fetch all active orders for a specific token owner
      // Generally used in a Profile page to show all active orders for a specific user
      const ordersByWalletAddress = await fetchOrdersByWalletAddress(
        walletAddress
      )
      setWalletAddressOrders(ordersByWalletAddress)

      // Fetch all actives orders for a collection
      // Generally used in a Collection gallery page to show all active orders for a whole collection
      const ordersByTokenAddress = await fetchOrdersByTokenAddress(tokenAddress)
      setTokenAddressOrders(ordersByTokenAddress)
    }
    callFetchOrders()
  }, [])

  return (
    <div>
      {allOrders.map((order, index) => {
        return (
          <div key={index}>
            <p>Token ID: {order.tokenId}</p>
            <p>Token Address: {order.tokenAddress}</p>
            <p>Token Owner: {order.tokenOwner}</p>
            <p>Price: {order.price}</p>
            <p>Expires: {order.endTime}</p>
          </div>
        )
      })}
    </div>
  )
}