@kodiak-finance/orderly-ui-leverage 2.8.18 → 2.8.19

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyUi = require('@kodiak-finance/orderly-ui');
-var pe = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var orderlyHooks = require('@kodiak-finance/orderly-hooks');
 var orderlyPerp = require('@kodiak-finance/orderly-perp');
@@ -11,19 +11,747 @@ var orderlyUtils = require('@kodiak-finance/orderly-utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var pe__default = /*#__PURE__*/_interopDefault(pe);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
-var X=e=>{let{Icon:o,onClick:t,disabled:s}=e;return jsxRuntime.jsx(o,{onClick:s?void 0:t,className:orderlyUi.cn("oui-m-2 oui-text-white oui-transition-all",s?"oui-cursor-not-allowed oui-opacity-20":"oui-cursor-pointer oui-opacity-100")})},O=e=>{let o=pe__default.default.useMemo(()=>[orderlyUi.inputFormatter.numberFormatter,orderlyUi.inputFormatter.dpFormatter(0)],[]),t=pe.useId();return jsxRuntime.jsxs("label",{htmlFor:t,className:orderlyUi.cn("oui-w-full","oui-rounded","oui-bg-base-6","oui-flex","oui-items-center","oui-justify-between","oui-outline","oui-outline-offset-0","oui-outline-1","oui-outline-transparent","focus-within:oui-outline-primary-light","oui-input-root"),children:[jsxRuntime.jsx(X,{Icon:orderlyUi.ReduceIcon,onClick:e.onLeverageReduce,disabled:e.isReduceDisabled}),jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"center",justify:"center",className:"oui-mr-4",children:[jsxRuntime.jsx(orderlyUi.Input,{value:e.value,id:t,autoComplete:"off",classNames:{input:orderlyUi.cn("oui-text-right oui-text-[24px]"),root:orderlyUi.cn("oui-w-12","oui-px-0","oui-outline","oui-outline-offset-0","oui-outline-1","oui-outline-transparent","focus-within:oui-outline-primary-none")},formatters:o,onChange:e.onInputChange}),jsxRuntime.jsx("div",{className:orderlyUi.cn("oui-ml-1 oui-mt-1 oui-select-none","oui-text-base oui-text-base-contrast-36"),children:"x"})]}),jsxRuntime.jsx(X,{Icon:orderlyUi.PlusIcon,onClick:e.onLeverageIncrease,disabled:e.isIncreaseDisabled})]})},A=e=>{let{currentLeverage:o}=e,{t}=orderlyI18n.useTranslation();return jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(T,{currentLeverage:o}),jsxRuntime.jsx(O,{...e}),jsxRuntime.jsx(z,{...e}),jsxRuntime.jsx(E,{...e}),jsxRuntime.jsx(G,{...e})]})},G=e=>{let{t:o}=orderlyI18n.useTranslation();return jsxRuntime.jsxs(orderlyUi.Flex,{direction:"row",gap:2,width:"100%",mt:0,pt:5,children:[jsxRuntime.jsx(orderlyUi.Button,{variant:"contained",color:"gray",fullWidth:true,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",size:e.isMobile?"md":"lg",children:o("common.cancel")}),jsxRuntime.jsx(orderlyUi.Button,{fullWidth:true,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",disabled:e.disabled,size:e.isMobile?"md":"lg",children:o("common.save")})]})},T=e=>{let{t:o}=orderlyI18n.useTranslation(),{currentLeverage:t}=e;return jsxRuntime.jsx(orderlyUi.Flex,{justify:"center",width:"100%",mb:2,children:jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,children:[`${o("common.current")}:`,jsxRuntime.jsx(orderlyUi.Text.numeral,{unit:"x",size:"sm",intensity:80,dp:0,children:t??"--"})]})})},z=e=>{let{value:o,onLeverageChange:t}=e;return jsxRuntime.jsx(orderlyUi.Flex,{itemAlign:"center",justify:"between",width:"100%",mt:4,className:"oui-text-base-contrast-80",children:e.toggles.map(s=>jsxRuntime.jsx(orderlyUi.Flex,{itemAlign:"center",justify:"center",className:orderlyUi.cn("oui-box-border oui-cursor-pointer oui-rounded-md oui-border oui-border-solid oui-bg-clip-padding oui-px-3 oui-py-2.5 oui-transition-all",o===s?"oui-border-primary oui-bg-base-6":"oui-border-line-12"),onClick:()=>t?.(s),children:jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"center",justify:"center",className:orderlyUi.cn("oui-h-3 oui-w-9 oui-select-none"),children:[s,"x"]})},s))})},E=e=>{let{leverageLevers:o,maxLeverage:t=0,className:s,value:v,showSliderTip:n}=e;return jsxRuntime.jsxs(orderlyUi.Box,{pt:4,width:"100%",className:s,children:[jsxRuntime.jsx(orderlyUi.Slider,{max:t,min:1,markCount:5,value:[v],onValueChange:r=>{e.onLeverageChange(r[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:r=>{e.onValueCommit?.(r),e.setShowSliderTip(false);},showTip:n,tipFormatter:r=>`${r}x`}),jsxRuntime.jsx(orderlyUi.Flex,{justify:"between",width:"100%",pt:3,children:o?.map((r,m)=>jsxRuntime.jsx("button",{onClick:()=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className:orderlyUi.cn("oui-pb-3 oui-text-2xs",m===0?"oui-pr-2":m===5?"oui-pl-0":"oui-ml-2 oui-px-0",e.value>=r&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${r}-btn`,children:`${r}x`},r))})]})};var q=e=>{let[o,t]=pe.useState(false),{t:s}=orderlyI18n.useTranslation(),{curLeverage:v,maxLeverage:n,isLoading:r,leverageLevers:m,update:y}=orderlyHooks.useLeverage(),R=pe.useMemo(()=>m.map(u=>({label:`${u}x`,value:u})),[m]),[i,p]=pe.useState(v??0),h=100/((R?.length||0)-1),F=u=>{p(u);},w=()=>{p(u=>u+1);},x=()=>{p(u=>u-1);},N=pe.useCallback(u=>{let k=Number.parseInt(u.target.value),H=Number.isNaN(k)?"":k;p(H);},[n]),g=async()=>{try{y({leverage:i}).then(()=>{e?.close?.(),orderlyUi.toast.success(s("leverage.updated"));},u=>{orderlyUi.toast.error(u.message);});}catch{}},d=i<=1,f=i>=n,C=!i||i<1||i>n,V=pe.useMemo(()=>[5,10,20,50,100].filter(u=>u<=n),[n]);return {leverageLevers:m,currentLeverage:v,value:i,marks:R,onLeverageChange:F,onLeverageIncrease:w,onLeverageReduce:x,onInputChange:N,isReduceDisabled:d,isIncreaseDisabled:f,disabled:C,step:h,onCancel:e?.close,onSave:g,isLoading:r,showSliderTip:o,setShowSliderTip:t,maxLeverage:n,toggles:V}};var W=e=>{let o=q({close:e.close});return jsxRuntime.jsx(A,{...o})};var te=e=>{let{curLeverage:o=1,symbol:t,side:s}=e,[v,n]=pe.useState(false),[r,m]=pe.useState(o),{t:y}=orderlyI18n.useTranslation(),{isMobile:R}=orderlyUi.useScreen(),{maxLeverage:i,update:p,isLoading:h}=orderlyHooks.useSymbolLeverage(t),{position:F,maxPositionNotional:w,maxPositionLeverage:x,overMaxPositionLeverage:N,overRequiredMargin:g}=ze({symbol:t,leverage:r,maxLeverage:i}),d=pe.useMemo(()=>Ge(i),[i]),f=pe.useMemo(()=>d.map(c=>({label:`${c}x`,value:c}))||[],[d]),C=pe.useMemo(()=>100/((f?.length||0)-1),[f]),V=c=>{m(c);},u=()=>{m(c=>c+1);},k=()=>{m(c=>c-1);},H=pe.useCallback(c=>{let $=Number.parseInt(c.target.value),de=Number.isNaN($)?"":$;m(de);},[i]),le=async()=>{try{p?.({leverage:r,symbol:t}).then(c=>{c.success?(e?.close?.(),orderlyUi.toast.success(y("leverage.updated"))):orderlyUi.toast.error(c.message);},c=>{orderlyUi.toast.error(c.message);});}catch{}},ue=async()=>{orderlyUi.modal.confirm({title:y("leverage.confirm"),content:jsxRuntime.jsx(orderlyUi.Text,{intensity:54,children:y("leverage.confirm.content")}),onOk:le,onCancel:()=>Promise.resolve()});},ce=r<=1,me=r>=i,ge=s?s===orderlyTypes.OrderSide.BUY:F?.position_qty&&F.position_qty>0,ve=!r||r<1||r>i||g||N;return {leverageLevers:d,currentLeverage:o,value:r,marks:f,onLeverageChange:V,onLeverageIncrease:u,onLeverageReduce:k,onInputChange:H,isReduceDisabled:ce,isIncreaseDisabled:me,disabled:ve,step:C,onCancel:e?.close,onSave:ue,isLoading:h,showSliderTip:v,setShowSliderTip:n,maxLeverage:i,toggles:d,symbol:t,maxPositionNotional:w,maxPositionLeverage:x,overMaxPositionLeverage:N,overRequiredMargin:g,isBuy:ge,isMobile:R}},Ge=e=>{if(e===10)return [1,3,5,8,10];if(e===50)return [1,10,20,35,50];let o=1,t=5,s=(e-o)/(t-1),v=[];for(let n=0;n<t;n++)v.push(Math.floor(o+s*n));return v};function ze(e){let{symbol:o,leverage:t,maxLeverage:s}=e,v=orderlyHooks.useSymbolsInfo(),{data:n}=orderlyHooks.useAccountInfo(),{data:r}=orderlyHooks.useMarkPricesStream(),{totalCollateral:m}=orderlyHooks.usePortfolio(),[y,R]=orderlyHooks.useLocalStorage("unPnlPriceBasis","markPrice"),[i]=orderlyHooks.usePositionStream("all",{calcMode:y}),p=pe.useMemo(()=>{if(o&&i?.rows?.length)return i.rows.find(g=>g.symbol===o)},[i,o]),h=pe.useMemo(()=>{let g=n?.imr_factor?.[o],d=p?.notional;if(g&&d){let f=orderlyPerp.positions.maxPositionLeverage({IMRFactor:g,notional:d});return Math.min(f,s)}return s},[p,s,o]),F=pe.useMemo(()=>{let g=n?.imr_factor?.[o];if(t&&g)return orderlyPerp.positions.maxPositionNotional({leverage:t,IMRFactor:g})},[t,o]),w=pe.useMemo(()=>t>h,[t,h]),x=pe.useMemo(()=>{if(!n||!r||!v)return orderlyUtils.zero;let g=t?i?.rows.map(C=>C.symbol===o?{...C,leverage:t}:C):i?.rows,d=orderlyPerp.account.totalInitialMarginWithQty({positions:g,markPrices:r,IMR_Factors:n.imr_factor,maxLeverage:n.max_leverage,symbolInfo:v});return orderlyPerp.account.freeCollateral({totalCollateral:m,totalInitialMarginWithOrders:d})},[i,v,n,r,m,t,o]),N=pe.useMemo(()=>x.eq(0)||x.isNegative(),[x]);return {position:p,freeCollateral:x,maxPositionNotional:F,maxPositionLeverage:h,overMaxPositionLeverage:w,overRequiredMargin:N}}var ie=e=>{let{t:o}=orderlyI18n.useTranslation();return jsxRuntime.jsxs("div",{className:"oui-flex oui-flex-col oui-gap-3 lg:oui-gap-4",children:[jsxRuntime.jsxs("div",{className:"oui-flex oui-items-center oui-gap-2",children:[jsxRuntime.jsx(orderlyUi.TokenIcon,{symbol:e.symbol,className:"oui-size-5"}),jsxRuntime.jsx(orderlyUi.Text.formatted,{rule:"symbol",formatString:"base-type",size:e.isMobile?"xs":"base",weight:"semibold",intensity:98,children:e.symbol}),jsxRuntime.jsxs("div",{className:orderlyUi.cn(["oui-ml-auto oui-flex oui-items-center oui-gap-1"]),children:[jsxRuntime.jsx(orderlyUi.Badge,{color:e.isBuy?"success":"danger",size:"xs",children:e.isBuy?o("common.long"):o("common.short")}),jsxRuntime.jsx(Ke,{leverage:e.currentLeverage})]})]}),jsxRuntime.jsx(orderlyUi.Divider,{}),jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(T,{currentLeverage:e.currentLeverage}),jsxRuntime.jsx(O,{...e}),jsxRuntime.jsx(z,{...e}),jsxRuntime.jsx(E,{...e}),jsxRuntime.jsx(orderlyUi.Divider,{className:"oui-mb-3 oui-w-full"}),jsxRuntime.jsxs("div",{className:"oui-flex oui-flex-col oui-gap-1 oui-pb-4 oui-text-xs oui-font-normal oui-text-base-contrast-54",children:[jsxRuntime.jsx("div",{children:jsxRuntime.jsx(orderlyI18n.Trans,{i18nKey:"leverage.maxAvailableLeverage.tips",values:{leverage:e.maxPositionLeverage},components:[jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:0,suffix:"x",as:"span",className:"oui-text-base-contrast"},"0")]})}),jsxRuntime.jsx("div",{children:o("leverage.actualPositionLeverage.tips")})]}),jsxRuntime.jsxs("div",{className:orderlyUi.cn(["-oui-mb-2",e.overRequiredMargin||e.overMaxPositionLeverage?"oui-block oui-text-xs oui-font-normal":"oui-hidden"]),children:[e.overRequiredMargin&&jsxRuntime.jsx("div",{children:jsxRuntime.jsx(orderlyUi.Text,{color:"warning",children:o("leverage.overRequiredMargin.tips")})}),e.overMaxPositionLeverage&&jsxRuntime.jsx("div",{children:jsxRuntime.jsx(orderlyUi.Text,{color:"warning",children:jsxRuntime.jsx(orderlyI18n.Trans,{i18nKey:"leverage.overMaxPositionLeverage.tips",values:{leverage:e.maxPositionLeverage},components:[jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:0,suffix:"X",as:"span"},"0")]})})})]}),jsxRuntime.jsx(G,{...e})]})]})},Ke=({leverage:e})=>jsxRuntime.jsxs("div",{className:orderlyUi.cn("oui-flex oui-h-[18px] oui-items-center oui-gap-1","oui-cursor-pointer oui-rounded oui-bg-line-6 oui-px-2","oui-text-2xs oui-font-semibold oui-text-base-contrast-36"),children:[jsxRuntime.jsx(orderlyUi.Text,{children:"Cross"}),jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:0,size:"2xs",unit:"X",children:e})]});var B=e=>{let o=te(e);return jsxRuntime.jsx(ie,{...o})};var Je="SymbolLeverageSheetId",Ze="SymbolLeverageDialogId";orderlyUi.registerSimpleSheet(Je,B,{title:()=>orderlyI18n.i18n.t("leverage.adjustedLeverage"),classNames:{}});orderlyUi.registerSimpleDialog(Ze,B,{title:()=>orderlyI18n.i18n.t("leverage.adjustedLeverage"),classNames:{content:"oui-w-[420px]"}});var to="LeverageWidgetWithDialog",ro="LeverageWidgetWithSheet";orderlyUi.registerSimpleDialog(to,W,{title:()=>orderlyI18n.i18n.t("leverage.maxAccountLeverage"),size:"md"});orderlyUi.registerSimpleSheet(ro,W,{title:()=>orderlyI18n.i18n.t("leverage.maxAccountLeverage")});
+// src/index.ts
+var IconButton = (props) => {
+  const { Icon, onClick, disabled } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Icon,
+    {
+      onClick: disabled ? void 0 : onClick,
+      className: orderlyUi.cn(
+        "oui-m-2 oui-text-white oui-transition-all",
+        disabled ? "oui-cursor-not-allowed oui-opacity-20" : "oui-cursor-pointer oui-opacity-100"
+      )
+    }
+  );
+};
+var LeverageInput = (props) => {
+  const formatters = React__default.default.useMemo(
+    () => [orderlyUi.inputFormatter.numberFormatter, orderlyUi.inputFormatter.dpFormatter(0)],
+    []
+  );
+  const id = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: id,
+      className: orderlyUi.cn(
+        "oui-w-full",
+        "oui-rounded",
+        "oui-bg-base-6",
+        "oui-flex",
+        "oui-items-center",
+        "oui-justify-between",
+        "oui-outline",
+        "oui-outline-offset-0",
+        "oui-outline-1",
+        "oui-outline-transparent",
+        "focus-within:oui-outline-primary-light",
+        "oui-input-root"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            Icon: orderlyUi.ReduceIcon,
+            onClick: props.onLeverageReduce,
+            disabled: props.isReduceDisabled
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { itemAlign: "center", justify: "center", className: "oui-mr-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Input,
+            {
+              value: props.value,
+              id,
+              autoComplete: "off",
+              classNames: {
+                input: orderlyUi.cn("oui-text-right oui-text-[24px]"),
+                root: orderlyUi.cn(
+                  "oui-w-12",
+                  "oui-px-0",
+                  "oui-outline",
+                  "oui-outline-offset-0",
+                  "oui-outline-1",
+                  "oui-outline-transparent",
+                  "focus-within:oui-outline-primary-none"
+                )
+              },
+              formatters,
+              onChange: props.onInputChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: orderlyUi.cn(
+                "oui-ml-1 oui-mt-1 oui-select-none",
+                "oui-text-base oui-text-base-contrast-36"
+              ),
+              children: "x"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            Icon: orderlyUi.PlusIcon,
+            onClick: props.onLeverageIncrease,
+            disabled: props.isIncreaseDisabled
+          }
+        )
+      ]
+    }
+  );
+};
+var Leverage = (props) => {
+  const { currentLeverage } = props;
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { itemAlign: "start", direction: "column", mb: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LeverageHeader, { currentLeverage }),
+    /* @__PURE__ */ jsxRuntime.jsx(LeverageInput, { ...props }),
+    /* @__PURE__ */ jsxRuntime.jsx(LeverageSelector, { ...props }),
+    /* @__PURE__ */ jsxRuntime.jsx(LeverageSlider, { ...props }),
+    /* @__PURE__ */ jsxRuntime.jsx(LeverageFooter, { ...props })
+  ] });
+};
+var LeverageFooter = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "row", gap: 2, width: "100%", mt: 0, pt: 5, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Button,
+      {
+        variant: "contained",
+        color: "gray",
+        fullWidth: true,
+        onClick: props.onCancel,
+        "data-testid": "oui-testid-leverage-cancel-btn",
+        size: props.isMobile ? "md" : "lg",
+        children: t("common.cancel")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Button,
+      {
+        fullWidth: true,
+        loading: props.isLoading,
+        onClick: props.onSave,
+        "data-testid": "oui-testid-leverage-save-btn",
+        disabled: props.disabled,
+        size: props.isMobile ? "md" : "lg",
+        children: t("common.save")
+      }
+    )
+  ] });
+};
+var LeverageHeader = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { currentLeverage } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { justify: "center", width: "100%", mb: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, children: [
+    `${t("common.current")}:`,
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { unit: "x", size: "sm", intensity: 80, dp: 0, children: currentLeverage ?? "--" })
+  ] }) });
+};
+var LeverageSelector = (props) => {
+  const { value, onLeverageChange } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Flex,
+    {
+      itemAlign: "center",
+      justify: "between",
+      width: "100%",
+      mt: 4,
+      className: "oui-text-base-contrast-80",
+      children: props.toggles.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Flex,
+        {
+          itemAlign: "center",
+          justify: "center",
+          className: orderlyUi.cn(
+            `oui-box-border oui-cursor-pointer oui-rounded-md oui-border oui-border-solid oui-bg-clip-padding oui-px-3 oui-py-2.5 oui-transition-all`,
+            value === option ? "oui-border-primary oui-bg-base-6" : "oui-border-line-12"
+          ),
+          onClick: () => onLeverageChange?.(option),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            orderlyUi.Flex,
+            {
+              itemAlign: "center",
+              justify: "center",
+              className: orderlyUi.cn(`oui-h-3 oui-w-9 oui-select-none`),
+              children: [
+                option,
+                "x"
+              ]
+            }
+          )
+        },
+        option
+      ))
+    }
+  );
+};
+var getMarkPosition = (item, index, max, total) => {
+  const min = 1;
+  const maxSteps = max - min;
+  const percentPerStep = 100 / maxSteps;
+  const position = percentPerStep * (item - min);
+  if (index === 0)
+    return Math.min(position + 2, 100);
+  if (index === total - 1)
+    return Math.max(position - 3, 0);
+  return position;
+};
+var LeverageSlider = (props) => {
+  const {
+    leverageLevers,
+    maxLeverage = 0,
+    className,
+    value,
+    showSliderTip,
+    marks
+  } = props;
+  const sliderMax = leverageLevers.length > 0 ? Math.max(...leverageLevers) : maxLeverage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { pt: 4, width: "100%", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Slider,
+      {
+        max: maxLeverage,
+        min: 1,
+        marks,
+        value: [value],
+        onValueChange: (e) => {
+          props.onLeverageChange(e[0]);
+          props.setShowSliderTip(true);
+        },
+        color: "primary",
+        onValueCommit: (e) => {
+          props.onValueCommit?.(e);
+          props.setShowSliderTip(false);
+        },
+        showTip: showSliderTip,
+        tipFormatter: (value2) => {
+          return `${value2}x`;
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { justify: "between", width: "100%", pt: 3, children: leverageLevers?.map((item, index) => {
+      const position = getMarkPosition(
+        item,
+        index,
+        sliderMax,
+        leverageLevers.length
+      );
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            props.onLeverageChange(item);
+            props.onValueCommit?.([item]);
+          },
+          className: orderlyUi.cn(
+            "oui-absolute oui-pb-3 oui-text-2xs oui-transform oui--translate-x-1/2",
+            Number(props.value) >= Number(item) ? "oui-text-primary-light" : "oui-text-base-contrast-54"
+          ),
+          style: {
+            left: `${position}%`
+          },
+          "data-testid": `oui-testid-leverage-${item}-btn`,
+          children: `${item}x`
+        },
+        item
+      );
+    }) })
+  ] });
+};
+var useLeverageScript = (options) => {
+  const [showSliderTip, setShowSliderTip] = React.useState(false);
+  const { t } = orderlyI18n.useTranslation();
+  const { curLeverage, maxLeverage, isLoading, leverageLevers, update } = orderlyHooks.useLeverage();
+  const marks = React.useMemo(() => {
+    return leverageLevers.map((e) => ({
+      label: `${e}x`,
+      value: e
+    }));
+  }, [leverageLevers]);
+  const [leverage, setLeverage] = React.useState(curLeverage ?? 0);
+  const step = 100 / ((marks?.length || 0) - 1);
+  const onLeverageChange = (leverage2) => {
+    setLeverage(leverage2);
+  };
+  const onLeverageIncrease = () => {
+    setLeverage((prev) => prev + 1);
+  };
+  const onLeverageReduce = () => {
+    setLeverage((prev) => prev - 1);
+  };
+  const onInputChange = React.useCallback(
+    (e) => {
+      const parsed = Number.parseInt(e.target.value);
+      const value = Number.isNaN(parsed) ? "" : parsed;
+      setLeverage(value);
+    },
+    [maxLeverage]
+  );
+  const onSave = async () => {
+    try {
+      update({ leverage }).then(
+        () => {
+          options?.close?.();
+          orderlyUi.toast.success(t("leverage.updated"));
+        },
+        (err) => {
+          orderlyUi.toast.error(err.message);
+        }
+      );
+    } catch (err) {
+    }
+  };
+  const isReduceDisabled = leverage <= 1;
+  const isIncreaseDisabled = leverage >= maxLeverage;
+  const disabled = !leverage || leverage < 1 || leverage > maxLeverage;
+  const toggles = React.useMemo(() => {
+    return [5, 10, 20, 50, 100].filter((e) => e <= maxLeverage);
+  }, [maxLeverage]);
+  return {
+    leverageLevers,
+    currentLeverage: curLeverage,
+    value: leverage,
+    marks,
+    onLeverageChange,
+    onLeverageIncrease,
+    onLeverageReduce,
+    onInputChange,
+    isReduceDisabled,
+    isIncreaseDisabled,
+    disabled,
+    step,
+    onCancel: options?.close,
+    onSave,
+    isLoading,
+    showSliderTip,
+    setShowSliderTip,
+    maxLeverage,
+    toggles
+  };
+};
+var LeverageEditor = (props) => {
+  const state = useLeverageScript({ close: props.close });
+  return /* @__PURE__ */ jsxRuntime.jsx(Leverage, { ...state });
+};
+var useSymbolLeverageScript = (options) => {
+  const { curLeverage = 1, symbol, side } = options;
+  const [showSliderTip, setShowSliderTip] = React.useState(false);
+  const [leverage, setLeverage] = React.useState(curLeverage);
+  const { t } = orderlyI18n.useTranslation();
+  const { isMobile } = orderlyUi.useScreen();
+  const {
+    maxLeverage: originalMaxLeverage,
+    update,
+    isLoading
+  } = orderlyHooks.useSymbolLeverage(symbol);
+  const maxLeverage = originalMaxLeverage;
+  const {
+    position,
+    maxPositionNotional,
+    maxPositionLeverage,
+    overMaxPositionLeverage,
+    overRequiredMargin
+  } = useCalc({ symbol, leverage, maxLeverage });
+  const formattedLeverageLevers = React.useMemo(() => {
+    return generateLeverageLeversForSelector(maxLeverage);
+  }, [maxLeverage]);
+  const leverageLevers = React.useMemo(() => {
+    return generateLeverageLevers(maxLeverage);
+  }, [maxLeverage]);
+  const marks = React.useMemo(() => {
+    return leverageLevers.map((e) => ({
+      label: `${e}x`,
+      value: e
+    })) || [];
+  }, [leverageLevers]);
+  const step = React.useMemo(() => {
+    return 100 / ((marks?.length || 0) - 1);
+  }, [marks]);
+  const onLeverageChange = (leverage2) => {
+    setLeverage(leverage2);
+  };
+  const onLeverageIncrease = () => {
+    setLeverage((prev) => prev + 1);
+  };
+  const onLeverageReduce = () => {
+    setLeverage((prev) => prev - 1);
+  };
+  const onInputChange = React.useCallback(
+    (e) => {
+      const parsed = Number.parseInt(e.target.value);
+      if (!Number.isNaN(parsed)) {
+        setLeverage(parsed);
+      }
+    },
+    []
+  );
+  const onConfirmSave = async () => {
+    try {
+      update?.({ leverage, symbol }).then(
+        (res) => {
+          if (res.success) {
+            options?.close?.();
+            orderlyUi.toast.success(t("leverage.updated"));
+          } else {
+            orderlyUi.toast.error(res.message);
+          }
+        },
+        (err) => {
+          orderlyUi.toast.error(err.message);
+        }
+      );
+    } catch (err) {
+    }
+  };
+  const onSave = async () => {
+    orderlyUi.modal.confirm({
+      title: t("leverage.confirm"),
+      content: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 54, children: t("leverage.confirm.content") }),
+      onOk: onConfirmSave,
+      onCancel: () => {
+        return Promise.resolve();
+      }
+    });
+  };
+  const isReduceDisabled = leverage <= 1;
+  const isIncreaseDisabled = leverage >= maxLeverage;
+  const isBuy = side ? side === orderlyTypes.OrderSide.BUY : position?.position_qty && position.position_qty > 0;
+  const disabled = !leverage || leverage < 1 || leverage > maxLeverage || overRequiredMargin || overMaxPositionLeverage;
+  return {
+    leverageLevers,
+    currentLeverage: curLeverage,
+    // Keep the displayed leverage fixed until the user confirms the change.
+    value: leverage,
+    // Input and slider reflect the temporary value being edited.
+    marks,
+    onLeverageChange,
+    onLeverageIncrease,
+    onLeverageReduce,
+    onInputChange,
+    isReduceDisabled,
+    isIncreaseDisabled,
+    disabled,
+    step,
+    onCancel: options?.close,
+    onSave,
+    isLoading,
+    showSliderTip,
+    setShowSliderTip,
+    maxLeverage,
+    toggles: formattedLeverageLevers,
+    symbol,
+    maxPositionNotional,
+    maxPositionLeverage,
+    overMaxPositionLeverage,
+    overRequiredMargin,
+    isBuy,
+    isMobile
+  };
+};
+var generateLeverageLeversForSelector = (max) => {
+  if (max === 10) {
+    return [1, 3, 5, 8, 10];
+  } else if (max === 50) {
+    return [1, 10, 20, 35, 50];
+  }
+  const min = 1;
+  const parts = 5;
+  const step = (max - min) / (parts - 1);
+  const result = [];
+  for (let i = 0; i < parts; i++) {
+    result.push(Math.floor(min + step * i));
+  }
+  return result;
+};
+var generateEvenlyDistributedMarks = (max) => {
+  const result = [];
+  if (max % 5 === 0) {
+    const step = max / 5;
+    for (let i = 0; i < 6; i++) {
+      const value = step * i;
+      result.push(value === 0 ? 1 : value);
+    }
+  } else {
+    result.push(1);
+    const quarter = max * 0.25;
+    const half = max * 0.5;
+    const threeQuarter = max * 0.75;
+    const quarterRounded = Math.round(quarter);
+    const halfRounded = Math.round(half);
+    const threeQuarterRounded = Math.round(threeQuarter);
+    if (quarterRounded > 1 && quarterRounded !== halfRounded) {
+      result.push(quarterRounded);
+    }
+    if (halfRounded > 1) {
+      result.push(halfRounded);
+    }
+    if (threeQuarterRounded > halfRounded && threeQuarterRounded < max) {
+      result.push(threeQuarterRounded);
+    }
+    if (max > 1) {
+      result.push(max);
+    }
+  }
+  return result;
+};
+var generateLeverageLevers = (max) => {
+  switch (max) {
+    case 10:
+      return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    case 20:
+      return [1, 5, 10, 15, 20];
+    case 50:
+      return [1, 10, 20, 30, 40, 50];
+    case 100:
+      return [1, 20, 40, 60, 80, 100];
+  }
+  const result = [];
+  if (max < 10) {
+    for (let i = 1; i <= max; i++) {
+      result.push(i);
+    }
+  } else {
+    result.push(...generateEvenlyDistributedMarks(max));
+  }
+  return result;
+};
+function useCalc(inputs) {
+  const { symbol, leverage, maxLeverage } = inputs;
+  const symbolsInfo = orderlyHooks.useSymbolsInfo();
+  const { data: accountInfo } = orderlyHooks.useAccountInfo();
+  const { data: markPrices } = orderlyHooks.useMarkPricesStream();
+  const { totalCollateral } = orderlyHooks.usePortfolio();
+  const [unPnlPriceBasis, setUnPnlPriceBasic] = orderlyHooks.useLocalStorage(
+    "unPnlPriceBasis",
+    "markPrice"
+  );
+  const [positions] = orderlyHooks.usePositionStream("all", {
+    calcMode: unPnlPriceBasis
+  });
+  const position = React.useMemo(() => {
+    if (symbol && positions?.rows?.length) {
+      return positions.rows.find((item) => item.symbol === symbol);
+    }
+  }, [positions, symbol]);
+  const maxPositionLeverage = React.useMemo(() => {
+    const IMRFactor = accountInfo?.imr_factor?.[symbol];
+    const notional = position?.notional;
+    if (IMRFactor && notional) {
+      const maxPositionLeverage2 = orderlyPerp.positions.maxPositionLeverage({
+        IMRFactor,
+        notional
+      });
+      return Math.min(maxPositionLeverage2, maxLeverage);
+    }
+    return maxLeverage;
+  }, [position, maxLeverage, symbol]);
+  const maxPositionNotional = React.useMemo(() => {
+    const IMRFactor = accountInfo?.imr_factor?.[symbol];
+    if (leverage && IMRFactor) {
+      return orderlyPerp.positions.maxPositionNotional({
+        leverage,
+        IMRFactor
+      });
+    }
+  }, [leverage, symbol]);
+  const overMaxPositionLeverage = React.useMemo(() => {
+    return leverage > maxPositionLeverage;
+  }, [leverage, maxPositionLeverage]);
+  const freeCollateral = React.useMemo(() => {
+    if (!accountInfo || !markPrices || !symbolsInfo) {
+      return orderlyUtils.zero;
+    }
+    const positionList = leverage ? positions?.rows.map((item) => {
+      if (item.symbol === symbol) {
+        return {
+          ...item,
+          leverage
+        };
+      }
+      return item;
+    }) : positions?.rows;
+    const totalInitialMarginWithOrders = orderlyPerp.account.totalInitialMarginWithQty({
+      positions: positionList,
+      markPrices,
+      IMR_Factors: accountInfo.imr_factor,
+      // not used
+      maxLeverage: accountInfo.max_leverage,
+      symbolInfo: symbolsInfo
+    });
+    const freeCollateral2 = orderlyPerp.account.freeCollateral({
+      totalCollateral,
+      totalInitialMarginWithOrders
+    });
+    return freeCollateral2;
+  }, [
+    positions,
+    symbolsInfo,
+    accountInfo,
+    markPrices,
+    totalCollateral,
+    leverage,
+    symbol
+  ]);
+  const overRequiredMargin = React.useMemo(() => {
+    return freeCollateral.eq(0) || freeCollateral.isNegative();
+  }, [freeCollateral]);
+  return {
+    position,
+    freeCollateral,
+    maxPositionNotional,
+    maxPositionLeverage,
+    overMaxPositionLeverage,
+    overRequiredMargin
+  };
+}
+var SymbolLeverage = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-gap-3 lg:oui-gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.TokenIcon, { symbol: props.symbol, className: "oui-size-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Text.formatted,
+        {
+          rule: "symbol",
+          formatString: "base-type",
+          size: props.isMobile ? "xs" : "base",
+          weight: "semibold",
+          intensity: 98,
+          children: props.symbol
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: orderlyUi.cn(["oui-ml-auto oui-flex oui-items-center oui-gap-1"]),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { color: props.isBuy ? "success" : "danger", size: "xs", children: props.isBuy ? t("common.long") : t("common.short") }),
+            /* @__PURE__ */ jsxRuntime.jsx(LeverageBadge, { leverage: props.currentLeverage })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { itemAlign: "start", direction: "column", mb: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LeverageHeader, { currentLeverage: props.currentLeverage }),
+      /* @__PURE__ */ jsxRuntime.jsx(LeverageInput, { ...props }),
+      /* @__PURE__ */ jsxRuntime.jsx(LeverageSelector, { ...props }),
+      /* @__PURE__ */ jsxRuntime.jsx(LeverageSlider, { ...props }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { className: "oui-mb-3 oui-w-full" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1 oui-pb-4 oui-text-xs oui-font-normal oui-text-base-contrast-54", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyI18n.Trans,
+          {
+            i18nKey: "leverage.maxAvailableLeverage.tips",
+            values: { leverage: props.maxPositionLeverage },
+            components: [
+              // @ts-ignore
+              /* @__PURE__ */ jsxRuntime.jsx(
+                orderlyUi.Text.numeral,
+                {
+                  dp: 0,
+                  suffix: "x",
+                  as: "span",
+                  className: "oui-text-base-contrast"
+                },
+                "0"
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("leverage.actualPositionLeverage.tips") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: orderlyUi.cn([
+            "-oui-mb-2",
+            props.overRequiredMargin || props.overMaxPositionLeverage ? "oui-block oui-text-xs oui-font-normal" : "oui-hidden"
+          ]),
+          children: [
+            props.overRequiredMargin && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { color: "warning", children: t("leverage.overRequiredMargin.tips") }) }),
+            props.overMaxPositionLeverage && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { color: "warning", children: /* @__PURE__ */ jsxRuntime.jsx(
+              orderlyI18n.Trans,
+              {
+                i18nKey: "leverage.overMaxPositionLeverage.tips",
+                values: { leverage: props.maxPositionLeverage },
+                components: [
+                  // @ts-ignore
+                  /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 0, suffix: "X", as: "span" }, "0")
+                ]
+              }
+            ) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(LeverageFooter, { ...props })
+    ] })
+  ] });
+};
+var LeverageBadge = ({ leverage }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: orderlyUi.cn(
+        "oui-flex oui-h-[18px] oui-items-center oui-gap-1",
+        "oui-cursor-pointer oui-rounded oui-bg-line-6 oui-px-2",
+        "oui-text-2xs oui-font-semibold oui-text-base-contrast-36"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: "Cross" }),
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 0, size: "2xs", unit: "X", children: leverage })
+      ]
+    }
+  );
+};
+var SymbolLeverageWidget = (props) => {
+  const state = useSymbolLeverageScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(SymbolLeverage, { ...state });
+};
 
-exports.Leverage = A;
-exports.LeverageEditor = W;
-exports.LeverageHeader = T;
-exports.LeverageSlider = E;
-exports.LeverageWidgetWithDialogId = to;
-exports.LeverageWidgetWithSheetId = ro;
-exports.SymbolLeverageDialogId = Ze;
-exports.SymbolLeverageSheetId = Je;
-exports.SymbolLeverageWidget = B;
-exports.useLeverageScript = q;
+// src/symbolLeverage/index.ts
+var SymbolLeverageSheetId = "SymbolLeverageSheetId";
+var SymbolLeverageDialogId = "SymbolLeverageDialogId";
+orderlyUi.registerSimpleSheet(SymbolLeverageSheetId, SymbolLeverageWidget, {
+  title: () => orderlyI18n.i18n.t("leverage.adjustedLeverage"),
+  classNames: {
+    // content: "oui-p-5",
+  }
+});
+orderlyUi.registerSimpleDialog(SymbolLeverageDialogId, SymbolLeverageWidget, {
+  title: () => orderlyI18n.i18n.t("leverage.adjustedLeverage"),
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+
+// src/index.ts
+var LeverageWidgetWithDialogId = "LeverageWidgetWithDialog";
+var LeverageWidgetWithSheetId = "LeverageWidgetWithSheet";
+orderlyUi.registerSimpleDialog(LeverageWidgetWithDialogId, LeverageEditor, {
+  title: () => orderlyI18n.i18n.t("leverage.maxAccountLeverage"),
+  size: "md"
+});
+orderlyUi.registerSimpleSheet(LeverageWidgetWithSheetId, LeverageEditor, {
+  title: () => orderlyI18n.i18n.t("leverage.maxAccountLeverage")
+});
+
+exports.Leverage = Leverage;
+exports.LeverageEditor = LeverageEditor;
+exports.LeverageHeader = LeverageHeader;
+exports.LeverageSlider = LeverageSlider;
+exports.LeverageWidgetWithDialogId = LeverageWidgetWithDialogId;
+exports.LeverageWidgetWithSheetId = LeverageWidgetWithSheetId;
+exports.SymbolLeverageDialogId = SymbolLeverageDialogId;
+exports.SymbolLeverageSheetId = SymbolLeverageSheetId;
+exports.SymbolLeverageWidget = SymbolLeverageWidget;
+exports.useLeverageScript = useLeverageScript;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map