v5.2.1

v5.2.1

hooks/useFuturesData.ts

@@ -25,15 +25,14 @@ import { KWENTA_TRACKING_CODE, ORDER_PREVIEW_ERRORS } from 'queries/futures/cons
 import { PositionSide, FuturesTradeInputs, FuturesAccountType } from 'queries/futures/types';
 import useGetFuturesPotentialTradeDetails from 'queries/futures/useGetFuturesPotentialTradeDetails';
 import { setFuturesAccountType, setOrderType as setReduxOrderType } from 'state/futures/reducer';
-import { selectMarketAssetRate } from 'state/futures/selectors';
+import { selectMarketAssetRate, selectMaxLeverage } from 'state/futures/selectors';
 import { selectMarketAsset, selectMarketInfo } from 'state/futures/selectors';
 import { useAppSelector, useAppDispatch } from 'state/hooks';
 import {
  crossMarginMarginDeltaState,
  tradeFeesState,
  futuresAccountState,
  leverageSideState,
- maxLeverageState,
  orderTypeState,
  positionState,
  futuresTradeInputsState,
@@ -99,7 +98,7 @@ const useFuturesData = () => {
  const feeCap = useRecoilValue(orderFeeCapState);
  const position = useRecoilValue(positionState);
  const aboveMaxLeverage = useRecoilValue(aboveMaxLeverageState);
- const maxLeverage = useRecoilValue(maxLeverageState);
+ const maxLeverage = useAppSelector(selectMaxLeverage);
  const { crossMarginAvailable, crossMarginAddress } = useRecoilValue(futuresAccountState);
  const { tradeFee: crossMarginTradeFee, stopOrderFee, limitOrderFee } = useRecoilValue(
  crossMarginSettingsState

sections/futures/LeverageInput/LeverageInput.tsx

@@ -7,11 +7,10 @@ import Button from 'components/Button';
 import CustomNumericInput from 'components/Input/CustomNumericInput';
 import { DEFAULT_FIAT_DECIMALS } from 'constants/defaults';
 import { useFuturesContext } from 'contexts/FuturesContext';
-import { selectMarketInfo } from 'state/futures/selectors';
+import { selectMarketInfo, selectMaxLeverage } from 'state/futures/selectors';
 import { useAppSelector } from 'state/hooks';
 import {
  leverageValueCommittedState,
- maxLeverageState,
  nextPriceDisclaimerState,
  orderTypeState,
  positionState,
@@ -26,13 +25,13 @@ const LeverageInput: FC = () => {
  const { t } = useTranslation();
  const [mode, setMode] = useState<'slider' | 'input'>('input');
  const { leverage } = useRecoilValue(futuresTradeInputsState);
- const maxLeverage = useRecoilValue(maxLeverageState);
  const orderType = useRecoilValue(orderTypeState);
  const isDisclaimerDisplayed = useRecoilValue(nextPriceDisclaimerState);
  const setIsLeverageValueCommitted = useSetRecoilState(leverageValueCommittedState);
  const position = useRecoilValue(positionState);
 
  const marketInfo = useAppSelector(selectMarketInfo);
+ const maxLeverage = useAppSelector(selectMaxLeverage);
 
  const { onLeverageChange } = useFuturesContext();
 

sections/futures/MarketInfoBox/MarketInfoBox.tsx

@@ -6,11 +6,10 @@ import styled from 'styled-components';
 import InfoBox from 'components/InfoBox';
 import PreviewArrow from 'components/PreviewArrow';
 import { FuturesPotentialTradeDetails } from 'queries/futures/types';
-import { selectMarketInfo } from 'state/futures/selectors';
+import { selectMarketInfo, selectMaxLeverage } from 'state/futures/selectors';
 import { useAppSelector } from 'state/hooks';
 import {
  leverageSideState,
- maxLeverageState,
  orderTypeState,
  positionState,
  potentialTradeDetailsState,
@@ -22,14 +21,14 @@ import { formatDollars, formatPercent, zeroBN } from 'utils/formatters/number';
 import { PositionSide } from '../types';
 
 const MarketInfoBox: React.FC = () => {
- const maxLeverage = useRecoilValue(maxLeverageState);
  const position = useRecoilValue(positionState);
  const orderType = useRecoilValue(orderTypeState);
  const leverageSide = useRecoilValue(leverageSideState);
  const { nativeSize } = useRecoilValue(futuresTradeInputsState);
  const potentialTrade = useRecoilValue(potentialTradeDetailsState);
 
  const marketInfo = useAppSelector(selectMarketInfo);
+ const maxLeverage = useAppSelector(selectMaxLeverage);
 
  const totalMargin = position?.remainingMargin ?? zeroBN;
  const availableMargin = position?.accessibleMargin ?? zeroBN;

sections/futures/OrderSizing/OrderSizeSlider.tsx

@@ -7,12 +7,13 @@ import styled from 'styled-components';
 import ErrorView from 'components/Error';
 import StyledSlider from 'components/Slider/StyledSlider';
 import { useFuturesContext } from 'contexts/FuturesContext';
+import { selectMaxLeverage } from 'state/futures/selectors';
+import { useAppSelector } from 'state/hooks';
 import {
  aboveMaxLeverageState,
  crossMarginAccountOverviewState,
  futuresTradeInputsState,
  leverageSideState,
- maxLeverageState,
  positionState,
 } from 'store/futures';
 import { FlexDivRow } from 'styles/common';
@@ -24,13 +25,15 @@ export default function OrderSizeSlider() {
  const { freeMargin: freeCrossMargin } = useRecoilValue(crossMarginAccountOverviewState);
  const { susdSize } = useRecoilValue(futuresTradeInputsState);
  const aboveMaxLeverage = useRecoilValue(aboveMaxLeverageState);
- const maxLeverage = useRecoilValue(maxLeverageState);
+
  const position = useRecoilValue(positionState);
  const leverageSide = useRecoilValue(leverageSideState);
 
  const [percent, setPercent] = useState(0);
  const [usdValue, setUsdValue] = useState(susdSize);
 
+ const maxLeverage = useAppSelector(selectMaxLeverage);
+
  // eslint-disable-next-line
  const onChangeMarginPercent = useCallback(
  (value, commit = false) => {

sections/futures/Trade/ManagePosition.tsx

@@ -15,12 +15,12 @@ import {
  selectIsMarketCapReached,
  selectMarketAssetRate,
  selectPlaceOrderTranslationKey,
+ selectMaxLeverage,
 } from 'state/futures/selectors';
 import { useAppDispatch, useAppSelector } from 'state/hooks';
 import {
  confirmationModalOpenState,
  leverageSideState,
- maxLeverageState,
  orderTypeState,
  positionState,
  potentialTradeDetailsState,
@@ -57,7 +57,6 @@ const ManagePosition: React.FC = () => {
  const sizeDelta = useRecoilValue(sizeDeltaState);
  const marginDelta = useRecoilValue(crossMarginMarginDeltaState);
  const position = useRecoilValue(positionState);
- const maxLeverageValue = useRecoilValue(maxLeverageState);
  const selectedAccountType = useRecoilValue(futuresAccountTypeState);
  const { data: previewTrade, error: previewError, status } = useRecoilValue(
  potentialTradeDetailsState
@@ -77,6 +76,7 @@ const ManagePosition: React.FC = () => {
  const isAdvancedOrder = useRecoilValue(isAdvancedOrderState);
 
  const marketInfo = useAppSelector(selectMarketInfo);
+ const maxLeverageValue = useAppSelector(selectMaxLeverage);
 
  const [isCancelModalOpen, setCancelModalOpen] = React.useState(false);
 

state/futures/selectors.ts

@@ -1,6 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { wei } from '@synthetixio/wei';
 
+import { DEFAULT_NP_LEVERAGE_ADJUSTMENT } from 'constants/defaults';
+import { DEFAULT_MAX_LEVERAGE } from 'constants/futures';
 import { FuturesPosition } from 'queries/futures/types';
 import { PositionSide } from 'sections/futures/types';
 import { selectExchangeRates } from 'state/exchange/selectors';
@@ -117,6 +119,33 @@ export const selectPosition = createSelector(
  }
 );
 
+export const selectMaxLeverage = createSelector(
+ (state: RootState) => state.futures,
+ selectPosition,
+ selectMarketInfo,
+ (futures, position, market) => {
+ const selectedAccountType = accountType(futures.selectedType);
+ const leverageSide = futures[selectedAccountType].leverageSide;
+ const orderType = futures[selectedAccountType].orderType;
+
+ const positionLeverage = position?.position?.leverage ?? wei(0);
+ const positionSide = position?.position?.side;
+ const marketMaxLeverage = market?.maxLeverage ?? DEFAULT_MAX_LEVERAGE;
+ const adjustedMaxLeverage =
+ orderType === 'next price'
+ ? marketMaxLeverage.mul(DEFAULT_NP_LEVERAGE_ADJUSTMENT)
+ : marketMaxLeverage;
+
+ if (!positionLeverage || positionLeverage.eq(wei(0))) return adjustedMaxLeverage;
+ if (selectedAccountType === 'crossMargin') return adjustedMaxLeverage;
+ if (positionSide === leverageSide) {
+ return adjustedMaxLeverage?.sub(positionLeverage);
+ } else {
+ return positionLeverage.add(adjustedMaxLeverage);
+ }
+ }
+);
+
 export const selectPlaceOrderTranslationKey = createSelector(
  selectPosition,
  (state: RootState) => state.futures[accountType(state.futures.selectedType)].orderType,