@orderly.network/hooks 1.1.5-rc.0 → 1.1.6

package/lib/usePoster.js

@@ -5,52 +5,123 @@ const react_1 = require("react");
 const ramda_1 = require("ramda");
 const painter_1 = require("./services/painter/painter");
 const layout_config_1 = require("./services/painter/layout.config");
+const types_1 = require("@orderly.network/types");
 /**
  * Generates a poster image based on position information. You can set the size, background color, font color, font size, and content position of the poster.
- * @returns
+ * @example
+ * ```tsx
+ * const { ref, toDataURL, toBlob, download, copy } = usePoster({
+ *  backgroundColor: "#0b8c70",
+ * backgroundImg: "/images/poster_bg.png",
+ * color: "rgba(255, 255, 255, 0.98)",
+ * profitColor: "rgb(0,181,159)",
+ * ...
+ * });
  */
 const usePoster = (
-/**
- * The canvas element to draw the poster on
- */
-trage, 
 /**
  * The options to draw the poster
  */
-options) => {
+data, options) => {
     const [error, setError] = (0, react_1.useState)(null);
+    const [canCopy, setCanCopy] = (0, react_1.useState)(() => typeof navigator.clipboard !== "undefined");
     const painterRef = (0, react_1.useRef)(null);
+    const [target, setTarget] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         // Create the painter instance
-        if (trage && !painterRef.current) {
-            painterRef.current = new painter_1.PosterPainter(trage);
-            painterRef.current.draw((0, ramda_1.mergeDeepRight)({ layout: layout_config_1.defaultLayoutConfig }, options));
+        if (target && !painterRef.current) {
+            painterRef.current = new painter_1.PosterPainter(target, {
+                ratio: 1,
+                ...options,
+            });
+            painterRef.current.draw((0, ramda_1.mergeDeepRight)({ layout: layout_config_1.DefaultLayoutConfig, fontFamily: "Manrope" }, data));
         }
-    }, [trage]);
+    }, [target]);
     (0, react_1.useEffect)(() => {
         if (painterRef.current) {
-            painterRef.current.draw((0, ramda_1.mergeDeepRight)({ layout: layout_config_1.defaultLayoutConfig }, options));
+            painterRef.current.draw((0, ramda_1.mergeDeepRight)({ layout: layout_config_1.DefaultLayoutConfig, fontFamily: "Manrope" }, data));
         }
-    }, [options]);
-    //   const draw = (dataSource: any) => {};
-    //   const clear = () => {};
-    const toDataURL = (
-    /**
-     * The image MIME type
-     */
-    type = "image/png", 
+    }, [data]);
+    const toDataURL = (type, encoderOptions) => {
+        if (!target) {
+            throw new types_1.SDKError("The ref must be a canvas element");
+        }
+        return target.toDataURL(type, encoderOptions);
+    };
     /**
-     * The quality of the image
+     * Converts the poster to a blob
      */
-    encoderOptions = 1.0) => {
-        return trage.toDataURL(type, encoderOptions);
+    const toBlob = (0, react_1.useCallback)((type, encoderOptions) => {
+        return new Promise((resolve) => {
+            if (!target) {
+                resolve(null);
+                return;
+            }
+            target.toBlob(resolve, type, encoderOptions);
+        });
+    }, [target]);
+    const ref = (ref) => {
+        if (!ref)
+            return;
+        if (ref.tagName.toUpperCase() !== "CANVAS") {
+            // throw new Error("The ref must be a canvas element");
+            setError(new types_1.SDKError("The ref must be a canvas element"));
+            return;
+        }
+        setTarget(ref);
     };
+    const download = (0, react_1.useCallback)((filename, type = "image/png", encoderOptions) => {
+        if (!target) {
+            throw new types_1.SDKError("The ref must be a canvas element");
+        }
+        const img = new Image();
+        img.src = target.toDataURL(type, encoderOptions);
+        const link = document.createElement("a");
+        link.href = img.src;
+        link.download = filename;
+        link.click();
+    }, [target]);
+    const copy = (0, react_1.useCallback)(() => {
+        if (!target) {
+            throw new types_1.SDKError("The ref must be a canvas element");
+        }
+        // copy image to clipboard
+        return new Promise((resolve, reject) => {
+            if (!navigator.clipboard) {
+                reject(new types_1.SDKError("Clipboard API is not supported"));
+                return;
+            }
+            target.toBlob((blob) => {
+                if (!blob) {
+                    reject(new types_1.SDKError("Failed to create blob"));
+                    return;
+                }
+                return navigator.clipboard
+                    .write([new ClipboardItem({ [blob.type]: blob })])
+                    .then(resolve, reject);
+            });
+        });
+    }, [target]);
     return {
         error,
+        ref,
         /**
          * Converts the poster to a data URL
          */
         toDataURL,
+        /**
+         * Converts the poster to a blob
+         */
+        toBlob,
+        /**
+         * Downloads the poster as an image
+         */
+        download,
+        /**
+         * Browser if supports copy image to clipboard
+         */
+        canCopy,
+        copy,
     };
 };
 exports.usePoster = usePoster;

