Surface close position input errors (#130)

* show abacus close position validation errors

* bump abacus version

package.json

@@ -39,7 +39,7 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.0.10",
+    "@dydxprotocol/v4-abacus": "^1.0.19",
     "@dydxprotocol/v4-client-js": "^1.0.0",
     "@dydxprotocol/v4-localization": "^1.0.3",
     "@ethersproject/providers": "^5.7.2",

pnpm-lock.yaml

@@ -23,8 +23,8 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.0.10
-    version: 1.0.10
+    specifier: ^1.0.19
+    version: 1.0.19
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.0
     version: 1.0.0
@@ -975,8 +975,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@1.0.10:
-    resolution: {integrity: sha512-SdxI/JcyxM1ydtR9ImWujeurea3gbxj37qYnw1wz829BQiZ05uNEtll3xJCI0MjpG+01ARsxVys7SHbpjSxwOg==}
+  /@dydxprotocol/v4-abacus@1.0.19:
+    resolution: {integrity: sha512-XhvSHGr503gNwHWEiOYP7M2uYeLu+Qm4szpE5w5H6hWFCanSGz6zAsTbPuyPLtt7IE1gj5z8mlL9J3tw2AZROg==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.0:

src/state/inputsSelectors.ts

@@ -48,6 +48,15 @@ export const getTradeInputErrors = (state: RootState) => {
   return currentInput === 'trade' ? getInputErrors(state) : [];
 };
 
+/**
+ * @param state
+ * @returns input errors for Close position
+ */
+export const getClosePositionInputErrors = (state: RootState) => {
+  const currentInput = state.inputs.current;
+  return currentInput === 'closePosition' ? getInputErrors(state) : [];
+};
+
 /**
  * @param state
  * @returns input errors for Transfer

src/views/forms/ClosePositionForm.tsx

@@ -4,8 +4,10 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
 import {
   ClosePositionInputField,
+  ValidationError,
   type HumanReadablePlaceOrderPayload,
   type Nullable,
+  ErrorType,
 } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
@@ -35,13 +37,14 @@ import { PositionPreview } from '@/views/forms/TradeForm/PositionPreview';
 import { getCurrentMarketPositionData } from '@/state/accountSelectors';
 
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
-import { getInputClosePositionData } from '@/state/inputsSelectors';
+import { getClosePositionInputErrors, getInputClosePositionData } from '@/state/inputsSelectors';
 import { getCurrentMarketConfig, getCurrentMarketId } from '@/state/perpetualsSelectors';
 import { closeDialog } from '@/state/dialogs';
 import { getCurrentInput } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { MustBigNumber } from '@/lib/numbers';
+import { getTradeInputAlert } from '@/lib/tradeData';
 
 const MAX_KEY = 'MAX';
 
@@ -81,15 +84,38 @@ export const ClosePositionForm = ({
 
   const market = useSelector(getCurrentMarketId);
   const { id } = useSelector(getCurrentMarketAssetData, shallowEqual) || {};
-  const { stepSizeDecimals } = useSelector(getCurrentMarketConfig, shallowEqual) || {};
+  const { stepSizeDecimals, tickSizeDecimals } =
+    useSelector(getCurrentMarketConfig, shallowEqual) || {};
   const { size: sizeData, summary } = useSelector(getInputClosePositionData, shallowEqual) || {};
   const { size, percent } = sizeData || {};
   const currentInput = useSelector(getCurrentInput);
+  const closePositionInputErrors = useSelector(getClosePositionInputErrors, shallowEqual);
   const currentPositionData = useSelector(getCurrentMarketPositionData, shallowEqual);
   const { size: currentPositionSize } = currentPositionData || {};
   const { current: currentSize } = currentPositionSize || {};
   const currentSizeBN = MustBigNumber(currentSize).abs();
 
+  const hasInputErrors = closePositionInputErrors?.some(
+    (error: ValidationError) => error.type !== ErrorType.warning
+  );
+
+  const inputAlert = getTradeInputAlert({
+    abacusInputErrors: closePositionInputErrors ?? [],
+    stringGetter,
+    stepSizeDecimals,
+    tickSizeDecimals,
+  });
+
+  let alertContent;
+  let alertType = AlertType.Error;
+
+  if (closePositionError) {
+    alertContent = closePositionError;
+  } else if (inputAlert) {
+    alertContent = inputAlert?.alertString;
+    alertType = inputAlert?.type;
+  }
+
   useEffect(() => {
     if (currentStep && currentStep !== MobilePlaceOrderSteps.EditOrder) return;
 
@@ -182,9 +208,7 @@ export const ClosePositionForm = ({
     });
   };
 
-  const alertMessage = closePositionError && (
-    <AlertMessage type={AlertType.Error}>{closePositionError}</AlertMessage>
-  );
+  const alertMessage = alertContent && <AlertMessage type={alertType}>{alertContent}</AlertMessage>;
 
   const inputs = (
     <Styled.InputsColumn>
@@ -265,8 +289,8 @@ export const ClosePositionForm = ({
 
         <PlaceOrderButtonAndReceipt
           isLoading={isClosingPosition}
-          hasValidationErrors={!size}
-          actionStringKey={!size ? STRING_KEYS.ENTER_AMOUNT : undefined}
+          hasValidationErrors={hasInputErrors}
+          actionStringKey={inputAlert?.actionStringKey}
           summary={summary ?? undefined}
           currentStep={currentStep}
           isClosePosition