@orderly.network/hooks 1.0.29 → 1.1.1

package/dist/index.js

@@ -28,9 +28,9 @@ var useSWRSubscription__default = /*#__PURE__*/_interopDefault(useSWRSubscriptio
 // src/version.ts
 if (typeof window !== "undefined") {
   window.__ORDERLY_VERSION__ = window.__ORDERLY_VERSION__ || {};
-  window.__ORDERLY_VERSION__["@orderly.network/hooks"] = "1.0.29";
+  window.__ORDERLY_VERSION__["@orderly.network/hooks"] = "1.1.1";
 }
-var version_default = "1.0.29";
+var version_default = "1.1.1";
 var fetcher = (url, init = {}, queryOptions) => net.get(url, init, queryOptions?.formatter);
 var OrderlyContext = React.createContext({
   // configStore: new MemoryConfigStore(),
@@ -201,7 +201,6 @@ var signatureMiddleware = (useSWRNext) => {
       };
       return useSWRNext(key, extendedFetcher, config);
     } catch (e) {
-      console.error("signature error:", e);
       throw e;
     }
   };
@@ -346,23 +345,16 @@ function useSessionStorage(key, initialValue) {
       const item = window.sessionStorage.getItem(key);
       return item ? parseJSON(item) : initialValue;
     } catch (error) {
-      console.warn(`Error reading sessionStorage key \u201C${key}\u201D:`, error);
       return initialValue;
     }
   }, [initialValue, key]);
   const [storedValue, setStoredValue] = React.useState(readValue);
   const setValue = (value) => {
-    if (typeof window == "undefined") {
-      console.warn(
-        `Tried setting sessionStorage key \u201C${key}\u201D even though environment is not a client`
-      );
-    }
     try {
       const newValue = value instanceof Function ? value(storedValue) : value;
       window.sessionStorage.setItem(key, JSON.stringify(newValue));
       setStoredValue(newValue);
     } catch (error) {
-      console.warn(`Error setting sessionStorage key \u201C${key}\u201D:`, error);
     }
   };
   React.useEffect(() => {
@@ -397,24 +389,18 @@ function useLocalStorage(key, initialValue) {
       const item = window.localStorage.getItem(key);
       return item ? parseJSON(item) : initialValue;
     } catch (error) {
-      console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
       return initialValue;
     }
   }, [initialValue, key]);
   const [storedValue, setStoredValue] = React.useState(readValue);
   const setValue = React.useCallback(
     (value) => {
-      if (typeof window === "undefined") {
-        console.warn(
-          `Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`
-        );
-      }
       try {
         const newValue = value instanceof Function ? value(storedValue) : value;
         window.localStorage.setItem(key, JSON.stringify(newValue));
+        window.dispatchEvent(new Event("storage"));
         setStoredValue(() => newValue);
       } catch (error) {
-        console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
       }
     },
     [storedValue]
@@ -422,6 +408,18 @@ function useLocalStorage(key, initialValue) {
   React.useEffect(() => {
     setStoredValue(readValue());
   }, []);
+  React.useEffect(() => {
+    const handleStorageChange = (event) => {
+      if (event?.key && event.key !== key) {
+        return;
+      }
+      setStoredValue(readValue());
+    };
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [key]);
   return [storedValue, setValue];
 }
 var WS_NAME = "nativeWebsocketClient";
@@ -459,36 +457,48 @@ var useWS = () => {
   });
   return ws;
 };
