@orderly.network/ui-leverage 2.0.0 → 2.0.1-alpha.1

package/dist/index.d.mts

@@ -1,17 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { SliderMarks } from '@orderly.network/ui';
 
 declare const LeverageEditor: () => react_jsx_runtime.JSX.Element;
 
 declare const useLeverageScript: () => {
-    currentLeverage: number;
-    value: number;
+    currentLeverage: number | null;
+    value: any;
     marks: SliderMarks;
     onLeverageChange: (leverage: number) => void;
     step: number;
     onCancel: () => Promise<unknown>;
     onSave: () => Promise<void>;
     isLoading: any;
+    showSliderTip: boolean;
+    setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
+    maxLeverage: any;
 };
 type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
 

package/dist/index.d.ts

@@ -1,17 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { SliderMarks } from '@orderly.network/ui';
 
 declare const LeverageEditor: () => react_jsx_runtime.JSX.Element;
 
 declare const useLeverageScript: () => {
-    currentLeverage: number;
-    value: number;
+    currentLeverage: number | null;
+    value: any;
     marks: SliderMarks;
     onLeverageChange: (leverage: number) => void;
     step: number;
     onCancel: () => Promise<unknown>;
     onSave: () => Promise<void>;
     isLoading: any;
+    showSliderTip: boolean;
+    setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
+    maxLeverage: any;
 };
 type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
 

package/dist/index.js

@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@orderly.network/hooks');
 var react = require('react');
 
-var g=e=>{let{currentLeverage:a=0}=e;return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[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:a})]})]}),jsxRuntime.jsx(w,{...e}),jsxRuntime.jsxs(ui.Flex,{direction:"row",gap:2,width:"100%",mt:8,pt:5,children:[jsxRuntime.jsx(ui.Button,{variant:"contained",color:"gray",fullWidth:!0,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",children:"Cancel"}),jsxRuntime.jsx(ui.Button,{fullWidth:!0,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},w=e=>jsxRuntime.jsx(ui.Box,{pt:3,width:"100%",children:jsxRuntime.jsx(ui.Slider,{step:e.step,markLabelVisible:!0,marks:e.marks,value:[e.value],onValueChange:a=>{let n=e.marks?.[a[0]/10]?.value;typeof n<"u"&&e.onLeverageChange(n);}})});var p=()=>{let{currentLeverage:e}=hooks.useMarginRatio(),{hide:a}=ui.useModal(),[n,{update:f,config:o,isMutating:S}]=hooks.useLeverage(),y=t=>{b(t);},[l,b]=react.useState(n??0),m=react.useMemo(()=>o?.map(t=>({label:`${t}x`,value:t}))||[],[o]),c=100/((m?.length||0)-1),h=react.useMemo(()=>o.findIndex(C=>C===l)*c,[o,l,c]);return {currentLeverage:e,value:h,marks:m,onLeverageChange:y,step:c,onCancel:()=>a(),onSave:async()=>{try{f({leverage:l}).then(t=>{a(),ui.toast.success("Leverage updated");},t=>{ui.toast.error(t.message);});}catch{}},isLoading:S}};var v=()=>{let e=p();return jsxRuntime.jsx(g,{...e})};var D="leverageEditor";ui.registerSimpleDialog(D,v,{title:"Max account leverage",size:"md"});
+var c=e=>{let{currentLeverage:t=0}=e;return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[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:t??"--"})]})]}),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:!0,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",children:"Cancel"}),jsxRuntime.jsx(ui.Button,{fullWidth:!0,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},F=e=>jsxRuntime.jsxs(ui.Box,{pt:3,width:"100%",children:[jsxRuntime.jsx(ui.Slider,{step:1,max:e.maxLeverage,min:1,markCount:5,value:[e.value],onValueChange:t=>{e.onLeverageChange(t[0]),e.setShowSliderTip(!0);},color:"primaryLight",onValueCommit:t=>{e.setShowSliderTip(!1);},showTip:e.showSliderTip,tipFormatter:(t,o,s,g)=>`${t}x`}),jsxRuntime.jsx(ui.Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((t,o)=>jsxRuntime.jsx("button",{onClick:s=>{e.onLeverageChange(t);},className:ui.cn(" oui-text-2xs oui-pb-3",o===0?"oui-pr-2":o===5?"oui-pl-2":"oui-px-2 oui-ml-2",t-1>=0&&"oui-text-primary-light"),children:`${t}x`}))})]});var S=()=>{let{hide:e}=ui.useModal(),{currentLeverage:t}=hooks.useMarginRatio(),[o,s]=react.useState(!1),[g,{update:h,config:u,isMutating:f}]=hooks.useLeverage(),v=react.useMemo(()=>u?.map(r=>({label:`${r}x`,value:r}))||[],[u]),[d,b]=react.useState(g??0),C=u?.reduce((r,w)=>Math.max(r,Number(w),0),0),y=100/((v?.length||0)-1);return {currentLeverage:t,value:d,marks:v,onLeverageChange:r=>{b(r);},step:y,onCancel:()=>e(),onSave:async()=>{try{h({leverage:d}).then(r=>{e(),ui.toast.success("Leverage updated");},r=>{ui.toast.error(r.message);});}catch{}},isLoading:f,showSliderTip:o,setShowSliderTip:s,maxLeverage:C}};var m=()=>{let e=S();return jsxRuntime.jsx(c,{...e})};var V="leverageEditor";ui.registerSimpleDialog(V,m,{title:"Max account leverage",size:"md"});
 
