LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(deal-ticket): change min and max leverage (#5998)

Browse Source
This commit is contained in:
Bartłomiej Głownia 2024-03-14 17:09:32 +01:00 committed by GitHub
parent 0dd58b68cf
commit 0636d19b0d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
libs/deal-ticket/src/components/deal-ticket/margin-mode-selector.tsx
View File

@ -255,6 +255,7 @@ const IsolatedMarginModeDialog = ({
); );
const { data: maxLeverage } = useMaxLeverage(marketId, partyId); const { data: maxLeverage } = useMaxLeverage(marketId, partyId);
const max = Math.floor((maxLeverage || 1) * 10) / 10; const max = Math.floor((maxLeverage || 1) * 10) / 10;
const min = 0.1;
useEffect(() => { useEffect(() => {
setLeverage(Number((1 / Number(marginFactor)).toFixed(1))); setLeverage(Number((1 / Number(marginFactor)).toFixed(1)));
}, [marginFactor]); }, [marginFactor]);
@ -309,6 +310,7 @@ const IsolatedMarginModeDialog = ({
<div className="mb-2"> <div className="mb-2">
<LeverageSlider <LeverageSlider
max={max} max={max}
min={min}
step={0.1} step={0.1}
value={[leverage || 1]} value={[leverage || 1]}
onValueChange={([value]) => setLeverage(value)} onValueChange={([value]) => setLeverage(value)}
@ -317,7 +319,7 @@ const IsolatedMarginModeDialog = ({
<Input <Input
type="number" type="number"
id="leverage-input" id="leverage-input"
min={1} min={min}
max={max} max={max}
step={0.1} step={0.1}
value={leverage || ''} value={leverage || ''}

2
libs/positions/src/lib/positions-data-providers.ts
View File

@ -404,7 +404,7 @@ const getMaxLeverage = (market: MarketInfo | null) => {
(Math.max( (Math.max(
Number(market.riskFactors.long), Number(market.riskFactors.long),
Number(market.riskFactors.short) Number(market.riskFactors.short)
) || 1); ) + Number(market.linearSlippageFactor) || 1);
return maxLeverage; return maxLeverage;
}; };

15
libs/ui-toolkit/src/components/slider/leverage-slider.tsx
View File

@ -3,17 +3,16 @@ import type { SliderProps } from '@radix-ui/react-slider';
import classNames from 'classnames'; import classNames from 'classnames';
export const LeverageSlider = ( export const LeverageSlider = (
props: Omit<SliderProps, 'min' | 'max'> & Required<Pick<SliderProps, 'max'>> props: Omit<SliderProps, 'min' | 'max'> &
Required<Pick<SliderProps, 'max' | 'min'>>
) => { ) => {
const step = [2, 5, 10, 20, 25, 50, 100].find( const step = [0.1, 0.2, 0.5, 2, 5, 10, 20, 25, 50, 100].find(
(step) => props.max / step <= 6 (step) => props.max / step <= 6
); );
const min = 1;
const value = props.value?.[0] || props.defaultValue?.[0]; const value = props.value?.[0] || props.defaultValue?.[0];
return ( return (
<SliderPrimitive.Root <SliderPrimitive.Root
{...props} {...props}
min={min}
className="relative flex items-center select-none touch-none h-10 pb-5 w-full" className="relative flex items-center select-none touch-none h-10 pb-5 w-full"
> >
<SliderPrimitive.Track className=" relative grow h-[4px]"> <SliderPrimitive.Track className=" relative grow h-[4px]">
@ -28,13 +27,17 @@ export const LeverageSlider = (
.map((v, i) => { .map((v, i) => {
const labelValue = step * i || 1; const labelValue = step * i || 1;
const higherThanValue = value && labelValue > value; const higherThanValue = value && labelValue > value;
if (labelValue > props.max) {
return null;
}
return ( return (
<span <span
key={labelValue} key={labelValue}
className="absolute flex flex-col items-center translate-x-[-50%]" className="absolute flex flex-col items-center translate-x-[-50%]"
style={{ style={{
left: `${ left: `${
((labelValue - min) / (props.max - min)) * 100 ((labelValue - props.min) / (props.max - props.min)) *
100
}%`, }%`,
}} }}
> >
@ -50,7 +53,7 @@ export const LeverageSlider = (
)} )}
></span> ></span>
<span className="text-xs font-alpha mt-1 text-vega-clight-100 dark:text-vega-cdark-100 "> <span className="text-xs font-alpha mt-1 text-vega-clight-100 dark:text-vega-cdark-100 ">
{labelValue}x {labelValue.toFixed(labelValue < 1 ? 1 : 0)}x
</span> </span>
</span> </span>
); );