@orderly.network/ui-tpsl 2.0.1-alpha.3 → 2.0.1-alpha.4

package/.turbo/turbo-build.log

@@ -0,0 +1,34 @@
+
+
+> @orderly.network/ui-tpsl@2.0.0 build /Users/leo/orderly/orderly-web/packages/ui-tpsl
+> tsup && pnpm run build:css
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.build.json
+CLI tsup v7.3.0
+CLI Using tsup config: /Users/leo/orderly/orderly-web/packages/ui-tpsl/tsup.config.ts
+CLI Target: es2020
+CLI Cleaning output folder
+ESM Build start
+CJS Build start
+ESM dist/index.mjs     16.78 KB
+ESM dist/index.mjs.map 64.70 KB
+ESM ⚡️ Build success in 1155ms
+CJS dist/index.js     18.22 KB
+CJS dist/index.js.map 64.70 KB
+CJS ⚡️ Build success in 1158ms
+DTS Build start
+DTS ⚡️ Build success in 17485ms
+DTS dist/index.d.mts 1.97 KB
+DTS dist/index.d.ts  1.97 KB
+
+> @orderly.network/ui-tpsl@2.0.0 build:css /Users/leo/orderly/orderly-web/packages/ui-tpsl
+> tailwindcss build -i src/tailwind.css -o dist/styles.css --minify
+
+
+Rebuilding...
+
+warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
+warn - https://tailwindcss.com/docs/content-configuration
+
+Done in 352ms.

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @orderly.network/ui-tpsl
+
+## 1.0.1-alpha.0
+
+### Patch Changes
+
+- fix bugs;
+- Updated dependencies
+  - @orderly.network/hooks@2.0.1-alpha.4
+  - @orderly.network/types@2.0.1-alpha.4
+  - @orderly.network/utils@2.0.1-alpha.4
+  - @orderly.network/ui@2.0.1-alpha.4

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@orderly.network/ui-tpsl",
-  "version": "2.0.1-alpha.3",
+  "version": "2.0.1-alpha.4",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup && pnpm run build:css",
+    "build:css": "tailwindcss build -i src/tailwind.css -o dist/styles.css --minify",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "keywords": [
     "Orderly",
     "UI",
     "TPSL"
   ],
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
-    "@orderly.network/ui": "2.0.1-alpha.3",
-    "@orderly.network/hooks": "2.0.1-alpha.3",
-    "@orderly.network/utils": "2.0.1-alpha.3",
-    "@orderly.network/types": "2.0.1-alpha.3"
+    "@orderly.network/ui": "workspace:*",
+    "@orderly.network/hooks": "workspace:*",
+    "@orderly.network/types": "workspace:*",
+    "@orderly.network/utils": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
@@ -28,13 +27,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.4",
+    "tsconfig": "workspace:*",
     "tsup": "^7.1.0",
-    "typescript": "^5.1.6",
-    "tsconfig": "0.3.17"
-  },
-  "scripts": {
-    "build": "tsup && pnpm run build:css",
-    "build:css": "tailwindcss build -i src/tailwind.css -o dist/styles.css --minify",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "typescript": "^5.1.6"
   }
-}
+}

package/src/editorPopover.tsx

