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

package/dist/index.mjs

@@ -1,14 +1,742 @@
 import { i18n, useTranslation, Trans } from '@kodiak-finance/orderly-i18n';
 import { registerSimpleSheet, registerSimpleDialog, useScreen, TokenIcon, Text, cn, Badge, Divider, Flex, modal, inputFormatter, ReduceIcon, Input, PlusIcon, Box, Slider, Button, toast } from '@kodiak-finance/orderly-ui';
-import pe, { useState, useMemo, useCallback, useId } from 'react';
+import React, { useState, useMemo, useCallback, useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useSymbolLeverage, useLeverage, useSymbolsInfo, useAccountInfo, useMarkPricesStream, usePortfolio, useLocalStorage, usePositionStream } from '@kodiak-finance/orderly-hooks';
 import { positions, account } from '@kodiak-finance/orderly-perp';
 import { OrderSide } from '@kodiak-finance/orderly-types';
 import { zero } from '@kodiak-finance/orderly-utils';
 
-var X=e=>{let{Icon:o,onClick:t,disabled:s}=e;return jsx(o,{onClick:s?void 0:t,className: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.useMemo(()=>[inputFormatter.numberFormatter,inputFormatter.dpFormatter(0)],[]),t=useId();return jsxs("label",{htmlFor:t,className: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:[jsx(X,{Icon:ReduceIcon,onClick:e.onLeverageReduce,disabled:e.isReduceDisabled}),jsxs(Flex,{itemAlign:"center",justify:"center",className:"oui-mr-4",children:[jsx(Input,{value:e.value,id:t,autoComplete:"off",classNames:{input:cn("oui-text-right oui-text-[24px]"),root: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}),jsx("div",{className:cn("oui-ml-1 oui-mt-1 oui-select-none","oui-text-base oui-text-base-contrast-36"),children:"x"})]}),jsx(X,{Icon:PlusIcon,onClick:e.onLeverageIncrease,disabled:e.isIncreaseDisabled})]})},A=e=>{let{currentLeverage:o}=e,{t}=useTranslation();return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsx(T,{currentLeverage:o}),jsx(O,{...e}),jsx(z,{...e}),jsx(E,{...e}),jsx(G,{...e})]})},G=e=>{let{t:o}=useTranslation();return jsxs(Flex,{direction:"row",gap:2,width:"100%",mt:0,pt:5,children:[jsx(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")}),jsx(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}=useTranslation(),{currentLeverage:t}=e;return jsx(Flex,{justify:"center",width:"100%",mb:2,children:jsxs(Flex,{gap:1,children:[`${o("common.current")}:`,jsx(Text.numeral,{unit:"x",size:"sm",intensity:80,dp:0,children:t??"--"})]})})},z=e=>{let{value:o,onLeverageChange:t}=e;return jsx(Flex,{itemAlign:"center",justify:"between",width:"100%",mt:4,className:"oui-text-base-contrast-80",children:e.toggles.map(s=>jsx(Flex,{itemAlign:"center",justify:"center",className: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:jsxs(Flex,{itemAlign:"center",justify:"center",className: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 jsxs(Box,{pt:4,width:"100%",className:s,children:[jsx(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`}),jsx(Flex,{justify:"between",width:"100%",pt:3,children:o?.map((r,m)=>jsx("button",{onClick:()=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className: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]=useState(false),{t:s}=useTranslation(),{curLeverage:v,maxLeverage:n,isLoading:r,leverageLevers:m,update:y}=useLeverage(),R=useMemo(()=>m.map(u=>({label:`${u}x`,value:u})),[m]),[i,p]=useState(v??0),h=100/((R?.length||0)-1),F=u=>{p(u);},w=()=>{p(u=>u+1);},x=()=>{p(u=>u-1);},N=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?.(),toast.success(s("leverage.updated"));},u=>{toast.error(u.message);});}catch{}},d=i<=1,f=i>=n,C=!i||i<1||i>n,V=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 jsx(A,{...o})};var te=e=>{let{curLeverage:o=1,symbol:t,side:s}=e,[v,n]=useState(false),[r,m]=useState(o),{t:y}=useTranslation(),{isMobile:R}=useScreen(),{maxLeverage:i,update:p,isLoading:h}=useSymbolLeverage(t),{position:F,maxPositionNotional:w,maxPositionLeverage:x,overMaxPositionLeverage:N,overRequiredMargin:g}=ze({symbol:t,leverage:r,maxLeverage:i}),d=useMemo(()=>Ge(i),[i]),f=useMemo(()=>d.map(c=>({label:`${c}x`,value:c}))||[],[d]),C=useMemo(()=>100/((f?.length||0)-1),[f]),V=c=>{m(c);},u=()=>{m(c=>c+1);},k=()=>{m(c=>c-1);},H=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?.(),toast.success(y("leverage.updated"))):toast.error(c.message);},c=>{toast.error(c.message);});}catch{}},ue=async()=>{modal.confirm({title:y("leverage.confirm"),content:jsx(Text,{intensity:54,children:y("leverage.confirm.content")}),onOk:le,onCancel:()=>Promise.resolve()});},ce=r<=1,me=r>=i,ge=s?s===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=useSymbolsInfo(),{data:n}=useAccountInfo(),{data:r}=useMarkPricesStream(),{totalCollateral:m}=usePortfolio(),[y,R]=useLocalStorage("unPnlPriceBasis","markPrice"),[i]=usePositionStream("all",{calcMode:y}),p=useMemo(()=>{if(o&&i?.rows?.length)return i.rows.find(g=>g.symbol===o)},[i,o]),h=useMemo(()=>{let g=n?.imr_factor?.[o],d=p?.notional;if(g&&d){let f=positions.maxPositionLeverage({IMRFactor:g,notional:d});return Math.min(f,s)}return s},[p,s,o]),F=useMemo(()=>{let g=n?.imr_factor?.[o];if(t&&g)return positions.maxPositionNotional({leverage:t,IMRFactor:g})},[t,o]),w=useMemo(()=>t>h,[t,h]),x=useMemo(()=>{if(!n||!r||!v)return zero;let g=t?i?.rows.map(C=>C.symbol===o?{...C,leverage:t}:C):i?.rows,d=account.totalInitialMarginWithQty({positions:g,markPrices:r,IMR_Factors:n.imr_factor,maxLeverage:n.max_leverage,symbolInfo:v});return account.freeCollateral({totalCollateral:m,totalInitialMarginWithOrders:d})},[i,v,n,r,m,t,o]),N=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}=useTranslation();return jsxs("div",{className:"oui-flex oui-flex-col oui-gap-3 lg:oui-gap-4",children:[jsxs("div",{className:"oui-flex oui-items-center oui-gap-2",children:[jsx(TokenIcon,{symbol:e.symbol,className:"oui-size-5"}),jsx(Text.formatted,{rule:"symbol",formatString:"base-type",size:e.isMobile?"xs":"base",weight:"semibold",intensity:98,children:e.symbol}),jsxs("div",{className:cn(["oui-ml-auto oui-flex oui-items-center oui-gap-1"]),children:[jsx(Badge,{color:e.isBuy?"success":"danger",size:"xs",children:e.isBuy?o("common.long"):o("common.short")}),jsx(Ke,{leverage:e.currentLeverage})]})]}),jsx(Divider,{}),jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsx(T,{currentLeverage:e.currentLeverage}),jsx(O,{...e}),jsx(z,{...e}),jsx(E,{...e}),jsx(Divider,{className:"oui-mb-3 oui-w-full"}),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:[jsx("div",{children:jsx(Trans,{i18nKey:"leverage.maxAvailableLeverage.tips",values:{leverage:e.maxPositionLeverage},components:[jsx(Text.numeral,{dp:0,suffix:"x",as:"span",className:"oui-text-base-contrast"},"0")]})}),jsx("div",{children:o("leverage.actualPositionLeverage.tips")})]}),jsxs("div",{className:cn(["-oui-mb-2",e.overRequiredMargin||e.overMaxPositionLeverage?"oui-block oui-text-xs oui-font-normal":"oui-hidden"]),children:[e.overRequiredMargin&&jsx("div",{children:jsx(Text,{color:"warning",children:o("leverage.overRequiredMargin.tips")})}),e.overMaxPositionLeverage&&jsx("div",{children:jsx(Text,{color:"warning",children:jsx(Trans,{i18nKey:"leverage.overMaxPositionLeverage.tips",values:{leverage:e.maxPositionLeverage},components:[jsx(Text.numeral,{dp:0,suffix:"X",as:"span"},"0")]})})})]}),jsx(G,{...e})]})]})},Ke=({leverage:e})=>jsxs("div",{className: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:[jsx(Text,{children:"Cross"}),jsx(Text.numeral,{dp:0,size:"2xs",unit:"X",children:e})]});var B=e=>{let o=te(e);return jsx(ie,{...o})};var Je="SymbolLeverageSheetId",Ze="SymbolLeverageDialogId";registerSimpleSheet(Je,B,{title:()=>i18n.t("leverage.adjustedLeverage"),classNames:{}});registerSimpleDialog(Ze,B,{title:()=>i18n.t("leverage.adjustedLeverage"),classNames:{content:"oui-w-[420px]"}});var to="LeverageWidgetWithDialog",ro="LeverageWidgetWithSheet";registerSimpleDialog(to,W,{title:()=>i18n.t("leverage.maxAccountLeverage"),size:"md"});registerSimpleSheet(ro,W,{title:()=>i18n.t("leverage.maxAccountLeverage")});
+// src/index.ts
+var IconButton = (props) => {
+  const { Icon, onClick, disabled } = props;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      onClick: disabled ? void 0 : onClick,
+      className: 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.useMemo(
+    () => [inputFormatter.numberFormatter, inputFormatter.dpFormatter(0)],
+    []
+  );
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: id,
+      className: 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__ */ jsx(
+          IconButton,
+          {
+            Icon: ReduceIcon,
+            onClick: props.onLeverageReduce,
+            disabled: props.isReduceDisabled
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "center", className: "oui-mr-4", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: props.value,
+              id,
+              autoComplete: "off",
+              classNames: {
+                input: cn("oui-text-right oui-text-[24px]"),
+                root: 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__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "oui-ml-1 oui-mt-1 oui-select-none",
+                "oui-text-base oui-text-base-contrast-36"
+              ),
+              children: "x"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            Icon: PlusIcon,
+            onClick: props.onLeverageIncrease,
+            disabled: props.isIncreaseDisabled
+          }
+        )
+      ]
+    }
+  );
+};
+var Leverage = (props) => {
+  const { currentLeverage } = props;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Flex, { itemAlign: "start", direction: "column", mb: 0, children: [
+    /* @__PURE__ */ jsx(LeverageHeader, { currentLeverage }),
+    /* @__PURE__ */ jsx(LeverageInput, { ...props }),
+    /* @__PURE__ */ jsx(LeverageSelector, { ...props }),
+    /* @__PURE__ */ jsx(LeverageSlider, { ...props }),
+    /* @__PURE__ */ jsx(LeverageFooter, { ...props })
+  ] });
+};
+var LeverageFooter = (props) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 2, width: "100%", mt: 0, pt: 5, children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(
+      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 } = useTranslation();
+  const { currentLeverage } = props;
+  return /* @__PURE__ */ jsx(Flex, { justify: "center", width: "100%", mb: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+    `${t("common.current")}:`,
+    /* @__PURE__ */ jsx(Text.numeral, { unit: "x", size: "sm", intensity: 80, dp: 0, children: currentLeverage ?? "--" })
+  ] }) });
+};
+var LeverageSelector = (props) => {
+  const { value, onLeverageChange } = props;
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      itemAlign: "center",
+      justify: "between",
+      width: "100%",
+      mt: 4,
+      className: "oui-text-base-contrast-80",
+      children: props.toggles.map((option) => /* @__PURE__ */ jsx(
+        Flex,
+        {
+          itemAlign: "center",
+          justify: "center",
+          className: 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__ */ jsxs(
+            Flex,
+            {
+              itemAlign: "center",
+              justify: "center",
+              className: 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__ */ jsxs(Box, { pt: 4, width: "100%", className, children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(Flex, { justify: "between", width: "100%", pt: 3, children: leverageLevers?.map((item, index) => {
+      const position = getMarkPosition(
+        item,
+        index,
+        sliderMax,
+        leverageLevers.length
+      );
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            props.onLeverageChange(item);
+            props.onValueCommit?.([item]);
+          },
+          className: 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] = useState(false);
+  const { t } = useTranslation();
+  const { curLeverage, maxLeverage, isLoading, leverageLevers, update } = useLeverage();
+  const marks = useMemo(() => {
+    return leverageLevers.map((e) => ({
+      label: `${e}x`,
+      value: e
+    }));
+  }, [leverageLevers]);
+  const [leverage, setLeverage] = 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 = 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?.();
+          toast.success(t("leverage.updated"));
+        },
+        (err) => {
+          toast.error(err.message);
+        }
+      );
+    } catch (err) {
+    }
+  };
+  const isReduceDisabled = leverage <= 1;
+  const isIncreaseDisabled = leverage >= maxLeverage;
+  const disabled = !leverage || leverage < 1 || leverage > maxLeverage;
+  const toggles = 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__ */ jsx(Leverage, { ...state });
+};
+var useSymbolLeverageScript = (options) => {
+  const { curLeverage = 1, symbol, side } = options;
+  const [showSliderTip, setShowSliderTip] = useState(false);
+  const [leverage, setLeverage] = useState(curLeverage);
+  const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const {
+    maxLeverage: originalMaxLeverage,
+    update,
+    isLoading
+  } = useSymbolLeverage(symbol);
+  const maxLeverage = originalMaxLeverage;
+  const {
+    position,
+    maxPositionNotional,
+    maxPositionLeverage,
+    overMaxPositionLeverage,
+    overRequiredMargin
+  } = useCalc({ symbol, leverage, maxLeverage });
+  const formattedLeverageLevers = useMemo(() => {
+    return generateLeverageLeversForSelector(maxLeverage);
+  }, [maxLeverage]);
+  const leverageLevers = useMemo(() => {
+    return generateLeverageLevers(maxLeverage);
+  }, [maxLeverage]);
+  const marks = useMemo(() => {
+    return leverageLevers.map((e) => ({
+      label: `${e}x`,
+      value: e
+    })) || [];
+  }, [leverageLevers]);
+  const step = 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 = 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?.();
+            toast.success(t("leverage.updated"));
+          } else {
+            toast.error(res.message);
+          }
+        },
+        (err) => {
+          toast.error(err.message);
+        }
+      );
+    } catch (err) {
+    }
+  };
+  const onSave = async () => {
+    modal.confirm({
+      title: t("leverage.confirm"),
+      content: /* @__PURE__ */ jsx(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 === 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 = useSymbolsInfo();
+  const { data: accountInfo } = useAccountInfo();
+  const { data: markPrices } = useMarkPricesStream();
+  const { totalCollateral } = usePortfolio();
+  const [unPnlPriceBasis, setUnPnlPriceBasic] = useLocalStorage(
+    "unPnlPriceBasis",
+    "markPrice"
+  );
+  const [positions$1] = usePositionStream("all", {
+    calcMode: unPnlPriceBasis
+  });
+  const position = useMemo(() => {
+    if (symbol && positions$1?.rows?.length) {
+      return positions$1.rows.find((item) => item.symbol === symbol);
+    }
+  }, [positions$1, symbol]);
+  const maxPositionLeverage = useMemo(() => {
+    const IMRFactor = accountInfo?.imr_factor?.[symbol];
+    const notional = position?.notional;
+    if (IMRFactor && notional) {
+      const maxPositionLeverage2 = positions.maxPositionLeverage({
+        IMRFactor,
+        notional
+      });
+      return Math.min(maxPositionLeverage2, maxLeverage);
+    }
+    return maxLeverage;
+  }, [position, maxLeverage, symbol]);
+  const maxPositionNotional = useMemo(() => {
+    const IMRFactor = accountInfo?.imr_factor?.[symbol];
+    if (leverage && IMRFactor) {
+      return positions.maxPositionNotional({
+        leverage,
+        IMRFactor
+      });
+    }
+  }, [leverage, symbol]);
+  const overMaxPositionLeverage = useMemo(() => {
+    return leverage > maxPositionLeverage;
+  }, [leverage, maxPositionLeverage]);
+  const freeCollateral = useMemo(() => {
+    if (!accountInfo || !markPrices || !symbolsInfo) {
+      return zero;
+    }
+    const positionList = leverage ? positions$1?.rows.map((item) => {
+      if (item.symbol === symbol) {
+        return {
+          ...item,
+          leverage
+        };
+      }
+      return item;
+    }) : positions$1?.rows;
+    const totalInitialMarginWithOrders = account.totalInitialMarginWithQty({
+      positions: positionList,
+      markPrices,
+      IMR_Factors: accountInfo.imr_factor,
+      // not used
+      maxLeverage: accountInfo.max_leverage,
+      symbolInfo: symbolsInfo
+    });
+    const freeCollateral2 = account.freeCollateral({
+      totalCollateral,
+      totalInitialMarginWithOrders
+    });
+    return freeCollateral2;
+  }, [
+    positions$1,
+    symbolsInfo,
+    accountInfo,
+    markPrices,
+    totalCollateral,
+    leverage,
+    symbol
+  ]);
+  const overRequiredMargin = useMemo(() => {
+    return freeCollateral.eq(0) || freeCollateral.isNegative();
+  }, [freeCollateral]);
+  return {
+    position,
+    freeCollateral,
+    maxPositionNotional,
+    maxPositionLeverage,
+    overMaxPositionLeverage,
+    overRequiredMargin
+  };
+}
+var SymbolLeverage = (props) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-3 lg:oui-gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-2", children: [
+      /* @__PURE__ */ jsx(TokenIcon, { symbol: props.symbol, className: "oui-size-5" }),
+      /* @__PURE__ */ jsx(
+        Text.formatted,
+        {
+          rule: "symbol",
+          formatString: "base-type",
+          size: props.isMobile ? "xs" : "base",
+          weight: "semibold",
+          intensity: 98,
+          children: props.symbol
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(["oui-ml-auto oui-flex oui-items-center oui-gap-1"]),
+          children: [
+            /* @__PURE__ */ jsx(Badge, { color: props.isBuy ? "success" : "danger", size: "xs", children: props.isBuy ? t("common.long") : t("common.short") }),
+            /* @__PURE__ */ jsx(LeverageBadge, { leverage: props.currentLeverage })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(Flex, { itemAlign: "start", direction: "column", mb: 0, children: [
+      /* @__PURE__ */ jsx(LeverageHeader, { currentLeverage: props.currentLeverage }),
+      /* @__PURE__ */ jsx(LeverageInput, { ...props }),
+      /* @__PURE__ */ jsx(LeverageSelector, { ...props }),
+      /* @__PURE__ */ jsx(LeverageSlider, { ...props }),
+      /* @__PURE__ */ jsx(Divider, { className: "oui-mb-3 oui-w-full" }),
+      /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Trans,
+          {
+            i18nKey: "leverage.maxAvailableLeverage.tips",
+            values: { leverage: props.maxPositionLeverage },
+            components: [
+              // @ts-ignore
+              /* @__PURE__ */ jsx(
+                Text.numeral,
+                {
+                  dp: 0,
+                  suffix: "x",
+                  as: "span",
+                  className: "oui-text-base-contrast"
+                },
+                "0"
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { children: t("leverage.actualPositionLeverage.tips") })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn([
+            "-oui-mb-2",
+            props.overRequiredMargin || props.overMaxPositionLeverage ? "oui-block oui-text-xs oui-font-normal" : "oui-hidden"
+          ]),
+          children: [
+            props.overRequiredMargin && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { color: "warning", children: t("leverage.overRequiredMargin.tips") }) }),
+            props.overMaxPositionLeverage && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { color: "warning", children: /* @__PURE__ */ jsx(
+              Trans,
+              {
+                i18nKey: "leverage.overMaxPositionLeverage.tips",
+                values: { leverage: props.maxPositionLeverage },
+                components: [
+                  // @ts-ignore
+                  /* @__PURE__ */ jsx(Text.numeral, { dp: 0, suffix: "X", as: "span" }, "0")
+                ]
+              }
+            ) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(LeverageFooter, { ...props })
+    ] })
+  ] });
+};
+var LeverageBadge = ({ leverage }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: 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__ */ jsx(Text, { children: "Cross" }),
+        /* @__PURE__ */ jsx(Text.numeral, { dp: 0, size: "2xs", unit: "X", children: leverage })
+      ]
+    }
+  );
+};
+var SymbolLeverageWidget = (props) => {
+  const state = useSymbolLeverageScript(props);
+  return /* @__PURE__ */ jsx(SymbolLeverage, { ...state });
+};
 
-export { A as Leverage, W as LeverageEditor, T as LeverageHeader, E as LeverageSlider, to as LeverageWidgetWithDialogId, ro as LeverageWidgetWithSheetId, Ze as SymbolLeverageDialogId, Je as SymbolLeverageSheetId, B as SymbolLeverageWidget, q as useLeverageScript };
+// src/symbolLeverage/index.ts
+var SymbolLeverageSheetId = "SymbolLeverageSheetId";
+var SymbolLeverageDialogId = "SymbolLeverageDialogId";
+registerSimpleSheet(SymbolLeverageSheetId, SymbolLeverageWidget, {
+  title: () => i18n.t("leverage.adjustedLeverage"),
+  classNames: {
+    // content: "oui-p-5",
+  }
+});
+registerSimpleDialog(SymbolLeverageDialogId, SymbolLeverageWidget, {
+  title: () => i18n.t("leverage.adjustedLeverage"),
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+
+// src/index.ts
+var LeverageWidgetWithDialogId = "LeverageWidgetWithDialog";
+var LeverageWidgetWithSheetId = "LeverageWidgetWithSheet";
+registerSimpleDialog(LeverageWidgetWithDialogId, LeverageEditor, {
+  title: () => i18n.t("leverage.maxAccountLeverage"),
+  size: "md"
+});
+registerSimpleSheet(LeverageWidgetWithSheetId, LeverageEditor, {
+  title: () => i18n.t("leverage.maxAccountLeverage")
+});
+
+export { Leverage, LeverageEditor, LeverageHeader, LeverageSlider, LeverageWidgetWithDialogId, LeverageWidgetWithSheetId, SymbolLeverageDialogId, SymbolLeverageSheetId, SymbolLeverageWidget, useLeverageScript };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map