-var usePrivateDataObserver = () => {
+var usePrivateDataObserver = (options) => {
   const ws = useWS();
   const { mutate: mutate2 } = useSWR.useSWRConfig();
   const ee = useEventEmitter();
   const { state } = useAccount();
-  const updateOrders = useDebounce.useDebouncedCallback(() => {
-    mutate2(
-      useSWRInfinite.unstable_serialize(() => [
-        `/v1/orders?size=100&page=1&status=${types.OrderStatus.INCOMPLETE}`,
-        state.accountId
-      ])
-    );
-    mutate2(
-      useSWRInfinite.unstable_serialize(() => [
-        `/v1/orders?size=100&page=1&status=${types.OrderStatus.NEW}`,
-        state.accountId
-      ])
-    );
+  const updateOrders = useDebounce.useDebouncedCallback((data) => {
+    const map = options.getKeysMap("orders");
+    map.forEach((getKey, key) => {
+      mutate2(
+        useSWRInfinite.unstable_serialize((index, prevData) => [
+          getKey(index, prevData),
+          state.accountId
+        ])
+      );
+    });
   }, 500);
   React.useEffect(() => {
     if (!state.accountId)
       return;
     const unsubscribe = ws.privateSubscribe("executionreport", {
       onMessage: (data) => {
-        updateOrders();
+        updateOrders(data);
         ee.emit("orders:changed", data);
       }
     });
     return () => unsubscribe?.();
   }, [state.accountId]);
+  React.useEffect(() => {
+    if (!state.accountId)
+      return;
+    const unsubscribe = ws.privateSubscribe("algoexecutionreport", {
+      onMessage: (data) => {
+        updateOrders(data);
+        if (Array.isArray(data)) {
+          data.forEach((item) => ee.emit("orders:changed", { ...item, status: item.algoStatus }));
+        } else {
+          ee.emit("orders:changed", { ...data, status: data.algoStatus });
+        }
+      }
+    });
+    return () => unsubscribe?.();
+  }, [state.accountId]);
   React.useEffect(() => {
     if (!state.accountId)
       return;
@@ -547,15 +557,31 @@ var usePrivateDataObserver = () => {
 var DataCenterContext = React.createContext(
   {}
 );
+var useDataCenterContext = () => React.useContext(DataCenterContext);
 var DataCenterProvider = ({ children }) => {
   const { error, done } = usePreLoadData();
-  usePrivateDataObserver();
+  const getKeyHandlerMapRef = React.useRef(/* @__PURE__ */ new Map());
+  usePrivateDataObserver({
+    getKeysMap(type) {
+      return getKeyHandlerMapRef.current;
+    }
+  });
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Data load failed" });
   }
   if (!done)
     return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(DataCenterContext.Provider, { value: {}, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataCenterContext.Provider,
+    {
+      value: {
+        regesterKeyHandler: (key, fun) => {
+          getKeyHandlerMapRef.current.set(key, fun);
+        }
+      },
+      children
+    }
+  );
 };
 var OrderlyConfigProvider = (props) => {
   const [account5, setAccount] = React__default.default.useState(null);
@@ -568,9 +594,6 @@ var OrderlyConfigProvider = (props) => {
     enableSwapDeposit,
     contracts
   } = props;
-  if (!brokerId && typeof configStore === "undefined") {
-    console.error("[OrderlyConfigProvider]: brokerId is required");
-  }
   const innerConfigStore = useConstant4__default.default(() => {
     return configStore || new core.DefaultConfigStore({ brokerId, networkId });
   });
@@ -794,7 +817,7 @@ var reduceItems = (depth, level, data, asks = false) => {
   const result = [];
   if (typeof depth !== "undefined") {
     const prices = /* @__PURE__ */ new Map();
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < ramda.min(level, data.length); i++) {
       const [price, quantity] = data[i];
       if (isNaN(price) || isNaN(quantity))
         continue;
@@ -829,7 +852,8 @@ var reduceItems = (depth, level, data, asks = false) => {
     if (isNaN(price) || isNaN(quantity))
       continue;
     const newQuantity = new utils.Decimal(quantity).add(result.length > 0 ? result[result.length - 1][2] : 0).toNumber();
-    result.push([price, quantity, newQuantity]);
+    const newAmount = new utils.Decimal(quantity * price).add(result.length > 0 ? result[result.length - 1][3] : 0).toNumber();
+    result.push([price, quantity, newQuantity, newAmount]);
   }
   return result;
 };
@@ -860,9 +884,11 @@ var reduceOrderbook = (depth, level, data) => {
     }
   }
   asks = asks.reverse();
+  asks = asks.length < level ? paddingFn(level - asks.length).concat(asks) : asks;
+  bids = bids.length < level ? bids.concat(paddingFn(level - bids.length)) : bids;
   return {
-    asks: asks.length < level ? paddingFn(level - asks.length).concat(asks) : asks,
-    bids: bids.length < level ? bids.concat(paddingFn(level - bids.length)) : bids
+    asks,
+    bids
   };
 };
 var mergeItems = (data, update) => {
@@ -902,7 +928,7 @@ var mergeOrderbook = (data, update) => {
 var INIT_DATA = { asks: [], bids: [] };
 var useOrderbookStream = (symbol, initial = INIT_DATA, options) => {
   if (!symbol) {
-    throw new Error("useOrderbookStream requires a symbol");
+    throw new types.SDKError("useOrderbookStream requires a symbol");
   }
   const level = options?.level ?? 10;
   const [requestData, setRequestData] = React.useState(null);
@@ -1010,6 +1036,12 @@ var useOrderbookStream = (symbol, initial = INIT_DATA, options) => {
     asks: [...data.asks],
     bids: [...data.bids]
   });
+  React.useEffect(() => {
+    eventEmitter.emit("orderbook:update", [
+      reducedData.asks[0][0],
+      reducedData.bids[0][0]
+    ]);
+  }, [reducedData.asks[0][0], reducedData.bids[0][0]]);
   return [
     {
       asks: reducedData.asks.slice(-level),
@@ -1020,13 +1052,28 @@ var useOrderbookStream = (symbol, initial = INIT_DATA, options) => {
     { onDepthChange, depth, allDepths: depths, isLoading, onItemClick }
   ];
 };
-var needNumberOnlyFields = ["order_quantity", "order_price", "total"];
+var needNumberOnlyFields = [
+  "order_quantity",
+  "order_price",
+  "total"
+];
+var cleanStringStyle = (str) => {
+  if (typeof str !== "string") {
+    str = str.toString();
+  }
+  str = str.replace(/,/g, "");
+  str = str.replace(/[^\d.]/g, "").replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
+  return str;
+};
 function baseInputHandle(inputs) {
   let [values, input, value, markPrice, config] = inputs;
+  needNumberOnlyFields.forEach((field) => {
+    if (typeof values[field] !== "undefined") {
+      values[field] = cleanStringStyle(values[field]);
+    }
+  });
   if (needNumberOnlyFields.includes(input)) {
-    value = value.toString();
-    value = value.replace(/,/g, "");
-    value = value.replace(/[^\d.]/g, "");
+    value = cleanStringStyle(value);
   }
   return [
     {
@@ -1056,15 +1103,23 @@ function priceInputHandle(inputs) {
     values.order_price = price.toDecimalPlaces(config.quoteDP).toString();
   }
   price.toDecimalPlaces(Math.min(priceDP, config.quoteDP));
-  if (!values.order_quantity) {
+  if (!values.order_quantity && !values.total) {
     return [values, input, value, markPrice, config];
   }
-  const total = price.mul(values.order_quantity);
+  const newValue = {
+    ...values
+  };
+  if (values.order_quantity) {
+    newValue.total = price.mul(values.order_quantity).todp(2).toString();
+  } else if (values.total) {
+    newValue.order_quantity = new utils.Decimal(values.total).div(price).todp(config.baseDP).toString();
+  }
   return [
-    {
-      ...values,
-      total: total.todp(2).toString()
-    },
+    // {
+    //   ...values,
+    //   total: total.todp(2).toString(),
+    // },
+    newValue,
     input,
     value,
     markPrice,
@@ -1082,11 +1137,11 @@ function quantityInputHandle(inputs) {
     quantity = quantity.toDecimalPlaces(config.baseDP);
     values.order_quantity = quantity.toNumber();
   }
-  if (values.order_type === types.OrderType.MARKET) {
+  if (values.order_type === types.OrderType.MARKET || values.order_type === types.OrderType.STOP_MARKET) {
     const price = markPrice;
     values.total = quantity.mul(price).todp(2).toNumber();
   }
-  if (values.order_type === types.OrderType.LIMIT) {
+  if (values.order_type === types.OrderType.LIMIT || values.order_type === types.OrderType.STOP_LIMIT) {
     if (values.order_price) {
       const price = Number(values.order_price);
       const total = quantity.mul(price);
@@ -1112,7 +1167,7 @@ function totalInputHandle(inputs) {
     return [{ ...values, order_quantity: "" }, input, value, markPrice, config];
   }
   let price = markPrice;
-  if (values.order_type === types.OrderType.LIMIT && !!values.order_price) {
+  if ((values.order_type === types.OrderType.LIMIT || values.order_type === types.OrderType.STOP_LIMIT) && !!values.order_price) {
     price = Number(values.order_price);
   }
   let total = new utils.Decimal(value);
@@ -1220,6 +1275,60 @@ var parseHolding = (holding, markPrices) => {
   });
   return [USDC_holding, nonUSDC];
 };
+var useMarketsStream = () => {
+  const ws = useWS();
+  const { data: futures } = useQuery(`/v1/public/futures`, {
+    revalidateOnFocus: false
+  });
+  const { data: tickers } = useSWRSubscription__default.default("tickers", (_, { next }) => {
+    const unsubscribe = ws.subscribe(
+      // { event: "subscribe", topic: "markprices" },
+      "tickers",
+      {
+        onMessage: (message) => {
+          next(null, message);
+        }
+        // onUnsubscribe: () => {
+        //   return "markprices";
+        // },
+        // onError: (error: any) => {
+        //
+        // },
+      }
+    );
+    return () => {
+      unsubscribe?.();
+    };
+  });
+  const value = React.useMemo(() => {
+    if (!futures)
+      return null;
+    if (!tickers)
+      return futures;
+    return futures.map((item) => {
+      const ticker = tickers.find(
+        (t) => t.symbol === item.symbol
+      );
+      if (ticker) {
+        const data = {
+          ...item,
+          ["24h_close"]: ticker.close,
+          ["24h_open"]: ticker.open,
+          ["24h_volumn"]: ticker.volume,
+          change: 0
+        };
+        if (ticker.close !== void 0 && ticker.open !== void 0) {
+          data["change"] = new utils.Decimal(ticker.close).minus(ticker.open).div(ticker.open).toNumber();
+        }
+        return data;
+      }
+      return item;
+    });
+  }, [futures, tickers]);
+  return { data: value };
+};
+
+// src/orderly/usePositionStream.ts
 var usePositionStream = (symbol, options) => {
   const symbolInfo = useSymbolsInfo();
   const { data: accountInfo } = usePrivateQuery("/v1/client/info");
@@ -1235,7 +1344,7 @@ var usePositionStream = (symbol, options) => {
   const {
     data,
     error,
-    mutate: updatePositions
+    mutate: refreshPositions
   } = usePrivateQuery(`/v1/positions`, {
     // revalidateOnFocus: false,
     // revalidateOnReconnect: false,
@@ -1248,6 +1357,20 @@ var usePositionStream = (symbol, options) => {
     }
   });
   const { data: markPrices } = useMarkPricesStream();
+  const [priceMode, setPriceMode] = React.useState(options?.calcMode || "markPrice");
+  React.useEffect(() => {
+    if (options?.calcMode && priceMode !== options?.calcMode) {
+      setPriceMode(options?.calcMode);
+    }
+  }, [options?.calcMode]);
+  const { data: tickers } = useMarketsStream();
+  const tickerPrices = React.useMemo(() => {
+    const data2 = /* @__PURE__ */ Object.create(null);
+    tickers?.forEach((item) => {
+      data2[item.symbol] = item["24h_close"];
+    });
+    return data2;
+  }, [tickers]);
   const formatedPositions = React.useMemo(() => {
     if (!data?.rows || !symbolInfo || !accountInfo)
       return null;
@@ -1256,6 +1379,11 @@ var usePositionStream = (symbol, options) => {
     });
     let unrealPnL_total = utils.zero, notional_total = utils.zero, unsettlementPnL_total = utils.zero;
     const formatted = filteredData.map((item) => {
+      const unRealizedPrice = ramda.propOr(
+        item.mark_price,
+        item.symbol,
+        priceMode === "markPrice" ? markPrices : tickerPrices
+      );
       const price = ramda.propOr(
         item.mark_price,
         item.symbol,
@@ -1265,8 +1393,8 @@ var usePositionStream = (symbol, options) => {
       const notional = perp.positions.notional(item.position_qty, price);
       const unrealPnl = perp.positions.unrealizedPnL({
         qty: item.position_qty,
-        openPrice: item.average_open_price,
-        markPrice: price
+        openPrice: item?.average_open_price,
+        markPrice: unRealizedPrice
       });
       const imr = perp.account.IMR({
         maxLeverage: accountInfo.max_leverage,
@@ -1313,7 +1441,16 @@ var usePositionStream = (symbol, options) => {
         unsettledPnL: unsettlementPnL_total.toNumber()
       }
     ];
-  }, [data?.rows, symbolInfo, accountInfo, markPrices, symbol, holding]);
+  }, [
+    data?.rows,
+    symbolInfo,
+    accountInfo,
+    markPrices,
+    priceMode,
+    tickerPrices,
+    symbol,
+    holding
+  ]);
   const [totalCollateral, totalValue, totalUnrealizedROI] = React.useMemo(() => {
     if (!holding || !markPrices) {
       return [utils.zero, utils.zero, 0];
@@ -1343,7 +1480,7 @@ var usePositionStream = (symbol, options) => {
     if (!symbolInfo || !accountInfo)
       return formatedPositions[0];
     const total = totalCollateral.toNumber();
-    return formatedPositions[0].filter((item) => item.position_qty !== 0).map((item) => {
+    let rows = formatedPositions[0].filter((item) => item.position_qty !== 0).map((item) => {
       const info = symbolInfo?.[item.symbol];
       const MMR = perp.positions.MMR({
         baseMMR: info("base_mmr"),
@@ -1359,15 +1496,29 @@ var usePositionStream = (symbol, options) => {
           markPrice: item.mark_price,
           MMR
         }),
-        est_liq_price: perp.positions.liqPrice({
-          markPrice: item.mark_price,
-          totalCollateral: total,
-          positionQty: item.position_qty,
-          MMR
-        }),
-        MMR
+        // est_liq_price: positions.liqPrice({
+        //   markPrice: item.mark_price,
+        //   totalCollateral: total,
+        //   positionQty: item.position_qty,
+        //   MMR,
+        // }),
+        mmr: MMR
+      };
+    });
+    rows = rows.map((item) => {
+      const est_liq_price = perp.positions.liqPrice({
+        markPrice: item.mark_price,
+        totalCollateral: total,
+        positionQty: item.position_qty,
+        positions: rows,
+        MMR: item.mmr
+      });
+      return {
+        ...item,
+        est_liq_price
       };
     });
+    return rows;
   }, [formatedPositions, symbolInfo, accountInfo, totalCollateral]);
   return [
     {
@@ -1386,10 +1537,8 @@ var usePositionStream = (symbol, options) => {
       loading: false,
       // showSymbol,
       error,
-      loadMore: () => {
-      },
-      refresh: () => {
-      }
+      // loadMore: () => {},
+      refresh: refreshPositions
     }
   ];
 };
@@ -1450,6 +1599,7 @@ var useHoldingStream = () => {
 var useOrderStream = (params) => {
   const { status, symbol, side, size = 100 } = params;
   const { data: markPrices = {} } = useMarkPricesStream();
+  const { regesterKeyHandler } = useDataCenterContext();
   const [
     doCancelOrder,
     { error: cancelOrderError, isMutating: cancelMutating }
@@ -1458,65 +1608,124 @@ var useOrderStream = (params) => {
     doUpdateOrder,
     { error: updateOrderError, isMutating: updateMutating }
   ] = useMutation("/v1/order", "PUT");
-  const ordersResponse = usePrivateInfiniteQuery(
-    (pageIndex, previousPageData) => {
-      if (previousPageData && !previousPageData.rows?.length)
-        return null;
-      const search = new URLSearchParams([
-        ["size", size.toString()],
-        ["page", `${pageIndex + 1}`]
-      ]);
-      if (status) {
-        search.set(`status`, status);
-      }
-      if (symbol) {
-        search.set(`symbol`, symbol);
-      }
-      if (side) {
-        search.set(`side`, side);
-      }
-      return `/v1/orders?${search.toString()}`;
-    },
-    {
-      initialSize: 1,
-      // revalidateFirstPage: false,
-      // onError: (err) => {
-      //   console.error("fetch failed::::", err);
-      // },
-      formatter: (data) => data
+  const [
+    doCanceAlgolOrder,
+    { error: cancelAlgoOrderError, isMutating: cancelAlgoMutating }
+  ] = useMutation("/v1/algo/order", "DELETE");
+  const [
+    doUpdateAlgoOrder,
+    { error: updateAlgoOrderError, isMutating: updateAlgoMutating }
+  ] = useMutation("/v1/algo/order", "PUT");
+  const getKey = (pageIndex, previousPageData) => {
+    if (previousPageData && !previousPageData.rows?.length)
+      return null;
+    const search = new URLSearchParams([
+      ["size", size.toString()],
+      ["page", `${pageIndex + 1}`],
+      ["source_type", "ALL"]
+    ]);
+    if (status) {
+      search.set(`status`, status);
     }
-  );
-  const orders = React.useMemo(() => {
+    if (symbol) {
+      search.set(`symbol`, symbol);
+    }
+    if (side) {
+      search.set(`side`, side);
+    }
+    return `/v1/orders?${search.toString()}`;
+  };
+  React.useEffect(() => {
+    const key = `orders:${status}:${symbol}:${side}`;
+    regesterKeyHandler(key, getKey);
+  }, [status, symbol, side]);
+  const ordersResponse = usePrivateInfiniteQuery(getKey, {
+    initialSize: 1,
+    // revalidateFirstPage: false,
+    // onError: (err) => {
+    //   console.error("fetch failed::::", err);
+    // },
+    formatter: (data) => data
+  });
+  const flattenOrders = React.useMemo(() => {
     if (!ordersResponse.data) {
       return null;
     }
-    return ordersResponse.data?.map((item) => item.rows)?.flat().map((item) => {
+    return ordersResponse.data?.map((item) => item.rows)?.flat();
+  }, [ordersResponse.data]);
+  const orders = React.useMemo(() => {
+    if (!flattenOrders) {
+      return null;
+    }
+    if (status !== types.OrderStatus.NEW && status !== types.OrderStatus.INCOMPLETE) {
+      return flattenOrders;
+    }
+    return flattenOrders.map((item) => {
       return {
         ...item,
         mark_price: markPrices[item.symbol] ?? 0
       };
     });
-  }, [ordersResponse.data, markPrices]);
+  }, [flattenOrders, markPrices, status]);
   const total = React.useMemo(() => {
     return ordersResponse.data?.[0]?.meta?.total || 0;
   }, [ordersResponse.data?.[0]?.meta?.total]);
   const cancelAllOrders = React.useCallback(() => {
   }, [ordersResponse.data]);
-  const updateOrder = React.useCallback((orderId, order2) => {
-    return doUpdateOrder({ ...order2, order_id: orderId });
+  const _updateOrder = React.useCallback((orderId, order3, type) => {
+    switch (type) {
+      case "algoOrder":
+        return doUpdateAlgoOrder({
+          order_id: orderId,
+          price: order3["order_price"],
+          quantity: order3["order_quantity"],
+          trigger_price: order3["trigger_price"]
+        });
+      default:
+        return doUpdateOrder({ ...order3, order_id: orderId });
+    }
+  }, []);
+  const updateOrder = React.useCallback((orderId, order3) => {
+    return _updateOrder(orderId, order3, "normalOrder");
+  }, []);
+  const updateAlgoOrder = React.useCallback((orderId, order3) => {
+    return _updateOrder(orderId, order3, "algoOrder");
+  }, []);
+  const _cancelOrder = React.useCallback((orderId, type, symbol2) => {
+    switch (type) {
+      case "algoOrder":
+        return doCanceAlgolOrder(null, {
+          // @ts-ignore
+          order_id: orderId,
+          symbol: symbol2,
+          source: `SDK${version_default}`
+        }).then((res) => {
+          if (res.success) {
+            ordersResponse.mutate();
+            return res;
+          } else {
+            throw new Error(res.message);
+          }
+        });
+      default:
+        return doCancelOrder(null, {
+          order_id: orderId,
+          symbol: symbol2,
+          source: `SDK_${version_default}`
+        }).then((res) => {
+          if (res.success) {
+            return res;
+          } else {
+            throw new Error(res.message);
+          }
+        });
+    }
   }, []);
   const cancelOrder = React.useCallback((orderId, symbol2) => {
-    return doCancelOrder(null, {
-      order_id: orderId,
-      symbol: symbol2,
-      source: "mweb"
-    }).then((res) => {
-      if (res.success) {
-        return res;
-      } else {
-        throw new Error(res.message);
-      }
-    });
+    return _cancelOrder(orderId, "normalOrder", symbol2);
+  }, []);
+  const cancelAlgoOrder = React.useCallback((orderId, symbol2) => {
+    return _cancelOrder(orderId, "algoOrder", symbol2);
   }, []);
   const loadMore = () => {
     ordersResponse.setSize(ordersResponse.size + 1);
@@ -1526,17 +1735,24 @@ var useOrderStream = (params) => {
     {
       total,
       isLoading: ordersResponse.isLoading,
+      refresh: ordersResponse.mutate,
       loadMore,
       cancelAllOrders,
       updateOrder,
       cancelOrder,
+      updateAlgoOrder,
+      cancelAlgoOrder,
       errors: {
         cancelOrder: cancelOrderError,
-        updateOrder: updateOrderError
+        updateOrder: updateOrderError,
+        cancelAlgoOrder: cancelAlgoOrderError,
+        updateAlgoOrder: updateAlgoOrderError
       },
       submitting: {
         cancelOrder: cancelMutating,
-        updateOrder: updateMutating
+        updateOrder: updateMutating,
+        cancelAlgoOrder: cancelAlgoMutating,
+        updateAlglOrder: updateAlgoMutating
       }
     }
   ];
@@ -1547,31 +1763,32 @@ var positionsPath = ramda.pathOr([], [0, "rows"]);
 ramda.pathOr(0, [0, "totalCollateral"]);
 var useCollateral = (options = { dp: 6 }) => {
   const { dp } = options;
-  const positions2 = usePositionStream();
+  const positions3 = usePositionStream();
   const [orders] = useOrderStream({ status: types.OrderStatus.NEW });
   const { data: accountInfo } = usePrivateQuery("/v1/client/info");
   const symbolInfo = useSymbolsInfo();
   const { data: markPrices } = useMarkPricesStream();
   const { usdc } = useHoldingStream();
+  const filterAlgoOrders = orders?.filter((item) => item.algo_order_id === void 0) ?? [];
   const [totalCollateral, totalValue] = React.useMemo(() => {
     return [
-      ramda.pathOr(utils.zero, [0, "totalCollateral"], positions2),
-      ramda.pathOr(utils.zero, [0, "totalValue"], positions2)
+      ramda.pathOr(utils.zero, [0, "totalCollateral"], positions3),
+      ramda.pathOr(utils.zero, [0, "totalValue"], positions3)
     ];
-  }, [positions2, markPrices]);
+  }, [positions3, markPrices]);
   const totalInitialMarginWithOrders = React.useMemo(() => {
     if (!accountInfo || !symbolInfo || !markPrices) {
       return 0;
     }
     return perp.account.totalInitialMarginWithOrders({
-      positions: positionsPath(positions2),
-      orders: orders ?? [],
+      positions: positionsPath(positions3),
+      orders: filterAlgoOrders,
       markPrices,
       IMR_Factors: accountInfo.imr_factor,
       maxLeverage: accountInfo.max_leverage,
       symbolInfo
     });
-  }, [positions2, orders, markPrices, accountInfo, symbolInfo]);
+  }, [positions3, filterAlgoOrders, markPrices, accountInfo, symbolInfo]);
   const freeCollateral = React.useMemo(() => {
     return perp.account.freeCollateral({
       totalCollateral,
@@ -1581,15 +1798,18 @@ var useCollateral = (options = { dp: 6 }) => {
   const availableBalance = React.useMemo(() => {
     return perp.account.availableBalance({
       USDCHolding: usdc?.holding ?? 0,
-      unsettlementPnL: pathOr_unsettledPnLPathOr(positions2)
+      unsettlementPnL: pathOr_unsettledPnLPathOr(positions3)
     });
-  }, [usdc, pathOr_unsettledPnLPathOr(positions2)]);
+  }, [usdc?.holding, pathOr_unsettledPnLPathOr(positions3)]);
   return {
     totalCollateral: totalCollateral.toDecimalPlaces(dp).toNumber(),
     freeCollateral: freeCollateral.toDecimalPlaces(dp).toNumber(),
     totalValue: totalValue.toDecimalPlaces(dp).toNumber(),
     availableBalance,
-    unsettledPnL: pathOr_unsettledPnLPathOr(positions2)
+    unsettledPnL: pathOr_unsettledPnLPathOr(positions3),
+    accountInfo,
+    // @hidden
+    positions: positionsPath(positions3)
   };
 };
 var positionsPath2 = ramda.pathOr([], [0, "rows"]);
@@ -1603,8 +1823,8 @@ var useMaxQty = (symbol, side, reduceOnly = false) => {
   const maxQty = React.useMemo(() => {
     if (!symbol)
       return 0;
-    const positions2 = positionsPath2(positionsData);
-    const positionQty = perp.account.getQtyFromPositions(positions2, symbol);
+    const positions3 = positionsPath2(positionsData);
+    const positionQty = perp.account.getQtyFromPositions(positions3, symbol);
     if (reduceOnly) {
       if (positionQty > 0) {
         if (side === types.OrderSide.BUY) {
@@ -1625,20 +1845,21 @@ var useMaxQty = (symbol, side, reduceOnly = false) => {
     if (!markPrices || !markPrices[symbol] || !orders || !accountInfo)
       return 0;
     const getSymbolInfo = symbolInfo[symbol];
+    const filterAlgoOrders = orders.filter((item) => item.algo_order_id === void 0);
     const buyOrdersQty = perp.account.getQtyFromOrdersBySide(
-      orders,
+      filterAlgoOrders,
       symbol,
       types.OrderSide.BUY
     );
     const sellOrdersQty = perp.account.getQtyFromOrdersBySide(
-      orders,
+      filterAlgoOrders,
       symbol,
       types.OrderSide.SELL
     );
-    const otherPositions = positions2.filter(
+    const otherPositions = positions3.filter(
       (item) => item.symbol !== symbol
     );
-    const otherOrders = orders.filter(
+    const otherOrders = filterAlgoOrders.filter(
       (item) => item.symbol !== symbol
     );
     const otherIMs = perp.account.otherIMs({
@@ -1674,27 +1895,36 @@ var useMaxQty = (symbol, side, reduceOnly = false) => {
     totalCollateral,
     reduceOnly
   ]);
-  return maxQty;
+  return Math.max(maxQty, 0);
 };
-var { maxPrice, minPrice } = perp.order;
+var { maxPrice, minPrice, scropePrice } = perp.order;
 var BaseOrderCreator = class {
   baseOrder(data) {
-    const order2 = {
-      // symbol: data.symbol,
+    const order3 = {
+      symbol: data.symbol,
       order_type: data.order_type === types.OrderType.LIMIT ? !!data.order_type_ext ? data.order_type_ext : data.order_type : data.order_type,
       side: data.side,
       reduce_only: data.reduce_only,
-      order_quantity: data.order_quantity
+      order_quantity: data.order_quantity,
+      total: data.total
     };
     if (data.visible_quantity === 0) {
-      order2.visible_quantity = data.visible_quantity;
+      order3.visible_quantity = data.visible_quantity;
     }
-    return order2;
+    return order3;
   }
   baseValidate(values, configs) {
     const errors = {};
     const { maxQty } = configs;
-    const { order_quantity, total } = values;
+    let { order_quantity, total, order_price } = values;
+    if (!order_quantity) {
+      if (total && order_price) {
+        const { quote_dp } = configs.symbol;
+        const totalNumber = new utils.Decimal(total);
+        const qty = totalNumber.dividedBy(order_price).toFixed(quote_dp);
+        order_quantity = qty;
+      }
+    }
     if (!order_quantity) {
       errors.order_quantity = {
         type: "required",
@@ -1740,13 +1970,28 @@ var BaseOrderCreator = class {
     }
     return Promise.resolve(errors);
   }
+  fixOrderQuantity(order3, config) {
+    if (!order3.order_quantity && order3.total && order3.order_price) {
+      const { base_dp } = config.symbol;
+      const totalNumber = new utils.Decimal(order3.total);
+      const qty = totalNumber.div(order3.order_price).toDecimalPlaces(base_dp);
+      order3.order_quantity = qty.toNumber();
+      delete order3.total;
+    }
+    return order3;
+  }
 };
 var LimitOrderCreator = class extends BaseOrderCreator {
-  create(values) {
-    return {
+  create(values, config) {
+    const order3 = {
       ...this.baseOrder(values),
       order_price: values.order_price
     };
+    this.fixOrderQuantity(order3, config);
+    delete order3["total"];
+    delete order3["trigger_price"];
+    delete order3["isStopOrder"];
+    return order3;
   }
   validate(values, config) {
     return this.baseValidate(values, config).then((errors) => {
@@ -1759,22 +2004,34 @@ var LimitOrderCreator = class extends BaseOrderCreator {
       } else {
         const price = new utils.Decimal(order_price);
         const { symbol } = config;
-        const { price_range } = symbol;
+        const { price_range, price_scope } = symbol;
         const maxPriceNumber = maxPrice(config.markPrice, price_range);
         const minPriceNumber = minPrice(config.markPrice, price_range);
-        console.log(`side: ${side} value:`, values);
-        if (side === "BUY" && price.gt(maxPriceNumber)) {
+        const scropePriceNumbere = scropePrice(
+          config.markPrice,
+          price_scope,
+          side
+        );
+        const priceRange = side === "BUY" ? {
+          min: scropePriceNumbere,
+          max: maxPriceNumber
+        } : {
+          min: minPriceNumber,
+          max: scropePriceNumbere
+        };
+        if (price.gt(priceRange.max)) {
           errors.order_price = {
             type: "max",
-            message: `price must be less than ${new utils.Decimal(
-              maxPriceNumber
+            message: `Price must be less than ${new utils.Decimal(
+              priceRange.max
             ).todp(symbol.quote_dp)}`
           };
-        } else if (side === "SELL" && price.lt(minPriceNumber)) {
+        }
+        if (price.lt(priceRange.min)) {
           errors.order_price = {
             type: "min",
-            message: `price must be greater than ${new utils.Decimal(
-              minPriceNumber
+            message: `Price must be greater than ${new utils.Decimal(
+              priceRange.min
             ).todp(symbol.quote_dp)}`
           };
         }
@@ -1787,6 +2044,9 @@ var MarketOrderCreator = class extends BaseOrderCreator {
   create(values) {
     const data = this.baseOrder(values);
     delete data["order_price"];
+    delete data["total"];
+    delete data["trigger_price"];
+    delete data["isStopOrder"];
     return {
       ...data
     };
@@ -1801,6 +2061,110 @@ var FOKOrderCreator = class extends LimitOrderCreator {
 };
 var IOCOrderCreator = class extends LimitOrderCreator {
 };
+var StopLimitOrderCreator = class extends LimitOrderCreator {
+  create(values, config) {
+    const order3 = {
+      ...this.baseOrder(values),
+      order_price: values.order_price,
+      trigger_price: values.trigger_price,
+      algo_type: "STOP",
+      type: "LIMIT",
+      quantity: values["order_quantity"],
+      price: values["order_price"],
+      trigger_price_type: "MARK_PRICE"
+    };
+    this.fixOrderQuantity(order3, config);
+    delete order3["order_quantity"];
+    delete order3["order_price"];
+    delete order3["isStopOrder"];
+    delete order3["total"];
+    return order3;
+  }
+  validate(values, config) {
+    return this.baseValidate(values, config).then((errors) => {
+      const { order_price, trigger_price, side } = values;
+      if (!order_price) {
+        errors.order_price = {
+          type: "required",
+          message: "price is required"
+        };
+      }
+      if (!trigger_price) {
+        errors.trigger_price = {
+          type: "required",
+          message: "Trigger price is required"
+        };
+      }
+      if (trigger_price && order_price) {
+        const price = new utils.Decimal(order_price);
+        const { symbol } = config;
+        const { price_range, price_scope } = symbol;
+        const maxPriceNumber = maxPrice(trigger_price, price_range);
+        const minPriceNumber = minPrice(trigger_price, price_range);
+        const scropePriceNumbere = scropePrice(
+          trigger_price,
+          price_scope,
+          side
+        );
+        const priceRange = side === "BUY" ? {
+          min: scropePriceNumbere,
+          max: maxPriceNumber
+        } : {
+          min: minPriceNumber,
+          max: scropePriceNumbere
+        };
+        if (price.gt(priceRange.max)) {
+          errors.order_price = {
+            type: "max",
+            message: `Price must be less than ${new utils.Decimal(
+              priceRange.max
+            ).todp(symbol.quote_dp)}`
+          };
+        }
+        if (price.lt(priceRange.min)) {
+          errors.order_price = {
+            type: "min",
+            message: `Price must be greater than ${new utils.Decimal(
+              priceRange.min
+            ).todp(symbol.quote_dp)}`
+          };
+        }
+      }
+      return errors;
+    });
+  }
+};
+var StopMarketOrderCreator = class extends LimitOrderCreator {
+  create(values, _) {
+    const result = {
+      ...this.baseOrder(values),
+      order_price: values.order_price,
+      trigger_price: values.trigger_price,
+      algo_type: "STOP",
+      type: "MARKET",
+      quantity: values["order_quantity"],
+      price: values["order_price"],
+      trigger_price_type: "MARK_PRICE"
+    };
+    delete result["order_quantity"];
+    delete result["order_price"];
+    delete result["isStopOrder"];
+    delete result["total"];
+    return result;
+  }
+  validate(values, config) {
+    return this.baseValidate(values, config).then((errors) => {
+      const { order_price, trigger_price, side } = values;
+      if (!trigger_price) {
+        errors.trigger_price = {
+          type: "required",
+          message: "Trigger price is required"
+        };
+      }
+      return errors;
+    });
+  }
+};
 var GeneralOrderCreator = class extends BaseOrderCreator {
   create(data) {
     return {
@@ -1813,6 +2177,15 @@ var GeneralOrderCreator = class extends BaseOrderCreator {
     return super.baseValidate(values, configs);
   }
 };
+var availableOrderTypes = [
+  types.OrderType.LIMIT,
+  types.OrderType.MARKET,
+  types.OrderType.IOC,
+  types.OrderType.FOK,
+  types.OrderType.POST_ONLY,
+  types.OrderType.STOP_LIMIT,
+  types.OrderType.STOP_MARKET
+];
 var OrderFactory = class {
   static create(type) {
     switch (type) {
@@ -1826,17 +2199,68 @@ var OrderFactory = class {
         return new FOKOrderCreator();
       case types.OrderType.POST_ONLY:
         return new PostOnlyOrderCreator();
+      case types.OrderType.STOP_LIMIT:
+        return new StopLimitOrderCreator();
+      case types.OrderType.STOP_MARKET:
+        return new StopMarketOrderCreator();
       default:
         return new GeneralOrderCreator();
     }
   }
 };
-
-// src/orderly/useOrderEntry.ts
-var useOrderEntry = (symbol, side, reduceOnly = false, options) => {
-  const [doCreateOrder, { data, error, reset, isMutating }] = useMutation("/v1/order");
-  const { freeCollateral } = useCollateral();
+function useOrderEntry(symbolOrOrder, sideOrOptions, reduceOnly, options) {
+  if (typeof symbolOrOrder === "object") {
+    if (!symbolOrOrder.symbol) {
+      throw new types.SDKError("symbol is required");
+    }
+    if (!symbolOrOrder.side) {
+      throw new types.SDKError("Order side is required");
+    }
+    if (!symbolOrOrder.order_type) {
+      throw new types.SDKError("order_type is required");
+    }
+  }
+  const prevOrderData = React.useRef(null);
+  const orderDataCache = React.useRef(null);
+  const notSupportData = React.useRef({});
+  const [doCreateOrder, { data, error, reset, isMutating }] = useMutation(orderDataCache?.current?.isStopOrder ? "/v1/algo/order" : "/v1/order");
+  const [errors, setErrors] = React.useState(null);
+  const ee = useEventEmitter();
+  const fieldDirty = React.useRef({});
+  const submitted = React.useRef(false);
+  const askAndBid = React.useRef([]);
+  const onOrderbookUpdate = useDebounce.useDebouncedCallback((data2) => {
+    askAndBid.current = data2;
+  }, 200);
+  const { freeCollateral, totalCollateral, positions: positions3, accountInfo } = useCollateral();
   const symbolInfo = useSymbolsInfo();
+  const symbol = React.useMemo(() => {
+    if (typeof symbolOrOrder === "string") {
+      return symbolOrOrder;
+    }
+    return symbolOrOrder.symbol;
+  }, [symbolOrOrder]);
+  const optionsValue = React.useMemo(() => {
+    if (typeof sideOrOptions === "object") {
+      return sideOrOptions;
+    }
+    return options;
+  }, [sideOrOptions]);
+  const isReduceOnly = React.useMemo(() => {
+    if (typeof reduceOnly === "boolean") {
+      return reduceOnly;
+    }
+    if (typeof symbolOrOrder === "object") {
+      return !!symbolOrOrder.reduce_only;
+    }
+    return false;
+  }, [symbolOrOrder, reduceOnly]);
+  const sideValue = React.useMemo(() => {
+    if (typeof symbolOrOrder === "object") {
+      return symbolOrOrder.side;
+    }
+    return sideOrOptions;
+  }, [symbolOrOrder, sideOrOptions]);
   const baseDP = React.useMemo(
     () => utils.getPrecisionByNumber(symbolInfo[symbol]("base_tick", 0)),
     [symbolInfo]
@@ -1844,42 +2268,123 @@ var useOrderEntry = (symbol, side, reduceOnly = false, options) => {
   const quoteDP = React.useMemo(() => {
     return utils.getPrecisionByNumber(symbolInfo[symbol]("quote_tick", 0));
   }, [symbolInfo]);
+  const baseIMR = React.useMemo(() => symbolInfo[symbol]("base_imr"), [symbolInfo]);
+  const baseMMR = React.useMemo(() => symbolInfo[symbol]("base_mmr"), [symbolInfo]);
   const { data: markPrice } = useMarkPrice(symbol);
-  const maxQty = useMaxQty(
-    symbol,
-    side,
-    // orderExtraValues.reduce_only
-    reduceOnly
-  );
-  const onSubmit = (values) => {
-    if (!values || typeof values.order_type === "undefined" || values.order_type !== types.OrderType.MARKET && values.order_type !== types.OrderType.LIMIT) {
-      throw new Error("order_type is error");
+  const diffOrderEntry = (prev, current) => {
+    if (!prev)
+      return null;
+    let key, value;
+    const keys = Object.keys(current);
+    for (let i = 0; i < keys.length; i++) {
+      const k = keys[i];
+      let preveValue = prev[k];
+      let currentValue = current[k];
+      if (typeof preveValue === "undefined" && typeof currentValue === "undefined")
+        continue;
+      if (preveValue !== currentValue) {
+        key = k;
+        value = currentValue;
+        break;
+      }
+    }
+    if (!key)
+      return null;
+    return { key, value };
+  };
+  const maxQty = useMaxQty(symbol, sideValue, isReduceOnly);
+  const parsedData = React.useMemo(() => {
+    if (typeof symbolOrOrder === "string") {
+      return null;
+    }
+    if (typeof symbolOrOrder.order_quantity === "string") {
+      symbolOrOrder.order_quantity = symbolOrOrder.order_quantity.replace(
+        /,/g,
+        ""
+      );
+    }
+    if (typeof symbolOrOrder.order_price === "string") {
+      symbolOrOrder.order_price = symbolOrOrder.order_price.replace(/,/g, "");
+    }
+    if (typeof symbolOrOrder.total === "string") {
+      symbolOrOrder.total = symbolOrOrder.total.replace(/,/g, "");
+    }
+    if (typeof symbolOrOrder.order_quantity === "number") {
+      symbolOrOrder.order_quantity = new utils.Decimal(symbolOrOrder.order_quantity).toDecimalPlaces(baseDP).toString();
+    }
+    return symbolOrOrder;
+  }, [symbolOrOrder]);
+  const createOrder = (values) => {
+    if (!values.symbol) {
+      throw new types.SDKError("symbol is error");
+    }
+    if (!values.side) {
+      throw new types.SDKError("side is error");
+    }
+    if (!values || typeof values.order_type === "undefined" || !ramda.includes(values.order_type, availableOrderTypes)) {
+      throw new types.SDKError("order_type is error");
     }
     const orderCreator = OrderFactory.create(
-      !!values.order_type_ext ? values.order_type_ext : values.order_type
+      values.order_type_ext ? values.order_type_ext : values.order_type
     );
     if (!orderCreator) {
-      return Promise.reject(new Error("orderCreator is null"));
+      return Promise.reject(new types.SDKError("orderCreator is null"));
     }
-    return orderCreator?.validate(values, {
-      symbol: symbolInfo[symbol](),
-      // token: tokenInfo[symbol](),
-      maxQty,
-      markPrice
-    }).then(() => {
-      if (!orderCreator) {
-        throw new Error("orderCreator is null");
-      }
-      if (!symbol) {
-        throw new Error("symbol is null");
-      }
-      const data2 = orderCreator.create(values);
-      return doCreateOrder({
-        ...data2,
-        symbol
+    return new Promise((resolve, reject) => {
+      return orderCreator.validate(values, {
+        symbol: symbolInfo[symbol](),
+        // token: tokenInfo[symbol](),
+        maxQty,
+        markPrice
+      }).then((errors2) => {
+        submitted.current = true;
+        if (errors2.order_price || errors2.order_quantity || errors2.trigger_price) {
+          setErrors(errors2);
+          reject(
+            errors2.order_price?.message || errors2.order_quantity?.message
+          );
+        } else {
+          const data2 = orderCreator.create(values, {
+            symbol: symbolInfo[symbol](),
+            maxQty,
+            markPrice
+          });
+          return doCreateOrder(
+            ramda.omit(["order_type_ext"], {
+              // ...values,
+              // ...omit(["order_price"], values),
+              ...data2
+            })
+          ).then((res) => {
+            if (res.success) {
+              resolve(res.data);
+            } else {
+              reject(res);
+            }
+          }, reject);
+        }
       });
     });
   };
+  const onSubmit = (values) => {
+    if (typeof reduceOnly === "boolean" && reduceOnly && !values.reduce_only) {
+      return Promise.reject(
+        new types.SDKError(
+          "The reduceOny parameter of hook does not match your order data"
+        )
+      );
+    }
+    return createOrder({
+      ...values,
+      symbol
+    });
+  };
+  const submit = React.useCallback(() => {
+    if (typeof symbolOrOrder === "string") {
+      throw new types.SDKError("Function is not supported, please use onSubmit()");
+    }
+    return createOrder(symbolOrOrder);
+  }, [symbolOrOrder]);
   const calculate = React.useCallback(
     (values, field, value) => {
       const fieldHandler = getCalculateHandler(field);
@@ -1902,75 +2407,407 @@ var useOrderEntry = (symbol, side, reduceOnly = false, options) => {
       markPrice
     });
   };
+  const formattedOrder = React.useMemo(() => {
+    if (!parsedData) {
+      return notSupportData.current;
+    }
+    if (!prevOrderData.current) {
+      prevOrderData.current = parsedData;
+      orderDataCache.current = {
+        ...parsedData,
+        total: ""
+      };
+      return orderDataCache.current;
+    }
+    const item = diffOrderEntry(prevOrderData.current, parsedData);
+    if (!item) {
+      return orderDataCache.current;
+    }
+    if (typeof parsedData.order_price !== "undefined") {
+      fieldDirty.current.order_price = true;
+    }
+    if (typeof parsedData.order_quantity !== "undefined") {
+      fieldDirty.current.order_quantity = true;
+    }
+    const values = calculate(parsedData, item.key, item.value);
+    values.isStopOrder = values.order_type?.startsWith("STOP") || false;
+    values.total = values.total || "";
+    prevOrderData.current = parsedData;
+    orderDataCache.current = values;
+    return values;
+  }, [
+    parsedData?.order_price,
+    parsedData?.side,
+    parsedData?.order_quantity,
+    parsedData?.visible_quantity,
+    parsedData?.order_type,
+    parsedData?.order_type_ext,
+    parsedData?.symbol,
+    parsedData?.total,
+    parsedData?.reduce_only,
+    parsedData?.trigger_price,
+    markPrice
+  ]);
+  React.useEffect(() => {
+    if (!markPrice)
+      return;
+    validator(formattedOrder)?.then((err) => {
+      setErrors(err);
+    });
+  }, [
+    formattedOrder.broker_id,
+    formattedOrder.order_quantity,
+    formattedOrder.total,
+    formattedOrder.trigger_price,
+    markPrice
+  ]);
+  React.useEffect(() => {
+    if (!optionsValue?.watchOrderbook)
+      return;
+    ee.on("orderbook:update", onOrderbookUpdate);
+    return () => {
+      ee.off("orderbook_update", onOrderbookUpdate);
+    };
+  }, [optionsValue?.watchOrderbook]);
+  React.useEffect(() => {
+    askAndBid.current = [];
+  }, [parsedData?.symbol]);
+  const getPriceAndQty = (symbolOrOrder2) => {
+    let quantity = Number(symbolOrOrder2.order_quantity);
+    const orderPrice = Number(symbolOrOrder2.order_price);
+    if (isNaN(quantity) || quantity <= 0 || askAndBid.current.length === 0)
+      return null;
+    if ((symbolOrOrder2.order_type === types.OrderType.LIMIT || symbolOrOrder2.order_type === types.OrderType.STOP_LIMIT) && isNaN(orderPrice))
+      return null;
+    let price;
+    if (symbolOrOrder2.order_type === types.OrderType.MARKET || symbolOrOrder2.order_type === types.OrderType.STOP_MARKET) {
+      if (symbolOrOrder2.side === types.OrderSide.BUY) {
+        price = askAndBid.current[0];
+      } else {
+        price = askAndBid.current[1];
+      }
+    } else {
+      if (symbolOrOrder2.side === types.OrderSide.BUY) {
+        if (orderPrice >= askAndBid.current[0]) {
+          price = askAndBid.current[0];
+        } else {
+          price = orderPrice;
+        }
+      } else {
+        if (orderPrice <= askAndBid.current[1]) {
+          price = askAndBid.current[1];
+        } else {
+          price = orderPrice;
+        }
+      }
+    }
+    if (symbolOrOrder2.side === types.OrderSide.SELL) {
+      quantity = -quantity;
+    }
+    return { price, quantity };
+  };
+  const estLiqPrice = React.useMemo(() => {
+    if (!accountInfo || !parsedData || !markPrice)
+      return null;
+    const result = getPriceAndQty(formattedOrder);
+    if (result === null)
+      return null;
+    const { price, quantity } = result;
+    if (!price || !quantity)
+      return null;
+    const liqPrice = perp.order.estLiqPrice({
+      markPrice,
+      baseIMR,
+      baseMMR,
+      totalCollateral,
+      positions: positions3,
+      IMR_Factor: accountInfo["imr_factor"][symbol],
+      newOrder: {
+        qty: quantity,
+        price,
+        symbol: parsedData.symbol
+      }
+    });
+    if (liqPrice <= 0)
+      return null;
+    return liqPrice;
+  }, [
+    markPrice,
+    baseIMR,
+    baseMMR,
+    totalCollateral,
+    formattedOrder?.order_price,
+    formattedOrder?.order_quantity,
+    formattedOrder?.total,
+    formattedOrder?.trigger_price,
+    accountInfo
+  ]);
+  const estLeverage = React.useMemo(() => {
+    if (!accountInfo || !parsedData)
+      return null;
+    const result = getPriceAndQty(formattedOrder);
+    if (result === null || !result.price || !result.quantity)
+      return null;
+    const leverage = perp.order.estLeverage({
+      totalCollateral,
+      positions: positions3,
+      newOrder: {
+        symbol: parsedData.symbol,
+        qty: result.quantity,
+        price: result.price
+      }
+    });
+    return leverage;
+  }, [
+    baseIMR,
+    baseMMR,
+    totalCollateral,
+    positions3,
+    formattedOrder?.order_price,
+    formattedOrder?.order_quantity,
+    formattedOrder?.total,
+    formattedOrder?.trigger_price
+  ]);
   return {
     maxQty,
     freeCollateral,
     markPrice,
     onSubmit,
+    submit,
     submitting: isMutating,
+    formattedOrder,
+    // errors,
+    estLiqPrice,
+    estLeverage,
     helper: {
       calculate,
       validator
+      // clearErrors,
+    },
+    metaState: {
+      dirty: fieldDirty.current,
+      submitted: submitted.current,
+      errors
     },
     symbolConfig: symbolInfo[symbol]()
   };
-};
+}
 
 // src/orderly/useAccountInfo.ts
 var useAccountInfo = () => {
   return usePrivateQuery("/v1/client/info");
 };
-var useMarketsStream = () => {
-  const ws = useWS();
-  const { data: futures } = useQuery(`/v1/public/futures`, {
-    revalidateOnFocus: false
-  });
-  const { data: tickers } = useSWRSubscription__default.default("tickers", (_, { next }) => {
-    const unsubscribe = ws.subscribe(
-      // { event: "subscribe", topic: "markprices" },
-      "tickers",
-      {
-        onMessage: (message) => {
-          next(null, message);
-        }
-        // onUnsubscribe: () => {
-        //   return "markprices";
-        // },
-        // onError: (error: any) => {
-        //
-        // },
+var MarketsType = /* @__PURE__ */ ((MarketsType2) => {
+  MarketsType2[MarketsType2["FAVORITES"] = 0] = "FAVORITES";
+  MarketsType2[MarketsType2["RECENT"] = 1] = "RECENT";
+  MarketsType2[MarketsType2["ALL"] = 2] = "ALL";
+  return MarketsType2;
+})(MarketsType || {});
+var useMarkets = (type) => {
+  const marketsKey = "markets";
+  const { data } = useMarketsStream();
+  const { configStore } = React.useContext(OrderlyContext);
+  const publicInfo = useSymbolsInfo();
+  if (!configStore.get(marketsKey)) {
+    const jsonStr = localStorage.getItem(marketsKey);
+    if (jsonStr) {
+      configStore.set(marketsKey, JSON.parse(jsonStr));
+    } else {
+      const defaultTab = { name: "Popular", id: 1 };
+      configStore.set(marketsKey, {
+        recent: [],
+        favorites: [
+          { name: "PERP_ETH_USDC", tabs: [{ ...defaultTab }] },
+          { name: "PERP_BTC_USDC", tabs: [{ ...defaultTab }] }
+        ],
+        favoriteTabs: [{ ...defaultTab }],
+        lastSelectFavoriteTab: { ...defaultTab }
+      });
+    }
+  }
+  const getFavoriteTabs = React.useMemo(() => {
+    const tabs2 = configStore.get(marketsKey)["favoriteTabs"];
+    return tabs2 || [{ name: "Popular", id: 1 }];
+  }, []);
+  const getFavorites = React.useMemo(() => {
+    const curData = configStore.get(marketsKey)["favorites"] || [];
+    const tabs2 = getFavoriteTabs;
+    const result = [];
+    for (let index = 0; index < curData.length; index++) {
+      const favData = curData[index];
+      var favTabs = favData.tabs.filter((tab) => tabs2.findIndex((item) => tab.id === item.id) !== -1);
+      if (favTabs.length > 0) {
+        result.push({ ...favData, tabs: favTabs });
       }
-    );
-    return () => {
-      unsubscribe?.();
+    }
+    configStore.set(marketsKey, { ...configStore.getOr(marketsKey, {}), favorites: result });
+    return result;
+  }, [configStore]);
+  const getRecent = React.useMemo(() => {
+    const curData = configStore.get(marketsKey)["recent"];
+    return (curData || []).filter((e) => e);
+  }, []);
+  const [favoriteTabs, setFavoriteTabs] = React.useState(getFavoriteTabs);
+  const [favorites, setFavorites] = React.useState(getFavorites);
+  const [recent, setRecent] = React.useState(getRecent);
+  const updateFavoriteTabs = (tab, operator) => {
+    const saveTabs = (tabs3) => {
+      setFavoriteTabs(tabs3);
+      configStore.set(marketsKey, {
+        ...configStore.getOr(marketsKey, {}),
+        "favoriteTabs": tabs3
+      });
     };
-  });
-  const value = React.useMemo(() => {
-    if (!futures)
-      return null;
-    if (!tickers)
-      return futures;
-    return futures.map((item) => {
-      const ticker = tickers.find(
-        (t) => t.symbol === item.symbol
-      );
-      if (ticker) {
-        const data = {
-          ...item,
-          ["24h_close"]: ticker.close,
-          ["24h_open"]: ticker.open,
-          ["24h_volumn"]: ticker.volume,
-          change: 0
-        };
-        if (ticker.close !== void 0 && ticker.open !== void 0) {
-          data["change"] = new utils.Decimal(ticker.close).minus(ticker.open).div(ticker.open).toNumber();
+    if (Array.isArray(tab)) {
+      saveTabs(tab);
+      return;
+    }
+    var tabs2 = [...favoriteTabs];
+    const index = tabs2.findIndex((item) => item.id === tab.id);
+    if (operator?.add) {
+      tabs2.push(tab);
+    } else if (operator?.update) {
+      if (index !== -1) {
+        tabs2[index] = tab;
+      }
+    } else if (operator?.delete) {
+      if (index !== -1) {
+        tabs2.splice(index, 1);
+      }
+    }
+    saveTabs(tabs2);
+  };
+  const setRecentData = (symbol) => {
+    const curData = [...recent];
+    const index = curData.findIndex((item) => item.name == symbol.symbol);
+    if (index !== -1) {
+      curData.splice(index, 1);
+    }
+    curData.unshift({ name: symbol.symbol });
+    configStore.set(marketsKey, {
+      ...configStore.getOr(marketsKey, {}),
+      "recent": curData
+    });
+    setRecent(curData);
+  };
+  const setFavoritesData = (symbol, tab, remove = false) => {
+    const curData = [...favorites];
+    const index = curData.findIndex((item) => item.name == symbol.symbol);
+    if (index === -1) {
+      if (Array.isArray(tab)) {
+        if (tab.length > 0) {
+          curData.unshift({ name: symbol.symbol, tabs: tab });
+        }
+      } else {
+        if (!remove) {
+          curData.unshift({ name: symbol.symbol, tabs: [tab] });
         }
-        return data;
       }
-      return item;
+    } else {
+      const favorite = curData[index];
+      if (Array.isArray(tab)) {
+        if (tab.length === 0) {
+          curData.splice(index, 1);
+        } else {
+          curData[index] = { ...favorite, tabs: tab };
+        }
+      } else {
+        if (remove) {
+          const tabs2 = favorite.tabs.filter((tab2) => tab2.id != tab2.id);
+          if (tabs2.length === 0) {
+            curData.splice(index, 1);
+          } else {
+            curData[index] = { ...favorite, tabs: tabs2 };
+          }
+        } else {
+          const tabs2 = favorite.tabs;
+          tabs2.push(tab);
+          curData[index] = { ...favorite, tabs: tabs2 };
+        }
+      }
+    }
+    configStore.set(marketsKey, {
+      ...configStore.getOr(marketsKey, {}),
+      "favorites": curData
     });
-  }, [futures, tickers]);
-  return { data: value };
+    setFavorites(() => curData);
+  };
+  const getData = (type2) => {
+    const localData = type2 === 0 /* FAVORITES */ ? [...favorites] : [...recent];
+    const keys = localData.map((item) => item.name);
+    const filter = type2 == 2 /* ALL */ ? data : data?.filter((item) => keys.includes(item.symbol));
+    const favoritesData = [...favorites];
+    const favoriteKeys = favoritesData.map((item) => item.name);
+    if (filter) {
+      for (let index = 0; index < filter.length; index++) {
+        const element = filter[index];
+        const isFavorite = type2 == 0 /* FAVORITES */ ? true : favoriteKeys.includes(element.symbol);
+        const fIndex = favoritesData.findIndex((item) => item.name === element.symbol);
+        const tabs2 = fIndex === -1 ? [] : favoritesData[fIndex].tabs;
+        let imr = void 0;
+        if (publicInfo) {
+          imr = publicInfo?.[element.symbol]("base_imr");
+        }
+        filter[index] = {
+          ...filter[index],
+          // @ts-ignore
+          isFavorite,
+          tabs: tabs2,
+          leverage: imr ? 1 / imr : void 0
+        };
+      }
+    }
+    return filter;
+  };
+  const addToHistory = (symbol) => {
+    setRecentData(symbol);
+  };
+  const updateSymbolFavoriteState = (symbol, tab, del = false) => {
+    setFavoritesData(symbol, tab, del);
+  };
+  const markets = getData(type);
+  const pinToTop = (symbol) => {
+    const index = favorites.findIndex((item) => item.name === symbol.symbol);
+    if (index !== -1) {
+      const element = favorites[index];
+      const list = [...favorites];
+      list.splice(index, 1);
+      list.unshift(element);
+      configStore.set(marketsKey, {
+        ...configStore.getOr(marketsKey, {}),
+        "favorites": list
+      });
+      setFavorites(list);
+    }
+  };
+  const tabs = React.useMemo(() => {
+    return favoriteTabs;
+  }, [favoriteTabs]);
+  const getLastSelFavTab = () => {
+    const curData = configStore.get(marketsKey)["lastSelectedFavoriteTab"];
+    return curData || { name: "Popular", id: 1 };
+  };
+  const updateSelectedFavoriteTab = (tab) => {
+    configStore.set(marketsKey, {
+      ...configStore.getOr(marketsKey, {}),
+      lastSelectedFavoriteTab: tab
+    });
+  };
+  return [
+    markets || [],
+    {
+      favoriteTabs: tabs,
+      favorites,
+      recent,
+      addToHistory,
+      // updateFavoriteTabs("tab", operator: {add/update/delete})
+      updateFavoriteTabs,
+      updateSymbolFavoriteState,
+      pinToTop,
+      getLastSelFavTab,
+      updateSelectedFavoriteTab
+    }
+  ];
 };
 var useLeverage = () => {
   const { data, mutate: mutate2 } = usePrivateQuery("/v1/client/info");
@@ -2091,7 +2928,7 @@ var useMarketTradeStream = (symbol, options = {}) => {
   return { data: trades, isLoading };
 };
 var useMarginRatio = () => {
-  const [{ rows }] = usePositionStream();
+  const [{ rows, aggregated }] = usePositionStream();
   const { data: markPrices } = useMarkPricesStream();
   const { totalCollateral } = useCollateral();
   const marginRatio = React.useMemo(() => {
@@ -2108,7 +2945,20 @@ var useMarginRatio = () => {
   const currentLeverage = React.useMemo(() => {
     return perp.account.currentLeverage(marginRatio);
   }, [marginRatio]);
-  return { marginRatio, currentLeverage };
+  const mmr = React.useMemo(() => {
+    if (!rows || rows.length <= 0)
+      return null;
+    let positionsMM = utils.zero;
+    for (let index = 0; index < rows.length; index++) {
+      const item = rows[index];
+      positionsMM = positionsMM.add(item.mm);
+    }
+    return perp.account.MMR({
+      positionsMMR: positionsMM.toNumber(),
+      positionsNotional: aggregated.notional
+    });
+  }, [rows, aggregated]);
+  return { marginRatio, currentLeverage, mmr };
 };
 
 // src/woo/constants.ts
@@ -3124,53 +3974,41 @@ var woofiDexCrossChainRouterAbi = [
 ];
 var nativeTokenAddress = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE";
 var isNativeTokenChecker = (address) => address === nativeTokenAddress;
-
-// src/orderly/useChains.ts
 var useChains = (networkId, options = {}) => {
-  const { filter, pick: pick3, crossEnabled, wooSwapEnabled, ...swrOptions } = options;
-  const { configStore, networkId: networkEnv } = React.useContext(OrderlyContext);
+  const { pick: pick3, crossEnabled, wooSwapEnabled, ...swrOptions } = options;
+  const { configStore } = React.useContext(OrderlyContext);
   const field = options?.pick;
+  const filterFun = React.useRef(options?.filter);
+  filterFun.current = options?.filter;
   const map = React.useRef(
     /* @__PURE__ */ new Map()
   );
-  const { data, error: swapSupportError } = useSWR__default.default(
+  const commonSwrOpts = {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    // If false, undefined data gets cached against the key.
+    revalidateOnMount: true,
+    // dont duplicate a request w/ same key for 1hr
+    dedupingInterval: 36e5,
+    ...swrOptions
+  };
+  const { data: wooSupportData, error: swapSupportError } = useSWR__default.default(
     () => wooSwapEnabled ? `${configStore.get("swapSupportApiUrl")}/swap_support` : null,
-    // `${configStore.get("swapSupportApiUrl")}/swap_support`,
     (url) => fetch(url).then((res) => res.json()),
-    {
-      revalidateIfStale: false,
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      revalidateOnMount: true,
-      // If false, undefined data gets cached against the key.
-      dedupingInterval: 36e5,
-      // dont duplicate a request w/ same key for 1hr
-      ...swrOptions
-    }
+    { ...commonSwrOpts, ...swrOptions }
   );
   const { data: chainInfos, error: chainInfoErr } = useQuery(
     "/v1/public/chain_info",
     {
-      revalidateIfStale: false,
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      revalidateOnMount: true,
-      dedupingInterval: 36e5,
-      formatter: (data2) => data2.rows
+      ...commonSwrOpts,
+      formatter: (data) => data.rows
     }
   );
   const { data: orderlyChains, error: tokenError } = useQuery(
-    // wooSwapEnabled ? "/v1/public/token" :
     "https://api-evm.orderly.org/v1/public/token",
-    {
-      revalidateIfStale: false,
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      revalidateOnMount: true,
-      dedupingInterval: 36e5
-    }
+    { ...commonSwrOpts }
   );
-  configStore.get("apiBaseUrl");
   const chains = React.useMemo(() => {
     let orderlyChainsArr = [];
     const orderlyChainIds = /* @__PURE__ */ new Set();
@@ -3185,6 +4023,7 @@ var useChains = (networkId, options = {}) => {
             // "public_rpc_url": "https://arb1.arbitrum.io/rpc",
             chain_id: chainId,
             withdrawal_fee: chain.withdrawal_fee,
+            cross_chain_withdrawal_fee: chain.cross_chain_withdrawal_fee,
             bridgeless: true
           },
           token_infos: [
@@ -3195,13 +4034,13 @@ var useChains = (networkId, options = {}) => {
             }
           ]
         };
-        if (typeof options?.filter === "function") {
-          if (!options.filter(_chain))
+        if (typeof filterFun.current === "function") {
+          if (!filterFun.current(_chain))
             return;
         }
-        if (_chain.chain_id === 421613) {
-          const index = testnetArr.findIndex(
-            (item2) => item2.network_infos.chain_id === 421613
+        if (utils.isTestnet(_chain.chain_id)) {
+          const index = testnetArr?.findIndex(
+            (item2) => utils.isTestnet(item2.network_infos.chain_id)
           );
           if (index > -1) {
             testnetArr[index] = _chain;
@@ -3211,40 +4050,16 @@ var useChains = (networkId, options = {}) => {
         orderlyChainsArr.push(_chain);
       });
     });
-    let testnetArr = [
-      //@ts-ignore
-      {
-        network_infos: {
-          name: "Arbitrum Goerli",
-          shortName: "Arbitrum Goerli",
-          public_rpc_url: "https://goerli-rollup.arbitrum.io/rpc",
-          chain_id: 421613,
-          currency_symbol: "ETH",
-          bridge_enable: true,
-          mainnet: false,
-          explorer_base_url: "https://goerli.arbiscan.io/",
-          est_txn_mins: null,
-          woofi_dex_cross_chain_router: "",
-          woofi_dex_depositor: ""
-        },
-        token_infos: [
-          {
-            symbol: "USDC",
-            address: "0xfd064A18f3BF249cf1f87FC203E90D8f650f2d63",
-            decimals: 6,
-            swap_enable: false,
-            woofi_dex_precision: 2
-          }
-        ]
-      }
-    ];
+    let testnetArr = [...types.TestnetChains];
+    testnetArr.forEach((chain) => {
+      map.current.set(chain.network_infos?.chain_id, chain);
+    });
     let mainnetArr = [];
-    map.current.set(421613, testnetArr[0]);
     if (wooSwapEnabled) {
-      if (!data || !data.data)
-        return data;
-      Object.keys(data.data).forEach((key) => {
-        const chain = data.data[key];
+      if (!wooSupportData || !wooSupportData.data)
+        return wooSupportData;
+      Object.keys(wooSupportData.data).forEach((key) => {
+        const chain = wooSupportData.data[key];
         const item = ramda.mergeDeepRight(chain, {
           name: key,
           network_infos: {
@@ -3258,8 +4073,8 @@ var useChains = (networkId, options = {}) => {
         if (item.token_infos?.length === 0)
           return;
         map.current.set(item.network_infos.chain_id, item);
-        if (typeof options?.filter === "function") {
-          if (!options.filter(item))
+        if (typeof filterFun.current === "function") {
+          if (!filterFun.current(item))
             return;
         }
         if (item.network_infos.mainnet) {
@@ -3297,24 +4112,16 @@ var useChains = (networkId, options = {}) => {
           };
         }
         map.current.set(_chain.network_infos.chain_id, _chain);
-        if (_chain.network_infos.chain_id === 421613) {
+        if (utils.isTestnet(_chain.network_infos.chain_id)) {
           const index = testnetArr.findIndex(
-            (item) => item.network_infos.chain_id === 421613
+            (item) => utils.isTestnet(item.network_infos.chain_id)
           );
           if (index > -1) {
             testnetArr[index] = _chain;
           }
         }
-        if (_chain.network_infos.chain_id === 420) {
-          const index = testnetArr.findIndex(
-            (item) => item.network_infos.chain_id === 420
-          );
-          if (index > -1) {
-            testnetArr[index] = _chain;
-          }
-        }
-        if (typeof options?.filter === "function") {
-          if (!options.filter(_chain))
+        if (typeof filterFun.current === "function") {
+          if (!filterFun.current(_chain))
             return;
         }
         mainnetArr.push(_chain);
@@ -3341,10 +4148,9 @@ var useChains = (networkId, options = {}) => {
       mainnet: mainnetArr
     };
   }, [
-    data,
+    wooSupportData,
     networkId,
     field,
-    options,
     orderlyChains,
     wooSwapEnabled,
     chainInfos
@@ -3355,7 +4161,9 @@ var useChains = (networkId, options = {}) => {
       if (chain) {
         chain.nativeToken = chain.token_infos?.find(
           (item) => item.address === nativeTokenAddress
-        );
+        ) || {
+          symbol: chain.network_infos?.currency_symbol
+        };
       }
       if (typeof field2 === "string") {
         return ramda.prop(field2, chain);
@@ -3409,7 +4217,21 @@ var useWithdraw = () => {
   const maxAmount = React.useMemo(() => {
     return freeCollateral;
   }, [freeCollateral]);
-  return { withdraw, isLoading, maxAmount, availableBalance, unsettledPnL };
+  const availableWithdraw = React.useMemo(() => {
+    if (unsettledPnL < 0) {
+      return freeCollateral;
+    } else {
+      return freeCollateral - unsettledPnL;
+    }
+  }, [freeCollateral, unsettledPnL]);
+  return {
+    withdraw,
+    isLoading,
+    maxAmount,
+    availableBalance,
+    availableWithdraw,
+    unsettledPnL
+  };
 };
 var useDeposit = (options) => {
   const { enableSwapDeposit } = React.useContext(OrderlyContext);
@@ -3419,28 +4241,41 @@ var useDeposit = (options) => {
   const [_, { findByChainId }] = useChains(void 0, {
     wooSwapEnabled: enableSwapDeposit
   });
+  const [quantity, setQuantity] = React.useState("");
+  const [depositFee, setDepositFee] = React.useState(0n);
+  const [depositFeeRevalidating, setDepositFeeRevalidating] = React.useState(false);
   const [balance, setBalance] = React.useState("0");
   const [allowance, setAllowance] = React.useState("0");
   const { account: account5, state } = useAccount();
   const prevAddress = React.useRef();
   const getBalanceListener = React.useRef();
+  const targetChain = React.useMemo(() => {
+    let chain;
+    if (networkId === "testnet") {
+      chain = findByChainId(types.ARBITRUM_TESTNET_CHAINID);
+    } else {
+      chain = findByChainId(options?.srcChainId);
+      if (!chain?.network_infos?.bridgeless) {
+        chain = findByChainId(types.ARBITRUM_MAINNET_CHAINID);
+      }
+    }
+    return chain;
+  }, [networkId, findByChainId, options?.srcChainId]);
   const dst = React.useMemo(() => {
-    const chain = networkId === "testnet" ? findByChainId(types.ARBITRUM_TESTNET_CHAINID) : findByChainId(types.ARBITRUM_MAINNET_CHAINID);
-    const USDC = chain?.token_infos.find(
-      (token) => token.symbol === "USDC"
-    );
-    if (!chain) {
+    if (!targetChain) {
       throw new Error("dst chain not found");
     }
+    const USDC = targetChain?.token_infos.find(
+      (token) => token.symbol === "USDC"
+    );
     return {
       symbol: "USDC",
       address: USDC?.address,
       decimals: USDC?.decimals,
-      chainId: chain.network_infos.chain_id,
-      network: chain.network_infos.shortName
-      // chainId: 42161,
+      chainId: targetChain.network_infos.chain_id,
+      network: targetChain.network_infos.shortName
     };
-  }, [networkId, findByChainId]);
+  }, [targetChain]);
   const isNativeToken = React.useMemo(
     () => isNativeTokenChecker(options?.address || ""),
     [options?.address]
@@ -3467,7 +4302,6 @@ var useDeposit = (options) => {
         const balance2 = await fetchBalanceHandler(address, decimals);
         setBalance(() => balance2);
       } catch (e) {
-        console.warn("----- refresh balance error -----", e);
         setBalance(() => "0");
       }
     },
@@ -3517,18 +4351,30 @@ var useDeposit = (options) => {
       }
     }
   }, [options, dst]);
+  const queryBalance = useDebounce.useDebouncedCallback(
+    (tokenAddress, decimals) => {
+      fetchBalance(options?.address, options?.decimals).finally(() => {
+        setBalanceRevalidating(false);
+      });
+    },
+    100
+  );
+  const queryAllowance = useDebounce.useDebouncedCallback(
+    (tokenAddress, vaultAddress) => {
+      getAllowance(tokenAddress, vaultAddress);
+    },
+    100
+  );
   React.useEffect(() => {
     if (state.status < types.AccountStatusEnum.Connected)
       return;
     setBalanceRevalidating(true);
-    fetchBalance(options?.address, options?.decimals).finally(() => {
-      setBalanceRevalidating(false);
-    });
+    queryBalance(options?.address, options?.decimals);
     if (dst.chainId !== options?.srcChainId) {
-      getAllowance(options?.address, options?.crossChainRouteAddress);
+      queryAllowance(options?.address, options?.crossChainRouteAddress);
     } else {
       if (dst.symbol !== options?.srcToken) {
-        getAllowance(options?.address, options?.depositorAddress);
+        queryAllowance(options?.address, options?.depositorAddress);
       } else {
         getAllowanceByDefaultAddress(options?.address);
       }
@@ -3545,41 +4391,72 @@ var useDeposit = (options) => {
     dst.symbol
   ]);
   const approve = React.useCallback(
-    (amount) => {
+    async (amount) => {
       if (!options?.address) {
         throw new Error("address is required");
       }
       const vaultAddress = getVaultAddress();
       return account5.assetsManager.approve(options.address, amount, vaultAddress).then((result) => {
         if (typeof amount !== "undefined") {
-          setAllowance((value) => new utils.Decimal(value).add(amount).toString());
+          setAllowance(
+            (value) => new utils.Decimal(value).add(amount || types.MaxUint256.toString()).toString()
+          );
         }
         return result;
       });
     },
     [account5, getAllowance, options?.address]
   );
-  const deposit = React.useCallback(
-    (amount) => {
-      return account5.assetsManager.deposit(amount).then((res) => {
-        setAllowance((value) => new utils.Decimal(value).sub(amount).toString());
-        setBalance((value) => new utils.Decimal(value).sub(amount).toString());
-        return res;
-      });
-    },
-    [account5, fetchBalance, getAllowance]
-  );
+  const deposit = React.useCallback(async () => {
+    return account5.assetsManager.deposit(quantity, depositFee).then((res) => {
+      setAllowance((value) => new utils.Decimal(value).sub(quantity).toString());
+      setBalance((value) => new utils.Decimal(value).sub(quantity).toString());
+      return res;
+    });
+  }, [account5, fetchBalance, getAllowance, quantity, depositFee]);
   const loopGetBalance = async () => {
     getBalanceListener.current && clearTimeout(getBalanceListener.current);
     getBalanceListener.current = setTimeout(async () => {
-      const balance2 = await fetchBalanceHandler(
-        options?.address,
-        options?.decimals
-      );
-      setBalance(balance2);
-      loopGetBalance();
+      try {
+        const balance2 = await fetchBalanceHandler(
+          options?.address,
+          options?.decimals
+        );
+        setBalance(balance2);
+        loopGetBalance();
+      } catch (err) {
+      }
     }, 3e3);
   };
+  const getDepositFee = React.useCallback(
+    async (quantity2) => {
+      return account5.assetsManager.getDepositFee(
+        quantity2,
+        targetChain?.network_infos
+      );
+    },
+    [account5, targetChain]
+  );
+  const enquiryDepositFee = React.useCallback(() => {
+    if (isNaN(Number(quantity)) || !quantity) {
+      setDepositFee(0n);
+      setDepositFeeRevalidating(false);
+      return;
+    }
+    setDepositFeeRevalidating(true);
+    getDepositFee(quantity).then((res = 0n) => {
+      const fee = BigInt(
+        new utils.Decimal(res.toString()).mul(types.DEPOSIT_FEE_RATE).toFixed(0, utils.Decimal.ROUND_UP).toString()
+      );
+      setDepositFee(fee);
+    }).catch((error) => {
+    }).finally(() => {
+      setDepositFeeRevalidating(false);
+    });
+  }, [quantity]);
+  React.useEffect(() => {
+    enquiryDepositFee();
+  }, [quantity]);
   React.useEffect(() => {
     if (!options?.address) {
       return;
@@ -3590,16 +4467,25 @@ var useDeposit = (options) => {
     };
   }, [options?.address, options?.decimals]);
   return {
+    /** orderly support chain dst */
     dst,
     balance,
     allowance,
     isNativeToken,
     balanceRevalidating,
     allowanceRevalidating,
+    /** input quantiy */
+    quantity,
+    /** orderly deposit fee, unit: wei */
+    depositFee,
+    /** enquiring depositFee status on chain */
+    depositFeeRevalidating,
     approve,
     deposit,
     fetchBalances,
-    fetchBalance: fetchBalanceHandler
+    fetchBalance: fetchBalanceHandler,
+    /** set input quantity */
+    setQuantity
   };
 };
 var useWalletSubscription = (options) => {
@@ -3642,6 +4528,32 @@ var useSettleSubscription = (options) => {
     return () => unsubscribe();
   });
 };
+var useSymbolPriceRange = (symbol, side, price) => {
+  const config = useSymbolsInfo();
+  const priceRange = config?.[symbol]("price_range");
+  const priceScrope = config?.[symbol]("price_scope");
+  const { data: prices } = useMarkPricesStream();
+  const markPrice = price || prices?.[symbol];
+  const range = React.useMemo(() => {
+    if (config === void 0 || markPrice === void 0) {
+      return void 0;
+    }
+    if (priceRange === void 0 || Number.isNaN(markPrice)) {
+      return void 0;
+    }
+    if (side === "BUY") {
+      return {
+        max: new utils.Decimal(markPrice).mul(1 + priceRange).toNumber(),
+        min: new utils.Decimal(markPrice).mul(1 - priceScrope).toNumber()
+      };
+    }
+    return {
+      max: new utils.Decimal(markPrice).mul(1 + priceScrope).toNumber(),
+      min: new utils.Decimal(markPrice).mul(1 - priceRange).toNumber()
+    };
+  }, [symbol, side, priceRange, markPrice]);
+  return range;
+};
 function useMediaQuery(query) {
   const getMatches = (query2) => {
     if (typeof window !== "undefined") {
@@ -3681,8 +4593,8 @@ var useWooSwapQuery = () => {
         return;
       start();
       const params = {
-        // src_network: inputs.srcNetwork,
-        network: "arbitrum",
+        network: inputs.srcNetwork,
+        // network: "arbitrum",
         from_token: inputs.srcToken,
         to_token: inputs.dstToken,
         //account.assetsManager.usdcAddress,
@@ -4285,6 +5197,7 @@ Object.defineProperty(exports, 'useConstant', {
   enumerable: true,
   get: function () { return useConstant4__default.default; }
 });
+exports.MarketsType = MarketsType;
 exports.OrderlyConfigProvider = OrderlyConfigProvider;
 exports.OrderlyContext = OrderlyContext;
 exports.OrderlyProvider = OrderlyProvider;
@@ -4310,6 +5223,7 @@ exports.useMarginRatio = useMarginRatio;
 exports.useMarkPrice = useMarkPrice;
 exports.useMarkPricesStream = useMarkPricesStream;
 exports.useMarketTradeStream = useMarketTradeStream;
+exports.useMarkets = useMarkets;
 exports.useMarketsStream = useMarketsStream;
 exports.useMaxQty = useMaxQty;
 exports.useMediaQuery = useMediaQuery;
@@ -4326,6 +5240,7 @@ exports.useQuery = useQuery;
 exports.useSessionStorage = useSessionStorage;
 exports.useSettleSubscription = useSettleSubscription;
 exports.useSwap = useSwap;
+exports.useSymbolPriceRange = useSymbolPriceRange;
 exports.useSymbolsInfo = useSymbolsInfo;
 exports.useTickerStream = useTickerStream;
 exports.useWS = useWS;