@@ -0,0 +1,169 @@
+import { useLocalStorage } from "@orderly.network/hooks";
+import {
+  Button,
+  cn,
+  modal,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+} from "@orderly.network/ui";
+import { useState } from "react";
+import { TPSLWidget } from "./tpsl.widget";
+import { PositionTPSLConfirm } from "./tpsl.ui";
+import { AlgoOrderRootType, API } from "@orderly.network/types";
+import { ButtonProps } from "@orderly.network/ui";
+
+export const PositionTPSLPopover = (props: {
+  position: API.Position;
+  order?: API.AlgoOrder;
+  label: string;
+  baseDP?: number;
+  quoteDP?: number;
+  /**
+   * Button props
+   */
+  buttonProps?: ButtonProps;
+  isEditing?: boolean;
+}) => {
+  const { position, order, baseDP, quoteDP, buttonProps, isEditing } = props;
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(true);
+
+  const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
+
+  const isPositionTPSL = isEditing ? order?.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL : undefined;
+
+  return (
+    <PopoverRoot
+      onOpenChange={(isOpen) => {
+        // console.log("isOpen", isOpen);
+        if (visible) {
+          setOpen(isOpen);
+        }
+      }}
+      open={open}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outlined"
+          size="sm"
+          color="secondary"
+          {...buttonProps}
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          {props.label}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn(
+          "oui-w-[360px]",
+          visible ? "oui-visible" : "oui-invisible"
+        )}
+        align="end"
+        side={"top"}
+      >
+        <TPSLWidget
+          position={position}
+          order={order}
+          isEditing={isEditing}
+          onComplete={() => {
+            // console.log("tpsl order completed");
+            setOpen(false);
+          }}
+          onCancel={() => {
+            setOpen(false);
+          }}
+          onConfirm={(order, options) => {
+            if (!needConfirm) {
+              return Promise.resolve(true);
+            }
+
+            setVisible(false);
+
+            const maxQty = Math.abs(Number(position.position_qty));
+
+            // console.log(
+            //   "order",
+            //   order,
+            //   isEditing ||
+            //     (!!order &&
+            //       order.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL &&
+            //       order.quantity === maxQty)
+            // );
+
+            if (
+              (`${order.tp_trigger_price ?? ""}`).length === 0 &&
+              (`${order.sl_trigger_price ?? ""}`).length === 0 
+            ) {
+              return modal
+                .confirm({
+                  title: "Cancel Order",
+                  content:
+                    "Are you sure you want to cancel this TP/SL order?",
+                  onOk: () => {
+                    return options.cancel();
+                  },
+                })
+                .then(
+                  () => {
+                    setOpen(false);
+                    setVisible(true);
+                    return true;
+                  },
+                  () => {
+                    setVisible(true);
+                    return Promise.reject(false);
+                  }
+                );
+            }
+
+            const finalIsEditing =
+              isEditing ||
+              (!!order &&
+                order.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL &&
+                order.quantity === maxQty);
+
+            return modal
+              .confirm({
+                title: finalIsEditing ? "Edit Order" : "Confirm Order",
+                // bodyClassName: "lg:oui-py-0",
+                onOk: () => {
+                  return options.submit();
+                },
+                classNames: {
+                  body: "!oui-pb-0"
+                },
+                content: (
+                  <PositionTPSLConfirm
+                    isPositionTPSL={isPositionTPSL}
+                    isEditing={finalIsEditing}
+                    symbol={order.symbol!}
+                    qty={Number(order.quantity)}
+                    maxQty={maxQty}
+                    tpPrice={Number(order.tp_trigger_price)}
+                    slPrice={Number(order.sl_trigger_price)}
+                    side={order.side!}
+                    quoteDP={quoteDP ?? 2}
+                    baseDP={baseDP ?? 2}
+                  />
+                ),
+              })
+              .then(
+                () => {
+                  setOpen(false);
+                  setVisible(true);
+                  return true;
+                },
+                () => {
+                  setVisible(true);
+                  return Promise.reject(false);
+                }
+              );
+          }}
+        />
+      </PopoverContent>
+    </PopoverRoot>
+  );
+};

package/src/editorSheet.tsx

