@orderly.network/ui-leverage 2.5.1 → 2.5.2-alpha.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 +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
package/dist/index.d.mts
CHANGED
|
@@ -22,6 +22,7 @@ declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
|
|
|
22
22
|
onInputChange: react.ChangeEventHandler<HTMLInputElement>;
|
|
23
23
|
isReduceDisabled: boolean;
|
|
24
24
|
isIncreaseDisabled: boolean;
|
|
25
|
+
disabled: boolean;
|
|
25
26
|
step: number;
|
|
26
27
|
onCancel: (() => void) | undefined;
|
|
27
28
|
onSave: () => Promise<void>;
|
|
@@ -29,6 +30,7 @@ declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
|
|
|
29
30
|
showSliderTip: boolean;
|
|
30
31
|
setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
|
|
31
32
|
maxLeverage: number;
|
|
33
|
+
toggles: number[];
|
|
32
34
|
};
|
|
33
35
|
|
|
34
36
|
type LeverageProps = LeverageScriptReturns;
|
package/dist/index.d.ts
CHANGED
|
@@ -22,6 +22,7 @@ declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
|
|
|
22
22
|
onInputChange: react.ChangeEventHandler<HTMLInputElement>;
|
|
23
23
|
isReduceDisabled: boolean;
|
|
24
24
|
isIncreaseDisabled: boolean;
|
|
25
|
+
disabled: boolean;
|
|
25
26
|
step: number;
|
|
26
27
|
onCancel: (() => void) | undefined;
|
|
27
28
|
onSave: () => Promise<void>;
|
|
@@ -29,6 +30,7 @@ declare const useLeverageScript: (options?: UseLeverageScriptOptions) => {
|
|
|
29
30
|
showSliderTip: boolean;
|
|
30
31
|
setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
|
|
31
32
|
maxLeverage: number;
|
|
33
|
+
toggles: number[];
|
|
32
34
|
};
|
|
33
35
|
|
|
34
36
|
type LeverageProps = LeverageScriptReturns;
|
package/dist/index.js
CHANGED
|
@@ -2,22 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
var i18n = require('@orderly.network/i18n');
|
|
4
4
|
var ui = require('@orderly.network/ui');
|
|
5
|
-
var
|
|
5
|
+
var $ = require('react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var hooks = require('@orderly.network/hooks');
|
|
8
8
|
|
|
9
9
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var $__default = /*#__PURE__*/_interopDefault($);
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var 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")})},X=e=>{let r=$__default.default.useMemo(()=>[ui.inputFormatter.numberFormatter,ui.inputFormatter.dpFormatter(0)],[]),o=$.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})]})},L=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(X,{...e}),jsxRuntime.jsx(Y,{...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",disabled:e.disabled,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,dp:0,children:o??"--"})]})})},Y=e=>{let{value:r,onLeverageChange:o}=e;return jsxRuntime.jsx(ui.Flex,{itemAlign:"center",justify:"between",width:"100%",mt:2,children:e.toggles.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:d,showSliderTip:s}=e;return jsxRuntime.jsxs(ui.Box,{pt:4,width:"100%",className:n,children:[jsxRuntime.jsx(ui.Slider,{max:o,min:1,markCount:5,value:[d],onValueChange:a=>{e.onLeverageChange(a[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:a=>{e.onValueCommit?.(a),e.setShowSliderTip(false);},showTip:s,tipFormatter:a=>`${a}x`}),jsxRuntime.jsx(ui.Flex,{justify:"between",width:"100%",pt:3,children:r?.map((a,l)=>jsxRuntime.jsx("button",{onClick:()=>{e.onLeverageChange(a),e.onValueCommit?.([a]);},className:ui.cn("oui-pb-3 oui-text-2xs",l===0?"oui-pr-2":l===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}=i18n.useTranslation(),{curLeverage:d,maxLeverage:s,isLoading:a,leverageLevers:l,update:E}=hooks.useLeverage(),x=$.useMemo(()=>l.map(i=>({label:`${i}x`,value:i})),[l]),[c,v]=$.useState(d??0),T=100/((x?.length||0)-1),N=i=>{v(i);},V=()=>{v(i=>i+1);},H=()=>{v(i=>i-1);},W=$.useCallback(i=>{let S=Number.parseInt(i.target.value),j=Number.isNaN(S)?"":S;v(j);},[s]),M=async()=>{try{E({leverage:c}).then(()=>{e?.close?.(),ui.toast.success(n("leverage.updated"));},i=>{ui.toast.error(i.message);});}catch{}},A=c<=1,D=c>=s,B=!c||c<1||c>s,G=$.useMemo(()=>[5,10,20,50,100],[l,s]);return {leverageLevers:l,currentLeverage:d,value:c,marks:x,onLeverageChange:N,onLeverageIncrease:V,onLeverageReduce:H,onInputChange:W,isReduceDisabled:A,isIncreaseDisabled:D,disabled:B,step:T,onCancel:e?.close,onSave:M,isLoading:a,showSliderTip:r,setShowSliderTip:o,maxLeverage:s,toggles:G}};var p=e=>{let r=b({close:e.close});return jsxRuntime.jsx(L,{...r})};var ae="LeverageWidgetWithDialog",ie="LeverageWidgetWithSheet";ui.registerSimpleDialog(ae,p,{title:()=>i18n.i18n.t("leverage.maxAccountLeverage"),size:"md"});ui.registerSimpleSheet(ie,p,{title:()=>i18n.i18n.t("leverage.maxAccountLeverage")});
|
|
14
14
|
|
|
15
|
-
exports.Leverage =
|
|
15
|
+
exports.Leverage = L;
|
|
16
16
|
exports.LeverageEditor = p;
|
|
17
17
|
exports.LeverageHeader = F;
|
|
18
18
|
exports.LeverageSlider = w;
|
|
19
|
-
exports.LeverageWidgetWithDialogId =
|
|
20
|
-
exports.LeverageWidgetWithSheetId =
|
|
19
|
+
exports.LeverageWidgetWithDialogId = ae;
|
|
20
|
+
exports.LeverageWidgetWithSheetId = ie;
|
|
21
21
|
exports.useLeverageScript = b;
|
|
22
22
|
//# sourceMappingURL=out.js.map
|
|
23
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":["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"]}
|
|
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","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","onSave","err","isReduceDisabled","isIncreaseDisabled","toggles","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 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 () => [inputFormatter.numberFormatter, inputFormatter.dpFormatter(0)],\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 disabled={props.disabled}\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} dp={0}>\n {currentLeverage ?? \"--\"}\n </Text.numeral>\n </Flex>\n </Flex>\n );\n};\n\ninterface LeverageSelectorProps {\n value: number;\n onLeverageChange: (value: number) => void;\n toggles: number[];\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 {props.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);\n const value = Number.isNaN(parsed) ? \"\" : parsed;\n setLeverage(value as number);\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 (err) {\n console.log(\"update leverage error\", err);\n }\n };\n\n const isReduceDisabled = leverage <= 1;\n const isIncreaseDisabled = leverage >= maxLeverage;\n const disabled = !leverage || leverage < 1 || leverage > maxLeverage;\n\n const toggles = useMemo(() => {\n return [5, 10, 20, 50, 100];\n // TODO: filter by maxLeverage\n // return [5, 10, 20, 50, 100].filter((e) => e <= maxLeverage);\n }, [leverageLevers, maxLeverage]);\n\n return {\n leverageLevers,\n currentLeverage: curLeverage,\n value: leverage,\n marks,\n onLeverageChange,\n onLeverageIncrease,\n onLeverageReduce,\n onInputChange,\n isReduceDisabled,\n isIncreaseDisabled,\n disabled,\n step,\n onCancel: options?.close,\n onSave,\n isLoading: isLoading,\n showSliderTip,\n setShowSliderTip,\n maxLeverage,\n toggles,\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
1
|
import { i18n, useTranslation } from '@orderly.network/i18n';
|
|
2
2
|
import { registerSimpleDialog, registerSimpleSheet, Flex, Button, toast, Text, inputFormatter, cn, ReduceIcon, Input, PlusIcon, Box, Slider } from '@orderly.network/ui';
|
|
3
|
-
import
|
|
3
|
+
import $, { useState, useMemo, useCallback, useId } from 'react';
|
|
4
4
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
5
|
import { useLeverage } from '@orderly.network/hooks';
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var 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")})},X=e=>{let r=$.useMemo(()=>[inputFormatter.numberFormatter,inputFormatter.dpFormatter(0)],[]),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})]})},L=e=>{let{currentLeverage:r}=e,{t:o}=useTranslation();return jsxs(Flex,{itemAlign:"start",direction:"column",mb:0,children:[jsx(F,{currentLeverage:r}),jsx(X,{...e}),jsx(Y,{...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",disabled:e.disabled,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,dp:0,children:o??"--"})]})})},Y=e=>{let{value:r,onLeverageChange:o}=e;return jsx(Flex,{itemAlign:"center",justify:"between",width:"100%",mt:2,children:e.toggles.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:d,showSliderTip:s}=e;return jsxs(Box,{pt:4,width:"100%",className:n,children:[jsx(Slider,{max:o,min:1,markCount:5,value:[d],onValueChange:a=>{e.onLeverageChange(a[0]),e.setShowSliderTip(true);},color:"primary",onValueCommit:a=>{e.onValueCommit?.(a),e.setShowSliderTip(false);},showTip:s,tipFormatter:a=>`${a}x`}),jsx(Flex,{justify:"between",width:"100%",pt:3,children:r?.map((a,l)=>jsx("button",{onClick:()=>{e.onLeverageChange(a),e.onValueCommit?.([a]);},className:cn("oui-pb-3 oui-text-2xs",l===0?"oui-pr-2":l===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:d,maxLeverage:s,isLoading:a,leverageLevers:l,update:E}=useLeverage(),x=useMemo(()=>l.map(i=>({label:`${i}x`,value:i})),[l]),[c,v]=useState(d??0),T=100/((x?.length||0)-1),N=i=>{v(i);},V=()=>{v(i=>i+1);},H=()=>{v(i=>i-1);},W=useCallback(i=>{let S=Number.parseInt(i.target.value),j=Number.isNaN(S)?"":S;v(j);},[s]),M=async()=>{try{E({leverage:c}).then(()=>{e?.close?.(),toast.success(n("leverage.updated"));},i=>{toast.error(i.message);});}catch{}},A=c<=1,D=c>=s,B=!c||c<1||c>s,G=useMemo(()=>[5,10,20,50,100],[l,s]);return {leverageLevers:l,currentLeverage:d,value:c,marks:x,onLeverageChange:N,onLeverageIncrease:V,onLeverageReduce:H,onInputChange:W,isReduceDisabled:A,isIncreaseDisabled:D,disabled:B,step:T,onCancel:e?.close,onSave:M,isLoading:a,showSliderTip:r,setShowSliderTip:o,maxLeverage:s,toggles:G}};var p=e=>{let r=b({close:e.close});return jsx(L,{...r})};var ae="LeverageWidgetWithDialog",ie="LeverageWidgetWithSheet";registerSimpleDialog(ae,p,{title:()=>i18n.t("leverage.maxAccountLeverage"),size:"md"});registerSimpleSheet(ie,p,{title:()=>i18n.t("leverage.maxAccountLeverage")});
|
|
8
8
|
|
|
9
|
-
export {
|
|
9
|
+
export { L as Leverage, p as LeverageEditor, F as LeverageHeader, w as LeverageSlider, ae as LeverageWidgetWithDialogId, ie 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":["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"]}
|
|
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","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","onSave","err","isReduceDisabled","isIncreaseDisabled","toggles","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 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 () => [inputFormatter.numberFormatter, inputFormatter.dpFormatter(0)],\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 disabled={props.disabled}\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} dp={0}>\n {currentLeverage ?? \"--\"}\n </Text.numeral>\n </Flex>\n </Flex>\n );\n};\n\ninterface LeverageSelectorProps {\n value: number;\n onLeverageChange: (value: number) => void;\n toggles: number[];\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 {props.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);\n const value = Number.isNaN(parsed) ? \"\" : parsed;\n setLeverage(value as number);\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 (err) {\n console.log(\"update leverage error\", err);\n }\n };\n\n const isReduceDisabled = leverage <= 1;\n const isIncreaseDisabled = leverage >= maxLeverage;\n const disabled = !leverage || leverage < 1 || leverage > maxLeverage;\n\n const toggles = useMemo(() => {\n return [5, 10, 20, 50, 100];\n // TODO: filter by maxLeverage\n // return [5, 10, 20, 50, 100].filter((e) => e <= maxLeverage);\n }, [leverageLevers, maxLeverage]);\n\n return {\n leverageLevers,\n currentLeverage: curLeverage,\n value: leverage,\n marks,\n onLeverageChange,\n onLeverageIncrease,\n onLeverageReduce,\n onInputChange,\n isReduceDisabled,\n isIncreaseDisabled,\n disabled,\n step,\n onCancel: options?.close,\n onSave,\n isLoading: isLoading,\n showSliderTip,\n setShowSliderTip,\n maxLeverage,\n toggles,\n };\n};\n","import { FC } from \"react\";\nimport { Leverage } from \"./leverage.ui\";\nimport { useLeverageScript } from \"./leverage.script\";\n\nexport type LeverageEditorProps = {\n close?: () => void;\n};\n\nexport const LeverageEditor: FC<LeverageEditorProps> = (props) => {\n const state = useLeverageScript({ close: props.close });\n return <Leverage {...state} />;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orderly.network/ui-leverage",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.2-alpha.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.5.
|
|
19
|
-
"@orderly.network/hooks": "2.5.
|
|
20
|
-
"@orderly.network/types": "2.5.
|
|
21
|
-
"@orderly.network/ui": "2.5.
|
|
18
|
+
"@orderly.network/i18n": "2.5.2-alpha.0",
|
|
19
|
+
"@orderly.network/hooks": "2.5.2-alpha.0",
|
|
20
|
+
"@orderly.network/types": "2.5.2-alpha.0",
|
|
21
|
+
"@orderly.network/ui": "2.5.2-alpha.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.8.
|
|
32
|
+
"tsconfig": "0.8.2-alpha.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=18",
|