-exports.Leverage = g;
-exports.LeverageEditor = v;
-exports.LeverageWidgetId = D;
+exports.Leverage = c;
+exports.LeverageEditor = m;
+exports.LeverageWidgetId = V;
 //# 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","jsx","jsxs","Leverage","props","currentLeverage","LeverageSlider","e","value","useLeverage","useMarginRatio","toast","useModal","useMemo","useState","useLeverageScript","hide","maxLeverage","update","leverageLevers","isMutating","onLeverageChange","leverage","setLeverage","marks","step","leverageValue","item","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nconst LeverageWidgetId = \"leverageEditor\";\n\nexport { LeverageEditor } from \"./leverage.widget\";\nexport { Leverage } from \"./leverage.ui\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: \"Max account leverage\",\n  size: \"md\",\n});\n\nexport { LeverageWidgetId };\n","import {\n  Box,\n  CloseIcon,\n  Button,\n  Flex,\n  Slider,\n  Text,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport const Leverage = (props: LeverageScriptReturns) => {\n  const { currentLeverage = 0 } = props;\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\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            {currentLeverage}\n          </Text.numeral>\n        </Flex>\n      </Flex>\n\n      <LeverageSlider {...props} />\n      <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={8} 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\nconst LeverageSlider = (props: LeverageScriptReturns) => {\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 {\n  useDebounce,\n  useDebouncedCallback,\n  useLeverage,\n  useMarginRatio,\n} from \"@orderly.network/hooks\";\nimport { SliderMarks, toast, useModal } from \"@orderly.network/ui\";\nimport { log } from \"console\";\nimport { useMemo, useState } from \"react\";\n\nexport const useLeverageScript = () => {\n  const { currentLeverage } = useMarginRatio();\n\n  const { hide } = useModal();\n\n  const [maxLeverage, { update, config: leverageLevers, isMutating }] =\n    useLeverage();\n  const onLeverageChange = (leverage: number) => {\n    setLeverage(leverage);\n    // updateLeverage(leverage);\n  };\n  const [leverage, setLeverage] = useState(maxLeverage ?? 0);\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 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 onCancel = () => hide();\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          hide();\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: leverageValue,\n    marks,\n    onLeverageChange,\n    step,\n    onCancel,\n    onSave,\n    isLoading: isMutating,\n  };\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n","import { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport const LeverageEditor = () => {\n  const state = useLeverageScript();\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","jsx","jsxs","Leverage","props","currentLeverage","LeverageSlider","e","value","min","max","percent","item","index","useLeverage","useMarginRatio","toast","useModal","useMemo","useState","useLeverageScript","hide","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nconst LeverageWidgetId = \"leverageEditor\";\n\nexport { LeverageEditor } from \"./leverage.widget\";\nexport { Leverage } from \"./leverage.ui\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: \"Max account leverage\",\n  size: \"md\",\n});\n\nexport { LeverageWidgetId };\n","import {\n  Box,\n  CloseIcon,\n  Button,\n  Flex,\n  Slider,\n  Text,\n  cn,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport const Leverage = (props: LeverageScriptReturns) => {\n  const { currentLeverage = 0 } = props;\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\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            {currentLeverage ?? \"--\"}\n          </Text.numeral>\n        </Flex>\n      </Flex>\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\nconst LeverageSlider = (props: LeverageScriptReturns) => {\n  return (\n    <Box pt={3} width={\"100%\"}>\n      <Slider\n        step={1}\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          props.onLeverageChange(e[0]);\n          props.setShowSliderTip(true);\n        }}\n        color=\"primaryLight\"\n        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              }}\n              className={cn(\n                \" oui-text-2xs oui-pb-3\",\n                index === 0\n                  ? \"oui-pr-2\"\n                  : index === 5\n                  ? \"oui-pl-2\"\n                  : \"oui-px-2 oui-ml-2\",\n                item - 1 >= 0 && \"oui-text-primary-light\"\n              )}\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 {\n  useDebounce,\n  useDebouncedCallback,\n  useLeverage,\n  useMarginRatio,\n} from \"@orderly.network/hooks\";\nimport { SliderMarks, toast, useModal } from \"@orderly.network/ui\";\nimport { log } from \"console\";\nimport { useMemo, useState } from \"react\";\n\nexport const useLeverageScript = () => {\n  const { hide } = useModal();\n\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 onCancel = () => hide();\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          hide();\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,\n    onSave,\n    isLoading: isMutating,\n    showSliderTip,\n    setShowSliderTip,\n    maxLeverage,\n  };\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n","import { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport const LeverageEditor = () => {\n  const state = useLeverageScript();\n  return <Leverage {...state} />;\n};\n"]}

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { registerSimpleDialog, Flex, Text, Button, Box, Slider, useModal, toast } from '@orderly.network/ui';
+import { registerSimpleDialog, Flex, Text, Button, Box, Slider, cn, useModal, toast } from '@orderly.network/ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMarginRatio, useLeverage } from '@orderly.network/hooks';
 import { useState, useMemo } from 'react';
 
