fix refactor bugs(Kwenta#1749)

* Fix edit leverage modal and dynamic fee updates

* Set leverage per asset

* Improve error messaging

* Clear candle polling interval

Co-authored-by: platschi <[email protected]>

Author: avclarke

components/TVChart/TVChart.tsx

@@ -292,6 +292,9 @@ export function TVChart({
 	}, [marketAsset]);
 
 	const onSubscribe = useCallback((newIntervalId: number) => {
+		if (_intervalId.current) {
+			clearInterval(_intervalId.current);
+		}
 		_intervalId.current = newIntervalId;
 	}, []);
 

hooks/useFuturesData.ts

@@ -313,6 +313,8 @@ const useFuturesData = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dispatch, router.query.accountType]);
 
+	const priceString = marketAssetRate.toString();
+
 	useEffect(() => {
 		const getDynamicFee = async () => {
 			if (!synthetixjs) return;
@@ -324,7 +326,7 @@ const useFuturesData = () => {
 			dispatch(setDynamicFeeRateRedux(wei(dynamicFeeRate.feeRate).toString()));
 		};
 		getDynamicFee();
-	}, [marketAsset, synthetixjs, dispatch]);
+	}, [marketAsset, priceString, synthetixjs, dispatch]);
 
 	return {
 		submitCrossMarginOrder,

queries/futures/constants.ts

@@ -54,6 +54,8 @@ export const ORDER_PREVIEW_ERRORS = { insufficient_margin: 'Insufficient free ma
 export const ORDER_PREVIEW_ERRORS_I18N: Record<string, string> = {
 	insufficient_margin: 'futures.market.trade.preview.insufficient-margin',
 	insufficient_margin_edit_leverage: 'futures.market.trade.edit-leverage.insufficient-margin',
+	insufficient_free_margin_edit_leverage:
+		'futures.market.trade.edit-leverage.insufficient-free-margin',
 };
 
 export const previewErrorI18n = (message: string) => {

sdk/types/futures.ts

@@ -212,6 +212,7 @@ export type FuturesPotentialTradeDetails<T = Wei> = {
 
 // https://github.com/Synthetixio/synthetix/blob/4d2add4f74c68ac4f1106f6e7be4c31d4f1ccc76/contracts/interfaces/IFuturesMarketBaseTypes.sol#L6-L19
 export enum PotentialTradeStatus {
+	// Contract status mapping
 	OK = 0,
 	INVALID_PRICE = 1,
 	PRICE_OUT_OF_BOUNDS = 2,
@@ -224,6 +225,9 @@ export enum PotentialTradeStatus {
 	NIL_ORDER = 9,
 	NO_POSITION_OPEN = 10,
 	PRICE_TOO_VOLATILE = 11,
+
+	// Our own local status
+	INSUFFICIENT_FREE_MARGIN = 100,
 }
 
 export type PostTradeDetailsResponse = {

sdk/utils/futures.ts

@@ -272,6 +272,7 @@ export const POTENTIAL_TRADE_STATUS_TO_MESSAGE: { [key: string]: string } = {
 	NIL_ORDER: 'Cannot submit empty order',
 	NO_POSITION_OPEN: 'No position open',
 	PRICE_TOO_VOLATILE: 'Price too volatile',
+	INSUFFICIENT_FREE_MARGIN: 'Insufficient free margin',
 };
 
 export const calculateCrossMarginFee = (

sections/futures/TradeCrossMargin/EditCrossMarginLeverageModal.tsx

@@ -16,8 +16,12 @@ import { useFuturesContext } from 'contexts/FuturesContext';
 import { useRefetchContext } from 'contexts/RefetchContext';
 import { monitorTransaction } from 'contexts/RelayerContext';
 import { ORDER_PREVIEW_ERRORS_I18N, previewErrorI18n } from 'queries/futures/constants';
-import { editExistingPositionLeverage, editCrossMarginSize } from 'state/futures/actions';
-import { setCrossMarginLeverage, setOrderType as setReduxOrderType } from 'state/futures/reducer';
+import {
+	editExistingPositionLeverage,
+	editCrossMarginSize,
+	setCrossMarginLeverage,
+} from 'state/futures/actions';
+import { setOrderType as setReduxOrderType } from 'state/futures/reducer';
 import {
 	selectCrossMarginBalanceInfo,
 	selectCrossMarginSelectedLeverage,
@@ -260,13 +264,7 @@ export default function EditLeverageModal({ onDismiss, editMode }: DepositMargin
 				<>
 					<Spacer height={12} />
 					<ErrorView
-						message={t(
-							errorMessage === 'insufficient_margin' || errorMessage === 'Insufficient margin'
-								? ORDER_PREVIEW_ERRORS_I18N.insufficient_margin_edit_leverage
-								: previewError
-								? previewErrorI18n(errorMessage)
-								: t('futures.market.trade.edit-leverage.failed')
-						)}
+						message={t(getStatusMessageI18n(errorMessage, previewError))}
 						formatter="revert"
 					/>
 				</>
@@ -275,6 +273,18 @@ export default function EditLeverageModal({ onDismiss, editMode }: DepositMargin
 	);
 }
 
+// TODO: Clean up preview error messaging
+
+const getStatusMessageI18n = (message: string, previewError: string | null | undefined) => {
+	if (message === 'insufficient_margin' || message === 'Insufficient margin') {
+		return ORDER_PREVIEW_ERRORS_I18N.insufficient_margin_edit_leverage;
+	} else if (message === 'insufficient_free_margin' || message === 'Insufficient free margin') {
+		return ORDER_PREVIEW_ERRORS_I18N.insufficient_free_margin_edit_leverage;
+	}
+	if (previewError) return previewErrorI18n(previewError);
+	return 'futures.market.trade.edit-leverage.failed';
+};
+
 const StyledBaseModal = styled(BaseModal)`
 	[data-reach-dialog-content] {
 		width: 400px;

state/futures/actions.ts

@@ -16,8 +16,13 @@ import {
 	FuturesPotentialTradeDetails,
 	FuturesVolumes,
 	PositionSide,
+	PotentialTradeStatus,
 } from 'sdk/types/futures';
-import { calculateCrossMarginFee, serializePotentialTrade } from 'sdk/utils/futures';
+import {
+	calculateCrossMarginFee,
+	getTradeStatusMessage,
+	serializePotentialTrade,
+} from 'sdk/utils/futures';
 import { unserializeGasPrice } from 'state/app/helpers';
 import { setOpenModal } from 'state/app/reducer';
 import { fetchBalances } from 'state/balances/actions';
@@ -46,7 +51,7 @@ import {
 	handleIsolatedMarginPreviewError,
 	handleTransactionError,
 	setCrossMarginFees,
-	setCrossMarginLeverage,
+	setCrossMarginLeverageForAsset,
 	setCrossMarginMarginDelta,
 	setCrossMarginOrderPrice,
 	setCrossMarginOrderPriceInvalidLabel,
@@ -66,6 +71,7 @@ import {
 } from './reducer';
 import {
 	selectCrossMarginAccount,
+	selectCrossMarginBalanceInfo,
 	selectCrossMarginMarginDelta,
 	selectCrossMarginOrderPrice,
 	selectCrossMarginSelectedLeverage,
@@ -81,6 +87,7 @@ import {
 	selectLeverageSide,
 	selectMarketAssetRate,
 	selectMarketInfo,
+	selectMarketKey,
 	selectOrderType,
 	selectPosition,
 	selectTradeSizeInputs,
@@ -304,6 +311,8 @@ export const fetchCrossMarginTradePreview = createAsyncThunk<
 	async (inputs, { dispatch, getState, extra: { sdk } }) => {
 		const marketInfo = selectMarketInfo(getState());
 		const account = selectFuturesAccount(getState());
+		const marginDelta = selectCrossMarginMarginDelta(getState());
+		const { freeMargin } = selectCrossMarginBalanceInfo(getState());
 		if (!account) throw new Error('No account to fetch orders');
 		if (!marketInfo) throw new Error('No market info');
 		const leverageSide = selectLeverageSide(getState());
@@ -314,6 +323,14 @@ export const fetchCrossMarginTradePreview = createAsyncThunk<
 				marketInfo.market,
 				{ ...inputs, leverageSide }
 			);
+			if (marginDelta.gt(freeMargin) && preview.status === 0) {
+				// Show insufficient margin message
+				preview.status = PotentialTradeStatus.INSUFFICIENT_FREE_MARGIN;
+				preview.statusMessage = getTradeStatusMessage(
+					PotentialTradeStatus.INSUFFICIENT_FREE_MARGIN
+				);
+				preview.showStatus = true;
+			}
 			return serializePotentialTrade(preview);
 		} catch (err) {
 			dispatch(handleCrossMarginPreviewError(err.message));
@@ -368,6 +385,7 @@ export const editCrossMarginSize = (size: string, currencyType: 'usd' | 'native'
 const stageCrossMarginSizeChange = createAsyncThunk<void, void, ThunkConfig>(
 	'futures/stageCrossMarginSizeChange',
 	async (_, { dispatch, getState }) => {
+		dispatch(calculateCrossMarginFees());
 		const tradeInputs = selectCrossMarginTradeInputs(getState());
 		const fees = selectCrossMarginTradeFees(getState());
 		const rate = selectMarketAssetRate(getState());
@@ -388,32 +406,29 @@ const stageCrossMarginSizeChange = createAsyncThunk<void, void, ThunkConfig>(
 			  )
 			: wei(0);
 		dispatch(setCrossMarginMarginDelta(marginDelta.toString()));
-		dispatch(calculateCrossMarginFees());
 		debouncedPrepareCrossMarginTradePreview(dispatch);
 	}
 );
 
 export const editExistingPositionLeverage = createAsyncThunk<void, string, ThunkConfig>(
 	'futures/editExistingPositionLeverage',
 	async (leverage, { dispatch, getState }) => {
-		const tradeInputs = selectCrossMarginTradeInputs(getState());
+		dispatch(calculateCrossMarginFees());
 		const fees = selectCrossMarginTradeFees(getState());
 		const position = selectPosition(getState());
 		const rate = selectMarketAssetRate(getState());
 		const price = selectCrossMarginOrderPrice(getState());
-		dispatch(setCrossMarginLeverage(leverage));
 		const marginDelta = await calculateMarginDelta(
 			{
-				susdSizeDelta: tradeInputs.susdSizeDelta,
-				nativeSizeDelta: tradeInputs.nativeSizeDelta,
+				susdSizeDelta: wei(0),
+				nativeSizeDelta: wei(0),
 				price: price ? wei(price) : rate,
 				leverage: wei(leverage),
 			},
 			fees,
 			position
 		);
 		dispatch(setCrossMarginMarginDelta(marginDelta.toString()));
-		dispatch(calculateCrossMarginFees());
 		debouncedPrepareCrossMarginTradePreview(dispatch);
 	}
 );
@@ -471,6 +486,11 @@ export const changeLeverageSide = (side: PositionSide): AppThunk => (dispatch, g
 	dispatch(editTradeSizeInput(nativeSizeString, 'native'));
 };
 
+export const setCrossMarginLeverage = (leverage: string): AppThunk => (dispatch, getState) => {
+	const marketKey = selectMarketKey(getState());
+	dispatch(setCrossMarginLeverageForAsset({ marketKey: marketKey, leverage: leverage }));
+};
+
 export const debouncedPrepareCrossMarginTradePreview = debounce((dispatch) => {
 	dispatch(prepareCrossMarginTradePreview());
 }, 500);

state/futures/reducer.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import { DEFAULT_FUTURES_MARGIN_TYPE, DEFAULT_LEVERAGE } from 'constants/defaults';
+import { DEFAULT_FUTURES_MARGIN_TYPE } from 'constants/defaults';
 import { ORDER_PREVIEW_ERRORS } from 'queries/futures/constants';
 import { TransactionStatus } from 'sdk/types/common';
 import { FuturesMarket, FuturesMarketKey, FuturesPotentialTradeDetails } from 'sdk/types/futures';
@@ -94,7 +94,7 @@ const initialState: FuturesState = {
 		selectedMarketKey: FuturesMarketKey.sETH,
 		leverageSide: PositionSide.LONG,
 		orderType: 'market',
-		selectedLeverage: DEFAULT_LEVERAGE,
+		selectedLeverageByAsset: {},
 		showCrossMarginOnboard: false,
 		tradeInputs: ZERO_STATE_CM_TRADE_INPUTS,
 		fees: ZERO_CM_FEES,
@@ -124,7 +124,6 @@ const initialState: FuturesState = {
 		leverageSide: PositionSide.LONG,
 		orderType: 'market',
 		tradePreview: null,
-		selectedLeverage: DEFAULT_LEVERAGE,
 		tradeInputs: ZERO_STATE_TRADE_INPUTS,
 		positions: {},
 		openOrders: {},
@@ -155,8 +154,11 @@ const futuresSlice = createSlice({
 		setLeverageSide: (state, action) => {
 			state[accountType(state.selectedType)].leverageSide = action.payload;
 		},
-		setCrossMarginLeverage: (state, action: PayloadAction<string>) => {
-			state.crossMargin.tradeInputs.leverage = action.payload;
+		setCrossMarginLeverageForAsset: (
+			state,
+			action: PayloadAction<{ marketKey: FuturesMarketKey; leverage: string }>
+		) => {
+			state.crossMargin.selectedLeverageByAsset[action.payload.marketKey] = action.payload.leverage;
 		},
 		setCrossMarginMarginDelta: (state, action: PayloadAction<string>) => {
 			state.crossMargin.marginDelta = action.payload;
@@ -459,6 +461,6 @@ export const {
 	setIsolatedTradePreview,
 	setIsolatedMarginFee,
 	setCrossMarginTradePreview,
-	setCrossMarginLeverage,
+	setCrossMarginLeverageForAsset,
 	setPreviewError,
 } = futuresSlice.actions;

state/futures/selectors.ts

@@ -39,9 +39,6 @@ export const selectMarketsQueryStatus = (state: RootState) => state.futures.quer
 export const selectIsolatedLeverageInput = (state: RootState) =>
 	state.futures.isolatedMargin.leverageInput;
 
-export const selectCrossMarginSelectedLeverage = (state: RootState) =>
-	wei(state.futures.crossMargin.tradeInputs.leverage || DEFAULT_LEVERAGE);
-
 export const selectCrossMarginMarginDelta = (state: RootState) =>
 	wei(state.futures.crossMargin.marginDelta || 0);
 
@@ -349,6 +346,13 @@ export const selectIsolatedMarginTradeInputs = createSelector(
 		};
 	}
 );
+
+export const selectCrossMarginSelectedLeverage = createSelector(
+	selectMarketKey,
+	(state: RootState) => state.futures.crossMargin.selectedLeverageByAsset,
+	(key, selectedLeverageByAsset) => wei(selectedLeverageByAsset[key] || DEFAULT_LEVERAGE)
+);
+
 export const selectDynamicFeeRate = (state: RootState) => wei(state.futures.dynamicFeeRate);
 
 export const selectIsolatedMarginFee = (state: RootState) =>

state/futures/types.ts

@@ -134,7 +134,7 @@ export type CrossMarginState = {
 	tradeInputs: CrossMarginTradeInputs<string>;
 	marginDelta: string;
 	orderType: CrossMarginOrderType;
-	selectedLeverage: string;
+	selectedLeverageByAsset: Partial<Record<FuturesMarketKey, string>>;
 	leverageSide: PositionSide;
 	selectedMarketKey: FuturesMarketKey;
 	selectedMarketAsset: FuturesMarketAsset;
@@ -161,7 +161,6 @@ export type CrossMarginState = {
 export type IsolatedMarginState = {
 	tradeInputs: IsolatedMarginTradeInputs<string>;
 	orderType: IsolatedMarginOrderType;
-	selectedLeverage: string;
 	tradePreview: FuturesPotentialTradeDetails<string> | null;
 	leverageSide: PositionSide;
 	selectedMarketKey: FuturesMarketKey;

translations/en.json

@@ -832,7 +832,9 @@
 				},
 				"edit-leverage": {
 					"failed": "Transaction failed",
-					"insufficient-margin": "Leverage cannot be modified, please deposit more margin or reduce open position sizes"
+					"insufficient-margin": "Leverage cannot be increased, it exceeds the minimum margin requirement of $40",
+					"insufficient-free-margin": "Leverage cannot be modified, please deposit more margin or reduce open position sizes"
+
 				}
 			},
 			"history": {