@orderly.network/ui-leverage 2.1.3 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +14 -6
  2. package/dist/index.d.ts +14 -6
  3. package/dist/index.js +14 -9
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +5 -5
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +6 -6
package/dist/index.d.mts CHANGED
@@ -12,17 +12,23 @@ type UseLeverageScriptOptions = {
12
12
  };
13
13
  type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
14
14
  declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
15
- currentLeverage: number | null;
16
- value: any;
15
+ leverageLevers: number[];
16
+ currentLeverage: number;
17
+ value: number;
17
18
  marks: SliderMarks;
18
19
  onLeverageChange: (leverage: number) => void;
20
+ onLeverageIncrease: react.MouseEventHandler<SVGSVGElement>;
21
+ onLeverageReduce: react.MouseEventHandler<SVGSVGElement>;
22
+ onInputChange: react.ChangeEventHandler<HTMLInputElement>;
23
+ isReduceDisabled: boolean;
24
+ isIncreaseDisabled: boolean;
19
25
  step: number;
20
26
  onCancel: (() => void) | undefined;
21
27
  onSave: () => Promise<void>;
22
- isLoading: any;
28
+ isLoading: boolean;
23
29
  showSliderTip: boolean;
24
30
  setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
25
- maxLeverage: any;
31
+ maxLeverage: number;
26
32
  };
27
33
 
28
34
  type LeverageProps = LeverageScriptReturns;
@@ -37,9 +43,11 @@ type LeverageSliderProps = {
37
43
  showSliderTip: boolean;
38
44
  className?: string;
39
45
  onValueCommit?: (value: number[]) => void;
46
+ leverageLevers: number[];
40
47
  };
41
48
  declare const LeverageSlider: FC<LeverageSliderProps>;
42
49
 
43
- declare const LeverageWidgetId = "leverageEditor";
50
+ declare const LeverageWidgetWithDialogId = "LeverageWidgetWithDialog";
51
+ declare const LeverageWidgetWithSheetId = "LeverageWidgetWithSheet";
44
52
 
45
- export { Leverage, LeverageEditor, type LeverageEditorProps, LeverageHeader, type LeverageHeaderProps, type LeverageProps, type LeverageScriptReturns, LeverageSlider, type LeverageSliderProps, LeverageWidgetId, useLeverageScript };
53
+ export { Leverage, LeverageEditor, type LeverageEditorProps, LeverageHeader, type LeverageHeaderProps, type LeverageProps, type LeverageScriptReturns, LeverageSlider, type LeverageSliderProps, LeverageWidgetWithDialogId, LeverageWidgetWithSheetId, useLeverageScript };
package/dist/index.d.ts CHANGED
@@ -12,17 +12,23 @@ type UseLeverageScriptOptions = {
12
12
  };
13
13
  type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
14
14
  declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
15
- currentLeverage: number | null;
16
- value: any;
15
+ leverageLevers: number[];
16
+ currentLeverage: number;
17
+ value: number;
17
18
  marks: SliderMarks;
18
19
  onLeverageChange: (leverage: number) => void;
20
+ onLeverageIncrease: react.MouseEventHandler<SVGSVGElement>;
21
+ onLeverageReduce: react.MouseEventHandler<SVGSVGElement>;
22
+ onInputChange: react.ChangeEventHandler<HTMLInputElement>;
23
+ isReduceDisabled: boolean;
24
+ isIncreaseDisabled: boolean;
19
25
  step: number;
20
26
  onCancel: (() => void) | undefined;
21
27
  onSave: () => Promise<void>;
22
- isLoading: any;
28
+ isLoading: boolean;
23
29
  showSliderTip: boolean;
24
30
  setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
25
- maxLeverage: any;
31
+ maxLeverage: number;
26
32
  };
27
33
 
28
34
  type LeverageProps = LeverageScriptReturns;
@@ -37,9 +43,11 @@ type LeverageSliderProps = {
37
43
  showSliderTip: boolean;
38
44
  className?: string;
39
45
  onValueCommit?: (value: number[]) => void;
46
+ leverageLevers: number[];
40
47
  };
41
48
  declare const LeverageSlider: FC<LeverageSliderProps>;
42
49
 
43
- declare const LeverageWidgetId = "leverageEditor";
50
+ declare const LeverageWidgetWithDialogId = "LeverageWidgetWithDialog";
51
+ declare const LeverageWidgetWithSheetId = "LeverageWidgetWithSheet";
44
52
 
45
- export { Leverage, LeverageEditor, type LeverageEditorProps, LeverageHeader, type LeverageHeaderProps, type LeverageProps, type LeverageScriptReturns, LeverageSlider, type LeverageSliderProps, LeverageWidgetId, useLeverageScript };
53
+ export { Leverage, LeverageEditor, type LeverageEditorProps, LeverageHeader, type LeverageHeaderProps, type LeverageProps, type LeverageScriptReturns, LeverageSlider, type LeverageSliderProps, LeverageWidgetWithDialogId, LeverageWidgetWithSheetId, useLeverageScript };
package/dist/index.js CHANGED
@@ -1,18 +1,23 @@
1
1
  'use strict';
2
2
 
3
- var ui = require('@orderly.network/ui');
4
3
  var i18n = require('@orderly.network/i18n');
4
+ var ui = require('@orderly.network/ui');
5
+ var D = require('react');
5
6
  var jsxRuntime = require('react/jsx-runtime');
6
- var react = require('react');
7
7
  var hooks = require('@orderly.network/hooks');
8
8
 
