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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -9,8 +9,3367 @@ import { Decimal, checkIsNaN, transSymbolformString, getTPSLDirection, formatNum
9
9
  import { order, positions } from '@orderly.network/perp';
10
10
  import { AuthGuardDataTable } from '@orderly.network/ui-connector';
11
11
 
12
- var H=e=>{let{t}=useTranslation(),{order:r,symbolLeverage:i}=e,{symbol:s}=r,o=useMarkPrice(s),n=useIndexPrice(s),l=useLeverageBySymbol(i?void 0:s),a=i||l;return jsxs(Flex,{direction:"column",itemAlign:"start",className:cn("oui-w-full oui-gap-3 oui-font-semibold ",e.classNames?.root),children:[jsxs(Flex,{itemAlign:"center",className:cn("oui-gap-2 ",e.classNames?.symbol),children:[jsxs(Flex,{gap:1,itemAlign:"center",children:[jsx(TokenIcon,{symbol:s,className:"oui-size-5"}),jsx(Text.formatted,{className:"oui-whitespace-nowrap oui-break-normal",rule:"symbol",formatString:"base-type",size:"sm",weight:"semibold",intensity:98,children:s})]}),jsxs(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"]})]}),jsxs(Grid,{cols:2,gapX:2,gapY:1,className:cn("oui-w-full oui-gap-x-2 ",e.classNames?.container),children:[jsxs(Flex,{justify:"between",className:" oui-text-base-contrast-36",children:[jsx(Text,{size:"2xs",children:t("common.quantity")}),jsx(Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.baseDP??2,children:Number(r.order_quantity)})]}),jsxs(Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsx(Text,{size:"2xs",children:t("common.lastPrice")}),jsx(Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:n?.data})]}),jsxs(Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsx(Text,{size:"2xs",children:t("common.orderPrice")}),jsx(Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:Number(r.order_price)})]}),jsxs(Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsx(Text,{size:"2xs",children:t("common.markPrice")}),jsx(Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:o?.data})]})]})]})};var pe=e=>{let{t}=useTranslation(),{tp_pnl:r,sl_pnl:i}=e,s=useMemo(()=>{let o=jsx(Text,{className:"oui-text-base-contrast-36",children:"-- x"});if(r===void 0||i===void 0||checkIsNaN(r)||checkIsNaN(i))return o;let n=new Decimal(r),l=new Decimal(i);if(l.isZero()||n.isZero())return o;let a=n.div(l).abs().toNumber().toFixed(2);return jsxs(Flex,{gap:1,itemAlign:"center",className:"oui-text-base-contrast-80",children:[jsx(Text,{children:a}),jsx(Text,{className:"oui-text-base-contrast-36",children:"x"})]})},[r,i]);return jsxs(Flex,{direction:"column",itemAlign:"start",className:cn("oui-w-full oui-gap-1 oui-text-2xs oui-text-base-contrast-36",e.className),children:[jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{size:"2xs",children:t("tpsl.totalEstTpPnl")}),jsx(Text.numeral,{suffix:jsx(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):"--"})]}),jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{size:"2xs",children:t("tpsl.totalEstSlPnl")}),i?jsx(Text.numeral,{suffix:jsx(Text,{className:"oui-text-base-contrast-36 oui-ml-1",children:"USDC"}),coloring:true,visible:true,size:"2xs",dp:2,children:Number(i)}):jsx(Text,{size:"2xs",children:"-- USDC"})]}),jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{size:"2xs",children:t("tpsl.riskRewardRatio")}),jsx(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=useLeverageBySymbol(e.symbolLeverage?void 0:e.symbol),n=e.symbolLeverage||o,l=useMemo(()=>{if(!n||!s||Number(s)===0)return null;let a;if(t.order_type===OrderType.MARKET?a=t.trigger_price:t.order_type===OrderType.LIMIT&&(a=t.order_price),!a)return null;try{return 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]=useLocalStorage("TP/SL_Mode","Offset%"),[o,n]=useState(true),{t:l}=useTranslation(),a=useMemo(()=>{switch(i){case "Offset":return `${t.toLowerCase()}_offset`;case "Offset%":return `${t.toLowerCase()}_offset_percentage`;default:return `${t.toLowerCase()}_pnl`}},[i]),g=useMemo(()=>r[i],[r,i]),f=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=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 Decimal(u.replace(new RegExp(p.current.replace(".","\\.")+"$"),"")).mul(100).todp(2,4).toString()}${p.current}`:(i==="Offset"&&(u=todpIfNeed(u,y)),`${u}`)),onSendBefore:u=>{if(/^\-?0{2,}$/.test(u))return "0";if(i==="Offset%"){if(u!==""){u=todpIfNeed(u,2);let P=u.match(/\.0{0,2}$/);P?p.current=P[0]:p.current="",u=new Decimal(u).div(100).toString(),u=`${u}${p.current}`;}}else i==="PnL"&&t==="SL"&&o||(u=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}=useTranslation(),[f,p]=useState(t),[c,m]=useState(t==="Offset%"?"%":o),d=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 useEffect(()=>{let y=r.find(u=>u.value===t)?.label;p(y),m(t==="Offset%"?"%":o);},[t,r]),jsx(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}),inputFormatter.currencyFormatter,inputFormatter.decimalPointFormatter],classNames:{input: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:jsxs(Fragment,{children:[t==="Offset%"&&!!l&&jsx(Text,{size:"2xs",color:"inherit",className:cn("oui-ml-[2px]",d),children:"%"}),jsx(Ro,{mode:t,modes:r,onModeChange:y=>i(y.value)})]})})},Ro=e=>jsx(SimpleDropdownMenu,{currentValue:e.mode,menu:e.modes,align:"end",size:"xs",className:"oui-min-w-[80px]",onSelect:t=>e.onModeChange(t),children:jsx("button",{className:"oui-p-2",children:jsx(CaretDownIcon,{size:12,color:"white"})})});var zt=e=>{let{testId:t,quote:r,...i}=e,s=Mt(i);return jsx(Vt,{...s,testId:t,quote:r})};var Wt=e=>{let{t}=useTranslation(),r=[{label:t("orderEntry.orderType.limitOrder"),value:OrderType.LIMIT},{label:t("orderEntry.orderType.marketOrder"),value:OrderType.MARKET}];return jsx(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={[OrderType.LIMIT]:t("orderEntry.orderType.limit"),[OrderType.MARKET]:t("common.marketPrice")}[i];return jsx(Text,{size:"2xs",children:o})}})};var it=e=>{let[t,r]=useState("USDC"),{t:i}=useTranslation();return jsx(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:[inputFormatter.numberFormatter,inputFormatter.dpFormatter(e.quote_dp),inputFormatter.currencyFormatter,inputFormatter.decimalPointFormatter]})};var st=e=>{let{t}=useTranslation(),{getErrorMsg:r}=useOrderEntryFormErrorMsg(e.errors),{values:i,positionType:s}=e;return jsxs(Flex,{direction:"column",itemAlign:"start",justify:"start",className:"oui-w-full",children:[jsx(Text,{size:"sm",intensity:98,children:e.type==="tp"?t("tpsl.takeProfit"):t("tpsl.stopLoss")}),jsxs(Flex,{direction:"column",gap:2,itemAlign:"start",className:"oui-w-full oui-pt-2",children:[jsxs(Flex,{direction:"column",itemAlign:"start",className:"oui-w-full oui-gap-0.5",children:[jsx(Text,{className:"oui-text-2xs oui-text-base-contrast-54",children:t("common.triggerPrice")}),jsxs(Grid,{cols:2,gap:2,className:"oui-w-full oui-px-0.5",children:[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}),jsx(zt,{type:e.type==="tp"?"TP":"SL",onChange:(o,n)=>{e.onChange(o,n);},quote:"USDC",quote_dp:2,values:i})]})]}),jsxs(Flex,{direction:"column",className:cn("oui-w-full oui-gap-0.5",e.hideOrderPrice?"oui-hidden":""),itemAlign:"start",children:[jsx(Text,{className:"oui-text-2xs oui-text-base-contrast-54",children:t("common.orderPrice")}),jsxs(Grid,{cols:2,gap:2,className:"oui-w-full oui-px-0.5",children:[jsx(it,{disabled:s===PositionType.FULL||i.order_type===OrderType.MARKET,type:"order price",label:i.order_type===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}),jsx(Wt,{disabled:s===PositionType.FULL||e.disableOrderTypeSelector,type:i.order_type,onChange:o=>{e.onChange(`${e.type}_order_type`,o);}})]})]})]}),jsx(Go,{price:i.order_type===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}=useTranslation(),{price:r,pnl:i,roi:s,dp:o,className:n,orderType:l}=e;return !s||!r||!i?null:jsx(Text,{className:cn("oui-text-2xs oui-text-base-contrast-36",n),children:jsx(Trans,{i18nKey:"tpsl.advanced.ROI",components:[jsx(Fragment$1,{children:jsx(Text.numeral,{className:"oui-px-1 oui-text-base-contrast",dp:o,suffix:jsx(Text,{className:"oui-pl-0.5",children:"USDC"}),children:r})},"price"),jsx(Fragment$1,{children:jsx(Text,{className:"oui-px-1 oui-text-base-contrast",children:l===OrderType.MARKET?t("common.market"):t("common.limit")})},"orderType"),jsx(Fragment$1,{children:jsx(Text.numeral,{coloring:true,className:"oui-whitespace-nowrap oui-px-1",dp:2,suffix:jsx(Text,{className:"oui-pl-0.5",children:"USDC"}),children:i})},"pnl"),jsx(Fragment$1,{children:jsx(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 jsx(st,{...t})};var Ht=e=>({value:e.value,onChange:e.onChange,disableSelector:e.disableSelector});var Jo="position_type",Zt=e=>{let{t}=useTranslation(),r=[{label:t("tpsl.partialPosition"),value:PositionType.PARTIAL},{label:t("tpsl.fullPosition"),value:PositionType.FULL}];return jsxs(Flex,{gap:1,itemAlign:"center",justify:"start",children:[jsx(Tooltip,{className:"oui-w-[280px] oui-p-3",content:e.value===PositionType.FULL?t("tpsl.positionType.full.tips"):t("tpsl.positionType.partial.tips"),children:jsx(ExclamationFillIcon,{className:"oui-cursor-pointer oui-text-base-contrast-54",size:12})}),e.disableSelector?e.value===PositionType.FULL?jsx(Text,{className:"oui-text-2xs oui-font-normal oui-text-base-contrast-54",children:t("tpsl.positionType.full")}):jsx(Text,{className:"oui-text-2xs oui-font-normal oui-text-base-contrast-54",children:t("tpsl.positionType.partial")}):jsx(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 jsx(Zt,{...t})};var Me=memo(e=>{let{maxQty:t,base_dp:r,baseTick:i,quantity:s}=e,o=useRef(null),{t:n}=useTranslation(),[l,a]=useState(0),g=c=>{let m=c;Number(c)>t&&(m=t.toString()),i>0&&e.onQuantityChange?.(utils.formatNumber(m,i)??c);},f=c=>{a(c);let m=new Decimal(c).div(100).mul(t).toFixed(r,Decimal.ROUND_DOWN);g(m);};useEffect(()=>{let c=Math.min(Number(s||0),t),m=new Decimal(c).div(t).mul(100).toDecimalPlaces(2,Decimal.ROUND_DOWN).toNumber();a(m);},[s,t]);let p=e.quantity.toString().length>0?e.errorMsg:void 0;return jsxs(Fragment,{children:[jsx(Flex,{gap:2,children:jsx("div",{className:"oui-flex-1",children:jsx(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: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:[inputFormatter.dpFormatter(e.base_dp),inputFormatter.numberFormatter,inputFormatter.currencyFormatter,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:jsx("span",{className:"oui-px-3 oui-text-2xs oui-text-base-contrast-54",children:e.base})})})}),jsx(Flex,{mt:2,itemAlign:"center",height:"15px",children:jsx(Slider,{min:0,max:100,markCount:5,showTip:true,value:[l],color:"primary",onValueChange:c=>{f(c[0]);}})}),jsxs(Flex,{justify:"between",children:[jsx(Text.numeral,{color:"primary",size:"2xs",suffix:"%",children:l}),jsxs(Flex,{itemAlign:"center",gap:1,children:[jsx("button",{className:"oui-leading-none",style:{lineHeight:0},onClick:()=>{e.onQuantityChange?.(e.maxQty);},children:jsx(Text,{color:"primary",size:"2xs",children:n("common.max")})}),jsx(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}=useTranslation(),{isMobile:c}=useScreen(),{getErrorMsg:m}=useOrderEntryFormErrorMsg(g);if(!n)return null;let d=t.tp_trigger_price||t.sl_trigger_price,y=()=>t.position_type===PositionType.FULL?null:jsx(Box,{className:"oui-px-0.5",children: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 jsxs("div",{id:"orderly-tp_sl-order-edit-content",children:[jsx(ScrollArea,{className:cn(c&&"oui-h-[calc(100vh-200px)]"),children:jsxs("div",{className:"oui-px-2",children:[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}),jsxs(Flex,{direction:"column",justify:"start",itemAlign:"start",gap:3,className:"oui-mb-3 oui-w-full",children:[!a&&jsx(Y,{disableSelector:true,value:t.position_type??PositionType.PARTIAL,onChange:(u,P)=>{e.setOrderValue(u,P);}}),t.position_type===PositionType.FULL&&jsx(Text,{className:"oui-text-2xs oui-text-warning",children:p("tpsl.positionType.full.tips.market")})]}),y(),jsxs(Flex,{direction:"column",itemAlign:"start",justify:"start",gap:6,className:"oui-mt-3 oui-w-full",children:[jsx(z,{symbol:n.symbol,rootOrderPrice:n.average_open_price.toString(),type:"tp",side:n.position_qty>0?OrderSide.BUY: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??OrderType.MARKET},hideOrderPrice:t.position_type===PositionType.FULL,errors:f?g:null,disableOrderTypeSelector:a,quote_dp:r("quote_dp"),positionType:t.position_type??PositionType.PARTIAL,onChange:(u,P)=>{e.setOrderValue(u,P);},symbolLeverage:n.leverage}),jsx(z,{symbol:n.symbol,rootOrderPrice:n.average_open_price.toString(),type:"sl",side:n.position_qty>0?OrderSide.BUY: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??OrderType.MARKET},hideOrderPrice:t.position_type===PositionType.FULL,errors:f?g:null,quote_dp:r("quote_dp"),positionType:t.position_type??PositionType.PARTIAL,disableOrderTypeSelector:a,onChange:(u,P)=>{e.setOrderValue(u,P);},symbolLeverage:n.leverage})]}),jsx(pe,{tp_pnl:t.tp_pnl,sl_pnl:t.sl_pnl,className:"oui-my-3"})]})}),jsxs(Grid,{px:2,cols:2,gap:3,mt:4,children:[jsx(Button,{size:"md",color:"secondary","data-testid":"tpsl-cancel",onClick:()=>{e.close?.(),i?.();},children:p("common.cancel")}),jsx(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}=useTranslation();return t&&r?jsx(Badge,{size:"xs",color:"neutral",children:i("common.tpsl")}):t?jsx(Badge,{size:"xs",color:"neutral",children:i("tpsl.tp")}):r?jsx(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}=useTranslation(),[m,d]=useLocalStorage("orderly_order_confirm",true),y=()=>p.position_type===PositionType.FULL?jsx(Text,{children:c("tpsl.positionType.full")}):jsx(Text,{children:c("tpsl.positionType.partial")}),u=({price:N,isOrderPrice:O,isEnable:w,colorType:oe})=>w?!N&&O?jsx(Text,{className:"oui-text-base-contrast-36",children:c("common.market")}):jsx(Text.numeral,{unit:"USDC",rule:"price",className: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}):jsx(Text,{className:"oui-text-base-contrast-36",children:"-- USDC"}),P=f;return jsxs(Fragment,{children:[g&&jsx(Text,{as:"div",size:"2xs",intensity:80,className:"oui-mb-3",children:c("tpsl.agreement",{symbol:transSymbolformString(t)})}),jsxs(Flex,{pb:4,children:[jsx(Box,{grow:true,children:jsx(Text.formatted,{rule:"symbol",formatString:"base-type",size:"base",showIcon:true,as:"div",intensity:80,children:t})}),jsxs(Flex,{gap:1,children:[P&&jsx(Badge,{size:"xs",color:"primary",children:c("common.position")}),jsx(hi,{tpPrice:r,slPrice:i}),n===OrderSide.SELL?jsx(Badge,{size:"xs",color:"success",children:c("common.buy")}):jsx(Badge,{size:"xs",color:"danger",children:c("common.sell")})]})]}),jsx(Divider,{}),p.tp_trigger_price||p.sl_trigger_price?jsxs(Fragment,{children:[jsx(Divider,{className:"oui-my-4"}),jsxs("div",{className:textVariants({size:"sm",intensity:54,className:"oui-space-y-1 oui-w-full oui-flex oui-flex-col oui-gap-3"}),children:[jsx(Text,{className:"oui-text-base-contrast",children:y()}),jsxs(Flex,{justify:"between",children:[jsx(Text,{children:c("common.orderQty")}),jsx(Text.numeral,{rule:"price",dp:a,padding:false,className:"oui-text-base-contrast",children:p.quantity??"-"})]}),jsxs(Flex,{direction:"column",justify:"between",itemAlign:"start",gap:1,className:"oui-w-full",children:[jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{children:c("tpsl.tpTriggerPrice")})," ",u({price:p.tp_trigger_price??"",isOrderPrice:false,isEnable:!!p.tp_trigger_price,colorType:"TP"})]}),jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{children:c("tpsl.tpOrderPrice")}),u({price:p.tp_order_price??"",isOrderPrice:true,isEnable:!!p.tp_trigger_price,colorType:"TP"})]})]}),jsxs(Flex,{direction:"column",justify:"between",itemAlign:"start",gap:1,className:"oui-w-full",children:[jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{children:c("tpsl.slTriggerPrice")}),u({price:p.sl_trigger_price??"",isOrderPrice:false,isEnable:!!p.sl_trigger_price,colorType:"SL"})]}),jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{children:c("tpsl.slOrderPrice")}),u({price:p.sl_order_price??"",isOrderPrice:true,isEnable:!!p.sl_trigger_price,colorType:"SL"})]})]})]})]}):null,jsx(Box,{pt:2,children:jsxs(Flex,{gap:1,children:[jsx(Checkbox,{id:"disabledConfirm",color:"white",checked:!m,onCheckedChange:N=>{d(!N);}}),jsx("label",{htmlFor:"disabledConfirm",className: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}=useTranslation();if(i&&!r)throw new SDKError("order is required when isEditing is true");let g=useSymbolsInfo();useRef(AlgoOrderRootType.TP_SL);let [{rows:p}]=usePositionStream(),[c]=useLocalStorage("orderly_order_confirm",true),m=p.find(x=>x.symbol===t);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}]=useTPSLOrder({symbol:t,position_qty:m?.position_qty??0,average_open_price:m?.average_open_price??0},{defaultOrder:r,positionType:o?PositionType.PARTIAL:s,isEditing:i}),Xe=x=>{P("quantity",x);},k=(x,L)=>{P(x,L);},h=(x,L)=>{P(x,L);},vt=useMemo(()=>Math.abs(Number(m?.position_qty)),[m?.position_qty]);useMemo(()=>{let x=r?.algo_type===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}=utils.findTPSLFromOrder(r),{tp_order_price:Ft,sl_order_price:wt}=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!==OrderType.MARKET&&Ft!==Number(d.tp_order_price)&&(L=4),typeof d.sl_order_price<"u"&&wt!==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]);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?modal.confirm({title:a("orders.cancelOrder"),content:a("tpsl.cancelOrder.description"),onOk:()=>L.cancel()}).then(()=>true,()=>Promise.reject(false)):modal.confirm({title:a("tpsl.confirmOrder"),onOk:async()=>{try{let G=await L.submit({accountId:m?.account_id});return G.success?G:(G.message&&toast.error(G.message),!1)}catch(G){return G?.message&&toast.error(G.message),false}},classNames:{body:"!oui-pb-0"},content:jsx(Ie,{isPositionTPSL:s===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&&toast.error(L.message),!1})}catch(x){return Promise.reject(x)}};return {isEditing:i,symbolInfo:g[t],maxQty:vt,setQuantity: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 jsx(er,{...s,onCancel:t,onComplete:r,close:i.close})},Be="TPSLSheetId",ge="TPSLDialogId";registerSimpleSheet(Be,Ae);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]=useLocalStorage("orderly_order_confirm",true),{t:a}=useTranslation(),g=n?r?.algo_type===AlgoOrderRootType.POSITIONAL_TP_SL:void 0;return jsx(Box,{onClick:()=>{modal.show(ge,{order:r,symbol:t.symbol,baseDP:i,quoteDP:s,positionType:g?PositionType.FULL:PositionType.PARTIAL,isEditing:n});},className:"oui-cursor-pointer",children:e.children||jsx(Button,{variant:"outlined",size:"sm",color:"secondary",...o,children:e.label})})};var Yi=e=>{let{order:t,isEditing:r}=e,{hide:i}=useModal(),s=r?t?.algo_type===AlgoOrderRootType.POSITIONAL_TP_SL:void 0;return jsx(Ae,{...e,positionType:e.positionType??(s?PositionType.FULL:PositionType.PARTIAL),onCancel:i})};var xr=e=>{let{t}=useTranslation(),{errors:r,validated:i}=e.metaState,{formattedOrder:s,setValue:o,symbolInfo:n,setValues:l}=e,[a,g]=useState({enable:false,order_type:s.tp_order_type??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]=useState({enable:false,order_type:s.sl_order_type??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??""});useEffect(()=>{g(m=>({...m,order_type:s.tp_order_type??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]),useEffect(()=>{p(m=>({...m,order_type:s.sl_order_type??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 jsxs("div",{className:"oui-flex oui-h-full oui-flex-col oui-justify-between oui-rounded-[16px] oui-py-3",children:[jsx("div",{className:"oui-px-3",children:jsxs(Flex,{className:"oui-mb-5 oui-cursor-pointer oui-text-base oui-text-base-contrast-80",gap:1,itemAlign:"center",onClick:e.onClose,children:[jsx(ts,{className:" oui-text-base-contrast-80"}),jsx(Text,{children:t("common.tpsl")})]})}),jsxs(ScrollArea,{className:"oui-flex-1",children:[jsx("div",{className:"oui-px-3",children:jsx(H,{order:s,baseDP:n.base_dp,quoteDP:n.quote_dp,symbolLeverage:e.symbolLeverage})}),jsx(Divider,{className:"oui-my-3"}),jsxs("div",{className:"oui-px-3",children:[jsxs(Flex,{className:"oui-gap-[6px]",children:[jsx(Button,{onClick:()=>{o("side",OrderSide.BUY);},size:"sm",fullWidth:true,"data-type":OrderSide.BUY,className:cn(s.side===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")}),jsx(Button,{onClick:()=>{o("side",OrderSide.SELL);},"data-type":OrderSide.SELL,fullWidth:true,size:"sm",className:cn(s.side===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")})]}),jsxs("div",{className:"oui-py-3",children:[jsx(Y,{value:s.position_type??PositionType.PARTIAL,onChange:(m,d)=>{if(d===PositionType.FULL){l({position_type:PositionType.FULL,tp_order_type:OrderType.MARKET,tp_order_price:void 0,sl_order_type:OrderType.MARKET,sl_order_price:void 0});return}o("position_type",d);}}),s.position_type===PositionType.FULL&&jsxs(Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-3 oui-w-full",children:[jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]"}),jsx(Text,{className:"oui-text-2xs oui-text-[#D25f00]",children:t("tpsl.positionType.full.tips.market")})]})]}),jsxs(Flex,{direction:"column",gap:6,children:[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===PositionType.FULL,onChange:(m,d)=>{o(m,d);},positionType:s.position_type??PositionType.PARTIAL,symbolLeverage:e.symbolLeverage}),jsx(z,{rootOrderPrice:s.order_price,symbol:n.symbol,type:"sl",side:s.side,values:f,hideOrderPrice:s.position_type===PositionType.FULL,errors:i?r:null,quote_dp:n.quote_dp,positionType:s.position_type??PositionType.PARTIAL,onChange:(m,d)=>{o(m,d);},symbolLeverage:e.symbolLeverage})]}),jsx(pe,{tp_pnl:s.tp_pnl,sl_pnl:s.sl_pnl,className:"oui-mt-6"})]})]}),jsxs(Flex,{className:"oui-mt-6 oui-px-3",gap:2,children:[jsx(Button,{size:"md",fullWidth:true,color:"gray",variant:"outlined",className:"oui-text-base-contrast-36",onClick:e.onClose,children:t("common.cancel")}),jsx(Button,{size:"md",fullWidth:true,color:"success",className:cn(s.side===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=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"currentColor",...e,children: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]=useState(null),{formattedOrder:n,setValue:l,setValues:a,helper:g,symbolInfo:f,metaState:p,...c}=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??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 jsx(xr,{...t})},ls="TPSLAdvancedSheetId",as="TPSLAdvancedDialogId";registerSimpleSheet(ls,Or,{title:()=>i18n.t("common.settings")});registerSimpleDialog(as,Or,{title:()=>i18n.t("common.settings")});var Ir=e=>{let{position:t}=e,r=t.symbol,i=useSymbolsInfo()[r],{isMobile:s}=useScreen(),{t:o}=useTranslation(),[n,l]=useState([]),[a,g]=useState([]),[f,{cancelAlgoOrder:p,cancelPostionOrdersByTypes:c,refresh:m}]=useOrderStream({symbol:t.symbol,status:OrderStatus.INCOMPLETE,includes:[AlgoOrderRootType.POSITIONAL_TP_SL,AlgoOrderRootType.TP_SL],size:500},{keeplive:true}),d=async O=>await p(O.algo_order_id,O.symbol),y=async()=>await c(r,[AlgoOrderRootType.TP_SL]),u=({order:O,positionType:w,isEditing:oe})=>{let xe=s?Be:ge;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 useEffect(()=>{if(f){let{fullPositionOrder:O,partialPositionOrders:w}=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=createContext({}),Nr=e=>{let t=useSymbolsInfo()[e.symbol];return jsx(Ar.Provider,{value:{base_dp:t("base_dp"),quote_dp:t("quote_dp"),position:e.position},children:e.children})},X=()=>useContext(Ar);var C=e=>jsx(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}=findTPSLFromOrder(e),n,l,a=new Decimal(e.quantity).eq(0)?t.position_qty:e.quantity,g=t.position_qty>0?OrderSide.BUY:OrderSide.SELL,f=t?.average_open_price;if(s){let p=getTPSLDirection({side:g,type:"tp",closePrice:s,orderPrice:f});n=formatNum.pnl(positions.unrealizedPnL({qty:a,openPrice:f,markPrice:s}))?.abs().mul(p).toNumber();}if(o){let p=getTPSLDirection({side:g,type:"sl",closePrice:o,orderPrice:f});l=formatNum.pnl(positions.unrealizedPnL({qty:a,openPrice:f,markPrice:o}))?.abs().mul(p).toNumber();}return jsxs(Flex,{gap:2,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[n&&jsx(C,{children:jsx(Text.numeral,{dp:2,rm:Decimal.ROUND_DOWN,coloring:true,padding:false,children:n})}),l&&jsx(C,{children:jsx(Text.numeral,{dp:2,rm: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}=findTPSLOrderPriceFromOrder(e),{t:s}=useTranslation();return jsxs(Flex,{gap:2,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[r&&jsx(C,{children:r===OrderType.MARKET?jsx(Text,{children:s("common.market")}):jsx(Text.numeral,{dp:t,rm:Decimal.ROUND_DOWN,padding:false,children:r})}),i&&jsx(C,{children:i===OrderType.MARKET?jsx(Text,{children:s("common.market")}):jsx(Text.numeral,{dp:t,rm: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}=findTPSLFromOrder(e),o=useMemo(()=>e.quantity===0?-t.position_qty:t.position_qty>0?-e.quantity:e.quantity,[e.quantity,t.position_qty]);return jsxs(Flex,{direction:"column",justify:"start",itemAlign:"start",className:"oui-h-full oui-text-2xs",children:[jsx(C,{children:jsx(Text.numeral,{dp:r,rm:Decimal.ROUND_DOWN,padding:false,children:o})}),i&&s&&jsx(C,{children:jsx("div",{})})]})};var Pt=({order:e})=>{let{quote_dp:t}=X(),{tp_trigger_price:r,sl_trigger_price:i}=findTPSLFromOrder(e),{t:s}=useTranslation();return jsxs(Flex,{gap:1,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[r&&jsx(C,{children:jsxs(Flex,{direction:"column",justify:"start",itemAlign:"start",children:[jsx(Text,{className:"oui-text-base-contrast-36",children:s("common.market")}),jsx(Text.numeral,{dp:t,rm:Decimal.ROUND_DOWN,padding:false,children:r})]})}),i&&jsx(C,{children:jsxs(Flex,{direction:"column",justify:"start",itemAlign:"start",children:[jsx(Text,{className:"oui-text-base-contrast-36",children:s("common.market")}),jsx(Text.numeral,{dp:t,rm:Decimal.ROUND_DOWN,padding:false,children:i})]})})]})};var _t=({order:e})=>{let{tp_trigger_price:t,sl_trigger_price:r}=findTPSLFromOrder(e),{t:i}=useTranslation();return jsxs(Flex,{direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[t&&jsx(C,{children:jsx(Text,{className:"oui-text-trade-profit",children:i("tpsl.tp")})}),r&&jsx(C,{children:jsx(Text,{className:"oui-text-trade-loss",children:i("tpsl.sl")})})]})};var Ge=e=>{let{t}=useTranslation(),{isMobile:r}=useScreen(),{onCancelOrder:i}=e;return useMemo(()=>{let o=[{title:t("tpsl.tpslDetail.qty"),dataIndex:"quantity",width:70,className:"oui-py-2",render:(l,a)=>jsx(gt,{order:a})},{title:t("common.type"),dataIndex:"type",width:35,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsx(_t,{order:a})},{title:t("common.trigger"),dataIndex:"trigger",width:70,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsx(Pt,{order:a})},{title:t("common.price"),dataIndex:"price",width:70,className:"oui-py-2",render:(l,a)=>jsx(mt,{order:a})},{title:jsx(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:jsx(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)=>jsx(ct,{order:a})}],n=[{title:t("tpsl.tpslDetail.qty"),dataIndex:"quantity",width:70,className:cn(" oui-py-2 !oui-pl-5"),render:(l,a)=>jsx(gt,{order:a})},{title:t("common.type"),dataIndex:"type",width:35,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsx(_t,{order:a})},{title:t("common.trigger"),dataIndex:"trigger",width:70,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsx(Pt,{order:a})},{title:t("common.price"),dataIndex:"price",width:70,className:"oui-pl-1 oui-py-2",render:(l,a)=>jsx(mt,{order:a})},{title:jsx(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:jsx(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)=>jsx(ct,{order:a})},{title:"",dataIndex:"delete",width:50,className:cn("oui-py-2 !oui-pr-5"),render:(l,a)=>jsx(Ys,{order:a,onCancelOrder:i})}];return r?o:n},[t,r])};var Hs=e=>{let{size:t=18}=e;return jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 18 18",fill:"currentColor",...e,children: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]=useState(false);return jsx(ThrottledButton,{size:"sm",loading:t,variant:"text",color:"gray",onClick:i=>{i.stopPropagation(),r(true),e.onCancelOrder?.(e.order).then(()=>{},s=>{toast.error(s.message);}).finally(()=>{r(false);});},children: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 jsx(AuthGuardDataTable,{columns:r,dataSource:t,className:"oui-bg-transparent oui-text-2xs",bordered:true,classNames:{root:cn(e.className),header:"!oui-bg-base-8",scroll:cn(!t||t.length===0?"!oui-min-h-[170px]":"!oui-min-h-[100px]")},onRow:i=>({className:cn("oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"),onClick:()=>{e.editTPSLOrder(i);}})})};var bt=e=>{let{t}=useTranslation(),{orders:r}=e,i=Ge({onCancelOrder:()=>Promise.resolve()}),s=useMemo(()=>r.reduce((o,n)=>(o[n.algo_order_id]=true,o),{}),[r]);return jsx(AuthGuardDataTable,{columns:i,dataSource:r,expanded:s,bordered:true,getRowCanExpand:()=>true,expandRowRender:o=>jsxs(Flex,{gap:2,justify:"end",children:[jsx(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")}),jsx(ln,{order:o.original,onCancelOrder:e.canCancelOrder})]}),className:"oui-bg-transparent oui-px-2 oui-text-2xs",classNames:{scroll:cn(!r||r.length===0?"!oui-min-h-[170px]":"!oui-min-h-[100px]")},onRow:()=>({className: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]=useState(false),{t:i}=useTranslation();return jsx(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=>{toast.error(o.message);}).finally(()=>{r(false);});},children:i("common.delete")})};var Wr=e=>{let{isMobile:t}=useScreen(),{position:r,fullPositionOrders:i,partialPositionOrders:s,onCancelOrder:o,onCancelAllTPSLOrders:n,editTPSLOrder:l,addTPSLOrder:a,symbolInfo:g}=e;return jsx(Box,{children:jsxs(ScrollArea,{className:cn(t&&"oui-h-[calc(100vh-100px)]"),children:[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:cn("oui-mb-6 oui-gap-3 oui-px-5"),container:"oui-gap-x-[30px]"}}),jsx(gn,{position:r,orders:i,onCancelOrder:o,onCancelAllTPSLOrders:n,editTPSLOrder:l,addTPSLOrder:a}),jsx(fn,{position:r,orders:s,onCancelOrder:o,onCancelAllTPSLOrders:n,editTPSLOrder:l,addTPSLOrder:a})]})})},gn=e=>{let[t,r]=useState(true),{orders:i}=e,{isMobile:s}=useScreen();return jsxs(Box,{className:"oui-mt-6",children:[jsxs(Box,{className:cn("oui-flex oui-items-center oui-justify-between oui-px-5"),children:[jsx(Kr,{positionType:PositionType.FULL,open:t,onOpenChange:r}),i&&i.length===0&&jsx(Flex,{gap:2,children:jsx(Gr,{positionType:PositionType.FULL,position:e.position,addTPSLOrder:e.addTPSLOrder})})]}),jsx(Box,{className:cn("oui-overflow-hidden oui-transition-[height] oui-duration-150",t?"oui-h-auto":"oui-h-0 oui-pb-4"),children:s?jsx(bt,{orders:i,editTPSLOrder:o=>e.editTPSLOrder(o,PositionType.FULL),canCancelOrder:e.onCancelOrder}):jsx(xt,{orders:i,editTPSLOrder:o=>{e.editTPSLOrder(o,PositionType.FULL);},onCancelOrder:e.onCancelOrder})})]})},fn=e=>{let[t,r]=useState(true),{orders:i}=e,{isMobile:s}=useScreen();return jsxs(Box,{className:"oui-pt-6",children:[jsxs(Box,{className: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:[jsx(Kr,{positionType:PositionType.PARTIAL,open:t,onOpenChange:r}),jsxs(Flex,{gap:2,children:[jsx(Gr,{positionType:PositionType.PARTIAL,position:e.position,addTPSLOrder:e.addTPSLOrder}),i&&i.length>0&&jsx(yn,{canCancelAll:i&&i.length>0,onCancelAllTPSLOrders:e.onCancelAllTPSLOrders})]})]}),jsx(Box,{className:cn("oui-overflow-hidden oui-transition-[height] oui-duration-150",t?"oui-h-auto":"oui-h-0 oui-pb-4"),children:s?jsx(bt,{orders:i,editTPSLOrder:o=>e.editTPSLOrder(o,PositionType.PARTIAL),canCancelOrder:e.onCancelOrder}):jsx(xt,{className:"oui-h-[300px]",orders:i,editTPSLOrder:o=>{e.editTPSLOrder(o,PositionType.PARTIAL);},onCancelOrder:e.onCancelOrder})})]})},Kr=e=>{let{t}=useTranslation();return jsxs(Flex,{gap:1,itemAlign:"center",justify:"start",className:"oui-text-2xs",children:[jsxs(Flex,{itemAlign:"center",justify:"start",gap:1,className:"oui-cursor-pointer",onClick:()=>e.onOpenChange(!e.open),children:[jsx(ChevronDownIcon,{size:12,color:"white",className:cn("oui-cursor-pointer oui-transition-transform",e.open&&"oui-rotate-180")}),e.positionType===PositionType.FULL?jsx(Text,{children:t("tpsl.positionType.full")}):jsx(Text,{children:t("tpsl.positionType.partial")})]}),jsx(Tooltip,{className:"oui-w-[280px] oui-p-3",content:e.positionType===PositionType.FULL?t("tpsl.positionType.full.tips"):t("tpsl.positionType.partial.tips"),children:jsx(ExclamationFillIcon,{className:"oui-cursor-pointer oui-text-base-contrast-54",size:12})})]})},Gr=e=>{let{t}=useTranslation();return jsx(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]=useState(false),{t:i}=useTranslation();return jsx(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=>{toast.error(s.message);}).finally(()=>{r(false);});},children:i("tpsl.cancelAll")})};var jr=e=>{let t=Ir(e);return jsx(Nr,{symbol:e.position.symbol,position:e.position,children:jsx(Wr,{...t})})},Tn="TPSLDetailDialogId ",xn="TPSLDetailSheetId";registerSimpleDialog(Tn,jr,{classNames:{content:"oui-w-[420px] lg:oui-pt-4 lg:oui-pb-2 !oui-px-0",body:"lg:oui-py-0"}});registerSimpleSheet(xn,jr,{classNames:{content:"!oui-p-0"}});var At=e=>{let {type:t,triggerPrice:r,symbol:i}=e,s=useSymbolsInfo(),[{rows:o},n]=usePositionStream(i),l=o?.[0];useRef(AlgoOrderRootType.TP_SL);let [g]=useLocalStorage("orderly_order_confirm",true),{t:f}=useTranslation(),[p,{submit:c,deleteOrder:m,setValue:d,setValues:y,validate:u,errors:P,isCreateMutating:N,isUpdateMutating:O}]=useTPSLOrder({symbol:i,position_qty:l?.position_qty,average_open_price:l?.average_open_price},{defaultOrder:void 0,positionType:PositionType.PARTIAL,isEditing:false}),w=k=>{d("quantity",k);},oe=(k,h)=>{d(k,h);},xe=(k,h)=>{d(k,h);},ie=useMemo(()=>Math.abs(Number(l.position_qty)),[l.position_qty]);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?modal.confirm({title:f("tpsl.confirmOrder"),onOk:async()=>{try{let h=await c({accountId:l.account_id});return h.success?h:(h.message&&toast.error(h.message),!1)}catch(h){return h?.message&&toast.error(h.message),!1}},classNames:{body:"!oui-pb-0"},content: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&&toast.error(h.message),!1})}catch(k){return Promise.reject(k)}};return {symbolInfo:s[i],maxQty:ie,setQuantity: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}=useTranslation(),{getErrorMsg:n}=useOrderEntryFormErrorMsg(i),l=jsxs(Flex,{width:"100%",itemAlign:"center",gap:3,mt:4,children:[jsx(Button,{color:"gray",onClick:()=>{e.onComplete?.(),e.close?.();},fullWidth:true,className:"oui-text-sm",size:"md",children:o("common.cancel")},"secondary"),jsx(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?jsxs(Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-2 oui-w-full",children:[jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-danger"}),jsx(Text,{className:"oui-text-danger",children:c})]}):null},g=()=>{let{tp_pnl:f,sl_pnl:p}=s;return t==="sl"?jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{size:"2xs",children:o("tpsl.totalEstSlPnl")}),p?jsx(Text.numeral,{suffix:jsx(Text,{className:"oui-ml-1 oui-text-base-contrast-36",children:"USDC"}),coloring:true,visible:true,size:"2xs",dp:2,children:Number(p)}):jsx(Text,{size:"2xs",children:"-- USDC"})]}):jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{size:"2xs",children:o("tpsl.totalEstTpPnl")}),jsx(Text.numeral,{suffix:jsx(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 jsxs(Box,{className:"oui-w-full oui-px-0.5",children:[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}),jsxs(Flex,{direction:"column",itemAlign:"start",className:cn("oui-mt-4 oui-w-full oui-gap-1 oui-text-xs oui-text-base-contrast-36"),children:[jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{size:"xs",children:o("common.triggerPrice")}),jsx(Text.numeral,{className:"oui-text-base-contrast",suffix:jsx(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):"--"})]}),jsxs(Flex,{justify:"between",className:"oui-w-full",children:[jsx(Text,{size:"xs",children:o("common.orderPrice")}),jsx(Text,{className:"oui-text-base-contrast",size:"xs",children:o("common.market")})]}),g()]}),a(),jsx(Divider,{className:"oui-my-3 oui-w-full"}),jsx(Flex,{itemAlign:"center",onClick:()=>{e.close?.(),e.showAdvancedTPSLDialog?.({qty:Number(s.quantity)});},className:"oui-pb-4",children:jsx(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 jsx(Nt,{...s,close:t,onComplete:r,showAdvancedTPSLDialog:i})},Yr="TPSLSimpleSheetId",Zr="TPSLSimpleDialogId";registerSimpleSheet(Yr,ht,{classNames:{}});registerSimpleDialog(Zr,ht,{classNames:{content:"oui-w-[420px]"}});function jn(e){let t=e.child_orders[0],r=t.algo_type===AlgoOrderRootType.TP_SL?PositionType.PARTIAL:PositionType.FULL,i=t.child_orders.find(n=>n.algo_type===AlgoOrderType.TAKE_PROFIT&&n.trigger_price),s=t.child_orders.find(n=>n.algo_type===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===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===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 Decimal(Number(e));return !new Decimal(Number(t)).eq(r)}var eo=e=>{if(!e.order)throw new SDKError("order is required for editBracketOrder");let{baseInfo:t,tpslPriceInfo:r,tpInfo:i,slInfo:s}=jn(e.order),[o,{isMutating:n}]=useMutation("/v1/algo/order","PUT"),{formattedOrder:l,setValue:a,setValues:g,metaState:f,symbolInfo:p,helper:c}=useOrderEntry(e.order.symbol,{initialOrder:t}),m=e.order.symbol,d=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 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:AlgoOrderType.TAKE_PROFIT,trigger_price:l.tp_trigger_price,reduce_only:true};l.tp_order_type===OrderType.LIMIT&&(u.price=l.tp_order_price);let P={order_id:s.orderId,algo_type:AlgoOrderType.STOP_LOSS,trigger_price:l.sl_trigger_price,reduce_only:true};l.sl_order_type===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}=useTranslation(),{errors:r,validated:i}=e.metaState,{isMobile:s}=useScreen(),{formattedOrder:o,setValue:n,symbol:l,symbolInfo:a,setValues:g}=e,[f,p]=useState({order_type:o.tp_order_type??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]=useState({order_type:o.sl_order_type??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 useEffect(()=>{p(d=>({...d,order_type:o.tp_order_type??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]),useEffect(()=>{m(d=>({...d,order_type:o.sl_order_type??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]),jsxs("div",{children:[jsxs(ScrollArea,{className:cn("oui-flex-1",s&&"oui-h-[calc(100vh-200px)]"),children:[jsx("div",{className:"",children:jsx(H,{order:{symbol:l,order_quantity:o.order_quantity,order_price:o.order_price},baseDP:a.base_dp,quoteDP:a.quote_dp})}),jsx(Divider,{className:"oui-my-3"}),jsxs("div",{className:"",children:[jsxs("div",{className:"oui-py-3",children:[jsx(Y,{value:o.position_type??PositionType.PARTIAL,disableSelector:true,onChange:(d,y)=>{if(y===PositionType.FULL){g({position_type:PositionType.FULL,tp_order_type:OrderType.MARKET,tp_order_price:void 0,sl_order_type:OrderType.MARKET,sl_order_price:void 0});return}n("position_type",y);}}),o.position_type===PositionType.FULL&&jsxs(Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-3 oui-w-full",children:[jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]"}),jsx(Text,{className:"oui-text-2xs oui-text-[#D25f00]",children:t("tpsl.positionType.full.tips.market")})]})]}),jsxs(Flex,{direction:"column",gap:6,children:[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===PositionType.FULL,onChange:(d,y)=>{n(d,y);},positionType:o.position_type??PositionType.PARTIAL}),jsx(Divider,{className:"oui-w-full"}),jsx(z,{disableEnableCheckbox:true,disableOrderTypeSelector:true,rootOrderPrice:o.order_price,symbol:a.symbol,type:"sl",side:o.side,values:c,hideOrderPrice:o.position_type===PositionType.FULL,errors:i?r:null,quote_dp:a.quote_dp,positionType:o.position_type??PositionType.PARTIAL,onChange:(d,y)=>{n(d,y);}})]}),jsx(pe,{tp_pnl:o.tp_pnl,sl_pnl:o.sl_pnl,className:"oui-mt-6"})]})]}),jsx(Flex,{itemAlign:"center",gap:3,mt:5,width:"100%",justify:"center",children:jsx(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 jsx(io,{...t,onClose:e.close})},ol="EditBracketOrderSheetId",il="EditBracketOrderDialogId";registerSimpleSheet(ol,so);registerSimpleDialog(il,so,{classNames:{content:"oui-w-[420px]"}});
12
+ // src/editorPopover.tsx
13
+ var OrderInfo = (props) => {
14
+ const { t } = useTranslation();
15
+ const { order: order2, symbolLeverage } = props;
16
+ const { symbol } = order2;
17
+ const markPrice = useMarkPrice(symbol);
18
+ const indexPrice = useIndexPrice(symbol);
19
+ const leverage = useLeverageBySymbol(symbolLeverage ? void 0 : symbol);
20
+ const currentLeverage = symbolLeverage || leverage;
21
+ return /* @__PURE__ */ jsxs(
22
+ Flex,
23
+ {
24
+ direction: "column",
25
+ itemAlign: "start",
26
+ className: cn(
27
+ "oui-w-full oui-gap-3 oui-font-semibold ",
28
+ props.classNames?.root
29
+ ),
30
+ children: [
31
+ /* @__PURE__ */ jsxs(
32
+ Flex,
33
+ {
34
+ itemAlign: "center",
35
+ className: cn("oui-gap-2 ", props.classNames?.symbol),
36
+ children: [
37
+ /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
38
+ /* @__PURE__ */ jsx(TokenIcon, { symbol, className: "oui-size-5" }),
39
+ /* @__PURE__ */ jsx(
40
+ Text.formatted,
41
+ {
42
+ className: "oui-whitespace-nowrap oui-break-normal",
43
+ rule: "symbol",
44
+ formatString: "base-type",
45
+ size: "sm",
46
+ weight: "semibold",
47
+ intensity: 98,
48
+ children: symbol
49
+ }
50
+ )
51
+ ] }),
52
+ /* @__PURE__ */ jsxs(
53
+ Text,
54
+ {
55
+ size: "2xs",
56
+ className: "oui-h-[18px] oui-rounded oui-bg-base-7 oui-px-2 oui-font-semibold oui-text-base-contrast-36",
57
+ children: [
58
+ currentLeverage,
59
+ "x"
60
+ ]
61
+ }
62
+ )
63
+ ]
64
+ }
65
+ ),
66
+ /* @__PURE__ */ jsxs(
67
+ Grid,
68
+ {
69
+ cols: 2,
70
+ gapX: 2,
71
+ gapY: 1,
72
+ className: cn("oui-w-full oui-gap-x-2 ", props.classNames?.container),
73
+ children: [
74
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: " oui-text-base-contrast-36", children: [
75
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("common.quantity") }),
76
+ /* @__PURE__ */ jsx(
77
+ Text.numeral,
78
+ {
79
+ rule: "price",
80
+ className: "oui-text-base-contrast-80",
81
+ size: "2xs",
82
+ dp: props.baseDP ?? 2,
83
+ children: Number(order2.order_quantity)
84
+ }
85
+ )
86
+ ] }),
87
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
88
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("common.lastPrice") }),
89
+ /* @__PURE__ */ jsx(
90
+ Text.numeral,
91
+ {
92
+ rule: "price",
93
+ className: "oui-text-base-contrast-80",
94
+ size: "2xs",
95
+ dp: props.quoteDP ?? 2,
96
+ children: indexPrice?.data
97
+ }
98
+ )
99
+ ] }),
100
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
101
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("common.orderPrice") }),
102
+ /* @__PURE__ */ jsx(
103
+ Text.numeral,
104
+ {
105
+ rule: "price",
106
+ className: "oui-text-base-contrast-80",
107
+ size: "2xs",
108
+ dp: props.quoteDP ?? 2,
109
+ children: Number(order2.order_price)
110
+ }
111
+ )
112
+ ] }),
113
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
114
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("common.markPrice") }),
115
+ /* @__PURE__ */ jsx(
116
+ Text.numeral,
117
+ {
118
+ rule: "price",
119
+ className: "oui-text-base-contrast-80",
120
+ size: "2xs",
121
+ dp: props.quoteDP ?? 2,
122
+ children: markPrice?.data
123
+ }
124
+ )
125
+ ] })
126
+ ]
127
+ }
128
+ )
129
+ ]
130
+ }
131
+ );
132
+ };
133
+ var PnlInfo = (props) => {
134
+ const { t } = useTranslation();
135
+ const { tp_pnl, sl_pnl } = props;
136
+ const riskRatio = useMemo(() => {
137
+ const defaultNode = /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36", children: "-- x" });
138
+ if (tp_pnl === void 0 || sl_pnl === void 0) {
139
+ return defaultNode;
140
+ }
141
+ if (checkIsNaN(tp_pnl) || checkIsNaN(sl_pnl)) {
142
+ return defaultNode;
143
+ }
144
+ const tpDecimal = new Decimal(tp_pnl);
145
+ const slDecimal = new Decimal(sl_pnl);
146
+ if (slDecimal.isZero() || tpDecimal.isZero()) {
147
+ return defaultNode;
148
+ }
149
+ const ratio = tpDecimal.div(slDecimal).abs().toNumber().toFixed(2);
150
+ return /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", className: "oui-text-base-contrast-80", children: [
151
+ /* @__PURE__ */ jsx(Text, { children: ratio }),
152
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36", children: "x" })
153
+ ] });
154
+ }, [tp_pnl, sl_pnl]);
155
+ return /* @__PURE__ */ jsxs(
156
+ Flex,
157
+ {
158
+ direction: "column",
159
+ itemAlign: "start",
160
+ className: cn(
161
+ "oui-w-full oui-gap-1 oui-text-2xs oui-text-base-contrast-36",
162
+ props.className
163
+ ),
164
+ children: [
165
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
166
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("tpsl.totalEstTpPnl") }),
167
+ /* @__PURE__ */ jsx(
168
+ Text.numeral,
169
+ {
170
+ suffix: /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
171
+ rule: "price",
172
+ coloring: true,
173
+ visible: true,
174
+ size: "2xs",
175
+ dp: 2,
176
+ children: tp_pnl ? Number(tp_pnl) : "--"
177
+ }
178
+ )
179
+ ] }),
180
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
181
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("tpsl.totalEstSlPnl") }),
182
+ sl_pnl ? /* @__PURE__ */ jsx(
183
+ Text.numeral,
184
+ {
185
+ suffix: /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
186
+ coloring: true,
187
+ visible: true,
188
+ size: "2xs",
189
+ dp: 2,
190
+ children: Number(sl_pnl)
191
+ }
192
+ ) : /* @__PURE__ */ jsx(Text, { size: "2xs", children: "-- USDC" })
193
+ ] }),
194
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
195
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("tpsl.riskRewardRatio") }),
196
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-80", size: "2xs", children: riskRatio })
197
+ ] })
198
+ ]
199
+ }
200
+ );
201
+ };
202
+ var useTPSLInputRowScript = (props) => {
203
+ const { values, side, type, rootOrderPrice } = props;
204
+ const symbolLeverage = useLeverageBySymbol(
205
+ props.symbolLeverage ? void 0 : props.symbol
206
+ );
207
+ const leverage = props.symbolLeverage || symbolLeverage;
208
+ const roi = useMemo(() => {
209
+ if (!leverage || !rootOrderPrice || Number(rootOrderPrice) === 0) {
210
+ return null;
211
+ }
212
+ let closePrice;
213
+ if (values.order_type === OrderType.MARKET) {
214
+ closePrice = values.trigger_price;
215
+ } else if (values.order_type === OrderType.LIMIT) {
216
+ closePrice = values.order_price;
217
+ }
218
+ if (!closePrice) {
219
+ return null;
220
+ }
221
+ try {
222
+ const roi2 = order.tpslROI({
223
+ side,
224
+ type,
225
+ closePrice: Number(closePrice),
226
+ orderPrice: Number(rootOrderPrice),
227
+ leverage
228
+ });
229
+ return roi2 * 100;
230
+ } catch (error) {
231
+ return null;
232
+ }
233
+ }, [values, leverage, rootOrderPrice, type, side]);
234
+ return {
235
+ ...props,
236
+ roi
237
+ };
238
+ };
239
+ var usePNLInputBuilder = (props) => {
240
+ const { type, values } = props;
241
+ const [mode, setMode] = useLocalStorage(
242
+ "TP/SL_Mode",
243
+ "Offset%" /* PERCENTAGE */
244
+ );
245
+ const [focus, setFocus] = useState(true);
246
+ const { t } = useTranslation();
247
+ const key = useMemo(() => {
248
+ switch (mode) {
249
+ case "Offset" /* OFFSET */:
250
+ return `${type.toLowerCase()}_offset`;
251
+ case "Offset%" /* PERCENTAGE */:
252
+ return `${type.toLowerCase()}_offset_percentage`;
253
+ default:
254
+ return `${type.toLowerCase()}_pnl`;
255
+ }
256
+ }, [mode]);
257
+ const value = useMemo(() => {
258
+ return values[mode];
259
+ }, [values, mode]);
260
+ const modes = useMemo(() => {
261
+ return [
262
+ {
263
+ label: t("tpsl.pnl"),
264
+ value: "PnL" /* PnL */,
265
+ testId: `${"PnL" /* PnL */}_menu_item`
266
+ },
267
+ {
268
+ label: t("tpsl.offset"),
269
+ value: "Offset" /* OFFSET */,
270
+ testId: `${"Offset" /* OFFSET */}_mneu_item`
271
+ },
272
+ {
273
+ label: `${t("tpsl.offset")}%`,
274
+ value: "Offset%" /* PERCENTAGE */,
275
+ testId: `${"Offset%" /* PERCENTAGE */}_menu_item`
276
+ }
277
+ ];
278
+ }, [t]);
279
+ const percentageSuffix = useRef("");
280
+ const onValueChange = (value2) => {
281
+ props.onChange(key, value2);
282
+ };
283
+ const formatter = (options) => {
284
+ const { dp = 2 } = options;
285
+ return {
286
+ onRenderBefore: (value2, options2) => {
287
+ value2 = `${value2}`;
288
+ if (value2 === "" || value2 === "-")
289
+ return "";
290
+ if (mode === "Offset%" /* PERCENTAGE */) {
291
+ return `${new Decimal(
292
+ value2.replace(
293
+ new RegExp(percentageSuffix.current.replace(".", "\\.") + "$"),
294
+ ""
295
+ )
296
+ ).mul(100).todp(2, 4).toString()}${percentageSuffix.current}`;
297
+ } else if (mode === "Offset" /* OFFSET */) {
298
+ value2 = todpIfNeed(value2, dp);
299
+ } else ;
300
+ return `${value2}`;
301
+ },
302
+ onSendBefore: (value2) => {
303
+ if (/^\-?0{2,}$/.test(value2)) {
304
+ return "0";
305
+ }
306
+ if (mode === "Offset%" /* PERCENTAGE */) {
307
+ if (value2 !== "") {
308
+ value2 = todpIfNeed(value2, 2);
309
+ const endStr = value2.match(/\.0{0,2}$/);
310
+ if (!!endStr) {
311
+ percentageSuffix.current = endStr[0];
312
+ } else {
313
+ percentageSuffix.current = "";
314
+ }
315
+ value2 = new Decimal(value2).div(100).toString();
316
+ value2 = `${value2}${percentageSuffix.current}`;
317
+ }
318
+ } else if (mode === "PnL" /* PnL */ && type === "SL" && focus) {
319
+ value2 = value2.startsWith("-") ? value2 : "-" + value2;
320
+ } else {
321
+ value2 = todpIfNeed(value2, dp);
322
+ }
323
+ if (value2 === "" || value2 === "-")
324
+ return "";
325
+ return value2;
326
+ }
327
+ };
328
+ };
329
+ return {
330
+ mode,
331
+ modes,
332
+ type: props.type,
333
+ formatter,
334
+ onModeChange: (mode2) => {
335
+ setMode(mode2);
336
+ },
337
+ value,
338
+ pnl: values["PnL" /* PnL */],
339
+ onValueChange,
340
+ quote_dp: props.quote_dp,
341
+ setFocus
342
+ };
343
+ };
344
+ var PNLInput = (props) => {
345
+ const {
346
+ mode,
347
+ modes,
348
+ onModeChange,
349
+ onValueChange,
350
+ quote,
351
+ quote_dp,
352
+ value,
353
+ pnl
354
+ } = props;
355
+ const { t } = useTranslation();
356
+ const [prefix, setPrefix] = useState(mode);
357
+ const [placeholder, setPlaceholder] = useState(
358
+ mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
359
+ );
360
+ const color = useMemo(() => {
361
+ const num = Number(pnl);
362
+ if (isNaN(num) || num === 0)
363
+ return "";
364
+ if (num > 0)
365
+ return "oui-text-trade-profit";
366
+ if (num < 0)
367
+ return "oui-text-trade-loss";
368
+ }, [pnl]);
369
+ useEffect(() => {
370
+ const label = modes.find((item) => item.value === mode)?.label;
371
+ setPrefix(label);
372
+ setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
373
+ }, [mode, modes]);
374
+ return /* @__PURE__ */ jsx(
375
+ Input,
376
+ {
377
+ prefix,
378
+ size: {
379
+ initial: "lg",
380
+ lg: "md"
381
+ },
382
+ placeholder,
383
+ align: "right",
384
+ value,
385
+ "data-testid": props.testId,
386
+ autoComplete: "off",
387
+ onValueChange,
388
+ formatters: [
389
+ // inputFormatter.numberFormatter,
390
+ props.formatter({ dp: quote_dp, mode }),
391
+ inputFormatter.currencyFormatter,
392
+ inputFormatter.decimalPointFormatter
393
+ ],
394
+ classNames: {
395
+ input: cn("oui-text-2xs", color),
396
+ prefix: "oui-text-base-contrast-54 oui-text-2xs",
397
+ root: "oui-outline-line-12 focus-within:oui-outline-primary-light"
398
+ },
399
+ onFocus: () => {
400
+ setPlaceholder("");
401
+ props.setFocus(true);
402
+ },
403
+ onBlur: () => {
404
+ setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
405
+ props.setFocus(false);
406
+ },
407
+ suffix: /* @__PURE__ */ jsxs(Fragment, { children: [
408
+ mode === "Offset%" /* PERCENTAGE */ && !!value && /* @__PURE__ */ jsx(
409
+ Text,
410
+ {
411
+ size: "2xs",
412
+ color: "inherit",
413
+ className: cn("oui-ml-[2px]", color),
414
+ children: "%"
415
+ }
416
+ ),
417
+ /* @__PURE__ */ jsx(
418
+ PNLMenus,
419
+ {
420
+ mode,
421
+ modes,
422
+ onModeChange: (item) => onModeChange(item.value)
423
+ }
424
+ )
425
+ ] })
426
+ }
427
+ );
428
+ };
429
+ var PNLMenus = (props) => {
430
+ return /* @__PURE__ */ jsx(
431
+ SimpleDropdownMenu,
432
+ {
433
+ currentValue: props.mode,
434
+ menu: props.modes,
435
+ align: "end",
436
+ size: "xs",
437
+ className: "oui-min-w-[80px]",
438
+ onSelect: (item) => props.onModeChange(item),
439
+ children: /* @__PURE__ */ jsx("button", { className: "oui-p-2", children: /* @__PURE__ */ jsx(CaretDownIcon, { size: 12, color: "white" }) })
440
+ }
441
+ );
442
+ };
443
+ var PnlInputWidget = (props) => {
444
+ const { testId, quote, ...rest } = props;
445
+ const state = usePNLInputBuilder(rest);
446
+ return /* @__PURE__ */ jsx(PNLInput, { ...state, testId, quote });
447
+ };
448
+ var OrderPriceType = (props) => {
449
+ const { t } = useTranslation();
450
+ const options = [
451
+ { label: t("orderEntry.orderType.limitOrder"), value: OrderType.LIMIT },
452
+ { label: t("orderEntry.orderType.marketOrder"), value: OrderType.MARKET }
453
+ ];
454
+ return /* @__PURE__ */ jsx(
455
+ Select.options,
456
+ {
457
+ value: props.type,
458
+ options,
459
+ disabled: props.disabled,
460
+ onValueChange: props.onChange,
461
+ size: "xs",
462
+ classNames: {
463
+ 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 "
464
+ },
465
+ valueFormatter: (value, option) => {
466
+ const displayLabel = {
467
+ [OrderType.LIMIT]: t("orderEntry.orderType.limit"),
468
+ [OrderType.MARKET]: t("common.marketPrice")
469
+ }[value];
470
+ return /* @__PURE__ */ jsx(Text, { size: "2xs", children: displayLabel });
471
+ }
472
+ }
473
+ );
474
+ };
475
+ var PriceInput = (props) => {
476
+ const [placeholder, setPlaceholder] = useState("USDC");
477
+ const { t } = useTranslation();
478
+ return /* @__PURE__ */ jsx(
479
+ Input.tooltip,
480
+ {
481
+ "data-testid": `oui-testid-tpsl-popUp-${props.type.toLowerCase()}-input`,
482
+ prefix: props.label ?? t("common.markPrice"),
483
+ size: { initial: "lg", lg: "md" },
484
+ tooltip: props.error,
485
+ placeholder,
486
+ disabled: props.disabled,
487
+ align: "right",
488
+ autoComplete: "off",
489
+ value: props.value,
490
+ color: props.error ? "danger" : void 0,
491
+ classNames: {
492
+ input: "oui-text-2xs placeholder:oui-text-2xs",
493
+ prefix: "oui-text-base-contrast-54 oui-text-2xs",
494
+ root: "oui-w-full"
495
+ // root: "oui-outline-line-12 focus-within:oui-outline-primary-light",
496
+ },
497
+ onValueChange: props.onValueChange,
498
+ onFocus: () => {
499
+ setPlaceholder("");
500
+ },
501
+ onBlur: () => {
502
+ setPlaceholder("USDC");
503
+ },
504
+ formatters: [
505
+ inputFormatter.numberFormatter,
506
+ inputFormatter.dpFormatter(props.quote_dp),
507
+ inputFormatter.currencyFormatter,
508
+ inputFormatter.decimalPointFormatter
509
+ ]
510
+ }
511
+ );
512
+ };
513
+ var TPSLInputRowUI = (props) => {
514
+ const { t } = useTranslation();
515
+ const { getErrorMsg } = useOrderEntryFormErrorMsg(props.errors);
516
+ const { values, positionType } = props;
517
+ return /* @__PURE__ */ jsxs(
518
+ Flex,
519
+ {
520
+ direction: "column",
521
+ itemAlign: "start",
522
+ justify: "start",
523
+ className: "oui-w-full",
524
+ children: [
525
+ /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 98, children: props.type === "tp" ? t("tpsl.takeProfit") : t("tpsl.stopLoss") }),
526
+ /* @__PURE__ */ jsxs(
527
+ Flex,
528
+ {
529
+ direction: "column",
530
+ gap: 2,
531
+ itemAlign: "start",
532
+ className: "oui-w-full oui-pt-2",
533
+ children: [
534
+ /* @__PURE__ */ jsxs(
535
+ Flex,
536
+ {
537
+ direction: "column",
538
+ itemAlign: "start",
539
+ className: "oui-w-full oui-gap-0.5",
540
+ children: [
541
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-base-contrast-54", children: t("common.triggerPrice") }),
542
+ /* @__PURE__ */ jsxs(Grid, { cols: 2, gap: 2, className: "oui-w-full oui-px-0.5", children: [
543
+ /* @__PURE__ */ jsx(
544
+ PriceInput,
545
+ {
546
+ type: `${props.type} price`,
547
+ value: values.trigger_price,
548
+ error: getErrorMsg(`${props.type}_trigger_price`),
549
+ onValueChange: (value) => {
550
+ props.onChange(`${props.type}_trigger_price`, value);
551
+ },
552
+ quote_dp: props.quote_dp
553
+ }
554
+ ),
555
+ /* @__PURE__ */ jsx(
556
+ PnlInputWidget,
557
+ {
558
+ type: props.type === "tp" ? "TP" : "SL",
559
+ onChange: (key, value) => {
560
+ props.onChange(key, value);
561
+ },
562
+ quote: "USDC",
563
+ quote_dp: 2,
564
+ values
565
+ }
566
+ )
567
+ ] })
568
+ ]
569
+ }
570
+ ),
571
+ /* @__PURE__ */ jsxs(
572
+ Flex,
573
+ {
574
+ direction: "column",
575
+ className: cn(
576
+ "oui-w-full oui-gap-0.5",
577
+ props.hideOrderPrice ? "oui-hidden" : ""
578
+ ),
579
+ itemAlign: "start",
580
+ children: [
581
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-base-contrast-54", children: t("common.orderPrice") }),
582
+ /* @__PURE__ */ jsxs(Grid, { cols: 2, gap: 2, className: "oui-w-full oui-px-0.5", children: [
583
+ /* @__PURE__ */ jsx(
584
+ PriceInput,
585
+ {
586
+ disabled: positionType === PositionType.FULL || values.order_type === OrderType.MARKET,
587
+ type: "order price",
588
+ label: values.order_type === OrderType.LIMIT ? t("common.limit") : t("common.market"),
589
+ value: values.order_price,
590
+ error: getErrorMsg(`${props.type}_order_price`),
591
+ onValueChange: (value) => {
592
+ props.onChange(`${props.type}_order_price`, value);
593
+ },
594
+ quote_dp: props.quote_dp
595
+ }
596
+ ),
597
+ /* @__PURE__ */ jsx(
598
+ OrderPriceType,
599
+ {
600
+ disabled: positionType === PositionType.FULL || props.disableOrderTypeSelector,
601
+ type: values.order_type,
602
+ onChange: (value) => {
603
+ props.onChange(`${props.type}_order_type`, value);
604
+ }
605
+ }
606
+ )
607
+ ] })
608
+ ]
609
+ }
610
+ )
611
+ ]
612
+ }
613
+ ),
614
+ /* @__PURE__ */ jsx(
615
+ RenderROI,
616
+ {
617
+ price: values.order_type === OrderType.MARKET ? values.trigger_price : values.order_price,
618
+ orderType: values.order_type,
619
+ pnl: values.PnL,
620
+ roi: props.roi,
621
+ dp: props.quote_dp,
622
+ className: "oui-mt-1"
623
+ }
624
+ )
625
+ ]
626
+ }
627
+ );
628
+ };
629
+ var RenderROI = (props) => {
630
+ const { t } = useTranslation();
631
+ const { price, pnl, roi, dp, className, orderType } = props;
632
+ if (!roi || !price || !pnl) {
633
+ return null;
634
+ }
635
+ return /* @__PURE__ */ jsx(Text, { className: cn("oui-text-2xs oui-text-base-contrast-36", className), children: /* @__PURE__ */ jsx(
636
+ Trans,
637
+ {
638
+ i18nKey: "tpsl.advanced.ROI",
639
+ components: [
640
+ /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
641
+ Text.numeral,
642
+ {
643
+ className: "oui-px-1 oui-text-base-contrast",
644
+ dp,
645
+ suffix: /* @__PURE__ */ jsx(Text, { className: "oui-pl-0.5", children: "USDC" }),
646
+ children: price
647
+ }
648
+ ) }, "price"),
649
+ /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Text, { className: "oui-px-1 oui-text-base-contrast", children: orderType === OrderType.MARKET ? t("common.market") : t("common.limit") }) }, "orderType"),
650
+ /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
651
+ Text.numeral,
652
+ {
653
+ coloring: true,
654
+ className: "oui-whitespace-nowrap oui-px-1",
655
+ dp: 2,
656
+ suffix: /* @__PURE__ */ jsx(Text, { className: "oui-pl-0.5", children: "USDC" }),
657
+ children: pnl
658
+ }
659
+ ) }, "pnl"),
660
+ /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
661
+ Text.numeral,
662
+ {
663
+ coloring: true,
664
+ className: "oui-whitespace-nowrap oui-px-1",
665
+ dp: 2,
666
+ suffix: "%",
667
+ children: roi
668
+ }
669
+ ) }, "roi")
670
+ ]
671
+ }
672
+ ) });
673
+ };
674
+ var TPSLInputRowWidget = (props) => {
675
+ const state = useTPSLInputRowScript(props);
676
+ return /* @__PURE__ */ jsx(TPSLInputRowUI, { ...state });
677
+ };
13
678
 
