@orderly.network/ui-leverage 2.0.7 → 2.0.8-alpha.0

package/dist/index.js

@@ -1,17 +1,18 @@
 'use strict';
 
 var ui = require('@orderly.network/ui');
+var i18n = require('@orderly.network/i18n');
 var jsxRuntime = require('react/jsx-runtime');
-var hooks = require('@orderly.network/hooks');
 var react = require('react');
+var hooks = require('@orderly.network/hooks');
 
-var g=e=>{let{currentLeverage:r=0}=e;return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(x,{currentLeverage:r}),jsxRuntime.jsx(S,{...e}),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",children:"Cancel"}),jsxRuntime.jsx(ui.Button,{fullWidth:true,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},x=e=>jsxRuntime.jsxs(ui.Flex,{justify:"between",width:"100%",children:[jsxRuntime.jsx(ui.Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:"Max account leverage"}),jsxRuntime.jsxs(ui.Flex,{direction:"row",gap:1,children:[jsxRuntime.jsx(ui.Text,{size:"sm",intensity:54,children:"Current:"}),jsxRuntime.jsx(ui.Text.numeral,{unit:"x",size:"sm",intensity:80,children:e.currentLeverage??"--"})]})]}),S=e=>jsxRuntime.jsxs(ui.Box,{pt:3,width:"100%",className:e.className,children:[jsxRuntime.jsx(ui.Slider,{max:e.maxLeverage,min:1,markCount:5,value:[e.value],onValueChange:r=>{e.onLeverageChange(r[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:r=>{e.onValueCommit?.(r),e.setShowSliderTip(false);},showTip:e.showSliderTip,tipFormatter:(r,o,s,c)=>`${r}x`}),jsxRuntime.jsx(ui.Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((r,o)=>jsxRuntime.jsx("button",{onClick:s=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className:ui.cn(" oui-text-2xs oui-pb-3",o===0?"oui-pr-2":o===5?"oui-pl-0":"oui-px-0 oui-ml-2",e.value>=r&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${r}-btn`,children:`${r}x`}))})]});var v=e=>{let{currentLeverage:r}=hooks.useMarginRatio(),[o,s]=react.useState(false),[c,{update:f,config:l,isMutating:y}]=hooks.useLeverage(),p=react.useMemo(()=>l?.map(t=>({label:`${t}x`,value:t}))||[],[l]),[d,b]=react.useState(c??0),w=l?.reduce((t,k)=>Math.max(t,Number(k),0),0),P=100/((p?.length||0)-1),F=t=>{b(t);},T=async()=>{try{f({leverage:d}).then(t=>{e?.close?.(),ui.toast.success("Leverage updated");},t=>{ui.toast.error(t.message);});}catch{}};return {currentLeverage:r,value:d,marks:p,onLeverageChange:F,step:P,onCancel:e?.close,onSave:T,isLoading:y,showSliderTip:o,setShowSliderTip:s,maxLeverage:w}};var m=e=>{let r=v({close:e.close});return jsxRuntime.jsx(g,{...r})};var $="leverageEditor";ui.registerSimpleDialog($,m,{title:"Max account leverage",size:"md"});
+var m=e=>{let{currentLeverage:r=0}=e,{t:a}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(S,{currentLeverage:r}),jsxRuntime.jsx(f,{...e}),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",children:a("common.cancel")}),jsxRuntime.jsx(ui.Button,{fullWidth:true,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:a("common.save")})]})]})},S=e=>{let{t:r}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{justify:"between",width:"100%",children:[jsxRuntime.jsx(ui.Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:r("leverage.maxAccountLeverage")}),jsxRuntime.jsxs(ui.Flex,{gap:1,children:[`${r("common.current")}:`,jsxRuntime.jsx(ui.Text.numeral,{unit:"x",size:"sm",intensity:80,children:e.currentLeverage??"--"})]})]})},f=e=>jsxRuntime.jsxs(ui.Box,{pt:3,width:"100%",className:e.className,children:[jsxRuntime.jsx(ui.Slider,{max:e.maxLeverage,min:1,markCount:5,value:[e.value],onValueChange:r=>{e.onLeverageChange(r[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:r=>{e.onValueCommit?.(r),e.setShowSliderTip(false);},showTip:e.showSliderTip,tipFormatter:(r,a,s,v)=>`${r}x`}),jsxRuntime.jsx(ui.Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((r,a)=>jsxRuntime.jsx("button",{onClick:s=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className:ui.cn(" oui-text-2xs oui-pb-3",a===0?"oui-pr-2":a===5?"oui-pl-0":"oui-px-0 oui-ml-2",e.value>=r&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${r}-btn`,children:`${r}x`}))})]});var u=e=>{let{currentLeverage:r}=hooks.useMarginRatio(),[a,s]=react.useState(false),{t:v}=i18n.useTranslation(),[b,{update:y,config:l,isMutating:w}]=hooks.useLeverage(),c=react.useMemo(()=>l?.map(t=>({label:`${t}x`,value:t}))||[],[l]),[p,P]=react.useState(b??0),T=l?.reduce((t,V)=>Math.max(t,Number(V),0),0),F=100/((c?.length||0)-1),k=t=>{P(t);},E=async()=>{try{y({leverage:p}).then(t=>{e?.close?.(),ui.toast.success(v("leverage.updated"));},t=>{ui.toast.error(t.message);});}catch{}};return {currentLeverage:r,value:p,marks:c,onLeverageChange:k,step:F,onCancel:e?.close,onSave:E,isLoading:w,showSliderTip:a,setShowSliderTip:s,maxLeverage:T}};var g=e=>{let r=u({close:e.close});return jsxRuntime.jsx(m,{...r})};var U="leverageEditor";ui.registerSimpleDialog(U,g,{title:()=>i18n.i18n.t("leverage.maxAccountLeverage"),size:"md"});
 
-exports.Leverage = g;
-exports.LeverageEditor = m;
-exports.LeverageHeader = x;
-exports.LeverageSlider = S;
-exports.LeverageWidgetId = $;
-exports.useLeverageScript = v;
+exports.Leverage = m;
+exports.LeverageEditor = g;
+exports.LeverageHeader = S;
+exports.LeverageSlider = f;
+exports.LeverageWidgetId = U;
+exports.useLeverageScript = u;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","cn","jsx","jsxs","Leverage","props","currentLeverage","LeverageHeader","LeverageSlider","e","value","min","max","percent","item","index","useLeverage","useMarginRatio","toast","useMemo","useState","useLeverageScript","options","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","onLeverageChange","onSave","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nexport { LeverageEditor, type LeverageEditorProps } from \"./leverage.widget\";\nexport { Leverage, LeverageSlider, LeverageHeader } from \"./leverage.ui\";\nexport type {\n  LeverageProps,\n  LeverageSliderProps,\n  LeverageHeaderProps,\n} from \"./leverage.ui\";\nexport {\n  useLeverageScript,\n  type LeverageScriptReturns,\n} from \"./leverage.script\";\n\nexport const LeverageWidgetId = \"leverageEditor\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: \"Max account leverage\",\n  size: \"md\",\n});\n","import { FC } from \"react\";\nimport { Box, Button, Flex, Slider, Text, cn } from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n  const { currentLeverage = 0 } = props;\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n      <LeverageHeader currentLeverage={currentLeverage} />\n\n      <LeverageSlider {...props} />\n      <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={0} pt={5}>\n        <Button\n          variant=\"contained\"\n          color=\"gray\"\n          fullWidth\n          onClick={props.onCancel}\n          data-testid=\"oui-testid-leverage-cancel-btn\"\n        >\n          Cancel\n        </Button>\n        <Button\n          fullWidth\n          loading={props.isLoading}\n          onClick={props.onSave}\n          data-testid=\"oui-testid-leverage-save-btn\"\n        >\n          Save\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageHeaderProps = Pick<LeverageProps, \"currentLeverage\">;\n\nexport const LeverageHeader: FC<LeverageHeaderProps> = (props) => {\n  return (\n    <Flex justify={\"between\"} width={\"100%\"}>\n      <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n        Max account leverage\n      </Text>\n      <Flex direction={\"row\"} gap={1}>\n        <Text size={\"sm\"} intensity={54}>\n          Current:\n        </Text>\n        <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n          {props.currentLeverage ?? \"--\"}\n        </Text.numeral>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageSliderProps = {\n  maxLeverage?: number;\n  value: number;\n  onLeverageChange: (value: number) => void;\n  setShowSliderTip: (value: boolean) => void;\n  showSliderTip: boolean;\n  className?: string;\n  onValueCommit?: (value: number[]) => void;\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n  return (\n    <Box pt={3} width={\"100%\"} className={props.className}>\n      <Slider\n        // step={1.04}\n        max={props.maxLeverage}\n        min={1}\n        // markLabelVisible={true}\n        // marks={props.marks}\n        markCount={5}\n        value={[props.value]}\n        onValueChange={(e) => {\n          console.log(\"onValueChange\");\n          props.onLeverageChange(e[0]);\n          props.setShowSliderTip(true);\n        }}\n        color=\"primary\"\n        onValueCommit={(e) => {\n          console.log(\"onValueCommit\");\n          props.onValueCommit?.(e);\n          props.setShowSliderTip(false);\n        }}\n        showTip={props.showSliderTip}\n        tipFormatter={(value, min, max, percent) => {\n          return `${value}x`;\n        }}\n      />\n      <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n        {[1, 10, 20, 30, 40, 50].map((item, index) => {\n          return (\n            <button\n              onClick={(e) => {\n                props.onLeverageChange(item);\n                props.onValueCommit?.([item]);\n              }}\n              className={cn(\n                \" oui-text-2xs oui-pb-3\",\n                index === 0\n                  ? \"oui-pr-2\"\n                  : index === 5\n                  ? \"oui-pl-0\"\n                  : \"oui-px-0 oui-ml-2\",\n                props.value >= item && \"oui-text-primary-light\"\n              )}\n              data-testid={`oui-testid-leverage-${item}-btn`}\n            >\n              {`${item}x`}\n            </button>\n          );\n        })}\n      </Flex>\n    </Box>\n  );\n  // return (\n  //   <Box pt={3} width={\"100%\"}>\n  //     <Slider\n  //       step={props.step}\n  //       markLabelVisible={true}\n  //       marks={props.marks}\n  //       value={[props.value]}\n  //       onValueChange={(e) => {\n  //         const value = props.marks?.[e[0] / 10]?.value;\n  //         if (typeof value !== \"undefined\") props.onLeverageChange(value);\n  //       }}\n  //     />\n  //   </Box>\n  // );\n};\n","import { useLeverage, useMarginRatio } from \"@orderly.network/hooks\";\nimport { SliderMarks, toast } from \"@orderly.network/ui\";\nimport { useMemo, useState } from \"react\";\n\ntype UseLeverageScriptOptions = {\n  close?: () => void;\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n\nexport const useLeverageScript = (options?: UseLeverageScriptOptions) => {\n  const { currentLeverage } = useMarginRatio();\n  const [showSliderTip, setShowSliderTip] = useState(false);\n\n  const [curLeverage, { update, config: leverageLevers, isMutating }] =\n    useLeverage();\n\n  const marks = useMemo((): SliderMarks => {\n    return (\n      leverageLevers?.map((e: number) => ({\n        label: `${e}x`,\n        value: e,\n      })) || []\n    );\n  }, [leverageLevers]);\n\n  const [leverage, setLeverage] = useState(curLeverage ?? 0);\n\n  const maxLeverage = leverageLevers?.reduce(\n    (a: number, item: any) => Math.max(a, Number(item), 0),\n    0\n  );\n\n  const step = 100 / ((marks?.length || 0) - 1);\n\n  // const leverageValue = useMemo(() => {\n  //   const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n  //   return index * step;\n  // }, [leverageLevers, leverage, step]);\n\n  const onLeverageChange = (leverage: number) => {\n    // maxLeverage / 100 * leverage;\n    setLeverage(leverage);\n    // updateLeverage(leverage);\n  };\n\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          options?.close?.();\n          toast.success(\"Leverage updated\");\n        },\n        (err: Error) => {\n          toast.error(err.message);\n        }\n      );\n    } catch (e) {}\n  };\n\n  return {\n    currentLeverage,\n    value: leverage,\n    marks,\n    onLeverageChange,\n    step,\n    onCancel: options?.close,\n    onSave,\n    isLoading: isMutating,\n    showSliderTip,\n    setShowSliderTip,\n    maxLeverage,\n  };\n};\n","import { FC } from \"react\";\nimport { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport type LeverageEditorProps = {\n  close?: () => void;\n};\n\nexport const LeverageEditor: FC<LeverageEditorProps> = (props) => {\n  const state = useLeverageScript({ close: props.close });\n  return <Leverage {...state} />;\n};\n"]}
+{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","cn","useTranslation","jsx","jsxs","Leverage","props","currentLeverage","t","LeverageHeader","LeverageSlider","e","value","min","max","percent","item","index","useMemo","useState","useLeverage","useMarginRatio","toast","useLeverageScript","options","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","onLeverageChange","onSave","res","err","LeverageEditor","state","i18n","LeverageWidgetId"],"mappings":"AAAA,OAAS,wBAAAA,MAA4B,sBCCrC,OAAS,OAAAC,EAAK,UAAAC,EAAQ,QAAAC,EAAM,UAAAC,EAAQ,QAAAC,EAAM,MAAAC,MAAU,sBAEpD,OAAS,kBAAAC,MAAsB,wBAUzB,cAAAC,EAGA,QAAAC,MAHA,oBANC,IAAMC,EAA+BC,GAAU,CACpD,GAAM,CAAE,gBAAAC,EAAkB,CAAE,EAAID,EAC1B,CAAE,EAAAE,CAAE,EAAIN,EAAe,EAE7B,OACEE,EAACN,EAAA,CAAK,UAAW,QAAS,UAAW,SAAU,GAAI,EACjD,UAAAK,EAACM,EAAA,CAAe,gBAAiBF,EAAiB,EAElDJ,EAACO,EAAA,CAAgB,GAAGJ,EAAO,EAC3BF,EAACN,EAAA,CAAK,UAAW,MAAO,IAAK,EAAG,MAAO,OAAQ,GAAI,EAAG,GAAI,EACxD,UAAAK,EAACN,EAAA,CACC,QAAQ,YACR,MAAM,OACN,UAAS,GACT,QAASS,EAAM,SACf,cAAY,iCAEX,SAAAE,EAAE,eAAe,EACpB,EACAL,EAACN,EAAA,CACC,UAAS,GACT,QAASS,EAAM,UACf,QAASA,EAAM,OACf,cAAY,+BAEX,SAAAE,EAAE,aAAa,EAClB,GACF,GACF,CAEJ,EAIaC,EAA2CH,GAAU,CAChE,GAAM,CAAE,EAAAE,CAAE,EAAIN,EAAe,EAE7B,OACEE,EAACN,EAAA,CAAK,QAAS,UAAW,MAAO,OAC/B,UAAAK,EAACH,EAAA,CAAK,GAAG,MAAM,KAAM,KAAM,UAAW,GAAI,UAAU,WACjD,SAAAQ,EAAE,6BAA6B,EAClC,EACAJ,EAACN,EAAA,CAAK,IAAK,EACR,aAAGU,EAAE,gBAAgB,CAAC,IACvBL,EAACH,EAAK,QAAL,CAAa,KAAK,IAAI,KAAM,KAAM,UAAW,GAC3C,SAAAM,EAAM,iBAAmB,KAC5B,GACF,GACF,CAEJ,EAYaI,EAA2CJ,GAEpDF,EAACR,EAAA,CAAI,GAAI,EAAG,MAAO,OAAQ,UAAWU,EAAM,UAC1C,UAAAH,EAACJ,EAAA,CAEC,IAAKO,EAAM,YACX,IAAK,EAGL,UAAW,EACX,MAAO,CAACA,EAAM,KAAK,EACnB,cAAgBK,GAAM,CAEpBL,EAAM,iBAAiBK,EAAE,CAAC,CAAC,EAC3BL,EAAM,iBAAiB,EAAI,CAC7B,EACA,MAAM,UACN,cAAgBK,GAAM,CAEpBL,EAAM,gBAAgBK,CAAC,EACvBL,EAAM,iBAAiB,EAAK,CAC9B,EACA,QAASA,EAAM,cACf,aAAc,CAACM,EAAOC,EAAKC,EAAKC,IACvB,GAAGH,CAAK,IAEnB,EACAT,EAACL,EAAA,CAAK,QAAS,UAAW,MAAO,OAAQ,GAAI,EAC1C,UAAC,EAAG,GAAI,GAAI,GAAI,GAAI,EAAE,EAAE,IAAI,CAACkB,EAAMC,IAEhCd,EAAC,UACC,QAAUQ,GAAM,CACdL,EAAM,iBAAiBU,CAAI,EAC3BV,EAAM,gBAAgB,CAACU,CAAI,CAAC,CAC9B,EACA,UAAWf,EACT,yBACAgB,IAAU,EACN,WACAA,IAAU,EACV,WACA,oBACJX,EAAM,OAASU,GAAQ,wBACzB,EACA,cAAa,uBAAuBA,CAAI,OAEvC,YAAGA,CAAI,IACV,CAEH,EACH,GACF,ECxHJ,OAAS,WAAAE,EAAS,YAAAC,MAAgB,QAClC,OAAS,eAAAC,EAAa,kBAAAC,MAAsB,yBAC5C,OAAS,kBAAAnB,MAAsB,wBAC/B,OAAsB,SAAAoB,MAAa,sBAQ5B,IAAMC,EAAqBC,GAAuC,CACvE,GAAM,CAAE,gBAAAjB,CAAgB,EAAIc,EAAe,EACrC,CAACI,EAAeC,CAAgB,EAAIP,EAAS,EAAK,EAClD,CAAE,EAAAX,CAAE,EAAIN,EAAe,EACvB,CAACyB,EAAa,CAAE,OAAAC,EAAQ,OAAQC,EAAgB,WAAAC,CAAW,CAAC,EAChEV,EAAY,EAERW,EAAQb,EAAQ,IAElBW,GAAgB,IAAKlB,IAAe,CAClC,MAAO,GAAGA,CAAC,IACX,MAAOA,CACT,EAAE,GAAK,CAAC,EAET,CAACkB,CAAc,CAAC,EAEb,CAACG,EAAUC,CAAW,EAAId,EAASQ,GAAe,CAAC,EAEnDO,EAAcL,GAAgB,OAClC,CAACM,EAAWnB,IAAc,KAAK,IAAImB,EAAG,OAAOnB,CAAI,EAAG,CAAC,EACrD,CACF,EAEMoB,EAAO,MAAQL,GAAO,QAAU,GAAK,GAQrCM,EAAoBL,GAAqB,CAE7CC,EAAYD,CAAQ,CAEtB,EAEMM,EAAS,SAAY,CACzB,GAAI,CACFV,EAAO,CAAE,SAAAI,CAAS,CAAC,EAAE,KAClBO,GAAa,CACZf,GAAS,QAAQ,EACjBF,EAAM,QAAQd,EAAE,kBAAkB,CAAC,CACrC,EACCgC,GAAe,CACdlB,EAAM,MAAMkB,EAAI,OAAO,CACzB,CACF,CACF,MAAY,CAAC,CACf,EAEA,MAAO,CACL,gBAAAjC,EACA,MAAOyB,EACP,MAAAD,EACA,iBAAAM,EACA,KAAAD,EACA,SAAUZ,GAAS,MACnB,OAAAc,EACA,UAAWR,EACX,cAAAL,EACA,iBAAAC,EACA,YAAAQ,CACF,CACF,ECjES,cAAA/B,MAAA,oBAFF,IAAMsC,EAA2CnC,GAAU,CAChE,IAAMoC,EAAQnB,EAAkB,CAAE,MAAOjB,EAAM,KAAM,CAAC,EACtD,OAAOH,EAACE,EAAA,CAAU,GAAGqC,EAAO,CAC9B,EHTA,OAAS,QAAAC,MAAY,wBAcd,IAAMC,EAAmB,iBAEhCjD,EAAqBiD,EAAkBH,EAAgB,CACrD,MAAO,IAAME,EAAK,EAAE,6BAA6B,EACjD,KAAM,IACR,CAAC","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\nimport { i18n } from \"@orderly.network/i18n\";\n\nexport { LeverageEditor, type LeverageEditorProps } from \"./leverage.widget\";\nexport { Leverage, LeverageSlider, LeverageHeader } from \"./leverage.ui\";\nexport type {\n  LeverageProps,\n  LeverageSliderProps,\n  LeverageHeaderProps,\n} from \"./leverage.ui\";\nexport {\n  useLeverageScript,\n  type LeverageScriptReturns,\n} from \"./leverage.script\";\n\nexport const LeverageWidgetId = \"leverageEditor\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: () => i18n.t(\"leverage.maxAccountLeverage\"),\n  size: \"md\",\n});\n","import { FC } from \"react\";\nimport { Box, Button, Flex, Slider, Text, cn } from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n  const { currentLeverage = 0 } = props;\n  const { t } = useTranslation();\n\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n      <LeverageHeader currentLeverage={currentLeverage} />\n\n      <LeverageSlider {...props} />\n      <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={0} pt={5}>\n        <Button\n          variant=\"contained\"\n          color=\"gray\"\n          fullWidth\n          onClick={props.onCancel}\n          data-testid=\"oui-testid-leverage-cancel-btn\"\n        >\n          {t(\"common.cancel\")}\n        </Button>\n        <Button\n          fullWidth\n          loading={props.isLoading}\n          onClick={props.onSave}\n          data-testid=\"oui-testid-leverage-save-btn\"\n        >\n          {t(\"common.save\")}\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageHeaderProps = Pick<LeverageProps, \"currentLeverage\">;\n\nexport const LeverageHeader: FC<LeverageHeaderProps> = (props) => {\n  const { t } = useTranslation();\n\n  return (\n    <Flex justify={\"between\"} width={\"100%\"}>\n      <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n        {t(\"leverage.maxAccountLeverage\")}\n      </Text>\n      <Flex gap={1}>\n        {`${t(\"common.current\")}:`}\n        <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n          {props.currentLeverage ?? \"--\"}\n        </Text.numeral>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageSliderProps = {\n  maxLeverage?: number;\n  value: number;\n  onLeverageChange: (value: number) => void;\n  setShowSliderTip: (value: boolean) => void;\n  showSliderTip: boolean;\n  className?: string;\n  onValueCommit?: (value: number[]) => void;\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n  return (\n    <Box pt={3} width={\"100%\"} className={props.className}>\n      <Slider\n        // step={1.04}\n        max={props.maxLeverage}\n        min={1}\n        // markLabelVisible={true}\n        // marks={props.marks}\n        markCount={5}\n        value={[props.value]}\n        onValueChange={(e) => {\n          console.log(\"onValueChange\");\n          props.onLeverageChange(e[0]);\n          props.setShowSliderTip(true);\n        }}\n        color=\"primary\"\n        onValueCommit={(e) => {\n          console.log(\"onValueCommit\");\n          props.onValueCommit?.(e);\n          props.setShowSliderTip(false);\n        }}\n        showTip={props.showSliderTip}\n        tipFormatter={(value, min, max, percent) => {\n          return `${value}x`;\n        }}\n      />\n      <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n        {[1, 10, 20, 30, 40, 50].map((item, index) => {\n          return (\n            <button\n              onClick={(e) => {\n                props.onLeverageChange(item);\n                props.onValueCommit?.([item]);\n              }}\n              className={cn(\n                \" oui-text-2xs oui-pb-3\",\n                index === 0\n                  ? \"oui-pr-2\"\n                  : index === 5\n                  ? \"oui-pl-0\"\n                  : \"oui-px-0 oui-ml-2\",\n                props.value >= item && \"oui-text-primary-light\"\n              )}\n              data-testid={`oui-testid-leverage-${item}-btn`}\n            >\n              {`${item}x`}\n            </button>\n          );\n        })}\n      </Flex>\n    </Box>\n  );\n  // return (\n  //   <Box pt={3} width={\"100%\"}>\n  //     <Slider\n  //       step={props.step}\n  //       markLabelVisible={true}\n  //       marks={props.marks}\n  //       value={[props.value]}\n  //       onValueChange={(e) => {\n  //         const value = props.marks?.[e[0] / 10]?.value;\n  //         if (typeof value !== \"undefined\") props.onLeverageChange(value);\n  //       }}\n  //     />\n  //   </Box>\n  // );\n};\n","import { useMemo, useState } from \"react\";\nimport { useLeverage, useMarginRatio } from \"@orderly.network/hooks\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport { SliderMarks, toast } from \"@orderly.network/ui\";\n\ntype UseLeverageScriptOptions = {\n  close?: () => void;\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n\nexport const useLeverageScript = (options?: UseLeverageScriptOptions) => {\n  const { currentLeverage } = useMarginRatio();\n  const [showSliderTip, setShowSliderTip] = useState(false);\n  const { t } = useTranslation();\n  const [curLeverage, { update, config: leverageLevers, isMutating }] =\n    useLeverage();\n\n  const marks = useMemo((): SliderMarks => {\n    return (\n      leverageLevers?.map((e: number) => ({\n        label: `${e}x`,\n        value: e,\n      })) || []\n    );\n  }, [leverageLevers]);\n\n  const [leverage, setLeverage] = useState(curLeverage ?? 0);\n\n  const maxLeverage = leverageLevers?.reduce(\n    (a: number, item: any) => Math.max(a, Number(item), 0),\n    0\n  );\n\n  const step = 100 / ((marks?.length || 0) - 1);\n\n  // const leverageValue = useMemo(() => {\n  //   const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n  //   return index * step;\n  // }, [leverageLevers, leverage, step]);\n\n  const onLeverageChange = (leverage: number) => {\n    // maxLeverage / 100 * leverage;\n    setLeverage(leverage);\n    // updateLeverage(leverage);\n  };\n\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          options?.close?.();\n          toast.success(t(\"leverage.updated\"));\n        },\n        (err: Error) => {\n          toast.error(err.message);\n        }\n      );\n    } catch (e) {}\n  };\n\n  return {\n    currentLeverage,\n    value: leverage,\n    marks,\n    onLeverageChange,\n    step,\n    onCancel: options?.close,\n    onSave,\n    isLoading: isMutating,\n    showSliderTip,\n    setShowSliderTip,\n    maxLeverage,\n  };\n};\n","import { FC } from \"react\";\nimport { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport type LeverageEditorProps = {\n  close?: () => void;\n};\n\nexport const LeverageEditor: FC<LeverageEditorProps> = (props) => {\n  const state = useLeverageScript({ close: props.close });\n  return <Leverage {...state} />;\n};\n"]}

