@orderly.network/ui-leverage 2.8.1 → 2.8.2

package/dist/index.js

@@ -2,7 +2,7 @@
 
 var i18n = require('@orderly.network/i18n');
 var ui = require('@orderly.network/ui');
-var be = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@orderly.network/hooks');
 var perp = require('@orderly.network/perp');
@@ -11,19 +11,745 @@ var utils = require('@orderly.network/utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var be__default = /*#__PURE__*/_interopDefault(be);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
-var K=e=>{let{Icon:t,onClick:r,disabled:o}=e;return jsxRuntime.jsx(t,{onClick:o?void 0:r,className:ui.cn("oui-m-2 oui-text-white oui-transition-all",o?"oui-cursor-not-allowed oui-opacity-20":"oui-cursor-pointer oui-opacity-100")})},O=e=>{let t=be__default.default.useMemo(()=>[ui.inputFormatter.numberFormatter,ui.inputFormatter.dpFormatter(0)],[]),r=be.useId();return jsxRuntime.jsxs("label",{htmlFor:r,className:ui.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(K,{Icon:ui.ReduceIcon,onClick:e.onLeverageReduce,disabled:e.isReduceDisabled}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",justify:"center",className:"oui-mr-4",children:[jsxRuntime.jsx(ui.Input,{value:e.value,id:r,autoComplete:"off",classNames:{input:ui.cn("oui-text-right oui-text-[24px]"),root:ui.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:t,onChange:e.onInputChange}),jsxRuntime.jsx("div",{className:ui.cn("oui-ml-1 oui-mt-1 oui-select-none","oui-text-base oui-text-base-contrast-36"),children:"x"})]}),jsxRuntime.jsx(K,{Icon:ui.PlusIcon,onClick:e.onLeverageIncrease,disabled:e.isIncreaseDisabled})]})},q=e=>{let{currentLeverage:t}=e,{t:r}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(E,{currentLeverage:t}),jsxRuntime.jsx(O,{...e}),jsxRuntime.jsx(G,{...e}),jsxRuntime.jsx(W,{...e}),jsxRuntime.jsx(A,{...e})]})},A=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{direction:"row",gap:2,width:"100%",mt:0,pt:5,children:[jsxRuntime.jsx(ui.Button,{variant:"contained",color:"gray",fullWidth:true,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",size:e.isMobile?"md":"lg",children:t("common.cancel")}),jsxRuntime.jsx(ui.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:t("common.save")})]})},E=e=>{let{t}=i18n.useTranslation(),{currentLeverage:r}=e;return jsxRuntime.jsx(ui.Flex,{justify:"center",width:"100%",mb:2,children:jsxRuntime.jsxs(ui.Flex,{gap:1,children:[`${t("common.current")}:`,jsxRuntime.jsx(ui.Text.numeral,{unit:"x",size:"sm",intensity:80,dp:0,children:r??"--"})]})})},G=e=>{let{value:t,onLeverageChange:r}=e;return jsxRuntime.jsx(ui.Flex,{itemAlign:"center",justify:"between",width:"100%",mt:4,className:"oui-text-base-contrast-80",children:e.toggles.map(o=>jsxRuntime.jsx(ui.Flex,{itemAlign:"center",justify:"center",className:ui.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",t===o?"oui-border-primary oui-bg-base-6":"oui-border-line-12"),onClick:()=>r?.(o),children:jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",justify:"center",className:ui.cn("oui-h-3 oui-w-9 oui-select-none"),children:[o,"x"]})},o))})},Me=(e,t,r,o)=>{let s=100/(r-1)*(e-1);return t===0?Math.min(s+2,100):t===o-1?Math.max(s-3,0):s},W=e=>{let{leverageLevers:t,maxLeverage:r=0,className:o,value:u,showSliderTip:a,marks:n}=e,s=t.length>0?Math.max(...t):r;return jsxRuntime.jsxs(ui.Box,{pt:4,pb:7,width:"100%",className:o,children:[jsxRuntime.jsx(ui.Slider,{step:1,max:r,min:1,marks:n,value:[u],onValueChange:l=>{e.onLeverageChange(l[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:l=>{e.onValueCommit?.(l),e.setShowSliderTip(false);},showTip:a,tipFormatter:l=>`${l}x`}),jsxRuntime.jsx("div",{className:"oui-relative oui-w-full oui-pt-3",children:t?.map((l,C)=>{let m=Me(l,C,s,t.length);return jsxRuntime.jsx("button",{onClick:()=>{e.onLeverageChange(l),e.onValueCommit?.([l]);},className:ui.cn("oui-absolute oui-pb-3 oui-text-2xs oui-transform oui--translate-x-1/2",Number(e.value)>=Number(l)?"oui-text-primary-light":"oui-text-base-contrast-54"),style:{left:`${m}%`},"data-testid":`oui-testid-leverage-${l}-btn`,children:`${l}x`},l)})})]})};var z=e=>{let[t,r]=be.useState(false),{t:o}=i18n.useTranslation(),{curLeverage:u,maxLeverage:a,isLoading:n,leverageLevers:s,update:l}=hooks.useLeverage(),C=be.useMemo(()=>s.map(g=>({label:`${g}x`,value:g})),[s]),[m,L]=be.useState(u??0),P=100/((C?.length||0)-1),p=g=>{L(g);},R=()=>{L(g=>g+1);},S=()=>{L(g=>g-1);},F=be.useCallback(g=>{let T=Number.parseInt(g.target.value),H=Number.isNaN(T)?"":T;L(H);},[a]),d=async()=>{try{l({leverage:m}).then(()=>{e?.close?.(),ui.toast.success(o("leverage.updated"));},g=>{ui.toast.error(g.message);});}catch{}},f=m<=1,k=m>=a,x=!m||m<1||m>a,w=be.useMemo(()=>[5,10,20,50,100].filter(g=>g<=a),[a]);return {leverageLevers:s,currentLeverage:u,value:m,marks:C,onLeverageChange:p,onLeverageIncrease:R,onLeverageReduce:S,onInputChange:F,isReduceDisabled:f,isIncreaseDisabled:k,disabled:x,step:P,onCancel:e?.close,onSave:d,isLoading:n,showSliderTip:t,setShowSliderTip:r,maxLeverage:a,toggles:w}};var B=e=>{let t=z({close:e.close});return jsxRuntime.jsx(q,{...t})};var re=e=>{let{curLeverage:t=1,symbol:r,side:o}=e,[u,a]=be.useState(false),[n,s]=be.useState(t),{t:l}=i18n.useTranslation(),{isMobile:C}=ui.useScreen(),{maxLeverage:m,update:L,isLoading:P}=hooks.useSymbolLeverage(r),p=m,{position:R,maxPositionNotional:S,maxPositionLeverage:F,overMaxPositionLeverage:d,overRequiredMargin:f}=je({symbol:r,leverage:n,maxLeverage:p}),k=be.useMemo(()=>_e(p),[p]),x=be.useMemo(()=>Ue(p),[p]),w=be.useMemo(()=>x.map(v=>({label:`${v}x`,value:v}))||[],[x]),g=be.useMemo(()=>100/((w?.length||0)-1),[w]),T=v=>{s(v);},H=()=>{s(v=>v+1);},le=()=>{s(v=>v-1);},ue=be.useCallback(v=>{let U=Number.parseInt(v.target.value),Le=Number.isNaN(U)?"":U;s(Le);},[p]),ce=async()=>{try{L?.({leverage:n,symbol:r}).then(v=>{v.success?(e?.close?.(),ui.toast.success(l("leverage.updated"))):ui.toast.error(v.message);},v=>{ui.toast.error(v.message);});}catch{}},me=async()=>{ui.modal.confirm({title:l("leverage.confirm"),content:jsxRuntime.jsx(ui.Text,{intensity:54,children:l("leverage.confirm.content")}),onOk:ce,onCancel:()=>Promise.resolve()});},ge=n<=1,ve=n>=p,de=o?o===types.OrderSide.BUY:R?.position_qty&&R.position_qty>0,pe=!n||n<1||n>p||f||d;return {leverageLevers:x,currentLeverage:n,value:n,marks:w,onLeverageChange:T,onLeverageIncrease:H,onLeverageReduce:le,onInputChange:ue,isReduceDisabled:ge,isIncreaseDisabled:ve,disabled:pe,step:g,onCancel:e?.close,onSave:me,isLoading:P,showSliderTip:u,setShowSliderTip:a,maxLeverage:p,toggles:k,symbol:r,maxPositionNotional:S,maxPositionLeverage:F,overMaxPositionLeverage:d,overRequiredMargin:f,isBuy:de,isMobile:C}},_e=e=>{if(e===10)return [1,3,5,8,10];if(e===50)return [1,10,20,35,50];let t=1,r=5,o=(e-t)/(r-1),u=[];for(let a=0;a<r;a++)u.push(Math.floor(t+o*a));return u},$e=e=>{let t=[];if(e%5===0){let r=e/5;for(let o=0;o<6;o++){let u=r*o;t.push(u===0?1:u);}}else {t.push(1);let r=e*.25,o=e*.5,u=e*.75,a=Math.round(r),n=Math.round(o),s=Math.round(u);a>1&&a!==n&&t.push(a),n>1&&t.push(n),s>n&&s<e&&t.push(s),e>1&&t.push(e);}return t},Ue=e=>{switch(e){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]}let t=[];if(e<10)for(let r=1;r<=e;r++)t.push(r);else t.push(...$e(e));return t};function je(e){let{symbol:t,leverage:r,maxLeverage:o}=e,u=hooks.useSymbolsInfo(),{data:a}=hooks.useAccountInfo(),{data:n}=hooks.useMarkPricesStream(),{totalCollateral:s}=hooks.usePortfolio(),[l,C]=hooks.useLocalStorage("unPnlPriceBasis","markPrice"),[m]=hooks.usePositionStream("all",{calcMode:l}),L=be.useMemo(()=>{if(t&&m?.rows?.length)return m.rows.find(d=>d.symbol===t)},[m,t]),P=be.useMemo(()=>{let d=a?.imr_factor?.[t],f=L?.notional;if(d&&f){let k=perp.positions.maxPositionLeverage({IMRFactor:d,notional:f});return Math.min(k,o)}return o},[L,o,t]),p=be.useMemo(()=>{let d=a?.imr_factor?.[t];if(r&&d)return perp.positions.maxPositionNotional({leverage:r,IMRFactor:d})},[r,t]),R=be.useMemo(()=>r>P,[r,P]),S=be.useMemo(()=>{if(!a||!n||!u)return utils.zero;let d=r?m?.rows.map(x=>x.symbol===t?{...x,leverage:r}:x):m?.rows,f=perp.account.totalInitialMarginWithQty({positions:d,markPrices:n,IMR_Factors:a.imr_factor,maxLeverage:a.max_leverage,symbolInfo:u});return perp.account.freeCollateral({totalCollateral:s,totalInitialMarginWithOrders:f})},[m,u,a,n,s,r,t]),F=be.useMemo(()=>S.eq(0)||S.isNegative(),[S]);return {position:L,freeCollateral:S,maxPositionNotional:p,maxPositionLeverage:P,overMaxPositionLeverage:R,overRequiredMargin:F}}var ne=e=>{let{t}=i18n.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(ui.TokenIcon,{symbol:e.symbol,className:"oui-size-5"}),jsxRuntime.jsx(ui.Text.formatted,{rule:"symbol",formatString:"base-type",size:e.isMobile?"xs":"base",weight:"semibold",intensity:98,children:e.symbol}),jsxRuntime.jsxs("div",{className:ui.cn(["oui-ml-auto oui-flex oui-items-center oui-gap-1"]),children:[jsxRuntime.jsx(ui.Badge,{color:e.isBuy?"success":"danger",size:"xs",children:e.isBuy?t("common.long"):t("common.short")}),jsxRuntime.jsx(Ze,{leverage:e.currentLeverage})]})]}),jsxRuntime.jsx(ui.Divider,{}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(E,{currentLeverage:e.currentLeverage}),jsxRuntime.jsx(O,{...e}),jsxRuntime.jsx(G,{...e}),jsxRuntime.jsx(W,{...e}),jsxRuntime.jsx(ui.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(i18n.Trans,{i18nKey:"leverage.maxAvailableLeverage.tips",values:{leverage:e.maxPositionLeverage},components:[jsxRuntime.jsx(ui.Text.numeral,{dp:0,suffix:"x",as:"span",className:"oui-text-base-contrast"},"0")]})}),jsxRuntime.jsx("div",{children:t("leverage.actualPositionLeverage.tips")})]}),jsxRuntime.jsxs("div",{className:ui.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(ui.Text,{color:"warning",children:t("leverage.overRequiredMargin.tips")})}),e.overMaxPositionLeverage&&jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ui.Text,{color:"warning",children:jsxRuntime.jsx(i18n.Trans,{i18nKey:"leverage.overMaxPositionLeverage.tips",values:{leverage:e.maxPositionLeverage},components:[jsxRuntime.jsx(ui.Text.numeral,{dp:0,suffix:"X",as:"span"},"0")]})})})]}),jsxRuntime.jsx(A,{...e})]})]})},Ze=({leverage:e})=>jsxRuntime.jsxs("div",{className:ui.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(ui.Text,{children:"Cross"}),jsxRuntime.jsx(ui.Text.numeral,{dp:0,size:"2xs",unit:"X",children:e})]});var V=e=>{let t=re(e);return jsxRuntime.jsx(ne,{...t})};var ot="SymbolLeverageSheetId",at="SymbolLeverageDialogId";ui.registerSimpleSheet(ot,V,{title:()=>i18n.i18n.t("leverage.adjustedLeverage"),classNames:{}});ui.registerSimpleDialog(at,V,{title:()=>i18n.i18n.t("leverage.adjustedLeverage"),classNames:{content:"oui-w-[420px]"}});var st="LeverageWidgetWithDialog",lt="LeverageWidgetWithSheet";ui.registerSimpleDialog(st,B,{title:()=>i18n.i18n.t("leverage.maxAccountLeverage"),size:"md"});ui.registerSimpleSheet(lt,B,{title:()=>i18n.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: ui.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(
+    () => [ui.inputFormatter.numberFormatter, ui.inputFormatter.dpFormatter(0)],
+    []
+  );
+  const id = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: id,
+      className: ui.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: ui.ReduceIcon,
+            onClick: props.onLeverageReduce,
+            disabled: props.isReduceDisabled
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "center", className: "oui-mr-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              value: props.value,
+              id,
+              autoComplete: "off",
+              classNames: {
+                input: ui.cn("oui-text-right oui-text-[24px]"),
+                root: ui.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: ui.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: ui.PlusIcon,
+            onClick: props.onLeverageIncrease,
+            disabled: props.isIncreaseDisabled
+          }
+        )
+      ]
+    }
+  );
+};
+var Leverage = (props) => {
+  const { currentLeverage } = props;
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.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 } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", gap: 2, width: "100%", mt: 0, pt: 5, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.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(
+      ui.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 } = i18n.useTranslation();
+  const { currentLeverage } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", width: "100%", mb: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+    `${t("common.current")}:`,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { unit: "x", size: "sm", intensity: 80, dp: 0, children: currentLeverage ?? "--" })
+  ] }) });
+};
+var LeverageSelector = (props) => {
+  const { value, onLeverageChange } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Flex,
+    {
+      itemAlign: "center",
+      justify: "between",
+      width: "100%",
+      mt: 4,
+      className: "oui-text-base-contrast-80",
+      children: props.toggles.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Flex,
+        {
+          itemAlign: "center",
+          justify: "center",
+          className: ui.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(
+            ui.Flex,
+            {
+              itemAlign: "center",
+              justify: "center",
+              className: ui.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(ui.Box, { pt: 4, pb: 7, width: "100%", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Slider,
+      {
+        step: 1,
+        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("div", { className: "oui-relative oui-w-full oui-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: ui.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 } = i18n.useTranslation();
+  const { curLeverage, maxLeverage, isLoading, leverageLevers, update } = hooks.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?.();
+          ui.toast.success(t("leverage.updated"));
+        },
+        (err) => {
+          ui.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 } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const {
+    maxLeverage: originalMaxLeverage,
+    update,
+    isLoading
+  } = hooks.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);
+      const value = Number.isNaN(parsed) ? "" : parsed;
+      setLeverage(value);
+    },
+    [maxLeverage]
+  );
+  const onConfirmSave = async () => {
+    try {
+      update?.({ leverage, symbol }).then(
+        (res) => {
+          if (res.success) {
+            options?.close?.();
+            ui.toast.success(t("leverage.updated"));
+          } else {
+            ui.toast.error(res.message);
+          }
+        },
+        (err) => {
+          ui.toast.error(err.message);
+        }
+      );
+    } catch (err) {
+    }
+  };
+  const onSave = async () => {
+    ui.modal.confirm({
+      title: t("leverage.confirm"),
+      content: /* @__PURE__ */ jsxRuntime.jsx(ui.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 === types.OrderSide.BUY : position?.position_qty && position.position_qty > 0;
+  const disabled = !leverage || leverage < 1 || leverage > maxLeverage || overRequiredMargin || overMaxPositionLeverage;
+  return {
+    leverageLevers,
+    currentLeverage: leverage,
+    value: leverage,
+    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 = hooks.useSymbolsInfo();
+  const { data: accountInfo } = hooks.useAccountInfo();
+  const { data: markPrices } = hooks.useMarkPricesStream();
+  const { totalCollateral } = hooks.usePortfolio();
+  const [unPnlPriceBasis, setUnPnlPriceBasic] = hooks.useLocalStorage(
+    "unPnlPriceBasis",
+    "markPrice"
+  );
+  const [positions] = hooks.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 = perp.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 perp.positions.maxPositionNotional({
+        leverage,
+        IMRFactor
+      });
+    }
+  }, [leverage, symbol]);
+  const overMaxPositionLeverage = React.useMemo(() => {
+    return leverage > maxPositionLeverage;
+  }, [leverage, maxPositionLeverage]);
+  const freeCollateral = React.useMemo(() => {
+    if (!accountInfo || !markPrices || !symbolsInfo) {
+      return utils.zero;
+    }
+    const positionList = leverage ? positions?.rows.map((item) => {
+      if (item.symbol === symbol) {
+        return {
+          ...item,
+          leverage
+        };
+      }
+      return item;
+    }) : positions?.rows;
+    const totalInitialMarginWithOrders = perp.account.totalInitialMarginWithQty({
+      positions: positionList,
+      markPrices,
+      IMR_Factors: accountInfo.imr_factor,
+      // not used
+      maxLeverage: accountInfo.max_leverage,
+      symbolInfo: symbolsInfo
+    });
+    const freeCollateral2 = perp.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 } = i18n.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(ui.TokenIcon, { symbol: props.symbol, className: "oui-size-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.formatted,
+        {
+          rule: "symbol",
+          formatString: "base-type",
+          size: props.isMobile ? "xs" : "base",
+          weight: "semibold",
+          intensity: 98,
+          children: props.symbol
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: ui.cn(["oui-ml-auto oui-flex oui-items-center oui-gap-1"]),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.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(ui.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.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(ui.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(
+          i18n.Trans,
+          {
+            i18nKey: "leverage.maxAvailableLeverage.tips",
+            values: { leverage: props.maxPositionLeverage },
+            components: [
+              // @ts-ignore
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.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: ui.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(ui.Text, { color: "warning", children: t("leverage.overRequiredMargin.tips") }) }),
+            props.overMaxPositionLeverage && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: "warning", children: /* @__PURE__ */ jsxRuntime.jsx(
+              i18n.Trans,
+              {
+                i18nKey: "leverage.overMaxPositionLeverage.tips",
+                values: { leverage: props.maxPositionLeverage },
+                components: [
+                  // @ts-ignore
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 0, suffix: "X", as: "span" }, "0")
+                ]
+              }
+            ) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(LeverageFooter, { ...props })
+    ] })
+  ] });
+};
+var LeverageBadge = ({ leverage }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.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(ui.Text, { children: "Cross" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.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 = q;
-exports.LeverageEditor = B;
-exports.LeverageHeader = E;
-exports.LeverageSlider = W;
-exports.LeverageWidgetWithDialogId = st;
-exports.LeverageWidgetWithSheetId = lt;
-exports.SymbolLeverageDialogId = at;
-exports.SymbolLeverageSheetId = ot;
-exports.SymbolLeverageWidget = V;
-exports.useLeverageScript = z;
+// src/symbolLeverage/index.ts
+var SymbolLeverageSheetId = "SymbolLeverageSheetId";
+var SymbolLeverageDialogId = "SymbolLeverageDialogId";
+ui.registerSimpleSheet(SymbolLeverageSheetId, SymbolLeverageWidget, {
+  title: () => i18n.i18n.t("leverage.adjustedLeverage"),
+  classNames: {
+    // content: "oui-p-5",
+  }
+});
+ui.registerSimpleDialog(SymbolLeverageDialogId, SymbolLeverageWidget, {
+  title: () => i18n.i18n.t("leverage.adjustedLeverage"),
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+
+// src/index.ts
+var LeverageWidgetWithDialogId = "LeverageWidgetWithDialog";
+var LeverageWidgetWithSheetId = "LeverageWidgetWithSheet";
+ui.registerSimpleDialog(LeverageWidgetWithDialogId, LeverageEditor, {
+  title: () => i18n.i18n.t("leverage.maxAccountLeverage"),
+  size: "md"
+});
+ui.registerSimpleSheet(LeverageWidgetWithSheetId, LeverageEditor, {
+  title: () => i18n.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