@orderly.network/ui-leverage 2.0.1-alpha.6 → 2.0.1-preview.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.
- package/dist/index.d.mts +26 -7
- package/dist/index.d.ts +26 -7
- package/dist/index.js +6 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +8 -8
package/dist/index.d.mts
CHANGED
|
@@ -1,26 +1,45 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
2
|
+
import { FC } from 'react';
|
|
3
3
|
import { SliderMarks } from '@orderly.network/ui';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
type LeverageEditorProps = {
|
|
6
|
+
close?: () => void;
|
|
7
|
+
};
|
|
8
|
+
declare const LeverageEditor: FC<LeverageEditorProps>;
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
type UseLeverageScriptOptions = {
|
|
11
|
+
close?: () => void;
|
|
12
|
+
};
|
|
13
|
+
type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
|
|
14
|
+
declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
|
|
8
15
|
currentLeverage: number | null;
|
|
9
16
|
value: any;
|
|
10
17
|
marks: SliderMarks;
|
|
11
18
|
onLeverageChange: (leverage: number) => void;
|
|
12
19
|
step: number;
|
|
13
|
-
onCancel: () =>
|
|
20
|
+
onCancel: (() => void) | undefined;
|
|
14
21
|
onSave: () => Promise<void>;
|
|
15
22
|
isLoading: any;
|
|
16
23
|
showSliderTip: boolean;
|
|
17
24
|
setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
|
|
18
25
|
maxLeverage: any;
|
|
19
26
|
};
|
|
20
|
-
type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
|
|
21
27
|
|
|
22
|
-
|
|
28
|
+
type LeverageProps = LeverageScriptReturns;
|
|
29
|
+
declare const Leverage: FC<LeverageProps>;
|
|
30
|
+
type LeverageHeaderProps = Pick<LeverageProps, "currentLeverage">;
|
|
31
|
+
declare const LeverageHeader: FC<LeverageHeaderProps>;
|
|
32
|
+
type LeverageSliderProps = {
|
|
33
|
+
maxLeverage?: number;
|
|
34
|
+
value: number;
|
|
35
|
+
onLeverageChange: (value: number) => void;
|
|
36
|
+
setShowSliderTip: (value: boolean) => void;
|
|
37
|
+
showSliderTip: boolean;
|
|
38
|
+
className?: string;
|
|
39
|
+
onValueCommit?: (value: number[]) => void;
|
|
40
|
+
};
|
|
41
|
+
declare const LeverageSlider: FC<LeverageSliderProps>;
|
|
23
42
|
|
|
24
43
|
declare const LeverageWidgetId = "leverageEditor";
|
|
25
44
|
|
|
26
|
-
export { Leverage, LeverageEditor, LeverageWidgetId };
|
|
45
|
+
export { Leverage, LeverageEditor, type LeverageEditorProps, LeverageHeader, type LeverageHeaderProps, type LeverageProps, type LeverageScriptReturns, LeverageSlider, type LeverageSliderProps, LeverageWidgetId, useLeverageScript };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,26 +1,45 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
2
|
+
import { FC } from 'react';
|
|
3
3
|
import { SliderMarks } from '@orderly.network/ui';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
type LeverageEditorProps = {
|
|
6
|
+
close?: () => void;
|
|
7
|
+
};
|
|
8
|
+
declare const LeverageEditor: FC<LeverageEditorProps>;
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
type UseLeverageScriptOptions = {
|
|
11
|
+
close?: () => void;
|
|
12
|
+
};
|
|
13
|
+
type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
|
|
14
|
+
declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
|
|
8
15
|
currentLeverage: number | null;
|
|
9
16
|
value: any;
|
|
10
17
|
marks: SliderMarks;
|
|
11
18
|
onLeverageChange: (leverage: number) => void;
|
|
12
19
|
step: number;
|
|
13
|
-
onCancel: () =>
|
|
20
|
+
onCancel: (() => void) | undefined;
|
|
14
21
|
onSave: () => Promise<void>;
|
|
15
22
|
isLoading: any;
|
|
16
23
|
showSliderTip: boolean;
|
|
17
24
|
setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
|
|
18
25
|
maxLeverage: any;
|
|
19
26
|
};
|
|
20
|
-
type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
|
|
21
27
|
|
|
22
|
-
|
|
28
|
+
type LeverageProps = LeverageScriptReturns;
|
|
29
|
+
declare const Leverage: FC<LeverageProps>;
|
|
30
|
+
type LeverageHeaderProps = Pick<LeverageProps, "currentLeverage">;
|
|
31
|
+
declare const LeverageHeader: FC<LeverageHeaderProps>;
|
|
32
|
+
type LeverageSliderProps = {
|
|
33
|
+
maxLeverage?: number;
|
|
34
|
+
value: number;
|
|
35
|
+
onLeverageChange: (value: number) => void;
|
|
36
|
+
setShowSliderTip: (value: boolean) => void;
|
|
37
|
+
showSliderTip: boolean;
|
|
38
|
+
className?: string;
|
|
39
|
+
onValueCommit?: (value: number[]) => void;
|
|
40
|
+
};
|
|
41
|
+
declare const LeverageSlider: FC<LeverageSliderProps>;
|
|
23
42
|
|
|
24
43
|
declare const LeverageWidgetId = "leverageEditor";
|
|
25
44
|
|
|
26
|
-
export { Leverage, LeverageEditor, LeverageWidgetId };
|
|
45
|
+
export { Leverage, LeverageEditor, type LeverageEditorProps, LeverageHeader, type LeverageHeaderProps, type LeverageProps, type LeverageScriptReturns, LeverageSlider, type LeverageSliderProps, LeverageWidgetId, useLeverageScript };
|
package/dist/index.js
CHANGED
|
@@ -5,10 +5,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var hooks = require('@orderly.network/hooks');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var g=e=>{let{currentLeverage:r=0}=e;return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsx(x,{currentLeverage:r}),jsxRuntime.jsx(S,{...e}),jsxRuntime.jsxs(ui.Flex,{direction:"row",gap:2,width:"100%",mt:0,pt:5,children:[jsxRuntime.jsx(ui.Button,{variant:"contained",color:"gray",fullWidth:!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"})]})]})},x=e=>jsxRuntime.jsxs(ui.Flex,{justify:"between",width:"100%",children:[jsxRuntime.jsx(ui.Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:"Max account leverage"}),jsxRuntime.jsxs(ui.Flex,{direction:"row",gap:1,children:[jsxRuntime.jsx(ui.Text,{size:"sm",intensity:54,children:"Current:"}),jsxRuntime.jsx(ui.Text.numeral,{unit:"x",size:"sm",intensity:80,children:e.currentLeverage??"--"})]})]}),S=e=>jsxRuntime.jsxs(ui.Box,{pt:3,width:"100%",className:e.className,children:[jsxRuntime.jsx(ui.Slider,{max:e.maxLeverage,markCount:5,value:[e.value],onValueChange:r=>{e.onLeverageChange(r[0]),e.setShowSliderTip(!0);},color:"primary",onValueCommit:r=>{e.onValueCommit?.(r),e.setShowSliderTip(!1);},showTip:e.showSliderTip,tipFormatter:(r,o,s,c)=>`${Math.max(1,r)}x`}),jsxRuntime.jsx(ui.Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((r,o)=>jsxRuntime.jsx("button",{onClick:s=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className:ui.cn(" oui-text-2xs oui-pb-3",o===0?"oui-pr-2":o===5?"oui-pl-0":"oui-px-0 oui-ml-2",e.value>=r&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${r}-btn`,children:`${r}x`}))})]});var v=e=>{let{currentLeverage:r}=hooks.useMarginRatio(),[o,s]=react.useState(!1),[c,{update:f,config:l,isMutating:y}]=hooks.useLeverage(),p=react.useMemo(()=>l?.map(t=>({label:`${t}x`,value:t}))||[],[l]),[d,b]=react.useState(c??0),w=l?.reduce((t,k)=>Math.max(t,Number(k),0),0),P=100/((p?.length||0)-1),F=t=>{b(t);},T=async()=>{try{f({leverage:d}).then(t=>{e?.close?.(),ui.toast.success("Leverage updated");},t=>{ui.toast.error(t.message);});}catch{}};return {currentLeverage:r,value:d,marks:p,onLeverageChange:F,step:P,onCancel:e?.close,onSave:T,isLoading:y,showSliderTip:o,setShowSliderTip:s,maxLeverage:w}};var m=e=>{let r=v({close:e.close});return jsxRuntime.jsx(g,{...r})};var $="leverageEditor";ui.registerSimpleDialog($,m,{title:"Max account leverage",size:"md"});
|
|
9
9
|
|
|
10
|
-
exports.Leverage =
|
|
10
|
+
exports.Leverage = g;
|
|
11
11
|
exports.LeverageEditor = m;
|
|
12
|
-
exports.
|
|
12
|
+
exports.LeverageHeader = x;
|
|
13
|
+
exports.LeverageSlider = S;
|
|
14
|
+
exports.LeverageWidgetId = $;
|
|
15
|
+
exports.useLeverageScript = v;
|
|
13
16
|
//# sourceMappingURL=out.js.map
|
|
14
17
|
//# 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","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"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","cn","jsx","jsxs","Leverage","props","currentLeverage","LeverageHeader","LeverageSlider","e","value","min","max","percent","item","index","useLeverage","useMarginRatio","toast","useMemo","useState","useLeverageScript","options","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","onLeverageChange","onSave","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nexport { LeverageEditor, type LeverageEditorProps } from \"./leverage.widget\";\nexport { Leverage, LeverageSlider, LeverageHeader } from \"./leverage.ui\";\nexport type {\n LeverageProps,\n LeverageSliderProps,\n LeverageHeaderProps,\n} from \"./leverage.ui\";\nexport {\n useLeverageScript,\n type LeverageScriptReturns,\n} from \"./leverage.script\";\n\nexport const LeverageWidgetId = \"leverageEditor\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n title: \"Max account leverage\",\n size: \"md\",\n});\n","import { FC } from \"react\";\nimport { Box, Button, Flex, Slider, Text, cn } from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n const { currentLeverage = 0 } = props;\n return (\n <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n <LeverageHeader currentLeverage={currentLeverage} />\n\n <LeverageSlider {...props} />\n <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={0} pt={5}>\n <Button\n variant=\"contained\"\n color=\"gray\"\n fullWidth\n onClick={props.onCancel}\n data-testid=\"oui-testid-leverage-cancel-btn\"\n >\n Cancel\n </Button>\n <Button\n fullWidth\n loading={props.isLoading}\n onClick={props.onSave}\n data-testid=\"oui-testid-leverage-save-btn\"\n >\n Save\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport type LeverageHeaderProps = Pick<LeverageProps, \"currentLeverage\">;\n\nexport const LeverageHeader: FC<LeverageHeaderProps> = (props) => {\n return (\n <Flex justify={\"between\"} width={\"100%\"}>\n <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n Max account leverage\n </Text>\n <Flex direction={\"row\"} gap={1}>\n <Text size={\"sm\"} intensity={54}>\n Current:\n </Text>\n <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n {props.currentLeverage ?? \"--\"}\n </Text.numeral>\n </Flex>\n </Flex>\n );\n};\n\nexport type LeverageSliderProps = {\n maxLeverage?: number;\n value: number;\n onLeverageChange: (value: number) => void;\n setShowSliderTip: (value: boolean) => void;\n showSliderTip: boolean;\n className?: string;\n onValueCommit?: (value: number[]) => void;\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n return (\n <Box pt={3} width={\"100%\"} className={props.className}>\n <Slider\n // step={1.04}\n max={props.maxLeverage}\n // min={1}\n // markLabelVisible={true}\n // marks={props.marks}\n markCount={5}\n value={[props.value]}\n onValueChange={(e) => {\n console.log(\"onValueChange\");\n props.onLeverageChange(e[0]);\n props.setShowSliderTip(true);\n }}\n color=\"primary\"\n onValueCommit={(e) => {\n console.log(\"onValueCommit\");\n props.onValueCommit?.(e);\n props.setShowSliderTip(false);\n }}\n showTip={props.showSliderTip}\n tipFormatter={(value, min, max, percent) => {\n return `${Math.max(1, value)}x`;\n }}\n />\n <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n {[1, 10, 20, 30, 40, 50].map((item, index) => {\n return (\n <button\n onClick={(e) => {\n props.onLeverageChange(item);\n props.onValueCommit?.([item]);\n }}\n className={cn(\n \" oui-text-2xs oui-pb-3\",\n index === 0\n ? \"oui-pr-2\"\n : index === 5\n ? \"oui-pl-0\"\n : \"oui-px-0 oui-ml-2\",\n props.value >= item && \"oui-text-primary-light\"\n )}\n data-testid={`oui-testid-leverage-${item}-btn`}\n >\n {`${item}x`}\n </button>\n );\n })}\n </Flex>\n </Box>\n );\n // return (\n // <Box pt={3} width={\"100%\"}>\n // <Slider\n // step={props.step}\n // markLabelVisible={true}\n // marks={props.marks}\n // value={[props.value]}\n // onValueChange={(e) => {\n // const value = props.marks?.[e[0] / 10]?.value;\n // if (typeof value !== \"undefined\") props.onLeverageChange(value);\n // }}\n // />\n // </Box>\n // );\n};\n","import { useLeverage, useMarginRatio } from \"@orderly.network/hooks\";\nimport { SliderMarks, toast } from \"@orderly.network/ui\";\nimport { useMemo, useState } from \"react\";\n\ntype UseLeverageScriptOptions = {\n close?: () => void;\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n\nexport const useLeverageScript = (options?: UseLeverageScriptOptions) => {\n const { currentLeverage } = useMarginRatio();\n const [showSliderTip, setShowSliderTip] = useState(false);\n\n const [curLeverage, { update, config: leverageLevers, isMutating }] =\n useLeverage();\n\n const marks = useMemo((): SliderMarks => {\n return (\n leverageLevers?.map((e: number) => ({\n label: `${e}x`,\n value: e,\n })) || []\n );\n }, [leverageLevers]);\n\n const [leverage, setLeverage] = useState(curLeverage ?? 0);\n\n const maxLeverage = leverageLevers?.reduce(\n (a: number, item: any) => Math.max(a, Number(item), 0),\n 0\n );\n\n const step = 100 / ((marks?.length || 0) - 1);\n\n // const leverageValue = useMemo(() => {\n // const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n // return index * step;\n // }, [leverageLevers, leverage, step]);\n\n const onLeverageChange = (leverage: number) => {\n // maxLeverage / 100 * leverage;\n setLeverage(leverage);\n // updateLeverage(leverage);\n };\n\n const onSave = async () => {\n try {\n update({ leverage }).then(\n (res: any) => {\n options?.close?.();\n toast.success(\"Leverage updated\");\n },\n (err: Error) => {\n toast.error(err.message);\n }\n );\n } catch (e) {}\n };\n\n return {\n currentLeverage,\n value: leverage,\n marks,\n onLeverageChange,\n step,\n onCancel: options?.close,\n onSave,\n isLoading: isMutating,\n showSliderTip,\n setShowSliderTip,\n maxLeverage,\n };\n};\n","import { FC } from \"react\";\nimport { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport type LeverageEditorProps = {\n close?: () => void;\n};\n\nexport const LeverageEditor: FC<LeverageEditorProps> = (props) => {\n const state = useLeverageScript({ close: props.close });\n return <Leverage {...state} />;\n};\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { registerSimpleDialog, Flex,
|
|
1
|
+
import { registerSimpleDialog, Flex, Button, Text, Box, Slider, cn, toast } from '@orderly.network/ui';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useMarginRatio, useLeverage } from '@orderly.network/hooks';
|
|
4
4
|
import { useState, useMemo } from 'react';
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var g=e=>{let{currentLeverage:r=0}=e;return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsx(x,{currentLeverage:r}),jsx(S,{...e}),jsxs(Flex,{direction:"row",gap:2,width:"100%",mt:0,pt:5,children:[jsx(Button,{variant:"contained",color:"gray",fullWidth:!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"})]})]})},x=e=>jsxs(Flex,{justify:"between",width:"100%",children:[jsx(Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:"Max account leverage"}),jsxs(Flex,{direction:"row",gap:1,children:[jsx(Text,{size:"sm",intensity:54,children:"Current:"}),jsx(Text.numeral,{unit:"x",size:"sm",intensity:80,children:e.currentLeverage??"--"})]})]}),S=e=>jsxs(Box,{pt:3,width:"100%",className:e.className,children:[jsx(Slider,{max:e.maxLeverage,markCount:5,value:[e.value],onValueChange:r=>{e.onLeverageChange(r[0]),e.setShowSliderTip(!0);},color:"primary",onValueCommit:r=>{e.onValueCommit?.(r),e.setShowSliderTip(!1);},showTip:e.showSliderTip,tipFormatter:(r,o,s,c)=>`${Math.max(1,r)}x`}),jsx(Flex,{justify:"between",width:"100%",pt:3,children:[1,10,20,30,40,50].map((r,o)=>jsx("button",{onClick:s=>{e.onLeverageChange(r),e.onValueCommit?.([r]);},className:cn(" oui-text-2xs oui-pb-3",o===0?"oui-pr-2":o===5?"oui-pl-0":"oui-px-0 oui-ml-2",e.value>=r&&"oui-text-primary-light"),"data-testid":`oui-testid-leverage-${r}-btn`,children:`${r}x`}))})]});var v=e=>{let{currentLeverage:r}=useMarginRatio(),[o,s]=useState(!1),[c,{update:f,config:l,isMutating:y}]=useLeverage(),p=useMemo(()=>l?.map(t=>({label:`${t}x`,value:t}))||[],[l]),[d,b]=useState(c??0),w=l?.reduce((t,k)=>Math.max(t,Number(k),0),0),P=100/((p?.length||0)-1),F=t=>{b(t);},T=async()=>{try{f({leverage:d}).then(t=>{e?.close?.(),toast.success("Leverage updated");},t=>{toast.error(t.message);});}catch{}};return {currentLeverage:r,value:d,marks:p,onLeverageChange:F,step:P,onCancel:e?.close,onSave:T,isLoading:y,showSliderTip:o,setShowSliderTip:s,maxLeverage:w}};var m=e=>{let r=v({close:e.close});return jsx(g,{...r})};var $="leverageEditor";registerSimpleDialog($,m,{title:"Max account leverage",size:"md"});
|
|
7
7
|
|
|
8
|
-
export {
|
|
8
|
+
export { g as Leverage, m as LeverageEditor, x as LeverageHeader, S as LeverageSlider, $ as LeverageWidgetId, v as useLeverageScript };
|
|
9
9
|
//# sourceMappingURL=out.js.map
|
|
10
10
|
//# 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","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"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","cn","jsx","jsxs","Leverage","props","currentLeverage","LeverageHeader","LeverageSlider","e","value","min","max","percent","item","index","useLeverage","useMarginRatio","toast","useMemo","useState","useLeverageScript","options","showSliderTip","setShowSliderTip","curLeverage","update","leverageLevers","isMutating","marks","leverage","setLeverage","maxLeverage","a","step","onLeverageChange","onSave","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nexport { LeverageEditor, type LeverageEditorProps } from \"./leverage.widget\";\nexport { Leverage, LeverageSlider, LeverageHeader } from \"./leverage.ui\";\nexport type {\n LeverageProps,\n LeverageSliderProps,\n LeverageHeaderProps,\n} from \"./leverage.ui\";\nexport {\n useLeverageScript,\n type LeverageScriptReturns,\n} from \"./leverage.script\";\n\nexport const LeverageWidgetId = \"leverageEditor\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n title: \"Max account leverage\",\n size: \"md\",\n});\n","import { FC } from \"react\";\nimport { Box, Button, Flex, Slider, Text, cn } from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport type LeverageProps = LeverageScriptReturns;\n\nexport const Leverage: FC<LeverageProps> = (props) => {\n const { currentLeverage = 0 } = props;\n return (\n <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n <LeverageHeader currentLeverage={currentLeverage} />\n\n <LeverageSlider {...props} />\n <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={0} pt={5}>\n <Button\n variant=\"contained\"\n color=\"gray\"\n fullWidth\n onClick={props.onCancel}\n data-testid=\"oui-testid-leverage-cancel-btn\"\n >\n Cancel\n </Button>\n <Button\n fullWidth\n loading={props.isLoading}\n onClick={props.onSave}\n data-testid=\"oui-testid-leverage-save-btn\"\n >\n Save\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport type LeverageHeaderProps = Pick<LeverageProps, \"currentLeverage\">;\n\nexport const LeverageHeader: FC<LeverageHeaderProps> = (props) => {\n return (\n <Flex justify={\"between\"} width={\"100%\"}>\n <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n Max account leverage\n </Text>\n <Flex direction={\"row\"} gap={1}>\n <Text size={\"sm\"} intensity={54}>\n Current:\n </Text>\n <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n {props.currentLeverage ?? \"--\"}\n </Text.numeral>\n </Flex>\n </Flex>\n );\n};\n\nexport type LeverageSliderProps = {\n maxLeverage?: number;\n value: number;\n onLeverageChange: (value: number) => void;\n setShowSliderTip: (value: boolean) => void;\n showSliderTip: boolean;\n className?: string;\n onValueCommit?: (value: number[]) => void;\n};\n\nexport const LeverageSlider: FC<LeverageSliderProps> = (props) => {\n return (\n <Box pt={3} width={\"100%\"} className={props.className}>\n <Slider\n // step={1.04}\n max={props.maxLeverage}\n // min={1}\n // markLabelVisible={true}\n // marks={props.marks}\n markCount={5}\n value={[props.value]}\n onValueChange={(e) => {\n console.log(\"onValueChange\");\n props.onLeverageChange(e[0]);\n props.setShowSliderTip(true);\n }}\n color=\"primary\"\n onValueCommit={(e) => {\n console.log(\"onValueCommit\");\n props.onValueCommit?.(e);\n props.setShowSliderTip(false);\n }}\n showTip={props.showSliderTip}\n tipFormatter={(value, min, max, percent) => {\n return `${Math.max(1, value)}x`;\n }}\n />\n <Flex justify={\"between\"} width={\"100%\"} pt={3}>\n {[1, 10, 20, 30, 40, 50].map((item, index) => {\n return (\n <button\n onClick={(e) => {\n props.onLeverageChange(item);\n props.onValueCommit?.([item]);\n }}\n className={cn(\n \" oui-text-2xs oui-pb-3\",\n index === 0\n ? \"oui-pr-2\"\n : index === 5\n ? \"oui-pl-0\"\n : \"oui-px-0 oui-ml-2\",\n props.value >= item && \"oui-text-primary-light\"\n )}\n data-testid={`oui-testid-leverage-${item}-btn`}\n >\n {`${item}x`}\n </button>\n );\n })}\n </Flex>\n </Box>\n );\n // return (\n // <Box pt={3} width={\"100%\"}>\n // <Slider\n // step={props.step}\n // markLabelVisible={true}\n // marks={props.marks}\n // value={[props.value]}\n // onValueChange={(e) => {\n // const value = props.marks?.[e[0] / 10]?.value;\n // if (typeof value !== \"undefined\") props.onLeverageChange(value);\n // }}\n // />\n // </Box>\n // );\n};\n","import { useLeverage, useMarginRatio } from \"@orderly.network/hooks\";\nimport { SliderMarks, toast } from \"@orderly.network/ui\";\nimport { useMemo, useState } from \"react\";\n\ntype UseLeverageScriptOptions = {\n close?: () => void;\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n\nexport const useLeverageScript = (options?: UseLeverageScriptOptions) => {\n const { currentLeverage } = useMarginRatio();\n const [showSliderTip, setShowSliderTip] = useState(false);\n\n const [curLeverage, { update, config: leverageLevers, isMutating }] =\n useLeverage();\n\n const marks = useMemo((): SliderMarks => {\n return (\n leverageLevers?.map((e: number) => ({\n label: `${e}x`,\n value: e,\n })) || []\n );\n }, [leverageLevers]);\n\n const [leverage, setLeverage] = useState(curLeverage ?? 0);\n\n const maxLeverage = leverageLevers?.reduce(\n (a: number, item: any) => Math.max(a, Number(item), 0),\n 0\n );\n\n const step = 100 / ((marks?.length || 0) - 1);\n\n // const leverageValue = useMemo(() => {\n // const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n // return index * step;\n // }, [leverageLevers, leverage, step]);\n\n const onLeverageChange = (leverage: number) => {\n // maxLeverage / 100 * leverage;\n setLeverage(leverage);\n // updateLeverage(leverage);\n };\n\n const onSave = async () => {\n try {\n update({ leverage }).then(\n (res: any) => {\n options?.close?.();\n toast.success(\"Leverage updated\");\n },\n (err: Error) => {\n toast.error(err.message);\n }\n );\n } catch (e) {}\n };\n\n return {\n currentLeverage,\n value: leverage,\n marks,\n onLeverageChange,\n step,\n onCancel: options?.close,\n onSave,\n isLoading: isMutating,\n showSliderTip,\n setShowSliderTip,\n maxLeverage,\n };\n};\n","import { FC } from \"react\";\nimport { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport type LeverageEditorProps = {\n close?: () => void;\n};\n\nexport const LeverageEditor: FC<LeverageEditorProps> = (props) => {\n const state = useLeverageScript({ close: props.close });\n return <Leverage {...state} />;\n};\n"]}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.oui-ml-2{margin-left:.5rem}.oui-mt-2{margin-top:.5rem}.oui-px-
|
|
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))}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orderly.network/ui-leverage",
|
|
3
|
-
"version": "2.0.1-
|
|
3
|
+
"version": "2.0.1-preview.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -15,25 +15,25 @@
|
|
|
15
15
|
"access": "public"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@orderly.network/
|
|
19
|
-
"@orderly.network/
|
|
20
|
-
"@orderly.network/ui": "2.0.1-
|
|
18
|
+
"@orderly.network/hooks": "2.0.1-preview.0",
|
|
19
|
+
"@orderly.network/types": "2.0.1-preview.0",
|
|
20
|
+
"@orderly.network/ui": "2.0.1-preview.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@swc/cli": "^0.3.12",
|
|
24
24
|
"@swc/core": "^1.4.12",
|
|
25
25
|
"@types/react": "^18.3.2",
|
|
26
26
|
"@types/react-dom": "^18.3.0",
|
|
27
|
-
"react": "^18.
|
|
27
|
+
"react": "^18.2.0",
|
|
28
28
|
"react-dom": "^18.2.0",
|
|
29
29
|
"tailwindcss": "^3.4.4",
|
|
30
30
|
"tsup": "^7.1.0",
|
|
31
31
|
"tsconfig": "0.3.17"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
|
-
"react": "
|
|
35
|
-
"react-dom": "
|
|
36
|
-
"@orderly.network/ui": "2.0.1-
|
|
34
|
+
"react": ">=18",
|
|
35
|
+
"react-dom": ">=18",
|
|
36
|
+
"@orderly.network/ui": "2.0.1-preview.0"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "tsup && pnpm run build:css",
|