Orders

@orderly.network/hooks provides the following hooks related to order management.

useOrderEntry - Creating orders
useOrderStream - Retrieving, editing and cancelling orders

Order entry

The useOrderEntry hook provides a variety of supporting functions according to input parameters and the prevailing market data. For more information, please see the API page.

export interface OrderEntryReturn {
  onSubmit: (values: OrderEntity) => Promise<any>;
  maxQty: number;
  freeCollateral: number;
  markPrice: number;
 
  symbolConfig: API.SymbolExt;
  helper: {
    calculate: (values: any, field: string, value: any) => any;
    validator: (values: any) => any;
  };
}
 
const useOrderEntry = (
  symbol: string,
  side: OrderSide,
  reduceOnly: boolean = false,
): OrderEntryReturn

Real-time data

useOrderEntry provides some real-time data that the UI will use when creating orders based on the latest market data.

maxQty: The maximum quantity that the user can trade based on the free collateral.
freeCollateral: The amount collateral available for trading, factoring in open positions and pending orders.
markPrice: The mark price of the symbol.

Data calculations

The useOrderEntry hook provdes a calculate() function to format users' input:

Converts the input quantity into USDC
Truncates the input quantity and price according to the symbol's tick size

const {
  helper: { calculate },
} = useOrderEntry("PERP_ETH_USDC", OrderSide.BUY, false);
 
const newValue = calculate(values, "order_quantity", 1);

Order validations

Order inputs should be validated by the frontend before submitting to provides the best user experience.

const {
  helper: { validator },
} = useOrderEntry("PERP_ETH_USDC", OrderSide.BUY, false);
 
const errors = validator(values);

Placing orders

const { onSubmit } = useOrderEntry("PERP_ETH_USDC", OrderSide.BUY, false);
 
const onSubmit = async (values) => {
  const res = await onSubmit(values);
  //...
};

Managing orders

useOrderStream provides a list of orders, as well as order management functionalities.

export const useOrderStream = ({
  status,
  symbol,
  side,
  size = 100,
}: {
  symbol?: string;
  status?: OrderStatus;
  size?: number;
  side?: OrderSide;
} = {}): any

Order list

Supports displaying all orders or only orders related to the current symbol (controlled by the symbol parameter).
Can filter orders according to the order status or order side.

import { useOrderStream } from "@orderly.network/hooks";
 
export const Example() = >{
  const [orders] = useOrderStream({ status: OrderStatus.NEW });
 
  //...
}

Editing orders

import { useOrderStream } from "@orderly.network/hooks";
 
export const Example = () => {
  const [_, { updateOrder }] = useOrderStream({ status: OrderStatus.NEW });
  //...
  const onEdit = async (id, values) => {
    const res = await updateOrder(id, values);
    //...
  };
};

Cancelling orders

import { useOrderStream } from "@orderly.network/hooks";
 
export const Example = () => {
  const [_, { cancelOrder }] = useOrderStream({ status: OrderStatus.NEW });
  //...
  const onCancel = async (orderId) => {
    const res = await cancelOrder("<orderId>");
    //...
  };
};

Withdraw Positions