@orderly.network/ui-leverage 2.0.0-alpha.1
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 +22 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.js +14 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +10 -0
- package/dist/index.mjs.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +43 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { SliderMarks } from '@orderly.network/ui';
|
|
3
|
+
|
|
4
|
+
declare const LeverageEditor: () => react_jsx_runtime.JSX.Element;
|
|
5
|
+
|
|
6
|
+
declare const useLeverageScript: () => {
|
|
7
|
+
currentLeverage: number;
|
|
8
|
+
value: number;
|
|
9
|
+
marks: SliderMarks;
|
|
10
|
+
onLeverageChange: (leverage: number) => void;
|
|
11
|
+
step: number;
|
|
12
|
+
onCancel: () => Promise<unknown>;
|
|
13
|
+
onSave: () => Promise<void>;
|
|
14
|
+
isLoading: any;
|
|
15
|
+
};
|
|
16
|
+
type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
|
|
17
|
+
|
|
18
|
+
declare const Leverage: (props: LeverageScriptReturns) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
declare const LeverageWidgetId = "leverageEditor";
|
|
21
|
+
|
|
22
|
+
export { Leverage, LeverageEditor, LeverageWidgetId };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { SliderMarks } from '@orderly.network/ui';
|
|
3
|
+
|
|
4
|
+
declare const LeverageEditor: () => react_jsx_runtime.JSX.Element;
|
|
5
|
+
|
|
6
|
+
declare const useLeverageScript: () => {
|
|
7
|
+
currentLeverage: number;
|
|
8
|
+
value: number;
|
|
9
|
+
marks: SliderMarks;
|
|
10
|
+
onLeverageChange: (leverage: number) => void;
|
|
11
|
+
step: number;
|
|
12
|
+
onCancel: () => Promise<unknown>;
|
|
13
|
+
onSave: () => Promise<void>;
|
|
14
|
+
isLoading: any;
|
|
15
|
+
};
|
|
16
|
+
type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;
|
|
17
|
+
|
|
18
|
+
declare const Leverage: (props: LeverageScriptReturns) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
declare const LeverageWidgetId = "leverageEditor";
|
|
21
|
+
|
|
22
|
+
export { Leverage, LeverageEditor, LeverageWidgetId };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ui = require('@orderly.network/ui');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var hooks = require('@orderly.network/hooks');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
|
|
8
|
+
var g=e=>{let{currentLeverage:a=0}=e;return jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxRuntime.jsxs(ui.Flex,{justify:"between",width:"100%",children:[jsxRuntime.jsx(ui.Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:"Max account leverage"}),jsxRuntime.jsxs(ui.Flex,{direction:"row",gap:1,children:[jsxRuntime.jsx(ui.Text,{size:"sm",intensity:54,children:"Current:"}),jsxRuntime.jsx(ui.Text.numeral,{unit:"x",size:"sm",intensity:80,children:a})]})]}),jsxRuntime.jsx(w,{...e}),jsxRuntime.jsxs(ui.Flex,{direction:"row",gap:2,width:"100%",mt:8,pt:5,children:[jsxRuntime.jsx(ui.Button,{variant:"contained",color:"gray",fullWidth:!0,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",children:"Cancel"}),jsxRuntime.jsx(ui.Button,{fullWidth:!0,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},w=e=>jsxRuntime.jsx(ui.Box,{pt:3,width:"100%",children:jsxRuntime.jsx(ui.Slider,{step:e.step,markLabelVisible:!0,marks:e.marks,value:[e.value],onValueChange:a=>{let n=e.marks?.[a[0]/10]?.value;typeof n<"u"&&e.onLeverageChange(n);}})});var p=()=>{let{currentLeverage:e}=hooks.useMarginRatio(),{hide:a}=ui.useModal(),[n,{update:f,config:o,isMutating:S}]=hooks.useLeverage(),y=t=>{b(t);},[l,b]=react.useState(n??0),m=react.useMemo(()=>o?.map(t=>({label:`${t}x`,value:t}))||[],[o]),c=100/((m?.length||0)-1),h=react.useMemo(()=>o.findIndex(C=>C===l)*c,[o,l,c]);return {currentLeverage:e,value:h,marks:m,onLeverageChange:y,step:c,onCancel:()=>a(),onSave:async()=>{try{f({leverage:l}).then(t=>{a(),ui.toast.success("Leverage updated");},t=>{ui.toast.error(t.message);});}catch{}},isLoading:S}};var v=()=>{let e=p();return jsxRuntime.jsx(g,{...e})};var D="leverageEditor";ui.registerSimpleDialog(D,v,{title:"Max account leverage",size:"md"});
|
|
9
|
+
|
|
10
|
+
exports.Leverage = g;
|
|
11
|
+
exports.LeverageEditor = v;
|
|
12
|
+
exports.LeverageWidgetId = D;
|
|
13
|
+
//# sourceMappingURL=out.js.map
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","jsx","jsxs","Leverage","props","currentLeverage","LeverageSlider","e","value","useLeverage","useMarginRatio","toast","useModal","useMemo","useState","useLeverageScript","hide","maxLeverage","update","leverageLevers","isMutating","onLeverageChange","leverage","setLeverage","marks","step","leverageValue","item","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nconst LeverageWidgetId = \"leverageEditor\";\n\nexport { LeverageEditor } from \"./leverage.widget\";\nexport { Leverage } from \"./leverage.ui\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n title: \"Max account leverage\",\n size: \"md\",\n});\n\nexport { LeverageWidgetId };\n","import {\n Box,\n CloseIcon,\n Button,\n Flex,\n Slider,\n Text,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport const Leverage = (props: LeverageScriptReturns) => {\n const { currentLeverage = 0 } = props;\n return (\n <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n <Flex justify={\"between\"} width={\"100%\"}>\n <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n Max account leverage\n </Text>\n <Flex direction={\"row\"} gap={1}>\n <Text size={\"sm\"} intensity={54}>\n Current:\n </Text>\n <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n {currentLeverage}\n </Text.numeral>\n </Flex>\n </Flex>\n\n <LeverageSlider {...props} />\n <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={8} pt={5}>\n <Button\n variant=\"contained\"\n color=\"gray\"\n fullWidth\n onClick={props.onCancel}\n data-testid=\"oui-testid-leverage-cancel-btn\"\n >\n Cancel\n </Button>\n <Button\n fullWidth\n loading={props.isLoading}\n onClick={props.onSave}\n data-testid=\"oui-testid-leverage-save-btn\"\n >\n Save\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nconst LeverageSlider = (props: LeverageScriptReturns) => {\n return (\n <Box pt={3} width={\"100%\"}>\n <Slider\n step={props.step}\n markLabelVisible={true}\n marks={props.marks}\n value={[props.value]}\n onValueChange={(e) => {\n const value = props.marks?.[e[0] / 10]?.value;\n if (typeof value !== \"undefined\") props.onLeverageChange(value);\n }}\n />\n </Box>\n );\n};\n","import {\n useDebounce,\n useDebouncedCallback,\n useLeverage,\n useMarginRatio,\n} from \"@orderly.network/hooks\";\nimport { SliderMarks, toast, useModal } from \"@orderly.network/ui\";\nimport { log } from \"console\";\nimport { useMemo, useState } from \"react\";\n\nexport const useLeverageScript = () => {\n const { currentLeverage } = useMarginRatio();\n\n const { hide } = useModal();\n\n const [maxLeverage, { update, config: leverageLevers, isMutating }] =\n useLeverage();\n const onLeverageChange = (leverage: number) => {\n setLeverage(leverage);\n // updateLeverage(leverage);\n };\n const [leverage, setLeverage] = useState(maxLeverage ?? 0);\n\n const marks = useMemo((): SliderMarks => {\n return (\n leverageLevers?.map((e: number) => ({\n label: `${e}x`,\n value: e,\n })) || []\n );\n }, [leverageLevers]);\n\n const step = 100 / ((marks?.length || 0) - 1);\n\n const leverageValue = useMemo(() => {\n const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n return index * step;\n }, [leverageLevers, leverage, step]);\n\n const onCancel = () => hide();\n const onSave = async () => {\n try {\n update({ leverage }).then(\n (res: any) => {\n hide();\n toast.success(\"Leverage updated\");\n },\n (err: Error) => {\n toast.error(err.message);\n }\n );\n } catch (e) {}\n };\n\n return {\n currentLeverage,\n value: leverageValue,\n marks,\n onLeverageChange,\n step,\n onCancel,\n onSave,\n isLoading: isMutating,\n };\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n","import { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport const LeverageEditor = () => {\n const state = useLeverageScript();\n return <Leverage {...state} />;\n};\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { registerSimpleDialog, Flex, Text, Button, Box, Slider, useModal, toast } from '@orderly.network/ui';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useMarginRatio, useLeverage } from '@orderly.network/hooks';
|
|
4
|
+
import { useState, useMemo } from 'react';
|
|
5
|
+
|
|
6
|
+
var g=e=>{let{currentLeverage:a=0}=e;return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsxs(Flex,{justify:"between",width:"100%",children:[jsx(Text,{as:"div",size:"sm",intensity:54,className:"oui-mt-2",children:"Max account leverage"}),jsxs(Flex,{direction:"row",gap:1,children:[jsx(Text,{size:"sm",intensity:54,children:"Current:"}),jsx(Text.numeral,{unit:"x",size:"sm",intensity:80,children:a})]})]}),jsx(w,{...e}),jsxs(Flex,{direction:"row",gap:2,width:"100%",mt:8,pt:5,children:[jsx(Button,{variant:"contained",color:"gray",fullWidth:!0,onClick:e.onCancel,"data-testid":"oui-testid-leverage-cancel-btn",children:"Cancel"}),jsx(Button,{fullWidth:!0,loading:e.isLoading,onClick:e.onSave,"data-testid":"oui-testid-leverage-save-btn",children:"Save"})]})]})},w=e=>jsx(Box,{pt:3,width:"100%",children:jsx(Slider,{step:e.step,markLabelVisible:!0,marks:e.marks,value:[e.value],onValueChange:a=>{let n=e.marks?.[a[0]/10]?.value;typeof n<"u"&&e.onLeverageChange(n);}})});var p=()=>{let{currentLeverage:e}=useMarginRatio(),{hide:a}=useModal(),[n,{update:f,config:o,isMutating:S}]=useLeverage(),y=t=>{b(t);},[l,b]=useState(n??0),m=useMemo(()=>o?.map(t=>({label:`${t}x`,value:t}))||[],[o]),c=100/((m?.length||0)-1),h=useMemo(()=>o.findIndex(C=>C===l)*c,[o,l,c]);return {currentLeverage:e,value:h,marks:m,onLeverageChange:y,step:c,onCancel:()=>a(),onSave:async()=>{try{f({leverage:l}).then(t=>{a(),toast.success("Leverage updated");},t=>{toast.error(t.message);});}catch{}},isLoading:S}};var v=()=>{let e=p();return jsx(g,{...e})};var D="leverageEditor";registerSimpleDialog(D,v,{title:"Max account leverage",size:"md"});
|
|
7
|
+
|
|
8
|
+
export { g as Leverage, v as LeverageEditor, D as LeverageWidgetId };
|
|
9
|
+
//# sourceMappingURL=out.js.map
|
|
10
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/leverage.ui.tsx","../src/leverage.script.ts","../src/leverage.widget.tsx"],"names":["registerSimpleDialog","Box","Button","Flex","Slider","Text","jsx","jsxs","Leverage","props","currentLeverage","LeverageSlider","e","value","useLeverage","useMarginRatio","toast","useModal","useMemo","useState","useLeverageScript","hide","maxLeverage","update","leverageLevers","isMutating","onLeverageChange","leverage","setLeverage","marks","step","leverageValue","item","res","err","LeverageEditor","state","LeverageWidgetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { LeverageEditor } from \"./leverage.widget\";\n\nconst LeverageWidgetId = \"leverageEditor\";\n\nexport { LeverageEditor } from \"./leverage.widget\";\nexport { Leverage } from \"./leverage.ui\";\n\nregisterSimpleDialog(LeverageWidgetId, LeverageEditor, {\n title: \"Max account leverage\",\n size: \"md\",\n});\n\nexport { LeverageWidgetId };\n","import {\n Box,\n CloseIcon,\n Button,\n Flex,\n Slider,\n Text,\n} from \"@orderly.network/ui\";\nimport { LeverageScriptReturns } from \"./leverage.script\";\n\nexport const Leverage = (props: LeverageScriptReturns) => {\n const { currentLeverage = 0 } = props;\n return (\n <Flex itemAlign={\"start\"} direction={\"column\"} mb={0}>\n <Flex justify={\"between\"} width={\"100%\"}>\n <Text as=\"div\" size={\"sm\"} intensity={54} className=\"oui-mt-2\">\n Max account leverage\n </Text>\n <Flex direction={\"row\"} gap={1}>\n <Text size={\"sm\"} intensity={54}>\n Current:\n </Text>\n <Text.numeral unit=\"x\" size={\"sm\"} intensity={80}>\n {currentLeverage}\n </Text.numeral>\n </Flex>\n </Flex>\n\n <LeverageSlider {...props} />\n <Flex direction={\"row\"} gap={2} width={\"100%\"} mt={8} pt={5}>\n <Button\n variant=\"contained\"\n color=\"gray\"\n fullWidth\n onClick={props.onCancel}\n data-testid=\"oui-testid-leverage-cancel-btn\"\n >\n Cancel\n </Button>\n <Button\n fullWidth\n loading={props.isLoading}\n onClick={props.onSave}\n data-testid=\"oui-testid-leverage-save-btn\"\n >\n Save\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nconst LeverageSlider = (props: LeverageScriptReturns) => {\n return (\n <Box pt={3} width={\"100%\"}>\n <Slider\n step={props.step}\n markLabelVisible={true}\n marks={props.marks}\n value={[props.value]}\n onValueChange={(e) => {\n const value = props.marks?.[e[0] / 10]?.value;\n if (typeof value !== \"undefined\") props.onLeverageChange(value);\n }}\n />\n </Box>\n );\n};\n","import {\n useDebounce,\n useDebouncedCallback,\n useLeverage,\n useMarginRatio,\n} from \"@orderly.network/hooks\";\nimport { SliderMarks, toast, useModal } from \"@orderly.network/ui\";\nimport { log } from \"console\";\nimport { useMemo, useState } from \"react\";\n\nexport const useLeverageScript = () => {\n const { currentLeverage } = useMarginRatio();\n\n const { hide } = useModal();\n\n const [maxLeverage, { update, config: leverageLevers, isMutating }] =\n useLeverage();\n const onLeverageChange = (leverage: number) => {\n setLeverage(leverage);\n // updateLeverage(leverage);\n };\n const [leverage, setLeverage] = useState(maxLeverage ?? 0);\n\n const marks = useMemo((): SliderMarks => {\n return (\n leverageLevers?.map((e: number) => ({\n label: `${e}x`,\n value: e,\n })) || []\n );\n }, [leverageLevers]);\n\n const step = 100 / ((marks?.length || 0) - 1);\n\n const leverageValue = useMemo(() => {\n const index = leverageLevers.findIndex((item: any) => item === leverage);\n\n return index * step;\n }, [leverageLevers, leverage, step]);\n\n const onCancel = () => hide();\n const onSave = async () => {\n try {\n update({ leverage }).then(\n (res: any) => {\n hide();\n toast.success(\"Leverage updated\");\n },\n (err: Error) => {\n toast.error(err.message);\n }\n );\n } catch (e) {}\n };\n\n return {\n currentLeverage,\n value: leverageValue,\n marks,\n onLeverageChange,\n step,\n onCancel,\n onSave,\n isLoading: isMutating,\n };\n};\n\nexport type LeverageScriptReturns = ReturnType<typeof useLeverageScript>;\n","import { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport const LeverageEditor = () => {\n const state = useLeverageScript();\n return <Leverage {...state} />;\n};\n"]}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.oui-mt-2{margin-top:.5rem}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@orderly.network/ui-leverage",
|
|
3
|
+
"version": "2.0.0-alpha.1",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"Orderly",
|
|
9
|
+
"Leverage"
|
|
10
|
+
],
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"publishConfig": {
|
|
15
|
+
"access": "public"
|
|
16
|
+
},
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"@orderly.network/hooks": "2.0.0-alpha.1",
|
|
19
|
+
"@orderly.network/types": "2.0.0-alpha.1",
|
|
20
|
+
"@orderly.network/ui": "2.0.0-alpha.1"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"@swc/cli": "^0.3.12",
|
|
24
|
+
"@swc/core": "^1.4.12",
|
|
25
|
+
"@types/react": "^18.3.2",
|
|
26
|
+
"@types/react-dom": "^18.3.0",
|
|
27
|
+
"react": "^18.3.1",
|
|
28
|
+
"react-dom": "^18.2.0",
|
|
29
|
+
"tailwindcss": "^3.4.4",
|
|
30
|
+
"tsup": "^7.1.0",
|
|
31
|
+
"tsconfig": "0.3.12"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": "^18.3.1",
|
|
35
|
+
"react-dom": "^18.2.0",
|
|
36
|
+
"@orderly.network/ui": "2.0.0-alpha.1"
|
|
37
|
+
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "tsup && pnpm run build:css",
|
|
40
|
+
"build:css": "tailwindcss build -i src/tailwind.css -o dist/styles.css --minify",
|
|
41
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
42
|
+
}
|
|
43
|
+
}
|