@orderly.network/hooks 1.1.4 → 1.1.5-alpha.0

package/esm/dataProvider.d.ts

@@ -1,10 +1,11 @@
 import { PropsWithChildren } from "react";
 export type getKeyFunction = (index: number, prevData: any) => string | null;
-interface DataCenterContextValue {
+interface DataCenterContextState {
     regesterKeyHandler: (key: string, handler: getKeyFunction) => void;
+    unregisterKeyHandler: (key: string) => void;
 }
-export declare const DataCenterContext: import("react").Context<DataCenterContextValue>;
-export declare const useDataCenterContext: () => DataCenterContextValue;
+export declare const DataCenterContext: import("react").Context<DataCenterContextState>;
+export declare const useDataCenterContext: () => DataCenterContextState;
 export declare const DataCenterProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=dataProvider.d.ts.map

package/esm/dataProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataProvider.d.ts","sourceRoot":"","sources":["../src/dataProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAI7E,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;AAE7E,UAAU,sBAAsB;IAK9B,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CACpE;AAED,eAAO,MAAM,iBAAiB,iDAE7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,8BAAsC,CAAC;AAExE,eAAO,MAAM,kBAAkB,iBAAkB,iBAAiB,mDAgCjE,CAAC"}
+{"version":3,"file":"dataProvider.d.ts","sourceRoot":"","sources":["../src/dataProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAI7E,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;AAE7E,UAAU,sBAAsB;IAK9B,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IACnE,oBAAoB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,iBAAiB,iDAE7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,8BAAsC,CAAC;AAExE,eAAO,MAAM,kBAAkB,iBAAkB,iBAAiB,mDAqCjE,CAAC"}

package/esm/dataProvider.js

@@ -23,7 +23,12 @@ export const DataCenterProvider = ({ children }) => {
         return null;
     return (_jsx(DataCenterContext.Provider, { value: {
             regesterKeyHandler: (key, fun) => {
+                console.log("regesterKeyHandler", key);
                 getKeyHandlerMapRef.current.set(key, fun);
             },
+            unregisterKeyHandler: (key) => {
+                console.log("unregisterKeyHandler", key);
+                getKeyHandlerMapRef.current.delete(key);
+            },
         }, children: children }));
 };

package/esm/index.d.ts

@@ -1,3 +1,4 @@
+import "./utils/dev";
 export { default as version } from "./version";
 export { useQuery } from "./useQuery";
 export { useLazyQuery } from "./useLazyQuery";

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAElC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,MAAM,EAAE,EAAE,KAAK,gBAAgB,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAE/D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,gBAAgB,EAAE,CAAC;AAEpD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1D,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAElC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,MAAM,EAAE,EAAE,KAAK,gBAAgB,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAE/D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,gBAAgB,EAAE,CAAC;AAEpD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1D,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}

package/esm/index.js

@@ -1,3 +1,4 @@
+import "./utils/dev";
 export { default as version } from "./version";
 export { useQuery } from "./useQuery";
 export { useLazyQuery } from "./useLazyQuery";

package/esm/orderly/useMaxQty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMaxQty.d.ts","sourceRoot":"","sources":["../../src/orderly/useMaxQty.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,SAAS,EAAe,MAAM,wBAAwB,CAAC;AAgB1E,eAAO,MAAM,SAAS,WACZ,MAAM,QACR,SAAS,eACH,OAAO,WAuIpB,CAAC"}
+{"version":3,"file":"useMaxQty.d.ts","sourceRoot":"","sources":["../../src/orderly/useMaxQty.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,SAAS,EAAe,MAAM,wBAAwB,CAAC;AAgB1E,eAAO,MAAM,SAAS,WACZ,MAAM,QACR,SAAS,eACH,OAAO,WA0HpB,CAAC"}

package/esm/orderly/useMaxQty.js

@@ -17,32 +17,6 @@ export const useMaxQty = (symbol, side, reduceOnly = false) => {
     const { totalCollateral } = useCollateral();
     const { data: markPrices } = useMarkPricesStream();
     const [orders] = useOrderStream({ status: OrderStatus.NEW });
-    // const {
-    //   data: orders,
-    //   error,
-    //   mutate: updateOrder,
-    // } = usePrivateQuery<API.Order[]>(`/v1/orders?status=NEW&size=99`, {
-    //   formatter: (data) => data.rows,
-    //   onError: (err) => { },
-    // });
-    // const ws = useWS();
-    // useEffect(() => {
-    //   const unsubscribe = ws.privateSubscribe(
-    //     {
-    //       id: "executionreport_orders",
-    //       event: "subscribe",
-    //       topic: "executionreport",
-    //       ts: Date.now(),
-    //     },
-    //     {
-    //       onMessage: (data: any) => {
-    //         console.log("refresh orders", data);
-    //         updateOrder();
-    //       },
-    //     }
-    //   );
-    //   return () => unsubscribe();
-    // }, []);
     const maxQty = useMemo(() => {
         if (!symbol)
             return 0;
@@ -110,5 +84,17 @@ export const useMaxQty = (symbol, side, reduceOnly = false) => {
         totalCollateral,
         reduceOnly,
     ]);
+    // debugPrint({
+    //   maxQty,
+    //   totalCollateral,
+    //   side,
+    //   // reduceOnly,
+    //   orders: orders?.map((o) => o.quantity),
+    //   // positionsData,
+    //   // markPrices,
+    //   // accountInfo,
+    //   // symbolInfo,
+    //   // symbol,
+    // });
     return Math.max(maxQty, 0);
 };

package/esm/orderly/useOrderEntry.js

@@ -182,7 +182,7 @@ export function useOrderEntry(symbolOrOrder, sideOrOptions, reduceOnly, options)
     ]);
     const isStopOrder = parsedData?.order_type === OrderType.STOP_LIMIT ||
         parsedData?.order_type === OrderType.STOP_MARKET;
-    const [doCreateOrder, { data, error, reset, isMutating }] = useMutation(isStopOrder ? "/v1/algo/order" : "/v1/order");
+    const [doCreateOrder, { isMutating }] = useMutation(isStopOrder ? "/v1/algo/order" : "/v1/order");
     // const maxQty = 3;
     const createOrder = (values) => {
         if (!values.symbol) {
@@ -233,9 +233,16 @@ export function useOrderEntry(symbolOrOrder, sideOrOptions, reduceOnly, options)
                         // ...omit(["order_price"], values),
                         ...data,
                     })).then((res) => {
-                        // console.log("res::::", res);
+                        console.log("--------------------res::::", res);
                         // resolve(res);
                         if (res.success) {
+                            // TODO: remove when the WS service is fixed
+                            if (Array.isArray(res.data.rows)) {
+                                ee.emit("algoOrder:cache", {
+                                    ...res.data.rows[0],
+                                    trigger_price: data.trigger_price,
+                                });
+                            }
                             resolve(res.data);
                         }
                         else {

package/esm/orderly/useOrderStream.d.ts

@@ -11,7 +11,16 @@ type Params = {
     size?: number;
     side?: OrderSide;
 };
-export declare const useOrderStream: (params: Params) => readonly [any[] | null, {
+export declare const useOrderStream: (params: Params, options?: {
+    /**
+     * Keep the state update alive
+     */
+    keeplive?: boolean;
+    /**
+     * Stop the state update when the component unmount
+     */
+    stopOnUnmount?: boolean;
+}) => readonly [any[] | null, {
     readonly total: any;
     readonly isLoading: boolean;
     readonly refresh: import("swr/_internal").KeyedMutator<any[]>;

package/esm/orderly/useOrderStream.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOrderStream.d.ts","sourceRoot":"","sources":["../../src/orderly/useOrderStream.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,SAAS,EACT,WAAW,EACX,WAAW,EAEZ,MAAM,wBAAwB,CAAC;AAQhC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B;AAID,KAAK,MAAM,GAAG;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,WAAY,MAAM;;;;;;oCAyHD,MAAM,SAAS,WAAW;oCAoD1B,MAAM,WAAW,MAAM;wCA7CnB,MAAM,SAAS,WAAW;wCAoD1B,MAAM,WAAW,MAAM;;;;;;;;;;;;;EAkCtE,CAAC"}
+{"version":3,"file":"useOrderStream.d.ts","sourceRoot":"","sources":["../../src/orderly/useOrderStream.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,SAAS,EACT,WAAW,EACX,WAAW,EAEZ,MAAM,wBAAwB,CAAC;AAShC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B;AAID,KAAK,MAAM,GAAG;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,WAIjB,MAAM,YAEJ;IACR;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;;;;;oCA4GyC,MAAM,SAAS,WAAW;oCAoD1B,MAAM,WAAW,MAAM;wCA7CnB,MAAM,SAAS,WAAW;wCAoD1B,MAAM,WAAW,MAAM;;;;;;;;;;;;;EAkCtE,CAAC"}

package/esm/orderly/useOrderStream.js

@@ -5,40 +5,30 @@ import { useMarkPricesStream } from "./useMarkPricesStream";
 import { useMutation } from "../useMutation";
 import version from "../version";
 import { useDataCenterContext } from "../dataProvider";
-export const useOrderStream = (params) => {
+import { generateKeyFun } from "../utils/swr";
+export const useOrderStream = (
+/**
+ * Orders query params
+ */
+params, options) => {
     const { status, symbol, side, size = 100 } = params;
     const { data: markPrices = {} } = useMarkPricesStream();
-    const { regesterKeyHandler } = useDataCenterContext();
+    const { regesterKeyHandler, unregisterKeyHandler } = useDataCenterContext();
     const [doCancelOrder, { error: cancelOrderError, isMutating: cancelMutating },] = useMutation("/v1/order", "DELETE");
     const [doUpdateOrder, { error: updateOrderError, isMutating: updateMutating },] = useMutation("/v1/order", "PUT");
     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) => {
-        // reached the end
-        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);
-        }
-        if (symbol) {
-            search.set(`symbol`, symbol);
-        }
-        if (side) {
-            search.set(`side`, side);
-        }
-        return `/v1/orders?${search.toString()}`;
-    };
     useEffect(() => {
         const formatKey = (value) => (value ? `:${value}` : "");
         const key = `orders${formatKey(status)}${formatKey(symbol)}${formatKey(side)}`;
-        regesterKeyHandler(key, getKey);
-    }, [status, symbol, side]);
-    const ordersResponse = usePrivateInfiniteQuery(getKey, {
+        regesterKeyHandler?.(key, generateKeyFun({ status, symbol, side, size }));
+        return () => {
+            if (!options?.stopOnUnmount)
+                return;
+            unregisterKeyHandler(key);
+        };
+    }, [status, symbol, side, options?.keeplive]);
+    const ordersResponse = usePrivateInfiniteQuery(generateKeyFun({ status, symbol, side, size }), {
         initialSize: 1,
         // revalidateFirstPage: false,
         // onError: (err) => {
@@ -53,6 +43,7 @@ export const useOrderStream = (params) => {
         }
         return ordersResponse.data?.map((item) => item.rows)?.flat();
     }, [ordersResponse.data]);
+    // console.log(ordersResponse.data);
     const orders = useMemo(() => {
         if (!flattenOrders) {
             return null;

package/esm/orderly/useOrderbookStream.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOrderbookStream.d.ts","sourceRoot":"","sources":["../../src/orderly/useOrderbookStream.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB,CAAC;AAyFF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,UACnB,MAAM,GAAG,SAAS,SAClB,MAAM,WACJ,OAAO,QACV,aAAa,KAClB,aAqDF,CAAC;AAgCF,eAAO,MAAM,cAAc,SAAU,aAAa,UAAU,aAAa;;;CAWxE,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,WACrB,MAAM,YACL,aAAa,YACZ,gBAAgB;;;;;;;;;;;2BA2HgB,MAAM;;;;;;;;;IAmDjD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"useOrderbookStream.d.ts","sourceRoot":"","sources":["../../src/orderly/useOrderbookStream.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB,CAAC;AAyFF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,UACnB,MAAM,GAAG,SAAS,SAClB,MAAM,WACJ,OAAO,QACV,aAAa,KAClB,aAyDF,CAAC;AAgCF,eAAO,MAAM,cAAc,SAAU,aAAa,UAAU,aAAa;;;CAWxE,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,WACrB,MAAM,YACL,aAAa,YACZ,gBAAgB;;;;;;;;;;;2BA2HgB,MAAM;;;;;;;;;IAmDjD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/esm/orderly/useOrderbookStream.js

@@ -93,22 +93,26 @@ export const reduceOrderbook = (depth, level, padding, data) => {
             while (asks.length > 0) {
                 const [askPrice, askQty, newQuantity, newAmount] = asks[0];
                 if (askPrice <= bidPrice) {
-                    // console.log("xxxxxxxxxxx reset ask list begin", [...asks], { ...asks[0] });
+                    console.log("xxxxxxxxxxx reset ask list begin", [...asks], { ...asks[0] });
                     asks.shift();
-                    // let logStr = "";
+                    let logStr = "";
                     for (let index = 0; index < asks.length; index++) {
                         if (index === 0) {
                             const quantity = asks[index][1] + askQty;
                             asks[index][1] = quantity;
                             asks[index][2] = quantity;
-                            asks[index][3] += newAmount;
+                            // asks[index][3] += newAmount;
+                            // FIXME: fix this code later
+                            asks[index][3] = Math.ceil(quantity) * asks[index][0];
                         }
                         else {
-                            asks[index][3] += newAmount;
+                            // asks[index][3] += newAmount;
+                            // FIXME: fix this code later
+                            asks[index][3] = asks[index][0] * asks[index][1] + asks[index - 1][3];
                         }
-                        // logStr += `index: ${index} ${asks[index]}\n`;
+                        logStr += `index: ${index} ${asks[index]}\n`;
                     }
-                    // console.log("xxxxxxxxxxx reset ask list end", logStr);
+                    console.log("xxxxxxxxxxx reset ask list end", logStr);
                 }
                 else {
                     break;

package/esm/orderly/usePrivateDataObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePrivateDataObserver.d.ts","sourceRoot":"","sources":["../../src/orderly/usePrivateDataObserver.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGjD,eAAO,MAAM,sBAAsB;uBAEd,MAAM,KAAK,IAAI,MAAM,EAAE,cAAc,CAAC;UAgI1D,CAAC"}
+{"version":3,"file":"usePrivateDataObserver.d.ts","sourceRoot":"","sources":["../../src/orderly/usePrivateDataObserver.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIjD,eAAO,MAAM,sBAAsB;uBAEd,MAAM,KAAK,IAAI,MAAM,EAAE,cAAc,CAAC;UA0K1D,CAAC"}

package/esm/orderly/usePrivateDataObserver.js

@@ -1,41 +1,60 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useWS } from "../useWS";
-import { useSWRConfig } from "swr";
+import { mutate } from "swr";
 import { useAccount } from "../useAccount";
 import { unstable_serialize } from "swr/infinite";
 import { useDebouncedCallback } from "use-debounce";
 import { useEventEmitter } from "../useEventEmitter";
-import { parseJSON } from "../utils/json";
+import { updateOrdersHandler } from "../utils/swr";
 export const usePrivateDataObserver = (options) => {
     const ws = useWS();
-    const { mutate } = useSWRConfig();
+    // const { mutate } = useSWRConfig();
     const ee = useEventEmitter();
     const { state } = useAccount();
-    const updateOrders = useDebouncedCallback((data) => {
+    // TODO: remove this when the WS service provides the correct data
+    const algoOrderCacheQuneue = useRef([]);
+    const updateOrders = useDebouncedCallback((data, isAlgoOrder) => {
         const map = options.getKeysMap("orders");
-        const orderStatus = getSessionStorage("orderly_order_status", "positions");
-        map.forEach((getKey, key) => {
-            if ((orderStatus === "history" && key === "orders") ||
-                (orderStatus === "positions" && key === "orders:NEW") ||
-                key.includes("INCOMPLETE") || // always update pending list
-                key.includes(orderStatus)) {
-                mutate(unstable_serialize((index, prevData) => [
-                    getKey(index, prevData),
-                    state.accountId,
-                ]));
+        console.log("$$$$$$$$$$$$", data);
+        if (isAlgoOrder) {
+            /// TODO: remove this when the WS service provides the correct data
+            if (algoOrderCacheQuneue.current.length) {
+                const index = algoOrderCacheQuneue.current.findIndex((item) => item.order_id === data.algoOrderId);
+                console.log({ ...algoOrderCacheQuneue.current[index] });
+                if (index > -1) {
+                    data = {
+                        ...data,
+                        ...algoOrderCacheQuneue.current[index],
+                    };
+                    algoOrderCacheQuneue.current.splice(index, 1);
+                }
             }
+        }
+        map.forEach((getKey, key) => {
+            mutate(unstable_serialize((index, prevData) => [
+                getKey(index, prevData),
+                state.accountId,
+            ]), (prevData) => {
+                return updateOrdersHandler(key, data, prevData);
+            }, {
+                revalidate: false,
+            });
         });
-        // update the orders history list;
-        // ee.emit("orders:changed");
-    }, 500);
+        //  emit events;
+        ee.emit("orders:changed", {
+            ...data,
+            status: data.status || data.algoStatus,
+        });
+    }, 50, {
+        trailing: true,
+    });
     // orders
     useEffect(() => {
         if (!state.accountId)
             return;
         const unsubscribe = ws.privateSubscribe("executionreport", {
             onMessage: (data) => {
-                updateOrders(data);
-                ee.emit("orders:changed", data);
+                updateOrders(data, false);
             },
         });
         return () => unsubscribe?.();
@@ -46,12 +65,15 @@ export const usePrivateDataObserver = (options) => {
             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 }));
+                    data.forEach((item) => {
+                        updateOrders(item, true);
+                        // ee.emit("orders:changed", { ...item, status: item.algoStatus });
+                    });
                 }
                 else {
-                    ee.emit("orders:changed", { ...data, status: data.algoStatus });
+                    updateOrders(data, true);
+                    // ee.emit("orders:changed", { ...data, status: data.algoStatus });
                 }
             },
         });
@@ -109,18 +131,14 @@ export const usePrivateDataObserver = (options) => {
             unsubscribe?.();
         };
     }, [state.accountId]);
-};
-const getSessionStorage = (key, initialValue) => {
-    // Prevent build error "window is undefined" but keep keep working
-    if (typeof window === "undefined") {
-        return initialValue;
-    }
-    try {
-        const item = window.sessionStorage.getItem(key);
-        return item ? parseJSON(item) : initialValue;
-    }
-    catch (error) {
-        console.warn(`Error reading sessionStorage key “${key}”:`, error);
-        return initialValue;
-    }
+    // cache algo orders
+    useEffect(() => {
+        const handler = (data) => {
+            algoOrderCacheQuneue.current.push(data);
+        };
+        ee.on("algoOrder:cache", handler);
+        return () => {
+            ee.off("algoOrder:cache", handler);
+        };
+    }, []);
 };

package/esm/services/painter/basePaint.d.ts

@@ -1,5 +1,8 @@
 import { PosterPainter } from "./painter";
 export type posterDataSource = {
+    /**
+     * slogan of the poster
+     */
     message?: string;
     position: {
         symbol: string;
@@ -17,7 +20,7 @@ export type posterDataSource = {
          */
         ROI: number;
         /**
-         * The informations of the position, such as open price, opened at, mark price, quantity
+         * The informations of the position, such as open price, opened at, mark price, quantity and custom message.
          */
         informations: {
             title: string;
@@ -64,6 +67,7 @@ export type drawOptions = {
      * Color of common text
      */
     color?: string;
+    fontFamily?: string;
     /**
      * Lose color
      */

package/esm/services/painter/basePaint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basePaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/basePaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QAEf,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,YAAY,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACjD;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;CACJ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC;IAErB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,8BAAsB,SAAS;IAE3B,SAAS,CAAC,GAAG,EAAE,wBAAwB;IACvC,SAAS,CAAC,OAAO,EAAE,aAAa;gBADtB,GAAG,EAAE,wBAAwB,EAC7B,OAAO,EAAE,aAAa;IAElC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;CACnD"}
+{"version":3,"file":"basePaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/basePaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QAEf,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,YAAY,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACjD;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;CACJ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC;IAErB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,8BAAsB,SAAS;IAE3B,SAAS,CAAC,GAAG,EAAE,wBAAwB;IACvC,SAAS,CAAC,OAAO,EAAE,aAAa;gBADtB,GAAG,EAAE,wBAAwB,EAC7B,OAAO,EAAE,aAAa;IAElC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;CACnD"}

package/esm/services/painter/dataPaint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataPaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/dataPaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAc,MAAM,aAAa,CAAC;AAGjE,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAO,CAAC,qBAAqB,CAAO;IAEpC,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,kBAAkB,CAAsB;IAE1C,IAAI,CAAC,OAAO,EAAE,WAAW;IA0B/B,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAoEpB,OAAO,CAAC,iBAAiB;IAoDzB,OAAO,CAAC,gBAAgB;IA6BxB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,SAAS;IAoCjB,OAAO,CAAC,MAAM;CAGf"}
+{"version":3,"file":"dataPaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/dataPaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAc,MAAM,aAAa,CAAC;AAGjE,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAO,CAAC,qBAAqB,CAAO;IAEpC,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,kBAAkB,CAAsB;IAE1C,IAAI,CAAC,OAAO,EAAE,WAAW;IA8B/B,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,YAAY;IA0EpB,OAAO,CAAC,iBAAiB;IAwDzB,OAAO,CAAC,gBAAgB;IAsCxB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,SAAS;IAsCjB,OAAO,CAAC,MAAM;CAGf"}

package/esm/services/painter/dataPaint.js

@@ -9,17 +9,19 @@ export class DataPaint extends BasePaint {
         this.DEFAULT_LOSE_COLOR = "rgb(255,103,194)";
     }
     async draw(options) {
-        console.log("DataPaint draw: ", options.data);
+        const needDrawDetails = Array.isArray(options.data?.position?.informations) &&
+            (options.data?.position?.informations?.length ?? 0) > 0;
+        const offsetTop = 50;
         if (!!options.data?.message) {
             this.drawMessage(options);
         }
         if (!!options.data?.position) {
-            this.drawPosition(options);
+            this.drawPosition(options, needDrawDetails ? 0 : offsetTop);
         }
-        if (Array.isArray(options.data?.position?.informations)) {
+        if (needDrawDetails) {
             this.drawInformations(options);
         }
-        this.drawUnrealizedPnL(options);
+        this.drawUnrealizedPnL(options, needDrawDetails ? 0 : offsetTop);
         if (!!options.data?.domain) {
             this.drawDomainUrl(options);
         }
@@ -37,12 +39,14 @@ export class DataPaint extends BasePaint {
             top: this._ratio(position.top),
             left: this._ratio(position.left),
             textBaseline: "top",
+            fontFamily: options.fontFamily,
         });
     }
-    drawPosition(options) {
+    drawPosition(options, offsetTop = 0) {
         const layout = path(["layout", "position"], options);
         const { position } = layout;
         let left = this._ratio(position.left);
+        let top = position.top + offsetTop;
         let prevElementBoundingBox = {};
         // draw position side;
         if (typeof options.data?.position.side !== "undefined") {
@@ -51,8 +55,9 @@ export class DataPaint extends BasePaint {
                     ? this.DEFAULT_PROFIT_COLOR
                     : this.DEFAULT_LOSE_COLOR,
                 left,
-                top: this._ratio(70),
+                top: this._ratio(top),
                 fontSize: this._ratio(14),
+                fontFamily: options.fontFamily,
             });
         }
         if (typeof options.data?.position.symbol !== "undefined") {
@@ -61,16 +66,18 @@ export class DataPaint extends BasePaint {
                 prevElementBoundingBox = this._drawText("|", {
                     color: "rgba(255,255,255,0.2)",
                     left,
-                    top: this._ratio(70),
+                    top: this._ratio(top),
                     fontSize: this._ratio(12),
+                    fontFamily: options.fontFamily,
                 });
             }
             left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
             prevElementBoundingBox = this._drawText(options.data?.position.symbol, {
                 color: "rgba(255,255,255,0.98)",
                 left: left,
-                top: this._ratio(70),
+                top: this._ratio(top),
                 fontSize: this._ratio(12),
+                fontFamily: options.fontFamily,
             });
         }
         if (typeof options.data?.position.leverage !== "undefined") {
@@ -79,25 +86,28 @@ export class DataPaint extends BasePaint {
                 prevElementBoundingBox = this._drawText("|", {
                     color: "rgba(255,255,255,0.2)",
                     left,
-                    top: this._ratio(70),
+                    top: this._ratio(top),
                     fontSize: this._ratio(12),
+                    fontFamily: options.fontFamily,
                 });
             }
             left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
             prevElementBoundingBox = this._drawText(`${options.data?.position.leverage}X`, {
                 color: "rgba(255,255,255,0.98)",
                 left,
-                top: this._ratio(70),
+                top: this._ratio(top),
                 fontSize: this._ratio(12),
+                fontFamily: options.fontFamily,
             });
         }
     }
-    drawUnrealizedPnL(options) {
+    drawUnrealizedPnL(options, offsetTop = 0) {
         // reset left value;
         const layout = path(["layout", "unrealizedPnl"], options);
         const { position } = layout;
         let left = this._ratio(position.left);
         let prevElementBoundingBox = {};
+        const top = (position.top ?? 0) + offsetTop;
         // ROI
         if (typeof options.data?.position.ROI !== "undefined") {
             const prefix = options.data?.position.ROI > 0 ? "+" : "";
@@ -106,9 +116,10 @@ export class DataPaint extends BasePaint {
                     ? options.profitColor || this.DEFAULT_PROFIT_COLOR
                     : options.loseColor || this.DEFAULT_LOSE_COLOR,
                 left,
-                top: this._ratio(position.top),
+                top: this._ratio(top),
                 fontSize: this._ratio(layout.fontSize),
                 fontWeight: 700,
+                fontFamily: options.fontFamily,
             });
         }
         // unrelPnL
@@ -125,30 +136,39 @@ export class DataPaint extends BasePaint {
             prevElementBoundingBox = this._drawText(text, {
                 color: "rgba(255,255,255,0.5)",
                 left,
-                top: this._ratio(position.top),
+                top: this._ratio(top),
                 fontSize: this._ratio(layout.fontSize * 0.6),
                 fontWeight: 600,
+                fontFamily: options.fontFamily,
             });
         }
     }
     drawInformations(options) {
         const layout = path(["layout", "informations"], options);
         const { position } = layout;
+        const isVertical = (options.data?.position.informations.length ?? 0) === 2;
         options.data?.position.informations.forEach((info, index) => {
-            const left = position.left + this.positionInfoCellWidth * (index % 2);
-            const top = position.top + Math.floor(index / 2) * 40;
+            // let cellWidth = this.positionInfoCellWidth;
+            let left = position.left + this.positionInfoCellWidth * Math.floor(index / 2);
+            let top = position.top + (index % 2) * 40;
+            // if (isVertical && index === 1) {
+            //   left = position.left!;
+            //   top = (position.top as number) + index * 40;
+            // }
             this._drawText(info.title, {
                 left: this._ratio(left),
                 top: this._ratio(top),
                 fontSize: this._ratio(10),
                 color: "rgba(255,255,255,0.2)",
+                fontFamily: options.fontFamily,
             });
             this._drawText(info.value, {
-                left: this._ratio(position.left + this.positionInfoCellWidth * (index % 2)),
+                left: this._ratio(left),
                 top: this._ratio(top + 17),
                 fontSize: this._ratio(layout.fontSize),
                 fontWeight: 500,
                 color: layout.color,
+                fontFamily: options.fontFamily,
             });
         });
     }
@@ -161,6 +181,7 @@ export class DataPaint extends BasePaint {
             top: this._ratio(top),
             fontSize: this._ratio(layout.fontSize),
             color: options.brandColor ?? this.DEFAULT_PROFIT_COLOR,
+            fontFamily: options.fontFamily,
         });
     }
     drawPositionTime(options) {
@@ -174,13 +195,15 @@ export class DataPaint extends BasePaint {
             fontSize: this._ratio(layout.fontSize),
             color: layout.color,
             textAlign: "end",
+            fontFamily: options.fontFamily,
         });
     }
     _drawText(str, options) {
         let boundingBox;
         const { left = 30, top = 30, fontSize = 13, fontWeight = 500, color = "black", textBaseline = "middle", textAlign = "start", } = options ?? {};
         this.ctx.save();
-        this.ctx.font = `${fontWeight} ${fontSize}px Manrope`;
+        // "Nunito Sans",-apple-system,"San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif
+        this.ctx.font = `${fontWeight} ${fontSize}px ${options?.fontFamily}`;
         this.ctx.fillStyle = color;
         this.ctx.textBaseline = textBaseline;
         this.ctx.textAlign = textAlign;

package/esm/services/painter/layout.config.js

@@ -4,7 +4,7 @@ export const defaultLayoutConfig = {
         // color: undefined,
         position: {
             left: 20,
-            bottom: 37,
+            bottom: 15,
         },
     },
     message: {