9
- 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"});
9
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
+
11
+ var D__default = /*#__PURE__*/_interopDefault(D);
12
+
13
+ var q=[5,10,20,50,100],C=e=>{let{Icon:r,onClick:o,disabled:n}=e;return jsxRuntime.jsx(r,{onClick:n?void 0:o,className:ui.cn("oui-m-2 oui-text-white oui-transition-all",n?"oui-cursor-not-allowed oui-opacity-20":"oui-cursor-pointer oui-opacity-100")})},J=e=>{let r=D__default.default.useMemo(()=>[ui.inputFormatter.numberFormatter,ui.inputFormatter.currencyFormatter,ui.inputFormatter.decimalPointFormatter],[]),o=D.useId();return jsxRuntime.jsxs("label",{htmlFor:o,className:ui.cn("oui-w-full","oui-rounded","oui-bg-base-6","oui-flex","oui-items-center","oui-justify-between","oui-outline","oui-outline-offset-0","oui-outline-1","oui-outline-transparent","focus-within:oui-outline-primary-light","oui-input-root"),children:[jsxRuntime.jsx(C,{Icon:ui.ReduceIcon,onClick:e.onLeverageReduce,disabled:e.isReduceDisabled}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",justify:"center",children:[jsxRuntime.jsx(ui.Input,{value:e.value,id:o,autoComplete:"off",classNames:{input:ui.cn("oui-text-center"),root:ui.cn("oui-text-center","oui-w-7","oui-px-0","oui-outline","oui-outline-offset-0","oui-outline-1","oui-outline-transparent","focus-within:oui-outline-primary-none")},formatters:r,onChange:e.onInputChange}),jsxRuntime.jsx("div",{className:"oui-select-none",children:"x"})]}),jsxRuntime.jsx(C,{Icon:ui.PlusIcon,onClick:e.onLeverageIncrease,disabled:e.isIncreaseDisabled})]})},x=e=>{let{currentLeverage:r}=e,{t:o}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(F,{currentLeverage:r}),jsxRuntime.jsx(J,{...e}),jsxRuntime.jsx(K,{...e}),jsxRuntime.jsx(w,{...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:o("common.cancel")}),jsxRuntime.jsx(ui.Button,{fullWidth:true,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:o("common.save")})]})]})},F=e=>{let{t:r}=i18n.useTranslation(),{currentLeverage:o}=e;return jsxRuntime.jsx(ui.Flex,{justify:"center",width:"100%",mb:2,children:jsxRuntime.jsxs(ui.Flex,{gap:1,children:[`${r("common.current")}:`,jsxRuntime.jsx(ui.Text.numeral,{unit:"x",size:"sm",intensity:80,children:o??"--"})]})})},K=e=>{let{value:r,onLeverageChange:o}=e;return jsxRuntime.jsx(ui.Flex,{itemAlign:"center",justify:"between",width:"100%",mt:2,children:q.map(n=>jsxRuntime.jsx(ui.Flex,{itemAlign:"center",justify:"center",className:ui.cn("oui-box-border oui-cursor-pointer oui-rounded-md oui-border oui-border-solid oui-bg-clip-padding oui-px-3 oui-py-2.5 oui-transition-all",r===n?"oui-border-primary oui-bg-base-6":"oui-border-line-12"),onClick:()=>o?.(n),children:jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",justify:"center",className:ui.cn("oui-h-3 oui-w-9 oui-select-none"),children:[n,"x"]})},n))})},w=e=>{let{leverageLevers:r,maxLeverage:o,className:n,value:g,showSliderTip:c}=e;return jsxRuntime.jsxs(ui.Box,{pt:4,width:"100%",className:n,children:[jsxRuntime.jsx(ui.Slider,{max:o,min:1,markCount:5,value:[g],onValueChange:a=>{e.onLeverageChange(a[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:a=>{e.onValueCommit?.(a),e.setShowSliderTip(false);},showTip:c,tipFormatter:a=>`${a}x`}),jsxRuntime.jsx(ui.Flex,{justify:"between",width:"100%",pt:3,children:r?.map((a,m)=>jsxRuntime.jsx("button",{onClick:()=>{e.onLeverageChange(a),e.onValueCommit?.([a]);},className:ui.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>=a&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${a}-btn`,children:`${a}x`},a))})]})};var b=e=>{let[r,o]=D.useState(false),{t:n}=i18n.useTranslation(),{curLeverage:g,maxLeverage:c,isLoading:a,leverageLevers:m,update:P}=hooks.useLeverage(),S=D.useMemo(()=>m.map(i=>({label:`${i}x`,value:i})),[m]),[v,d]=D.useState(g??0),E=100/((S?.length||0)-1),T=i=>{d(i);},N=()=>{d(i=>i+1);},V=()=>{d(i=>i-1);},M=D.useCallback(i=>{let h=Number.parseInt(i.target.value,10),W=Number.isNaN(h)?0:h,A=Math.min(Math.max(W,1),c);d(A);},[c]),H=async()=>{try{P({leverage:v}).then(()=>{e?.close?.(),ui.toast.success(n("leverage.updated"));},i=>{ui.toast.error(i.message);});}catch{}};return {leverageLevers:m,currentLeverage:g,value:v,marks:S,onLeverageChange:T,onLeverageIncrease:N,onLeverageReduce:V,onInputChange:M,isReduceDisabled:v<=1,isIncreaseDisabled:v>=c,step:E,onCancel:e?.close,onSave:H,isLoading:a,showSliderTip:r,setShowSliderTip:o,maxLeverage:c}};var p=e=>{let r=b({close:e.close});return jsxRuntime.jsx(x,{...r})};var re="LeverageWidgetWithDialog",oe="LeverageWidgetWithSheet";ui.registerSimpleDialog(re,p,{title:()=>i18n.i18n.t("leverage.maxAccountLeverage"),size:"md"});ui.registerSimpleSheet(oe,p,{title:()=>i18n.i18n.t("leverage.maxAccountLeverage")});
10
14
 
11
- exports.Leverage = m;
12
- exports.LeverageEditor = g;
13
- exports.LeverageHeader = S;
14
- exports.LeverageSlider = f;
15
- exports.LeverageWidgetId = U;
16
- exports.useLeverageScript = u;
15
+ exports.Leverage = x;
16
+ exports.LeverageEditor = p;
17
+ exports.LeverageHeader = F;
18
+ exports.LeverageSlider = w;
19
+ exports.LeverageWidgetWithDialogId = re;
20
+ exports.LeverageWidgetWithSheetId = oe;
21
+ exports.useLeverageScript = b;
17
22
  //# sourceMappingURL=out.js.map
18
23
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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","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":"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","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"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["i18n","registerSimpleDialog","registerSimpleSheet","React","useId","useTranslation","Box","Button","Flex","Input","Slider","Text","cn","PlusIcon","ReduceIcon","inputFormatter","jsx","jsxs","toggles","IconButton","props","Icon","onClick","disabled","LeverageInput","formatters","id","Leverage","currentLeverage","t","LeverageHeader","LeverageSelector","LeverageSlider","value","onLeverageChange","option","leverageLevers","maxLeverage","className","showSliderTip","e","item","index","useCallback","useMemo","useState","useLeverage","toast","useLeverageScript","options","setShowSliderTip","curLeverage","isLoading","update","marks","leverage","setLeverage","step","onLeverageIncrease","prev","onLeverageReduce","onInputChange","parsed","raw","clamped","onSave","err","LeverageEditor","state","LeverageWidgetWithDialogId","LeverageWidgetWithSheetId"],"mappings":"AAAA,OAAS,QAAAA,MAAY,wBACrB,OAAS,wBAAAC,GAAsB,uBAAAC,OAA2B,sBCD1D,OAAOC,GAAa,SAAAC,MAAa,QACjC,OAAS,kBAAAC,MAAsB,wBAC/B,OACE,OAAAC,EACA,UAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,cAAAC,EACA,kBAAAC,MAEK,sBAYH,cAAAC,EA6CE,QAAAC,MA7CF,oBATJ,IAAMC,EAAU,CAAC,EAAG,GAAI,GAAI,GAAI,GAAG,EAE7BC,EAIAC,GAAU,CACd,GAAM,CAAE,KAAAC,EAAM,QAAAC,EAAS,SAAAC,CAAS,EAAIH,EACpC,OACEJ,EAACK,EAAA,CACC,QAASE,EAAW,OAAYD,EAChC,UAAWV,EACT,4CACAW,EACI,wCACA,oCACN,EACF,CAEJ,EAEMC,EAA0CJ,GAAU,CACxD,IAAMK,EAAatB,EAAM,QACvB,IAAM,CACJY,EAAe,gBACfA,EAAe,kBACfA,EAAe,qBACjB,EACA,CAAC,CACH,EACMW,EAAKtB,EAAM,EACjB,OACEa,EAAC,SACC,QAASS,EACT,UAAWd,EACT,aACA,cACA,gBACA,WACA,mBACA,sBACA,cACA,uBACA,gBACA,0BACA,yCACA,gBACF,EAEA,UAAAI,EAACG,EAAA,CACC,KAAML,EACN,QAASM,EAAM,iBACf,SAAUA,EAAM,iBAClB,EACAH,EAACT,EAAA,CAAK,UAAU,SAAS,QAAQ,SAC/B,UAAAQ,EAACP,EAAA,CACC,MAAOW,EAAM,MACb,GAAIM,EACJ,aAAa,MACb,WAAY,CACV,MAAOd,EAAG,iBAAiB,EAC3B,KAAMA,EACJ,kBACA,UACA,WACA,cACA,uBACA,gBACA,0BACA,uCACF,CACF,EACA,WAAYa,EACZ,SAAUL,EAAM,cAClB,EACAJ,EAAC,OAAI,UAAU,kBAAkB,aAAC,GACpC,EACAA,EAACG,EAAA,CACC,KAAMN,EACN,QAASO,EAAM,mBACf,SAAUA,EAAM,mBAClB,GACF,CAEJ,EAIaO,EAA+BP,GAAU,CACpD,GAAM,CAAE,gBAAAQ,CAAgB,EAAIR,EACtB,CAAE,EAAAS,CAAE,EAAIxB,EAAe,EAC7B,OACEY,EAACT,EAAA,CAAK,UAAW,QAAS,UAAW,SAAU,GAAI,EACjD,UAAAQ,EAACc,EAAA,CAAe,gBAAiBF,EAAiB,EAClDZ,EAACQ,EAAA,CAAe,GAAGJ,EAAO,EAC1BJ,EAACe,EAAA,CAAkB,GAAGX,EAAO,EAC7BJ,EAACgB,EAAA,CAAgB,GAAGZ,EAAO,EAC3BH,EAACT,EAAA,CAAK,UAAW,MAAO,IAAK,EAAG,MAAO,OAAQ,GAAI,EAAG,GAAI,EACxD,UAAAQ,EAACT,EAAA,CACC,QAAQ,YACR,MAAM,OACN,UAAS,GACT,QAASa,EAAM,SACf,cAAY,iCAEX,SAAAS,EAAE,eAAe,EACpB,EACAb,EAACT,EAAA,CACC,UAAS,GACT,QAASa,EAAM,UACf,QAASA,EAAM,OACf,cAAY,+BAEX,SAAAS,EAAE,aAAa,EAClB,GACF,GACF,CAEJ,EAIaC,EAA2CV,GAAU,CAChE,GAAM,CAAE,EAAAS,CAAE,EAAIxB,EAAe,EACvB,CAAE,gBAAAuB,CAAgB,EAAIR,EAC5B,OACEJ,EAACR,EAAA,CAAK,QAAS,SAAU,MAAO,OAAQ,GAAI,EAC1C,SAAAS,EAACT,EAAA,CAAK,IAAK,EACR,aAAGqB,EAAE,gBAAgB,CAAC,IACvBb,EAACL,EAAK,QAAL,CAAa,KAAK,IAAI,KAAM,KAAM,UAAW,GAC3C,SAAAiB,GAAmB,KACtB,GACF,EACF,CAEJ,EAOaG,EAAqDX,GAAU,CAC1E,GAAM,CAAE,MAAAa,EAAO,iBAAAC,CAAiB,EAAId,EACpC,OACEJ,EAACR,EAAA,CAAK,UAAU,SAAS,QAAQ,UAAU,MAAO,OAAQ,GAAI,EAC3D,SAAAU,EAAQ,IAAKiB,GACZnB,EAACR,EAAA,CAEC,UAAU,SACV,QAAQ,SACR,UAAWI,EACT,0IACAqB,IAAUE,EACN,mCACA,oBACN,EACA,QAAS,IAAMD,IAAmBC,CAAM,EAExC,SAAAlB,EAACT,EAAA,CACC,UAAU,SACV,QAAQ,SACR,UAAWI,EAAG,iCAAiC,EAE9C,UAAAuB,EAAO,KACV,GAjBKA,CAkBP,CACD,EACH,CAEJ,EAaaH,EAA2CZ,GAAU,CAChE,GAAM,CAAE,eAAAgB,EAAgB,YAAAC,EAAa,UAAAC,EAAW,MAAAL,EAAO,cAAAM,CAAc,EACnEnB,EACF,OACEH,EAACX,EAAA,CAAI,GAAI,EAAG,MAAO,OAAQ,UAAWgC,EACpC,UAAAtB,EAACN,EAAA,CAEC,IAAK2B,EACL,IAAK,EAGL,UAAW,EACX,MAAO,CAACJ,CAAK,EACb,cAAgBO,GAAM,CACpBpB,EAAM,iBAAiBoB,EAAE,CAAC,CAAC,EAC3BpB,EAAM,iBAAiB,EAAI,CAC7B,EACA,MAAM,UACN,cAAgBoB,GAAM,CACpBpB,EAAM,gBAAgBoB,CAAC,EACvBpB,EAAM,iBAAiB,EAAK,CAC9B,EACA,QAASmB,EACT,aAAeN,GACN,GAAGA,CAAK,IAEnB,EACAjB,EAACR,EAAA,CAAK,QAAS,UAAW,MAAO,OAAQ,GAAI,EAC1C,SAAA4B,GAAgB,IAAI,CAACK,EAAMC,IAExB1B,EAAC,UAEC,QAAS,IAAM,CACbI,EAAM,iBAAiBqB,CAAI,EAC3BrB,EAAM,gBAAgB,CAACqB,CAAI,CAAC,CAC9B,EACA,UAAW7B,EACT,wBACA8B,IAAU,EACN,WACAA,IAAU,EACR,WACA,oBACNtB,EAAM,OAASqB,GAAQ,wBACzB,EACA,cAAa,uBAAuBA,CAAI,OAEvC,YAAGA,CAAI,KAhBHA,CAiBP,CAEH,EACH,GACF,CAEJ,EC9PA,OAAS,eAAAE,EAAa,WAAAC,EAAS,YAAAC,MAAgB,QAC/C,OAAS,eAAAC,MAAmC,yBAC5C,OAAS,kBAAAzC,MAAsB,wBAC/B,OAAsB,SAAA0C,MAAa,sBAQ5B,IAAMC,EAAqBC,GAAuC,CACvE,GAAM,CAACV,EAAeW,CAAgB,EAAIL,EAAS,EAAK,EAClD,CAAE,EAAAhB,CAAE,EAAIxB,EAAe,EAEvB,CAAE,YAAA8C,EAAa,YAAAd,EAAa,UAAAe,EAAW,eAAAhB,EAAgB,OAAAiB,CAAO,EAClEP,EAAY,EAERQ,EAAQV,EAAqB,IAC1BR,EAAe,IAAKI,IAAO,CAChC,MAAO,GAAGA,CAAC,IACX,MAAOA,CACT,EAAE,EACD,CAACJ,CAAc,CAAC,EAEb,CAACmB,EAAUC,CAAW,EAAIX,EAAiBM,GAAe,CAAC,EAE3DM,EAAO,MAAQH,GAAO,QAAU,GAAK,GAErCpB,EAAoBqB,GAAqB,CAC7CC,EAAYD,CAAQ,CACtB,EAEMG,EAA6D,IAAM,CACvEF,EAAaG,GAASA,EAAO,CAAC,CAChC,EAEMC,EAA2D,IAAM,CACrEJ,EAAaG,GAASA,EAAO,CAAC,CAChC,EAEME,EAAgBlB,EACnBH,GAAM,CACL,IAAMsB,EAAS,OAAO,SAAStB,EAAE,OAAO,MAAO,EAAE,EAC3CuB,EAAM,OAAO,MAAMD,CAAM,EAAI,EAAIA,EACjCE,EAAU,KAAK,IAAI,KAAK,IAAID,EAAK,CAAC,EAAG1B,CAAW,EACtDmB,EAAYQ,CAAO,CACrB,EACA,CAAC3B,CAAW,CACd,EAEM4B,EAAS,SAAY,CACzB,GAAI,CACFZ,EAAO,CAAE,SAAAE,CAAS,CAAC,EAAE,KACnB,IAAM,CACJN,GAAS,QAAQ,EACjBF,EAAM,QAAQlB,EAAE,kBAAkB,CAAC,CACrC,EACCqC,GAAe,CACdnB,EAAM,MAAMmB,EAAI,OAAO,CACzB,CACF,CACF,MAAQ,CAER,CACF,EAEA,MAAO,CACL,eAAA9B,EACA,gBAAiBe,EACjB,MAAOI,EACP,MAAAD,EACA,iBAAApB,EACA,mBAAAwB,EACA,iBAAAE,EACA,cAAAC,EACA,iBAAkBN,GAAY,EAC9B,mBAAoBA,GAAYlB,EAChC,KAAAoB,EACA,SAAUR,GAAS,MACnB,OAAAgB,EACA,UAAWb,EACX,cAAAb,EACA,iBAAAW,EACA,YAAAb,CACF,CACF,EC5ES,cAAArB,MAAA,oBAFF,IAAMmD,EAA2C/C,GAAU,CAChE,IAAMgD,EAAQpB,EAAkB,CAAE,MAAO5B,EAAM,KAAM,CAAC,EACtD,OAAOJ,EAACW,EAAA,CAAU,GAAGyC,EAAO,CAC9B,EHKO,IAAMC,GAA6B,2BAC7BC,GAA4B,0BAEzCrE,GAAqBoE,GAA4BF,EAAgB,CAC/D,MAAO,IAAMnE,EAAK,EAAE,6BAA6B,EACjD,KAAM,IACR,CAAC,EAEDE,GAAoBoE,GAA2BH,EAAgB,CAC7D,MAAO,IAAMnE,EAAK,EAAE,6BAA6B,CACnD,CAAC","sourcesContent":["import { i18n } from \"@orderly.network/i18n\";\nimport { registerSimpleDialog, registerSimpleSheet } 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 LeverageWidgetWithDialogId = \"LeverageWidgetWithDialog\";\nexport const LeverageWidgetWithSheetId = \"LeverageWidgetWithSheet\";\n\nregisterSimpleDialog(LeverageWidgetWithDialogId, LeverageEditor, {\n title: () => i18n.t(\"leverage.maxAccountLeverage\"),\n size: \"md\",\n});\n\nregisterSimpleSheet(LeverageWidgetWithSheetId, LeverageEditor, {\n title: () => i18n.t(\"leverage.maxAccountLeverage\"),\n});\n","import React, { FC, useId } from \"react\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport {\n Box,\n Button,\n Flex,\n Input,\n Slider,\n Text,\n cn,\n PlusIcon,\n ReduceIcon,\n inputFormatter,\n InputFormatter,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nconst toggles = [5, 10, 20, 50, 100];\n\nconst IconButton: React.FC<{\n Icon: React.ComponentType<any>;\n onClick: React.MouseEventHandler<SVGSVGElement>;\n disabled: boolean;\n}> = (props) => {\n const { Icon, onClick, disabled } = props;\n return (\n <Icon\n onClick={disabled ? undefined : onClick}\n className={cn(\n \"oui-m-2 oui-text-white oui-transition-all\",\n disabled\n ? \"oui-cursor-not-allowed oui-opacity-20\"\n : \"oui-cursor-pointer oui-opacity-100\",\n )}\n />\n );\n};\n\nconst LeverageInput: React.FC<LeverageProps> = (props) => {\n const formatters = React.useMemo<InputFormatter[]>(\n () => [\n inputFormatter.numberFormatter,\n inputFormatter.currencyFormatter,\n inputFormatter.decimalPointFormatter,\n ],\n [],\n );\n const id = useId();\n return (\n <label\n htmlFor={id}\n className={cn(\n \"oui-w-full\",\n \"oui-rounded\",\n \"oui-bg-base-6\",\n \"oui-flex\",\n \"oui-items-center\",\n \"oui-justify-between\",\n \"oui-outline\",\n \"oui-outline-offset-0\",\n \"oui-outline-1\",\n \"oui-outline-transparent\",\n \"focus-within:oui-outline-primary-light\",\n \"oui-input-root\",\n )}\n >\n <IconButton\n Icon={ReduceIcon}\n onClick={props.onLeverageReduce}\n disabled={props.isReduceDisabled}\n />\n <Flex itemAlign=\"center\" justify=\"center\">\n <Input\n value={props.value}\n id={id}\n autoComplete=\"off\"\n classNames={{\n input: cn(\"oui-text-center\"),\n root: cn(\n \"oui-text-center\",\n \"oui-w-7\",\n \"oui-px-0\",\n \"oui-outline\",\n \"oui-outline-offset-0\",\n \"oui-outline-1\",\n \"oui-outline-transparent\",\n \"focus-within:oui-outline-primary-none\",\n ),\n }}\n formatters={formatters}\n onChange={props.onInputChange}\n />\n <div className=\"oui-select-none\">x</div>\n </Flex>\n <IconButton\n Icon={PlusIcon}\n onClick={props.onLeverageIncrease}\n disabled={props.isIncreaseDisabled}\n />\n </label>\n );\n};\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n const { currentLeverage } = props;\n const { t } = useTranslation();\n return (\n <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n <LeverageHeader currentLeverage={currentLeverage} />\n <LeverageInput {...props} />\n <LeverageSelector {...props} />\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 const { currentLeverage } = props;\n return (\n <Flex justify={\"center\"} width={\"100%\"} mb={2}>\n <Flex gap={1}>\n {`${t(\"common.current\")}:`}\n <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n {currentLeverage ?? \"--\"}\n </Text.numeral>\n </Flex>\n </Flex>\n );\n};\n\ninterface LeverageSelectorProps {\n value: number;\n onLeverageChange: (value: number) => void;\n}\n\nexport const LeverageSelector: React.FC<LeverageSelectorProps> = (props) => {\n const { value, onLeverageChange } = props;\n return (\n <Flex itemAlign=\"center\" justify=\"between\" width={\"100%\"} mt={2}>\n {toggles.map((option) => (\n <Flex\n key={option}\n itemAlign=\"center\"\n justify=\"center\"\n className={cn(\n `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`,\n value === option\n ? \"oui-border-primary oui-bg-base-6\"\n : \"oui-border-line-12\",\n )}\n onClick={() => onLeverageChange?.(option)}\n >\n <Flex\n itemAlign=\"center\"\n justify=\"center\"\n className={cn(`oui-h-3 oui-w-9 oui-select-none`)}\n >\n {option}x\n </Flex>\n </Flex>\n ))}\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 leverageLevers: number[];\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n const { leverageLevers, maxLeverage, className, value, showSliderTip } =\n props;\n return (\n <Box pt={4} width={\"100%\"} className={className}>\n <Slider\n // step={1.04}\n max={maxLeverage}\n min={1}\n // markLabelVisible={true}\n // marks={props.marks}\n markCount={5}\n value={[value]}\n onValueChange={(e) => {\n props.onLeverageChange(e[0]);\n props.setShowSliderTip(true);\n }}\n color=\"primary\"\n onValueCommit={(e) => {\n props.onValueCommit?.(e);\n props.setShowSliderTip(false);\n }}\n showTip={showSliderTip}\n tipFormatter={(value) => {\n return `${value}x`;\n }}\n />\n <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n {leverageLevers?.map((item, index) => {\n return (\n <button\n key={item}\n onClick={() => {\n props.onLeverageChange(item);\n props.onValueCommit?.([item]);\n }}\n className={cn(\n \"oui-pb-3 oui-text-2xs\",\n index === 0\n ? \"oui-pr-2\"\n : index === 5\n ? \"oui-pl-0\"\n : \"oui-ml-2 oui-px-0\",\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};\n","import { useCallback, 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 [showSliderTip, setShowSliderTip] = useState(false);\n const { t } = useTranslation();\n\n const { curLeverage, maxLeverage, isLoading, leverageLevers, update } =\n useLeverage();\n\n const marks = useMemo<SliderMarks>(() => {\n return leverageLevers.map((e) => ({\n label: `${e}x`,\n value: e,\n }));\n }, [leverageLevers]);\n\n const [leverage, setLeverage] = useState<number>(curLeverage ?? 0);\n\n const step = 100 / ((marks?.length || 0) - 1);\n\n const onLeverageChange = (leverage: number) => {\n setLeverage(leverage);\n };\n\n const onLeverageIncrease: React.MouseEventHandler<SVGSVGElement> = () => {\n setLeverage((prev) => prev + 1);\n };\n\n const onLeverageReduce: React.MouseEventHandler<SVGSVGElement> = () => {\n setLeverage((prev) => prev - 1);\n };\n\n const onInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n (e) => {\n const parsed = Number.parseInt(e.target.value, 10);\n const raw = Number.isNaN(parsed) ? 0 : parsed;\n const clamped = Math.min(Math.max(raw, 1), maxLeverage);\n setLeverage(clamped);\n },\n [maxLeverage],\n );\n\n const onSave = async () => {\n try {\n update({ leverage }).then(\n () => {\n options?.close?.();\n toast.success(t(\"leverage.updated\"));\n },\n (err: Error) => {\n toast.error(err.message);\n },\n );\n } catch {\n //\n }\n };\n\n return {\n leverageLevers,\n currentLeverage: curLeverage,\n value: leverage,\n marks,\n onLeverageChange,\n onLeverageIncrease,\n onLeverageReduce,\n onInputChange,\n isReduceDisabled: leverage <= 1,\n isIncreaseDisabled: leverage >= maxLeverage,\n step,\n onCancel: options?.close,\n onSave,\n isLoading: isLoading,\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 CHANGED
@@ -1,11 +1,11 @@
1
- import { registerSimpleDialog, Flex, Button, toast, Text, Box, Slider, cn } from '@orderly.network/ui';
2
1
  import { i18n, useTranslation } from '@orderly.network/i18n';
2
+ import { registerSimpleDialog, registerSimpleSheet, Flex, Button, toast, Text, inputFormatter, cn, ReduceIcon, Input, PlusIcon, Box, Slider } from '@orderly.network/ui';
3
+ import D, { useState, useMemo, useCallback, useId } from 'react';
3
4
  import { jsx, jsxs } from 'react/jsx-runtime';
4
- import { useState, useMemo } from 'react';
5
- import { useMarginRatio, useLeverage } from '@orderly.network/hooks';
5
+ import { useLeverage } from '@orderly.network/hooks';
6
6
 
7
- 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"});
7
+ var q=[5,10,20,50,100],C=e=>{let{Icon:r,onClick:o,disabled:n}=e;return jsx(r,{onClick:n?void 0:o,className:cn("oui-m-2 oui-text-white oui-transition-all",n?"oui-cursor-not-allowed oui-opacity-20":"oui-cursor-pointer oui-opacity-100")})},J=e=>{let r=D.useMemo(()=>[inputFormatter.numberFormatter,inputFormatter.currencyFormatter,inputFormatter.decimalPointFormatter],[]),o=useId();return jsxs("label",{htmlFor:o,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(C,{Icon:ReduceIcon,onClick:e.onLeverageReduce,disabled:e.isReduceDisabled}),jsxs(Flex,{itemAlign:"center",justify:"center",children:[jsx(Input,{value:e.value,id:o,autoComplete:"off",classNames:{input:cn("oui-text-center"),root:cn("oui-text-center","oui-w-7","oui-px-0","oui-outline","oui-outline-offset-0","oui-outline-1","oui-outline-transparent","focus-within:oui-outline-primary-none")},formatters:r,onChange:e.onInputChange}),jsx("div",{className:"oui-select-none",children:"x"})]}),jsx(C,{Icon:PlusIcon,onClick:e.onLeverageIncrease,disabled:e.isIncreaseDisabled})]})},x=e=>{let{currentLeverage:r}=e,{t:o}=useTranslation();return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsx(F,{currentLeverage:r}),jsx(J,{...e}),jsx(K,{...e}),jsx(w,{...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:o("common.cancel")}),jsx(Button,{fullWidth:true,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:o("common.save")})]})]})},F=e=>{let{t:r}=useTranslation(),{currentLeverage:o}=e;return jsx(Flex,{justify:"center",width:"100%",mb:2,children:jsxs(Flex,{gap:1,children:[`${r("common.current")}:`,jsx(Text.numeral,{unit:"x",size:"sm",intensity:80,children:o??"--"})]})})},K=e=>{let{value:r,onLeverageChange:o}=e;return jsx(Flex,{itemAlign:"center",justify:"between",width:"100%",mt:2,children:q.map(n=>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",r===n?"oui-border-primary oui-bg-base-6":"oui-border-line-12"),onClick:()=>o?.(n),children:jsxs(Flex,{itemAlign:"center",justify:"center",className:cn("oui-h-3 oui-w-9 oui-select-none"),children:[n,"x"]})},n))})},w=e=>{let{leverageLevers:r,maxLeverage:o,className:n,value:g,showSliderTip:c}=e;return jsxs(Box,{pt:4,width:"100%",className:n,children:[jsx(Slider,{max:o,min:1,markCount:5,value:[g],onValueChange:a=>{e.onLeverageChange(a[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:a=>{e.onValueCommit?.(a),e.setShowSliderTip(false);},showTip:c,tipFormatter:a=>`${a}x`}),jsx(Flex,{justify:"between",width:"100%",pt:3,children:r?.map((a,m)=>jsx("button",{onClick:()=>{e.onLeverageChange(a),e.onValueCommit?.([a]);},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>=a&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${a}-btn`,children:`${a}x`},a))})]})};var b=e=>{let[r,o]=useState(false),{t:n}=useTranslation(),{curLeverage:g,maxLeverage:c,isLoading:a,leverageLevers:m,update:P}=useLeverage(),S=useMemo(()=>m.map(i=>({label:`${i}x`,value:i})),[m]),[v,d]=useState(g??0),E=100/((S?.length||0)-1),T=i=>{d(i);},N=()=>{d(i=>i+1);},V=()=>{d(i=>i-1);},M=useCallback(i=>{let h=Number.parseInt(i.target.value,10),W=Number.isNaN(h)?0:h,A=Math.min(Math.max(W,1),c);d(A);},[c]),H=async()=>{try{P({leverage:v}).then(()=>{e?.close?.(),toast.success(n("leverage.updated"));},i=>{toast.error(i.message);});}catch{}};return {leverageLevers:m,currentLeverage:g,value:v,marks:S,onLeverageChange:T,onLeverageIncrease:N,onLeverageReduce:V,onInputChange:M,isReduceDisabled:v<=1,isIncreaseDisabled:v>=c,step:E,onCancel:e?.close,onSave:H,isLoading:a,showSliderTip:r,setShowSliderTip:o,maxLeverage:c}};var p=e=>{let r=b({close:e.close});return jsx(x,{...r})};var re="LeverageWidgetWithDialog",oe="LeverageWidgetWithSheet";registerSimpleDialog(re,p,{title:()=>i18n.t("leverage.maxAccountLeverage"),size:"md"});registerSimpleSheet(oe,p,{title:()=>i18n.t("leverage.maxAccountLeverage")});
8
8
 
9
- export { m as Leverage, g as LeverageEditor, S as LeverageHeader, f as LeverageSlider, U as LeverageWidgetId, u as useLeverageScript };
9
+ export { x as Leverage, p as LeverageEditor, F as LeverageHeader, w as LeverageSlider, re as LeverageWidgetWithDialogId, oe as LeverageWidgetWithSheetId, b as useLeverageScript };
10
10
  //# sourceMappingURL=out.js.map
11
11
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +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","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":"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","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"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["i18n","registerSimpleDialog","registerSimpleSheet","React","useId","useTranslation","Box","Button","Flex","Input","Slider","Text","cn","PlusIcon","ReduceIcon","inputFormatter","jsx","jsxs","toggles","IconButton","props","Icon","onClick","disabled","LeverageInput","formatters","id","Leverage","currentLeverage","t","LeverageHeader","LeverageSelector","LeverageSlider","value","onLeverageChange","option","leverageLevers","maxLeverage","className","showSliderTip","e","item","index","useCallback","useMemo","useState","useLeverage","toast","useLeverageScript","options","setShowSliderTip","curLeverage","isLoading","update","marks","leverage","setLeverage","step","onLeverageIncrease","prev","onLeverageReduce","onInputChange","parsed","raw","clamped","onSave","err","LeverageEditor","state","LeverageWidgetWithDialogId","LeverageWidgetWithSheetId"],"mappings":"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","sourcesContent":["import { i18n } from \"@orderly.network/i18n\";\nimport { registerSimpleDialog, registerSimpleSheet } 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 LeverageWidgetWithDialogId = \"LeverageWidgetWithDialog\";\nexport const LeverageWidgetWithSheetId = \"LeverageWidgetWithSheet\";\n\nregisterSimpleDialog(LeverageWidgetWithDialogId, LeverageEditor, {\n title: () => i18n.t(\"leverage.maxAccountLeverage\"),\n size: \"md\",\n});\n\nregisterSimpleSheet(LeverageWidgetWithSheetId, LeverageEditor, {\n title: () => i18n.t(\"leverage.maxAccountLeverage\"),\n});\n","import React, { FC, useId } from \"react\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport {\n Box,\n Button,\n Flex,\n Input,\n Slider,\n Text,\n cn,\n PlusIcon,\n ReduceIcon,\n inputFormatter,\n InputFormatter,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nconst toggles = [5, 10, 20, 50, 100];\n\nconst IconButton: React.FC<{\n Icon: React.ComponentType<any>;\n onClick: React.MouseEventHandler<SVGSVGElement>;\n disabled: boolean;\n}> = (props) => {\n const { Icon, onClick, disabled } = props;\n return (\n <Icon\n onClick={disabled ? undefined : onClick}\n className={cn(\n \"oui-m-2 oui-text-white oui-transition-all\",\n disabled\n ? \"oui-cursor-not-allowed oui-opacity-20\"\n : \"oui-cursor-pointer oui-opacity-100\",\n )}\n />\n );\n};\n\nconst LeverageInput: React.FC<LeverageProps> = (props) => {\n const formatters = React.useMemo<InputFormatter[]>(\n () => [\n inputFormatter.numberFormatter,\n inputFormatter.currencyFormatter,\n inputFormatter.decimalPointFormatter,\n ],\n [],\n );\n const id = useId();\n return (\n <label\n htmlFor={id}\n className={cn(\n \"oui-w-full\",\n \"oui-rounded\",\n \"oui-bg-base-6\",\n \"oui-flex\",\n \"oui-items-center\",\n \"oui-justify-between\",\n \"oui-outline\",\n \"oui-outline-offset-0\",\n \"oui-outline-1\",\n \"oui-outline-transparent\",\n \"focus-within:oui-outline-primary-light\",\n \"oui-input-root\",\n )}\n >\n <IconButton\n Icon={ReduceIcon}\n onClick={props.onLeverageReduce}\n disabled={props.isReduceDisabled}\n />\n <Flex itemAlign=\"center\" justify=\"center\">\n <Input\n value={props.value}\n id={id}\n autoComplete=\"off\"\n classNames={{\n input: cn(\"oui-text-center\"),\n root: cn(\n \"oui-text-center\",\n \"oui-w-7\",\n \"oui-px-0\",\n \"oui-outline\",\n \"oui-outline-offset-0\",\n \"oui-outline-1\",\n \"oui-outline-transparent\",\n \"focus-within:oui-outline-primary-none\",\n ),\n }}\n formatters={formatters}\n onChange={props.onInputChange}\n />\n <div className=\"oui-select-none\">x</div>\n </Flex>\n <IconButton\n Icon={PlusIcon}\n onClick={props.onLeverageIncrease}\n disabled={props.isIncreaseDisabled}\n />\n </label>\n );\n};\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n const { currentLeverage } = props;\n const { t } = useTranslation();\n return (\n <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n <LeverageHeader currentLeverage={currentLeverage} />\n <LeverageInput {...props} />\n <LeverageSelector {...props} />\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 const { currentLeverage } = props;\n return (\n <Flex justify={\"center\"} width={\"100%\"} mb={2}>\n <Flex gap={1}>\n {`${t(\"common.current\")}:`}\n <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n {currentLeverage ?? \"--\"}\n </Text.numeral>\n </Flex>\n </Flex>\n );\n};\n\ninterface LeverageSelectorProps {\n value: number;\n onLeverageChange: (value: number) => void;\n}\n\nexport const LeverageSelector: React.FC<LeverageSelectorProps> = (props) => {\n const { value, onLeverageChange } = props;\n return (\n <Flex itemAlign=\"center\" justify=\"between\" width={\"100%\"} mt={2}>\n {toggles.map((option) => (\n <Flex\n key={option}\n itemAlign=\"center\"\n justify=\"center\"\n className={cn(\n `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`,\n value === option\n ? \"oui-border-primary oui-bg-base-6\"\n : \"oui-border-line-12\",\n )}\n onClick={() => onLeverageChange?.(option)}\n >\n <Flex\n itemAlign=\"center\"\n justify=\"center\"\n className={cn(`oui-h-3 oui-w-9 oui-select-none`)}\n >\n {option}x\n </Flex>\n </Flex>\n ))}\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 leverageLevers: number[];\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n const { leverageLevers, maxLeverage, className, value, showSliderTip } =\n props;\n return (\n <Box pt={4} width={\"100%\"} className={className}>\n <Slider\n // step={1.04}\n max={maxLeverage}\n min={1}\n // markLabelVisible={true}\n // marks={props.marks}\n markCount={5}\n value={[value]}\n onValueChange={(e) => {\n props.onLeverageChange(e[0]);\n props.setShowSliderTip(true);\n }}\n color=\"primary\"\n onValueCommit={(e) => {\n props.onValueCommit?.(e);\n props.setShowSliderTip(false);\n }}\n showTip={showSliderTip}\n tipFormatter={(value) => {\n return `${value}x`;\n }}\n />\n <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n {leverageLevers?.map((item, index) => {\n return (\n <button\n key={item}\n onClick={() => {\n props.onLeverageChange(item);\n props.onValueCommit?.([item]);\n }}\n className={cn(\n \"oui-pb-3 oui-text-2xs\",\n index === 0\n ? \"oui-pr-2\"\n : index === 5\n ? \"oui-pl-0\"\n : \"oui-ml-2 oui-px-0\",\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};\n","import { useCallback, 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 [showSliderTip, setShowSliderTip] = useState(false);\n const { t } = useTranslation();\n\n const { curLeverage, maxLeverage, isLoading, leverageLevers, update } =\n useLeverage();\n\n const marks = useMemo<SliderMarks>(() => {\n return leverageLevers.map((e) => ({\n label: `${e}x`,\n value: e,\n }));\n }, [leverageLevers]);\n\n const [leverage, setLeverage] = useState<number>(curLeverage ?? 0);\n\n const step = 100 / ((marks?.length || 0) - 1);\n\n const onLeverageChange = (leverage: number) => {\n setLeverage(leverage);\n };\n\n const onLeverageIncrease: React.MouseEventHandler<SVGSVGElement> = () => {\n setLeverage((prev) => prev + 1);\n };\n\n const onLeverageReduce: React.MouseEventHandler<SVGSVGElement> = () => {\n setLeverage((prev) => prev - 1);\n };\n\n const onInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n (e) => {\n const parsed = Number.parseInt(e.target.value, 10);\n const raw = Number.isNaN(parsed) ? 0 : parsed;\n const clamped = Math.min(Math.max(raw, 1), maxLeverage);\n setLeverage(clamped);\n },\n [maxLeverage],\n );\n\n const onSave = async () => {\n try {\n update({ leverage }).then(\n () => {\n options?.close?.();\n toast.success(t(\"leverage.updated\"));\n },\n (err: Error) => {\n toast.error(err.message);\n },\n );\n } catch {\n //\n }\n };\n\n return {\n leverageLevers,\n currentLeverage: curLeverage,\n value: leverage,\n marks,\n onLeverageChange,\n onLeverageIncrease,\n onLeverageReduce,\n onInputChange,\n isReduceDisabled: leverage <= 1,\n isIncreaseDisabled: leverage >= maxLeverage,\n step,\n onCancel: options?.close,\n onSave,\n isLoading: isLoading,\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/styles.css CHANGED
@@ -1 +1 @@
1
- .oui-ml-2{margin-left:.5rem}.oui-mt-2{margin-top:.5rem}.oui-px-0{padding-left:0;padding-right:0}.oui-pb-3{padding-bottom:.75rem}.oui-pl-0{padding-left:0}.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))}}
1
+ .oui-m-2{margin:.5rem}.oui-ml-2{margin-left:.5rem}.oui-box-border{box-sizing:border-box}.oui-flex{display:flex}.oui-h-3{height:.75rem}.oui-w-7{width:1.75rem}.oui-w-9{width:2.25rem}.oui-w-full{width:100%}.oui-cursor-not-allowed{cursor:not-allowed}.oui-cursor-pointer{cursor:pointer}.oui-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.oui-items-center{align-items:center}.oui-justify-between{justify-content:space-between}.oui-rounded{border-radius:var(--oui-rounded,.25rem)}.oui-rounded-md{border-radius:var(--oui-rounded-md,.375rem)}.oui-border{border-width:1px}.oui-border-solid{border-style:solid}.oui-border-line-12{border-color:rgb(var(--oui-color-line,255 255 255)/.12)}.oui-border-primary{--tw-border-opacity:1;border-color:rgb(var(--oui-color-primary)/var(--tw-border-opacity,1))}.oui-bg-base-6{--tw-bg-opacity:1;background-color:rgb(var(--oui-color-base-6)/var(--tw-bg-opacity,1))}.oui-bg-clip-padding{background-clip:padding-box}.oui-px-0{padding-left:0;padding-right:0}.oui-px-3{padding-left:.75rem;padding-right:.75rem}.oui-py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.oui-pb-3{padding-bottom:.75rem}.oui-pl-0{padding-left:0}.oui-pr-2{padding-right:.5rem}.oui-text-center{text-align:center}.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,1))}.oui-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.oui-opacity-100{opacity:1}.oui-opacity-20{opacity:.2}.oui-outline{outline-style:solid}.oui-outline-1{outline-width:1px}.oui-outline-offset-0{outline-offset:0}.oui-outline-transparent{outline-color:transparent}.oui-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}@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))}}.focus-within\:oui-outline-primary-light:focus-within{outline-color:rgb(var(--oui-color-primary-light)/1)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orderly.network/ui-leverage",
3
- "version": "2.1.3",
3
+ "version": "2.2.0",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -15,10 +15,10 @@
15
15
  "access": "public"
16
16
  },
17
17
  "dependencies": {
18
- "@orderly.network/i18n": "2.1.3",
19
- "@orderly.network/types": "2.1.3",
20
- "@orderly.network/hooks": "2.1.3",
21
- "@orderly.network/ui": "2.1.3"
18
+ "@orderly.network/hooks": "2.2.0",
19
+ "@orderly.network/i18n": "2.2.0",
20
+ "@orderly.network/ui": "2.2.0",
21
+ "@orderly.network/types": "2.2.0"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@swc/cli": "^0.3.12",
@@ -29,7 +29,7 @@
29
29
  "react-dom": "^18.2.0",
30
30
  "tailwindcss": "^3.4.4",
31
31
  "tsup": "^7.1.0",
32
- "tsconfig": "0.4.3"
32
+ "tsconfig": "0.5.0"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=18",