package/dist/index.mjs

@@ -1,10 +1,11 @@
 import { registerSimpleDialog, Flex, Button, toast, Text, Box, Slider, cn } from '@orderly.network/ui';
+import { i18n, useTranslation } from '@orderly.network/i18n';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMarginRatio, useLeverage } from '@orderly.network/hooks';
 import { useState, useMemo } from 'react';
+import { useMarginRatio, useLeverage } from '@orderly.network/hooks';
 
-var g=e=>{let{currentLeverage:r=0}=e;return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsx(x,{currentLeverage:r}),jsx(S,{...e}),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",children:"Cancel"}),jsx(Button,{fullWidth:true,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},x=e=>jsxs(Flex,{justify:"between",width:"100%",children:[jsx(Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:"Max account leverage"}),jsxs(Flex,{direction:"row",gap:1,children:[jsx(Text,{size:"sm",intensity:54,children:"Current:"}),jsx(Text.numeral,{unit:"x",size:"sm",intensity:80,children:e.currentLeverage??"--"})]})]}),S=e=>jsxs(Box,{pt:3,width:"100%",className:e.className,children:[jsx(Slider,{max:e.maxLeverage,min:1,markCount:5,value:[e.value],onValueChange:r=>{e.onLeverageChange(r[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:r=>{e.onValueCommit?.(r),e.setShowSliderTip(false);},showTip:e.showSliderTip,tipFormatter:(r,o,s,c)=>`${r}x`}),jsx(Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((r,o)=>jsx("button",{onClick:s=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className:cn(" oui-text-2xs oui-pb-3",o===0?"oui-pr-2":o===5?"oui-pl-0":"oui-px-0 oui-ml-2",e.value>=r&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${r}-btn`,children:`${r}x`}))})]});var v=e=>{let{currentLeverage:r}=useMarginRatio(),[o,s]=useState(false),[c,{update:f,config:l,isMutating:y}]=useLeverage(),p=useMemo(()=>l?.map(t=>({label:`${t}x`,value:t}))||[],[l]),[d,b]=useState(c??0),w=l?.reduce((t,k)=>Math.max(t,Number(k),0),0),P=100/((p?.length||0)-1),F=t=>{b(t);},T=async()=>{try{f({leverage:d}).then(t=>{e?.close?.(),toast.success("Leverage updated");},t=>{toast.error(t.message);});}catch{}};return {currentLeverage:r,value:d,marks:p,onLeverageChange:F,step:P,onCancel:e?.close,onSave:T,isLoading:y,showSliderTip:o,setShowSliderTip:s,maxLeverage:w}};var m=e=>{let r=v({close:e.close});return jsx(g,{...r})};var $="leverageEditor";registerSimpleDialog($,m,{title:"Max account leverage",size:"md"});
+var m=e=>{let{currentLeverage:r=0}=e,{t:a}=useTranslation();return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsx(S,{currentLeverage:r}),jsx(f,{...e}),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",children:a("common.cancel")}),jsx(Button,{fullWidth:true,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:a("common.save")})]})]})},S=e=>{let{t:r}=useTranslation();return jsxs(Flex,{justify:"between",width:"100%",children:[jsx(Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:r("leverage.maxAccountLeverage")}),jsxs(Flex,{gap:1,children:[`${r("common.current")}:`,jsx(Text.numeral,{unit:"x",size:"sm",intensity:80,children:e.currentLeverage??"--"})]})]})},f=e=>jsxs(Box,{pt:3,width:"100%",className:e.className,children:[jsx(Slider,{max:e.maxLeverage,min:1,markCount:5,value:[e.value],onValueChange:r=>{e.onLeverageChange(r[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:r=>{e.onValueCommit?.(r),e.setShowSliderTip(false);},showTip:e.showSliderTip,tipFormatter:(r,a,s,v)=>`${r}x`}),jsx(Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((r,a)=>jsx("button",{onClick:s=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className:cn(" oui-text-2xs oui-pb-3",a===0?"oui-pr-2":a===5?"oui-pl-0":"oui-px-0 oui-ml-2",e.value>=r&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${r}-btn`,children:`${r}x`}))})]});var u=e=>{let{currentLeverage:r}=useMarginRatio(),[a,s]=useState(false),{t:v}=useTranslation(),[b,{update:y,config:l,isMutating:w}]=useLeverage(),c=useMemo(()=>l?.map(t=>({label:`${t}x`,value:t}))||[],[l]),[p,P]=useState(b??0),T=l?.reduce((t,V)=>Math.max(t,Number(V),0),0),F=100/((c?.length||0)-1),k=t=>{P(t);},E=async()=>{try{y({leverage:p}).then(t=>{e?.close?.(),toast.success(v("leverage.updated"));},t=>{toast.error(t.message);});}catch{}};return {currentLeverage:r,value:p,marks:c,onLeverageChange:k,step:F,onCancel:e?.close,onSave:E,isLoading:w,showSliderTip:a,setShowSliderTip:s,maxLeverage:T}};var g=e=>{let r=u({close:e.close});return jsx(m,{...r})};var U="leverageEditor";registerSimpleDialog(U,g,{title:()=>i18n.t("leverage.maxAccountLeverage"),size:"md"});
 
-export { g as Leverage, m as LeverageEditor, x as LeverageHeader, S as LeverageSlider, $ as LeverageWidgetId, v as useLeverageScript };
+export { m as Leverage, g as LeverageEditor, S as LeverageHeader, f as LeverageSlider, U as LeverageWidgetId, u as useLeverageScript };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","cn","jsx","jsxs","Leverage","props","currentLeverage","LeverageHeader","LeverageSlider","e","value","min","max","percent","item","index","useLeverage","useMarginRatio","toast","useMemo","useState","useLeverageScript","options","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","onLeverageChange","onSave","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nexport { LeverageEditor, type LeverageEditorProps } from \"./leverage.widget\";\nexport { Leverage, LeverageSlider, LeverageHeader } from \"./leverage.ui\";\nexport type {\n  LeverageProps,\n  LeverageSliderProps,\n  LeverageHeaderProps,\n} from \"./leverage.ui\";\nexport {\n  useLeverageScript,\n  type LeverageScriptReturns,\n} from \"./leverage.script\";\n\nexport const LeverageWidgetId = \"leverageEditor\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: \"Max account leverage\",\n  size: \"md\",\n});\n","import { FC } from \"react\";\nimport { Box, Button, Flex, Slider, Text, cn } from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n  const { currentLeverage = 0 } = props;\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n      <LeverageHeader currentLeverage={currentLeverage} />\n\n      <LeverageSlider {...props} />\n      <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={0} pt={5}>\n        <Button\n          variant=\"contained\"\n          color=\"gray\"\n          fullWidth\n          onClick={props.onCancel}\n          data-testid=\"oui-testid-leverage-cancel-btn\"\n        >\n          Cancel\n        </Button>\n        <Button\n          fullWidth\n          loading={props.isLoading}\n          onClick={props.onSave}\n          data-testid=\"oui-testid-leverage-save-btn\"\n        >\n          Save\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageHeaderProps = Pick<LeverageProps, \"currentLeverage\">;\n\nexport const LeverageHeader: FC<LeverageHeaderProps> = (props) => {\n  return (\n    <Flex justify={\"between\"} width={\"100%\"}>\n      <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n        Max account leverage\n      </Text>\n      <Flex direction={\"row\"} gap={1}>\n        <Text size={\"sm\"} intensity={54}>\n          Current:\n        </Text>\n        <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n          {props.currentLeverage ?? \"--\"}\n        </Text.numeral>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageSliderProps = {\n  maxLeverage?: number;\n  value: number;\n  onLeverageChange: (value: number) => void;\n  setShowSliderTip: (value: boolean) => void;\n  showSliderTip: boolean;\n  className?: string;\n  onValueCommit?: (value: number[]) => void;\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n  return (\n    <Box pt={3} width={\"100%\"} className={props.className}>\n      <Slider\n        // step={1.04}\n        max={props.maxLeverage}\n        min={1}\n        // markLabelVisible={true}\n        // marks={props.marks}\n        markCount={5}\n        value={[props.value]}\n        onValueChange={(e) => {\n          console.log(\"onValueChange\");\n          props.onLeverageChange(e[0]);\n          props.setShowSliderTip(true);\n        }}\n        color=\"primary\"\n        onValueCommit={(e) => {\n          console.log(\"onValueCommit\");\n          props.onValueCommit?.(e);\n          props.setShowSliderTip(false);\n        }}\n        showTip={props.showSliderTip}\n        tipFormatter={(value, min, max, percent) => {\n          return `${value}x`;\n        }}\n      />\n      <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n        {[1, 10, 20, 30, 40, 50].map((item, index) => {\n          return (\n            <button\n              onClick={(e) => {\n                props.onLeverageChange(item);\n                props.onValueCommit?.([item]);\n              }}\n              className={cn(\n                \" oui-text-2xs oui-pb-3\",\n                index === 0\n                  ? \"oui-pr-2\"\n                  : index === 5\n                  ? \"oui-pl-0\"\n                  : \"oui-px-0 oui-ml-2\",\n                props.value >= item && \"oui-text-primary-light\"\n              )}\n              data-testid={`oui-testid-leverage-${item}-btn`}\n            >\n              {`${item}x`}\n            </button>\n          );\n        })}\n      </Flex>\n    </Box>\n  );\n  // return (\n  //   <Box pt={3} width={\"100%\"}>\n  //     <Slider\n  //       step={props.step}\n  //       markLabelVisible={true}\n  //       marks={props.marks}\n  //       value={[props.value]}\n  //       onValueChange={(e) => {\n  //         const value = props.marks?.[e[0] / 10]?.value;\n  //         if (typeof value !== \"undefined\") props.onLeverageChange(value);\n  //       }}\n  //     />\n  //   </Box>\n  // );\n};\n","import { useLeverage, useMarginRatio } from \"@orderly.network/hooks\";\nimport { SliderMarks, toast } from \"@orderly.network/ui\";\nimport { useMemo, useState } from \"react\";\n\ntype UseLeverageScriptOptions = {\n  close?: () => void;\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n\nexport const useLeverageScript = (options?: UseLeverageScriptOptions) => {\n  const { currentLeverage } = useMarginRatio();\n  const [showSliderTip, setShowSliderTip] = useState(false);\n\n  const [curLeverage, { update, config: leverageLevers, isMutating }] =\n    useLeverage();\n\n  const marks = useMemo((): SliderMarks => {\n    return (\n      leverageLevers?.map((e: number) => ({\n        label: `${e}x`,\n        value: e,\n      })) || []\n    );\n  }, [leverageLevers]);\n\n  const [leverage, setLeverage] = useState(curLeverage ?? 0);\n\n  const maxLeverage = leverageLevers?.reduce(\n    (a: number, item: any) => Math.max(a, Number(item), 0),\n    0\n  );\n\n  const step = 100 / ((marks?.length || 0) - 1);\n\n  // const leverageValue = useMemo(() => {\n  //   const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n  //   return index * step;\n  // }, [leverageLevers, leverage, step]);\n\n  const onLeverageChange = (leverage: number) => {\n    // maxLeverage / 100 * leverage;\n    setLeverage(leverage);\n    // updateLeverage(leverage);\n  };\n\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          options?.close?.();\n          toast.success(\"Leverage updated\");\n        },\n        (err: Error) => {\n          toast.error(err.message);\n        }\n      );\n    } catch (e) {}\n  };\n\n  return {\n    currentLeverage,\n    value: leverage,\n    marks,\n    onLeverageChange,\n    step,\n    onCancel: options?.close,\n    onSave,\n    isLoading: isMutating,\n    showSliderTip,\n    setShowSliderTip,\n    maxLeverage,\n  };\n};\n","import { FC } from \"react\";\nimport { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport type LeverageEditorProps = {\n  close?: () => void;\n};\n\nexport const LeverageEditor: FC<LeverageEditorProps> = (props) => {\n  const state = useLeverageScript({ close: props.close });\n  return <Leverage {...state} />;\n};\n"]}
+{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","cn","useTranslation","jsx","jsxs","Leverage","props","currentLeverage","t","LeverageHeader","LeverageSlider","e","value","min","max","percent","item","index","useMemo","useState","useLeverage","useMarginRatio","toast","useLeverageScript","options","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","onLeverageChange","onSave","res","err","LeverageEditor","state","i18n","LeverageWidgetId"],"mappings":"AAAA,OAAS,wBAAAA,MAA4B,sBCCrC,OAAS,OAAAC,EAAK,UAAAC,EAAQ,QAAAC,EAAM,UAAAC,EAAQ,QAAAC,EAAM,MAAAC,MAAU,sBAEpD,OAAS,kBAAAC,MAAsB,wBAUzB,cAAAC,EAGA,QAAAC,MAHA,oBANC,IAAMC,EAA+BC,GAAU,CACpD,GAAM,CAAE,gBAAAC,EAAkB,CAAE,EAAID,EAC1B,CAAE,EAAAE,CAAE,EAAIN,EAAe,EAE7B,OACEE,EAACN,EAAA,CAAK,UAAW,QAAS,UAAW,SAAU,GAAI,EACjD,UAAAK,EAACM,EAAA,CAAe,gBAAiBF,EAAiB,EAElDJ,EAACO,EAAA,CAAgB,GAAGJ,EAAO,EAC3BF,EAACN,EAAA,CAAK,UAAW,MAAO,IAAK,EAAG,MAAO,OAAQ,GAAI,EAAG,GAAI,EACxD,UAAAK,EAACN,EAAA,CACC,QAAQ,YACR,MAAM,OACN,UAAS,GACT,QAASS,EAAM,SACf,cAAY,iCAEX,SAAAE,EAAE,eAAe,EACpB,EACAL,EAACN,EAAA,CACC,UAAS,GACT,QAASS,EAAM,UACf,QAASA,EAAM,OACf,cAAY,+BAEX,SAAAE,EAAE,aAAa,EAClB,GACF,GACF,CAEJ,EAIaC,EAA2CH,GAAU,CAChE,GAAM,CAAE,EAAAE,CAAE,EAAIN,EAAe,EAE7B,OACEE,EAACN,EAAA,CAAK,QAAS,UAAW,MAAO,OAC/B,UAAAK,EAACH,EAAA,CAAK,GAAG,MAAM,KAAM,KAAM,UAAW,GAAI,UAAU,WACjD,SAAAQ,EAAE,6BAA6B,EAClC,EACAJ,EAACN,EAAA,CAAK,IAAK,EACR,aAAGU,EAAE,gBAAgB,CAAC,IACvBL,EAACH,EAAK,QAAL,CAAa,KAAK,IAAI,KAAM,KAAM,UAAW,GAC3C,SAAAM,EAAM,iBAAmB,KAC5B,GACF,GACF,CAEJ,EAYaI,EAA2CJ,GAEpDF,EAACR,EAAA,CAAI,GAAI,EAAG,MAAO,OAAQ,UAAWU,EAAM,UAC1C,UAAAH,EAACJ,EAAA,CAEC,IAAKO,EAAM,YACX,IAAK,EAGL,UAAW,EACX,MAAO,CAACA,EAAM,KAAK,EACnB,cAAgBK,GAAM,CAEpBL,EAAM,iBAAiBK,EAAE,CAAC,CAAC,EAC3BL,EAAM,iBAAiB,EAAI,CAC7B,EACA,MAAM,UACN,cAAgBK,GAAM,CAEpBL,EAAM,gBAAgBK,CAAC,EACvBL,EAAM,iBAAiB,EAAK,CAC9B,EACA,QAASA,EAAM,cACf,aAAc,CAACM,EAAOC,EAAKC,EAAKC,IACvB,GAAGH,CAAK,IAEnB,EACAT,EAACL,EAAA,CAAK,QAAS,UAAW,MAAO,OAAQ,GAAI,EAC1C,UAAC,EAAG,GAAI,GAAI,GAAI,GAAI,EAAE,EAAE,IAAI,CAACkB,EAAMC,IAEhCd,EAAC,UACC,QAAUQ,GAAM,CACdL,EAAM,iBAAiBU,CAAI,EAC3BV,EAAM,gBAAgB,CAACU,CAAI,CAAC,CAC9B,EACA,UAAWf,EACT,yBACAgB,IAAU,EACN,WACAA,IAAU,EACV,WACA,oBACJX,EAAM,OAASU,GAAQ,wBACzB,EACA,cAAa,uBAAuBA,CAAI,OAEvC,YAAGA,CAAI,IACV,CAEH,EACH,GACF,ECxHJ,OAAS,WAAAE,EAAS,YAAAC,MAAgB,QAClC,OAAS,eAAAC,EAAa,kBAAAC,MAAsB,yBAC5C,OAAS,kBAAAnB,MAAsB,wBAC/B,OAAsB,SAAAoB,MAAa,sBAQ5B,IAAMC,EAAqBC,GAAuC,CACvE,GAAM,CAAE,gBAAAjB,CAAgB,EAAIc,EAAe,EACrC,CAACI,EAAeC,CAAgB,EAAIP,EAAS,EAAK,EAClD,CAAE,EAAAX,CAAE,EAAIN,EAAe,EACvB,CAACyB,EAAa,CAAE,OAAAC,EAAQ,OAAQC,EAAgB,WAAAC,CAAW,CAAC,EAChEV,EAAY,EAERW,EAAQb,EAAQ,IAElBW,GAAgB,IAAKlB,IAAe,CAClC,MAAO,GAAGA,CAAC,IACX,MAAOA,CACT,EAAE,GAAK,CAAC,EAET,CAACkB,CAAc,CAAC,EAEb,CAACG,EAAUC,CAAW,EAAId,EAASQ,GAAe,CAAC,EAEnDO,EAAcL,GAAgB,OAClC,CAACM,EAAWnB,IAAc,KAAK,IAAImB,EAAG,OAAOnB,CAAI,EAAG,CAAC,EACrD,CACF,EAEMoB,EAAO,MAAQL,GAAO,QAAU,GAAK,GAQrCM,EAAoBL,GAAqB,CAE7CC,EAAYD,CAAQ,CAEtB,EAEMM,EAAS,SAAY,CACzB,GAAI,CACFV,EAAO,CAAE,SAAAI,CAAS,CAAC,EAAE,KAClBO,GAAa,CACZf,GAAS,QAAQ,EACjBF,EAAM,QAAQd,EAAE,kBAAkB,CAAC,CACrC,EACCgC,GAAe,CACdlB,EAAM,MAAMkB,EAAI,OAAO,CACzB,CACF,CACF,MAAY,CAAC,CACf,EAEA,MAAO,CACL,gBAAAjC,EACA,MAAOyB,EACP,MAAAD,EACA,iBAAAM,EACA,KAAAD,EACA,SAAUZ,GAAS,MACnB,OAAAc,EACA,UAAWR,EACX,cAAAL,EACA,iBAAAC,EACA,YAAAQ,CACF,CACF,ECjES,cAAA/B,MAAA,oBAFF,IAAMsC,EAA2CnC,GAAU,CAChE,IAAMoC,EAAQnB,EAAkB,CAAE,MAAOjB,EAAM,KAAM,CAAC,EACtD,OAAOH,EAACE,EAAA,CAAU,GAAGqC,EAAO,CAC9B,EHTA,OAAS,QAAAC,MAAY,wBAcd,IAAMC,EAAmB,iBAEhCjD,EAAqBiD,EAAkBH,EAAgB,CACrD,MAAO,IAAME,EAAK,EAAE,6BAA6B,EACjD,KAAM,IACR,CAAC","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\nimport { i18n } from \"@orderly.network/i18n\";\n\nexport { LeverageEditor, type LeverageEditorProps } from \"./leverage.widget\";\nexport { Leverage, LeverageSlider, LeverageHeader } from \"./leverage.ui\";\nexport type {\n  LeverageProps,\n  LeverageSliderProps,\n  LeverageHeaderProps,\n} from \"./leverage.ui\";\nexport {\n  useLeverageScript,\n  type LeverageScriptReturns,\n} from \"./leverage.script\";\n\nexport const LeverageWidgetId = \"leverageEditor\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: () => i18n.t(\"leverage.maxAccountLeverage\"),\n  size: \"md\",\n});\n","import { FC } from \"react\";\nimport { Box, Button, Flex, Slider, Text, cn } from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n  const { currentLeverage = 0 } = props;\n  const { t } = useTranslation();\n\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n      <LeverageHeader currentLeverage={currentLeverage} />\n\n      <LeverageSlider {...props} />\n      <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={0} pt={5}>\n        <Button\n          variant=\"contained\"\n          color=\"gray\"\n          fullWidth\n          onClick={props.onCancel}\n          data-testid=\"oui-testid-leverage-cancel-btn\"\n        >\n          {t(\"common.cancel\")}\n        </Button>\n        <Button\n          fullWidth\n          loading={props.isLoading}\n          onClick={props.onSave}\n          data-testid=\"oui-testid-leverage-save-btn\"\n        >\n          {t(\"common.save\")}\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageHeaderProps = Pick<LeverageProps, \"currentLeverage\">;\n\nexport const LeverageHeader: FC<LeverageHeaderProps> = (props) => {\n  const { t } = useTranslation();\n\n  return (\n    <Flex justify={\"between\"} width={\"100%\"}>\n      <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n        {t(\"leverage.maxAccountLeverage\")}\n      </Text>\n      <Flex gap={1}>\n        {`${t(\"common.current\")}:`}\n        <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n          {props.currentLeverage ?? \"--\"}\n        </Text.numeral>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport type LeverageSliderProps = {\n  maxLeverage?: number;\n  value: number;\n  onLeverageChange: (value: number) => void;\n  setShowSliderTip: (value: boolean) => void;\n  showSliderTip: boolean;\n  className?: string;\n  onValueCommit?: (value: number[]) => void;\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n  return (\n    <Box pt={3} width={\"100%\"} className={props.className}>\n      <Slider\n        // step={1.04}\n        max={props.maxLeverage}\n        min={1}\n        // markLabelVisible={true}\n        // marks={props.marks}\n        markCount={5}\n        value={[props.value]}\n        onValueChange={(e) => {\n          console.log(\"onValueChange\");\n          props.onLeverageChange(e[0]);\n          props.setShowSliderTip(true);\n        }}\n        color=\"primary\"\n        onValueCommit={(e) => {\n          console.log(\"onValueCommit\");\n          props.onValueCommit?.(e);\n          props.setShowSliderTip(false);\n        }}\n        showTip={props.showSliderTip}\n        tipFormatter={(value, min, max, percent) => {\n          return `${value}x`;\n        }}\n      />\n      <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n        {[1, 10, 20, 30, 40, 50].map((item, index) => {\n          return (\n            <button\n              onClick={(e) => {\n                props.onLeverageChange(item);\n                props.onValueCommit?.([item]);\n              }}\n              className={cn(\n                \" oui-text-2xs oui-pb-3\",\n                index === 0\n                  ? \"oui-pr-2\"\n                  : index === 5\n                  ? \"oui-pl-0\"\n                  : \"oui-px-0 oui-ml-2\",\n                props.value >= item && \"oui-text-primary-light\"\n              )}\n              data-testid={`oui-testid-leverage-${item}-btn`}\n            >\n              {`${item}x`}\n            </button>\n          );\n        })}\n      </Flex>\n    </Box>\n  );\n  // return (\n  //   <Box pt={3} width={\"100%\"}>\n  //     <Slider\n  //       step={props.step}\n  //       markLabelVisible={true}\n  //       marks={props.marks}\n  //       value={[props.value]}\n  //       onValueChange={(e) => {\n  //         const value = props.marks?.[e[0] / 10]?.value;\n  //         if (typeof value !== \"undefined\") props.onLeverageChange(value);\n  //       }}\n  //     />\n  //   </Box>\n  // );\n};\n","import { useMemo, useState } from \"react\";\nimport { useLeverage, useMarginRatio } from \"@orderly.network/hooks\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport { SliderMarks, toast } from \"@orderly.network/ui\";\n\ntype UseLeverageScriptOptions = {\n  close?: () => void;\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n\nexport const useLeverageScript = (options?: UseLeverageScriptOptions) => {\n  const { currentLeverage } = useMarginRatio();\n  const [showSliderTip, setShowSliderTip] = useState(false);\n  const { t } = useTranslation();\n  const [curLeverage, { update, config: leverageLevers, isMutating }] =\n    useLeverage();\n\n  const marks = useMemo((): SliderMarks => {\n    return (\n      leverageLevers?.map((e: number) => ({\n        label: `${e}x`,\n        value: e,\n      })) || []\n    );\n  }, [leverageLevers]);\n\n  const [leverage, setLeverage] = useState(curLeverage ?? 0);\n\n  const maxLeverage = leverageLevers?.reduce(\n    (a: number, item: any) => Math.max(a, Number(item), 0),\n    0\n  );\n\n  const step = 100 / ((marks?.length || 0) - 1);\n\n  // const leverageValue = useMemo(() => {\n  //   const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n  //   return index * step;\n  // }, [leverageLevers, leverage, step]);\n\n  const onLeverageChange = (leverage: number) => {\n    // maxLeverage / 100 * leverage;\n    setLeverage(leverage);\n    // updateLeverage(leverage);\n  };\n\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          options?.close?.();\n          toast.success(t(\"leverage.updated\"));\n        },\n        (err: Error) => {\n          toast.error(err.message);\n        }\n      );\n    } catch (e) {}\n  };\n\n  return {\n    currentLeverage,\n    value: leverage,\n    marks,\n    onLeverageChange,\n    step,\n    onCancel: options?.close,\n    onSave,\n    isLoading: isMutating,\n    showSliderTip,\n    setShowSliderTip,\n    maxLeverage,\n  };\n};\n","import { FC } from \"react\";\nimport { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport type LeverageEditorProps = {\n  close?: () => void;\n};\n\nexport const LeverageEditor: FC<LeverageEditorProps> = (props) => {\n  const state = useLeverageScript({ close: props.close });\n  return <Leverage {...state} />;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderly.network/ui-leverage",
-  "version": "2.0.7",
+  "version": "2.0.8-alpha.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -15,9 +15,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@orderly.network/hooks": "2.0.7",
-    "@orderly.network/types": "2.0.7",
-    "@orderly.network/ui": "2.0.7"
+    "@orderly.network/i18n": "2.0.8-alpha.0",
+    "@orderly.network/types": "2.0.8-alpha.0",
+    "@orderly.network/hooks": "2.0.8-alpha.0",
+    "@orderly.network/ui": "2.0.8-alpha.0"
   },
   "devDependencies": {
     "@swc/cli": "^0.3.12",
@@ -28,7 +29,7 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.4",
     "tsup": "^7.1.0",
-    "tsconfig": "0.3.22"
+    "tsconfig": "0.3.23-alpha.0"
   },
   "peerDependencies": {
     "react": ">=18",