fix: enforce preview validation on edit position modal (#2549)

Enforce max size on edit position modal

packages/app/src/sections/futures/EditPositionModal/EditPositionMarginModal.tsx

@@ -32,7 +32,6 @@ import {
 	selectIdleMargin,
 	selectIsFetchingTradePreview,
 	selectSubmittingFuturesTx,
-	selectTradePreviewError,
 } from 'state/futures/selectors'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 
@@ -50,7 +49,6 @@ export default function EditPositionMarginModal() {
 	const idleMargin = useAppSelector(selectIdleMargin)
 	const modal = useAppSelector(selectShowPositionModal)
 	const { market, position } = useAppSelector(selectEditPositionModalInfo)
-	const previewError = useAppSelector(selectTradePreviewError)
 	const allowanceValid = useAppSelector(selectEditMarginAllowanceValid)
 
 	const [transferType, setTransferType] = useState(0)
@@ -96,15 +94,20 @@ export default function EditPositionMarginModal() {
 		[transferType, position?.position?.leverage, market?.appMaxLeverage]
 	)
 
-	const orderError = useMemo(() => {
-		if (previewError) return t(previewErrorI18n(previewError))
+	const previewError = useMemo(() => {
+		if (maxLeverageExceeded) return 'Max leverage exceeded'
 		if (preview?.showStatus) return preview?.statusMessage
 		return null
-	}, [preview?.showStatus, preview?.statusMessage, previewError, t])
+	}, [preview?.showStatus, preview?.statusMessage, maxLeverageExceeded])
+
+	const errorMessage = useMemo(
+		() => previewError || transactionState?.error,
+		[previewError, transactionState?.error]
+	)
 
 	const submitDisabled = useMemo(() => {
-		return marginWei.eq(0) || invalid || isLoading || maxLeverageExceeded || orderError
-	}, [marginWei, invalid, isLoading, maxLeverageExceeded, orderError])
+		return marginWei.eq(0) || invalid || isLoading || !!previewError
+	}, [marginWei, invalid, isLoading, previewError])
 
 	const onChangeTab = (selection: number) => {
 		setTransferType(selection)
@@ -205,13 +208,10 @@ export default function EditPositionMarginModal() {
 					: t('futures.market.trade.edit-position.submit-margin-withdraw')}
 			</Button>
 
-			{(transactionState?.error || orderError || maxLeverageExceeded) && (
+			{errorMessage && (
 				<>
 					<Spacer height={20} />
-					<ErrorView
-						message={transactionState?.error || orderError || 'Max leverage exceeded'}
-						formatter="revert"
-					/>
+					<ErrorView message={errorMessage} formatter="revert" />
 				</>
 			)}
 		</StyledBaseModal>

packages/app/src/sections/futures/EditPositionModal/EditPositionSizeModal.tsx

@@ -127,23 +127,28 @@ export default function EditPositionSizeModal() {
 		[sizeWei, maxNativeValueWithBuffer]
 	)
 
-	const submitDisabled = useMemo(() => {
-		return (
-			sizeWei.eq(0) ||
-			invalid ||
-			isLoading ||
-			maxLeverageExceeded ||
-			(preview?.exceedsPriceProtection && !overridePriceProtection)
-		)
+	const previewError = useMemo(() => {
+		if (preview?.exceedsPriceProtection && !overridePriceProtection)
+			return 'Exceeds Price Protection'
+		if (maxLeverageExceeded) return 'Max leverage exceeded'
+		if (preview?.statusMessage && preview.statusMessage !== 'Success') return preview?.statusMessage
+		return null
 	}, [
-		sizeWei,
-		invalid,
-		isLoading,
-		maxLeverageExceeded,
+		preview?.statusMessage,
 		preview?.exceedsPriceProtection,
+		maxLeverageExceeded,
 		overridePriceProtection,
 	])
 
+	const errorMessage = useMemo(
+		() => previewError || transactionState?.error,
+		[previewError, transactionState?.error]
+	)
+
+	const submitDisabled = useMemo(() => {
+		return sizeWei.eq(0) || invalid || isLoading || !!previewError
+	}, [sizeWei, invalid, isLoading, previewError])
+
 	const onClose = () => {
 		if (market) {
 			dispatch(editCrossMarginPositionSize(market.marketKey, ''))
@@ -248,18 +253,10 @@ export default function EditPositionSizeModal() {
 					: t('futures.market.trade.edit-position.submit-size-decrease')}
 			</Button>
 
-			{(transactionState?.error ||
-				maxLeverageExceeded ||
-				(preview?.exceedsPriceProtection && !overridePriceProtection)) && (
+			{errorMessage && (
 				<>
 					<Spacer height={20} />
-					<ErrorView
-						message={
-							transactionState?.error ||
-							(maxLeverageExceeded ? 'Max leverage exceeded' : 'Exceeds Price Protection')
-						}
-						formatter="revert"
-					/>
+					<ErrorView message={transactionState?.error || errorMessage} formatter="revert" />
 				</>
 			)}
 			<Spacer height={20} />

packages/app/src/state/futures/selectors.ts

@@ -1620,7 +1620,7 @@ export const selectAverageEntryPrice = createSelector(
 			const existingValue = avgEntryPrice.mul(size)
 			const newValue = tradePreview.price.mul(tradePreview.sizeDelta.abs())
 			const totalValue = existingValue.add(newValue)
-			return totalValue.div(tradePreview.size.abs())
+			return tradePreview.size.abs().gt(0) ? totalValue.div(tradePreview.size.abs()) : wei(0)
 		}
 		return null
 	}