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 ordersfetchOrdersByTokenAddress(tokenAddress)
- All orders for a specific token addressfetchOrdersByWalletAddress(walletAddress)
- All orders for a specific wallet addressfetchOrdersByToken({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>
)
}