@@ -0,0 +1,185 @@
+import { AlgoOrderRootType, API } from "@orderly.network/types";
+import {
+  cn,
+  Flex,
+  modal,
+  useModal,
+  Text,
+  Box,
+  Badge,
+  Divider,
+  toast,
+} from "@orderly.network/ui";
+import { TPSLWidget, TPSLWidgetProps } from "./tpsl.widget";
+import { PositionTPSLConfirm } from "./tpsl.ui";
+import { useMemo, useState } from "react";
+import { useLocalStorage, useMarkPrice } from "@orderly.network/hooks";
+
+type TPSLSheetProps = {
+  position: API.Position;
+  order?: API.AlgoOrder;
+  // label: string;
+  // baseDP?: number;
+  // quoteDP?: number;
+  symbolInfo: API.SymbolExt;
+  isEditing?: boolean;
+};
+
+export const PositionTPSLSheet = (props: TPSLWidgetProps & TPSLSheetProps) => {
+  const { position, order, symbolInfo, isEditing } = props;
+  const { resolve, hide, updateArgs } = useModal();
+
+  const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
+
+  const isPositionTPSL = isEditing ? order?.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL : undefined;
+
+
+  const updateSheetTitle = (title: string) => {
+    if (isEditing) return;
+    updateArgs({ title });
+  };
+
+  const onCompleted = () => {
+    resolve();
+    hide();
+  };
+
+  const { quote_dp, base_dp } = symbolInfo;
+
+  return (
+    <>
+      <PositionInfo position={position} symbolInfo={symbolInfo} />
+
+      <TPSLWidget
+        {...props}
+        onTPSLTypeChange={(type) => {
+          updateSheetTitle(
+            type === AlgoOrderRootType.TP_SL ? "TP/SL" : "Position TP/SL"
+          );
+        }}
+        onComplete={onCompleted}
+        onConfirm={(order, options) => {
+          if (!needConfirm) {
+            return Promise.resolve(true);
+          }
+
+          return modal
+            .confirm({
+              title: isEditing ? "Edit Order" : "Confirm Order",
+              bodyClassName: "oui-pb-0 lg:oui-pb-0",
+              onOk: () => {
+                return options.submit();
+              },
+              content: (
+                <PositionTPSLConfirm
+                  isPositionTPSL={isPositionTPSL}
+                  isEditing={isEditing}
+                  symbol={order.symbol!}
+                  qty={Number(order.quantity)}
+                  maxQty={Math.abs(Number(position.position_qty))}
+                  tpPrice={Number(order.tp_trigger_price)}
+                  slPrice={Number(order.sl_trigger_price)}
+                  side={order.side!}
+                  quoteDP={quote_dp ?? 2}
+                  baseDP={base_dp ?? 2}
+                />
+              ),
+            })
+            .then(
+              () => {
+                // setOpen(false);
+                // setVisible(true);
+                return true;
+              },
+              (reject) => {
+                if (reject?.message) {
+                  toast.error(reject.message);
+                }
+                
+                // setVisible(true);
+                return Promise.reject(false);
+              }
+            );
+        }}
+        onCancel={() => {
+          hide();
+        }}
+      />
+    </>
+  );
+};
+
+export const TPSLSheetTitle = () => {
+  const modal = useModal();
+
+  const title = useMemo<string>(() => {
+    return (modal.args?.title || "TP/SL") as string;
+  }, [modal.args?.title]);
+
+  return <span>{title}</span>;
+};
+
+export const PositionInfo = (props: {
+  position: API.Position;
+  symbolInfo: API.SymbolExt;
+}) => {
+  const { position, symbolInfo } = props;
+  const { data: markPrice } = useMarkPrice(position.symbol);
+  const modal = useModal();
+  const isPositionTPSL = useMemo(() => {
+    return modal.args?.title === "Position TP/SL";
+  }, [modal.args?.title]);
+  return (
+    <>
+      <Flex justify={"between"} pb={3} itemAlign={"center"}>
+        <Text.formatted rule="symbol" className="oui-text-xs" showIcon>
+          {position.symbol}
+        </Text.formatted>
+        <Flex gapX={1}>
+          {isPositionTPSL && <Badge size="xs" color="primaryLight">Position</Badge>}
+          <Badge size="xs" color="neutral">
+            TP/SL
+          </Badge>
+          {position.position_qty < 0 ? (
+            <Badge size="xs" color="buy">
+              Buy
+            </Badge>
+          ) : (
+            <Badge size="xs" color="sell">
+              Sell
+            </Badge>
+          )}
+        </Flex>
+      </Flex>
+      <Divider intensity={8} />
+      <Box py={3} className="oui-space-y-1">
+        <Flex justify={"between"}>
+          <Text size="sm" intensity={54}>
+            Avg. open
+          </Text>
+          <Text.numeral
+            className="oui-text-xs"
+            unit={symbolInfo.quote}
+            dp={symbolInfo.quote_dp}
+            unitClassName="oui-ml-1 oui-text-base-contrast-36"
+          >
+            {position.average_open_price}
+          </Text.numeral>
+        </Flex>
+        <Flex justify={"between"}>
+          <Text size="sm" intensity={54}>
+            Mark price
+          </Text>
+          <Text.numeral
+            className="oui-text-xs"
+            unit={symbolInfo.quote}
+            dp={symbolInfo.quote_dp}
+            unitClassName="oui-ml-1 oui-text-base-contrast-36"
+          >
+            {markPrice}
+          </Text.numeral>
+        </Flex>
+      </Box>
+    </>
+  );
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export { TPSLWidget } from "./tpsl.widget";
+export { PositionTPSLPopover } from "./editorPopover";
+export { PositionTPSLSheet } from "./editorSheet";
+export { PositionTPSLConfirm } from "./tpsl.ui";
+export type { TPSLWidgetProps } from "./tpsl.widget";

package/src/pnlInput/pnlInput.ui.tsx

@@ -0,0 +1,115 @@
+import {
+  CaretDownIcon,
+  cn,
+  Input,
+  MenuItem,
+  SimpleDropdownMenu,
+} from "@orderly.network/ui";
+import { PNLInputState, PnLMode } from "./useBuilder.script";
+import { inputFormatter, Text } from "@orderly.network/ui";
+import { useEffect, useMemo, useState } from "react";
+
+export type PNLInputProps = PNLInputState & { testId?: string; quote: string };
+
+export const PNLInput = (props: PNLInputProps) => {
+  const {
+    mode,
+    modes,
+    onModeChange,
+    onValueChange,
+    quote,
+    quote_dp,
+    value,
+    pnl,
+  } = props;
+
+  const [prefix, setPrefix] = useState<string>(mode);
+  const [placeholder, setPlaceholder] = useState<string>(
+    mode === PnLMode.PERCENTAGE ? "%" : quote
+  );
+
+  const color = useMemo(() => {
+    const num = Number(pnl);
+
+    if (isNaN(num) || num === 0) return "";
+
+    if (num > 0) return "oui-text-trade-profit";
+    if (num < 0) return "oui-text-trade-loss";
+  }, [pnl]);
+
+  useEffect(() => {
+    setPrefix(mode);
+    setPlaceholder(mode === PnLMode.PERCENTAGE ? "%" : quote);
+  }, [mode]);
+
+  
+
+  return (
+    <Input
+      prefix={mode}
+      size={{
+        initial: "lg",
+        lg: "md",
+      }}
+      placeholder={placeholder}
+      align={"right"}
+      value={value}
+      data-testid={props.testId}
+      autoComplete={"off"}
+      onValueChange={onValueChange}
+      formatters={[
+        // inputFormatter.numberFormatter,
+        props.formatter({ dp: quote_dp, mode }),
+        inputFormatter.currencyFormatter,
+      ]}
+      // className={color}
+      classNames={{
+        input: color,
+        prefix: "oui-text-base-contrast-54",
+        root:  "oui-outline-line-12 focus-within:oui-outline-primary-light",
+      }}
+      onFocus={() => {
+        setPlaceholder("");
+      }}
+      onBlur={() => {
+        setPlaceholder(mode === PnLMode.PERCENTAGE ? "%" : quote);
+      }}
+      // value={props.value}
+      suffix={
+        <>
+          {mode === PnLMode.PERCENTAGE && !!value &&  (
+            <Text size={"2xs"} color="inherit" className={cn("oui-ml-[2px]", color)}>
+              %
+            </Text>
+          )}
+          <PNLMenus
+            mode={mode}
+            modes={modes}
+            onModeChange={(item) => onModeChange(item.value as PnLMode)}
+          />
+        </>
+      }
+    />
+  );
+};
+
+const PNLMenus = (props: {
+  mode?: string;
+  modes: MenuItem[];
+  onModeChange: (value: MenuItem) => void;
+}) => {
+  return (
+    <SimpleDropdownMenu
+      currentValue={props.mode}
+      menu={props.modes}
+      align={"end"}
+      size={"xs"}
+      className={"oui-min-w-[80px]"}
+      onSelect={(item) => props.onModeChange(item as MenuItem)}
+    >
+      <button className={"oui-p-2"}>
+        <CaretDownIcon size={12} color={"white"} />
+      </button>
+    </SimpleDropdownMenu>
+  );
+};

package/src/pnlInput/pnlInput.widget.tsx

@@ -0,0 +1,13 @@
+import { PNLInput } from "./pnlInput.ui";
+import { BuilderProps, usePNLInputBuilder } from "./useBuilder.script";
+
+export const PnlInputWidget = (
+  props: BuilderProps & {
+    testId?: string;
+    quote: string;
+  }
+) => {
+  const { testId, quote, ...rest } = props;
+  const state = usePNLInputBuilder(rest);
+  return <PNLInput {...state} testId={testId} quote={quote} />;
+};