-var g=e=>{let{currentLeverage:a=0}=e;return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[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:a})]})]}),jsx(w,{...e}),jsxs(Flex,{direction:"row",gap:2,width:"100%",mt:8,pt:5,children:[jsx(Button,{variant:"contained",color:"gray",fullWidth:!0,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",children:"Cancel"}),jsx(Button,{fullWidth:!0,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},w=e=>jsx(Box,{pt:3,width:"100%",children:jsx(Slider,{step:e.step,markLabelVisible:!0,marks:e.marks,value:[e.value],onValueChange:a=>{let n=e.marks?.[a[0]/10]?.value;typeof n<"u"&&e.onLeverageChange(n);}})});var p=()=>{let{currentLeverage:e}=useMarginRatio(),{hide:a}=useModal(),[n,{update:f,config:o,isMutating:S}]=useLeverage(),y=t=>{b(t);},[l,b]=useState(n??0),m=useMemo(()=>o?.map(t=>({label:`${t}x`,value:t}))||[],[o]),c=100/((m?.length||0)-1),h=useMemo(()=>o.findIndex(C=>C===l)*c,[o,l,c]);return {currentLeverage:e,value:h,marks:m,onLeverageChange:y,step:c,onCancel:()=>a(),onSave:async()=>{try{f({leverage:l}).then(t=>{a(),toast.success("Leverage updated");},t=>{toast.error(t.message);});}catch{}},isLoading:S}};var v=()=>{let e=p();return jsx(g,{...e})};var D="leverageEditor";registerSimpleDialog(D,v,{title:"Max account leverage",size:"md"});
+var c=e=>{let{currentLeverage:t=0}=e;return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[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:t??"--"})]})]}),jsx(F,{...e}),jsxs(Flex,{direction:"row",gap:2,width:"100%",mt:0,pt:5,children:[jsx(Button,{variant:"contained",color:"gray",fullWidth:!0,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",children:"Cancel"}),jsx(Button,{fullWidth:!0,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},F=e=>jsxs(Box,{pt:3,width:"100%",children:[jsx(Slider,{step:1,max:e.maxLeverage,min:1,markCount:5,value:[e.value],onValueChange:t=>{e.onLeverageChange(t[0]),e.setShowSliderTip(!0);},color:"primaryLight",onValueCommit:t=>{e.setShowSliderTip(!1);},showTip:e.showSliderTip,tipFormatter:(t,o,s,g)=>`${t}x`}),jsx(Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((t,o)=>jsx("button",{onClick:s=>{e.onLeverageChange(t);},className:cn(" oui-text-2xs oui-pb-3",o===0?"oui-pr-2":o===5?"oui-pl-2":"oui-px-2 oui-ml-2",t-1>=0&&"oui-text-primary-light"),children:`${t}x`}))})]});var S=()=>{let{hide:e}=useModal(),{currentLeverage:t}=useMarginRatio(),[o,s]=useState(!1),[g,{update:h,config:u,isMutating:f}]=useLeverage(),v=useMemo(()=>u?.map(r=>({label:`${r}x`,value:r}))||[],[u]),[d,b]=useState(g??0),C=u?.reduce((r,w)=>Math.max(r,Number(w),0),0),y=100/((v?.length||0)-1);return {currentLeverage:t,value:d,marks:v,onLeverageChange:r=>{b(r);},step:y,onCancel:()=>e(),onSave:async()=>{try{h({leverage:d}).then(r=>{e(),toast.success("Leverage updated");},r=>{toast.error(r.message);});}catch{}},isLoading:f,showSliderTip:o,setShowSliderTip:s,maxLeverage:C}};var m=()=>{let e=S();return jsx(c,{...e})};var V="leverageEditor";registerSimpleDialog(V,m,{title:"Max account leverage",size:"md"});
 
-export { g as Leverage, v as LeverageEditor, D as LeverageWidgetId };
+export { c as Leverage, m as LeverageEditor, V as LeverageWidgetId };
 //# 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","jsx","jsxs","Leverage","props","currentLeverage","LeverageSlider","e","value","useLeverage","useMarginRatio","toast","useModal","useMemo","useState","useLeverageScript","hide","maxLeverage","update","leverageLevers","isMutating","onLeverageChange","leverage","setLeverage","marks","step","leverageValue","item","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nconst LeverageWidgetId = \"leverageEditor\";\n\nexport { LeverageEditor } from \"./leverage.widget\";\nexport { Leverage } from \"./leverage.ui\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: \"Max account leverage\",\n  size: \"md\",\n});\n\nexport { LeverageWidgetId };\n","import {\n  Box,\n  CloseIcon,\n  Button,\n  Flex,\n  Slider,\n  Text,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport const Leverage = (props: LeverageScriptReturns) => {\n  const { currentLeverage = 0 } = props;\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\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            {currentLeverage}\n          </Text.numeral>\n        </Flex>\n      </Flex>\n\n      <LeverageSlider {...props} />\n      <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={8} 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\nconst LeverageSlider = (props: LeverageScriptReturns) => {\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 {\n  useDebounce,\n  useDebouncedCallback,\n  useLeverage,\n  useMarginRatio,\n} from \"@orderly.network/hooks\";\nimport { SliderMarks, toast, useModal } from \"@orderly.network/ui\";\nimport { log } from \"console\";\nimport { useMemo, useState } from \"react\";\n\nexport const useLeverageScript = () => {\n  const { currentLeverage } = useMarginRatio();\n\n  const { hide } = useModal();\n\n  const [maxLeverage, { update, config: leverageLevers, isMutating }] =\n    useLeverage();\n  const onLeverageChange = (leverage: number) => {\n    setLeverage(leverage);\n    // updateLeverage(leverage);\n  };\n  const [leverage, setLeverage] = useState(maxLeverage ?? 0);\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 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 onCancel = () => hide();\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          hide();\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: leverageValue,\n    marks,\n    onLeverageChange,\n    step,\n    onCancel,\n    onSave,\n    isLoading: isMutating,\n  };\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n","import { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport const LeverageEditor = () => {\n  const state = useLeverageScript();\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","jsx","jsxs","Leverage","props","currentLeverage","LeverageSlider","e","value","min","max","percent","item","index","useLeverage","useMarginRatio","toast","useModal","useMemo","useState","useLeverageScript","hide","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nconst LeverageWidgetId = \"leverageEditor\";\n\nexport { LeverageEditor } from \"./leverage.widget\";\nexport { Leverage } from \"./leverage.ui\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n  title: \"Max account leverage\",\n  size: \"md\",\n});\n\nexport { LeverageWidgetId };\n","import {\n  Box,\n  CloseIcon,\n  Button,\n  Flex,\n  Slider,\n  Text,\n  cn,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport const Leverage = (props: LeverageScriptReturns) => {\n  const { currentLeverage = 0 } = props;\n  return (\n    <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\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            {currentLeverage ?? \"--\"}\n          </Text.numeral>\n        </Flex>\n      </Flex>\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\nconst LeverageSlider = (props: LeverageScriptReturns) => {\n  return (\n    <Box pt={3} width={\"100%\"}>\n      <Slider\n        step={1}\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          props.onLeverageChange(e[0]);\n          props.setShowSliderTip(true);\n        }}\n        color=\"primaryLight\"\n        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              }}\n              className={cn(\n                \" oui-text-2xs oui-pb-3\",\n                index === 0\n                  ? \"oui-pr-2\"\n                  : index === 5\n                  ? \"oui-pl-2\"\n                  : \"oui-px-2 oui-ml-2\",\n                item - 1 >= 0 && \"oui-text-primary-light\"\n              )}\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 {\n  useDebounce,\n  useDebouncedCallback,\n  useLeverage,\n  useMarginRatio,\n} from \"@orderly.network/hooks\";\nimport { SliderMarks, toast, useModal } from \"@orderly.network/ui\";\nimport { log } from \"console\";\nimport { useMemo, useState } from \"react\";\n\nexport const useLeverageScript = () => {\n  const { hide } = useModal();\n\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 onCancel = () => hide();\n  const onSave = async () => {\n    try {\n      update({ leverage }).then(\n        (res: any) => {\n          hide();\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,\n    onSave,\n    isLoading: isMutating,\n    showSliderTip,\n    setShowSliderTip,\n    maxLeverage,\n  };\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n","import { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport const LeverageEditor = () => {\n  const state = useLeverageScript();\n  return <Leverage {...state} />;\n};\n"]}

package/dist/styles.css

@@ -1 +1 @@
-.oui-mt-2{margin-top:.5rem}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}
+.oui-ml-2{margin-left:.5rem}.oui-mt-2{margin-top:.5rem}.oui-px-2{padding-left:.5rem;padding-right:.5rem}.oui-pb-3{padding-bottom:.75rem}.oui-pl-2{padding-left:.5rem}.oui-pr-2{padding-right:.5rem}.oui-text-2xs{font-size:var(--oui-font-size-2xs,.75rem);line-height:1.125rem}.oui-text-primary-light{--tw-text-opacity:1;color:rgb(var(--oui-color-primary-light)/var(--tw-text-opacity))}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderly.network/ui-leverage",
-  "version": "2.0.0",
+  "version": "2.0.1-alpha.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -15,9 +15,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@orderly.network/hooks": "2.0.0",
-    "@orderly.network/ui": "2.0.0",
-    "@orderly.network/types": "2.0.0"
+    "@orderly.network/types": "2.0.1-alpha.1",
+    "@orderly.network/hooks": "2.0.1-alpha.1",
+    "@orderly.network/ui": "2.0.1-alpha.1"
   },
   "devDependencies": {
     "@swc/cli": "^0.3.12",
@@ -28,12 +28,12 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.4",
     "tsup": "^7.1.0",
-    "tsconfig": "0.3.12"
+    "tsconfig": "0.3.16"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
-    "@orderly.network/ui": "2.0.0"
+    "@orderly.network/ui": "2.0.1-alpha.1"
   },
   "scripts": {
     "build": "tsup && pnpm run build:css",