@orderly.network/ui-tpsl 2.8.1-alpha.0 → 2.8.2-alpha.0

package/dist/index.js

@@ -11,33 +11,3392 @@ var utils = require('@orderly.network/utils');
 var perp = require('@orderly.network/perp');
 var uiConnector = require('@orderly.network/ui-connector');
 
-var H=e=>{let{t}=i18n.useTranslation(),{order:r,symbolLeverage:i}=e,{symbol:s}=r,o=hooks.useMarkPrice(s),n=hooks.useIndexPrice(s),l=hooks.useLeverageBySymbol(i?void 0:s),a=i||l;return jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",className:ui.cn("oui-w-full oui-gap-3 oui-font-semibold ",e.classNames?.root),children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",className:ui.cn("oui-gap-2 ",e.classNames?.symbol),children:[jsxRuntime.jsxs(ui.Flex,{gap:1,itemAlign:"center",children:[jsxRuntime.jsx(ui.TokenIcon,{symbol:s,className:"oui-size-5"}),jsxRuntime.jsx(ui.Text.formatted,{className:"oui-whitespace-nowrap oui-break-normal",rule:"symbol",formatString:"base-type",size:"sm",weight:"semibold",intensity:98,children:s})]}),jsxRuntime.jsxs(ui.Text,{size:"2xs",className:"oui-h-[18px] oui-rounded oui-bg-base-7 oui-px-2 oui-font-semibold oui-text-base-contrast-36",children:[a,"x"]})]}),jsxRuntime.jsxs(ui.Grid,{cols:2,gapX:2,gapY:1,className:ui.cn("oui-w-full oui-gap-x-2 ",e.classNames?.container),children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",className:" oui-text-base-contrast-36",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:t("common.quantity")}),jsxRuntime.jsx(ui.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.baseDP??2,children:Number(r.order_quantity)})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:t("common.lastPrice")}),jsxRuntime.jsx(ui.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:n?.data})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:t("common.orderPrice")}),jsxRuntime.jsx(ui.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:Number(r.order_price)})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:t("common.markPrice")}),jsxRuntime.jsx(ui.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:o?.data})]})]})]})};var pe=e=>{let{t}=i18n.useTranslation(),{tp_pnl:r,sl_pnl:i}=e,s=react.useMemo(()=>{let o=jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36",children:"-- x"});if(r===void 0||i===void 0||utils.checkIsNaN(r)||utils.checkIsNaN(i))return o;let n=new utils.Decimal(r),l=new utils.Decimal(i);if(l.isZero()||n.isZero())return o;let a=n.div(l).abs().toNumber().toFixed(2);return jsxRuntime.jsxs(ui.Flex,{gap:1,itemAlign:"center",className:"oui-text-base-contrast-80",children:[jsxRuntime.jsx(ui.Text,{children:a}),jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36",children:"x"})]})},[r,i]);return jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",className:ui.cn("oui-w-full oui-gap-1 oui-text-2xs oui-text-base-contrast-36",e.className),children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:t("tpsl.totalEstTpPnl")}),jsxRuntime.jsx(ui.Text.numeral,{suffix:jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36 oui-ml-1",children:"USDC"}),rule:"price",coloring:true,visible:true,size:"2xs",dp:2,children:r?Number(r):"--"})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:t("tpsl.totalEstSlPnl")}),i?jsxRuntime.jsx(ui.Text.numeral,{suffix:jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36 oui-ml-1",children:"USDC"}),coloring:true,visible:true,size:"2xs",dp:2,children:Number(i)}):jsxRuntime.jsx(ui.Text,{size:"2xs",children:"-- USDC"})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:t("tpsl.riskRewardRatio")}),jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-80",size:"2xs",children:s})]})]})};var tt=e=>{let{values:t,side:r,type:i,rootOrderPrice:s}=e,o=hooks.useLeverageBySymbol(e.symbolLeverage?void 0:e.symbol),n=e.symbolLeverage||o,l=react.useMemo(()=>{if(!n||!s||Number(s)===0)return null;let a;if(t.order_type===types.OrderType.MARKET?a=t.trigger_price:t.order_type===types.OrderType.LIMIT&&(a=t.order_price),!a)return null;try{return perp.order.tpslROI({side:r,type:i,closePrice:Number(a),orderPrice:Number(s),leverage:n})*100}catch{return null}},[t,n,s,i,r]);return {...e,roi:l}};var Mt=e=>{let{type:t,values:r}=e,[i,s]=hooks.useLocalStorage("TP/SL_Mode","Offset%"),[o,n]=react.useState(true),{t:l}=i18n.useTranslation(),a=react.useMemo(()=>{switch(i){case "Offset":return `${t.toLowerCase()}_offset`;case "Offset%":return `${t.toLowerCase()}_offset_percentage`;default:return `${t.toLowerCase()}_pnl`}},[i]),g=react.useMemo(()=>r[i],[r,i]),f=react.useMemo(()=>[{label:l("tpsl.pnl"),value:"PnL",testId:"PnL_menu_item"},{label:l("tpsl.offset"),value:"Offset",testId:"Offset_mneu_item"},{label:`${l("tpsl.offset")}%`,value:"Offset%",testId:"Offset%_menu_item"}],[l]),p=react.useRef(""),c=d=>{e.onChange(a,d);},m=d=>{let{dp:y=2}=d;return {onRenderBefore:(u,P)=>(u=`${u}`,u===""||u==="-"?"":i==="Offset%"?`${new utils.Decimal(u.replace(new RegExp(p.current.replace(".","\\.")+"$"),"")).mul(100).todp(2,4).toString()}${p.current}`:(i==="Offset"&&(u=utils.todpIfNeed(u,y)),`${u}`)),onSendBefore:u=>{if(/^\-?0{2,}$/.test(u))return "0";if(i==="Offset%"){if(u!==""){u=utils.todpIfNeed(u,2);let P=u.match(/\.0{0,2}$/);P?p.current=P[0]:p.current="",u=new utils.Decimal(u).div(100).toString(),u=`${u}${p.current}`;}}else i==="PnL"&&t==="SL"&&o||(u=utils.todpIfNeed(u,y));return u===""||u==="-"?"":u}}};return {mode:i,modes:f,type:e.type,formatter:m,onModeChange:d=>{s(d);},value:g,pnl:r.PnL,onValueChange:c,quote_dp:e.quote_dp,setFocus:n}};var Vt=e=>{let{mode:t,modes:r,onModeChange:i,onValueChange:s,quote:o,quote_dp:n,value:l,pnl:a}=e,{t:g}=i18n.useTranslation(),[f,p]=react.useState(t),[c,m]=react.useState(t==="Offset%"?"%":o),d=react.useMemo(()=>{let y=Number(a);if(isNaN(y)||y===0)return "";if(y>0)return "oui-text-trade-profit";if(y<0)return "oui-text-trade-loss"},[a]);return react.useEffect(()=>{let y=r.find(u=>u.value===t)?.label;p(y),m(t==="Offset%"?"%":o);},[t,r]),jsxRuntime.jsx(ui.Input,{prefix:f,size:{initial:"lg",lg:"md"},placeholder:c,align:"right",value:l,"data-testid":e.testId,autoComplete:"off",onValueChange:s,formatters:[e.formatter({dp:n,mode:t}),ui.inputFormatter.currencyFormatter,ui.inputFormatter.decimalPointFormatter],classNames:{input:ui.cn("oui-text-2xs",d),prefix:"oui-text-base-contrast-54 oui-text-2xs",root:"oui-outline-line-12 focus-within:oui-outline-primary-light"},onFocus:()=>{m(""),e.setFocus(true);},onBlur:()=>{m(t==="Offset%"?"%":o),e.setFocus(false);},suffix:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[t==="Offset%"&&!!l&&jsxRuntime.jsx(ui.Text,{size:"2xs",color:"inherit",className:ui.cn("oui-ml-[2px]",d),children:"%"}),jsxRuntime.jsx(Ro,{mode:t,modes:r,onModeChange:y=>i(y.value)})]})})},Ro=e=>jsxRuntime.jsx(ui.SimpleDropdownMenu,{currentValue:e.mode,menu:e.modes,align:"end",size:"xs",className:"oui-min-w-[80px]",onSelect:t=>e.onModeChange(t),children:jsxRuntime.jsx("button",{className:"oui-p-2",children:jsxRuntime.jsx(ui.CaretDownIcon,{size:12,color:"white"})})});var zt=e=>{let{testId:t,quote:r,...i}=e,s=Mt(i);return jsxRuntime.jsx(Vt,{...s,testId:t,quote:r})};var Wt=e=>{let{t}=i18n.useTranslation(),r=[{label:t("orderEntry.orderType.limitOrder"),value:types.OrderType.LIMIT},{label:t("orderEntry.orderType.marketOrder"),value:types.OrderType.MARKET}];return jsxRuntime.jsx(ui.Select.options,{value:e.type,options:r,disabled:e.disabled,onValueChange:e.onChange,size:"xs",classNames:{trigger:"oui-bg-transparent  oui-w-auto oui-outline-line-1 oui-input-root oui-bg-base-6 oui-h-10 lg:oui-h-8 oui-outline-line-12 "},valueFormatter:(i,s)=>{let o={[types.OrderType.LIMIT]:t("orderEntry.orderType.limit"),[types.OrderType.MARKET]:t("common.marketPrice")}[i];return jsxRuntime.jsx(ui.Text,{size:"2xs",children:o})}})};var it=e=>{let[t,r]=react.useState("USDC"),{t:i}=i18n.useTranslation();return jsxRuntime.jsx(ui.Input.tooltip,{"data-testid":`oui-testid-tpsl-popUp-${e.type.toLowerCase()}-input`,prefix:e.label??i("common.markPrice"),size:{initial:"lg",lg:"md"},tooltip:e.error,placeholder:t,disabled:e.disabled,align:"right",autoComplete:"off",value:e.value,color:e.error?"danger":void 0,classNames:{input:"oui-text-2xs placeholder:oui-text-2xs",prefix:"oui-text-base-contrast-54 oui-text-2xs",root:"oui-w-full"},onValueChange:e.onValueChange,onFocus:()=>{r("");},onBlur:()=>{r("USDC");},formatters:[ui.inputFormatter.numberFormatter,ui.inputFormatter.dpFormatter(e.quote_dp),ui.inputFormatter.currencyFormatter,ui.inputFormatter.decimalPointFormatter]})};var st=e=>{let{t}=i18n.useTranslation(),{getErrorMsg:r}=reactApp.useOrderEntryFormErrorMsg(e.errors),{values:i,positionType:s}=e;return jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",justify:"start",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"sm",intensity:98,children:e.type==="tp"?t("tpsl.takeProfit"):t("tpsl.stopLoss")}),jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:2,itemAlign:"start",className:"oui-w-full oui-pt-2",children:[jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",className:"oui-w-full oui-gap-0.5",children:[jsxRuntime.jsx(ui.Text,{className:"oui-text-2xs oui-text-base-contrast-54",children:t("common.triggerPrice")}),jsxRuntime.jsxs(ui.Grid,{cols:2,gap:2,className:"oui-w-full oui-px-0.5",children:[jsxRuntime.jsx(it,{type:`${e.type} price`,value:i.trigger_price,error:r(`${e.type}_trigger_price`),onValueChange:o=>{e.onChange(`${e.type}_trigger_price`,o);},quote_dp:e.quote_dp}),jsxRuntime.jsx(zt,{type:e.type==="tp"?"TP":"SL",onChange:(o,n)=>{e.onChange(o,n);},quote:"USDC",quote_dp:2,values:i})]})]}),jsxRuntime.jsxs(ui.Flex,{direction:"column",className:ui.cn("oui-w-full oui-gap-0.5",e.hideOrderPrice?"oui-hidden":""),itemAlign:"start",children:[jsxRuntime.jsx(ui.Text,{className:"oui-text-2xs oui-text-base-contrast-54",children:t("common.orderPrice")}),jsxRuntime.jsxs(ui.Grid,{cols:2,gap:2,className:"oui-w-full oui-px-0.5",children:[jsxRuntime.jsx(it,{disabled:s===types.PositionType.FULL||i.order_type===types.OrderType.MARKET,type:"order price",label:i.order_type===types.OrderType.LIMIT?t("common.limit"):t("common.market"),value:i.order_price,error:r(`${e.type}_order_price`),onValueChange:o=>{e.onChange(`${e.type}_order_price`,o);},quote_dp:e.quote_dp}),jsxRuntime.jsx(Wt,{disabled:s===types.PositionType.FULL||e.disableOrderTypeSelector,type:i.order_type,onChange:o=>{e.onChange(`${e.type}_order_type`,o);}})]})]})]}),jsxRuntime.jsx(Go,{price:i.order_type===types.OrderType.MARKET?i.trigger_price:i.order_price,orderType:i.order_type,pnl:i.PnL,roi:e.roi,dp:e.quote_dp,className:"oui-mt-1"})]})},Go=e=>{let{t}=i18n.useTranslation(),{price:r,pnl:i,roi:s,dp:o,className:n,orderType:l}=e;return !s||!r||!i?null:jsxRuntime.jsx(ui.Text,{className:ui.cn("oui-text-2xs oui-text-base-contrast-36",n),children:jsxRuntime.jsx(i18n.Trans,{i18nKey:"tpsl.advanced.ROI",components:[jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(ui.Text.numeral,{className:"oui-px-1 oui-text-base-contrast",dp:o,suffix:jsxRuntime.jsx(ui.Text,{className:"oui-pl-0.5",children:"USDC"}),children:r})},"price"),jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(ui.Text,{className:"oui-px-1 oui-text-base-contrast",children:l===types.OrderType.MARKET?t("common.market"):t("common.limit")})},"orderType"),jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(ui.Text.numeral,{coloring:true,className:"oui-whitespace-nowrap oui-px-1",dp:2,suffix:jsxRuntime.jsx(ui.Text,{className:"oui-pl-0.5",children:"USDC"}),children:i})},"pnl"),jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(ui.Text.numeral,{coloring:true,className:"oui-whitespace-nowrap oui-px-1",dp:2,suffix:"%",children:s})},"roi")]})})};var z=e=>{let t=tt(e);return jsxRuntime.jsx(st,{...t})};var Ht=e=>({value:e.value,onChange:e.onChange,disableSelector:e.disableSelector});var Jo="position_type",Zt=e=>{let{t}=i18n.useTranslation(),r=[{label:t("tpsl.partialPosition"),value:types.PositionType.PARTIAL},{label:t("tpsl.fullPosition"),value:types.PositionType.FULL}];return jsxRuntime.jsxs(ui.Flex,{gap:1,itemAlign:"center",justify:"start",children:[jsxRuntime.jsx(ui.Tooltip,{className:"oui-w-[280px] oui-p-3",content:e.value===types.PositionType.FULL?t("tpsl.positionType.full.tips"):t("tpsl.positionType.partial.tips"),children:jsxRuntime.jsx(ui.ExclamationFillIcon,{className:"oui-cursor-pointer oui-text-base-contrast-54",size:12})}),e.disableSelector?e.value===types.PositionType.FULL?jsxRuntime.jsx(ui.Text,{className:"oui-text-2xs oui-font-normal oui-text-base-contrast-54",children:t("tpsl.positionType.full")}):jsxRuntime.jsx(ui.Text,{className:"oui-text-2xs oui-font-normal oui-text-base-contrast-54",children:t("tpsl.positionType.partial")}):jsxRuntime.jsx(ui.Select.options,{value:e.value,options:r,onValueChange:i=>{e.onChange(Jo,i);},size:"xs",classNames:{trigger:" oui-bg-transparent oui-border-0 oui-w-auto oui-px-0 oui-font-normal"},contentProps:{className:" oui-bg-base-8 oui-border-0"}})]})};var Y=e=>{let t=Ht(e);return jsxRuntime.jsx(Zt,{...t})};var Me=react.memo(e=>{let{maxQty:t,base_dp:r,baseTick:i,quantity:s}=e,o=react.useRef(null),{t:n}=i18n.useTranslation(),[l,a]=react.useState(0),g=c=>{let m=c;Number(c)>t&&(m=t.toString()),i>0&&e.onQuantityChange?.(hooks.utils.formatNumber(m,i)??c);},f=c=>{a(c);let m=new utils.Decimal(c).div(100).mul(t).toFixed(r,utils.Decimal.ROUND_DOWN);g(m);};react.useEffect(()=>{let c=Math.min(Number(s||0),t),m=new utils.Decimal(c).div(t).mul(100).toDecimalPlaces(2,utils.Decimal.ROUND_DOWN).toNumber();a(m);},[s,t]);let p=e.quantity.toString().length>0?e.errorMsg:void 0;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ui.Flex,{gap:2,children:jsxRuntime.jsx("div",{className:"oui-flex-1",children:jsxRuntime.jsx(ui.Input.tooltip,{"data-testid":"oui-testid-tpsl-popUp-quantity-input",ref:o,prefix:n("common.quantity"),size:{initial:"md",lg:"sm"},align:"right",value:e.quantity,autoComplete:"off",classNames:{prefix:"oui-text-base-contrast-54",root:ui.cn("oui-bg-base-5 oui-outline-line-12",p&&"oui-outline-danger")},tooltipProps:{content:{className:"oui-bg-base-6 oui-text-base-contrast-80"},arrow:{className:"oui-fill-base-6"}},tooltip:p,color:p?"danger":void 0,formatters:[ui.inputFormatter.dpFormatter(e.base_dp),ui.inputFormatter.numberFormatter,ui.inputFormatter.currencyFormatter,ui.inputFormatter.decimalPointFormatter],onValueChange:c=>{e.onQuantityChange?.(c);let m=Number(c);if(m&&m>e.maxQty){let d=e.maxQty;e.onQuantityChange?.(d),o.current?.blur();}},onBlur:c=>g(c.target.value),suffix:jsxRuntime.jsx("span",{className:"oui-px-3 oui-text-2xs oui-text-base-contrast-54",children:e.base})})})}),jsxRuntime.jsx(ui.Flex,{mt:2,itemAlign:"center",height:"15px",children:jsxRuntime.jsx(ui.Slider,{min:0,max:100,markCount:5,showTip:true,value:[l],color:"primary",onValueChange:c=>{f(c[0]);}})}),jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text.numeral,{color:"primary",size:"2xs",suffix:"%",children:l}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",gap:1,children:[jsxRuntime.jsx("button",{className:"oui-leading-none",style:{lineHeight:0},onClick:()=>{e.onQuantityChange?.(e.maxQty);},children:jsxRuntime.jsx(ui.Text,{color:"primary",size:"2xs",children:n("common.max")})}),jsxRuntime.jsx(ui.Text.numeral,{rule:"price",size:"2xs",intensity:54,tick:e.baseTick,children:e.maxQty})]})]})]})});var er=e=>{let{TPSL_OrderEntity:t,symbolInfo:r,onCancel:i,onComplete:s,status:o,position:n,setValues:l,isEditing:a}=e,{errors:g,validated:f}=e.metaState,{t:p}=i18n.useTranslation(),{isMobile:c}=ui.useScreen(),{getErrorMsg:m}=reactApp.useOrderEntryFormErrorMsg(g);if(!n)return null;let d=t.tp_trigger_price||t.sl_trigger_price,y=()=>t.position_type===types.PositionType.FULL?null:jsxRuntime.jsx(ui.Box,{className:"oui-px-0.5",children:jsxRuntime.jsx(Me,{maxQty:e.maxQty,quantity:e.orderQuantity??e.maxQty,baseTick:r("base_tick"),base_dp:r("base_dp"),onQuantityChange:e.setQuantity,base:r("base"),isEditing:e.isEditing,errorMsg:f?m("quantity"):void 0})});return jsxRuntime.jsxs("div",{id:"orderly-tp_sl-order-edit-content",children:[jsxRuntime.jsx(ui.ScrollArea,{className:ui.cn(c&&"oui-h-[calc(100vh-200px)]"),children:jsxRuntime.jsxs("div",{className:"oui-px-2",children:[jsxRuntime.jsx(H,{baseDP:r("base_dp"),quoteDP:r("quote_dp"),classNames:{root:"oui-mb-3",container:"oui-gap-x-[30px]"},order:{symbol:n.symbol,order_quantity:n.position_qty.toString(),order_price:n.average_open_price.toString()},symbolLeverage:n.leverage}),jsxRuntime.jsxs(ui.Flex,{direction:"column",justify:"start",itemAlign:"start",gap:3,className:"oui-mb-3 oui-w-full",children:[!a&&jsxRuntime.jsx(Y,{disableSelector:true,value:t.position_type??types.PositionType.PARTIAL,onChange:(u,P)=>{e.setOrderValue(u,P);}}),t.position_type===types.PositionType.FULL&&jsxRuntime.jsx(ui.Text,{className:"oui-text-2xs oui-text-warning",children:p("tpsl.positionType.full.tips.market")})]}),y(),jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",justify:"start",gap:6,className:"oui-mt-3 oui-w-full",children:[jsxRuntime.jsx(z,{symbol:n.symbol,rootOrderPrice:n.average_open_price.toString(),type:"tp",side:n.position_qty>0?types.OrderSide.BUY:types.OrderSide.SELL,values:{trigger_price:t.tp_trigger_price?.toString()??void 0,PnL:t.tp_pnl?.toString()??void 0,Offset:t.tp_offset?.toString()??void 0,"Offset%":t.tp_offset_percentage?.toString()??void 0,order_price:t.tp_order_price?.toString()??void 0,order_type:t.tp_order_type??types.OrderType.MARKET},hideOrderPrice:t.position_type===types.PositionType.FULL,errors:f?g:null,disableOrderTypeSelector:a,quote_dp:r("quote_dp"),positionType:t.position_type??types.PositionType.PARTIAL,onChange:(u,P)=>{e.setOrderValue(u,P);},symbolLeverage:n.leverage}),jsxRuntime.jsx(z,{symbol:n.symbol,rootOrderPrice:n.average_open_price.toString(),type:"sl",side:n.position_qty>0?types.OrderSide.BUY:types.OrderSide.SELL,values:{trigger_price:t.sl_trigger_price?.toString()??void 0,PnL:t.sl_pnl?.toString()??void 0,Offset:t.sl_offset?.toString()??void 0,"Offset%":t.sl_offset_percentage?.toString()??void 0,order_price:t.sl_order_price?.toString()??void 0,order_type:t.sl_order_type??types.OrderType.MARKET},hideOrderPrice:t.position_type===types.PositionType.FULL,errors:f?g:null,quote_dp:r("quote_dp"),positionType:t.position_type??types.PositionType.PARTIAL,disableOrderTypeSelector:a,onChange:(u,P)=>{e.setOrderValue(u,P);},symbolLeverage:n.leverage})]}),jsxRuntime.jsx(pe,{tp_pnl:t.tp_pnl,sl_pnl:t.sl_pnl,className:"oui-my-3"})]})}),jsxRuntime.jsxs(ui.Grid,{px:2,cols:2,gap:3,mt:4,children:[jsxRuntime.jsx(ui.Button,{size:"md",color:"secondary","data-testid":"tpsl-cancel",onClick:()=>{e.close?.(),i?.();},children:p("common.cancel")}),jsxRuntime.jsx(ui.ThrottledButton,{size:"md","data-testid":"tpsl-confirm",disabled:o.isCreateMutating||!d,loading:o.isCreateMutating||o.isUpdateMutating,onClick:()=>{e.onSubmit().then(()=>{e.close?.(),s?.();}).catch(u=>{});},children:p("common.confirm")})]})]})};var hi=e=>{let{tpPrice:t,slPrice:r}=e,{t:i}=i18n.useTranslation();return t&&r?jsxRuntime.jsx(ui.Badge,{size:"xs",color:"neutral",children:i("common.tpsl")}):t?jsxRuntime.jsx(ui.Badge,{size:"xs",color:"neutral",children:i("tpsl.tp")}):r?jsxRuntime.jsx(ui.Badge,{size:"xs",color:"neutral",children:i("tpsl.sl")}):null},Ie=e=>{let{symbol:t,tpPrice:r,slPrice:i,qty:s,maxQty:o,side:n,quoteDP:l,baseDP:a,isEditing:g,isPositionTPSL:f,orderInfo:p}=e,{t:c}=i18n.useTranslation(),[m,d]=hooks.useLocalStorage("orderly_order_confirm",true),y=()=>p.position_type===types.PositionType.FULL?jsxRuntime.jsx(ui.Text,{children:c("tpsl.positionType.full")}):jsxRuntime.jsx(ui.Text,{children:c("tpsl.positionType.partial")}),u=({price:N,isOrderPrice:O,isEnable:w,colorType:oe})=>w?!N&&O?jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36",children:c("common.market")}):jsxRuntime.jsx(ui.Text.numeral,{unit:"USDC",rule:"price",className:ui.cn("oui-text-base-contrast",oe==="TP"?"oui-text-trade-profit":"oui-text-trade-loss"),unitClassName:"oui-text-base-contrast-36 oui-ml-1",dp:l,padding:false,children:N}):jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36",children:"-- USDC"}),P=f;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[g&&jsxRuntime.jsx(ui.Text,{as:"div",size:"2xs",intensity:80,className:"oui-mb-3",children:c("tpsl.agreement",{symbol:utils.transSymbolformString(t)})}),jsxRuntime.jsxs(ui.Flex,{pb:4,children:[jsxRuntime.jsx(ui.Box,{grow:true,children:jsxRuntime.jsx(ui.Text.formatted,{rule:"symbol",formatString:"base-type",size:"base",showIcon:true,as:"div",intensity:80,children:t})}),jsxRuntime.jsxs(ui.Flex,{gap:1,children:[P&&jsxRuntime.jsx(ui.Badge,{size:"xs",color:"primary",children:c("common.position")}),jsxRuntime.jsx(hi,{tpPrice:r,slPrice:i}),n===types.OrderSide.SELL?jsxRuntime.jsx(ui.Badge,{size:"xs",color:"success",children:c("common.buy")}):jsxRuntime.jsx(ui.Badge,{size:"xs",color:"danger",children:c("common.sell")})]})]}),jsxRuntime.jsx(ui.Divider,{}),p.tp_trigger_price||p.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 oui-w-full oui-flex oui-flex-col oui-gap-3"}),children:[jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast",children:y()}),jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsx(ui.Text,{children:c("common.orderQty")}),jsxRuntime.jsx(ui.Text.numeral,{rule:"price",dp:a,padding:false,className:"oui-text-base-contrast",children:p.quantity??"-"})]}),jsxRuntime.jsxs(ui.Flex,{direction:"column",justify:"between",itemAlign:"start",gap:1,className:"oui-w-full",children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{children:c("tpsl.tpTriggerPrice")})," ",u({price:p.tp_trigger_price??"",isOrderPrice:false,isEnable:!!p.tp_trigger_price,colorType:"TP"})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{children:c("tpsl.tpOrderPrice")}),u({price:p.tp_order_price??"",isOrderPrice:true,isEnable:!!p.tp_trigger_price,colorType:"TP"})]})]}),jsxRuntime.jsxs(ui.Flex,{direction:"column",justify:"between",itemAlign:"start",gap:1,className:"oui-w-full",children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{children:c("tpsl.slTriggerPrice")}),u({price:p.sl_trigger_price??"",isOrderPrice:false,isEnable:!!p.sl_trigger_price,colorType:"SL"})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{children:c("tpsl.slOrderPrice")}),u({price:p.sl_order_price??"",isOrderPrice:true,isEnable:!!p.sl_trigger_price,colorType:"SL"})]})]})]})]}):null,jsxRuntime.jsx(ui.Box,{pt:2,children:jsxRuntime.jsxs(ui.Flex,{gap:1,children:[jsxRuntime.jsx(ui.Checkbox,{id:"disabledConfirm",color:"white",checked:!m,onCheckedChange:N=>{d(!N);}}),jsxRuntime.jsx("label",{htmlFor:"disabledConfirm",className:ui.textVariants({size:"xs",intensity:54,className:"oui-ml-1"}),children:c("orderEntry.disableOrderConfirm")})]})})]})};var mr=e=>{let{symbol:t,order:r,isEditing:i,positionType:s,triggerPrice:o,type:n,withTriggerPrice:l}=e,{t:a}=i18n.useTranslation();if(i&&!r)throw new types.SDKError("order is required when isEditing is true");let g=hooks.useSymbolsInfo();react.useRef(types.AlgoOrderRootType.TP_SL);let [{rows:p}]=hooks.usePositionStream(),[c]=hooks.useLocalStorage("orderly_order_confirm",true),m=p.find(x=>x.symbol===t);react.useEffect(()=>{m||e.close?.();},[m]);let [d,{submit:y,deleteOrder:u,setValue:P,setValues:N,validate:O,metaState:w,errors:oe,isCreateMutating:xe,isUpdateMutating:ie}]=hooks.useTPSLOrder({symbol:t,position_qty:m?.position_qty??0,average_open_price:m?.average_open_price??0},{defaultOrder:r,positionType:o?types.PositionType.PARTIAL:s,isEditing:i}),Xe=x=>{P("quantity",x);},k=(x,L)=>{P(x,L);},h=(x,L)=>{P(x,L);},vt=react.useMemo(()=>Math.abs(Number(m?.position_qty)),[m?.position_qty]);react.useMemo(()=>{let x=r?.algo_type===types.AlgoOrderRootType.POSITIONAL_TP_SL?vt:r?.quantity,L=0;if((Number(d.quantity)!==x||!i&&d.quantity)&&(L=1),r&&i){let{tp_trigger_price:Je,sl_trigger_price:G}=hooks.utils.findTPSLFromOrder(r),{tp_order_price:Ft,sl_order_price:wt}=hooks.utils.findTPSLOrderPriceFromOrder(r);Je!==Number(d.tp_trigger_price)&&typeof typeof d.tp_trigger_price<"u"&&(L=2),G!==Number(d.sl_trigger_price)&&typeof d.sl_trigger_price<"u"&&(L=3),typeof d.tp_order_price<"u"&&Ft!==types.OrderType.MARKET&&Ft!==Number(d.tp_order_price)&&(L=4),typeof d.sl_order_price<"u"&&wt!==types.OrderType.MARKET&&wt!==Number(d.sl_order_price)&&(L=5);}return L===1&&!d.tp_trigger_price&&!d.sl_trigger_price&&(L=-1),L},[d.tp_trigger_price,d.tp_order_price,d.sl_trigger_price,d.sl_order_price,d.quantity,r,i]);react.useEffect(()=>{l&&o&&(P(n==="tp"?"tp_trigger_price":"sl_trigger_price",o),e.qty&&P("quantity",e.qty));},[n,o,e.qty]);let no=()=>r?.algo_order_id&&r?.symbol?u(r?.algo_order_id,r?.symbol):Promise.reject("order id or symbol is invalid"),lo=(x,L)=>{if(!c)return Promise.resolve(true);let Je=Math.abs(Number(m?.position_qty));return `${x.tp_trigger_price??""}`.length===0&&`${x.sl_trigger_price??""}`.length===0?ui.modal.confirm({title:a("orders.cancelOrder"),content:a("tpsl.cancelOrder.description"),onOk:()=>L.cancel()}).then(()=>true,()=>Promise.reject(false)):ui.modal.confirm({title:a("tpsl.confirmOrder"),onOk:async()=>{try{let G=await L.submit({accountId:m?.account_id});return G.success?G:(G.message&&ui.toast.error(G.message),!1)}catch(G){return G?.message&&ui.toast.error(G.message),false}},classNames:{body:"!oui-pb-0"},content:jsxRuntime.jsx(Ie,{isPositionTPSL:s===types.PositionType.FULL,isEditing:i,symbol:x.symbol,qty:Number(x.quantity),maxQty:Je,tpPrice:Number(x.tp_trigger_price),slPrice:Number(x.sl_trigger_price),side:x.side,orderInfo:x,quoteDP:g[t]("quote_dp")??2,baseDP:g[t]("base_dp")??2})}).then(()=>true,()=>Promise.reject(false))},ao=async()=>{try{if(await O())return c?lo(d,{position:m,submit:y,cancel:no}):y({accountId:m?.account_id}).then(()=>!0).catch(L=>{throw L?.message&&ui.toast.error(L.message),!1})}catch(x){return Promise.reject(x)}};return {isEditing:i,symbolInfo:g[t],maxQty:vt,setQuantity:hooks.useMemoizedFn(Xe),orderQuantity:d.quantity,TPSL_OrderEntity:d,setOrderValue:P,setPnL:h,setOrderPrice:k,onSubmit:ao,metaState:w,errors:oe,status:{isCreateMutating:xe,isUpdateMutating:ie},position:m,setValues:N}};var Ae=e=>{let{onCancel:t,onComplete:r,...i}=e,s=mr(i);return jsxRuntime.jsx(er,{...s,onCancel:t,onComplete:r,close:i.close})},Be="TPSLSheetId",ge="TPSLDialogId";ui.registerSimpleSheet(Be,Ae);ui.registerSimpleDialog(ge,Ae,{classNames:{content:"oui-w-[420px]"}});var $i=e=>{let{position:t,order:r,baseDP:i,quoteDP:s,buttonProps:o,isEditing:n}=e,[l]=hooks.useLocalStorage("orderly_order_confirm",true),{t:a}=i18n.useTranslation(),g=n?r?.algo_type===types.AlgoOrderRootType.POSITIONAL_TP_SL:void 0;return jsxRuntime.jsx(ui.Box,{onClick:()=>{ui.modal.show(ge,{order:r,symbol:t.symbol,baseDP:i,quoteDP:s,positionType:g?types.PositionType.FULL:types.PositionType.PARTIAL,isEditing:n});},className:"oui-cursor-pointer",children:e.children||jsxRuntime.jsx(ui.Button,{variant:"outlined",size:"sm",color:"secondary",...o,children:e.label})})};var Yi=e=>{let{order:t,isEditing:r}=e,{hide:i}=ui.useModal(),s=r?t?.algo_type===types.AlgoOrderRootType.POSITIONAL_TP_SL:void 0;return jsxRuntime.jsx(Ae,{...e,positionType:e.positionType??(s?types.PositionType.FULL:types.PositionType.PARTIAL),onCancel:i})};var xr=e=>{let{t}=i18n.useTranslation(),{errors:r,validated:i}=e.metaState,{formattedOrder:s,setValue:o,symbolInfo:n,setValues:l}=e,[a,g]=react.useState({enable:false,order_type:s.tp_order_type??types.OrderType.MARKET,order_price:s.tp_order_price??"",trigger_price:s.tp_trigger_price??"",PnL:s.tp_pnl??"",Offset:s.tp_offset??"","Offset%":s.tp_offset_percentage??"",ROI:s.tp_ROI??""}),[f,p]=react.useState({enable:false,order_type:s.sl_order_type??types.OrderType.MARKET,order_price:s.sl_order_price??"",trigger_price:s.sl_trigger_price??"",PnL:s.sl_pnl??"",Offset:s.sl_offset??"","Offset%":s.sl_offset_percentage??"",ROI:s.sl_ROI??""});react.useEffect(()=>{g(m=>({...m,order_type:s.tp_order_type??types.OrderType.MARKET,order_price:s.tp_order_price??"",trigger_price:s.tp_trigger_price??"",PnL:s.tp_pnl??"",Offset:s.tp_offset??"","Offset%":s.tp_offset_percentage??"",ROI:s.tp_ROI??""}));},[s]),react.useEffect(()=>{p(m=>({...m,order_type:s.sl_order_type??types.OrderType.MARKET,order_price:s.sl_order_price??"",trigger_price:s.sl_trigger_price??"",PnL:s.sl_pnl??"",Offset:s.sl_offset??"","Offset%":s.sl_offset_percentage??"",ROI:s.sl_ROI??""}));},[s]);let c=s.tp_trigger_price||s.sl_trigger_price;return jsxRuntime.jsxs("div",{className:"oui-flex oui-h-full oui-flex-col oui-justify-between oui-rounded-[16px] oui-py-3",children:[jsxRuntime.jsx("div",{className:"oui-px-3",children:jsxRuntime.jsxs(ui.Flex,{className:"oui-mb-5 oui-cursor-pointer  oui-text-base oui-text-base-contrast-80",gap:1,itemAlign:"center",onClick:e.onClose,children:[jsxRuntime.jsx(ts,{className:" oui-text-base-contrast-80"}),jsxRuntime.jsx(ui.Text,{children:t("common.tpsl")})]})}),jsxRuntime.jsxs(ui.ScrollArea,{className:"oui-flex-1",children:[jsxRuntime.jsx("div",{className:"oui-px-3",children:jsxRuntime.jsx(H,{order:s,baseDP:n.base_dp,quoteDP:n.quote_dp,symbolLeverage:e.symbolLeverage})}),jsxRuntime.jsx(ui.Divider,{className:"oui-my-3"}),jsxRuntime.jsxs("div",{className:"oui-px-3",children:[jsxRuntime.jsxs(ui.Flex,{className:"oui-gap-[6px]",children:[jsxRuntime.jsx(ui.Button,{onClick:()=>{o("side",types.OrderSide.BUY);},size:"sm",fullWidth:true,"data-type":types.OrderSide.BUY,className:ui.cn(s.side===types.OrderSide.BUY?"oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80":"oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"),"data-testid":"oui-testid-orderEntry-side-buy-button",children:t("common.buy")}),jsxRuntime.jsx(ui.Button,{onClick:()=>{o("side",types.OrderSide.SELL);},"data-type":types.OrderSide.SELL,fullWidth:true,size:"sm",className:ui.cn(s.side===types.OrderSide.SELL?"oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80":"oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"),"data-testid":"oui-testid-orderEntry-side-sell-button",children:t("common.sell")})]}),jsxRuntime.jsxs("div",{className:"oui-py-3",children:[jsxRuntime.jsx(Y,{value:s.position_type??types.PositionType.PARTIAL,onChange:(m,d)=>{if(d===types.PositionType.FULL){l({position_type:types.PositionType.FULL,tp_order_type:types.OrderType.MARKET,tp_order_price:void 0,sl_order_type:types.OrderType.MARKET,sl_order_price:void 0});return}o("position_type",d);}}),s.position_type===types.PositionType.FULL&&jsxRuntime.jsxs(ui.Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-3 oui-w-full",children:[jsxRuntime.jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]"}),jsxRuntime.jsx(ui.Text,{className:"oui-text-2xs oui-text-[#D25f00]",children:t("tpsl.positionType.full.tips.market")})]})]}),jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:6,children:[jsxRuntime.jsx(z,{rootOrderPrice:s.order_price,symbol:n.symbol,type:"tp",side:s.side,values:a,errors:i?r:null,quote_dp:n.quote_dp,hideOrderPrice:s.position_type===types.PositionType.FULL,onChange:(m,d)=>{o(m,d);},positionType:s.position_type??types.PositionType.PARTIAL,symbolLeverage:e.symbolLeverage}),jsxRuntime.jsx(z,{rootOrderPrice:s.order_price,symbol:n.symbol,type:"sl",side:s.side,values:f,hideOrderPrice:s.position_type===types.PositionType.FULL,errors:i?r:null,quote_dp:n.quote_dp,positionType:s.position_type??types.PositionType.PARTIAL,onChange:(m,d)=>{o(m,d);},symbolLeverage:e.symbolLeverage})]}),jsxRuntime.jsx(pe,{tp_pnl:s.tp_pnl,sl_pnl:s.sl_pnl,className:"oui-mt-6"})]})]}),jsxRuntime.jsxs(ui.Flex,{className:"oui-mt-6 oui-px-3",gap:2,children:[jsxRuntime.jsx(ui.Button,{size:"md",fullWidth:true,color:"gray",variant:"outlined",className:"oui-text-base-contrast-36",onClick:e.onClose,children:t("common.cancel")}),jsxRuntime.jsx(ui.Button,{size:"md",fullWidth:true,color:"success",className:ui.cn(s.side===types.OrderSide.SELL?"oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80":"oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80"),onClick:e.onSubmit,disabled:!c,children:t("tpsl.advanced.submit")})]})]})},ts=e=>jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"currentColor",...e,children:jsxRuntime.jsx("path",{d:"M8.03752 2.9294C7.89169 2.95857 7.74527 3.03207 7.65661 3.16624L5.33145 6.66624C5.20137 6.86224 5.20137 7.12648 5.33145 7.32248L7.65661 10.8225C7.83452 11.0902 8.20669 11.1655 8.47385 10.9864C8.74044 10.8079 8.8151 10.434 8.63719 10.1662L6.53019 6.99408L8.63719 3.82249C8.8151 3.55416 8.74044 3.18082 8.47385 3.00232C8.34027 2.91249 8.18335 2.89965 8.03752 2.9294Z"})});var br=e=>{let{order:t,setOrderValue:r,onClose:i}=e,[s,o]=react.useState(null),{formattedOrder:n,setValue:l,setValues:a,helper:g,symbolInfo:f,metaState:p,...c}=hooks.useOrderEntry(t.symbol,{initialOrder:{symbol:t.symbol,order_type:t.order_type,side:t.side,order_price:t.order_price,order_quantity:t.order_quantity,position_type:t.position_type??types.PositionType.PARTIAL,trigger_price:t.trigger_price,tp_trigger_price:t.tp_trigger_price,sl_trigger_price:t.sl_trigger_price,tp_order_price:t.tp_order_price,sl_order_price:t.sl_order_price,tp_order_type:t.tp_order_type,sl_order_type:t.sl_order_type,sl_pnl:t.sl_pnl,sl_offset:t.sl_offset,sl_offset_percentage:t.sl_offset_percentage,tp_pnl:t.tp_pnl,tp_offset:t.tp_offset,tp_offset_percentage:t.tp_offset_percentage}});return {order:t,formattedOrder:n,symbolInfo:f,setValue:l,setValues:a,onSubmit:()=>{g.validate().then(()=>{e.onSubmit(n);}).catch(d=>{});},onClose:i,metaState:p,symbolLeverage:e.symbolLeverage}};var Or=e=>{let t=br({order:e.order,setOrderValue:e.setOrderValue,onSubmit:e.onSubmit,onClose:e.onClose,symbolLeverage:e.symbolLeverage});return jsxRuntime.jsx(xr,{...t})},ls="TPSLAdvancedSheetId",as="TPSLAdvancedDialogId";ui.registerSimpleSheet(ls,Or,{title:()=>i18n.i18n.t("common.settings")});ui.registerSimpleDialog(as,Or,{title:()=>i18n.i18n.t("common.settings")});var Ir=e=>{let{position:t}=e,r=t.symbol,i=hooks.useSymbolsInfo()[r],{isMobile:s}=ui.useScreen(),{t:o}=i18n.useTranslation(),[n,l]=react.useState([]),[a,g]=react.useState([]),[f,{cancelAlgoOrder:p,cancelPostionOrdersByTypes:c,refresh:m}]=hooks.useOrderStream({symbol:t.symbol,status:types.OrderStatus.INCOMPLETE,includes:[types.AlgoOrderRootType.POSITIONAL_TP_SL,types.AlgoOrderRootType.TP_SL],size:500},{keeplive:true}),d=async O=>await p(O.algo_order_id,O.symbol),y=async()=>await c(r,[types.AlgoOrderRootType.TP_SL]),u=({order:O,positionType:w,isEditing:oe})=>{let xe=s?Be:ge;ui.modal.show(xe,{order:O,symbol:t.symbol,positionType:w,isEditing:oe});},P=(O,w)=>{u({order:O,positionType:w,isEditing:true});},N=O=>{u({positionType:O,isEditing:false});};return react.useEffect(()=>{if(f){let{fullPositionOrder:O,partialPositionOrders:w}=hooks.findPositionTPSLFromOrders(f,r);l(O?[O]:[]),g(w??[]);}},[f,r]),{symbolInfo:i,position:t,symbol:r,fullPositionOrders:n,partialPositionOrders:a,cancelPostionOrdersByTypes:c,onCancelOrder:d,onCancelAllTPSLOrders:y,editTPSLOrder:P,addTPSLOrder:N}};var Ar=react.createContext({}),Nr=e=>{let t=hooks.useSymbolsInfo()[e.symbol];return jsxRuntime.jsx(Ar.Provider,{value:{base_dp:t("base_dp"),quote_dp:t("quote_dp"),position:e.position},children:e.children})},X=()=>react.useContext(Ar);var C=e=>jsxRuntime.jsx(ui.Flex,{direction:"column",justify:"center",itemAlign:"start",className:"oui-text-2xs oui-h-[36px]",children:e.children});var ct=({order:e})=>{let{position:t,base_dp:r,quote_dp:i}=X(),{tp_trigger_price:s,sl_trigger_price:o}=hooks.findTPSLFromOrder(e),n,l,a=new utils.Decimal(e.quantity).eq(0)?t.position_qty:e.quantity,g=t.position_qty>0?types.OrderSide.BUY:types.OrderSide.SELL,f=t?.average_open_price;if(s){let p=utils.getTPSLDirection({side:g,type:"tp",closePrice:s,orderPrice:f});n=utils.formatNum.pnl(perp.positions.unrealizedPnL({qty:a,openPrice:f,markPrice:s}))?.abs().mul(p).toNumber();}if(o){let p=utils.getTPSLDirection({side:g,type:"sl",closePrice:o,orderPrice:f});l=utils.formatNum.pnl(perp.positions.unrealizedPnL({qty:a,openPrice:f,markPrice:o}))?.abs().mul(p).toNumber();}return jsxRuntime.jsxs(ui.Flex,{gap:2,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[n&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(ui.Text.numeral,{dp:2,rm:utils.Decimal.ROUND_DOWN,coloring:true,padding:false,children:n})}),l&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(ui.Text.numeral,{dp:2,rm:utils.Decimal.ROUND_DOWN,coloring:true,padding:false,children:l})})]})};var mt=({order:e})=>{let{quote_dp:t}=X(),{tp_order_price:r,sl_order_price:i}=hooks.findTPSLOrderPriceFromOrder(e),{t:s}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{gap:2,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[r&&jsxRuntime.jsx(C,{children:r===types.OrderType.MARKET?jsxRuntime.jsx(ui.Text,{children:s("common.market")}):jsxRuntime.jsx(ui.Text.numeral,{dp:t,rm:utils.Decimal.ROUND_DOWN,padding:false,children:r})}),i&&jsxRuntime.jsx(C,{children:i===types.OrderType.MARKET?jsxRuntime.jsx(ui.Text,{children:s("common.market")}):jsxRuntime.jsx(ui.Text.numeral,{dp:t,rm:utils.Decimal.ROUND_DOWN,padding:false,children:i})})]})};var gt=({order:e})=>{let{position:t,base_dp:r}=X(),{tp_trigger_price:i,sl_trigger_price:s}=hooks.findTPSLFromOrder(e),o=react.useMemo(()=>e.quantity===0?-t.position_qty:t.position_qty>0?-e.quantity:e.quantity,[e.quantity,t.position_qty]);return jsxRuntime.jsxs(ui.Flex,{direction:"column",justify:"start",itemAlign:"start",className:"oui-h-full oui-text-2xs",children:[jsxRuntime.jsx(C,{children:jsxRuntime.jsx(ui.Text.numeral,{dp:r,rm:utils.Decimal.ROUND_DOWN,padding:false,children:o})}),i&&s&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx("div",{})})]})};var Pt=({order:e})=>{let{quote_dp:t}=X(),{tp_trigger_price:r,sl_trigger_price:i}=hooks.findTPSLFromOrder(e),{t:s}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{gap:1,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[r&&jsxRuntime.jsx(C,{children:jsxRuntime.jsxs(ui.Flex,{direction:"column",justify:"start",itemAlign:"start",children:[jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36",children:s("common.market")}),jsxRuntime.jsx(ui.Text.numeral,{dp:t,rm:utils.Decimal.ROUND_DOWN,padding:false,children:r})]})}),i&&jsxRuntime.jsx(C,{children:jsxRuntime.jsxs(ui.Flex,{direction:"column",justify:"start",itemAlign:"start",children:[jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36",children:s("common.market")}),jsxRuntime.jsx(ui.Text.numeral,{dp:t,rm:utils.Decimal.ROUND_DOWN,padding:false,children:i})]})})]})};var _t=({order:e})=>{let{tp_trigger_price:t,sl_trigger_price:r}=hooks.findTPSLFromOrder(e),{t:i}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[t&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(ui.Text,{className:"oui-text-trade-profit",children:i("tpsl.tp")})}),r&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(ui.Text,{className:"oui-text-trade-loss",children:i("tpsl.sl")})})]})};var Ge=e=>{let{t}=i18n.useTranslation(),{isMobile:r}=ui.useScreen(),{onCancelOrder:i}=e;return react.useMemo(()=>{let o=[{title:t("tpsl.tpslDetail.qty"),dataIndex:"quantity",width:70,className:"oui-py-2",render:(l,a)=>jsxRuntime.jsx(gt,{order:a})},{title:t("common.type"),dataIndex:"type",width:35,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsxRuntime.jsx(_t,{order:a})},{title:t("common.trigger"),dataIndex:"trigger",width:70,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsxRuntime.jsx(Pt,{order:a})},{title:t("common.price"),dataIndex:"price",width:70,className:"oui-py-2",render:(l,a)=>jsxRuntime.jsx(mt,{order:a})},{title:jsxRuntime.jsx(ui.Tooltip,{className:"oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",content:t("tpsl.tpslDetail.estPnl.tooltip"),children:jsxRuntime.jsx(ui.Text,{className:"oui-underline oui-decoration-dashed oui-underline-offset-2",children:t("tpsl.tpslDetail.estPnl")})}),dataIndex:"estpnl",width:70,className:"!oui-pr-0 oui-py-2",render:(l,a)=>jsxRuntime.jsx(ct,{order:a})}],n=[{title:t("tpsl.tpslDetail.qty"),dataIndex:"quantity",width:70,className:ui.cn(" oui-py-2 !oui-pl-5"),render:(l,a)=>jsxRuntime.jsx(gt,{order:a})},{title:t("common.type"),dataIndex:"type",width:35,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsxRuntime.jsx(_t,{order:a})},{title:t("common.trigger"),dataIndex:"trigger",width:70,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsxRuntime.jsx(Pt,{order:a})},{title:t("common.price"),dataIndex:"price",width:70,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsxRuntime.jsx(mt,{order:a})},{title:jsxRuntime.jsx(ui.Tooltip,{className:"oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",content:t("tpsl.tpslDetail.estPnl.tooltip"),children:jsxRuntime.jsx(ui.Text,{className:"oui-underline oui-decoration-dashed oui-underline-offset-2",children:t("tpsl.tpslDetail.estPnl")})}),dataIndex:"estpnl",width:70,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsxRuntime.jsx(ct,{order:a})},{title:"",dataIndex:"delete",width:50,className:ui.cn("oui-py-2 !oui-pr-5"),render:(l,a)=>jsxRuntime.jsx(Ys,{order:a,onCancelOrder:i})}];return r?o:n},[t,r])};var Hs=e=>{let{size:t=18}=e;return jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 18 18",fill:"currentColor",...e,children:jsxRuntime.jsx("path",{d:"M5.48081 15.375C5.10681 15.375 4.78731 15.2426 4.52231 14.9777C4.25744 14.7127 4.125 14.3932 4.125 14.0192V4.50004H3.375V3.37505H6.75V2.71167H11.25V3.37505H14.625V4.50004H13.875V14.0192C13.875 14.3981 13.7438 14.7188 13.4813 14.9813C13.2188 15.2438 12.8981 15.375 12.5192 15.375H5.48081ZM12.75 4.50004H5.25V14.0192C5.25 14.0866 5.27162 14.1419 5.31487 14.1852C5.35812 14.2284 5.41344 14.25 5.48081 14.25H12.5192C12.5769 14.25 12.6298 14.226 12.6778 14.1779C12.7259 14.1299 12.75 14.077 12.75 14.0192V4.50004ZM7.053 12.75H8.17781V6.00004H7.053V12.75ZM9.82219 12.75H10.947V6.00004H9.82219V12.75Z"})})},Ys=e=>{let[t,r]=react.useState(false);return jsxRuntime.jsx(ui.ThrottledButton,{size:"sm",loading:t,variant:"text",color:"gray",onClick:i=>{i.stopPropagation(),r(true),e.onCancelOrder?.(e.order).then(()=>{},s=>{ui.toast.error(s.message);}).finally(()=>{r(false);});},children:jsxRuntime.jsx(Hs,{className:"oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer"})})};var xt=e=>{let{orders:t}=e,r=Ge({onCancelOrder:e.onCancelOrder});return jsxRuntime.jsx(uiConnector.AuthGuardDataTable,{columns:r,dataSource:t,className:"oui-bg-transparent oui-text-2xs",bordered:true,classNames:{root:ui.cn(e.className),header:"!oui-bg-base-8",scroll:ui.cn(!t||t.length===0?"!oui-min-h-[170px]":"!oui-min-h-[100px]")},onRow:i=>({className:ui.cn("oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"),onClick:()=>{e.editTPSLOrder(i);}})})};var bt=e=>{let{t}=i18n.useTranslation(),{orders:r}=e,i=Ge({onCancelOrder:()=>Promise.resolve()}),s=react.useMemo(()=>r.reduce((o,n)=>(o[n.algo_order_id]=true,o),{}),[r]);return jsxRuntime.jsx(uiConnector.AuthGuardDataTable,{columns:i,dataSource:r,expanded:s,bordered:true,getRowCanExpand:()=>true,expandRowRender:o=>jsxRuntime.jsxs(ui.Flex,{gap:2,justify:"end",children:[jsxRuntime.jsx(ui.Button,{variant:"outlined",size:"sm",color:"gray",className:"oui-h-6 oui-text-2xs oui-text-base-contrast-54",onClick:()=>e.editTPSLOrder(o.original),children:t("common.edit")}),jsxRuntime.jsx(ln,{order:o.original,onCancelOrder:e.canCancelOrder})]}),className:"oui-bg-transparent oui-px-2 oui-text-2xs",classNames:{scroll:ui.cn(!r||r.length===0?"!oui-min-h-[170px]":"!oui-min-h-[100px]")},onRow:()=>({className:ui.cn("oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0")}),generatedRowKey:o=>o.algo_order_id})},ln=e=>{let[t,r]=react.useState(false),{t:i}=i18n.useTranslation();return jsxRuntime.jsx(ui.ThrottledButton,{className:"oui-h-6 oui-text-2xs oui-text-base-contrast-54",size:"sm",loading:t,variant:"outlined",color:"gray",onClick:s=>{s.stopPropagation(),r(true),e.onCancelOrder?.(e.order).then(()=>{},o=>{ui.toast.error(o.message);}).finally(()=>{r(false);});},children:i("common.delete")})};var Wr=e=>{let{isMobile:t}=ui.useScreen(),{position:r,fullPositionOrders:i,partialPositionOrders:s,onCancelOrder:o,onCancelAllTPSLOrders:n,editTPSLOrder:l,addTPSLOrder:a,symbolInfo:g}=e;return jsxRuntime.jsx(ui.Box,{children:jsxRuntime.jsxs(ui.ScrollArea,{className:ui.cn(t&&"oui-h-[calc(100vh-100px)]"),children:[jsxRuntime.jsx(H,{order:{symbol:r.symbol,order_quantity:r.position_qty.toString(),order_price:r.average_open_price.toString()},symbolLeverage:r.leverage,baseDP:g("base_dp"),quoteDP:g("quote_dp"),classNames:{root:ui.cn("oui-mb-6 oui-gap-3 oui-px-5"),container:"oui-gap-x-[30px]"}}),jsxRuntime.jsx(gn,{position:r,orders:i,onCancelOrder:o,onCancelAllTPSLOrders:n,editTPSLOrder:l,addTPSLOrder:a}),jsxRuntime.jsx(fn,{position:r,orders:s,onCancelOrder:o,onCancelAllTPSLOrders:n,editTPSLOrder:l,addTPSLOrder:a})]})})},gn=e=>{let[t,r]=react.useState(true),{orders:i}=e,{isMobile:s}=ui.useScreen();return jsxRuntime.jsxs(ui.Box,{className:"oui-mt-6",children:[jsxRuntime.jsxs(ui.Box,{className:ui.cn("oui-flex oui-items-center oui-justify-between oui-px-5"),children:[jsxRuntime.jsx(Kr,{positionType:types.PositionType.FULL,open:t,onOpenChange:r}),i&&i.length===0&&jsxRuntime.jsx(ui.Flex,{gap:2,children:jsxRuntime.jsx(Gr,{positionType:types.PositionType.FULL,position:e.position,addTPSLOrder:e.addTPSLOrder})})]}),jsxRuntime.jsx(ui.Box,{className:ui.cn("oui-overflow-hidden oui-transition-[height] oui-duration-150",t?"oui-h-auto":"oui-h-0 oui-pb-4"),children:s?jsxRuntime.jsx(bt,{orders:i,editTPSLOrder:o=>e.editTPSLOrder(o,types.PositionType.FULL),canCancelOrder:e.onCancelOrder}):jsxRuntime.jsx(xt,{orders:i,editTPSLOrder:o=>{e.editTPSLOrder(o,types.PositionType.FULL);},onCancelOrder:e.onCancelOrder})})]})},fn=e=>{let[t,r]=react.useState(true),{orders:i}=e,{isMobile:s}=ui.useScreen();return jsxRuntime.jsxs(ui.Box,{className:"oui-pt-6",children:[jsxRuntime.jsxs(ui.Box,{className:ui.cn("oui-flex oui-items-center oui-justify-between","oui-px-5",s?"oui-flex-col oui-items-start oui-justify-start oui-gap-[11px]":"oui-flex-row oui-items-center oui-justify-between"),children:[jsxRuntime.jsx(Kr,{positionType:types.PositionType.PARTIAL,open:t,onOpenChange:r}),jsxRuntime.jsxs(ui.Flex,{gap:2,children:[jsxRuntime.jsx(Gr,{positionType:types.PositionType.PARTIAL,position:e.position,addTPSLOrder:e.addTPSLOrder}),i&&i.length>0&&jsxRuntime.jsx(yn,{canCancelAll:i&&i.length>0,onCancelAllTPSLOrders:e.onCancelAllTPSLOrders})]})]}),jsxRuntime.jsx(ui.Box,{className:ui.cn("oui-overflow-hidden oui-transition-[height] oui-duration-150",t?"oui-h-auto":"oui-h-0 oui-pb-4"),children:s?jsxRuntime.jsx(bt,{orders:i,editTPSLOrder:o=>e.editTPSLOrder(o,types.PositionType.PARTIAL),canCancelOrder:e.onCancelOrder}):jsxRuntime.jsx(xt,{className:"oui-h-[300px]",orders:i,editTPSLOrder:o=>{e.editTPSLOrder(o,types.PositionType.PARTIAL);},onCancelOrder:e.onCancelOrder})})]})},Kr=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{gap:1,itemAlign:"center",justify:"start",className:"oui-text-2xs",children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",justify:"start",gap:1,className:"oui-cursor-pointer",onClick:()=>e.onOpenChange(!e.open),children:[jsxRuntime.jsx(ui.ChevronDownIcon,{size:12,color:"white",className:ui.cn("oui-cursor-pointer oui-transition-transform",e.open&&"oui-rotate-180")}),e.positionType===types.PositionType.FULL?jsxRuntime.jsx(ui.Text,{children:t("tpsl.positionType.full")}):jsxRuntime.jsx(ui.Text,{children:t("tpsl.positionType.partial")})]}),jsxRuntime.jsx(ui.Tooltip,{className:"oui-w-[280px] oui-p-3",content:e.positionType===types.PositionType.FULL?t("tpsl.positionType.full.tips"):t("tpsl.positionType.partial.tips"),children:jsxRuntime.jsx(ui.ExclamationFillIcon,{className:"oui-cursor-pointer oui-text-base-contrast-54",size:12})})]})},Gr=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsx(ui.ThrottledButton,{variant:"outlined",size:"sm",color:"gray",className:"oui-h-6 oui-w-[94px] oui-text-2xs",onClick:()=>{e.addTPSLOrder(e.positionType);},children:t("tpsl.add")})},yn=e=>{let[t,r]=react.useState(false),{t:i}=i18n.useTranslation();return jsxRuntime.jsx(ui.ThrottledButton,{loading:t,variant:"outlined",disabled:!e.canCancelAll,size:"sm",color:"gray",className:"oui-h-6  oui-w-[94px] oui-text-2xs disabled:oui-border-base-contrast-16 disabled:oui-bg-transparent disabled:oui-text-base-contrast-20",onClick:()=>{r(true),e.onCancelAllTPSLOrders().then(()=>{},s=>{ui.toast.error(s.message);}).finally(()=>{r(false);});},children:i("tpsl.cancelAll")})};var jr=e=>{let t=Ir(e);return jsxRuntime.jsx(Nr,{symbol:e.position.symbol,position:e.position,children:jsxRuntime.jsx(Wr,{...t})})},Tn="TPSLDetailDialogId ",xn="TPSLDetailSheetId";ui.registerSimpleDialog(Tn,jr,{classNames:{content:"oui-w-[420px] lg:oui-pt-4 lg:oui-pb-2 !oui-px-0",body:"lg:oui-py-0"}});ui.registerSimpleSheet(xn,jr,{classNames:{content:"!oui-p-0"}});var At=e=>{let {type:t,triggerPrice:r,symbol:i}=e,s=hooks.useSymbolsInfo(),[{rows:o},n]=hooks.usePositionStream(i),l=o?.[0];react.useRef(types.AlgoOrderRootType.TP_SL);let [g]=hooks.useLocalStorage("orderly_order_confirm",true),{t:f}=i18n.useTranslation(),[p,{submit:c,deleteOrder:m,setValue:d,setValues:y,validate:u,errors:P,isCreateMutating:N,isUpdateMutating:O}]=hooks.useTPSLOrder({symbol:i,position_qty:l?.position_qty,average_open_price:l?.average_open_price},{defaultOrder:void 0,positionType:types.PositionType.PARTIAL,isEditing:false}),w=k=>{d("quantity",k);},oe=(k,h)=>{d(k,h);},xe=(k,h)=>{d(k,h);},ie=react.useMemo(()=>Math.abs(Number(l.position_qty)),[l.position_qty]);react.useEffect(()=>{ie&&(d("quantity",ie),d(t==="tp"?"tp_trigger_price":"sl_trigger_price",r??""));},[t,r,ie]);let Xe=async()=>{try{if(await u())return g?ui.modal.confirm({title:f("tpsl.confirmOrder"),onOk:async()=>{try{let h=await c({accountId:l.account_id});return h.success?h:(h.message&&ui.toast.error(h.message),!1)}catch(h){return h?.message&&ui.toast.error(h.message),!1}},classNames:{body:"!oui-pb-0"},content:jsxRuntime.jsx(Ie,{isPositionTPSL:!1,isEditing:!1,symbol:i,qty:Number(p.quantity),maxQty:ie,tpPrice:Number(p.tp_trigger_price),slPrice:Number(p.sl_trigger_price),side:p.side,orderInfo:p,quoteDP:s[i]("quote_dp"),baseDP:s[i]("base_dp")})}).then(()=>!0,()=>Promise.reject(!1)):c({accountId:l.account_id}).then(()=>!0).catch(h=>{throw h?.message&&ui.toast.error(h.message),!1})}catch(k){return Promise.reject(k)}};return {symbolInfo:s[i],maxQty:ie,setQuantity:hooks.useMemoizedFn(w),orderQuantity:p.quantity,isPosition:false,TPSL_OrderEntity:p,setOrderValue:d,setPnL:xe,setOrderPrice:oe,onSubmit:Xe,errors:P,status:{isCreateMutating:N,isUpdateMutating:O},position:l,setValues:y,type:t,triggerPrice:r}};var Nt=e=>{let{type:t,triggerPrice:r,errors:i,TPSL_OrderEntity:s}=e,{t:o}=i18n.useTranslation(),{getErrorMsg:n}=reactApp.useOrderEntryFormErrorMsg(i),l=jsxRuntime.jsxs(ui.Flex,{width:"100%",itemAlign:"center",gap:3,mt:4,children:[jsxRuntime.jsx(ui.Button,{color:"gray",onClick:()=>{e.onComplete?.(),e.close?.();},fullWidth:true,className:"oui-text-sm",size:"md",children:o("common.cancel")},"secondary"),jsxRuntime.jsx(ui.Button,{onClick:()=>{e.onSubmit().then(()=>{e.onComplete?.(),e.close?.();});},fullWidth:true,className:"oui-text-sm",size:"md",children:o("common.confirm")},"primary")]}),a=()=>{let f=n("tp_trigger_price"),p=n("sl_trigger_price"),c="";return f&&t==="tp"&&(c=f),p&&t==="sl"&&(c=p),c?jsxRuntime.jsxs(ui.Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-2 oui-w-full",children:[jsxRuntime.jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-danger"}),jsxRuntime.jsx(ui.Text,{className:"oui-text-danger",children:c})]}):null},g=()=>{let{tp_pnl:f,sl_pnl:p}=s;return t==="sl"?jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:o("tpsl.totalEstSlPnl")}),p?jsxRuntime.jsx(ui.Text.numeral,{suffix:jsxRuntime.jsx(ui.Text,{className:"oui-ml-1 oui-text-base-contrast-36",children:"USDC"}),coloring:true,visible:true,size:"2xs",dp:2,children:Number(p)}):jsxRuntime.jsx(ui.Text,{size:"2xs",children:"-- USDC"})]}):jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"2xs",children:o("tpsl.totalEstTpPnl")}),jsxRuntime.jsx(ui.Text.numeral,{suffix:jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast-36 oui-ml-1",children:"USDC"}),rule:"price",coloring:true,visible:true,size:"2xs",dp:2,children:f?Number(f):"--"})]})};return jsxRuntime.jsxs(ui.Box,{className:"oui-w-full oui-px-0.5",children:[jsxRuntime.jsx(Me,{maxQty:e.maxQty,quantity:Number(e.orderQuantity??e.maxQty),baseTick:e.symbolInfo("base_tick"),base_dp:e.symbolInfo("base_dp"),base:e.symbolInfo("base"),isEditing:false,errorMsg:n("quantity"),onQuantityChange:e.setQuantity}),jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",className:ui.cn("oui-mt-4 oui-w-full oui-gap-1 oui-text-xs oui-text-base-contrast-36"),children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"xs",children:o("common.triggerPrice")}),jsxRuntime.jsx(ui.Text.numeral,{className:"oui-text-base-contrast",suffix:jsxRuntime.jsx(ui.Text,{className:"oui-ml-1 oui-text-xs oui-text-base-contrast-36",children:"USDC"}),rule:"price",size:"xs",dp:e.symbolInfo("quote_dp"),children:r?Number(r):"--"})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(ui.Text,{size:"xs",children:o("common.orderPrice")}),jsxRuntime.jsx(ui.Text,{className:"oui-text-base-contrast",size:"xs",children:o("common.market")})]}),g()]}),a(),jsxRuntime.jsx(ui.Divider,{className:"oui-my-3 oui-w-full"}),jsxRuntime.jsx(ui.Flex,{itemAlign:"center",onClick:()=>{e.close?.(),e.showAdvancedTPSLDialog?.({qty:Number(s.quantity)});},className:"oui-pb-4",children:jsxRuntime.jsx(ui.Text,{color:"primary",className:"oui-cursor-pointer oui-text-sm",children:o("tpsl.advancedSetting")})}),l]})};var ht=e=>{let{close:t,onComplete:r,showAdvancedTPSLDialog:i}=e,s=At(e);return jsxRuntime.jsx(Nt,{...s,close:t,onComplete:r,showAdvancedTPSLDialog:i})},Yr="TPSLSimpleSheetId",Zr="TPSLSimpleDialogId";ui.registerSimpleSheet(Yr,ht,{classNames:{}});ui.registerSimpleDialog(Zr,ht,{classNames:{content:"oui-w-[420px]"}});function jn(e){let t=e.child_orders[0],r=t.algo_type===types.AlgoOrderRootType.TP_SL?types.PositionType.PARTIAL:types.PositionType.FULL,i=t.child_orders.find(n=>n.algo_type===types.AlgoOrderType.TAKE_PROFIT&&n.trigger_price),s=t.child_orders.find(n=>n.algo_type===types.AlgoOrderType.STOP_LOSS&&n.trigger_price),o={};return i&&(o.tp_trigger_price=i.trigger_price?.toString(),o.tp_order_type=typeof i.type=="string"?i.type.replace("_ORDER",""):void 0,o.tp_order_type===types.OrderType.LIMIT&&(o.tp_order_price=i.price?.toString())),s&&(o.sl_trigger_price=s.trigger_price?.toString(),o.sl_order_type=typeof s.type=="string"?s.type.replace("_ORDER",""):void 0,o.sl_order_type===types.OrderType.LIMIT&&(o.sl_order_price=s.price?.toString())),{baseInfo:{symbol:e.symbol,order_type:e.type,side:e.side,order_price:e.price,order_quantity:e.quantity,position_type:r},tpslPriceInfo:o,tpInfo:{orderId:i?.algo_order_id},slInfo:{orderId:s?.algo_order_id}}}function He(e,t){if(t==null)return  true;if(isNaN(Number(t)))return  false;let r=new utils.Decimal(Number(e));return !new utils.Decimal(Number(t)).eq(r)}var eo=e=>{if(!e.order)throw new types.SDKError("order is required for editBracketOrder");let{baseInfo:t,tpslPriceInfo:r,tpInfo:i,slInfo:s}=jn(e.order),[o,{isMutating:n}]=hooks.useMutation("/v1/algo/order","PUT"),{formattedOrder:l,setValue:a,setValues:g,metaState:f,symbolInfo:p,helper:c}=hooks.useOrderEntry(e.order.symbol,{initialOrder:t}),m=e.order.symbol,d=react.useMemo(()=>{let u=false,{tp_order_price:P,sl_order_price:N,tp_trigger_price:O,sl_trigger_price:w}=l;return r.tp_trigger_price&&(u=u||He(r.tp_trigger_price,O??0)),r.tp_order_price&&(u=u||He(r.tp_order_price,P??0)),r.sl_trigger_price&&(u=u||He(r.sl_trigger_price,w??0)),r.sl_order_price&&(u=u||He(r.sl_order_price,N??0)),u},[r,l.tp_order_price,l.sl_order_price,l.tp_trigger_price,l.sl_trigger_price]);return react.useEffect(()=>{g({...r});},[e.order,g]),{symbol:m,symbolInfo:p,formattedOrder:l,setValue:a,setValues:g,metaState:f,onSubmit:async()=>c.validate().then(()=>{let u={order_id:i.orderId,algo_type:types.AlgoOrderType.TAKE_PROFIT,trigger_price:l.tp_trigger_price,reduce_only:true};l.tp_order_type===types.OrderType.LIMIT&&(u.price=l.tp_order_price);let P={order_id:s.orderId,algo_type:types.AlgoOrderType.STOP_LOSS,trigger_price:l.sl_trigger_price,reduce_only:true};l.sl_order_type===types.OrderType.LIMIT&&(P.price=l.sl_order_price);let N=[];return i.orderId&&N.push(u),s.orderId&&N.push(P),o({order_id:e.order.algo_order_id,child_orders:[{order_id:e.order.child_orders[0].algo_order_id,child_orders:N}]})}),isMutating:n,isPriceChanged:d}};var io=e=>{let{t}=i18n.useTranslation(),{errors:r,validated:i}=e.metaState,{isMobile:s}=ui.useScreen(),{formattedOrder:o,setValue:n,symbol:l,symbolInfo:a,setValues:g}=e,[f,p]=react.useState({order_type:o.tp_order_type??types.OrderType.MARKET,order_price:o.tp_order_price??"",trigger_price:o.tp_trigger_price??"",PnL:o.tp_pnl??"",Offset:o.tp_offset??"","Offset%":o.tp_offset_percentage??"",ROI:o.tp_ROI??""}),[c,m]=react.useState({order_type:o.sl_order_type??types.OrderType.MARKET,order_price:o.sl_order_price??"",trigger_price:o.sl_trigger_price??"",PnL:o.sl_pnl??"",Offset:o.sl_offset??"","Offset%":o.sl_offset_percentage??"",ROI:o.sl_ROI??""});return react.useEffect(()=>{p(d=>({...d,order_type:o.tp_order_type??types.OrderType.MARKET,order_price:o.tp_order_price??"",trigger_price:o.tp_trigger_price??"",PnL:o.tp_pnl??"",Offset:o.tp_offset??"","Offset%":o.tp_offset_percentage??"",ROI:o.tp_ROI??""}));},[o]),react.useEffect(()=>{m(d=>({...d,order_type:o.sl_order_type??types.OrderType.MARKET,order_price:o.sl_order_price??"",trigger_price:o.sl_trigger_price??"",PnL:o.sl_pnl??"",Offset:o.sl_offset??"","Offset%":o.sl_offset_percentage??"",ROI:o.sl_ROI??""}));},[o]),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs(ui.ScrollArea,{className:ui.cn("oui-flex-1",s&&"oui-h-[calc(100vh-200px)]"),children:[jsxRuntime.jsx("div",{className:"",children:jsxRuntime.jsx(H,{order:{symbol:l,order_quantity:o.order_quantity,order_price:o.order_price},baseDP:a.base_dp,quoteDP:a.quote_dp})}),jsxRuntime.jsx(ui.Divider,{className:"oui-my-3"}),jsxRuntime.jsxs("div",{className:"",children:[jsxRuntime.jsxs("div",{className:"oui-py-3",children:[jsxRuntime.jsx(Y,{value:o.position_type??types.PositionType.PARTIAL,disableSelector:true,onChange:(d,y)=>{if(y===types.PositionType.FULL){g({position_type:types.PositionType.FULL,tp_order_type:types.OrderType.MARKET,tp_order_price:void 0,sl_order_type:types.OrderType.MARKET,sl_order_price:void 0});return}n("position_type",y);}}),o.position_type===types.PositionType.FULL&&jsxRuntime.jsxs(ui.Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-3 oui-w-full",children:[jsxRuntime.jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]"}),jsxRuntime.jsx(ui.Text,{className:"oui-text-2xs oui-text-[#D25f00]",children:t("tpsl.positionType.full.tips.market")})]})]}),jsxRuntime.jsxs(ui.Flex,{direction:"column",gap:6,children:[jsxRuntime.jsx(z,{disableEnableCheckbox:true,disableOrderTypeSelector:true,rootOrderPrice:o.order_price,symbol:a.symbol,type:"tp",side:o.side,values:f,errors:i?r:null,quote_dp:a.quote_dp,hideOrderPrice:o.position_type===types.PositionType.FULL,onChange:(d,y)=>{n(d,y);},positionType:o.position_type??types.PositionType.PARTIAL}),jsxRuntime.jsx(ui.Divider,{className:"oui-w-full"}),jsxRuntime.jsx(z,{disableEnableCheckbox:true,disableOrderTypeSelector:true,rootOrderPrice:o.order_price,symbol:a.symbol,type:"sl",side:o.side,values:c,hideOrderPrice:o.position_type===types.PositionType.FULL,errors:i?r:null,quote_dp:a.quote_dp,positionType:o.position_type??types.PositionType.PARTIAL,onChange:(d,y)=>{n(d,y);}})]}),jsxRuntime.jsx(pe,{tp_pnl:o.tp_pnl,sl_pnl:o.sl_pnl,className:"oui-mt-6"})]})]}),jsxRuntime.jsx(ui.Flex,{itemAlign:"center",gap:3,mt:5,width:"100%",justify:"center",children:jsxRuntime.jsx(ui.ThrottledButton,{className:"oui-w-[184px]","data-testid":"tpsl-confirm",disabled:!e.isPriceChanged,loading:e.isMutating,onClick:()=>{e.onSubmit().then(()=>{e.onClose?.();}).catch(d=>{});},children:t("common.confirm")})})]})};var so=e=>{let t=eo({order:e.order});return jsxRuntime.jsx(io,{...t,onClose:e.close})},ol="EditBracketOrderSheetId",il="EditBracketOrderDialogId";ui.registerSimpleSheet(ol,so);ui.registerSimpleDialog(il,so,{classNames:{content:"oui-w-[420px]"}});
+// src/editorPopover.tsx
+var OrderInfo = (props) => {
+  const { t } = i18n.useTranslation();
+  const { order: order2, symbolLeverage } = props;
+  const { symbol } = order2;
+  const markPrice = hooks.useMarkPrice(symbol);
+  const indexPrice = hooks.useIndexPrice(symbol);
+  const leverage = hooks.useLeverageBySymbol(symbolLeverage ? void 0 : symbol);
+  const currentLeverage = symbolLeverage || leverage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      className: ui.cn(
+        "oui-w-full oui-gap-3 oui-font-semibold ",
+        props.classNames?.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            itemAlign: "center",
+            className: ui.cn("oui-gap-2 ", props.classNames?.symbol),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-5" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.formatted,
+                  {
+                    className: "oui-whitespace-nowrap oui-break-normal",
+                    rule: "symbol",
+                    formatString: "base-type",
+                    size: "sm",
+                    weight: "semibold",
+                    intensity: 98,
+                    children: symbol
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Text,
+                {
+                  size: "2xs",
+                  className: "oui-h-[18px] oui-rounded oui-bg-base-7 oui-px-2 oui-font-semibold oui-text-base-contrast-36",
+                  children: [
+                    currentLeverage,
+                    "x"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Grid,
+          {
+            cols: 2,
+            gapX: 2,
+            gapY: 1,
+            className: ui.cn("oui-w-full oui-gap-x-2 ", props.classNames?.container),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: " oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("common.quantity") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.baseDP ?? 2,
+                    children: Number(order2.order_quantity)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("common.lastPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: indexPrice?.data
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("common.orderPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: Number(order2.order_price)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("common.markPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: markPrice?.data
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var PnlInfo = (props) => {
+  const { t } = i18n.useTranslation();
+  const { tp_pnl, sl_pnl } = props;
+  const riskRatio = react.useMemo(() => {
+    const defaultNode = /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: "-- x" });
+    if (tp_pnl === void 0 || sl_pnl === void 0) {
+      return defaultNode;
+    }
+    if (utils.checkIsNaN(tp_pnl) || utils.checkIsNaN(sl_pnl)) {
+      return defaultNode;
+    }
+    const tpDecimal = new utils.Decimal(tp_pnl);
+    const slDecimal = new utils.Decimal(sl_pnl);
+    if (slDecimal.isZero() || tpDecimal.isZero()) {
+      return defaultNode;
+    }
+    const ratio = tpDecimal.div(slDecimal).abs().toNumber().toFixed(2);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", className: "oui-text-base-contrast-80", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: ratio }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: "x" })
+    ] });
+  }, [tp_pnl, sl_pnl]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      className: ui.cn(
+        "oui-w-full oui-gap-1 oui-text-2xs oui-text-base-contrast-36",
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("tpsl.totalEstTpPnl") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text.numeral,
+            {
+              suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
+              rule: "price",
+              coloring: true,
+              visible: true,
+              size: "2xs",
+              dp: 2,
+              children: tp_pnl ? Number(tp_pnl) : "--"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("tpsl.totalEstSlPnl") }),
+          sl_pnl ? /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text.numeral,
+            {
+              suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
+              coloring: true,
+              visible: true,
+              size: "2xs",
+              dp: 2,
+              children: Number(sl_pnl)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: "-- USDC" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("tpsl.riskRewardRatio") }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-80", size: "2xs", children: riskRatio })
+        ] })
+      ]
+    }
+  );
+};
+var useTPSLInputRowScript = (props) => {
+  const { values, side, type, rootOrderPrice } = props;
+  const symbolLeverage = hooks.useLeverageBySymbol(
+    props.symbolLeverage ? void 0 : props.symbol
+  );
+  const leverage = props.symbolLeverage || symbolLeverage;
+  const roi = react.useMemo(() => {
+    if (!leverage || !rootOrderPrice || Number(rootOrderPrice) === 0) {
+      return null;
+    }
+    let closePrice;
+    if (values.order_type === types.OrderType.MARKET) {
+      closePrice = values.trigger_price;
+    } else if (values.order_type === types.OrderType.LIMIT) {
+      closePrice = values.order_price;
+    }
+    if (!closePrice) {
+      return null;
+    }
+    try {
+      const roi2 = perp.order.tpslROI({
+        side,
+        type,
+        closePrice: Number(closePrice),
+        orderPrice: Number(rootOrderPrice),
+        leverage
+      });
+      return roi2 * 100;
+    } catch (error) {
+      return null;
+    }
+  }, [values, leverage, rootOrderPrice, type, side]);
+  return {
+    ...props,
+    roi
+  };
+};
+var usePNLInputBuilder = (props) => {
+  const { type, values } = props;
+  const [mode, setMode] = hooks.useLocalStorage(
+    "TP/SL_Mode",
+    "Offset%" /* PERCENTAGE */
+  );
+  const [focus, setFocus] = react.useState(true);
+  const { t } = i18n.useTranslation();
+  const key = react.useMemo(() => {
+    switch (mode) {
+      case "Offset" /* OFFSET */:
+        return `${type.toLowerCase()}_offset`;
+      case "Offset%" /* PERCENTAGE */:
+        return `${type.toLowerCase()}_offset_percentage`;
+      default:
+        return `${type.toLowerCase()}_pnl`;
+    }
+  }, [mode]);
+  const value = react.useMemo(() => {
+    return values[mode];
+  }, [values, mode]);
+  const modes = react.useMemo(() => {
+    return [
+      {
+        label: t("tpsl.pnl"),
+        value: "PnL" /* PnL */,
+        testId: `${"PnL" /* PnL */}_menu_item`
+      },
+      {
+        label: t("tpsl.offset"),
+        value: "Offset" /* OFFSET */,
+        testId: `${"Offset" /* OFFSET */}_mneu_item`
+      },
+      {
+        label: `${t("tpsl.offset")}%`,
+        value: "Offset%" /* PERCENTAGE */,
+        testId: `${"Offset%" /* PERCENTAGE */}_menu_item`
+      }
+    ];
+  }, [t]);
+  const percentageSuffix = react.useRef("");
+  const onValueChange = (value2) => {
+    props.onChange(key, value2);
+  };
+  const formatter = (options) => {
+    const { dp = 2 } = options;
+    return {
+      onRenderBefore: (value2, options2) => {
+        value2 = `${value2}`;
+        if (value2 === "" || value2 === "-")
+          return "";
+        if (mode === "Offset%" /* PERCENTAGE */) {
+          return `${new utils.Decimal(
+            value2.replace(
+              new RegExp(percentageSuffix.current.replace(".", "\\.") + "$"),
+              ""
+            )
+          ).mul(100).todp(2, 4).toString()}${percentageSuffix.current}`;
+        } else if (mode === "Offset" /* OFFSET */) {
+          value2 = utils.todpIfNeed(value2, dp);
+        } else ;
+        return `${value2}`;
+      },
+      onSendBefore: (value2) => {
+        if (/^\-?0{2,}$/.test(value2)) {
+          return "0";
+        }
+        if (mode === "Offset%" /* PERCENTAGE */) {
+          if (value2 !== "") {
+            value2 = utils.todpIfNeed(value2, 2);
+            const endStr = value2.match(/\.0{0,2}$/);
+            if (!!endStr) {
+              percentageSuffix.current = endStr[0];
+            } else {
+              percentageSuffix.current = "";
+            }
+            value2 = new utils.Decimal(value2).div(100).toString();
+            value2 = `${value2}${percentageSuffix.current}`;
+          }
+        } else if (mode === "PnL" /* PnL */ && type === "SL" && focus) {
+          value2 = value2.startsWith("-") ? value2 : "-" + value2;
+        } else {
+          value2 = utils.todpIfNeed(value2, dp);
+        }
+        if (value2 === "" || value2 === "-")
+          return "";
+        return value2;
+      }
+    };
+  };
+  return {
+    mode,
+    modes,
+    type: props.type,
+    formatter,
+    onModeChange: (mode2) => {
+      setMode(mode2);
+    },
+    value,
+    pnl: values["PnL" /* PnL */],
+    onValueChange,
+    quote_dp: props.quote_dp,
+    setFocus
+  };
+};
+var PNLInput = (props) => {
+  const {
+    mode,
+    modes,
+    onModeChange,
+    onValueChange,
+    quote,
+    quote_dp,
+    value,
+    pnl
+  } = props;
+  const { t } = i18n.useTranslation();
+  const [prefix, setPrefix] = react.useState(mode);
+  const [placeholder, setPlaceholder] = react.useState(
+    mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
+  );
+  const color = react.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]);
+  react.useEffect(() => {
+    const label = modes.find((item) => item.value === mode)?.label;
+    setPrefix(label);
+    setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
+  }, [mode, modes]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Input,
+    {
+      prefix,
+      size: {
+        initial: "lg",
+        lg: "md"
+      },
+      placeholder,
+      align: "right",
+      value,
+      "data-testid": props.testId,
+      autoComplete: "off",
+      onValueChange,
+      formatters: [
+        // inputFormatter.numberFormatter,
+        props.formatter({ dp: quote_dp, mode }),
+        ui.inputFormatter.currencyFormatter,
+        ui.inputFormatter.decimalPointFormatter
+      ],
+      classNames: {
+        input: ui.cn("oui-text-2xs", color),
+        prefix: "oui-text-base-contrast-54 oui-text-2xs",
+        root: "oui-outline-line-12 focus-within:oui-outline-primary-light"
+      },
+      onFocus: () => {
+        setPlaceholder("");
+        props.setFocus(true);
+      },
+      onBlur: () => {
+        setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
+        props.setFocus(false);
+      },
+      suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        mode === "Offset%" /* PERCENTAGE */ && !!value && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            size: "2xs",
+            color: "inherit",
+            className: ui.cn("oui-ml-[2px]", color),
+            children: "%"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PNLMenus,
+          {
+            mode,
+            modes,
+            onModeChange: (item) => onModeChange(item.value)
+          }
+        )
+      ] })
+    }
+  );
+};
+var PNLMenus = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.SimpleDropdownMenu,
+    {
+      currentValue: props.mode,
+      menu: props.modes,
+      align: "end",
+      size: "xs",
+      className: "oui-min-w-[80px]",
+      onSelect: (item) => props.onModeChange(item),
+      children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "oui-p-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CaretDownIcon, { size: 12, color: "white" }) })
+    }
+  );
+};
+var PnlInputWidget = (props) => {
+  const { testId, quote, ...rest } = props;
+  const state = usePNLInputBuilder(rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(PNLInput, { ...state, testId, quote });
+};
+var OrderPriceType = (props) => {
+  const { t } = i18n.useTranslation();
+  const options = [
+    { label: t("orderEntry.orderType.limitOrder"), value: types.OrderType.LIMIT },
+    { label: t("orderEntry.orderType.marketOrder"), value: types.OrderType.MARKET }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Select.options,
+    {
+      value: props.type,
+      options,
+      disabled: props.disabled,
+      onValueChange: props.onChange,
+      size: "xs",
+      classNames: {
+        trigger: "oui-bg-transparent  oui-w-auto oui-outline-line-1 oui-input-root oui-bg-base-6 oui-h-10 lg:oui-h-8 oui-outline-line-12 "
+      },
+      valueFormatter: (value, option) => {
+        const displayLabel = {
+          [types.OrderType.LIMIT]: t("orderEntry.orderType.limit"),
+          [types.OrderType.MARKET]: t("common.marketPrice")
+        }[value];
+        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: displayLabel });
+      }
+    }
+  );
+};
+var PriceInput = (props) => {
+  const [placeholder, setPlaceholder] = react.useState("USDC");
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Input.tooltip,
+    {
+      "data-testid": `oui-testid-tpsl-popUp-${props.type.toLowerCase()}-input`,
+      prefix: props.label ?? t("common.markPrice"),
+      size: { initial: "lg", lg: "md" },
+      tooltip: props.error,
+      placeholder,
+      disabled: props.disabled,
+      align: "right",
+      autoComplete: "off",
+      value: props.value,
+      color: props.error ? "danger" : void 0,
+      classNames: {
+        input: "oui-text-2xs placeholder:oui-text-2xs",
+        prefix: "oui-text-base-contrast-54 oui-text-2xs",
+        root: "oui-w-full"
+        // root: "oui-outline-line-12 focus-within:oui-outline-primary-light",
+      },
+      onValueChange: props.onValueChange,
+      onFocus: () => {
+        setPlaceholder("");
+      },
+      onBlur: () => {
+        setPlaceholder("USDC");
+      },
+      formatters: [
+        ui.inputFormatter.numberFormatter,
+        ui.inputFormatter.dpFormatter(props.quote_dp),
+        ui.inputFormatter.currencyFormatter,
+        ui.inputFormatter.decimalPointFormatter
+      ]
+    }
+  );
+};
+var TPSLInputRowUI = (props) => {
+  const { t } = i18n.useTranslation();
+  const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(props.errors);
+  const { values, positionType } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      justify: "start",
+      className: "oui-w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 98, children: props.type === "tp" ? t("tpsl.takeProfit") : t("tpsl.stopLoss") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: "column",
+            gap: 2,
+            itemAlign: "start",
+            className: "oui-w-full oui-pt-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  direction: "column",
+                  itemAlign: "start",
+                  className: "oui-w-full oui-gap-0.5",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-text-base-contrast-54", children: t("common.triggerPrice") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, gap: 2, className: "oui-w-full oui-px-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PriceInput,
+                        {
+                          type: `${props.type} price`,
+                          value: values.trigger_price,
+                          error: getErrorMsg(`${props.type}_trigger_price`),
+                          onValueChange: (value) => {
+                            props.onChange(`${props.type}_trigger_price`, value);
+                          },
+                          quote_dp: props.quote_dp
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PnlInputWidget,
+                        {
+                          type: props.type === "tp" ? "TP" : "SL",
+                          onChange: (key, value) => {
+                            props.onChange(key, value);
+                          },
+                          quote: "USDC",
+                          quote_dp: 2,
+                          values
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  direction: "column",
+                  className: ui.cn(
+                    "oui-w-full oui-gap-0.5",
+                    props.hideOrderPrice ? "oui-hidden" : ""
+                  ),
+                  itemAlign: "start",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-text-base-contrast-54", children: t("common.orderPrice") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, gap: 2, className: "oui-w-full oui-px-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PriceInput,
+                        {
+                          disabled: positionType === types.PositionType.FULL || values.order_type === types.OrderType.MARKET,
+                          type: "order price",
+                          label: values.order_type === types.OrderType.LIMIT ? t("common.limit") : t("common.market"),
+                          value: values.order_price,
+                          error: getErrorMsg(`${props.type}_order_price`),
+                          onValueChange: (value) => {
+                            props.onChange(`${props.type}_order_price`, value);
+                          },
+                          quote_dp: props.quote_dp
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        OrderPriceType,
+                        {
+                          disabled: positionType === types.PositionType.FULL || props.disableOrderTypeSelector,
+                          type: values.order_type,
+                          onChange: (value) => {
+                            props.onChange(`${props.type}_order_type`, value);
+                          }
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RenderROI,
+          {
+            price: values.order_type === types.OrderType.MARKET ? values.trigger_price : values.order_price,
+            orderType: values.order_type,
+            pnl: values.PnL,
+            roi: props.roi,
+            dp: props.quote_dp,
+            className: "oui-mt-1"
+          }
+        )
+      ]
+    }
+  );
+};
+var RenderROI = (props) => {
+  const { t } = i18n.useTranslation();
+  const { price, pnl, roi, dp, className, orderType } = props;
+  if (!roi || !price || !pnl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: ui.cn("oui-text-2xs oui-text-base-contrast-36", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    i18n.Trans,
+    {
+      i18nKey: "tpsl.advanced.ROI",
+      components: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.numeral,
+          {
+            className: "oui-px-1 oui-text-base-contrast",
+            dp,
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-pl-0.5", children: "USDC" }),
+            children: price
+          }
+        ) }, "price"),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-px-1 oui-text-base-contrast", children: orderType === types.OrderType.MARKET ? t("common.market") : t("common.limit") }) }, "orderType"),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.numeral,
+          {
+            coloring: true,
+            className: "oui-whitespace-nowrap oui-px-1",
+            dp: 2,
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-pl-0.5", children: "USDC" }),
+            children: pnl
+          }
+        ) }, "pnl"),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.numeral,
+          {
+            coloring: true,
+            className: "oui-whitespace-nowrap oui-px-1",
+            dp: 2,
+            suffix: "%",
+            children: roi
+          }
+        ) }, "roi")
+      ]
+    }
+  ) });
+};
+var TPSLInputRowWidget = (props) => {
+  const state = useTPSLInputRowScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(TPSLInputRowUI, { ...state });
+};
 