package/lib/utils/dev.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dev.d.ts.map

package/lib/utils/dev.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/utils/dev.ts"],"names":[],"mappings":""}

package/lib/utils/dev.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@orderly.network/core");
+const __ORDERLY__DEBUGER_TAG = "__ORDERLY__DEBUGER";
+function debugPrint(msg, tag) {
+    tag = `${__ORDERLY__DEBUGER_TAG}:${tag} `;
+    if (!window.__ORDERLY__DEBUGER) {
+        console.log("${tag}${msg}");
+        // console.info(
+        //   "You can add `DebugPrinter` component to see the data in your UI"
+        // );
+    }
+    let ee = core_1.SimpleDI.get("EE");
+    if (ee && msg) {
+        ee.emit("print:data", msg);
+    }
+}
+if (typeof window !== "undefined") {
+    window.debugPrint = debugPrint;
+}

package/lib/utils/swr.d.ts

@@ -0,0 +1,10 @@
+import { API } from "@orderly.network/types";
+import { WSMessage } from "@orderly.network/types";
+export declare const generateKeyFun: (args: {
+    status?: string;
+    symbol?: string;
+    side?: string;
+    size?: number;
+}) => (pageIndex: number, previousPageData: any) => string | null;
+export declare const updateOrdersHandler: (key: string, updatedOrder: WSMessage.AlgoOrder | WSMessage.Order, orders?: API.OrderResponse[]) => unknown[] | undefined;
+//# sourceMappingURL=swr.d.ts.map

package/lib/utils/swr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swr.d.ts","sourceRoot":"","sources":["../../src/utils/swr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,eAAO,MAAM,cAAc,SAClB;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,iBAC7D,MAAM,oBAAoB,GAAG,KAAG,MAAM,GAAG,IAyBpD,CAAC;AAEJ,eAAO,MAAM,mBAAmB,QACzB,MAAM,gBACG,UAAU,SAAS,GAAG,UAAU,KAAK,WAC1C,IAAI,aAAa,EAAE,0BA6H7B,CAAC"}

