@orderly.network/ui-order-entry 2.0.0-alpha.1

package/dist/index.d.ts

@@ -0,0 +1,495 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { FocusEvent } from 'react';
+import * as _orderly_network_types from '@orderly.network/types';
+import { OrderSide, OrderType, OrderlyOrder } from '@orderly.network/types';
+
+declare enum InputType {
+    PRICE = 0,
+    TRIGGER_PRICE = 1,
+    QUANTITY = 2,
+    TOTAL = 3,
+    NONE = 4
+}
+
+type OrderEntryScriptInputs = {
+    symbol: string;
+};
+declare const useOrderEntryScript: (inputs: OrderEntryScriptInputs) => {
+    currentQtyPercentage: number;
+    side: OrderSide;
+    type: OrderType;
+    setOrderValue: (key: "symbol" | "type" | "side" | "order_type" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "total" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_ROI" | "tp_trigger_price" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_ROI" | "sl_trigger_price", value: any) => void;
+    currentLeverage: number;
+    formattedOrder: Required<Pick<_orderly_network_types.OrderlyOrder, "symbol" | "side" | "order_type">> & Partial<Omit<_orderly_network_types.OrderlyOrder, "symbol" | "side" | "order_type">>;
+    cancelTP_SL: () => void;
+    setMaxQty: () => void;
+    symbolInfo: _orderly_network_types.API.SymbolExt;
+    onFocus: (type: InputType) => (_: FocusEvent) => void;
+    onBlur: (type: InputType) => (_: FocusEvent) => void;
+    refs: {
+        triggerPriceInputRef: react.MutableRefObject<HTMLInputElement | null>;
+        priceInputRef: react.MutableRefObject<HTMLInputElement | null>;
+    };
+    submit: () => Promise<void>;
+    reset: (order?: Partial<_orderly_network_types.OrderlyOrder> | undefined) => void;
+    resetErrors: () => void;
+    maxQty: number;
+    estLiqPrice: number | null;
+    estLeverage: number | null;
+    helper: {
+        validator: () => Promise<{
+            symbol?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_type_ext?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_amount?: {
+                type: string;
+                message: string;
+            } | undefined;
+            visible_quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            side?: {
+                type: string;
+                message: string;
+            } | undefined;
+            reduce_only?: {
+                type: string;
+                message: string;
+            } | undefined;
+            slippage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_tag?: {
+                type: string;
+                message: string;
+            } | undefined;
+            level?: {
+                type: string;
+                message: string;
+            } | undefined;
+            post_only_adjust?: {
+                type: string;
+                message: string;
+            } | undefined;
+            total?: {
+                type: string;
+                message: string;
+            } | undefined;
+            quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            algo_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            trigger_price_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            child_orders?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_pnl?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_offset?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_offset_percentage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_ROI?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_pnl?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_offset?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_offset_percentage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_ROI?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+        } | null>;
+        validate: () => Promise<{
+            symbol?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_type_ext?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_amount?: {
+                type: string;
+                message: string;
+            } | undefined;
+            visible_quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            side?: {
+                type: string;
+                message: string;
+            } | undefined;
+            reduce_only?: {
+                type: string;
+                message: string;
+            } | undefined;
+            slippage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_tag?: {
+                type: string;
+                message: string;
+            } | undefined;
+            level?: {
+                type: string;
+                message: string;
+            } | undefined;
+            post_only_adjust?: {
+                type: string;
+                message: string;
+            } | undefined;
+            total?: {
+                type: string;
+                message: string;
+            } | undefined;
+            quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            algo_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            trigger_price_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            child_orders?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_pnl?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_offset?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_offset_percentage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_ROI?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_pnl?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_offset?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_offset_percentage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_ROI?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+        } | null>;
+    };
+    freeCollateral: number;
+    metaState: {
+        dirty: {
+            symbol?: boolean | undefined;
+            order_type?: boolean | undefined;
+            order_type_ext?: boolean | undefined;
+            order_price?: boolean | undefined;
+            order_quantity?: boolean | undefined;
+            order_amount?: boolean | undefined;
+            visible_quantity?: boolean | undefined;
+            side?: boolean | undefined;
+            reduce_only?: boolean | undefined;
+            slippage?: boolean | undefined;
+            order_tag?: boolean | undefined;
+            level?: boolean | undefined;
+            post_only_adjust?: boolean | undefined;
+            total?: boolean | undefined;
+            quantity?: boolean | undefined;
+            type?: boolean | undefined;
+            price?: boolean | undefined;
+            algo_type?: boolean | undefined;
+            trigger_price_type?: boolean | undefined;
+            trigger_price?: boolean | undefined;
+            child_orders?: boolean | undefined;
+            tp_pnl?: boolean | undefined;
+            tp_offset?: boolean | undefined;
+            tp_offset_percentage?: boolean | undefined;
+            tp_ROI?: boolean | undefined;
+            tp_trigger_price?: boolean | undefined;
+            sl_pnl?: boolean | undefined;
+            sl_offset?: boolean | undefined;
+            sl_offset_percentage?: boolean | undefined;
+            sl_ROI?: boolean | undefined;
+            sl_trigger_price?: boolean | undefined;
+        };
+        submitted: boolean;
+        validated: boolean;
+        errors: {
+            symbol?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_type_ext?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_amount?: {
+                type: string;
+                message: string;
+            } | undefined;
+            visible_quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            side?: {
+                type: string;
+                message: string;
+            } | undefined;
+            reduce_only?: {
+                type: string;
+                message: string;
+            } | undefined;
+            slippage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            order_tag?: {
+                type: string;
+                message: string;
+            } | undefined;
+            level?: {
+                type: string;
+                message: string;
+            } | undefined;
+            post_only_adjust?: {
+                type: string;
+                message: string;
+            } | undefined;
+            total?: {
+                type: string;
+                message: string;
+            } | undefined;
+            quantity?: {
+                type: string;
+                message: string;
+            } | undefined;
+            type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            algo_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            trigger_price_type?: {
+                type: string;
+                message: string;
+            } | undefined;
+            trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            child_orders?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_pnl?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_offset?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_offset_percentage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_ROI?: {
+                type: string;
+                message: string;
+            } | undefined;
+            tp_trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_pnl?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_offset?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_offset_percentage?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_ROI?: {
+                type: string;
+                message: string;
+            } | undefined;
+            sl_trigger_price?: {
+                type: string;
+                message: string;
+            } | undefined;
+        } | null;
+    };
+    isMutating: boolean;
+    onMarkPriceChange: (markPrice: number) => void;
+};
+type uesOrderEntryScriptReturn = ReturnType<typeof useOrderEntryScript>;
+
+declare const OrderEntryWidget: (props: OrderEntryScriptInputs & {
+    containerRef?: any;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const OrderEntry: (props: uesOrderEntryScriptReturn & {
+    containerRef: any;
+}) => react_jsx_runtime.JSX.Element;
+
+type Props = {
+    order: OrderlyOrder;
+    quoteDP: number;
+    baseDP: number;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+declare const OrderConfirmDialog: {
+    (props: Props): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type AdditionalInfoProps = {
+    pinned: boolean;
+    setPinned: (value: boolean) => void;
+    needConfirm: boolean;
+    setNeedConfirm: (value: boolean) => void;
+    orderTypeExtra?: OrderType;
+    onValueChange?: (key: keyof OrderlyOrder, value: any) => void;
+    showExtra?: boolean;
+};
+
+declare const AdditionalInfoWidget: (props: AdditionalInfoProps) => react_jsx_runtime.JSX.Element;
+
+export { AdditionalInfoWidget, OrderConfirmDialog, OrderEntry, OrderEntryWidget };

package/dist/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var uiConnector = require('@orderly.network/ui-connector');
+var ui = require('@orderly.network/ui');
+var pe = require('react');
+var types = require('@orderly.network/types');
+var utils = require('@orderly.network/utils');
+var hooks = require('@orderly.network/hooks');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var pe__default = /*#__PURE__*/_interopDefault(pe);
+
+var le=pe.createContext({}),H=()=>pe.useContext(le),U=e=>{let{type:t,values:r}=e,[o,i]=hooks.useLocalStorage("TP/SL_Mode","Offset%"),l=pe.useMemo(()=>!r.PnL||!e.values.trigger_price?null:jsxRuntime.jsxs(ui.Flex,{children:[jsxRuntime.jsx("span",{className:"oui-text-xs oui-text-base-contrast-54",children:`Est.${o==="PnL"?"ROI":"PNL"}:`}),o==="PnL"?jsxRuntime.jsx(ui.Text.numeral,{rule:"percentages",className:ui.cn("oui-text-xs oui-ml-1",t==="TP"?"oui-text-trade-profit":"oui-text-trade-loss"),children:r.ROI}):jsxRuntime.jsx(ui.Text.numeral,{rule:"price",className:ui.cn("oui-text-xs oui-ml-1",t==="TP"?"oui-text-trade-profit":"oui-text-trade-loss"),children:r.PnL})]}),[o,e.values.PnL,e.values.trigger_price]);return jsxRuntime.jsx(le.Provider,{value:{mode:o,setMode:i,tipsEle:l},children:e.children})};var de=e=>{let{type:t,values:r}=e,{mode:o,setMode:i,tipsEle:l}=H(),[f,g]=pe.useState(!1),u=pe.useMemo(()=>{switch(o){case"Offset":return `${t.toLowerCase()}_offset`;case"Offset%":return `${t.toLowerCase()}_offset_percentage`;default:return `${t.toLowerCase()}_pnl`}},[o]),L=pe.useMemo(()=>r[o],[r,o]),T=pe.useMemo(()=>[{label:"PnL",value:"PnL",testId:"PnL_menu_item"},{label:"Offset",value:"Offset",testId:"Offset_mneu_item"},{label:"Offset%",value:"Offset%",testId:"Offset%_menu_item"}],[]),_=pe.useRef("");return {mode:o,modes:T,formatter:m=>{let{dp:x=2}=m;return {onRenderBefore:(a,I)=>(a=`${a}`,t==="SL"&&o==="PnL"&&(a=a.startsWith("-")?a:"-"+a),a===""||a==="-"?"":o==="Offset%"?`${new utils.Decimal(a).mul(100).todp(2,4).toString()}${_.current}`:(o==="Offset"&&(a=utils.todpIfNeed(a,x)),`${a}`)),onSendBefore:a=>/^\-?0{2,}$/.test(a)?"0":(o==="Offset%"?a!==""&&(_.current=a.endsWith(".")?".":"",a=new utils.Decimal(a).div(100).todp(4,4).toString()):a=utils.todpIfNeed(a,x),a===""||a==="-"?"":a)}},onModeChange:m=>{i(m);},onFocus:()=>{g(!0);},onBlur:()=>{g(!1);},value:L,onValueChange:m=>{e.onChange(u,m);},quote_db:e.quote_dp,tips:f?l:void 0}};var ce=e=>{let{mode:t,modes:r,onModeChange:o,onValueChange:i,quote:l,quote_db:f,value:g,type:u,tips:L,onFocus:T,onBlur:_}=e,O=pe.useMemo(()=>`${u.toLowerCase()}_${t.toLowerCase()}`,[]);return jsxRuntime.jsx(ui.Input.tooltip,{prefix:t,size:"md",placeholder:t==="Offset%"?"%":l,id:O,align:"right",value:g,tooltip:L,tooltipProps:{content:{side:e.type==="TP"?"top":"bottom"}},"data-testid":e.testId,autoComplete:"off",onValueChange:i,formatters:[e.formatter({dp:f,mode:t,type:u}),ui.inputFormatter.currencyFormatter],classNames:{additional:"oui-text-base-contrast-54",input:u==="TP"?"oui-text-trade-profit":"oui-text-trade-loss"},onFocus:T,onBlur:_,suffix:jsxRuntime.jsx(We,{modes:r,onModeChange:S=>o(S.value)})})},We=e=>jsxRuntime.jsx(ui.SimpleDropdownMenu,{menu:e.modes,align:"end",size:"xs",className:"oui-min-w-[80px]",onCloseAutoFocus:t=>t.preventDefault(),onSelect:t=>e.onModeChange(t),children:jsxRuntime.jsx("button",{className:"oui-p-2",children:jsxRuntime.jsx(ui.CaretDownIcon,{size:12,color:"white"})})});var me=e=>{let{testId:t,quote:r,...o}=e,i=de(o);return jsxRuntime.jsx(ce,{...i,testId:t,quote:r,type:e.type})};var z=pe.createContext({}),fe=z.Provider;var xe=e=>{let[t,r]=pe.useState(!1),o=pe__default.default.useRef(null);return pe.useEffect(()=>{e.orderType!==types.OrderType.LIMIT&&e.orderType!==types.OrderType.MARKET&&(r(!1),e.onCancelTPSL());},[e.orderType]),e.orderType!==types.OrderType.LIMIT&&e.orderType!==types.OrderType.MARKET||e.isReduceOnly?null:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",gapX:1,children:[jsxRuntime.jsx(ui.Switch,{id:"order_entry_tpsl",checked:t,disabled:e.orderType!==types.OrderType.LIMIT&&e.orderType!==types.OrderType.MARKET||e.isReduceOnly,onCheckedChange:i=>{r(i),i||e.onCancelTPSL();}}),jsxRuntime.jsx("label",{htmlFor:"order_entry_tpsl",className:"oui-text-xs",children:"TP/SL"})]}),jsxRuntime.jsx("div",{className:ui.cn("oui-max-h-0 oui-overflow-hidden oui-transition-all",t&&"oui-max-h-[100px]"),onTransitionEnd:()=>{o.current?.style.setProperty("opacity",t?"1":"0");},children:jsxRuntime.jsx(Pe,{ref:o,onChange:e.onChange,values:e.values,errors:e.errors})})]})},Pe=pe__default.default.forwardRef((e,t)=>jsxRuntime.jsxs("div",{ref:t,className:"oui-transition-all oui-pt-2 oui-pb-2 oui-px-1 oui-space-y-1",children:[jsxRuntime.jsx(U,{values:e.values.tp,type:"TP",children:jsxRuntime.jsx(ge,{type:"TP",error:e.errors?e.errors.tp_trigger_price?.message:"",onChange:e.onChange,values:e.values.tp})}),jsxRuntime.jsx(U,{values:e.values.sl,type:"SL",children:jsxRuntime.jsx(ge,{type:"SL",error:e.errors?e.errors.sl_trigger_price?.message:"",onChange:e.onChange,values:e.values.sl})})]}));Pe.displayName="TPSLInputForm";var ot=e=>{let{errorMsgVisible:t}=pe.useContext(z),{tipsEle:r}=H(),[o,i]=pe.useState(!1),l=pe.useMemo(()=>e.error&&t?e.error:o?r:null,[e.error,t,o,r]);return jsxRuntime.jsx(ui.Input.tooltip,{prefix:"TP Price",size:"md",placeholder:"USDC",align:"right",onFocus:()=>{i(!0);},onBlur:()=>{i(!1);},tooltip:l,tooltipProps:{content:{side:e.type==="TP"?"top":"bottom"}},color:e.error?"danger":void 0,autoComplete:"off",value:e.values.trigger_price,classNames:{additional:"oui-text-base-contrast-54"},onChange:e.onChange})},ge=e=>{let t=e.type==="SL"?"sl_trigger_price":"tp_trigger_price";return jsxRuntime.jsxs(ui.Grid,{cols:2,gapX:1,children:[jsxRuntime.jsx(ot,{type:e.type,error:e.error,values:e.values??"",onChange:r=>{e.onChange(t,r.target.value);}}),jsxRuntime.jsx(me,{onChange:e.onChange,quote:"USDC",type:e.type,values:{PnL:e.values.PnL,Offset:e.values.Offset,"Offset%":e.values["Offset%"],ROI:e.values.ROI}})]})};var Z=e=>{let{baseDP:t,quoteDP:r,order:o,onConfirm:i,onCancel:l}=e,{side:f,order_type:g,symbol:u}=o,[L,T]=hooks.useLocalStorage("orderly_order_confirm",!0);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text.formatted,{rule:"symbol",showIcon:!0,children:o.symbol}),jsxRuntime.jsxs(ui.Flex,{justify:"end",gapX:1,children:[jsxRuntime.jsx(dt,{type:o.order_type}),f===types.OrderSide.BUY?jsxRuntime.jsx(ui.Badge,{color:"buy",size:"sm",children:"Buy"}):jsxRuntime.jsx(ui.Badge,{color:"sell",size:"sm",children:"Sell"})]})]}),jsxRuntime.jsx(ui.Divider,{className:"oui-my-4"}),jsxRuntime.jsxs("div",{className:ui.textVariants({size:"sm",intensity:54,className:"oui-space-y-1"}),children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{children:"Qty."}),jsxRuntime.jsx(ui.Text.numeral,{rule:"price",dp:t,className:"oui-text-base-contrast",children:o.order_quantity})]}),o.trigger_price?jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{children:"Trigger"}),jsxRuntime.jsx(ui.Text.numeral,{unit:"USDC",rule:"price",className:"oui-text-base-contrast",unitClassName:"oui-text-base-contrast-36 oui-ml-1",children:o.trigger_price})]}):null,jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{children:"Price"}),o.order_type===types.OrderType.MARKET?jsxRuntime.jsx(ui.Text,{intensity:80,children:"Market"}):jsxRuntime.jsx(ui.Text.numeral,{unit:"USDC",rule:"price",className:"oui-text-base-contrast",unitClassName:"oui-text-base-contrast-36 oui-ml-1",children:o.order_price})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{children:"Est. Total"}),jsxRuntime.jsx(ui.Text.numeral,{unit:"USDC",rule:"price",dp:r,className:"oui-text-base-contrast",unitClassName:"oui-text-base-contrast-36 oui-ml-1",children:o.total})]})]}),o.tp_trigger_price||o.sl_trigger_price?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ui.Divider,{className:"oui-my-4"}),jsxRuntime.jsxs("div",{className:ui.textVariants({size:"sm",intensity:54,className:"oui-space-y-1"}),children:[o.tp_trigger_price&&jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{children:"TP Price"}),jsxRuntime.jsx(ui.Text.numeral,{unit:"ETH",rule:"price",coloring:!0,dp:r,unitClassName:"oui-text-base-contrast-36 oui-ml-1",children:o.tp_trigger_price})]}),o.sl_trigger_price&&jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{children:"SL Price"}),jsxRuntime.jsx(ui.Text.numeral,{unit:"ETH",rule:"price",coloring:!0,className:"oui-text-trade-loss",unitClassName:"oui-text-base-contrast-36 oui-ml-1",children:o.sl_trigger_price})]})]})]}):null,jsxRuntime.jsxs(ui.Flex,{gapX:1,pt:8,pb:3,children:[jsxRuntime.jsx(ui.Checkbox,{id:"orderConfirm",color:"white",onCheckedChange:_=>{T(!_);}}),jsxRuntime.jsx("label",{htmlFor:"orderConfirm",className:ui.textVariants({size:"xs",intensity:54}),children:"Disable order confirmation"})]}),jsxRuntime.jsxs(ui.Grid,{cols:2,gapX:3,children:[jsxRuntime.jsx(ui.Button,{color:"secondary",size:"md",onClick:()=>l(),children:"Cancel"}),jsxRuntime.jsx(ui.Button,{size:"md",onClick:()=>i(),children:"Confirm"})]})]})};Z.displayName="OrderConfirmDialog";var dt=e=>{let t=pe.useMemo(()=>{switch(e.type){case types.OrderType.LIMIT:return "Limit";case types.OrderType.MARKET:return "Market";case types.OrderType.STOP_LIMIT:return "Stop Limit";case types.OrderType.STOP_MARKET:return "Stop Market";default:return ""}},[e.type]);return jsxRuntime.jsx(ui.Badge,{color:"neutral",size:"sm",children:t})},ct=e=>{let{close:t,resolve:r,reject:o,...i}=e;return jsxRuntime.jsx(Z,{...i,onCancel:t,onConfirm:()=>{r(),t();}})},J="orderConfirm";ui.registerSimpleDialog(J,ct,{size:"sm",title:"Order confirm"});var Ce=e=>{let{pinned:t,orderTypeExtra:r}=e,o=i=>l=>{e.onValueChange&&e.onValueChange("order_type_ext",l?i:"");};return jsxRuntime.jsxs("div",{className:"oui-text-base-contrast-54",children:[e.showExtra&&jsxRuntime.jsxs(ui.Flex,{gapX:5,justify:t?"start":"between",mb:3,width:t?"unset":"100%",children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",children:[jsxRuntime.jsx(ui.Checkbox,{id:"toggle_order_post_only",color:"white",variant:"radio",checked:r===types.OrderType.POST_ONLY,onCheckedChange:o(types.OrderType.POST_ONLY)}),jsxRuntime.jsx("label",{htmlFor:"toggle_order_post_only",className:"oui-text-2xs oui-ml-1",children:"Post only"})]}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",children:[jsxRuntime.jsx(ui.Checkbox,{id:"toggle_order_iov",color:"white",variant:"radio",checked:r===types.OrderType.IOC,onCheckedChange:o(types.OrderType.IOC)}),jsxRuntime.jsx("label",{htmlFor:"toggle_order_iov",className:"oui-text-2xs oui-ml-1",children:"IOC"})]}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",children:[jsxRuntime.jsx(ui.Checkbox,{id:"toggle_order_fok",color:"white",variant:"radio",checked:r===types.OrderType.FOK,onCheckedChange:o(types.OrderType.FOK)}),jsxRuntime.jsx("label",{htmlFor:"toggle_order_fok",className:"oui-text-2xs oui-ml-1",children:"FOK"})]})]}),jsxRuntime.jsxs(ui.Flex,{gapX:6,children:[jsxRuntime.jsxs(ui.Flex,{children:[jsxRuntime.jsx(ui.Checkbox,{id:"toggle_order_confirm",color:"white",checked:e.needConfirm,onCheckedChange:i=>{e.setNeedConfirm(!!i);}}),jsxRuntime.jsx("label",{htmlFor:"toggle_order_confirm",className:"oui-text-2xs oui-ml-1",children:"Order confirm"})]}),jsxRuntime.jsxs(ui.Flex,{children:[jsxRuntime.jsx(ui.Checkbox,{id:"toggle_order_hidden",color:"white",onCheckedChange:i=>{e.onValueChange?.("visible_quantity",i?0:1);}}),jsxRuntime.jsx("label",{htmlFor:"toggle_order_hidden",className:"oui-text-2xs oui-ml-1",children:"Hidden"})]})]}),!t&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ui.Divider,{className:"oui-my-3"}),jsxRuntime.jsxs(ui.Flex,{children:[jsxRuntime.jsx(ui.Switch,{id:"toggle_order_keep_visible",onCheckedChange:i=>{e.setPinned(i);}}),jsxRuntime.jsx("label",{htmlFor:"toggle_order_keep_visible",className:"oui-text-2xs oui-ml-1",children:"Keep visible"})]})]})]})};var be=()=>({});var $=e=>{let t=be();return jsxRuntime.jsx(Ce,{...t,...e})};var te=e=>{let{side:t,formattedOrder:r,setOrderValue:o,symbolInfo:i,maxQty:l,freeCollateral:f,helper:g,submit:u,metaState:L,refs:T}=e,{errors:_,validated:O}=L,[S,w]=pe.useState(!1),[V,m]=hooks.useLocalStorage("orderly_order_confirm",!0),[x,a]=hooks.useLocalStorage("orderly-order-additional-pinned",!0),I=pe.useMemo(()=>t===types.OrderSide.BUY?"Buy / Long":"Sell / Short",[t]);pe.useEffect(()=>{O&&w(!0);},[O]),pe.useEffect(()=>{let d=A=>{A.target.closest("#order-entry-submit-button")||w(ne=>ne&&!1);};return S?document.addEventListener("click",d):document.removeEventListener("click",d),()=>{document.removeEventListener("click",d);}},[S]);let Me=()=>{g.validate().then(d=>V?ui.modal.show(J,{order:r,quote:i.quote,base:i.base,quoteDP:i.quote_dp,baseDP:i.base_dp}):!0,d=>{w(!0);}).then(()=>u()).catch(d=>{d instanceof types.SDKError&&ui.toast.error(`Error:${d.message}`);});};return jsxRuntime.jsx(fe,{value:{errorMsgVisible:S},children:jsxRuntime.jsxs("div",{className:"oui-space-y-3 oui-text-base-contrast-54",ref:e.containerRef,children:[jsxRuntime.jsxs(ui.Flex,{gapX:2,className:"oui-flex-col lg:oui-flex-row oui-gap-y-2",children:[jsxRuntime.jsxs("div",{className:"oui-grid oui-grid-cols-2 oui-w-full oui-flex-1 oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",children:[jsxRuntime.jsx(ui.Button,{onClick:()=>{e.setOrderValue("side",types.OrderSide.BUY);},size:"md",fullWidth:!0,color:t===types.OrderSide.BUY?"buy":"secondary",children:"Buy"}),jsxRuntime.jsx(ui.Button,{onClick:()=>{e.setOrderValue("side",types.OrderSide.SELL);},fullWidth:!0,size:"md",color:t===types.OrderSide.SELL?"sell":"secondary",children:"Sell"})]}),jsxRuntime.jsx("div",{className:"oui-w-full lg:oui-flex-1",children:jsxRuntime.jsx(Bt,{type:r.order_type,onChange:d=>{o("order_type",d);}})})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:"Available"}),jsxRuntime.jsx(ui.Text.numeral,{unit:i.quote,size:"2xs",className:"oui-text-base-contrast-80",unitClassName:"oui-ml-1 oui-text-base-contrast-54",children:f})]}),jsxRuntime.jsx(wt,{type:e.type,symbolInfo:i,values:{quantity:r.order_quantity,price:r.order_price,trigger_price:r.trigger_price,total:r.total},errors:O?_:null,onChange:(d,A)=>{e.setOrderValue(d,A);},refs:e.refs,onBlur:e.onBlur,onFocus:e.onFocus}),jsxRuntime.jsx(kt,{maxQty:l,currentQtyPercentage:e.currentQtyPercentage,value:r.order_quantity?Number(r.order_quantity):0,tick:i.base_tick,dp:i.base_dp,setMaxQty:e.setMaxQty,onValueChange:d=>{o("order_quantity",d);},side:e.side}),jsxRuntime.jsx(uiConnector.AuthGuard,{buttonProps:{fullWidth:!0},children:jsxRuntime.jsx(ui.Button,{fullWidth:!0,id:"order-entry-submit-button",color:t===types.OrderSide.BUY?"buy":"sell",onClick:()=>{Me();},loading:e.isMutating,children:I})}),jsxRuntime.jsx(At,{quote:i.quote,estLiqPrice:e.estLiqPrice,estLeverage:e.estLeverage,currentLeverage:e.currentLeverage}),jsxRuntime.jsx(ui.Divider,{}),jsxRuntime.jsx(xe,{onCancelTPSL:e.cancelTP_SL,orderType:r.order_type,errors:O?_:null,isReduceOnly:r.reduce_only,values:{tp:{trigger_price:r.tp_trigger_price??"",PnL:r.tp_pnl??"",Offset:r.tp_offset??"","Offset%":r.tp_offset_percentage??"",ROI:r.tp_ROI??""},sl:{trigger_price:r.sl_trigger_price??"",PnL:r.sl_pnl??"",Offset:r.sl_offset??"","Offset%":r.sl_offset_percentage??"",ROI:r.sl_ROI??""}},onChange:(d,A)=>{e.setOrderValue(d,A);}}),jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",gapX:1,children:[jsxRuntime.jsx(ui.Switch,{id:"reduceOnly",checked:e.formattedOrder.reduce_only,onCheckedChange:d=>{e.setOrderValue("reduce_only",d);}}),jsxRuntime.jsx("label",{htmlFor:"reduceOnly",className:"oui-text-xs",children:"Reduce only"})]}),!x&&jsxRuntime.jsx(qt,{pinned:x,setPinned:a,needConfirm:V,setNeedConfirm:m,onValueChange:o,orderTypeExtra:r.order_type_ext,showExtra:r.order_type===types.OrderType.LIMIT})]}),x&&jsxRuntime.jsxs(ui.Box,{p:2,r:"md",intensity:700,position:"relative",children:[jsxRuntime.jsx($,{pinned:x,setPinned:a,needConfirm:V,setNeedConfirm:m,onValueChange:o,orderTypeExtra:r.order_type_ext,showExtra:r.order_type===types.OrderType.LIMIT}),jsxRuntime.jsx("button",{onClick:()=>{a(!1);},className:"oui-absolute oui-top-2 oui-right-2",children:jsxRuntime.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M4.67 1.953A2.667 2.667 0 0 0 2.005 4.62v6.667a2.667 2.667 0 0 0 2.667 2.666h6.666a2.667 2.667 0 0 0 2.667-2.666V4.62a2.667 2.667 0 0 0-2.667-2.667zm1.334 3.334c.17 0 .349.057.48.187l1.52 1.52 1.52-1.52a.68.68 0 0 1 .48-.187c.17 0 .349.057.48.187.26.26.26.698 0 .958L8.962 7.954l1.52 1.52c.26.262.26.699 0 .96a.687.687 0 0 1-.958 0l-1.52-1.522-1.52 1.52a.687.687 0 0 1-.96 0 .687.687 0 0 1 0-.958l1.521-1.52-1.52-1.521a.687.687 0 0 1 0-.96.68.68 0 0 1 .479-.186",fill:"#fff",fillOpacity:".2"})})})]})]})})},wt=e=>{let{type:t,symbolInfo:r,errors:o,values:i,onFocus:l,onBlur:f}=e,g=u=>o&&o[u]?o[u].message:"";return jsxRuntime.jsxs("div",{className:"oui-space-y-1",children:[t===types.OrderType.STOP_LIMIT||t===types.OrderType.STOP_MARKET?jsxRuntime.jsx("div",{className:"oui-group",children:jsxRuntime.jsx(Q,{label:"Trigger",suffix:r.quote,error:g("trigger_price"),id:"trigger",ref:e.refs.triggerPriceInputRef,value:i.trigger_price,onChange:u=>{e.onChange("trigger_price",u.target.value);},onFocus:l(1),onBlur:f(1)})}):null,t===types.OrderType.LIMIT||t===types.OrderType.STOP_LIMIT?jsxRuntime.jsx("div",{className:"oui-group",children:jsxRuntime.jsx(Q,{label:"Price",suffix:r.quote,id:"price",value:i.price,error:g("order_price"),ref:e.refs.priceInputRef,onChange:u=>{e.onChange("order_price",u.target.value);},onFocus:l(0),onBlur:f(0)})}):null,jsxRuntime.jsxs(ui.Grid,{cols:2,className:"oui-space-x-1 oui-group",children:[jsxRuntime.jsx(Q,{label:"Quantity",suffix:r.base,id:"order_quantity_input",name:"order_quantity_input",className:"!oui-rounded-br !oui-rounded-tr",value:i.quantity,error:g("order_quantity"),onChange:u=>{e.onChange("order_quantity",u.target.value);},onFocus:l(2),onBlur:f(2)}),jsxRuntime.jsx(Q,{label:"Total\u2248",suffix:r.quote,id:"total",className:"!oui-rounded-bl !oui-rounded-tl",value:i.total,onChange:u=>{e.onChange("total",u.target.value);},onFocus:l(3),onBlur:f(3)})]})]})},Q=pe.forwardRef((e,t)=>{let{errorMsgVisible:r}=pe.useContext(z);return jsxRuntime.jsx(ui.Input.tooltip,{ref:t,tooltip:r?e.error:void 0,autoComplete:"off",autoFocus:e.autoFocus,size:"lg",placeholder:"0",id:e.id,name:e.name,color:e.error?"danger":void 0,prefix:jsxRuntime.jsx(Vt,{id:e.id,children:e.label}),suffix:e.suffix,value:e.value,onChange:e.onChange,onFocus:e.onFocus,onBlur:e.onBlur,formatters:[ui.inputFormatter.numberFormatter,ui.inputFormatter.currencyFormatter],classNames:{root:ui.cn("oui-relative oui-pt-8 oui-h-[54px] oui-px-2 oui-py-1 oui-pr-10 oui-border oui-border-solid oui-border-line oui-rounded group-first:oui-rounded-t-xl group-last:oui-rounded-b-xl",e.className),input:"oui-mt-5 oui-mb-1 oui-h-5",prefix:"oui-absolute oui-left-2 oui-top-[7px] oui-text-base-contrast-36",suffix:"oui-absolute oui-right-0 oui-top-0 oui-text-base-contrast-36 oui-text-2xs"}})});Q.displayName="CustomInput";var Vt=e=>jsxRuntime.jsx("label",{htmlFor:e.id,className:"oui-absolute oui-left-2 oui-top-[7px] oui-text-base-contrast-36 oui-text-2xs",children:e.children}),kt=e=>{let t=pe.useMemo(()=>e.side===types.OrderSide.BUY?"buy":"sell",[e.side]);return jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(ui.Slider.single,{disabled:e.maxQty===0,value:e.value,color:t,markCount:4,showTip:!0,max:e.maxQty,step:e.tick,onValueChange:e.onValueChange}),jsxRuntime.jsxs(ui.Flex,{justify:"between",pt:2,children:[jsxRuntime.jsx(ui.Text.numeral,{rule:"percentages",size:"2xs",color:t,children:e.currentQtyPercentage}),jsxRuntime.jsxs(ui.Flex,{children:[jsxRuntime.jsx("button",{className:ui.textVariants({size:"2xs",className:"oui-mr-1"}),onClick:()=>e.setMaxQty(),children:"Max buy"}),jsxRuntime.jsx(ui.Text.numeral,{size:"2xs",color:t,dp:e.dp,children:e.maxQty})]})]})]})},Bt=e=>{let t=[{label:"Limit order",value:types.OrderType.LIMIT},{label:"Market order",value:types.OrderType.MARKET},{label:"Stop limit",value:types.OrderType.STOP_LIMIT},{label:"Stop market",value:types.OrderType.STOP_MARKET}];return jsxRuntime.jsx(ui.Select.options,{value:e.type,options:t,onValueChange:e.onChange,valueFormatter:(r,o)=>{let i=t.find(l=>l.value===r);return i?jsxRuntime.jsx(ui.Text,{size:"2xs",children:i?.label.replace(" order","")}):jsxRuntime.jsx(ui.Text,{size:"2xs",children:o.placeholder})},size:"md"})};function At(e){return jsxRuntime.jsxs("div",{className:"oui-space-y-1",children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:"Est. Liq. price"}),jsxRuntime.jsx(ui.Text.numeral,{unit:e.quote,size:"2xs",className:"oui-text-base-contrast-80",unitClassName:"oui-ml-1 oui-text-base-contrast-36",children:e.estLiqPrice??"--"})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:"Account leverage"}),jsxRuntime.jsxs(ui.Flex,{gapX:1,className:ui.textVariants({size:"2xs",intensity:80}),children:[jsxRuntime.jsx(ui.Text.numeral,{unit:"x",children:e.currentLeverage}),e.estLeverage&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M2.505 4.997c0-.23.186-.416.416-.416H6.07L4.833 3.332l.586-.585 1.964 1.95a.42.42 0 0 1 .122.3.42.42 0 0 1-.122.3l-1.964 1.95-.586-.585L6.07 5.413H2.921a.416.416 0 0 1-.416-.416",fill:"#fff",fillOpacity:".54"})}),jsxRuntime.jsx("span",{children:`${e.estLeverage}x`})]})]})]})]})}function qt(e){let[t,r]=pe.useState(!1);return jsxRuntime.jsxs(ui.PopoverRoot,{open:t,onOpenChange:r,children:[jsxRuntime.jsx(ui.PopoverTrigger,{asChild:!0,children:jsxRuntime.jsx("button",{onClick:()=>{r(!0);},children:jsxRuntime.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M3.332 2.665a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667V3.332a.667.667 0 0 0-.667-.667zm4 0a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667V3.332a.667.667 0 0 0-.667-.667zm4 0a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667V3.332a.667.667 0 0 0-.667-.667zm-8 4a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667V7.332a.667.667 0 0 0-.667-.667zm4 0a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667V7.332a.667.667 0 0 0-.667-.667zm4 0a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667V7.332a.667.667 0 0 0-.667-.667zm-8 4a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667v-1.333a.667.667 0 0 0-.667-.667zm4 0a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667v-1.333a.667.667 0 0 0-.667-.667zm4 0a.667.667 0 0 0-.667.667v1.333c0 .368.299.667.667.667h1.333a.667.667 0 0 0 .667-.667v-1.333a.667.667 0 0 0-.667-.667z",fill:"#fff",fillOpacity:t?.8:.36})})})}),jsxRuntime.jsx(ui.PopoverContent,{side:"top",align:"end",className:"oui-w-[230px]",children:jsxRuntime.jsx($,{...e})})]})}var Se=e=>{let{formattedOrder:t,setValue:r,setValues:o,symbolInfo:i,...l}=hooks.useOrderEntryNext(e.symbol,{}),{currentLeverage:f}=hooks.useMarginRatio(),g=hooks.useEventEmitter(),u=pe.useRef(4),L=pe.useRef(null),T=pe.useRef(null),_=pe.useMemo(()=>Number(t.order_quantity)>=Number(l.maxQty)?1:ui.convertValueToPercentage(Number(t.order_quantity??0),0,l.maxQty)/100,[t.order_quantity,l.maxQty]),O=m=>x=>{u.current=m;},S=m=>x=>{setTimeout(()=>{u.current===m&&(u.current=4);},300);};pe.useEffect(()=>{let m=x=>{if(u.current===1)(t.order_type===types.OrderType.STOP_LIMIT||t.order_type===types.OrderType.STOP_MARKET)&&(r("trigger_price",utils.removeTrailingZeros(x[0])),a(L.current));else if(t.order_type===types.OrderType.STOP_LIMIT||t.order_type===types.OrderType.LIMIT)r("order_price",utils.removeTrailingZeros(x[0])),a(T.current);else {let I;t.order_type===types.OrderType.STOP_MARKET?I=types.OrderType.STOP_LIMIT:t.order_type===types.OrderType.MARKET&&(I=types.OrderType.LIMIT),typeof I<"u"&&r("order_type",I),r("order_price",utils.removeTrailingZeros(x[0])),a(T.current);}function a(I){setTimeout(()=>{I?.focus();},0);}};return g.on("orderbook:item:click",m),()=>{g.off("orderbook:item:click",m);}},[t.order_type]);let w=()=>{o({tp_trigger_price:"",sl_trigger_price:""});},V=()=>{r("order_quantity",l.maxQty);};return {...l,currentQtyPercentage:_,side:t.side,type:t.order_type,setOrderValue:r,currentLeverage:f,formattedOrder:t,cancelTP_SL:w,setMaxQty:V,symbolInfo:i,onFocus:O,onBlur:S,refs:{triggerPriceInputRef:L,priceInputRef:T}}};var $t=e=>{let t=Se(e);return jsxRuntime.jsx(te,{...t,containerRef:e.containerRef})};
+
+exports.AdditionalInfoWidget = $;
+exports.OrderConfirmDialog = Z;
+exports.OrderEntry = te;
+exports.OrderEntryWidget = $t;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map