-exports.ArrowRightIcon = ts;
-exports.EditBracketOrderDialogId = il;
-exports.EditBracketOrderSheetId = ol;
-exports.EditBracketOrderWidget = so;
-exports.PositionTPSLConfirm = Ie;
-exports.PositionTPSLPopover = $i;
-exports.PositionTPSLSheet = Yi;
-exports.TPSL = er;
-exports.TPSLAdvancedDialogId = as;
-exports.TPSLAdvancedSheetId = ls;
-exports.TPSLAdvancedUI = xr;
-exports.TPSLAdvancedWidget = Or;
-exports.TPSLDetailDialogId = Tn;
-exports.TPSLDetailSheetId = xn;
-exports.TPSLDetailWidget = jr;
-exports.TPSLDialogId = ge;
-exports.TPSLPositionTypeWidget = Y;
-exports.TPSLSheetId = Be;
-exports.TPSLSimpleDialogId = Zr;
-exports.TPSLSimpleDialogUI = Nt;
-exports.TPSLSimpleDialogWidget = ht;
-exports.TPSLSimpleSheetId = Yr;
-exports.TPSLWidget = Ae;
-exports.useTPSLAdvanced = br;
-exports.useTPSLBuilder = mr;
-exports.useTPSLSimpleDialog = At;
+// src/components/tpslPostionType/tpslPositionType.script.tsx
+var useTPSLPositionTypeScript = (props) => {
+  return {
+    value: props.value,
+    onChange: props.onChange,
+    disableSelector: props.disableSelector
+  };
+};
+var positionTypeKey = "position_type";
+var TPSLPositionTypeUI = (props) => {
+  const { t } = i18n.useTranslation();
+  const options = [
+    {
+      label: t("tpsl.partialPosition"),
+      value: types.PositionType.PARTIAL
+    },
+    {
+      label: t("tpsl.fullPosition"),
+      value: types.PositionType.FULL
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", justify: "start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Tooltip,
+      {
+        className: "oui-w-[280px] oui-p-3",
+        content: props.value === types.PositionType.FULL ? t("tpsl.positionType.full.tips") : t("tpsl.positionType.partial.tips"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.ExclamationFillIcon,
+          {
+            className: "oui-cursor-pointer oui-text-base-contrast-54",
+            size: 12
+          }
+        )
+      }
+    ),
+    props.disableSelector ? props.value === types.PositionType.FULL ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54", children: t("tpsl.positionType.full") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54", children: t("tpsl.positionType.partial") }) : /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Select.options,
+      {
+        value: props.value,
+        options,
+        onValueChange: (event) => {
+          props.onChange(positionTypeKey, event);
+        },
+        size: "xs",
+        classNames: {
+          trigger: " oui-bg-transparent oui-border-0 oui-w-auto oui-px-0 oui-font-normal"
+        },
+        contentProps: {
+          className: " oui-bg-base-8 oui-border-0"
+        }
+      }
+    )
+  ] });
+};
+var TPSLPositionTypeWidget = (props) => {
+  const state = useTPSLPositionTypeScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(TPSLPositionTypeUI, { ...state });
+};
+var TPSLQuantity = react.memo((props) => {
+  const { maxQty, base_dp, baseTick, quantity } = props;
+  const inputRef = react.useRef(null);
+  const { t } = i18n.useTranslation();
+  const [sliderValue, setSliderValue] = react.useState(0);
+  const formatQuantity = (value) => {
+    let _qty = value;
+    if (Number(value) > maxQty) {
+      _qty = maxQty.toString();
+    }
+    if (baseTick > 0) {
+      props.onQuantityChange?.(hooks.utils.formatNumber(_qty, baseTick) ?? value);
+    }
+  };
+  const onSliderValueChange = (value) => {
+    setSliderValue(value);
+    const qty = new utils.Decimal(value).div(100).mul(maxQty).toFixed(base_dp, utils.Decimal.ROUND_DOWN);
+    formatQuantity(qty);
+  };
+  react.useEffect(() => {
+    const qty = Math.min(Number(quantity || 0), maxQty);
+    const slider = new utils.Decimal(qty).div(maxQty).mul(100).toDecimalPlaces(2, utils.Decimal.ROUND_DOWN).toNumber();
+    setSliderValue(slider);
+  }, [quantity, maxQty]);
+  const errorMsg = props.quantity.toString().length > 0 ? props.errorMsg : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Input.tooltip,
+      {
+        "data-testid": "oui-testid-tpsl-popUp-quantity-input",
+        ref: inputRef,
+        prefix: t("common.quantity"),
+        size: {
+          initial: "md",
+          lg: "sm"
+        },
+        align: "right",
+        value: props.quantity,
+        autoComplete: "off",
+        classNames: {
+          prefix: "oui-text-base-contrast-54",
+          root: ui.cn(
+            "oui-bg-base-5 oui-outline-line-12",
+            errorMsg && "oui-outline-danger"
+          )
+        },
+        tooltipProps: {
+          content: {
+            className: "oui-bg-base-6 oui-text-base-contrast-80"
+          },
+          arrow: {
+            className: "oui-fill-base-6"
+          }
+        },
+        tooltip: errorMsg,
+        color: errorMsg ? "danger" : void 0,
+        formatters: [
+          ui.inputFormatter.dpFormatter(props.base_dp),
+          ui.inputFormatter.numberFormatter,
+          ui.inputFormatter.currencyFormatter,
+          ui.inputFormatter.decimalPointFormatter
+        ],
+        onValueChange: (value) => {
+          props.onQuantityChange?.(value);
+          const qty = Number(value);
+          if (qty && qty > props.maxQty) {
+            const qty2 = props.maxQty;
+            props.onQuantityChange?.(qty2);
+            inputRef.current?.blur();
+          }
+        },
+        onBlur: (e) => formatQuantity(e.target.value),
+        suffix: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-px-3 oui-text-2xs oui-text-base-contrast-54", children: props.base })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { mt: 2, itemAlign: "center", height: "15px", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Slider,
+      {
+        min: 0,
+        max: 100,
+        markCount: 5,
+        showTip: true,
+        value: [sliderValue],
+        color: "primary",
+        onValueChange: (value) => {
+          onSliderValueChange(value[0]);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { color: "primary", size: "2xs", suffix: "%", children: sliderValue }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "oui-leading-none",
+            style: { lineHeight: 0 },
+            onClick: () => {
+              props.onQuantityChange?.(props.maxQty);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: "primary", size: "2xs", children: t("common.max") })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.numeral,
+          {
+            rule: "price",
+            size: "2xs",
+            intensity: 54,
+            tick: props.baseTick,
+            children: props.maxQty
+          }
+        )
+      ] })
+    ] })
+  ] });
+});
+var TPSL = (props) => {
+  const {
+    TPSL_OrderEntity,
+    symbolInfo,
+    onCancel,
+    onComplete,
+    status,
+    position,
+    setValues,
+    isEditing
+  } = props;
+  const { errors, validated } = props.metaState;
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(errors);
+  if (!position) {
+    return null;
+  }
+  const tpslEnable = TPSL_OrderEntity.tp_trigger_price || TPSL_OrderEntity.sl_trigger_price;
+  const renderQtyInput = () => {
+    if (TPSL_OrderEntity.position_type === types.PositionType.FULL) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TPSLQuantity,
+      {
+        maxQty: props.maxQty,
+        quantity: props.orderQuantity ?? props.maxQty,
+        baseTick: symbolInfo("base_tick"),
+        base_dp: symbolInfo("base_dp"),
+        onQuantityChange: props.setQuantity,
+        base: symbolInfo("base"),
+        isEditing: props.isEditing,
+        errorMsg: validated ? getErrorMsg("quantity") : void 0
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: "orderly-tp_sl-order-edit-content", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.ScrollArea, { className: ui.cn(isMobile && "oui-h-[calc(100vh-200px)]"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-px-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OrderInfo,
+        {
+          baseDP: symbolInfo("base_dp"),
+          quoteDP: symbolInfo("quote_dp"),
+          classNames: {
+            root: "oui-mb-3",
+            container: "oui-gap-x-[30px]"
+          },
+          order: {
+            symbol: position.symbol,
+            order_quantity: position.position_qty.toString(),
+            order_price: position.average_open_price.toString()
+          },
+          symbolLeverage: position.leverage
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Flex,
+        {
+          direction: "column",
+          justify: "start",
+          itemAlign: "start",
+          gap: 3,
+          className: "oui-mb-3 oui-w-full",
+          children: [
+            !isEditing && /* @__PURE__ */ jsxRuntime.jsx(
+              TPSLPositionTypeWidget,
+              {
+                disableSelector: true,
+                value: TPSL_OrderEntity.position_type ?? types.PositionType.PARTIAL,
+                onChange: (key, value) => {
+                  props.setOrderValue(key, value);
+                }
+              }
+            ),
+            TPSL_OrderEntity.position_type === types.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-text-warning", children: t("tpsl.positionType.full.tips.market") })
+          ]
+        }
+      ),
+      renderQtyInput(),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Flex,
+        {
+          direction: "column",
+          itemAlign: "start",
+          justify: "start",
+          gap: 6,
+          className: "oui-mt-3 oui-w-full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TPSLInputRowWidget,
+              {
+                symbol: position.symbol,
+                rootOrderPrice: position.average_open_price.toString(),
+                type: "tp",
+                side: position.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL,
+                values: {
+                  // enable: TPSL_OrderEntity.tp_enable ?? false,
+                  trigger_price: TPSL_OrderEntity.tp_trigger_price?.toString() ?? void 0,
+                  PnL: TPSL_OrderEntity.tp_pnl?.toString() ?? void 0,
+                  Offset: TPSL_OrderEntity.tp_offset?.toString() ?? void 0,
+                  "Offset%": TPSL_OrderEntity.tp_offset_percentage?.toString() ?? void 0,
+                  order_price: TPSL_OrderEntity.tp_order_price?.toString() ?? void 0,
+                  order_type: TPSL_OrderEntity.tp_order_type ?? types.OrderType.MARKET
+                },
+                hideOrderPrice: TPSL_OrderEntity.position_type === types.PositionType.FULL,
+                errors: validated ? errors : null,
+                disableOrderTypeSelector: isEditing,
+                quote_dp: symbolInfo("quote_dp"),
+                positionType: TPSL_OrderEntity.position_type ?? types.PositionType.PARTIAL,
+                onChange: (key, value) => {
+                  props.setOrderValue(key, value);
+                },
+                symbolLeverage: position.leverage
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TPSLInputRowWidget,
+              {
+                symbol: position.symbol,
+                rootOrderPrice: position.average_open_price.toString(),
+                type: "sl",
+                side: position.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL,
+                values: {
+                  // enable: TPSL_OrderEntity.sl_enable ?? false,
+                  trigger_price: TPSL_OrderEntity.sl_trigger_price?.toString() ?? void 0,
+                  PnL: TPSL_OrderEntity.sl_pnl?.toString() ?? void 0,
+                  Offset: TPSL_OrderEntity.sl_offset?.toString() ?? void 0,
+                  "Offset%": TPSL_OrderEntity.sl_offset_percentage?.toString() ?? void 0,
+                  order_price: TPSL_OrderEntity.sl_order_price?.toString() ?? void 0,
+                  order_type: TPSL_OrderEntity.sl_order_type ?? types.OrderType.MARKET
+                },
+                hideOrderPrice: TPSL_OrderEntity.position_type === types.PositionType.FULL,
+                errors: validated ? errors : null,
+                quote_dp: symbolInfo("quote_dp"),
+                positionType: TPSL_OrderEntity.position_type ?? types.PositionType.PARTIAL,
+                disableOrderTypeSelector: isEditing,
+                onChange: (key, value) => {
+                  props.setOrderValue(key, value);
+                },
+                symbolLeverage: position.leverage
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PnlInfo,
+        {
+          tp_pnl: TPSL_OrderEntity.tp_pnl,
+          sl_pnl: TPSL_OrderEntity.sl_pnl,
+          className: "oui-my-3"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { px: 2, cols: 2, gap: 3, mt: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          size: "md",
+          color: "secondary",
+          "data-testid": "tpsl-cancel",
+          onClick: () => {
+            props.close?.();
+            onCancel?.();
+          },
+          children: t("common.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.ThrottledButton,
+        {
+          size: "md",
+          "data-testid": "tpsl-confirm",
+          disabled: status.isCreateMutating || !tpslEnable,
+          loading: status.isCreateMutating || status.isUpdateMutating,
+          onClick: () => {
+            props.onSubmit().then(() => {
+              props.close?.();
+              onComplete?.();
+            }).catch((err) => {
+            });
+          },
+          children: t("common.confirm")
+        }
+      )
+    ] })
+  ] });
+};
+var TPSLOrderType = (props) => {
+  const { tpPrice, slPrice } = props;
+  const { t } = i18n.useTranslation();
+  if (!!tpPrice && !!slPrice) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "neutral", children: t("common.tpsl") });
+  }
+  if (!!tpPrice) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "neutral", children: t("tpsl.tp") });
+  }
+  if (!!slPrice) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "neutral", children: t("tpsl.sl") });
+  }
+  return null;
+};
+var PositionTPSLConfirm = (props) => {
+  const {
+    symbol,
+    tpPrice,
+    slPrice,
+    qty,
+    maxQty,
+    side,
+    quoteDP,
+    baseDP,
+    isEditing,
+    isPositionTPSL: _isPositionTPSL,
+    orderInfo: order2
+  } = props;
+  const { t } = i18n.useTranslation();
+  const [needConfirm, setNeedConfirm] = hooks.useLocalStorage(
+    "orderly_order_confirm",
+    true
+  );
+  const renderPositionType = () => {
+    if (order2.position_type === types.PositionType.FULL) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.full") });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.partial") });
+  };
+  const renderTPSLPrice = ({
+    price,
+    isOrderPrice,
+    isEnable,
+    colorType
+  }) => {
+    if (!isEnable) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: "-- USDC" });
+    }
+    if (!price) {
+      if (isOrderPrice) {
+        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: t("common.market") });
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.numeral,
+      {
+        unit: "USDC",
+        rule: "price",
+        className: ui.cn(
+          "oui-text-base-contrast",
+          colorType === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
+        ),
+        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        dp: quoteDP,
+        padding: false,
+        children: price
+      }
+    );
+  };
+  const isPositionTPSL = _isPositionTPSL;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isEditing && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: utils.transSymbolformString(symbol) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { pb: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.formatted,
+        {
+          rule: "symbol",
+          formatString: "base-type",
+          size: "base",
+          showIcon: true,
+          as: "div",
+          intensity: 80,
+          children: symbol
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+        isPositionTPSL && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "primary", children: t("common.position") }),
+        /* @__PURE__ */ jsxRuntime.jsx(TPSLOrderType, { tpPrice, slPrice }),
+        side === types.OrderSide.SELL ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "success", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "xs", color: "danger", children: t("common.sell") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, {}),
+    order2.tp_trigger_price || order2.sl_trigger_price ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-4" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: ui.textVariants({
+            size: "sm",
+            intensity: 54,
+            className: "oui-space-y-1 oui-w-full oui-flex oui-flex-col oui-gap-3"
+          }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast", children: renderPositionType() }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.orderQty") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text.numeral,
+                {
+                  rule: "price",
+                  dp: baseDP,
+                  padding: false,
+                  className: "oui-text-base-contrast",
+                  children: order2.quantity ?? "-"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Flex,
+              {
+                direction: "column",
+                justify: "between",
+                itemAlign: "start",
+                gap: 1,
+                className: "oui-w-full",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.tpTriggerPrice") }),
+                    " ",
+                    renderTPSLPrice({
+                      price: order2.tp_trigger_price ?? "",
+                      isOrderPrice: false,
+                      isEnable: !!order2.tp_trigger_price,
+                      colorType: "TP"
+                    })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.tpOrderPrice") }),
+                    renderTPSLPrice({
+                      price: order2.tp_order_price ?? "",
+                      isOrderPrice: true,
+                      isEnable: !!order2.tp_trigger_price,
+                      colorType: "TP"
+                    })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Flex,
+              {
+                direction: "column",
+                justify: "between",
+                itemAlign: "start",
+                gap: 1,
+                className: "oui-w-full",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.slTriggerPrice") }),
+                    renderTPSLPrice({
+                      price: order2.sl_trigger_price ?? "",
+                      isOrderPrice: false,
+                      isEnable: !!order2.sl_trigger_price,
+                      colorType: "SL"
+                    })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.slOrderPrice") }),
+                    renderTPSLPrice({
+                      price: order2.sl_order_price ?? "",
+                      isOrderPrice: true,
+                      isEnable: !!order2.sl_trigger_price,
+                      colorType: "SL"
+                    })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { pt: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Checkbox,
+        {
+          id: "disabledConfirm",
+          color: "white",
+          checked: !needConfirm,
+          onCheckedChange: (check) => {
+            setNeedConfirm(!check);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: "disabledConfirm",
+          className: ui.textVariants({
+            size: "xs",
+            intensity: 54,
+            className: "oui-ml-1"
+          }),
+          children: t("orderEntry.disableOrderConfirm")
+        }
+      )
+    ] }) })
+  ] });
+};
+var useTPSLBuilder = (options) => {
+  const {
+    symbol,
+    order: order2,
+    isEditing,
+    positionType,
+    triggerPrice,
+    type,
+    withTriggerPrice
+  } = options;
+  const { t } = i18n.useTranslation();
+  if (isEditing && !order2) {
+    throw new types.SDKError("order is required when isEditing is true");
+  }
+  const symbolInfo = hooks.useSymbolsInfo();
+  react.useRef(types.AlgoOrderRootType.TP_SL);
+  const [{ rows: positions }] = hooks.usePositionStream();
+  const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
+  const position = positions.find((item) => item.symbol === symbol);
+  react.useEffect(() => {
+    if (!position) {
+      options.close?.();
+    }
+  }, [position]);
+  const [
+    tpslOrder,
+    {
+      submit,
+      deleteOrder,
+      setValue,
+      setValues,
+      validate,
+      metaState,
+      errors,
+      isCreateMutating,
+      isUpdateMutating
+    }
+  ] = hooks.useTPSLOrder(
+    {
+      symbol,
+      position_qty: position?.position_qty ?? 0,
+      average_open_price: position?.average_open_price ?? 0
+    },
+    {
+      defaultOrder: order2,
+      positionType: triggerPrice ? types.PositionType.PARTIAL : positionType,
+      // tpslEnable: {
+      //   tp_enable: !withTriggerPrice ? true : type === "tp",
+      //   sl_enable: !withTriggerPrice ? true : type === "sl",
+      // },
+      isEditing
+    }
+  );
+  const setQuantity = (value) => {
+    setValue("quantity", value);
+  };
+  const setOrderPrice = (name, value) => {
+    setValue(name, value);
+  };
+  const setPnL = (type2, value) => {
+    setValue(type2, value);
+  };
+  const maxQty = react.useMemo(
+    () => Math.abs(Number(position?.position_qty)),
+    [position?.position_qty]
+  );
+  react.useMemo(() => {
+    const quantity = order2?.algo_type === types.AlgoOrderRootType.POSITIONAL_TP_SL ? maxQty : order2?.quantity;
+    let diff = 0;
+    if (Number(tpslOrder.quantity) !== quantity) {
+      diff = 1;
+    } else if (!isEditing && !!tpslOrder.quantity) {
+      diff = 1;
+    }
+    if (order2 && isEditing) {
+      const { tp_trigger_price, sl_trigger_price } = hooks.utils.findTPSLFromOrder(order2);
+      const { tp_order_price, sl_order_price } = hooks.utils.findTPSLOrderPriceFromOrder(order2);
+      if (tp_trigger_price !== Number(tpslOrder.tp_trigger_price) && typeof typeof tpslOrder.tp_trigger_price !== "undefined") {
+        diff = 2;
+      }
+      if (sl_trigger_price !== Number(tpslOrder.sl_trigger_price) && typeof tpslOrder.sl_trigger_price !== "undefined") {
+        diff = 3;
+      }
+      if (typeof tpslOrder.tp_order_price !== "undefined" && tp_order_price !== types.OrderType.MARKET && tp_order_price !== Number(tpslOrder.tp_order_price)) {
+        diff = 4;
+      }
+      if (typeof tpslOrder.sl_order_price !== "undefined" && sl_order_price !== types.OrderType.MARKET && sl_order_price !== Number(tpslOrder.sl_order_price)) {
+        diff = 5;
+      }
+    }
+    if (diff === 1 && !tpslOrder.tp_trigger_price && !tpslOrder.sl_trigger_price) {
+      diff = -1;
+    }
+    return diff;
+  }, [
+    tpslOrder.tp_trigger_price,
+    tpslOrder.tp_order_price,
+    tpslOrder.sl_trigger_price,
+    tpslOrder.sl_order_price,
+    tpslOrder.quantity,
+    order2,
+    isEditing
+  ]);
+  react.useEffect(() => {
+    if (!withTriggerPrice) {
+      return;
+    }
+    if (!triggerPrice) {
+      return;
+    }
+    if (type === "tp") {
+      setValue("tp_trigger_price", triggerPrice);
+    } else {
+      setValue("sl_trigger_price", triggerPrice);
+    }
+    if (options.qty) {
+      setValue("quantity", options.qty);
+    }
+  }, [type, triggerPrice, options.qty]);
+  const cancel = () => {
+    if (order2?.algo_order_id && order2?.symbol) {
+      return deleteOrder(order2?.algo_order_id, order2?.symbol);
+    }
+    return Promise.reject("order id or symbol is invalid");
+  };
+  const onConfirm = (order3, options2) => {
+    if (!needConfirm) {
+      return Promise.resolve(true);
+    }
+    const maxQty2 = Math.abs(Number(position?.position_qty));
+    if (`${order3.tp_trigger_price ?? ""}`.length === 0 && `${order3.sl_trigger_price ?? ""}`.length === 0) {
+      return ui.modal.confirm({
+        title: t("orders.cancelOrder"),
+        content: t("tpsl.cancelOrder.description"),
+        onOk: () => {
+          return options2.cancel();
+        }
+      }).then(
+        () => {
+          return true;
+        },
+        () => {
+          return Promise.reject(false);
+        }
+      );
+    }
+    return ui.modal.confirm({
+      title: t("tpsl.confirmOrder"),
+      // bodyClassName: "lg:oui-py-0",
+      onOk: async () => {
+        try {
+          const res = await options2.submit({
+            accountId: position?.account_id
+          });
+          if (res.success) {
+            return res;
+          }
+          if (res.message) {
+            ui.toast.error(res.message);
+          }
+          return false;
+        } catch (err) {
+          if (err?.message) {
+            ui.toast.error(err.message);
+          }
+          return false;
+        }
+      },
+      classNames: {
+        body: "!oui-pb-0"
+      },
+      content: /* @__PURE__ */ jsxRuntime.jsx(
+        PositionTPSLConfirm,
+        {
+          isPositionTPSL: positionType === types.PositionType.FULL,
+          isEditing,
+          symbol: order3.symbol,
+          qty: Number(order3.quantity),
+          maxQty: maxQty2,
+          tpPrice: Number(order3.tp_trigger_price),
+          slPrice: Number(order3.sl_trigger_price),
+          side: order3.side,
+          orderInfo: order3,
+          quoteDP: symbolInfo[symbol]("quote_dp") ?? 2,
+          baseDP: symbolInfo[symbol]("base_dp") ?? 2
+        }
+      )
+    }).then(
+      () => {
+        return true;
+      },
+      () => {
+        return Promise.reject(false);
+      }
+    );
+  };
+  const onSubmit = async () => {
+    try {
+      const validOrder = await validate();
+      if (validOrder) {
+        if (!needConfirm) {
+          return submit({ accountId: position?.account_id }).then(() => true).catch((err) => {
+            if (err?.message) {
+              ui.toast.error(err.message);
+            }
+            throw false;
+          });
+        }
+        return onConfirm(tpslOrder, {
+          position,
+          submit,
+          cancel
+        });
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  };
+  return {
+    isEditing,
+    symbolInfo: symbolInfo[symbol],
+    maxQty,
+    setQuantity: hooks.useMemoizedFn(setQuantity),
+    orderQuantity: tpslOrder.quantity,
+    // isPosition: isPositionTPSL,
+    TPSL_OrderEntity: tpslOrder,
+    setOrderValue: setValue,
+    setPnL,
+    setOrderPrice,
+    // needConfirm,
+    onSubmit,
+    metaState,
+    errors,
+    status: {
+      isCreateMutating,
+      isUpdateMutating
+    },
+    position,
+    setValues
+  };
+};
+var TPSLWidget = (props) => {
+  const { onCancel, onComplete, ...rest } = props;
+  const state = useTPSLBuilder(rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSL,
+    {
+      ...state,
+      onCancel,
+      onComplete,
+      close: rest.close
+    }
+  );
+};
+var TPSLSheetId = "TPSLSheetId";
+var TPSLDialogId = "TPSLDialogId";
+ui.registerSimpleSheet(TPSLSheetId, TPSLWidget);
+ui.registerSimpleDialog(TPSLDialogId, TPSLWidget, {
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+var PositionTPSLPopover = (props) => {
+  const { position, order: order2, baseDP, quoteDP, buttonProps, isEditing } = props;
+  const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
+  const { t } = i18n.useTranslation();
+  const isPositionTPSL = isEditing ? order2?.algo_type === types.AlgoOrderRootType.POSITIONAL_TP_SL : void 0;
+  const onEdit = () => {
+    ui.modal.show(TPSLDialogId, {
+      order: order2,
+      symbol: position.symbol,
+      baseDP,
+      quoteDP,
+      positionType: isPositionTPSL ? types.PositionType.FULL : types.PositionType.PARTIAL,
+      isEditing
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { onClick: onEdit, className: "oui-cursor-pointer", children: props.children || /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      variant: "outlined",
+      size: "sm",
+      color: "secondary",
+      ...buttonProps,
+      children: props.label
+    }
+  ) });
+};
+var PositionTPSLSheet = (props) => {
+  const { order: order2, isEditing } = props;
+  const { hide } = ui.useModal();
+  const isPositionTPSL = isEditing ? order2?.algo_type === types.AlgoOrderRootType.POSITIONAL_TP_SL : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLWidget,
+    {
+      ...props,
+      positionType: props.positionType ?? (isPositionTPSL ? types.PositionType.FULL : types.PositionType.PARTIAL),
+      onCancel: hide
+    }
+  );
+};
+var TPSLAdvancedUI = (props) => {
+  const { t } = i18n.useTranslation();
+  const { errors, validated } = props.metaState;
+  const {
+    formattedOrder,
+    setValue: setOrderValue,
+    symbolInfo,
+    setValues
+  } = props;
+  const [tpValues, setTpValuse] = react.useState({
+    enable: false,
+    order_type: formattedOrder.tp_order_type ?? types.OrderType.MARKET,
+    order_price: formattedOrder.tp_order_price ?? "",
+    trigger_price: formattedOrder.tp_trigger_price ?? "",
+    PnL: formattedOrder.tp_pnl ?? "",
+    Offset: formattedOrder.tp_offset ?? "",
+    "Offset%": formattedOrder.tp_offset_percentage ?? "",
+    ROI: formattedOrder.tp_ROI ?? ""
+  });
+  const [slValues, setSlValues] = react.useState({
+    enable: false,
+    order_type: formattedOrder.sl_order_type ?? types.OrderType.MARKET,
+    order_price: formattedOrder.sl_order_price ?? "",
+    trigger_price: formattedOrder.sl_trigger_price ?? "",
+    PnL: formattedOrder.sl_pnl ?? "",
+    Offset: formattedOrder.sl_offset ?? "",
+    "Offset%": formattedOrder.sl_offset_percentage ?? "",
+    ROI: formattedOrder.sl_ROI ?? ""
+  });
+  react.useEffect(() => {
+    setTpValuse((prev) => ({
+      ...prev,
+      // enable: formattedOrder.tp_enable ?? false,
+      order_type: formattedOrder.tp_order_type ?? types.OrderType.MARKET,
+      order_price: formattedOrder.tp_order_price ?? "",
+      trigger_price: formattedOrder.tp_trigger_price ?? "",
+      PnL: formattedOrder.tp_pnl ?? "",
+      Offset: formattedOrder.tp_offset ?? "",
+      "Offset%": formattedOrder.tp_offset_percentage ?? "",
+      ROI: formattedOrder.tp_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  react.useEffect(() => {
+    setSlValues((prev) => ({
+      ...prev,
+      // enable: formattedOrder.sl_enable ?? false,
+      order_type: formattedOrder.sl_order_type ?? types.OrderType.MARKET,
+      order_price: formattedOrder.sl_order_price ?? "",
+      trigger_price: formattedOrder.sl_trigger_price ?? "",
+      PnL: formattedOrder.sl_pnl ?? "",
+      Offset: formattedOrder.sl_offset ?? "",
+      "Offset%": formattedOrder.sl_offset_percentage ?? "",
+      ROI: formattedOrder.sl_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  const tpslEnable = formattedOrder.tp_trigger_price || formattedOrder.sl_trigger_price;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-h-full oui-flex-col oui-justify-between oui-rounded-[16px] oui-py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        className: "oui-mb-5 oui-cursor-pointer  oui-text-base oui-text-base-contrast-80",
+        gap: 1,
+        itemAlign: "center",
+        onClick: props.onClose,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { className: " oui-text-base-contrast-80" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.tpsl") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.ScrollArea, { className: "oui-flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        OrderInfo,
+        {
+          order: formattedOrder,
+          baseDP: symbolInfo.base_dp,
+          quoteDP: symbolInfo.quote_dp,
+          symbolLeverage: props.symbolLeverage
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-px-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[6px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              onClick: () => {
+                setOrderValue("side", types.OrderSide.BUY);
+              },
+              size: "sm",
+              fullWidth: true,
+              "data-type": types.OrderSide.BUY,
+              className: ui.cn(
+                formattedOrder.side === types.OrderSide.BUY ? "oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"
+              ),
+              "data-testid": "oui-testid-orderEntry-side-buy-button",
+              children: t("common.buy")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              onClick: () => {
+                setOrderValue("side", types.OrderSide.SELL);
+              },
+              "data-type": types.OrderSide.SELL,
+              fullWidth: true,
+              size: "sm",
+              className: ui.cn(
+                formattedOrder.side === types.OrderSide.SELL ? "oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80" : "oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"
+              ),
+              "data-testid": "oui-testid-orderEntry-side-sell-button",
+              children: t("common.sell")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-py-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TPSLPositionTypeWidget,
+            {
+              value: formattedOrder.position_type ?? types.PositionType.PARTIAL,
+              onChange: (key, value) => {
+                if (value === types.PositionType.FULL) {
+                  setValues({
+                    position_type: types.PositionType.FULL,
+                    tp_order_type: types.OrderType.MARKET,
+                    tp_order_price: void 0,
+                    sl_order_type: types.OrderType.MARKET,
+                    sl_order_price: void 0
+                  });
+                  return;
+                }
+                setOrderValue("position_type", value);
+              }
+            }
+          ),
+          formattedOrder.position_type === types.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              justify: "start",
+              itemAlign: "start",
+              gap: 2,
+              className: "oui-mt-3 oui-w-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-text-[#D25f00]", children: t("tpsl.positionType.full.tips.market") })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TPSLInputRowWidget,
+            {
+              rootOrderPrice: formattedOrder.order_price,
+              symbol: symbolInfo.symbol,
+              type: "tp",
+              side: formattedOrder.side,
+              values: tpValues,
+              errors: validated ? errors : null,
+              quote_dp: symbolInfo.quote_dp,
+              hideOrderPrice: formattedOrder.position_type === types.PositionType.FULL,
+              onChange: (key, value) => {
+                setOrderValue(key, value);
+              },
+              positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL,
+              symbolLeverage: props.symbolLeverage
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TPSLInputRowWidget,
+            {
+              rootOrderPrice: formattedOrder.order_price,
+              symbol: symbolInfo.symbol,
+              type: "sl",
+              side: formattedOrder.side,
+              values: slValues,
+              hideOrderPrice: formattedOrder.position_type === types.PositionType.FULL,
+              errors: validated ? errors : null,
+              quote_dp: symbolInfo.quote_dp,
+              positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL,
+              onChange: (key, value) => {
+                setOrderValue(key, value);
+              },
+              symbolLeverage: props.symbolLeverage
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PnlInfo,
+          {
+            tp_pnl: formattedOrder.tp_pnl,
+            sl_pnl: formattedOrder.sl_pnl,
+            className: "oui-mt-6"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-mt-6 oui-px-3", gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          size: "md",
+          fullWidth: true,
+          color: "gray",
+          variant: "outlined",
+          className: "oui-text-base-contrast-36",
+          onClick: props.onClose,
+          children: t("common.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          size: "md",
+          fullWidth: true,
+          color: "success",
+          className: ui.cn(
+            formattedOrder.side === types.OrderSide.SELL ? "oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80" : "oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80"
+          ),
+          onClick: props.onSubmit,
+          disabled: !tpslEnable,
+          children: t("tpsl.advanced.submit")
+        }
+      )
+    ] })
+  ] });
+};
+var ArrowRightIcon = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.03752 2.9294C7.89169 2.95857 7.74527 3.03207 7.65661 3.16624L5.33145 6.66624C5.20137 6.86224 5.20137 7.12648 5.33145 7.32248L7.65661 10.8225C7.83452 11.0902 8.20669 11.1655 8.47385 10.9864C8.74044 10.8079 8.8151 10.434 8.63719 10.1662L6.53019 6.99408L8.63719 3.82249C8.8151 3.55416 8.74044 3.18082 8.47385 3.00232C8.34027 2.91249 8.18335 2.89965 8.03752 2.9294Z" })
+    }
+  );
+};
+var useTPSLAdvanced = (props) => {
+  const { order: order2, setOrderValue, onClose } = props;
+  const [innerMetaState, setInnerMetaState] = react.useState(null);
+  const {
+    formattedOrder,
+    setValue,
+    setValues,
+    helper,
+    symbolInfo,
+    metaState,
+    ...state
+  } = hooks.useOrderEntry(order2.symbol, {
+    initialOrder: {
+      symbol: order2.symbol,
+      order_type: order2.order_type,
+      side: order2.side,
+      order_price: order2.order_price,
+      order_quantity: order2.order_quantity,
+      position_type: order2.position_type ?? types.PositionType.PARTIAL,
+      trigger_price: order2.trigger_price,
+      // tp_enable: isTPSLEnable(order, "tp"),
+      // sl_enable: isTPSLEnable(order, "sl"),
+      tp_trigger_price: order2.tp_trigger_price,
+      sl_trigger_price: order2.sl_trigger_price,
+      tp_order_price: order2.tp_order_price,
+      sl_order_price: order2.sl_order_price,
+      tp_order_type: order2.tp_order_type,
+      sl_order_type: order2.sl_order_type,
+      sl_pnl: order2.sl_pnl,
+      sl_offset: order2.sl_offset,
+      sl_offset_percentage: order2.sl_offset_percentage,
+      tp_pnl: order2.tp_pnl,
+      tp_offset: order2.tp_offset,
+      tp_offset_percentage: order2.tp_offset_percentage
+    }
+  });
+  const onSubmit = () => {
+    helper.validate().then(() => {
+      props.onSubmit(formattedOrder);
+    }).catch((err) => {
+    });
+  };
+  return {
+    order: order2,
+    formattedOrder,
+    symbolInfo,
+    setValue,
+    setValues,
+    onSubmit,
+    onClose,
+    metaState,
+    symbolLeverage: props.symbolLeverage
+  };
+};
+var TPSLAdvancedWidget = (props) => {
+  const state = useTPSLAdvanced({
+    order: props.order,
+    setOrderValue: props.setOrderValue,
+    onSubmit: props.onSubmit,
+    onClose: props.onClose,
+    symbolLeverage: props.symbolLeverage
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(TPSLAdvancedUI, { ...state });
+};
+var TPSLAdvancedSheetId = "TPSLAdvancedSheetId";
+var TPSLAdvancedDialogId = "TPSLAdvancedDialogId";
+ui.registerSimpleSheet(TPSLAdvancedSheetId, TPSLAdvancedWidget, {
+  title: () => i18n.i18n.t("common.settings")
+});
+ui.registerSimpleDialog(TPSLAdvancedDialogId, TPSLAdvancedWidget, {
+  title: () => i18n.i18n.t("common.settings")
+});
+var useTPSLDetail = (props) => {
+  const { position } = props;
+  const symbol = position.symbol;
+  const symbolInfo = hooks.useSymbolsInfo()[symbol];
+  const { isMobile } = ui.useScreen();
+  const { t } = i18n.useTranslation();
+  const [fullPositionOrders, setFullPositionOrders] = react.useState(
+    []
+  );
+  const [partialPositionOrders, setPartialPositionOrders] = react.useState([]);
+  const [tpslOrders, { cancelAlgoOrder, cancelPostionOrdersByTypes, refresh }] = hooks.useOrderStream(
+    {
+      symbol: position.symbol,
+      status: types.OrderStatus.INCOMPLETE,
+      includes: [types.AlgoOrderRootType.POSITIONAL_TP_SL, types.AlgoOrderRootType.TP_SL],
+      size: 500
+    },
+    {
+      keeplive: true
+    }
+  );
+  const onCancelOrder = async (order2) => {
+    return await cancelAlgoOrder(order2.algo_order_id, order2.symbol);
+  };
+  const onCancelAllTPSLOrders = async () => {
+    return await cancelPostionOrdersByTypes(symbol, [types.AlgoOrderRootType.TP_SL]);
+  };
+  const showTPSLDialog = ({
+    order: order2,
+    positionType,
+    isEditing
+  }) => {
+    const dialogId = isMobile ? TPSLSheetId : TPSLDialogId;
+    ui.modal.show(dialogId, {
+      order: order2,
+      symbol: position.symbol,
+      positionType,
+      isEditing
+    });
+  };
+  const editTPSLOrder = (order2, positionType) => {
+    showTPSLDialog({ order: order2, positionType, isEditing: true });
+  };
+  const addTPSLOrder = (positionType) => {
+    showTPSLDialog({ positionType, isEditing: false });
+  };
+  react.useEffect(() => {
+    if (tpslOrders) {
+      const { fullPositionOrder, partialPositionOrders: partialPositionOrders2 } = hooks.findPositionTPSLFromOrders(tpslOrders, symbol);
+      setFullPositionOrders(fullPositionOrder ? [fullPositionOrder] : []);
+      setPartialPositionOrders(partialPositionOrders2 ?? []);
+    }
+  }, [tpslOrders, symbol]);
+  return {
+    symbolInfo,
+    position,
+    symbol,
+    fullPositionOrders,
+    partialPositionOrders,
+    cancelPostionOrdersByTypes,
+    onCancelOrder,
+    onCancelAllTPSLOrders,
+    editTPSLOrder,
+    addTPSLOrder
+  };
+};
+var TPSLDetailContext = react.createContext({});
+var TPSLDetailProvider = (props) => {
+  const symbolInfo = hooks.useSymbolsInfo()[props.symbol];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLDetailContext.Provider,
+    {
+      value: {
+        base_dp: symbolInfo("base_dp"),
+        quote_dp: symbolInfo("quote_dp"),
+        position: props.position
+      },
+      children: props.children
+    }
+  );
+};
+var useTPSLDetailContext = () => {
+  return react.useContext(TPSLDetailContext);
+};
+var FlexCell = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Flex,
+    {
+      direction: "column",
+      justify: "center",
+      itemAlign: "start",
+      className: "oui-text-2xs oui-h-[36px]",
+      children: props.children
+    }
+  );
+};
+var EstPnlRender = ({ order: order2 }) => {
+  const { position, base_dp, quote_dp } = useTPSLDetailContext();
+  const { tp_trigger_price, sl_trigger_price } = hooks.findTPSLFromOrder(order2);
+  let tp_unrealPnl = void 0;
+  let sl_unrealPnl = void 0;
+  const qty = new utils.Decimal(order2.quantity).eq(0) ? position.position_qty : order2.quantity;
+  const side = position.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL;
+  const openPrice = position?.average_open_price;
+  if (tp_trigger_price) {
+    const direction = utils.getTPSLDirection({
+      side,
+      type: "tp",
+      closePrice: tp_trigger_price,
+      orderPrice: openPrice
+    });
+    tp_unrealPnl = utils.formatNum.pnl(
+      perp.positions.unrealizedPnL({
+        qty,
+        openPrice,
+        // markPrice: unRealizedPrice,
+        markPrice: tp_trigger_price
+      })
+    )?.abs().mul(direction).toNumber();
+  }
+  if (sl_trigger_price) {
+    const direction = utils.getTPSLDirection({
+      side,
+      type: "sl",
+      closePrice: sl_trigger_price,
+      orderPrice: openPrice
+    });
+    sl_unrealPnl = utils.formatNum.pnl(
+      perp.positions.unrealizedPnL({
+        qty,
+        openPrice,
+        // markPrice: unRealizedPrice,
+        markPrice: sl_trigger_price
+      })
+    )?.abs().mul(direction).toNumber();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gap: 2,
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_unrealPnl && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 2, rm: utils.Decimal.ROUND_DOWN, coloring: true, padding: false, children: tp_unrealPnl }) }),
+        sl_unrealPnl && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 2, rm: utils.Decimal.ROUND_DOWN, coloring: true, padding: false, children: sl_unrealPnl }) })
+      ]
+    }
+  );
+};
+var OrderPriceRender = ({ order: order2 }) => {
+  const { quote_dp } = useTPSLDetailContext();
+  const { tp_order_price, sl_order_price } = hooks.findTPSLOrderPriceFromOrder(order2);
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gap: 2,
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_order_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: tp_order_price === types.OrderType.MARKET ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.market") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quote_dp, rm: utils.Decimal.ROUND_DOWN, padding: false, children: tp_order_price }) }),
+        sl_order_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: sl_order_price === types.OrderType.MARKET ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.market") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quote_dp, rm: utils.Decimal.ROUND_DOWN, padding: false, children: sl_order_price }) })
+      ]
+    }
+  );
+};
+var QtyRender = ({ order: order2 }) => {
+  const { position, base_dp } = useTPSLDetailContext();
+  const { tp_trigger_price, sl_trigger_price } = hooks.findTPSLFromOrder(order2);
+  const quantity = react.useMemo(() => {
+    if (order2.quantity === 0) {
+      return -position.position_qty;
+    }
+    return position.position_qty > 0 ? -order2.quantity : order2.quantity;
+  }, [order2.quantity, position.position_qty]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      justify: "start",
+      itemAlign: "start",
+      className: "oui-h-full oui-text-2xs",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: base_dp, rm: utils.Decimal.ROUND_DOWN, padding: false, children: quantity }) }),
+        tp_trigger_price && sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
+      ]
+    }
+  );
+};
+var TriggerPrice = ({ order: order2 }) => {
+  const { quote_dp } = useTPSLDetailContext();
+  const { tp_trigger_price, sl_trigger_price } = hooks.findTPSLFromOrder(order2);
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gap: 1,
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", justify: "start", itemAlign: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: t("common.market") }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quote_dp, rm: utils.Decimal.ROUND_DOWN, padding: false, children: tp_trigger_price })
+        ] }) }),
+        sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", justify: "start", itemAlign: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: t("common.market") }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quote_dp, rm: utils.Decimal.ROUND_DOWN, padding: false, children: sl_trigger_price })
+        ] }) })
+      ]
+    }
+  );
+};
+var TypeRender = ({ order: order2 }) => {
+  const { tp_trigger_price, sl_trigger_price } = hooks.findTPSLFromOrder(order2);
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-trade-profit", children: t("tpsl.tp") }) }),
+        sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-trade-loss", children: t("tpsl.sl") }) })
+      ]
+    }
+  );
+};
+var useColumn = (props) => {
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const { onCancelOrder } = props;
+  const columns = react.useMemo(() => {
+    const moblieColumns = [
+      {
+        title: t("tpsl.tpslDetail.qty"),
+        dataIndex: "quantity",
+        width: 70,
+        className: "oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(QtyRender, { order: record })
+      },
+      {
+        title: t("common.type"),
+        dataIndex: "type",
+        width: 35,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(TypeRender, { order: record })
+      },
+      {
+        title: t("common.trigger"),
+        dataIndex: "trigger",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(TriggerPrice, { order: record });
+        }
+      },
+      {
+        title: t("common.price"),
+        dataIndex: "price",
+        width: 70,
+        className: "oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(OrderPriceRender, { order: record })
+      },
+      {
+        title: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
+          {
+            className: "oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",
+            content: t("tpsl.tpslDetail.estPnl.tooltip"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dashed oui-underline-offset-2", children: t("tpsl.tpslDetail.estPnl") })
+          }
+        ),
+        dataIndex: "estpnl",
+        width: 70,
+        className: "!oui-pr-0 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(EstPnlRender, { order: record })
+      }
+    ];
+    const desktopColums = [
+      {
+        title: t("tpsl.tpslDetail.qty"),
+        dataIndex: "quantity",
+        width: 70,
+        className: ui.cn(" oui-py-2 !oui-pl-5"),
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(QtyRender, { order: record })
+      },
+      {
+        title: t("common.type"),
+        dataIndex: "type",
+        width: 35,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(TypeRender, { order: record })
+      },
+      {
+        title: t("common.trigger"),
+        dataIndex: "trigger",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(TriggerPrice, { order: record });
+        }
+      },
+      {
+        title: t("common.price"),
+        dataIndex: "price",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(OrderPriceRender, { order: record })
+      },
+      {
+        title: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
+          {
+            className: "oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",
+            content: t("tpsl.tpslDetail.estPnl.tooltip"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-underline oui-decoration-dashed oui-underline-offset-2", children: t("tpsl.tpslDetail.estPnl") })
+          }
+        ),
+        dataIndex: "estpnl",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(EstPnlRender, { order: record })
+      },
+      {
+        title: "",
+        dataIndex: "delete",
+        width: 50,
+        className: ui.cn("oui-py-2 !oui-pr-5"),
+        render: (_, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(CancelAllBtn, { order: record, onCancelOrder });
+        }
+      }
+    ];
+    if (isMobile) {
+      return moblieColumns;
+    }
+    return desktopColums;
+  }, [t, isMobile]);
+  return columns;
+};
+var DeleteIcon = (props) => {
+  const { size = 18 } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.48081 15.375C5.10681 15.375 4.78731 15.2426 4.52231 14.9777C4.25744 14.7127 4.125 14.3932 4.125 14.0192V4.50004H3.375V3.37505H6.75V2.71167H11.25V3.37505H14.625V4.50004H13.875V14.0192C13.875 14.3981 13.7438 14.7188 13.4813 14.9813C13.2188 15.2438 12.8981 15.375 12.5192 15.375H5.48081ZM12.75 4.50004H5.25V14.0192C5.25 14.0866 5.27162 14.1419 5.31487 14.1852C5.35812 14.2284 5.41344 14.25 5.48081 14.25H12.5192C12.5769 14.25 12.6298 14.226 12.6778 14.1779C12.7259 14.1299 12.75 14.077 12.75 14.0192V4.50004ZM7.053 12.75H8.17781V6.00004H7.053V12.75ZM9.82219 12.75H10.947V6.00004H9.82219V12.75Z" })
+    }
+  );
+};
+var CancelAllBtn = (props) => {
+  const [loading, setLoading] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.ThrottledButton,
+    {
+      size: "sm",
+      loading,
+      variant: "text",
+      color: "gray",
+      onClick: (e) => {
+        e.stopPropagation();
+        setLoading(true);
+        props.onCancelOrder?.(props.order).then(
+          () => {
+          },
+          (error) => {
+            ui.toast.error(error.message);
+          }
+        ).finally(() => {
+          setLoading(false);
+        });
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, { className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer" })
+    }
+  );
+};
+var OrdersTable = (props) => {
+  const { orders } = props;
+  const columns = useColumn({ onCancelOrder: props.onCancelOrder });
+  return (
+    // <ScrollArea className={cn( props.className)}>
+    /* @__PURE__ */ jsxRuntime.jsx(
+      uiConnector.AuthGuardDataTable,
+      {
+        columns,
+        dataSource: orders,
+        className: "oui-bg-transparent oui-text-2xs",
+        bordered: true,
+        classNames: {
+          root: ui.cn(props.className),
+          header: "!oui-bg-base-8",
+          scroll: ui.cn(
+            !orders || orders.length === 0 ? "!oui-min-h-[170px]" : "!oui-min-h-[100px]"
+          )
+        },
+        onRow: (record) => {
+          return {
+            className: ui.cn(
+              "oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"
+            ),
+            onClick: () => {
+              props.editTPSLOrder(record);
+            }
+          };
+        }
+      }
+    )
+  );
+};
+var OrdersTableMobile = (props) => {
+  const { t } = i18n.useTranslation();
+  const { orders } = props;
+  const columns = useColumn({ onCancelOrder: () => Promise.resolve() });
+  const orderIds = react.useMemo(() => {
+    return orders.reduce(
+      (acc, curr) => {
+        acc[curr.algo_order_id] = true;
+        return acc;
+      },
+      {}
+    );
+  }, [orders]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    uiConnector.AuthGuardDataTable,
+    {
+      columns,
+      dataSource: orders,
+      expanded: orderIds,
+      bordered: true,
+      getRowCanExpand: () => true,
+      expandRowRender: (row) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, justify: "end", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              variant: "outlined",
+              size: "sm",
+              color: "gray",
+              className: "oui-h-6 oui-text-2xs oui-text-base-contrast-54",
+              onClick: () => props.editTPSLOrder(row.original),
+              children: t("common.edit")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DeleteBtn,
+            {
+              order: row.original,
+              onCancelOrder: props.canCancelOrder
+            }
+          )
+        ] });
+      },
+      className: "oui-bg-transparent oui-px-2 oui-text-2xs",
+      classNames: {
+        scroll: ui.cn(
+          !orders || orders.length === 0 ? "!oui-min-h-[170px]" : "!oui-min-h-[100px]"
+        )
+      },
+      onRow: () => {
+        return {
+          className: ui.cn(
+            "oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"
+          )
+        };
+      },
+      generatedRowKey: (record) => record.algo_order_id
+    }
+  );
+};
+var DeleteBtn = (props) => {
+  const [loading, setLoading] = react.useState(false);
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.ThrottledButton,
+    {
+      className: "oui-h-6 oui-text-2xs oui-text-base-contrast-54",
+      size: "sm",
+      loading,
+      variant: "outlined",
+      color: "gray",
+      onClick: (e) => {
+        e.stopPropagation();
+        setLoading(true);
+        props.onCancelOrder?.(props.order).then(
+          () => {
+          },
+          (error) => {
+            ui.toast.error(error.message);
+          }
+        ).finally(() => {
+          setLoading(false);
+        });
+      },
+      children: t("common.delete")
+    }
+  );
+};
+var TPSLDetailUI = (props) => {
+  const { isMobile } = ui.useScreen();
+  const {
+    position,
+    fullPositionOrders,
+    partialPositionOrders,
+    onCancelOrder,
+    onCancelAllTPSLOrders,
+    editTPSLOrder,
+    addTPSLOrder,
+    symbolInfo
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.ScrollArea, { className: ui.cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OrderInfo,
+      {
+        order: {
+          symbol: position.symbol,
+          order_quantity: position.position_qty.toString(),
+          order_price: position.average_open_price.toString()
+        },
+        symbolLeverage: position.leverage,
+        baseDP: symbolInfo("base_dp"),
+        quoteDP: symbolInfo("quote_dp"),
+        classNames: {
+          root: ui.cn("oui-mb-6 oui-gap-3 oui-px-5"),
+          container: "oui-gap-x-[30px]"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FullPositionPart,
+      {
+        position,
+        orders: fullPositionOrders,
+        onCancelOrder,
+        onCancelAllTPSLOrders,
+        editTPSLOrder,
+        addTPSLOrder
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PartialPositionPart,
+      {
+        position,
+        orders: partialPositionOrders,
+        onCancelOrder,
+        onCancelAllTPSLOrders,
+        editTPSLOrder,
+        addTPSLOrder
+      }
+    )
+  ] }) });
+};
+var FullPositionPart = (props) => {
+  const [open, setOpen] = react.useState(true);
+  const { orders } = props;
+  const { isMobile } = ui.useScreen();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-mt-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        className: ui.cn("oui-flex oui-items-center oui-justify-between oui-px-5"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PositionTypeDescription,
+            {
+              positionType: types.PositionType.FULL,
+              open,
+              onOpenChange: setOpen
+            }
+          ),
+          orders && orders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+            AddButton,
+            {
+              positionType: types.PositionType.FULL,
+              position: props.position,
+              addTPSLOrder: props.addTPSLOrder
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        className: ui.cn(
+          "oui-overflow-hidden oui-transition-[height] oui-duration-150",
+          open ? "oui-h-auto" : "oui-h-0 oui-pb-4"
+        ),
+        children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTableMobile,
+          {
+            orders,
+            editTPSLOrder: (order2) => props.editTPSLOrder(order2, types.PositionType.FULL),
+            canCancelOrder: props.onCancelOrder
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTable,
+          {
+            orders,
+            editTPSLOrder: (order2) => {
+              props.editTPSLOrder(order2, types.PositionType.FULL);
+            },
+            onCancelOrder: props.onCancelOrder
+          }
+        )
+      }
+    )
+  ] });
+};
+var PartialPositionPart = (props) => {
+  const [open, setOpen] = react.useState(true);
+  const { orders } = props;
+  const { isMobile } = ui.useScreen();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-pt-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        className: ui.cn(
+          "oui-flex oui-items-center oui-justify-between",
+          "oui-px-5",
+          isMobile ? "oui-flex-col oui-items-start oui-justify-start oui-gap-[11px]" : "oui-flex-row oui-items-center oui-justify-between"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PositionTypeDescription,
+            {
+              positionType: types.PositionType.PARTIAL,
+              open,
+              onOpenChange: setOpen
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AddButton,
+              {
+                positionType: types.PositionType.PARTIAL,
+                position: props.position,
+                addTPSLOrder: props.addTPSLOrder
+              }
+            ),
+            orders && orders.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              CancelAllBtn2,
+              {
+                canCancelAll: orders && orders.length > 0,
+                onCancelAllTPSLOrders: props.onCancelAllTPSLOrders
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        className: ui.cn(
+          "oui-overflow-hidden oui-transition-[height] oui-duration-150",
+          open ? "oui-h-auto" : "oui-h-0 oui-pb-4"
+        ),
+        children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTableMobile,
+          {
+            orders,
+            editTPSLOrder: (order2) => props.editTPSLOrder(order2, types.PositionType.PARTIAL),
+            canCancelOrder: props.onCancelOrder
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTable,
+          {
+            className: "oui-h-[300px]",
+            orders,
+            editTPSLOrder: (order2) => {
+              props.editTPSLOrder(order2, types.PositionType.PARTIAL);
+            },
+            onCancelOrder: props.onCancelOrder
+          }
+        )
+      }
+    )
+  ] });
+};
+var PositionTypeDescription = (props) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gap: 1,
+      itemAlign: "center",
+      justify: "start",
+      className: "oui-text-2xs",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            itemAlign: "center",
+            justify: "start",
+            gap: 1,
+            className: "oui-cursor-pointer",
+            onClick: () => props.onOpenChange(!props.open),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.ChevronDownIcon,
+                {
+                  size: 12,
+                  color: "white",
+                  className: ui.cn(
+                    "oui-cursor-pointer oui-transition-transform",
+                    props.open && "oui-rotate-180"
+                  )
+                }
+              ),
+              props.positionType === types.PositionType.FULL ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.full") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.partial") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
+          {
+            className: "oui-w-[280px] oui-p-3",
+            content: props.positionType === types.PositionType.FULL ? t("tpsl.positionType.full.tips") : t("tpsl.positionType.partial.tips"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.ExclamationFillIcon,
+              {
+                className: "oui-cursor-pointer oui-text-base-contrast-54",
+                size: 12
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var AddButton = (props) => {
+  const { t } = i18n.useTranslation();
+  const onAdd = () => {
+    props.addTPSLOrder(props.positionType);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.ThrottledButton,
+    {
+      variant: "outlined",
+      size: "sm",
+      color: "gray",
+      className: "oui-h-6 oui-w-[94px] oui-text-2xs",
+      onClick: onAdd,
+      children: t("tpsl.add")
+    }
+  );
+};
+var CancelAllBtn2 = (props) => {
+  const [loading, setLoading] = react.useState(false);
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.ThrottledButton,
+    {
+      loading,
+      variant: "outlined",
+      disabled: !props.canCancelAll,
+      size: "sm",
+      color: "gray",
+      className: "oui-h-6  oui-w-[94px] oui-text-2xs disabled:oui-border-base-contrast-16 disabled:oui-bg-transparent disabled:oui-text-base-contrast-20",
+      onClick: () => {
+        setLoading(true);
+        props.onCancelAllTPSLOrders().then(
+          () => {
+          },
+          (error) => {
+            ui.toast.error(error.message);
+          }
+        ).finally(() => {
+          setLoading(false);
+        });
+      },
+      children: t("tpsl.cancelAll")
+    }
+  );
+};
+var TPSLDetailWidget = (props) => {
+  const state = useTPSLDetail(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLDetailProvider,
+    {
+      symbol: props.position.symbol,
+      position: props.position,
+      children: /* @__PURE__ */ jsxRuntime.jsx(TPSLDetailUI, { ...state })
+    }
+  );
+};
+var TPSLDetailDialogId = "TPSLDetailDialogId ";
+var TPSLDetailSheetId = "TPSLDetailSheetId";
+ui.registerSimpleDialog(TPSLDetailDialogId, TPSLDetailWidget, {
+  classNames: {
+    content: "oui-w-[420px] lg:oui-pt-4 lg:oui-pb-2 !oui-px-0",
+    body: "lg:oui-py-0"
+  }
+});
+ui.registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
+  classNames: {
+    content: "!oui-p-0"
+  }
+});
+var useTPSLSimpleDialog = (options) => {
+  const { type, triggerPrice, symbol } = options;
+  const symbolInfo = hooks.useSymbolsInfo();
+  const [{ rows: positions }, positionsInfo] = hooks.usePositionStream(symbol);
+  const position = positions?.[0];
+  react.useRef(types.AlgoOrderRootType.TP_SL);
+  const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
+  const { t } = i18n.useTranslation();
+  const [
+    tpslOrder,
+    {
+      submit,
+      deleteOrder,
+      setValue,
+      setValues,
+      validate,
+      errors,
+      isCreateMutating,
+      isUpdateMutating
+    }
+  ] = hooks.useTPSLOrder(
+    {
+      symbol,
+      position_qty: position?.position_qty,
+      average_open_price: position?.average_open_price
+    },
+    {
+      defaultOrder: void 0,
+      positionType: types.PositionType.PARTIAL,
+      // tpslEnable: { tp_enable: type === "tp", sl_enable: type === "sl" },
+      isEditing: false
+    }
+  );
+  const setQuantity = (value) => {
+    setValue("quantity", value);
+  };
+  const setOrderPrice = (name, value) => {
+    setValue(name, value);
+  };
+  const setPnL = (type2, value) => {
+    setValue(type2, value);
+  };
+  const maxQty = react.useMemo(
+    () => Math.abs(Number(position.position_qty)),
+    [position.position_qty]
+  );
+  react.useEffect(() => {
+    if (!maxQty) {
+      return;
+    }
+    setValue("quantity", maxQty);
+    if (type === "tp") {
+      setValue("tp_trigger_price", triggerPrice ?? "");
+    } else {
+      setValue("sl_trigger_price", triggerPrice ?? "");
+    }
+  }, [type, triggerPrice, maxQty]);
+  const onSubmit = async () => {
+    try {
+      const validOrder = await validate();
+      if (validOrder) {
+        if (!needConfirm) {
+          return submit({ accountId: position.account_id }).then(() => true).catch((err) => {
+            if (err?.message) {
+              ui.toast.error(err.message);
+            }
+            throw false;
+          });
+        }
+        return ui.modal.confirm({
+          title: t("tpsl.confirmOrder"),
+          // bodyClassName: "lg:oui-py-0",
+          onOk: async () => {
+            try {
+              const res = await submit({
+                accountId: position.account_id
+              });
+              if (res.success) {
+                return res;
+              }
+              if (res.message) {
+                ui.toast.error(res.message);
+              }
+              return false;
+            } catch (err) {
+              if (err?.message) {
+                ui.toast.error(err.message);
+              }
+              return false;
+            }
+          },
+          classNames: {
+            body: "!oui-pb-0"
+          },
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            PositionTPSLConfirm,
+            {
+              isPositionTPSL: false,
+              isEditing: false,
+              symbol,
+              qty: Number(tpslOrder.quantity),
+              maxQty,
+              tpPrice: Number(tpslOrder.tp_trigger_price),
+              slPrice: Number(tpslOrder.sl_trigger_price),
+              side: tpslOrder.side,
+              orderInfo: tpslOrder,
+              quoteDP: symbolInfo[symbol]("quote_dp"),
+              baseDP: symbolInfo[symbol]("base_dp")
+            }
+          )
+        }).then(
+          () => {
+            return true;
+          },
+          () => {
+            return Promise.reject(false);
+          }
+        );
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  };
+  return {
+    symbolInfo: symbolInfo[symbol],
+    maxQty,
+    setQuantity: hooks.useMemoizedFn(setQuantity),
+    orderQuantity: tpslOrder.quantity,
+    isPosition: false,
+    TPSL_OrderEntity: tpslOrder,
+    setOrderValue: setValue,
+    setPnL,
+    setOrderPrice,
+    onSubmit,
+    errors,
+    status: {
+      isCreateMutating,
+      isUpdateMutating
+    },
+    position,
+    setValues,
+    type,
+    triggerPrice
+  };
+};
+var TPSLSimpleDialogUI = (props) => {
+  const { type, triggerPrice, errors, TPSL_OrderEntity } = props;
+  const { t } = i18n.useTranslation();
+  const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(errors);
+  const footer = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", itemAlign: "center", gap: 3, mt: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        color: "gray",
+        onClick: () => {
+          props.onComplete?.();
+          props.close?.();
+        },
+        fullWidth: true,
+        className: "oui-text-sm",
+        size: "md",
+        children: t("common.cancel")
+      },
+      "secondary"
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        onClick: () => {
+          props.onSubmit().then(() => {
+            props.onComplete?.();
+            props.close?.();
+          });
+        },
+        fullWidth: true,
+        className: "oui-text-sm",
+        size: "md",
+        children: t("common.confirm")
+      },
+      "primary"
+    )
+  ] });
+  const errorMessage = () => {
+    const tpError = getErrorMsg("tp_trigger_price");
+    const slError = getErrorMsg("sl_trigger_price");
+    let text = "";
+    if (tpError && type === "tp") {
+      text = tpError;
+    }
+    if (slError && type === "sl") {
+      text = slError;
+    }
+    if (!text) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        justify: "start",
+        itemAlign: "start",
+        gap: 2,
+        className: "oui-mt-2 oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-danger" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-danger", children: text })
+        ]
+      }
+    );
+  };
+  const renderPnl = () => {
+    const { tp_pnl, sl_pnl } = TPSL_OrderEntity;
+    if (type === "sl") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("tpsl.totalEstSlPnl") }),
+        sl_pnl ? /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.numeral,
+          {
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: "USDC" }),
+            coloring: true,
+            visible: true,
+            size: "2xs",
+            dp: 2,
+            children: Number(sl_pnl)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: "-- USDC" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("tpsl.totalEstTpPnl") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.numeral,
+        {
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
+          rule: "price",
+          coloring: true,
+          visible: true,
+          size: "2xs",
+          dp: 2,
+          children: tp_pnl ? Number(tp_pnl) : "--"
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-w-full oui-px-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TPSLQuantity,
+      {
+        maxQty: props.maxQty,
+        quantity: Number(props.orderQuantity ?? props.maxQty),
+        baseTick: props.symbolInfo("base_tick"),
+        base_dp: props.symbolInfo("base_dp"),
+        base: props.symbolInfo("base"),
+        isEditing: false,
+        errorMsg: getErrorMsg("quantity"),
+        onQuantityChange: props.setQuantity
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        direction: "column",
+        itemAlign: "start",
+        className: ui.cn(
+          "oui-mt-4 oui-w-full oui-gap-1 oui-text-xs oui-text-base-contrast-36"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("common.triggerPrice") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text.numeral,
+              {
+                className: "oui-text-base-contrast",
+                suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-xs oui-text-base-contrast-36", children: "USDC" }),
+                rule: "price",
+                size: "xs",
+                dp: props.symbolInfo("quote_dp"),
+                children: triggerPrice ? Number(triggerPrice) : "--"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("common.orderPrice") }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast", size: "xs", children: t("common.market") })
+          ] }),
+          renderPnl()
+        ]
+      }
+    ),
+    errorMessage(),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3 oui-w-full" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Flex,
+      {
+        itemAlign: "center",
+        onClick: () => {
+          props.close?.();
+          props.showAdvancedTPSLDialog?.({
+            qty: Number(TPSL_OrderEntity.quantity)
+          });
+        },
+        className: "oui-pb-4",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: "primary", className: "oui-cursor-pointer oui-text-sm", children: t("tpsl.advancedSetting") })
+      }
+    ),
+    footer
+  ] });
+};
+var TPSLSimpleDialogWidget = (props) => {
+  const { close, onComplete, showAdvancedTPSLDialog } = props;
+  const state = useTPSLSimpleDialog(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLSimpleDialogUI,
+    {
+      ...state,
+      close,
+      onComplete,
+      showAdvancedTPSLDialog
+    }
+  );
+};
+var TPSLSimpleSheetId = "TPSLSimpleSheetId";
+var TPSLSimpleDialogId = "TPSLSimpleDialogId";
+ui.registerSimpleSheet(TPSLSimpleSheetId, TPSLSimpleDialogWidget, {
+  classNames: {}
+});
+ui.registerSimpleDialog(TPSLSimpleDialogId, TPSLSimpleDialogWidget, {
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+function getInitialOrder(order2) {
+  const childOrder = order2.child_orders[0];
+  const positionType = childOrder.algo_type === types.AlgoOrderRootType.TP_SL ? types.PositionType.PARTIAL : types.PositionType.FULL;
+  const tpOrder = childOrder.child_orders.find(
+    (item) => item.algo_type === types.AlgoOrderType.TAKE_PROFIT && item.trigger_price
+  );
+  const slOrder = childOrder.child_orders.find(
+    (item) => item.algo_type === types.AlgoOrderType.STOP_LOSS && item.trigger_price
+  );
+  const tpslPriceInfo = {};
+  if (tpOrder) {
+    tpslPriceInfo.tp_trigger_price = tpOrder.trigger_price?.toString();
+    tpslPriceInfo.tp_order_type = typeof tpOrder.type === "string" ? tpOrder.type.replace("_ORDER", "") : void 0;
+    if (tpslPriceInfo.tp_order_type === types.OrderType.LIMIT) {
+      tpslPriceInfo.tp_order_price = tpOrder.price?.toString();
+    }
+  }
+  if (slOrder) {
+    tpslPriceInfo.sl_trigger_price = slOrder.trigger_price?.toString();
+    tpslPriceInfo.sl_order_type = typeof slOrder.type === "string" ? slOrder.type.replace("_ORDER", "") : void 0;
+    if (tpslPriceInfo.sl_order_type === types.OrderType.LIMIT) {
+      tpslPriceInfo.sl_order_price = slOrder.price?.toString();
+    }
+  }
+  return {
+    baseInfo: {
+      symbol: order2.symbol,
+      order_type: order2.type,
+      side: order2.side,
+      order_price: order2.price,
+      order_quantity: order2.quantity,
+      position_type: positionType
+      // tp_enable: !!tpOrder?.trigger_price,
+      // sl_enable: !!slOrder?.trigger_price,
+    },
+    tpslPriceInfo,
+    tpInfo: {
+      orderId: tpOrder?.algo_order_id
+    },
+    slInfo: {
+      orderId: slOrder?.algo_order_id
+    }
+  };
+}
+function isTPSLPriceChanged(originPrice, newPrice) {
+  if (newPrice === void 0 || newPrice === null) {
+    return true;
+  }
+  if (isNaN(Number(newPrice))) {
+    return false;
+  }
+  const originDeci = new utils.Decimal(Number(originPrice));
+  const newDeci = new utils.Decimal(Number(newPrice));
+  return !newDeci.eq(originDeci);
+}
+var useEditBracketOrder = (props) => {
+  if (!props.order) {
+    throw new types.SDKError("order is required for editBracketOrder");
+  }
+  const { baseInfo, tpslPriceInfo, tpInfo, slInfo } = getInitialOrder(
+    props.order
+  );
+  const [doUpdateOrder, { isMutating }] = hooks.useMutation("/v1/algo/order", "PUT");
+  const { formattedOrder, setValue, setValues, metaState, symbolInfo, helper } = hooks.useOrderEntry(props.order.symbol, {
+    initialOrder: baseInfo
+  });
+  const symbol = props.order.symbol;
+  const isPriceChanged = react.useMemo(() => {
+    let dirty = false;
+    const {
+      tp_order_price,
+      sl_order_price,
+      tp_trigger_price,
+      sl_trigger_price
+    } = formattedOrder;
+    if (tpslPriceInfo.tp_trigger_price) {
+      dirty = dirty || isTPSLPriceChanged(
+        tpslPriceInfo.tp_trigger_price,
+        tp_trigger_price ?? 0
+      );
+    }
+    if (tpslPriceInfo.tp_order_price) {
+      dirty = dirty || isTPSLPriceChanged(tpslPriceInfo.tp_order_price, tp_order_price ?? 0);
+    }
+    if (tpslPriceInfo.sl_trigger_price) {
+      dirty = dirty || isTPSLPriceChanged(
+        tpslPriceInfo.sl_trigger_price,
+        sl_trigger_price ?? 0
+      );
+    }
+    if (tpslPriceInfo.sl_order_price) {
+      dirty = dirty || isTPSLPriceChanged(tpslPriceInfo.sl_order_price, sl_order_price ?? 0);
+    }
+    return dirty;
+  }, [
+    tpslPriceInfo,
+    formattedOrder.tp_order_price,
+    formattedOrder.sl_order_price,
+    formattedOrder.tp_trigger_price,
+    formattedOrder.sl_trigger_price
+  ]);
+  react.useEffect(() => {
+    setValues({
+      ...tpslPriceInfo
+    });
+  }, [props.order, setValues]);
+  const onSubmit = async () => {
+    return helper.validate().then(() => {
+      const tpOrder = {
+        order_id: tpInfo.orderId,
+        algo_type: types.AlgoOrderType.TAKE_PROFIT,
+        trigger_price: formattedOrder.tp_trigger_price,
+        reduce_only: true
+      };
+      if (formattedOrder.tp_order_type === types.OrderType.LIMIT) {
+        tpOrder.price = formattedOrder.tp_order_price;
+      }
+      const slOrder = {
+        order_id: slInfo.orderId,
+        algo_type: types.AlgoOrderType.STOP_LOSS,
+        trigger_price: formattedOrder.sl_trigger_price,
+        reduce_only: true
+      };
+      if (formattedOrder.sl_order_type === types.OrderType.LIMIT) {
+        slOrder.price = formattedOrder.sl_order_price;
+      }
+      const childOrders = [];
+      if (tpInfo.orderId) {
+        childOrders.push(tpOrder);
+      }
+      if (slInfo.orderId) {
+        childOrders.push(slOrder);
+      }
+      return doUpdateOrder({
+        order_id: props.order.algo_order_id,
+        child_orders: [
+          {
+            order_id: props.order.child_orders[0].algo_order_id,
+            child_orders: childOrders
+          }
+        ]
+      });
+    });
+  };
+  return {
+    symbol,
+    symbolInfo,
+    formattedOrder,
+    setValue,
+    setValues,
+    metaState,
+    onSubmit,
+    isMutating,
+    isPriceChanged
+  };
+};
+var EditBracketOrderUI = (props) => {
+  const { t } = i18n.useTranslation();
+  const { errors, validated } = props.metaState;
+  const { isMobile } = ui.useScreen();
+  const {
+    formattedOrder,
+    setValue: setOrderValue,
+    symbol,
+    symbolInfo,
+    setValues
+  } = props;
+  const [tpValues, setTpValuse] = react.useState({
+    // enable: false,
+    order_type: formattedOrder.tp_order_type ?? types.OrderType.MARKET,
+    order_price: formattedOrder.tp_order_price ?? "",
+    trigger_price: formattedOrder.tp_trigger_price ?? "",
+    PnL: formattedOrder.tp_pnl ?? "",
+    Offset: formattedOrder.tp_offset ?? "",
+    "Offset%": formattedOrder.tp_offset_percentage ?? "",
+    ROI: formattedOrder.tp_ROI ?? ""
+  });
+  const [slValues, setSlValues] = react.useState({
+    // enable: false,
+    order_type: formattedOrder.sl_order_type ?? types.OrderType.MARKET,
+    order_price: formattedOrder.sl_order_price ?? "",
+    trigger_price: formattedOrder.sl_trigger_price ?? "",
+    PnL: formattedOrder.sl_pnl ?? "",
+    Offset: formattedOrder.sl_offset ?? "",
+    "Offset%": formattedOrder.sl_offset_percentage ?? "",
+    ROI: formattedOrder.sl_ROI ?? ""
+  });
+  react.useEffect(() => {
+    setTpValuse((prev) => ({
+      ...prev,
+      // enable: formattedOrder.tp_enable ?? false,
+      order_type: formattedOrder.tp_order_type ?? types.OrderType.MARKET,
+      order_price: formattedOrder.tp_order_price ?? "",
+      trigger_price: formattedOrder.tp_trigger_price ?? "",
+      PnL: formattedOrder.tp_pnl ?? "",
+      Offset: formattedOrder.tp_offset ?? "",
+      "Offset%": formattedOrder.tp_offset_percentage ?? "",
+      ROI: formattedOrder.tp_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  react.useEffect(() => {
+    setSlValues((prev) => ({
+      ...prev,
+      // enable: formattedOrder.sl_enable ?? false,
+      order_type: formattedOrder.sl_order_type ?? types.OrderType.MARKET,
+      order_price: formattedOrder.sl_order_price ?? "",
+      trigger_price: formattedOrder.sl_trigger_price ?? "",
+      PnL: formattedOrder.sl_pnl ?? "",
+      Offset: formattedOrder.sl_offset ?? "",
+      "Offset%": formattedOrder.sl_offset_percentage ?? "",
+      ROI: formattedOrder.sl_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.ScrollArea,
+      {
+        className: ui.cn("oui-flex-1", isMobile && "oui-h-[calc(100vh-200px)]"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntime.jsx(
+            OrderInfo,
+            {
+              order: {
+                symbol,
+                order_quantity: formattedOrder.order_quantity,
+                order_price: formattedOrder.order_price
+              },
+              baseDP: symbolInfo.base_dp,
+              quoteDP: symbolInfo.quote_dp
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-3" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-py-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TPSLPositionTypeWidget,
+                {
+                  value: formattedOrder.position_type ?? types.PositionType.PARTIAL,
+                  disableSelector: true,
+                  onChange: (key, value) => {
+                    if (value === types.PositionType.FULL) {
+                      setValues({
+                        position_type: types.PositionType.FULL,
+                        tp_order_type: types.OrderType.MARKET,
+                        tp_order_price: void 0,
+                        sl_order_type: types.OrderType.MARKET,
+                        sl_order_price: void 0
+                      });
+                      return;
+                    }
+                    setOrderValue("position_type", value);
+                  }
+                }
+              ),
+              formattedOrder.position_type === types.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  justify: "start",
+                  itemAlign: "start",
+                  gap: 2,
+                  className: "oui-mt-3 oui-w-full",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-text-[#D25f00]", children: t("tpsl.positionType.full.tips.market") })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TPSLInputRowWidget,
+                {
+                  disableEnableCheckbox: true,
+                  disableOrderTypeSelector: true,
+                  rootOrderPrice: formattedOrder.order_price,
+                  symbol: symbolInfo.symbol,
+                  type: "tp",
+                  side: formattedOrder.side,
+                  values: tpValues,
+                  errors: validated ? errors : null,
+                  quote_dp: symbolInfo.quote_dp,
+                  hideOrderPrice: formattedOrder.position_type === types.PositionType.FULL,
+                  onChange: (key, value) => {
+                    setOrderValue(key, value);
+                  },
+                  positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TPSLInputRowWidget,
+                {
+                  disableEnableCheckbox: true,
+                  disableOrderTypeSelector: true,
+                  rootOrderPrice: formattedOrder.order_price,
+                  symbol: symbolInfo.symbol,
+                  type: "sl",
+                  side: formattedOrder.side,
+                  values: slValues,
+                  hideOrderPrice: formattedOrder.position_type === types.PositionType.FULL,
+                  errors: validated ? errors : null,
+                  quote_dp: symbolInfo.quote_dp,
+                  positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL,
+                  onChange: (key, value) => {
+                    setOrderValue(key, value);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PnlInfo,
+              {
+                tp_pnl: formattedOrder.tp_pnl,
+                sl_pnl: formattedOrder.sl_pnl,
+                className: "oui-mt-6"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Flex,
+      {
+        itemAlign: "center",
+        gap: 3,
+        mt: 5,
+        width: "100%",
+        justify: "center",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.ThrottledButton,
+          {
+            className: "oui-w-[184px]",
+            "data-testid": "tpsl-confirm",
+            disabled: !props.isPriceChanged,
+            loading: props.isMutating,
+            onClick: () => {
+              props.onSubmit().then(() => {
+                props.onClose?.();
+              }).catch((err) => {
+              });
+            },
+            children: t("common.confirm")
+          }
+        )
+      }
+    )
+  ] });
+};
+var EditBracketOrderWidget = (props) => {
+  const state = useEditBracketOrder({ order: props.order });
+  return /* @__PURE__ */ jsxRuntime.jsx(EditBracketOrderUI, { ...state, onClose: props.close });
+};
+var EditBracketOrderSheetId = "EditBracketOrderSheetId";
+var EditBracketOrderDialogId = "EditBracketOrderDialogId";
+ui.registerSimpleSheet(EditBracketOrderSheetId, EditBracketOrderWidget);
+ui.registerSimpleDialog(EditBracketOrderDialogId, EditBracketOrderWidget, {
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+
+exports.ArrowRightIcon = ArrowRightIcon;
+exports.EditBracketOrderDialogId = EditBracketOrderDialogId;
+exports.EditBracketOrderSheetId = EditBracketOrderSheetId;
+exports.EditBracketOrderWidget = EditBracketOrderWidget;
+exports.PositionTPSLConfirm = PositionTPSLConfirm;
+exports.PositionTPSLPopover = PositionTPSLPopover;
+exports.PositionTPSLSheet = PositionTPSLSheet;
+exports.TPSL = TPSL;
+exports.TPSLAdvancedDialogId = TPSLAdvancedDialogId;
+exports.TPSLAdvancedSheetId = TPSLAdvancedSheetId;
+exports.TPSLAdvancedUI = TPSLAdvancedUI;
+exports.TPSLAdvancedWidget = TPSLAdvancedWidget;
+exports.TPSLDetailDialogId = TPSLDetailDialogId;
+exports.TPSLDetailSheetId = TPSLDetailSheetId;
+exports.TPSLDetailWidget = TPSLDetailWidget;
+exports.TPSLDialogId = TPSLDialogId;
+exports.TPSLPositionTypeWidget = TPSLPositionTypeWidget;
+exports.TPSLSheetId = TPSLSheetId;
+exports.TPSLSimpleDialogId = TPSLSimpleDialogId;
+exports.TPSLSimpleDialogUI = TPSLSimpleDialogUI;
+exports.TPSLSimpleDialogWidget = TPSLSimpleDialogWidget;
+exports.TPSLSimpleSheetId = TPSLSimpleSheetId;
+exports.TPSLWidget = TPSLWidget;
+exports.useTPSLAdvanced = useTPSLAdvanced;
+exports.useTPSLBuilder = useTPSLBuilder;
+exports.useTPSLSimpleDialog = useTPSLSimpleDialog;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map