14
- export { ts as ArrowRightIcon, il as EditBracketOrderDialogId, ol as EditBracketOrderSheetId, so as EditBracketOrderWidget, Ie as PositionTPSLConfirm, $i as PositionTPSLPopover, Yi as PositionTPSLSheet, er as TPSL, as as TPSLAdvancedDialogId, ls as TPSLAdvancedSheetId, xr as TPSLAdvancedUI, Or as TPSLAdvancedWidget, Tn as TPSLDetailDialogId, xn as TPSLDetailSheetId, jr as TPSLDetailWidget, ge as TPSLDialogId, Y as TPSLPositionTypeWidget, Be as TPSLSheetId, Zr as TPSLSimpleDialogId, Nt as TPSLSimpleDialogUI, ht as TPSLSimpleDialogWidget, Yr as TPSLSimpleSheetId, Ae as TPSLWidget, br as useTPSLAdvanced, mr as useTPSLBuilder, At as useTPSLSimpleDialog };
679
+ // src/components/tpslPostionType/tpslPositionType.script.tsx
680
+ var useTPSLPositionTypeScript = (props) => {
681
+ return {
682
+ value: props.value,
683
+ onChange: props.onChange,
684
+ disableSelector: props.disableSelector
685
+ };
686
+ };
687
+ var positionTypeKey = "position_type";
688
+ var TPSLPositionTypeUI = (props) => {
689
+ const { t } = useTranslation();
690
+ const options = [
691
+ {
692
+ label: t("tpsl.partialPosition"),
693
+ value: PositionType.PARTIAL
694
+ },
695
+ {
696
+ label: t("tpsl.fullPosition"),
697
+ value: PositionType.FULL
698
+ }
699
+ ];
700
+ return /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", justify: "start", children: [
701
+ /* @__PURE__ */ jsx(
702
+ Tooltip,
703
+ {
704
+ className: "oui-w-[280px] oui-p-3",
705
+ content: props.value === PositionType.FULL ? t("tpsl.positionType.full.tips") : t("tpsl.positionType.partial.tips"),
706
+ children: /* @__PURE__ */ jsx(
707
+ ExclamationFillIcon,
708
+ {
709
+ className: "oui-cursor-pointer oui-text-base-contrast-54",
710
+ size: 12
711
+ }
712
+ )
713
+ }
714
+ ),
715
+ props.disableSelector ? props.value === PositionType.FULL ? /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54", children: t("tpsl.positionType.full") }) : /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54", children: t("tpsl.positionType.partial") }) : /* @__PURE__ */ jsx(
716
+ Select.options,
717
+ {
718
+ value: props.value,
719
+ options,
720
+ onValueChange: (event) => {
721
+ props.onChange(positionTypeKey, event);
722
+ },
723
+ size: "xs",
724
+ classNames: {
725
+ trigger: " oui-bg-transparent oui-border-0 oui-w-auto oui-px-0 oui-font-normal"
726
+ },
727
+ contentProps: {
728
+ className: " oui-bg-base-8 oui-border-0"
729
+ }
730
+ }
731
+ )
732
+ ] });
733
+ };
734
+ var TPSLPositionTypeWidget = (props) => {
735
+ const state = useTPSLPositionTypeScript(props);
736
+ return /* @__PURE__ */ jsx(TPSLPositionTypeUI, { ...state });
737
+ };
738
+ var TPSLQuantity = memo((props) => {
739
+ const { maxQty, base_dp, baseTick, quantity } = props;
740
+ const inputRef = useRef(null);
741
+ const { t } = useTranslation();
742
+ const [sliderValue, setSliderValue] = useState(0);
743
+ const formatQuantity = (value) => {
744
+ let _qty = value;
745
+ if (Number(value) > maxQty) {
746
+ _qty = maxQty.toString();
747
+ }
748
+ if (baseTick > 0) {
749
+ props.onQuantityChange?.(utils.formatNumber(_qty, baseTick) ?? value);
750
+ }
751
+ };
752
+ const onSliderValueChange = (value) => {
753
+ setSliderValue(value);
754
+ const qty = new Decimal(value).div(100).mul(maxQty).toFixed(base_dp, Decimal.ROUND_DOWN);
755
+ formatQuantity(qty);
756
+ };
757
+ useEffect(() => {
758
+ const qty = Math.min(Number(quantity || 0), maxQty);
759
+ const slider = new Decimal(qty).div(maxQty).mul(100).toDecimalPlaces(2, Decimal.ROUND_DOWN).toNumber();
760
+ setSliderValue(slider);
761
+ }, [quantity, maxQty]);
762
+ const errorMsg = props.quantity.toString().length > 0 ? props.errorMsg : void 0;
763
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
764
+ /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx("div", { className: "oui-flex-1", children: /* @__PURE__ */ jsx(
765
+ Input.tooltip,
766
+ {
767
+ "data-testid": "oui-testid-tpsl-popUp-quantity-input",
768
+ ref: inputRef,
769
+ prefix: t("common.quantity"),
770
+ size: {
771
+ initial: "md",
772
+ lg: "sm"
773
+ },
774
+ align: "right",
775
+ value: props.quantity,
776
+ autoComplete: "off",
777
+ classNames: {
778
+ prefix: "oui-text-base-contrast-54",
779
+ root: cn(
780
+ "oui-bg-base-5 oui-outline-line-12",
781
+ errorMsg && "oui-outline-danger"
782
+ )
783
+ },
784
+ tooltipProps: {
785
+ content: {
786
+ className: "oui-bg-base-6 oui-text-base-contrast-80"
787
+ },
788
+ arrow: {
789
+ className: "oui-fill-base-6"
790
+ }
791
+ },
792
+ tooltip: errorMsg,
793
+ color: errorMsg ? "danger" : void 0,
794
+ formatters: [
795
+ inputFormatter.dpFormatter(props.base_dp),
796
+ inputFormatter.numberFormatter,
797
+ inputFormatter.currencyFormatter,
798
+ inputFormatter.decimalPointFormatter
799
+ ],
800
+ onValueChange: (value) => {
801
+ props.onQuantityChange?.(value);
802
+ const qty = Number(value);
803
+ if (qty && qty > props.maxQty) {
804
+ const qty2 = props.maxQty;
805
+ props.onQuantityChange?.(qty2);
806
+ inputRef.current?.blur();
807
+ }
808
+ },
809
+ onBlur: (e) => formatQuantity(e.target.value),
810
+ suffix: /* @__PURE__ */ jsx("span", { className: "oui-px-3 oui-text-2xs oui-text-base-contrast-54", children: props.base })
811
+ }
812
+ ) }) }),
813
+ /* @__PURE__ */ jsx(Flex, { mt: 2, itemAlign: "center", height: "15px", children: /* @__PURE__ */ jsx(
814
+ Slider,
815
+ {
816
+ min: 0,
817
+ max: 100,
818
+ markCount: 5,
819
+ showTip: true,
820
+ value: [sliderValue],
821
+ color: "primary",
822
+ onValueChange: (value) => {
823
+ onSliderValueChange(value[0]);
824
+ }
825
+ }
826
+ ) }),
827
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
828
+ /* @__PURE__ */ jsx(Text.numeral, { color: "primary", size: "2xs", suffix: "%", children: sliderValue }),
829
+ /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, children: [
830
+ /* @__PURE__ */ jsx(
831
+ "button",
832
+ {
833
+ className: "oui-leading-none",
834
+ style: { lineHeight: 0 },
835
+ onClick: () => {
836
+ props.onQuantityChange?.(props.maxQty);
837
+ },
838
+ children: /* @__PURE__ */ jsx(Text, { color: "primary", size: "2xs", children: t("common.max") })
839
+ }
840
+ ),
841
+ /* @__PURE__ */ jsx(
842
+ Text.numeral,
843
+ {
844
+ rule: "price",
845
+ size: "2xs",
846
+ intensity: 54,
847
+ tick: props.baseTick,
848
+ children: props.maxQty
849
+ }
850
+ )
851
+ ] })
852
+ ] })
853
+ ] });
854
+ });
855
+ var TPSL = (props) => {
856
+ const {
857
+ TPSL_OrderEntity,
858
+ symbolInfo,
859
+ onCancel,
860
+ onComplete,
861
+ status,
862
+ position,
863
+ setValues,
864
+ isEditing
865
+ } = props;
866
+ const { errors, validated } = props.metaState;
867
+ const { t } = useTranslation();
868
+ const { isMobile } = useScreen();
869
+ const { getErrorMsg } = useOrderEntryFormErrorMsg(errors);
870
+ if (!position) {
871
+ return null;
872
+ }
873
+ const tpslEnable = TPSL_OrderEntity.tp_trigger_price || TPSL_OrderEntity.sl_trigger_price;
874
+ const renderQtyInput = () => {
875
+ if (TPSL_OrderEntity.position_type === PositionType.FULL) {
876
+ return null;
877
+ }
878
+ return /* @__PURE__ */ jsx(Box, { className: "oui-px-0.5", children: /* @__PURE__ */ jsx(
879
+ TPSLQuantity,
880
+ {
881
+ maxQty: props.maxQty,
882
+ quantity: props.orderQuantity ?? props.maxQty,
883
+ baseTick: symbolInfo("base_tick"),
884
+ base_dp: symbolInfo("base_dp"),
885
+ onQuantityChange: props.setQuantity,
886
+ base: symbolInfo("base"),
887
+ isEditing: props.isEditing,
888
+ errorMsg: validated ? getErrorMsg("quantity") : void 0
889
+ }
890
+ ) });
891
+ };
892
+ return /* @__PURE__ */ jsxs("div", { id: "orderly-tp_sl-order-edit-content", children: [
893
+ /* @__PURE__ */ jsx(ScrollArea, { className: cn(isMobile && "oui-h-[calc(100vh-200px)]"), children: /* @__PURE__ */ jsxs("div", { className: "oui-px-2", children: [
894
+ /* @__PURE__ */ jsx(
895
+ OrderInfo,
896
+ {
897
+ baseDP: symbolInfo("base_dp"),
898
+ quoteDP: symbolInfo("quote_dp"),
899
+ classNames: {
900
+ root: "oui-mb-3",
901
+ container: "oui-gap-x-[30px]"
902
+ },
903
+ order: {
904
+ symbol: position.symbol,
905
+ order_quantity: position.position_qty.toString(),
906
+ order_price: position.average_open_price.toString()
907
+ },
908
+ symbolLeverage: position.leverage
909
+ }
910
+ ),
911
+ /* @__PURE__ */ jsxs(
912
+ Flex,
913
+ {
914
+ direction: "column",
915
+ justify: "start",
916
+ itemAlign: "start",
917
+ gap: 3,
918
+ className: "oui-mb-3 oui-w-full",
919
+ children: [
920
+ !isEditing && /* @__PURE__ */ jsx(
921
+ TPSLPositionTypeWidget,
922
+ {
923
+ disableSelector: true,
924
+ value: TPSL_OrderEntity.position_type ?? PositionType.PARTIAL,
925
+ onChange: (key, value) => {
926
+ props.setOrderValue(key, value);
927
+ }
928
+ }
929
+ ),
930
+ TPSL_OrderEntity.position_type === PositionType.FULL && /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-warning", children: t("tpsl.positionType.full.tips.market") })
931
+ ]
932
+ }
933
+ ),
934
+ renderQtyInput(),
935
+ /* @__PURE__ */ jsxs(
936
+ Flex,
937
+ {
938
+ direction: "column",
939
+ itemAlign: "start",
940
+ justify: "start",
941
+ gap: 6,
942
+ className: "oui-mt-3 oui-w-full",
943
+ children: [
944
+ /* @__PURE__ */ jsx(
945
+ TPSLInputRowWidget,
946
+ {
947
+ symbol: position.symbol,
948
+ rootOrderPrice: position.average_open_price.toString(),
949
+ type: "tp",
950
+ side: position.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL,
951
+ values: {
952
+ // enable: TPSL_OrderEntity.tp_enable ?? false,
953
+ trigger_price: TPSL_OrderEntity.tp_trigger_price?.toString() ?? void 0,
954
+ PnL: TPSL_OrderEntity.tp_pnl?.toString() ?? void 0,
955
+ Offset: TPSL_OrderEntity.tp_offset?.toString() ?? void 0,
956
+ "Offset%": TPSL_OrderEntity.tp_offset_percentage?.toString() ?? void 0,
957
+ order_price: TPSL_OrderEntity.tp_order_price?.toString() ?? void 0,
958
+ order_type: TPSL_OrderEntity.tp_order_type ?? OrderType.MARKET
959
+ },
960
+ hideOrderPrice: TPSL_OrderEntity.position_type === PositionType.FULL,
961
+ errors: validated ? errors : null,
962
+ disableOrderTypeSelector: isEditing,
963
+ quote_dp: symbolInfo("quote_dp"),
964
+ positionType: TPSL_OrderEntity.position_type ?? PositionType.PARTIAL,
965
+ onChange: (key, value) => {
966
+ props.setOrderValue(key, value);
967
+ },
968
+ symbolLeverage: position.leverage
969
+ }
970
+ ),
971
+ /* @__PURE__ */ jsx(
972
+ TPSLInputRowWidget,
973
+ {
974
+ symbol: position.symbol,
975
+ rootOrderPrice: position.average_open_price.toString(),
976
+ type: "sl",
977
+ side: position.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL,
978
+ values: {
979
+ // enable: TPSL_OrderEntity.sl_enable ?? false,
980
+ trigger_price: TPSL_OrderEntity.sl_trigger_price?.toString() ?? void 0,
981
+ PnL: TPSL_OrderEntity.sl_pnl?.toString() ?? void 0,
982
+ Offset: TPSL_OrderEntity.sl_offset?.toString() ?? void 0,
983
+ "Offset%": TPSL_OrderEntity.sl_offset_percentage?.toString() ?? void 0,
984
+ order_price: TPSL_OrderEntity.sl_order_price?.toString() ?? void 0,
985
+ order_type: TPSL_OrderEntity.sl_order_type ?? OrderType.MARKET
986
+ },
987
+ hideOrderPrice: TPSL_OrderEntity.position_type === PositionType.FULL,
988
+ errors: validated ? errors : null,
989
+ quote_dp: symbolInfo("quote_dp"),
990
+ positionType: TPSL_OrderEntity.position_type ?? PositionType.PARTIAL,
991
+ disableOrderTypeSelector: isEditing,
992
+ onChange: (key, value) => {
993
+ props.setOrderValue(key, value);
994
+ },
995
+ symbolLeverage: position.leverage
996
+ }
997
+ )
998
+ ]
999
+ }
1000
+ ),
1001
+ /* @__PURE__ */ jsx(
1002
+ PnlInfo,
1003
+ {
1004
+ tp_pnl: TPSL_OrderEntity.tp_pnl,
1005
+ sl_pnl: TPSL_OrderEntity.sl_pnl,
1006
+ className: "oui-my-3"
1007
+ }
1008
+ )
1009
+ ] }) }),
1010
+ /* @__PURE__ */ jsxs(Grid, { px: 2, cols: 2, gap: 3, mt: 4, children: [
1011
+ /* @__PURE__ */ jsx(
1012
+ Button,
1013
+ {
1014
+ size: "md",
1015
+ color: "secondary",
1016
+ "data-testid": "tpsl-cancel",
1017
+ onClick: () => {
1018
+ props.close?.();
1019
+ onCancel?.();
1020
+ },
1021
+ children: t("common.cancel")
1022
+ }
1023
+ ),
1024
+ /* @__PURE__ */ jsx(
1025
+ ThrottledButton,
1026
+ {
1027
+ size: "md",
1028
+ "data-testid": "tpsl-confirm",
1029
+ disabled: status.isCreateMutating || !tpslEnable,
1030
+ loading: status.isCreateMutating || status.isUpdateMutating,
1031
+ onClick: () => {
1032
+ props.onSubmit().then(() => {
1033
+ props.close?.();
1034
+ onComplete?.();
1035
+ }).catch((err) => {
1036
+ });
1037
+ },
1038
+ children: t("common.confirm")
1039
+ }
1040
+ )
1041
+ ] })
1042
+ ] });
1043
+ };
1044
+ var TPSLOrderType = (props) => {
1045
+ const { tpPrice, slPrice } = props;
1046
+ const { t } = useTranslation();
1047
+ if (!!tpPrice && !!slPrice) {
1048
+ return /* @__PURE__ */ jsx(Badge, { size: "xs", color: "neutral", children: t("common.tpsl") });
1049
+ }
1050
+ if (!!tpPrice) {
1051
+ return /* @__PURE__ */ jsx(Badge, { size: "xs", color: "neutral", children: t("tpsl.tp") });
1052
+ }
1053
+ if (!!slPrice) {
1054
+ return /* @__PURE__ */ jsx(Badge, { size: "xs", color: "neutral", children: t("tpsl.sl") });
1055
+ }
1056
+ return null;
1057
+ };
1058
+ var PositionTPSLConfirm = (props) => {
1059
+ const {
1060
+ symbol,
1061
+ tpPrice,
1062
+ slPrice,
1063
+ qty,
1064
+ maxQty,
1065
+ side,
1066
+ quoteDP,
1067
+ baseDP,
1068
+ isEditing,
1069
+ isPositionTPSL: _isPositionTPSL,
1070
+ orderInfo: order2
1071
+ } = props;
1072
+ const { t } = useTranslation();
1073
+ const [needConfirm, setNeedConfirm] = useLocalStorage(
1074
+ "orderly_order_confirm",
1075
+ true
1076
+ );
1077
+ const renderPositionType = () => {
1078
+ if (order2.position_type === PositionType.FULL) {
1079
+ return /* @__PURE__ */ jsx(Text, { children: t("tpsl.positionType.full") });
1080
+ }
1081
+ return /* @__PURE__ */ jsx(Text, { children: t("tpsl.positionType.partial") });
1082
+ };
1083
+ const renderTPSLPrice = ({
1084
+ price,
1085
+ isOrderPrice,
1086
+ isEnable,
1087
+ colorType
1088
+ }) => {
1089
+ if (!isEnable) {
1090
+ return /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36", children: "-- USDC" });
1091
+ }
1092
+ if (!price) {
1093
+ if (isOrderPrice) {
1094
+ return /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36", children: t("common.market") });
1095
+ }
1096
+ }
1097
+ return /* @__PURE__ */ jsx(
1098
+ Text.numeral,
1099
+ {
1100
+ unit: "USDC",
1101
+ rule: "price",
1102
+ className: cn(
1103
+ "oui-text-base-contrast",
1104
+ colorType === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
1105
+ ),
1106
+ unitClassName: "oui-text-base-contrast-36 oui-ml-1",
1107
+ dp: quoteDP,
1108
+ padding: false,
1109
+ children: price
1110
+ }
1111
+ );
1112
+ };
1113
+ const isPositionTPSL = _isPositionTPSL;
1114
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
1115
+ isEditing && /* @__PURE__ */ jsx(Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: transSymbolformString(symbol) }) }),
1116
+ /* @__PURE__ */ jsxs(Flex, { pb: 4, children: [
1117
+ /* @__PURE__ */ jsx(Box, { grow: true, children: /* @__PURE__ */ jsx(
1118
+ Text.formatted,
1119
+ {
1120
+ rule: "symbol",
1121
+ formatString: "base-type",
1122
+ size: "base",
1123
+ showIcon: true,
1124
+ as: "div",
1125
+ intensity: 80,
1126
+ children: symbol
1127
+ }
1128
+ ) }),
1129
+ /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
1130
+ isPositionTPSL && /* @__PURE__ */ jsx(Badge, { size: "xs", color: "primary", children: t("common.position") }),
1131
+ /* @__PURE__ */ jsx(TPSLOrderType, { tpPrice, slPrice }),
1132
+ side === OrderSide.SELL ? /* @__PURE__ */ jsx(Badge, { size: "xs", color: "success", children: t("common.buy") }) : /* @__PURE__ */ jsx(Badge, { size: "xs", color: "danger", children: t("common.sell") })
1133
+ ] })
1134
+ ] }),
1135
+ /* @__PURE__ */ jsx(Divider, {}),
1136
+ order2.tp_trigger_price || order2.sl_trigger_price ? /* @__PURE__ */ jsxs(Fragment, { children: [
1137
+ /* @__PURE__ */ jsx(Divider, { className: "oui-my-4" }),
1138
+ /* @__PURE__ */ jsxs(
1139
+ "div",
1140
+ {
1141
+ className: textVariants({
1142
+ size: "sm",
1143
+ intensity: 54,
1144
+ className: "oui-space-y-1 oui-w-full oui-flex oui-flex-col oui-gap-3"
1145
+ }),
1146
+ children: [
1147
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast", children: renderPositionType() }),
1148
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
1149
+ /* @__PURE__ */ jsx(Text, { children: t("common.orderQty") }),
1150
+ /* @__PURE__ */ jsx(
1151
+ Text.numeral,
1152
+ {
1153
+ rule: "price",
1154
+ dp: baseDP,
1155
+ padding: false,
1156
+ className: "oui-text-base-contrast",
1157
+ children: order2.quantity ?? "-"
1158
+ }
1159
+ )
1160
+ ] }),
1161
+ /* @__PURE__ */ jsxs(
1162
+ Flex,
1163
+ {
1164
+ direction: "column",
1165
+ justify: "between",
1166
+ itemAlign: "start",
1167
+ gap: 1,
1168
+ className: "oui-w-full",
1169
+ children: [
1170
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
1171
+ /* @__PURE__ */ jsx(Text, { children: t("tpsl.tpTriggerPrice") }),
1172
+ " ",
1173
+ renderTPSLPrice({
1174
+ price: order2.tp_trigger_price ?? "",
1175
+ isOrderPrice: false,
1176
+ isEnable: !!order2.tp_trigger_price,
1177
+ colorType: "TP"
1178
+ })
1179
+ ] }),
1180
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
1181
+ /* @__PURE__ */ jsx(Text, { children: t("tpsl.tpOrderPrice") }),
1182
+ renderTPSLPrice({
1183
+ price: order2.tp_order_price ?? "",
1184
+ isOrderPrice: true,
1185
+ isEnable: !!order2.tp_trigger_price,
1186
+ colorType: "TP"
1187
+ })
1188
+ ] })
1189
+ ]
1190
+ }
1191
+ ),
1192
+ /* @__PURE__ */ jsxs(
1193
+ Flex,
1194
+ {
1195
+ direction: "column",
1196
+ justify: "between",
1197
+ itemAlign: "start",
1198
+ gap: 1,
1199
+ className: "oui-w-full",
1200
+ children: [
1201
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
1202
+ /* @__PURE__ */ jsx(Text, { children: t("tpsl.slTriggerPrice") }),
1203
+ renderTPSLPrice({
1204
+ price: order2.sl_trigger_price ?? "",
1205
+ isOrderPrice: false,
1206
+ isEnable: !!order2.sl_trigger_price,
1207
+ colorType: "SL"
1208
+ })
1209
+ ] }),
1210
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
1211
+ /* @__PURE__ */ jsx(Text, { children: t("tpsl.slOrderPrice") }),
1212
+ renderTPSLPrice({
1213
+ price: order2.sl_order_price ?? "",
1214
+ isOrderPrice: true,
1215
+ isEnable: !!order2.sl_trigger_price,
1216
+ colorType: "SL"
1217
+ })
1218
+ ] })
1219
+ ]
1220
+ }
1221
+ )
1222
+ ]
1223
+ }
1224
+ )
1225
+ ] }) : null,
1226
+ /* @__PURE__ */ jsx(Box, { pt: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
1227
+ /* @__PURE__ */ jsx(
1228
+ Checkbox,
1229
+ {
1230
+ id: "disabledConfirm",
1231
+ color: "white",
1232
+ checked: !needConfirm,
1233
+ onCheckedChange: (check) => {
1234
+ setNeedConfirm(!check);
1235
+ }
1236
+ }
1237
+ ),
1238
+ /* @__PURE__ */ jsx(
1239
+ "label",
1240
+ {
1241
+ htmlFor: "disabledConfirm",
1242
+ className: textVariants({
1243
+ size: "xs",
1244
+ intensity: 54,
1245
+ className: "oui-ml-1"
1246
+ }),
1247
+ children: t("orderEntry.disableOrderConfirm")
1248
+ }
1249
+ )
1250
+ ] }) })
1251
+ ] });
1252
+ };
1253
+ var useTPSLBuilder = (options) => {
1254
+ const {
1255
+ symbol,
1256
+ order: order2,
1257
+ isEditing,
1258
+ positionType,
1259
+ triggerPrice,
1260
+ type,
1261
+ withTriggerPrice
1262
+ } = options;
1263
+ const { t } = useTranslation();
1264
+ if (isEditing && !order2) {
1265
+ throw new SDKError("order is required when isEditing is true");
1266
+ }
1267
+ const symbolInfo = useSymbolsInfo();
1268
+ useRef(AlgoOrderRootType.TP_SL);
1269
+ const [{ rows: positions }] = usePositionStream();
1270
+ const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
1271
+ const position = positions.find((item) => item.symbol === symbol);
1272
+ useEffect(() => {
1273
+ if (!position) {
1274
+ options.close?.();
1275
+ }
1276
+ }, [position]);
1277
+ const [
1278
+ tpslOrder,
1279
+ {
1280
+ submit,
1281
+ deleteOrder,
1282
+ setValue,
1283
+ setValues,
1284
+ validate,
1285
+ metaState,
1286
+ errors,
1287
+ isCreateMutating,
1288
+ isUpdateMutating
1289
+ }
1290
+ ] = useTPSLOrder(
1291
+ {
1292
+ symbol,
1293
+ position_qty: position?.position_qty ?? 0,
1294
+ average_open_price: position?.average_open_price ?? 0
1295
+ },
1296
+ {
1297
+ defaultOrder: order2,
1298
+ positionType: triggerPrice ? PositionType.PARTIAL : positionType,
1299
+ // tpslEnable: {
1300
+ // tp_enable: !withTriggerPrice ? true : type === "tp",
1301
+ // sl_enable: !withTriggerPrice ? true : type === "sl",
1302
+ // },
1303
+ isEditing
1304
+ }
1305
+ );
1306
+ const setQuantity = (value) => {
1307
+ setValue("quantity", value);
1308
+ };
1309
+ const setOrderPrice = (name, value) => {
1310
+ setValue(name, value);
1311
+ };
1312
+ const setPnL = (type2, value) => {
1313
+ setValue(type2, value);
1314
+ };
1315
+ const maxQty = useMemo(
1316
+ () => Math.abs(Number(position?.position_qty)),
1317
+ [position?.position_qty]
1318
+ );
1319
+ useMemo(() => {
1320
+ const quantity = order2?.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL ? maxQty : order2?.quantity;
1321
+ let diff = 0;
1322
+ if (Number(tpslOrder.quantity) !== quantity) {
1323
+ diff = 1;
1324
+ } else if (!isEditing && !!tpslOrder.quantity) {
1325
+ diff = 1;
1326
+ }
1327
+ if (order2 && isEditing) {
1328
+ const { tp_trigger_price, sl_trigger_price } = utils.findTPSLFromOrder(order2);
1329
+ const { tp_order_price, sl_order_price } = utils.findTPSLOrderPriceFromOrder(order2);
1330
+ if (tp_trigger_price !== Number(tpslOrder.tp_trigger_price) && typeof typeof tpslOrder.tp_trigger_price !== "undefined") {
1331
+ diff = 2;
1332
+ }
1333
+ if (sl_trigger_price !== Number(tpslOrder.sl_trigger_price) && typeof tpslOrder.sl_trigger_price !== "undefined") {
1334
+ diff = 3;
1335
+ }
1336
+ if (typeof tpslOrder.tp_order_price !== "undefined" && tp_order_price !== OrderType.MARKET && tp_order_price !== Number(tpslOrder.tp_order_price)) {
1337
+ diff = 4;
1338
+ }
1339
+ if (typeof tpslOrder.sl_order_price !== "undefined" && sl_order_price !== OrderType.MARKET && sl_order_price !== Number(tpslOrder.sl_order_price)) {
1340
+ diff = 5;
1341
+ }
1342
+ }
1343
+ if (diff === 1 && !tpslOrder.tp_trigger_price && !tpslOrder.sl_trigger_price) {
1344
+ diff = -1;
1345
+ }
1346
+ return diff;
1347
+ }, [
1348
+ tpslOrder.tp_trigger_price,
1349
+ tpslOrder.tp_order_price,
1350
+ tpslOrder.sl_trigger_price,
1351
+ tpslOrder.sl_order_price,
1352
+ tpslOrder.quantity,
1353
+ order2,
1354
+ isEditing
1355
+ ]);
1356
+ useEffect(() => {
1357
+ if (!withTriggerPrice) {
1358
+ return;
1359
+ }
1360
+ if (!triggerPrice) {
1361
+ return;
1362
+ }
1363
+ if (type === "tp") {
1364
+ setValue("tp_trigger_price", triggerPrice);
1365
+ } else {
1366
+ setValue("sl_trigger_price", triggerPrice);
1367
+ }
1368
+ if (options.qty) {
1369
+ setValue("quantity", options.qty);
1370
+ }
1371
+ }, [type, triggerPrice, options.qty]);
1372
+ const cancel = () => {
1373
+ if (order2?.algo_order_id && order2?.symbol) {
1374
+ return deleteOrder(order2?.algo_order_id, order2?.symbol);
1375
+ }
1376
+ return Promise.reject("order id or symbol is invalid");
1377
+ };
1378
+ const onConfirm = (order3, options2) => {
1379
+ if (!needConfirm) {
1380
+ return Promise.resolve(true);
1381
+ }
1382
+ const maxQty2 = Math.abs(Number(position?.position_qty));
1383
+ if (`${order3.tp_trigger_price ?? ""}`.length === 0 && `${order3.sl_trigger_price ?? ""}`.length === 0) {
1384
+ return modal.confirm({
1385
+ title: t("orders.cancelOrder"),
1386
+ content: t("tpsl.cancelOrder.description"),
1387
+ onOk: () => {
1388
+ return options2.cancel();
1389
+ }
1390
+ }).then(
1391
+ () => {
1392
+ return true;
1393
+ },
1394
+ () => {
1395
+ return Promise.reject(false);
1396
+ }
1397
+ );
1398
+ }
1399
+ return modal.confirm({
1400
+ title: t("tpsl.confirmOrder"),
1401
+ // bodyClassName: "lg:oui-py-0",
1402
+ onOk: async () => {
1403
+ try {
1404
+ const res = await options2.submit({
1405
+ accountId: position?.account_id
1406
+ });
1407
+ if (res.success) {
1408
+ return res;
1409
+ }
1410
+ if (res.message) {
1411
+ toast.error(res.message);
1412
+ }
1413
+ return false;
1414
+ } catch (err) {
1415
+ if (err?.message) {
1416
+ toast.error(err.message);
1417
+ }
1418
+ return false;
1419
+ }
1420
+ },
1421
+ classNames: {
1422
+ body: "!oui-pb-0"
1423
+ },
1424
+ content: /* @__PURE__ */ jsx(
1425
+ PositionTPSLConfirm,
1426
+ {
1427
+ isPositionTPSL: positionType === PositionType.FULL,
1428
+ isEditing,
1429
+ symbol: order3.symbol,
1430
+ qty: Number(order3.quantity),
1431
+ maxQty: maxQty2,
1432
+ tpPrice: Number(order3.tp_trigger_price),
1433
+ slPrice: Number(order3.sl_trigger_price),
1434
+ side: order3.side,
1435
+ orderInfo: order3,
1436
+ quoteDP: symbolInfo[symbol]("quote_dp") ?? 2,
1437
+ baseDP: symbolInfo[symbol]("base_dp") ?? 2
1438
+ }
1439
+ )
1440
+ }).then(
1441
+ () => {
1442
+ return true;
1443
+ },
1444
+ () => {
1445
+ return Promise.reject(false);
1446
+ }
1447
+ );
1448
+ };
1449
+ const onSubmit = async () => {
1450
+ try {
1451
+ const validOrder = await validate();
1452
+ if (validOrder) {
1453
+ if (!needConfirm) {
1454
+ return submit({ accountId: position?.account_id }).then(() => true).catch((err) => {
1455
+ if (err?.message) {
1456
+ toast.error(err.message);
1457
+ }
1458
+ throw false;
1459
+ });
1460
+ }
1461
+ return onConfirm(tpslOrder, {
1462
+ position,
1463
+ submit,
1464
+ cancel
1465
+ });
1466
+ }
1467
+ } catch (error) {
1468
+ return Promise.reject(error);
1469
+ }
1470
+ };
1471
+ return {
1472
+ isEditing,
1473
+ symbolInfo: symbolInfo[symbol],
1474
+ maxQty,
1475
+ setQuantity: useMemoizedFn(setQuantity),
1476
+ orderQuantity: tpslOrder.quantity,
1477
+ // isPosition: isPositionTPSL,
1478
+ TPSL_OrderEntity: tpslOrder,
1479
+ setOrderValue: setValue,
1480
+ setPnL,
1481
+ setOrderPrice,
1482
+ // needConfirm,
1483
+ onSubmit,
1484
+ metaState,
1485
+ errors,
1486
+ status: {
1487
+ isCreateMutating,
1488
+ isUpdateMutating
1489
+ },
1490
+ position,
1491
+ setValues
1492
+ };
1493
+ };
1494
+ var TPSLWidget = (props) => {
1495
+ const { onCancel, onComplete, ...rest } = props;
1496
+ const state = useTPSLBuilder(rest);
1497
+ return /* @__PURE__ */ jsx(
1498
+ TPSL,
1499
+ {
1500
+ ...state,
1501
+ onCancel,
1502
+ onComplete,
1503
+ close: rest.close
1504
+ }
1505
+ );
1506
+ };
1507
+ var TPSLSheetId = "TPSLSheetId";
1508
+ var TPSLDialogId = "TPSLDialogId";
1509
+ registerSimpleSheet(TPSLSheetId, TPSLWidget);
1510
+ registerSimpleDialog(TPSLDialogId, TPSLWidget, {
1511
+ classNames: {
1512
+ content: "oui-w-[420px]"
1513
+ }
1514
+ });
1515
+ var PositionTPSLPopover = (props) => {
1516
+ const { position, order: order2, baseDP, quoteDP, buttonProps, isEditing } = props;
1517
+ const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
1518
+ const { t } = useTranslation();
1519
+ const isPositionTPSL = isEditing ? order2?.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL : void 0;
1520
+ const onEdit = () => {
1521
+ modal.show(TPSLDialogId, {
1522
+ order: order2,
1523
+ symbol: position.symbol,
1524
+ baseDP,
1525
+ quoteDP,
1526
+ positionType: isPositionTPSL ? PositionType.FULL : PositionType.PARTIAL,
1527
+ isEditing
1528
+ });
1529
+ };
1530
+ return /* @__PURE__ */ jsx(Box, { onClick: onEdit, className: "oui-cursor-pointer", children: props.children || /* @__PURE__ */ jsx(
1531
+ Button,
1532
+ {
1533
+ variant: "outlined",
1534
+ size: "sm",
1535
+ color: "secondary",
1536
+ ...buttonProps,
1537
+ children: props.label
1538
+ }
1539
+ ) });
1540
+ };
1541
+ var PositionTPSLSheet = (props) => {
1542
+ const { order: order2, isEditing } = props;
1543
+ const { hide } = useModal();
1544
+ const isPositionTPSL = isEditing ? order2?.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL : void 0;
1545
+ return /* @__PURE__ */ jsx(
1546
+ TPSLWidget,
1547
+ {
1548
+ ...props,
1549
+ positionType: props.positionType ?? (isPositionTPSL ? PositionType.FULL : PositionType.PARTIAL),
1550
+ onCancel: hide
1551
+ }
1552
+ );
1553
+ };
1554
+ var TPSLAdvancedUI = (props) => {
1555
+ const { t } = useTranslation();
1556
+ const { errors, validated } = props.metaState;
1557
+ const {
1558
+ formattedOrder,
1559
+ setValue: setOrderValue,
1560
+ symbolInfo,
1561
+ setValues
1562
+ } = props;
1563
+ const [tpValues, setTpValuse] = useState({
1564
+ enable: false,
1565
+ order_type: formattedOrder.tp_order_type ?? OrderType.MARKET,
1566
+ order_price: formattedOrder.tp_order_price ?? "",
1567
+ trigger_price: formattedOrder.tp_trigger_price ?? "",
1568
+ PnL: formattedOrder.tp_pnl ?? "",
1569
+ Offset: formattedOrder.tp_offset ?? "",
1570
+ "Offset%": formattedOrder.tp_offset_percentage ?? "",
1571
+ ROI: formattedOrder.tp_ROI ?? ""
1572
+ });
1573
+ const [slValues, setSlValues] = useState({
1574
+ enable: false,
1575
+ order_type: formattedOrder.sl_order_type ?? OrderType.MARKET,
1576
+ order_price: formattedOrder.sl_order_price ?? "",
1577
+ trigger_price: formattedOrder.sl_trigger_price ?? "",
1578
+ PnL: formattedOrder.sl_pnl ?? "",
1579
+ Offset: formattedOrder.sl_offset ?? "",
1580
+ "Offset%": formattedOrder.sl_offset_percentage ?? "",
1581
+ ROI: formattedOrder.sl_ROI ?? ""
1582
+ });
1583
+ useEffect(() => {
1584
+ setTpValuse((prev) => ({
1585
+ ...prev,
1586
+ // enable: formattedOrder.tp_enable ?? false,
1587
+ order_type: formattedOrder.tp_order_type ?? OrderType.MARKET,
1588
+ order_price: formattedOrder.tp_order_price ?? "",
1589
+ trigger_price: formattedOrder.tp_trigger_price ?? "",
1590
+ PnL: formattedOrder.tp_pnl ?? "",
1591
+ Offset: formattedOrder.tp_offset ?? "",
1592
+ "Offset%": formattedOrder.tp_offset_percentage ?? "",
1593
+ ROI: formattedOrder.tp_ROI ?? ""
1594
+ }));
1595
+ }, [formattedOrder]);
1596
+ useEffect(() => {
1597
+ setSlValues((prev) => ({
1598
+ ...prev,
1599
+ // enable: formattedOrder.sl_enable ?? false,
1600
+ order_type: formattedOrder.sl_order_type ?? OrderType.MARKET,
1601
+ order_price: formattedOrder.sl_order_price ?? "",
1602
+ trigger_price: formattedOrder.sl_trigger_price ?? "",
1603
+ PnL: formattedOrder.sl_pnl ?? "",
1604
+ Offset: formattedOrder.sl_offset ?? "",
1605
+ "Offset%": formattedOrder.sl_offset_percentage ?? "",
1606
+ ROI: formattedOrder.sl_ROI ?? ""
1607
+ }));
1608
+ }, [formattedOrder]);
1609
+ const tpslEnable = formattedOrder.tp_trigger_price || formattedOrder.sl_trigger_price;
1610
+ return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-h-full oui-flex-col oui-justify-between oui-rounded-[16px] oui-py-3", children: [
1611
+ /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsxs(
1612
+ Flex,
1613
+ {
1614
+ className: "oui-mb-5 oui-cursor-pointer oui-text-base oui-text-base-contrast-80",
1615
+ gap: 1,
1616
+ itemAlign: "center",
1617
+ onClick: props.onClose,
1618
+ children: [
1619
+ /* @__PURE__ */ jsx(ArrowRightIcon, { className: " oui-text-base-contrast-80" }),
1620
+ /* @__PURE__ */ jsx(Text, { children: t("common.tpsl") })
1621
+ ]
1622
+ }
1623
+ ) }),
1624
+ /* @__PURE__ */ jsxs(ScrollArea, { className: "oui-flex-1", children: [
1625
+ /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsx(
1626
+ OrderInfo,
1627
+ {
1628
+ order: formattedOrder,
1629
+ baseDP: symbolInfo.base_dp,
1630
+ quoteDP: symbolInfo.quote_dp,
1631
+ symbolLeverage: props.symbolLeverage
1632
+ }
1633
+ ) }),
1634
+ /* @__PURE__ */ jsx(Divider, { className: "oui-my-3" }),
1635
+ /* @__PURE__ */ jsxs("div", { className: "oui-px-3", children: [
1636
+ /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[6px]", children: [
1637
+ /* @__PURE__ */ jsx(
1638
+ Button,
1639
+ {
1640
+ onClick: () => {
1641
+ setOrderValue("side", OrderSide.BUY);
1642
+ },
1643
+ size: "sm",
1644
+ fullWidth: true,
1645
+ "data-type": OrderSide.BUY,
1646
+ className: cn(
1647
+ formattedOrder.side === 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"
1648
+ ),
1649
+ "data-testid": "oui-testid-orderEntry-side-buy-button",
1650
+ children: t("common.buy")
1651
+ }
1652
+ ),
1653
+ /* @__PURE__ */ jsx(
1654
+ Button,
1655
+ {
1656
+ onClick: () => {
1657
+ setOrderValue("side", OrderSide.SELL);
1658
+ },
1659
+ "data-type": OrderSide.SELL,
1660
+ fullWidth: true,
1661
+ size: "sm",
1662
+ className: cn(
1663
+ formattedOrder.side === 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"
1664
+ ),
1665
+ "data-testid": "oui-testid-orderEntry-side-sell-button",
1666
+ children: t("common.sell")
1667
+ }
1668
+ )
1669
+ ] }),
1670
+ /* @__PURE__ */ jsxs("div", { className: "oui-py-3", children: [
1671
+ /* @__PURE__ */ jsx(
1672
+ TPSLPositionTypeWidget,
1673
+ {
1674
+ value: formattedOrder.position_type ?? PositionType.PARTIAL,
1675
+ onChange: (key, value) => {
1676
+ if (value === PositionType.FULL) {
1677
+ setValues({
1678
+ position_type: PositionType.FULL,
1679
+ tp_order_type: OrderType.MARKET,
1680
+ tp_order_price: void 0,
1681
+ sl_order_type: OrderType.MARKET,
1682
+ sl_order_price: void 0
1683
+ });
1684
+ return;
1685
+ }
1686
+ setOrderValue("position_type", value);
1687
+ }
1688
+ }
1689
+ ),
1690
+ formattedOrder.position_type === PositionType.FULL && /* @__PURE__ */ jsxs(
1691
+ Flex,
1692
+ {
1693
+ justify: "start",
1694
+ itemAlign: "start",
1695
+ gap: 2,
1696
+ className: "oui-mt-3 oui-w-full",
1697
+ children: [
1698
+ /* @__PURE__ */ jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]" }),
1699
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-[#D25f00]", children: t("tpsl.positionType.full.tips.market") })
1700
+ ]
1701
+ }
1702
+ )
1703
+ ] }),
1704
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, children: [
1705
+ /* @__PURE__ */ jsx(
1706
+ TPSLInputRowWidget,
1707
+ {
1708
+ rootOrderPrice: formattedOrder.order_price,
1709
+ symbol: symbolInfo.symbol,
1710
+ type: "tp",
1711
+ side: formattedOrder.side,
1712
+ values: tpValues,
1713
+ errors: validated ? errors : null,
1714
+ quote_dp: symbolInfo.quote_dp,
1715
+ hideOrderPrice: formattedOrder.position_type === PositionType.FULL,
1716
+ onChange: (key, value) => {
1717
+ setOrderValue(key, value);
1718
+ },
1719
+ positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
1720
+ symbolLeverage: props.symbolLeverage
1721
+ }
1722
+ ),
1723
+ /* @__PURE__ */ jsx(
1724
+ TPSLInputRowWidget,
1725
+ {
1726
+ rootOrderPrice: formattedOrder.order_price,
1727
+ symbol: symbolInfo.symbol,
1728
+ type: "sl",
1729
+ side: formattedOrder.side,
1730
+ values: slValues,
1731
+ hideOrderPrice: formattedOrder.position_type === PositionType.FULL,
1732
+ errors: validated ? errors : null,
1733
+ quote_dp: symbolInfo.quote_dp,
1734
+ positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
1735
+ onChange: (key, value) => {
1736
+ setOrderValue(key, value);
1737
+ },
1738
+ symbolLeverage: props.symbolLeverage
1739
+ }
1740
+ )
1741
+ ] }),
1742
+ /* @__PURE__ */ jsx(
1743
+ PnlInfo,
1744
+ {
1745
+ tp_pnl: formattedOrder.tp_pnl,
1746
+ sl_pnl: formattedOrder.sl_pnl,
1747
+ className: "oui-mt-6"
1748
+ }
1749
+ )
1750
+ ] })
1751
+ ] }),
1752
+ /* @__PURE__ */ jsxs(Flex, { className: "oui-mt-6 oui-px-3", gap: 2, children: [
1753
+ /* @__PURE__ */ jsx(
1754
+ Button,
1755
+ {
1756
+ size: "md",
1757
+ fullWidth: true,
1758
+ color: "gray",
1759
+ variant: "outlined",
1760
+ className: "oui-text-base-contrast-36",
1761
+ onClick: props.onClose,
1762
+ children: t("common.cancel")
1763
+ }
1764
+ ),
1765
+ /* @__PURE__ */ jsx(
1766
+ Button,
1767
+ {
1768
+ size: "md",
1769
+ fullWidth: true,
1770
+ color: "success",
1771
+ className: cn(
1772
+ formattedOrder.side === 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"
1773
+ ),
1774
+ onClick: props.onSubmit,
1775
+ disabled: !tpslEnable,
1776
+ children: t("tpsl.advanced.submit")
1777
+ }
1778
+ )
1779
+ ] })
1780
+ ] });
1781
+ };
1782
+ var ArrowRightIcon = (props) => {
1783
+ return /* @__PURE__ */ jsx(
1784
+ "svg",
1785
+ {
1786
+ xmlns: "http://www.w3.org/2000/svg",
1787
+ width: "14",
1788
+ height: "14",
1789
+ viewBox: "0 0 14 14",
1790
+ fill: "currentColor",
1791
+ ...props,
1792
+ children: /* @__PURE__ */ 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" })
1793
+ }
1794
+ );
1795
+ };
1796
+ var useTPSLAdvanced = (props) => {
1797
+ const { order: order2, setOrderValue, onClose } = props;
1798
+ const [innerMetaState, setInnerMetaState] = useState(null);
1799
+ const {
1800
+ formattedOrder,
1801
+ setValue,
1802
+ setValues,
1803
+ helper,
1804
+ symbolInfo,
1805
+ metaState,
1806
+ ...state
1807
+ } = useOrderEntry(order2.symbol, {
1808
+ initialOrder: {
1809
+ symbol: order2.symbol,
1810
+ order_type: order2.order_type,
1811
+ side: order2.side,
1812
+ order_price: order2.order_price,
1813
+ order_quantity: order2.order_quantity,
1814
+ position_type: order2.position_type ?? PositionType.PARTIAL,
1815
+ trigger_price: order2.trigger_price,
1816
+ // tp_enable: isTPSLEnable(order, "tp"),
1817
+ // sl_enable: isTPSLEnable(order, "sl"),
1818
+ tp_trigger_price: order2.tp_trigger_price,
1819
+ sl_trigger_price: order2.sl_trigger_price,
1820
+ tp_order_price: order2.tp_order_price,
1821
+ sl_order_price: order2.sl_order_price,
1822
+ tp_order_type: order2.tp_order_type,
1823
+ sl_order_type: order2.sl_order_type,
1824
+ sl_pnl: order2.sl_pnl,
1825
+ sl_offset: order2.sl_offset,
1826
+ sl_offset_percentage: order2.sl_offset_percentage,
1827
+ tp_pnl: order2.tp_pnl,
1828
+ tp_offset: order2.tp_offset,
1829
+ tp_offset_percentage: order2.tp_offset_percentage
1830
+ }
1831
+ });
1832
+ const onSubmit = () => {
1833
+ helper.validate().then(() => {
1834
+ props.onSubmit(formattedOrder);
1835
+ }).catch((err) => {
1836
+ });
1837
+ };
1838
+ return {
1839
+ order: order2,
1840
+ formattedOrder,
1841
+ symbolInfo,
1842
+ setValue,
1843
+ setValues,
1844
+ onSubmit,
1845
+ onClose,
1846
+ metaState,
1847
+ symbolLeverage: props.symbolLeverage
1848
+ };
1849
+ };
1850
+ var TPSLAdvancedWidget = (props) => {
1851
+ const state = useTPSLAdvanced({
1852
+ order: props.order,
1853
+ setOrderValue: props.setOrderValue,
1854
+ onSubmit: props.onSubmit,
1855
+ onClose: props.onClose,
1856
+ symbolLeverage: props.symbolLeverage
1857
+ });
1858
+ return /* @__PURE__ */ jsx(TPSLAdvancedUI, { ...state });
1859
+ };
1860
+ var TPSLAdvancedSheetId = "TPSLAdvancedSheetId";
1861
+ var TPSLAdvancedDialogId = "TPSLAdvancedDialogId";
1862
+ registerSimpleSheet(TPSLAdvancedSheetId, TPSLAdvancedWidget, {
1863
+ title: () => i18n.t("common.settings")
1864
+ });
1865
+ registerSimpleDialog(TPSLAdvancedDialogId, TPSLAdvancedWidget, {
1866
+ title: () => i18n.t("common.settings")
1867
+ });
1868
+ var useTPSLDetail = (props) => {
1869
+ const { position } = props;
1870
+ const symbol = position.symbol;
1871
+ const symbolInfo = useSymbolsInfo()[symbol];
1872
+ const { isMobile } = useScreen();
1873
+ const { t } = useTranslation();
1874
+ const [fullPositionOrders, setFullPositionOrders] = useState(
1875
+ []
1876
+ );
1877
+ const [partialPositionOrders, setPartialPositionOrders] = useState([]);
1878
+ const [tpslOrders, { cancelAlgoOrder, cancelPostionOrdersByTypes, refresh }] = useOrderStream(
1879
+ {
1880
+ symbol: position.symbol,
1881
+ status: OrderStatus.INCOMPLETE,
1882
+ includes: [AlgoOrderRootType.POSITIONAL_TP_SL, AlgoOrderRootType.TP_SL],
1883
+ size: 500
1884
+ },
1885
+ {
1886
+ keeplive: true
1887
+ }
1888
+ );
1889
+ const onCancelOrder = async (order2) => {
1890
+ return await cancelAlgoOrder(order2.algo_order_id, order2.symbol);
1891
+ };
1892
+ const onCancelAllTPSLOrders = async () => {
1893
+ return await cancelPostionOrdersByTypes(symbol, [AlgoOrderRootType.TP_SL]);
1894
+ };
1895
+ const showTPSLDialog = ({
1896
+ order: order2,
1897
+ positionType,
1898
+ isEditing
1899
+ }) => {
1900
+ const dialogId = isMobile ? TPSLSheetId : TPSLDialogId;
1901
+ modal.show(dialogId, {
1902
+ order: order2,
1903
+ symbol: position.symbol,
1904
+ positionType,
1905
+ isEditing
1906
+ });
1907
+ };
1908
+ const editTPSLOrder = (order2, positionType) => {
1909
+ showTPSLDialog({ order: order2, positionType, isEditing: true });
1910
+ };
1911
+ const addTPSLOrder = (positionType) => {
1912
+ showTPSLDialog({ positionType, isEditing: false });
1913
+ };
1914
+ useEffect(() => {
1915
+ if (tpslOrders) {
1916
+ const { fullPositionOrder, partialPositionOrders: partialPositionOrders2 } = findPositionTPSLFromOrders(tpslOrders, symbol);
1917
+ setFullPositionOrders(fullPositionOrder ? [fullPositionOrder] : []);
1918
+ setPartialPositionOrders(partialPositionOrders2 ?? []);
1919
+ }
1920
+ }, [tpslOrders, symbol]);
1921
+ return {
1922
+ symbolInfo,
1923
+ position,
1924
+ symbol,
1925
+ fullPositionOrders,
1926
+ partialPositionOrders,
1927
+ cancelPostionOrdersByTypes,
1928
+ onCancelOrder,
1929
+ onCancelAllTPSLOrders,
1930
+ editTPSLOrder,
1931
+ addTPSLOrder
1932
+ };
1933
+ };
1934
+ var TPSLDetailContext = createContext({});
1935
+ var TPSLDetailProvider = (props) => {
1936
+ const symbolInfo = useSymbolsInfo()[props.symbol];
1937
+ return /* @__PURE__ */ jsx(
1938
+ TPSLDetailContext.Provider,
1939
+ {
1940
+ value: {
1941
+ base_dp: symbolInfo("base_dp"),
1942
+ quote_dp: symbolInfo("quote_dp"),
1943
+ position: props.position
1944
+ },
1945
+ children: props.children
1946
+ }
1947
+ );
1948
+ };
1949
+ var useTPSLDetailContext = () => {
1950
+ return useContext(TPSLDetailContext);
1951
+ };
1952
+ var FlexCell = (props) => {
1953
+ return /* @__PURE__ */ jsx(
1954
+ Flex,
1955
+ {
1956
+ direction: "column",
1957
+ justify: "center",
1958
+ itemAlign: "start",
1959
+ className: "oui-text-2xs oui-h-[36px]",
1960
+ children: props.children
1961
+ }
1962
+ );
1963
+ };
1964
+ var EstPnlRender = ({ order: order2 }) => {
1965
+ const { position, base_dp, quote_dp } = useTPSLDetailContext();
1966
+ const { tp_trigger_price, sl_trigger_price } = findTPSLFromOrder(order2);
1967
+ let tp_unrealPnl = void 0;
1968
+ let sl_unrealPnl = void 0;
1969
+ const qty = new Decimal(order2.quantity).eq(0) ? position.position_qty : order2.quantity;
1970
+ const side = position.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL;
1971
+ const openPrice = position?.average_open_price;
1972
+ if (tp_trigger_price) {
1973
+ const direction = getTPSLDirection({
1974
+ side,
1975
+ type: "tp",
1976
+ closePrice: tp_trigger_price,
1977
+ orderPrice: openPrice
1978
+ });
1979
+ tp_unrealPnl = formatNum.pnl(
1980
+ positions.unrealizedPnL({
1981
+ qty,
1982
+ openPrice,
1983
+ // markPrice: unRealizedPrice,
1984
+ markPrice: tp_trigger_price
1985
+ })
1986
+ )?.abs().mul(direction).toNumber();
1987
+ }
1988
+ if (sl_trigger_price) {
1989
+ const direction = getTPSLDirection({
1990
+ side,
1991
+ type: "sl",
1992
+ closePrice: sl_trigger_price,
1993
+ orderPrice: openPrice
1994
+ });
1995
+ sl_unrealPnl = formatNum.pnl(
1996
+ positions.unrealizedPnL({
1997
+ qty,
1998
+ openPrice,
1999
+ // markPrice: unRealizedPrice,
2000
+ markPrice: sl_trigger_price
2001
+ })
2002
+ )?.abs().mul(direction).toNumber();
2003
+ }
2004
+ return /* @__PURE__ */ jsxs(
2005
+ Flex,
2006
+ {
2007
+ gap: 2,
2008
+ direction: "column",
2009
+ justify: "between",
2010
+ itemAlign: "start",
2011
+ className: "oui-text-2xs",
2012
+ children: [
2013
+ tp_unrealPnl && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx(Text.numeral, { dp: 2, rm: Decimal.ROUND_DOWN, coloring: true, padding: false, children: tp_unrealPnl }) }),
2014
+ sl_unrealPnl && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx(Text.numeral, { dp: 2, rm: Decimal.ROUND_DOWN, coloring: true, padding: false, children: sl_unrealPnl }) })
2015
+ ]
2016
+ }
2017
+ );
2018
+ };
2019
+ var OrderPriceRender = ({ order: order2 }) => {
2020
+ const { quote_dp } = useTPSLDetailContext();
2021
+ const { tp_order_price, sl_order_price } = findTPSLOrderPriceFromOrder(order2);
2022
+ const { t } = useTranslation();
2023
+ return /* @__PURE__ */ jsxs(
2024
+ Flex,
2025
+ {
2026
+ gap: 2,
2027
+ direction: "column",
2028
+ justify: "between",
2029
+ itemAlign: "start",
2030
+ className: "oui-text-2xs",
2031
+ children: [
2032
+ tp_order_price && /* @__PURE__ */ jsx(FlexCell, { children: tp_order_price === OrderType.MARKET ? /* @__PURE__ */ jsx(Text, { children: t("common.market") }) : /* @__PURE__ */ jsx(Text.numeral, { dp: quote_dp, rm: Decimal.ROUND_DOWN, padding: false, children: tp_order_price }) }),
2033
+ sl_order_price && /* @__PURE__ */ jsx(FlexCell, { children: sl_order_price === OrderType.MARKET ? /* @__PURE__ */ jsx(Text, { children: t("common.market") }) : /* @__PURE__ */ jsx(Text.numeral, { dp: quote_dp, rm: Decimal.ROUND_DOWN, padding: false, children: sl_order_price }) })
2034
+ ]
2035
+ }
2036
+ );
2037
+ };
2038
+ var QtyRender = ({ order: order2 }) => {
2039
+ const { position, base_dp } = useTPSLDetailContext();
2040
+ const { tp_trigger_price, sl_trigger_price } = findTPSLFromOrder(order2);
2041
+ const quantity = useMemo(() => {
2042
+ if (order2.quantity === 0) {
2043
+ return -position.position_qty;
2044
+ }
2045
+ return position.position_qty > 0 ? -order2.quantity : order2.quantity;
2046
+ }, [order2.quantity, position.position_qty]);
2047
+ return /* @__PURE__ */ jsxs(
2048
+ Flex,
2049
+ {
2050
+ direction: "column",
2051
+ justify: "start",
2052
+ itemAlign: "start",
2053
+ className: "oui-h-full oui-text-2xs",
2054
+ children: [
2055
+ /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, rm: Decimal.ROUND_DOWN, padding: false, children: quantity }) }),
2056
+ tp_trigger_price && sl_trigger_price && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx("div", {}) })
2057
+ ]
2058
+ }
2059
+ );
2060
+ };
2061
+ var TriggerPrice = ({ order: order2 }) => {
2062
+ const { quote_dp } = useTPSLDetailContext();
2063
+ const { tp_trigger_price, sl_trigger_price } = findTPSLFromOrder(order2);
2064
+ const { t } = useTranslation();
2065
+ return /* @__PURE__ */ jsxs(
2066
+ Flex,
2067
+ {
2068
+ gap: 1,
2069
+ direction: "column",
2070
+ justify: "between",
2071
+ itemAlign: "start",
2072
+ className: "oui-text-2xs",
2073
+ children: [
2074
+ tp_trigger_price && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justify: "start", itemAlign: "start", children: [
2075
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36", children: t("common.market") }),
2076
+ /* @__PURE__ */ jsx(Text.numeral, { dp: quote_dp, rm: Decimal.ROUND_DOWN, padding: false, children: tp_trigger_price })
2077
+ ] }) }),
2078
+ sl_trigger_price && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justify: "start", itemAlign: "start", children: [
2079
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36", children: t("common.market") }),
2080
+ /* @__PURE__ */ jsx(Text.numeral, { dp: quote_dp, rm: Decimal.ROUND_DOWN, padding: false, children: sl_trigger_price })
2081
+ ] }) })
2082
+ ]
2083
+ }
2084
+ );
2085
+ };
2086
+ var TypeRender = ({ order: order2 }) => {
2087
+ const { tp_trigger_price, sl_trigger_price } = findTPSLFromOrder(order2);
2088
+ const { t } = useTranslation();
2089
+ return /* @__PURE__ */ jsxs(
2090
+ Flex,
2091
+ {
2092
+ direction: "column",
2093
+ justify: "between",
2094
+ itemAlign: "start",
2095
+ className: "oui-text-2xs",
2096
+ children: [
2097
+ tp_trigger_price && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx(Text, { className: "oui-text-trade-profit", children: t("tpsl.tp") }) }),
2098
+ sl_trigger_price && /* @__PURE__ */ jsx(FlexCell, { children: /* @__PURE__ */ jsx(Text, { className: "oui-text-trade-loss", children: t("tpsl.sl") }) })
2099
+ ]
2100
+ }
2101
+ );
2102
+ };
2103
+ var useColumn = (props) => {
2104
+ const { t } = useTranslation();
2105
+ const { isMobile } = useScreen();
2106
+ const { onCancelOrder } = props;
2107
+ const columns = useMemo(() => {
2108
+ const moblieColumns = [
2109
+ {
2110
+ title: t("tpsl.tpslDetail.qty"),
2111
+ dataIndex: "quantity",
2112
+ width: 70,
2113
+ className: "oui-py-2",
2114
+ render: (_, record) => /* @__PURE__ */ jsx(QtyRender, { order: record })
2115
+ },
2116
+ {
2117
+ title: t("common.type"),
2118
+ dataIndex: "type",
2119
+ width: 35,
2120
+ className: "oui-pl-1 oui-py-2",
2121
+ render: (_, record) => /* @__PURE__ */ jsx(TypeRender, { order: record })
2122
+ },
2123
+ {
2124
+ title: t("common.trigger"),
2125
+ dataIndex: "trigger",
2126
+ width: 70,
2127
+ className: "oui-pl-1 oui-py-2",
2128
+ render: (_, record) => {
2129
+ return /* @__PURE__ */ jsx(TriggerPrice, { order: record });
2130
+ }
2131
+ },
2132
+ {
2133
+ title: t("common.price"),
2134
+ dataIndex: "price",
2135
+ width: 70,
2136
+ className: "oui-py-2",
2137
+ render: (_, record) => /* @__PURE__ */ jsx(OrderPriceRender, { order: record })
2138
+ },
2139
+ {
2140
+ title: /* @__PURE__ */ jsx(
2141
+ Tooltip,
2142
+ {
2143
+ className: "oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",
2144
+ content: t("tpsl.tpslDetail.estPnl.tooltip"),
2145
+ children: /* @__PURE__ */ jsx(Text, { className: "oui-underline oui-decoration-dashed oui-underline-offset-2", children: t("tpsl.tpslDetail.estPnl") })
2146
+ }
2147
+ ),
2148
+ dataIndex: "estpnl",
2149
+ width: 70,
2150
+ className: "!oui-pr-0 oui-py-2",
2151
+ render: (_, record) => /* @__PURE__ */ jsx(EstPnlRender, { order: record })
2152
+ }
2153
+ ];
2154
+ const desktopColums = [
2155
+ {
2156
+ title: t("tpsl.tpslDetail.qty"),
2157
+ dataIndex: "quantity",
2158
+ width: 70,
2159
+ className: cn(" oui-py-2 !oui-pl-5"),
2160
+ render: (_, record) => /* @__PURE__ */ jsx(QtyRender, { order: record })
2161
+ },
2162
+ {
2163
+ title: t("common.type"),
2164
+ dataIndex: "type",
2165
+ width: 35,
2166
+ className: "oui-pl-1 oui-py-2",
2167
+ render: (_, record) => /* @__PURE__ */ jsx(TypeRender, { order: record })
2168
+ },
2169
+ {
2170
+ title: t("common.trigger"),
2171
+ dataIndex: "trigger",
2172
+ width: 70,
2173
+ className: "oui-pl-1 oui-py-2",
2174
+ render: (_, record) => {
2175
+ return /* @__PURE__ */ jsx(TriggerPrice, { order: record });
2176
+ }
2177
+ },
2178
+ {
2179
+ title: t("common.price"),
2180
+ dataIndex: "price",
2181
+ width: 70,
2182
+ className: "oui-pl-1 oui-py-2",
2183
+ render: (_, record) => /* @__PURE__ */ jsx(OrderPriceRender, { order: record })
2184
+ },
2185
+ {
2186
+ title: /* @__PURE__ */ jsx(
2187
+ Tooltip,
2188
+ {
2189
+ className: "oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",
2190
+ content: t("tpsl.tpslDetail.estPnl.tooltip"),
2191
+ children: /* @__PURE__ */ jsx(Text, { className: "oui-underline oui-decoration-dashed oui-underline-offset-2", children: t("tpsl.tpslDetail.estPnl") })
2192
+ }
2193
+ ),
2194
+ dataIndex: "estpnl",
2195
+ width: 70,
2196
+ className: "oui-pl-1 oui-py-2",
2197
+ render: (_, record) => /* @__PURE__ */ jsx(EstPnlRender, { order: record })
2198
+ },
2199
+ {
2200
+ title: "",
2201
+ dataIndex: "delete",
2202
+ width: 50,
2203
+ className: cn("oui-py-2 !oui-pr-5"),
2204
+ render: (_, record) => {
2205
+ return /* @__PURE__ */ jsx(CancelAllBtn, { order: record, onCancelOrder });
2206
+ }
2207
+ }
2208
+ ];
2209
+ if (isMobile) {
2210
+ return moblieColumns;
2211
+ }
2212
+ return desktopColums;
2213
+ }, [t, isMobile]);
2214
+ return columns;
2215
+ };
2216
+ var DeleteIcon = (props) => {
2217
+ const { size = 18 } = props;
2218
+ return /* @__PURE__ */ jsx(
2219
+ "svg",
2220
+ {
2221
+ xmlns: "http://www.w3.org/2000/svg",
2222
+ width: size,
2223
+ height: size,
2224
+ viewBox: "0 0 18 18",
2225
+ fill: "currentColor",
2226
+ ...props,
2227
+ children: /* @__PURE__ */ 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" })
2228
+ }
2229
+ );
2230
+ };
2231
+ var CancelAllBtn = (props) => {
2232
+ const [loading, setLoading] = useState(false);
2233
+ return /* @__PURE__ */ jsx(
2234
+ ThrottledButton,
2235
+ {
2236
+ size: "sm",
2237
+ loading,
2238
+ variant: "text",
2239
+ color: "gray",
2240
+ onClick: (e) => {
2241
+ e.stopPropagation();
2242
+ setLoading(true);
2243
+ props.onCancelOrder?.(props.order).then(
2244
+ () => {
2245
+ },
2246
+ (error) => {
2247
+ toast.error(error.message);
2248
+ }
2249
+ ).finally(() => {
2250
+ setLoading(false);
2251
+ });
2252
+ },
2253
+ children: /* @__PURE__ */ jsx(DeleteIcon, { className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer" })
2254
+ }
2255
+ );
2256
+ };
2257
+ var OrdersTable = (props) => {
2258
+ const { orders } = props;
2259
+ const columns = useColumn({ onCancelOrder: props.onCancelOrder });
2260
+ return (
2261
+ // <ScrollArea className={cn( props.className)}>
2262
+ /* @__PURE__ */ jsx(
2263
+ AuthGuardDataTable,
2264
+ {
2265
+ columns,
2266
+ dataSource: orders,
2267
+ className: "oui-bg-transparent oui-text-2xs",
2268
+ bordered: true,
2269
+ classNames: {
2270
+ root: cn(props.className),
2271
+ header: "!oui-bg-base-8",
2272
+ scroll: cn(
2273
+ !orders || orders.length === 0 ? "!oui-min-h-[170px]" : "!oui-min-h-[100px]"
2274
+ )
2275
+ },
2276
+ onRow: (record) => {
2277
+ return {
2278
+ className: cn(
2279
+ "oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"
2280
+ ),
2281
+ onClick: () => {
2282
+ props.editTPSLOrder(record);
2283
+ }
2284
+ };
2285
+ }
2286
+ }
2287
+ )
2288
+ );
2289
+ };
2290
+ var OrdersTableMobile = (props) => {
2291
+ const { t } = useTranslation();
2292
+ const { orders } = props;
2293
+ const columns = useColumn({ onCancelOrder: () => Promise.resolve() });
2294
+ const orderIds = useMemo(() => {
2295
+ return orders.reduce(
2296
+ (acc, curr) => {
2297
+ acc[curr.algo_order_id] = true;
2298
+ return acc;
2299
+ },
2300
+ {}
2301
+ );
2302
+ }, [orders]);
2303
+ return /* @__PURE__ */ jsx(
2304
+ AuthGuardDataTable,
2305
+ {
2306
+ columns,
2307
+ dataSource: orders,
2308
+ expanded: orderIds,
2309
+ bordered: true,
2310
+ getRowCanExpand: () => true,
2311
+ expandRowRender: (row) => {
2312
+ return /* @__PURE__ */ jsxs(Flex, { gap: 2, justify: "end", children: [
2313
+ /* @__PURE__ */ jsx(
2314
+ Button,
2315
+ {
2316
+ variant: "outlined",
2317
+ size: "sm",
2318
+ color: "gray",
2319
+ className: "oui-h-6 oui-text-2xs oui-text-base-contrast-54",
2320
+ onClick: () => props.editTPSLOrder(row.original),
2321
+ children: t("common.edit")
2322
+ }
2323
+ ),
2324
+ /* @__PURE__ */ jsx(
2325
+ DeleteBtn,
2326
+ {
2327
+ order: row.original,
2328
+ onCancelOrder: props.canCancelOrder
2329
+ }
2330
+ )
2331
+ ] });
2332
+ },
2333
+ className: "oui-bg-transparent oui-px-2 oui-text-2xs",
2334
+ classNames: {
2335
+ scroll: cn(
2336
+ !orders || orders.length === 0 ? "!oui-min-h-[170px]" : "!oui-min-h-[100px]"
2337
+ )
2338
+ },
2339
+ onRow: () => {
2340
+ return {
2341
+ className: cn(
2342
+ "oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"
2343
+ )
2344
+ };
2345
+ },
2346
+ generatedRowKey: (record) => record.algo_order_id
2347
+ }
2348
+ );
2349
+ };
2350
+ var DeleteBtn = (props) => {
2351
+ const [loading, setLoading] = useState(false);
2352
+ const { t } = useTranslation();
2353
+ return /* @__PURE__ */ jsx(
2354
+ ThrottledButton,
2355
+ {
2356
+ className: "oui-h-6 oui-text-2xs oui-text-base-contrast-54",
2357
+ size: "sm",
2358
+ loading,
2359
+ variant: "outlined",
2360
+ color: "gray",
2361
+ onClick: (e) => {
2362
+ e.stopPropagation();
2363
+ setLoading(true);
2364
+ props.onCancelOrder?.(props.order).then(
2365
+ () => {
2366
+ },
2367
+ (error) => {
2368
+ toast.error(error.message);
2369
+ }
2370
+ ).finally(() => {
2371
+ setLoading(false);
2372
+ });
2373
+ },
2374
+ children: t("common.delete")
2375
+ }
2376
+ );
2377
+ };
2378
+ var TPSLDetailUI = (props) => {
2379
+ const { isMobile } = useScreen();
2380
+ const {
2381
+ position,
2382
+ fullPositionOrders,
2383
+ partialPositionOrders,
2384
+ onCancelOrder,
2385
+ onCancelAllTPSLOrders,
2386
+ editTPSLOrder,
2387
+ addTPSLOrder,
2388
+ symbolInfo
2389
+ } = props;
2390
+ return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(ScrollArea, { className: cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
2391
+ /* @__PURE__ */ jsx(
2392
+ OrderInfo,
2393
+ {
2394
+ order: {
2395
+ symbol: position.symbol,
2396
+ order_quantity: position.position_qty.toString(),
2397
+ order_price: position.average_open_price.toString()
2398
+ },
2399
+ symbolLeverage: position.leverage,
2400
+ baseDP: symbolInfo("base_dp"),
2401
+ quoteDP: symbolInfo("quote_dp"),
2402
+ classNames: {
2403
+ root: cn("oui-mb-6 oui-gap-3 oui-px-5"),
2404
+ container: "oui-gap-x-[30px]"
2405
+ }
2406
+ }
2407
+ ),
2408
+ /* @__PURE__ */ jsx(
2409
+ FullPositionPart,
2410
+ {
2411
+ position,
2412
+ orders: fullPositionOrders,
2413
+ onCancelOrder,
2414
+ onCancelAllTPSLOrders,
2415
+ editTPSLOrder,
2416
+ addTPSLOrder
2417
+ }
2418
+ ),
2419
+ /* @__PURE__ */ jsx(
2420
+ PartialPositionPart,
2421
+ {
2422
+ position,
2423
+ orders: partialPositionOrders,
2424
+ onCancelOrder,
2425
+ onCancelAllTPSLOrders,
2426
+ editTPSLOrder,
2427
+ addTPSLOrder
2428
+ }
2429
+ )
2430
+ ] }) });
2431
+ };
2432
+ var FullPositionPart = (props) => {
2433
+ const [open, setOpen] = useState(true);
2434
+ const { orders } = props;
2435
+ const { isMobile } = useScreen();
2436
+ return /* @__PURE__ */ jsxs(Box, { className: "oui-mt-6", children: [
2437
+ /* @__PURE__ */ jsxs(
2438
+ Box,
2439
+ {
2440
+ className: cn("oui-flex oui-items-center oui-justify-between oui-px-5"),
2441
+ children: [
2442
+ /* @__PURE__ */ jsx(
2443
+ PositionTypeDescription,
2444
+ {
2445
+ positionType: PositionType.FULL,
2446
+ open,
2447
+ onOpenChange: setOpen
2448
+ }
2449
+ ),
2450
+ orders && orders.length === 0 && /* @__PURE__ */ jsx(Flex, { gap: 2, children: /* @__PURE__ */ jsx(
2451
+ AddButton,
2452
+ {
2453
+ positionType: PositionType.FULL,
2454
+ position: props.position,
2455
+ addTPSLOrder: props.addTPSLOrder
2456
+ }
2457
+ ) })
2458
+ ]
2459
+ }
2460
+ ),
2461
+ /* @__PURE__ */ jsx(
2462
+ Box,
2463
+ {
2464
+ className: cn(
2465
+ "oui-overflow-hidden oui-transition-[height] oui-duration-150",
2466
+ open ? "oui-h-auto" : "oui-h-0 oui-pb-4"
2467
+ ),
2468
+ children: isMobile ? /* @__PURE__ */ jsx(
2469
+ OrdersTableMobile,
2470
+ {
2471
+ orders,
2472
+ editTPSLOrder: (order2) => props.editTPSLOrder(order2, PositionType.FULL),
2473
+ canCancelOrder: props.onCancelOrder
2474
+ }
2475
+ ) : /* @__PURE__ */ jsx(
2476
+ OrdersTable,
2477
+ {
2478
+ orders,
2479
+ editTPSLOrder: (order2) => {
2480
+ props.editTPSLOrder(order2, PositionType.FULL);
2481
+ },
2482
+ onCancelOrder: props.onCancelOrder
2483
+ }
2484
+ )
2485
+ }
2486
+ )
2487
+ ] });
2488
+ };
2489
+ var PartialPositionPart = (props) => {
2490
+ const [open, setOpen] = useState(true);
2491
+ const { orders } = props;
2492
+ const { isMobile } = useScreen();
2493
+ return /* @__PURE__ */ jsxs(Box, { className: "oui-pt-6", children: [
2494
+ /* @__PURE__ */ jsxs(
2495
+ Box,
2496
+ {
2497
+ className: cn(
2498
+ "oui-flex oui-items-center oui-justify-between",
2499
+ "oui-px-5",
2500
+ isMobile ? "oui-flex-col oui-items-start oui-justify-start oui-gap-[11px]" : "oui-flex-row oui-items-center oui-justify-between"
2501
+ ),
2502
+ children: [
2503
+ /* @__PURE__ */ jsx(
2504
+ PositionTypeDescription,
2505
+ {
2506
+ positionType: PositionType.PARTIAL,
2507
+ open,
2508
+ onOpenChange: setOpen
2509
+ }
2510
+ ),
2511
+ /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
2512
+ /* @__PURE__ */ jsx(
2513
+ AddButton,
2514
+ {
2515
+ positionType: PositionType.PARTIAL,
2516
+ position: props.position,
2517
+ addTPSLOrder: props.addTPSLOrder
2518
+ }
2519
+ ),
2520
+ orders && orders.length > 0 && /* @__PURE__ */ jsx(
2521
+ CancelAllBtn2,
2522
+ {
2523
+ canCancelAll: orders && orders.length > 0,
2524
+ onCancelAllTPSLOrders: props.onCancelAllTPSLOrders
2525
+ }
2526
+ )
2527
+ ] })
2528
+ ]
2529
+ }
2530
+ ),
2531
+ /* @__PURE__ */ jsx(
2532
+ Box,
2533
+ {
2534
+ className: cn(
2535
+ "oui-overflow-hidden oui-transition-[height] oui-duration-150",
2536
+ open ? "oui-h-auto" : "oui-h-0 oui-pb-4"
2537
+ ),
2538
+ children: isMobile ? /* @__PURE__ */ jsx(
2539
+ OrdersTableMobile,
2540
+ {
2541
+ orders,
2542
+ editTPSLOrder: (order2) => props.editTPSLOrder(order2, PositionType.PARTIAL),
2543
+ canCancelOrder: props.onCancelOrder
2544
+ }
2545
+ ) : /* @__PURE__ */ jsx(
2546
+ OrdersTable,
2547
+ {
2548
+ className: "oui-h-[300px]",
2549
+ orders,
2550
+ editTPSLOrder: (order2) => {
2551
+ props.editTPSLOrder(order2, PositionType.PARTIAL);
2552
+ },
2553
+ onCancelOrder: props.onCancelOrder
2554
+ }
2555
+ )
2556
+ }
2557
+ )
2558
+ ] });
2559
+ };
2560
+ var PositionTypeDescription = (props) => {
2561
+ const { t } = useTranslation();
2562
+ return /* @__PURE__ */ jsxs(
2563
+ Flex,
2564
+ {
2565
+ gap: 1,
2566
+ itemAlign: "center",
2567
+ justify: "start",
2568
+ className: "oui-text-2xs",
2569
+ children: [
2570
+ /* @__PURE__ */ jsxs(
2571
+ Flex,
2572
+ {
2573
+ itemAlign: "center",
2574
+ justify: "start",
2575
+ gap: 1,
2576
+ className: "oui-cursor-pointer",
2577
+ onClick: () => props.onOpenChange(!props.open),
2578
+ children: [
2579
+ /* @__PURE__ */ jsx(
2580
+ ChevronDownIcon,
2581
+ {
2582
+ size: 12,
2583
+ color: "white",
2584
+ className: cn(
2585
+ "oui-cursor-pointer oui-transition-transform",
2586
+ props.open && "oui-rotate-180"
2587
+ )
2588
+ }
2589
+ ),
2590
+ props.positionType === PositionType.FULL ? /* @__PURE__ */ jsx(Text, { children: t("tpsl.positionType.full") }) : /* @__PURE__ */ jsx(Text, { children: t("tpsl.positionType.partial") })
2591
+ ]
2592
+ }
2593
+ ),
2594
+ /* @__PURE__ */ jsx(
2595
+ Tooltip,
2596
+ {
2597
+ className: "oui-w-[280px] oui-p-3",
2598
+ content: props.positionType === PositionType.FULL ? t("tpsl.positionType.full.tips") : t("tpsl.positionType.partial.tips"),
2599
+ children: /* @__PURE__ */ jsx(
2600
+ ExclamationFillIcon,
2601
+ {
2602
+ className: "oui-cursor-pointer oui-text-base-contrast-54",
2603
+ size: 12
2604
+ }
2605
+ )
2606
+ }
2607
+ )
2608
+ ]
2609
+ }
2610
+ );
2611
+ };
2612
+ var AddButton = (props) => {
2613
+ const { t } = useTranslation();
2614
+ const onAdd = () => {
2615
+ props.addTPSLOrder(props.positionType);
2616
+ };
2617
+ return /* @__PURE__ */ jsx(
2618
+ ThrottledButton,
2619
+ {
2620
+ variant: "outlined",
2621
+ size: "sm",
2622
+ color: "gray",
2623
+ className: "oui-h-6 oui-w-[94px] oui-text-2xs",
2624
+ onClick: onAdd,
2625
+ children: t("tpsl.add")
2626
+ }
2627
+ );
2628
+ };
2629
+ var CancelAllBtn2 = (props) => {
2630
+ const [loading, setLoading] = useState(false);
2631
+ const { t } = useTranslation();
2632
+ return /* @__PURE__ */ jsx(
2633
+ ThrottledButton,
2634
+ {
2635
+ loading,
2636
+ variant: "outlined",
2637
+ disabled: !props.canCancelAll,
2638
+ size: "sm",
2639
+ color: "gray",
2640
+ 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",
2641
+ onClick: () => {
2642
+ setLoading(true);
2643
+ props.onCancelAllTPSLOrders().then(
2644
+ () => {
2645
+ },
2646
+ (error) => {
2647
+ toast.error(error.message);
2648
+ }
2649
+ ).finally(() => {
2650
+ setLoading(false);
2651
+ });
2652
+ },
2653
+ children: t("tpsl.cancelAll")
2654
+ }
2655
+ );
2656
+ };
2657
+ var TPSLDetailWidget = (props) => {
2658
+ const state = useTPSLDetail(props);
2659
+ return /* @__PURE__ */ jsx(
2660
+ TPSLDetailProvider,
2661
+ {
2662
+ symbol: props.position.symbol,
2663
+ position: props.position,
2664
+ children: /* @__PURE__ */ jsx(TPSLDetailUI, { ...state })
2665
+ }
2666
+ );
2667
+ };
2668
+ var TPSLDetailDialogId = "TPSLDetailDialogId ";
2669
+ var TPSLDetailSheetId = "TPSLDetailSheetId";
2670
+ registerSimpleDialog(TPSLDetailDialogId, TPSLDetailWidget, {
2671
+ classNames: {
2672
+ content: "oui-w-[420px] lg:oui-pt-4 lg:oui-pb-2 !oui-px-0",
2673
+ body: "lg:oui-py-0"
2674
+ }
2675
+ });
2676
+ registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
2677
+ classNames: {
2678
+ content: "!oui-p-0"
2679
+ }
2680
+ });
2681
+ var useTPSLSimpleDialog = (options) => {
2682
+ const { type, triggerPrice, symbol } = options;
2683
+ const symbolInfo = useSymbolsInfo();
2684
+ const [{ rows: positions }, positionsInfo] = usePositionStream(symbol);
2685
+ const position = positions?.[0];
2686
+ useRef(AlgoOrderRootType.TP_SL);
2687
+ const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
2688
+ const { t } = useTranslation();
2689
+ const [
2690
+ tpslOrder,
2691
+ {
2692
+ submit,
2693
+ deleteOrder,
2694
+ setValue,
2695
+ setValues,
2696
+ validate,
2697
+ errors,
2698
+ isCreateMutating,
2699
+ isUpdateMutating
2700
+ }
2701
+ ] = useTPSLOrder(
2702
+ {
2703
+ symbol,
2704
+ position_qty: position?.position_qty,
2705
+ average_open_price: position?.average_open_price
2706
+ },
2707
+ {
2708
+ defaultOrder: void 0,
2709
+ positionType: PositionType.PARTIAL,
2710
+ // tpslEnable: { tp_enable: type === "tp", sl_enable: type === "sl" },
2711
+ isEditing: false
2712
+ }
2713
+ );
2714
+ const setQuantity = (value) => {
2715
+ setValue("quantity", value);
2716
+ };
2717
+ const setOrderPrice = (name, value) => {
2718
+ setValue(name, value);
2719
+ };
2720
+ const setPnL = (type2, value) => {
2721
+ setValue(type2, value);
2722
+ };
2723
+ const maxQty = useMemo(
2724
+ () => Math.abs(Number(position.position_qty)),
2725
+ [position.position_qty]
2726
+ );
2727
+ useEffect(() => {
2728
+ if (!maxQty) {
2729
+ return;
2730
+ }
2731
+ setValue("quantity", maxQty);
2732
+ if (type === "tp") {
2733
+ setValue("tp_trigger_price", triggerPrice ?? "");
2734
+ } else {
2735
+ setValue("sl_trigger_price", triggerPrice ?? "");
2736
+ }
2737
+ }, [type, triggerPrice, maxQty]);
2738
+ const onSubmit = async () => {
2739
+ try {
2740
+ const validOrder = await validate();
2741
+ if (validOrder) {
2742
+ if (!needConfirm) {
2743
+ return submit({ accountId: position.account_id }).then(() => true).catch((err) => {
2744
+ if (err?.message) {
2745
+ toast.error(err.message);
2746
+ }
2747
+ throw false;
2748
+ });
2749
+ }
2750
+ return modal.confirm({
2751
+ title: t("tpsl.confirmOrder"),
2752
+ // bodyClassName: "lg:oui-py-0",
2753
+ onOk: async () => {
2754
+ try {
2755
+ const res = await submit({
2756
+ accountId: position.account_id
2757
+ });
2758
+ if (res.success) {
2759
+ return res;
2760
+ }
2761
+ if (res.message) {
2762
+ toast.error(res.message);
2763
+ }
2764
+ return false;
2765
+ } catch (err) {
2766
+ if (err?.message) {
2767
+ toast.error(err.message);
2768
+ }
2769
+ return false;
2770
+ }
2771
+ },
2772
+ classNames: {
2773
+ body: "!oui-pb-0"
2774
+ },
2775
+ content: /* @__PURE__ */ jsx(
2776
+ PositionTPSLConfirm,
2777
+ {
2778
+ isPositionTPSL: false,
2779
+ isEditing: false,
2780
+ symbol,
2781
+ qty: Number(tpslOrder.quantity),
2782
+ maxQty,
2783
+ tpPrice: Number(tpslOrder.tp_trigger_price),
2784
+ slPrice: Number(tpslOrder.sl_trigger_price),
2785
+ side: tpslOrder.side,
2786
+ orderInfo: tpslOrder,
2787
+ quoteDP: symbolInfo[symbol]("quote_dp"),
2788
+ baseDP: symbolInfo[symbol]("base_dp")
2789
+ }
2790
+ )
2791
+ }).then(
2792
+ () => {
2793
+ return true;
2794
+ },
2795
+ () => {
2796
+ return Promise.reject(false);
2797
+ }
2798
+ );
2799
+ }
2800
+ } catch (error) {
2801
+ return Promise.reject(error);
2802
+ }
2803
+ };
2804
+ return {
2805
+ symbolInfo: symbolInfo[symbol],
2806
+ maxQty,
2807
+ setQuantity: useMemoizedFn(setQuantity),
2808
+ orderQuantity: tpslOrder.quantity,
2809
+ isPosition: false,
2810
+ TPSL_OrderEntity: tpslOrder,
2811
+ setOrderValue: setValue,
2812
+ setPnL,
2813
+ setOrderPrice,
2814
+ onSubmit,
2815
+ errors,
2816
+ status: {
2817
+ isCreateMutating,
2818
+ isUpdateMutating
2819
+ },
2820
+ position,
2821
+ setValues,
2822
+ type,
2823
+ triggerPrice
2824
+ };
2825
+ };
2826
+ var TPSLSimpleDialogUI = (props) => {
2827
+ const { type, triggerPrice, errors, TPSL_OrderEntity } = props;
2828
+ const { t } = useTranslation();
2829
+ const { getErrorMsg } = useOrderEntryFormErrorMsg(errors);
2830
+ const footer = /* @__PURE__ */ jsxs(Flex, { width: "100%", itemAlign: "center", gap: 3, mt: 4, children: [
2831
+ /* @__PURE__ */ jsx(
2832
+ Button,
2833
+ {
2834
+ color: "gray",
2835
+ onClick: () => {
2836
+ props.onComplete?.();
2837
+ props.close?.();
2838
+ },
2839
+ fullWidth: true,
2840
+ className: "oui-text-sm",
2841
+ size: "md",
2842
+ children: t("common.cancel")
2843
+ },
2844
+ "secondary"
2845
+ ),
2846
+ /* @__PURE__ */ jsx(
2847
+ Button,
2848
+ {
2849
+ onClick: () => {
2850
+ props.onSubmit().then(() => {
2851
+ props.onComplete?.();
2852
+ props.close?.();
2853
+ });
2854
+ },
2855
+ fullWidth: true,
2856
+ className: "oui-text-sm",
2857
+ size: "md",
2858
+ children: t("common.confirm")
2859
+ },
2860
+ "primary"
2861
+ )
2862
+ ] });
2863
+ const errorMessage = () => {
2864
+ const tpError = getErrorMsg("tp_trigger_price");
2865
+ const slError = getErrorMsg("sl_trigger_price");
2866
+ let text = "";
2867
+ if (tpError && type === "tp") {
2868
+ text = tpError;
2869
+ }
2870
+ if (slError && type === "sl") {
2871
+ text = slError;
2872
+ }
2873
+ if (!text) {
2874
+ return null;
2875
+ }
2876
+ return /* @__PURE__ */ jsxs(
2877
+ Flex,
2878
+ {
2879
+ justify: "start",
2880
+ itemAlign: "start",
2881
+ gap: 2,
2882
+ className: "oui-mt-2 oui-w-full",
2883
+ children: [
2884
+ /* @__PURE__ */ jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-danger" }),
2885
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-danger", children: text })
2886
+ ]
2887
+ }
2888
+ );
2889
+ };
2890
+ const renderPnl = () => {
2891
+ const { tp_pnl, sl_pnl } = TPSL_OrderEntity;
2892
+ if (type === "sl") {
2893
+ return /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
2894
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("tpsl.totalEstSlPnl") }),
2895
+ sl_pnl ? /* @__PURE__ */ jsx(
2896
+ Text.numeral,
2897
+ {
2898
+ suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: "USDC" }),
2899
+ coloring: true,
2900
+ visible: true,
2901
+ size: "2xs",
2902
+ dp: 2,
2903
+ children: Number(sl_pnl)
2904
+ }
2905
+ ) : /* @__PURE__ */ jsx(Text, { size: "2xs", children: "-- USDC" })
2906
+ ] });
2907
+ }
2908
+ return /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
2909
+ /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("tpsl.totalEstTpPnl") }),
2910
+ /* @__PURE__ */ jsx(
2911
+ Text.numeral,
2912
+ {
2913
+ suffix: /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
2914
+ rule: "price",
2915
+ coloring: true,
2916
+ visible: true,
2917
+ size: "2xs",
2918
+ dp: 2,
2919
+ children: tp_pnl ? Number(tp_pnl) : "--"
2920
+ }
2921
+ )
2922
+ ] });
2923
+ };
2924
+ return /* @__PURE__ */ jsxs(Box, { className: "oui-w-full oui-px-0.5", children: [
2925
+ /* @__PURE__ */ jsx(
2926
+ TPSLQuantity,
2927
+ {
2928
+ maxQty: props.maxQty,
2929
+ quantity: Number(props.orderQuantity ?? props.maxQty),
2930
+ baseTick: props.symbolInfo("base_tick"),
2931
+ base_dp: props.symbolInfo("base_dp"),
2932
+ base: props.symbolInfo("base"),
2933
+ isEditing: false,
2934
+ errorMsg: getErrorMsg("quantity"),
2935
+ onQuantityChange: props.setQuantity
2936
+ }
2937
+ ),
2938
+ /* @__PURE__ */ jsxs(
2939
+ Flex,
2940
+ {
2941
+ direction: "column",
2942
+ itemAlign: "start",
2943
+ className: cn(
2944
+ "oui-mt-4 oui-w-full oui-gap-1 oui-text-xs oui-text-base-contrast-36"
2945
+ ),
2946
+ children: [
2947
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
2948
+ /* @__PURE__ */ jsx(Text, { size: "xs", children: t("common.triggerPrice") }),
2949
+ /* @__PURE__ */ jsx(
2950
+ Text.numeral,
2951
+ {
2952
+ className: "oui-text-base-contrast",
2953
+ suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-xs oui-text-base-contrast-36", children: "USDC" }),
2954
+ rule: "price",
2955
+ size: "xs",
2956
+ dp: props.symbolInfo("quote_dp"),
2957
+ children: triggerPrice ? Number(triggerPrice) : "--"
2958
+ }
2959
+ )
2960
+ ] }),
2961
+ /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
2962
+ /* @__PURE__ */ jsx(Text, { size: "xs", children: t("common.orderPrice") }),
2963
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast", size: "xs", children: t("common.market") })
2964
+ ] }),
2965
+ renderPnl()
2966
+ ]
2967
+ }
2968
+ ),
2969
+ errorMessage(),
2970
+ /* @__PURE__ */ jsx(Divider, { className: "oui-my-3 oui-w-full" }),
2971
+ /* @__PURE__ */ jsx(
2972
+ Flex,
2973
+ {
2974
+ itemAlign: "center",
2975
+ onClick: () => {
2976
+ props.close?.();
2977
+ props.showAdvancedTPSLDialog?.({
2978
+ qty: Number(TPSL_OrderEntity.quantity)
2979
+ });
2980
+ },
2981
+ className: "oui-pb-4",
2982
+ children: /* @__PURE__ */ jsx(Text, { color: "primary", className: "oui-cursor-pointer oui-text-sm", children: t("tpsl.advancedSetting") })
2983
+ }
2984
+ ),
2985
+ footer
2986
+ ] });
2987
+ };
2988
+ var TPSLSimpleDialogWidget = (props) => {
2989
+ const { close, onComplete, showAdvancedTPSLDialog } = props;
2990
+ const state = useTPSLSimpleDialog(props);
2991
+ return /* @__PURE__ */ jsx(
2992
+ TPSLSimpleDialogUI,
2993
+ {
2994
+ ...state,
2995
+ close,
2996
+ onComplete,
2997
+ showAdvancedTPSLDialog
2998
+ }
2999
+ );
3000
+ };
3001
+ var TPSLSimpleSheetId = "TPSLSimpleSheetId";
3002
+ var TPSLSimpleDialogId = "TPSLSimpleDialogId";
3003
+ registerSimpleSheet(TPSLSimpleSheetId, TPSLSimpleDialogWidget, {
3004
+ classNames: {}
3005
+ });
3006
+ registerSimpleDialog(TPSLSimpleDialogId, TPSLSimpleDialogWidget, {
3007
+ classNames: {
3008
+ content: "oui-w-[420px]"
3009
+ }
3010
+ });
3011
+ function getInitialOrder(order2) {
3012
+ const childOrder = order2.child_orders[0];
3013
+ const positionType = childOrder.algo_type === AlgoOrderRootType.TP_SL ? PositionType.PARTIAL : PositionType.FULL;
3014
+ const tpOrder = childOrder.child_orders.find(
3015
+ (item) => item.algo_type === AlgoOrderType.TAKE_PROFIT && item.trigger_price
3016
+ );
3017
+ const slOrder = childOrder.child_orders.find(
3018
+ (item) => item.algo_type === AlgoOrderType.STOP_LOSS && item.trigger_price
3019
+ );
3020
+ const tpslPriceInfo = {};
3021
+ if (tpOrder) {
3022
+ tpslPriceInfo.tp_trigger_price = tpOrder.trigger_price?.toString();
3023
+ tpslPriceInfo.tp_order_type = typeof tpOrder.type === "string" ? tpOrder.type.replace("_ORDER", "") : void 0;
3024
+ if (tpslPriceInfo.tp_order_type === OrderType.LIMIT) {
3025
+ tpslPriceInfo.tp_order_price = tpOrder.price?.toString();
3026
+ }
3027
+ }
3028
+ if (slOrder) {
3029
+ tpslPriceInfo.sl_trigger_price = slOrder.trigger_price?.toString();
3030
+ tpslPriceInfo.sl_order_type = typeof slOrder.type === "string" ? slOrder.type.replace("_ORDER", "") : void 0;
3031
+ if (tpslPriceInfo.sl_order_type === OrderType.LIMIT) {
3032
+ tpslPriceInfo.sl_order_price = slOrder.price?.toString();
3033
+ }
3034
+ }
3035
+ return {
3036
+ baseInfo: {
3037
+ symbol: order2.symbol,
3038
+ order_type: order2.type,
3039
+ side: order2.side,
3040
+ order_price: order2.price,
3041
+ order_quantity: order2.quantity,
3042
+ position_type: positionType
3043
+ // tp_enable: !!tpOrder?.trigger_price,
3044
+ // sl_enable: !!slOrder?.trigger_price,
3045
+ },
3046
+ tpslPriceInfo,
3047
+ tpInfo: {
3048
+ orderId: tpOrder?.algo_order_id
3049
+ },
3050
+ slInfo: {
3051
+ orderId: slOrder?.algo_order_id
3052
+ }
3053
+ };
3054
+ }
3055
+ function isTPSLPriceChanged(originPrice, newPrice) {
3056
+ if (newPrice === void 0 || newPrice === null) {
3057
+ return true;
3058
+ }
3059
+ if (isNaN(Number(newPrice))) {
3060
+ return false;
3061
+ }
3062
+ const originDeci = new Decimal(Number(originPrice));
3063
+ const newDeci = new Decimal(Number(newPrice));
3064
+ return !newDeci.eq(originDeci);
3065
+ }
3066
+ var useEditBracketOrder = (props) => {
3067
+ if (!props.order) {
3068
+ throw new SDKError("order is required for editBracketOrder");
3069
+ }
3070
+ const { baseInfo, tpslPriceInfo, tpInfo, slInfo } = getInitialOrder(
3071
+ props.order
3072
+ );
3073
+ const [doUpdateOrder, { isMutating }] = useMutation("/v1/algo/order", "PUT");
3074
+ const { formattedOrder, setValue, setValues, metaState, symbolInfo, helper } = useOrderEntry(props.order.symbol, {
3075
+ initialOrder: baseInfo
3076
+ });
3077
+ const symbol = props.order.symbol;
3078
+ const isPriceChanged = useMemo(() => {
3079
+ let dirty = false;
3080
+ const {
3081
+ tp_order_price,
3082
+ sl_order_price,
3083
+ tp_trigger_price,
3084
+ sl_trigger_price
3085
+ } = formattedOrder;
3086
+ if (tpslPriceInfo.tp_trigger_price) {
3087
+ dirty = dirty || isTPSLPriceChanged(
3088
+ tpslPriceInfo.tp_trigger_price,
3089
+ tp_trigger_price ?? 0
3090
+ );
3091
+ }
3092
+ if (tpslPriceInfo.tp_order_price) {
3093
+ dirty = dirty || isTPSLPriceChanged(tpslPriceInfo.tp_order_price, tp_order_price ?? 0);
3094
+ }
3095
+ if (tpslPriceInfo.sl_trigger_price) {
3096
+ dirty = dirty || isTPSLPriceChanged(
3097
+ tpslPriceInfo.sl_trigger_price,
3098
+ sl_trigger_price ?? 0
3099
+ );
3100
+ }
3101
+ if (tpslPriceInfo.sl_order_price) {
3102
+ dirty = dirty || isTPSLPriceChanged(tpslPriceInfo.sl_order_price, sl_order_price ?? 0);
3103
+ }
3104
+ return dirty;
3105
+ }, [
3106
+ tpslPriceInfo,
3107
+ formattedOrder.tp_order_price,
3108
+ formattedOrder.sl_order_price,
3109
+ formattedOrder.tp_trigger_price,
3110
+ formattedOrder.sl_trigger_price
3111
+ ]);
3112
+ useEffect(() => {
3113
+ setValues({
3114
+ ...tpslPriceInfo
3115
+ });
3116
+ }, [props.order, setValues]);
3117
+ const onSubmit = async () => {
3118
+ return helper.validate().then(() => {
3119
+ const tpOrder = {
3120
+ order_id: tpInfo.orderId,
3121
+ algo_type: AlgoOrderType.TAKE_PROFIT,
3122
+ trigger_price: formattedOrder.tp_trigger_price,
3123
+ reduce_only: true
3124
+ };
3125
+ if (formattedOrder.tp_order_type === OrderType.LIMIT) {
3126
+ tpOrder.price = formattedOrder.tp_order_price;
3127
+ }
3128
+ const slOrder = {
3129
+ order_id: slInfo.orderId,
3130
+ algo_type: AlgoOrderType.STOP_LOSS,
3131
+ trigger_price: formattedOrder.sl_trigger_price,
3132
+ reduce_only: true
3133
+ };
3134
+ if (formattedOrder.sl_order_type === OrderType.LIMIT) {
3135
+ slOrder.price = formattedOrder.sl_order_price;
3136
+ }
3137
+ const childOrders = [];
3138
+ if (tpInfo.orderId) {
3139
+ childOrders.push(tpOrder);
3140
+ }
3141
+ if (slInfo.orderId) {
3142
+ childOrders.push(slOrder);
3143
+ }
3144
+ return doUpdateOrder({
3145
+ order_id: props.order.algo_order_id,
3146
+ child_orders: [
3147
+ {
3148
+ order_id: props.order.child_orders[0].algo_order_id,
3149
+ child_orders: childOrders
3150
+ }
3151
+ ]
3152
+ });
3153
+ });
3154
+ };
3155
+ return {
3156
+ symbol,
3157
+ symbolInfo,
3158
+ formattedOrder,
3159
+ setValue,
3160
+ setValues,
3161
+ metaState,
3162
+ onSubmit,
3163
+ isMutating,
3164
+ isPriceChanged
3165
+ };
3166
+ };
3167
+ var EditBracketOrderUI = (props) => {
3168
+ const { t } = useTranslation();
3169
+ const { errors, validated } = props.metaState;
3170
+ const { isMobile } = useScreen();
3171
+ const {
3172
+ formattedOrder,
3173
+ setValue: setOrderValue,
3174
+ symbol,
3175
+ symbolInfo,
3176
+ setValues
3177
+ } = props;
3178
+ const [tpValues, setTpValuse] = useState({
3179
+ // enable: false,
3180
+ order_type: formattedOrder.tp_order_type ?? OrderType.MARKET,
3181
+ order_price: formattedOrder.tp_order_price ?? "",
3182
+ trigger_price: formattedOrder.tp_trigger_price ?? "",
3183
+ PnL: formattedOrder.tp_pnl ?? "",
3184
+ Offset: formattedOrder.tp_offset ?? "",
3185
+ "Offset%": formattedOrder.tp_offset_percentage ?? "",
3186
+ ROI: formattedOrder.tp_ROI ?? ""
3187
+ });
3188
+ const [slValues, setSlValues] = useState({
3189
+ // enable: false,
3190
+ order_type: formattedOrder.sl_order_type ?? OrderType.MARKET,
3191
+ order_price: formattedOrder.sl_order_price ?? "",
3192
+ trigger_price: formattedOrder.sl_trigger_price ?? "",
3193
+ PnL: formattedOrder.sl_pnl ?? "",
3194
+ Offset: formattedOrder.sl_offset ?? "",
3195
+ "Offset%": formattedOrder.sl_offset_percentage ?? "",
3196
+ ROI: formattedOrder.sl_ROI ?? ""
3197
+ });
3198
+ useEffect(() => {
3199
+ setTpValuse((prev) => ({
3200
+ ...prev,
3201
+ // enable: formattedOrder.tp_enable ?? false,
3202
+ order_type: formattedOrder.tp_order_type ?? OrderType.MARKET,
3203
+ order_price: formattedOrder.tp_order_price ?? "",
3204
+ trigger_price: formattedOrder.tp_trigger_price ?? "",
3205
+ PnL: formattedOrder.tp_pnl ?? "",
3206
+ Offset: formattedOrder.tp_offset ?? "",
3207
+ "Offset%": formattedOrder.tp_offset_percentage ?? "",
3208
+ ROI: formattedOrder.tp_ROI ?? ""
3209
+ }));
3210
+ }, [formattedOrder]);
3211
+ useEffect(() => {
3212
+ setSlValues((prev) => ({
3213
+ ...prev,
3214
+ // enable: formattedOrder.sl_enable ?? false,
3215
+ order_type: formattedOrder.sl_order_type ?? OrderType.MARKET,
3216
+ order_price: formattedOrder.sl_order_price ?? "",
3217
+ trigger_price: formattedOrder.sl_trigger_price ?? "",
3218
+ PnL: formattedOrder.sl_pnl ?? "",
3219
+ Offset: formattedOrder.sl_offset ?? "",
3220
+ "Offset%": formattedOrder.sl_offset_percentage ?? "",
3221
+ ROI: formattedOrder.sl_ROI ?? ""
3222
+ }));
3223
+ }, [formattedOrder]);
3224
+ return /* @__PURE__ */ jsxs("div", { children: [
3225
+ /* @__PURE__ */ jsxs(
3226
+ ScrollArea,
3227
+ {
3228
+ className: cn("oui-flex-1", isMobile && "oui-h-[calc(100vh-200px)]"),
3229
+ children: [
3230
+ /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
3231
+ OrderInfo,
3232
+ {
3233
+ order: {
3234
+ symbol,
3235
+ order_quantity: formattedOrder.order_quantity,
3236
+ order_price: formattedOrder.order_price
3237
+ },
3238
+ baseDP: symbolInfo.base_dp,
3239
+ quoteDP: symbolInfo.quote_dp
3240
+ }
3241
+ ) }),
3242
+ /* @__PURE__ */ jsx(Divider, { className: "oui-my-3" }),
3243
+ /* @__PURE__ */ jsxs("div", { className: "", children: [
3244
+ /* @__PURE__ */ jsxs("div", { className: "oui-py-3", children: [
3245
+ /* @__PURE__ */ jsx(
3246
+ TPSLPositionTypeWidget,
3247
+ {
3248
+ value: formattedOrder.position_type ?? PositionType.PARTIAL,
3249
+ disableSelector: true,
3250
+ onChange: (key, value) => {
3251
+ if (value === PositionType.FULL) {
3252
+ setValues({
3253
+ position_type: PositionType.FULL,
3254
+ tp_order_type: OrderType.MARKET,
3255
+ tp_order_price: void 0,
3256
+ sl_order_type: OrderType.MARKET,
3257
+ sl_order_price: void 0
3258
+ });
3259
+ return;
3260
+ }
3261
+ setOrderValue("position_type", value);
3262
+ }
3263
+ }
3264
+ ),
3265
+ formattedOrder.position_type === PositionType.FULL && /* @__PURE__ */ jsxs(
3266
+ Flex,
3267
+ {
3268
+ justify: "start",
3269
+ itemAlign: "start",
3270
+ gap: 2,
3271
+ className: "oui-mt-3 oui-w-full",
3272
+ children: [
3273
+ /* @__PURE__ */ jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]" }),
3274
+ /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-[#D25f00]", children: t("tpsl.positionType.full.tips.market") })
3275
+ ]
3276
+ }
3277
+ )
3278
+ ] }),
3279
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 6, children: [
3280
+ /* @__PURE__ */ jsx(
3281
+ TPSLInputRowWidget,
3282
+ {
3283
+ disableEnableCheckbox: true,
3284
+ disableOrderTypeSelector: true,
3285
+ rootOrderPrice: formattedOrder.order_price,
3286
+ symbol: symbolInfo.symbol,
3287
+ type: "tp",
3288
+ side: formattedOrder.side,
3289
+ values: tpValues,
3290
+ errors: validated ? errors : null,
3291
+ quote_dp: symbolInfo.quote_dp,
3292
+ hideOrderPrice: formattedOrder.position_type === PositionType.FULL,
3293
+ onChange: (key, value) => {
3294
+ setOrderValue(key, value);
3295
+ },
3296
+ positionType: formattedOrder.position_type ?? PositionType.PARTIAL
3297
+ }
3298
+ ),
3299
+ /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
3300
+ /* @__PURE__ */ jsx(
3301
+ TPSLInputRowWidget,
3302
+ {
3303
+ disableEnableCheckbox: true,
3304
+ disableOrderTypeSelector: true,
3305
+ rootOrderPrice: formattedOrder.order_price,
3306
+ symbol: symbolInfo.symbol,
3307
+ type: "sl",
3308
+ side: formattedOrder.side,
3309
+ values: slValues,
3310
+ hideOrderPrice: formattedOrder.position_type === PositionType.FULL,
3311
+ errors: validated ? errors : null,
3312
+ quote_dp: symbolInfo.quote_dp,
3313
+ positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
3314
+ onChange: (key, value) => {
3315
+ setOrderValue(key, value);
3316
+ }
3317
+ }
3318
+ )
3319
+ ] }),
3320
+ /* @__PURE__ */ jsx(
3321
+ PnlInfo,
3322
+ {
3323
+ tp_pnl: formattedOrder.tp_pnl,
3324
+ sl_pnl: formattedOrder.sl_pnl,
3325
+ className: "oui-mt-6"
3326
+ }
3327
+ )
3328
+ ] })
3329
+ ]
3330
+ }
3331
+ ),
3332
+ /* @__PURE__ */ jsx(
3333
+ Flex,
3334
+ {
3335
+ itemAlign: "center",
3336
+ gap: 3,
3337
+ mt: 5,
3338
+ width: "100%",
3339
+ justify: "center",
3340
+ children: /* @__PURE__ */ jsx(
3341
+ ThrottledButton,
3342
+ {
3343
+ className: "oui-w-[184px]",
3344
+ "data-testid": "tpsl-confirm",
3345
+ disabled: !props.isPriceChanged,
3346
+ loading: props.isMutating,
3347
+ onClick: () => {
3348
+ props.onSubmit().then(() => {
3349
+ props.onClose?.();
3350
+ }).catch((err) => {
3351
+ });
3352
+ },
3353
+ children: t("common.confirm")
3354
+ }
3355
+ )
3356
+ }
3357
+ )
3358
+ ] });
3359
+ };
3360
+ var EditBracketOrderWidget = (props) => {
3361
+ const state = useEditBracketOrder({ order: props.order });
3362
+ return /* @__PURE__ */ jsx(EditBracketOrderUI, { ...state, onClose: props.close });
3363
+ };
3364
+ var EditBracketOrderSheetId = "EditBracketOrderSheetId";
3365
+ var EditBracketOrderDialogId = "EditBracketOrderDialogId";
3366
+ registerSimpleSheet(EditBracketOrderSheetId, EditBracketOrderWidget);
3367
+ registerSimpleDialog(EditBracketOrderDialogId, EditBracketOrderWidget, {
3368
+ classNames: {
3369
+ content: "oui-w-[420px]"
3370
+ }
3371
+ });
3372
+
3373
+ export { ArrowRightIcon, EditBracketOrderDialogId, EditBracketOrderSheetId, EditBracketOrderWidget, PositionTPSLConfirm, PositionTPSLPopover, PositionTPSLSheet, TPSL, TPSLAdvancedDialogId, TPSLAdvancedSheetId, TPSLAdvancedUI, TPSLAdvancedWidget, TPSLDetailDialogId, TPSLDetailSheetId, TPSLDetailWidget, TPSLDialogId, TPSLPositionTypeWidget, TPSLSheetId, TPSLSimpleDialogId, TPSLSimpleDialogUI, TPSLSimpleDialogWidget, TPSLSimpleSheetId, TPSLWidget, useTPSLAdvanced, useTPSLBuilder, useTPSLSimpleDialog };
15
3374
  //# sourceMappingURL=out.js.map
16
3375
  //# sourceMappingURL=index.mjs.map