package/lib/utils/swr.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateOrdersHandler = exports.generateKeyFun = void 0;
+const utils_1 = require("@orderly.network/utils");
+const ramda_1 = require("ramda");
+const generateKeyFun = (args) => (pageIndex, previousPageData) => {
+    // reached the end
+    if (previousPageData && !previousPageData.rows?.length)
+        return null;
+    const { status, symbol, side, size = 100 } = args;
+    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()}`;
+};
+exports.generateKeyFun = generateKeyFun;
+const updateOrdersHandler = (key, updatedOrder, orders) => {
+    if (!orders) {
+        return;
+    }
+    // console.log(key);
+    const isAlgoOrder = "algoOrderId" in updatedOrder;
+    const underscoreOrder = object2underscore(updatedOrder);
+    let formattedOrder = {
+        ...underscoreOrder,
+        updated_time: updatedOrder.timestamp,
+        type: updatedOrder.type.replace("_ORDER", ""),
+        //@ts-ignore
+        // visible_quantity: updatedOrder.visibleQuantity || updatedOrder.visible,
+    };
+    if (typeof formattedOrder.visible_quantity === "undefined") {
+        // check visible field;
+        // @ts-ignore
+        formattedOrder.visible_quantity = updatedOrder.visible;
+    }
+    // console.log(formattedOrder, updatedOrder);
+    const hasCreateTime = "created_time" in formattedOrder;
+    if (!hasCreateTime) {
+        formattedOrder["created_time"] = updatedOrder.timestamp;
+    }
+    if (isAlgoOrder) {
+        if (typeof updatedOrder.triggerTradePrice !== "undefined") {
+            formattedOrder.trigger_price = updatedOrder.triggerTradePrice;
+        }
+        if (formattedOrder.type === "MARKET") {
+            const { price, ...newObj } = formattedOrder;
+            // @ts-ignore
+            formattedOrder = newObj;
+        }
+    }
+    else {
+        // formattedOrder.created_time = updatedOrder.timestamp;
+    }
+    // const index = lensIndex(0);
+    const orderId = updatedOrder.orderId ||
+        updatedOrder.algoOrderId;
+    const isExisting = orderIsExisting(orders, orderId);
+    const status = updatedOrder.status ||
+        updatedOrder.rootAlgoStatus;
+    switch (status) {
+        case "NEW": {
+            // chceck if the order is already in the list
+            if (isExisting ||
+                key.startsWith("orders:CANCELLED") ||
+                key.startsWith("orders:FILLED") ||
+                key.startsWith("orders:REJECTED")) {
+                return orders;
+            }
+            return insertOrders(orders, formattedOrder);
+        }
+        case "CANCELLED": {
+            if (key.startsWith("orders:FILLED") ||
+                key.startsWith("orders:REJECTED")) {
+                return orders;
+            }
+            if (key.startsWith("orders:NEW") || key.startsWith("orders:INCOMPLETE")) {
+                return removeOrderIfExisting(orders, orderId);
+            }
+            if (key.startsWith("orders:CANCELLED")) {
+                return insertOrders(orders, formattedOrder);
+            }
+            return updateOrders(orders, formattedOrder);
+        }
+        case "REPLACED":
+            return updateOrders(orders, formattedOrder);
+        case "FILLED": {
+            if (isExisting) {
+                // for new list, remove the order if it exists
+                if (key.startsWith("orders:INCOMPLETE") ||
+                    key.startsWith("orders:NEW")) {
+                    // if fullfilled, remove from the list
+                    if (updatedOrder.totalExecutedQuantity === updatedOrder.quantity) {
+                        return removeOrderIfExisting(orders, orderId);
+                    }
+                    // update
+                    return updateOrders(orders, formattedOrder);
+                }
+            }
+            else {
+                // for filled list, insert the order if it doesn't exist
+                if (key.startsWith("orders:CANCELLED") ||
+                    key.startsWith("orders:INCOMPLETE") ||
+                    key.startsWith("orders:NEW")) {
+                    return orders;
+                }
+                // if filled/history list:
+                return insertOrders(orders, formattedOrder);
+            }
+        }
+        default:
+            return orders;
+    }
+};
+exports.updateOrdersHandler = updateOrdersHandler;
+function updateOrders(orders, formattedOrder) {
+    return orders.map((item) => {
+        return {
+            // ...item,
+            meta: item.meta,
+            rows: item.rows.map((order) => {
+                const isAlgoOrder = "algo_order_id" in order;
+                if (isAlgoOrder &&
+                    formattedOrder?.algo_order_id === order?.algo_order_id) {
+                    return { ...order, ...formattedOrder };
+                }
+                if (!isAlgoOrder && formattedOrder?.order_id === order?.order_id) {
+                    return { ...order, ...formattedOrder };
+                }
+                return order;
+            }),
+        };
+    });
+}
+function insertOrders(orders, formattedOrder) {
+    const index = (0, ramda_1.lensIndex)(0);
+    return (0, ramda_1.over)(index, (item) => ({
+        meta: {
+            ...item.meta,
+            total: item.meta.total + 1,
+        },
+        rows: [formattedOrder, ...item.rows],
+    }), orders);
+}
+function removeOrderIfExisting(orders, orderId) {
+    const isExisting = orderIsExisting(orders, orderId);
+    if (!isExisting)
+        return orders;
+    return orders.map((item) => {
+        return {
+            meta: { ...item.meta, total: item.meta.total - 1 },
+            rows: item.rows.filter((order) => {
+                const isAlgoOrder = "algo_order_id" in order;
+                return isAlgoOrder
+                    ? order.algo_order_id !== orderId
+                    : order.order_id !== orderId;
+            }),
+        };
+    });
+}
+function findOrderIndex(orders, orderId) {
+    let index = 0;
+    let index2;
+    for (let idx = 0; idx < orders.length; idx++) {
+        index = idx;
+        const item = orders[idx];
+        for (let idx2 = 0; idx2 < item.rows.length; idx2++) {
+            const element = item.rows[idx2];
+            if (element.algo_order_id === orderId ||
+                element.order_id === orderId) {
+                index2 = idx2;
+                break;
+            }
+        }
+    }
+    if (typeof index2 === "undefined") {
+        return;
+    }
+    return [index, index2];
+}
+function orderIsExisting(orders, orderId) {
+    const index = findOrderIndex(orders, orderId);
+    return Array.isArray(index);
+}
+function object2underscore(obj) {
+    return Object.keys(obj).reduce((acc, key) => {
+        acc[(0, utils_1.camelCaseToUnderscoreCase)(key)] = obj[key];
+        return acc;
+    }, {});
+}

package/lib/version.d.ts

@@ -5,6 +5,6 @@ declare global {
         };
     }
 }
-declare const _default: "1.1.5-rc.0";
+declare const _default: "1.1.6";
 export default _default;
 //# sourceMappingURL=version.d.ts.map

package/lib/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,mBAAmB,CAAC,EAAE;YAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;SACzB,CAAC;KACL;CACJ;;AAMD,wBAA4B"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,mBAAmB,CAAC,EAAE;YAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;SACzB,CAAC;KACL;CACJ;;AAMD,wBAAuB"}

package/lib/version.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 if (typeof window !== 'undefined') {
     window.__ORDERLY_VERSION__ = window.__ORDERLY_VERSION__ || {};
-    window.__ORDERLY_VERSION__["@orderly.network/hooks"] = "1.1.5-rc.0";
+    window.__ORDERLY_VERSION__["@orderly.network/hooks"] = "1.1.6";
 }
 ;
-exports.default = "1.1.5-rc.0";
+exports.default = "1.1.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderly.network/hooks",
-  "version": "1.1.5-rc.0",
+  "version": "1.1.6",
   "description": "",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -20,25 +20,25 @@
     "@types/jest": "^29.5.3",
     "@types/ramda": "^0.29.3",
     "@types/react": "^18.2.38",
-    "jest": "^29.6.1",
     "react": "^18.2.0",
+    "jest": "^29.6.1",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^5.0.5",
     "tsup": "^7.1.0",
     "typedoc": "^0.24.8",
     "typescript": "^5.1.6",
-    "tsconfig": "0.1.5-rc.0"
+    "tsconfig": "0.1.6"
   },
   "dependencies": {
     "ramda": "^0.29.0",
     "swr": "^2.2.4",
     "use-constant": "^1.1.1",
     "use-debounce": "^9.0.4",
-    "@orderly.network/core": "0.2.5-rc.0",
-    "@orderly.network/net": "1.1.5-rc.0",
-    "@orderly.network/perp": "2.0.5-rc.0",
-    "@orderly.network/utils": "0.1.5-rc.0",
-    "@orderly.network/types": "0.2.5-rc.0"
+    "@orderly.network/core": "0.2.6",
+    "@orderly.network/net": "1.1.6",
+    "@orderly.network/utils": "0.1.6",
+    "@orderly.network/perp": "2.0.6",
+    "@orderly.network/types": "0.2.6"
   },
   "publishConfig": {
     "access": "public"