feat(deal-ticket): simplify summary validation (#3144)

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -58,10 +58,12 @@ export const DealTicket = ({
   const { pubKey, isReadOnly } = useVegaWallet();
   // store last used tif for market so that when changing OrderType the previous TIF
   // selection for that type is used when switching back
+
   const [lastTIF, setLastTIF] = useState({
     [OrderType.TYPE_MARKET]: OrderTimeInForce.TIME_IN_FORCE_IOC,
     [OrderType.TYPE_LIMIT]: OrderTimeInForce.TIME_IN_FORCE_GTC,
   });
+
   const {
     control,
     errors,
@@ -71,20 +73,20 @@ export const DealTicket = ({
     update,
     handleSubmit,
   } = useOrderForm(market.id);
+
   const asset = market.tradableInstrument.instrument.product.settlementAsset;
+
   const { accountBalance: marginAccountBalance } = useMarketAccountBalance(
     market.id
   );
+
   const { accountBalance: generalAccountBalance } = useAccountBalance(asset.id);
+
   const balance = (
     BigInt(marginAccountBalance) + BigInt(generalAccountBalance)
   ).toString();
 
-  const marketStateError = validateMarketState(marketData.marketState);
+  const { marketState, marketTradingMode } = marketData;
-  const hasNoBalance = generalAccountBalance === '0';
-  const marketTradingModeError = validateMarketTradingMode(
-    marketData.marketTradingMode
-  );
 
   const normalizedOrder =
     order &&
@@ -94,13 +96,9 @@ export const DealTicket = ({
       market.positionDecimalPlaces
     );
 
-  const { margin, totalMargin } = useInitialMargin(
+  const { margin, totalMargin } = useInitialMargin(market.id, normalizedOrder);
-    market.id,
-    normalizedOrder?.size,
-    order?.side
-  );
 
-  const checkForErrors = useCallback(() => {
+  useEffect(() => {
     if (!pubKey) {
       setError('summary', {
         message: t('No public key selected'),
@@ -109,6 +107,7 @@ export const DealTicket = ({
       return;
     }
 
+    const marketStateError = validateMarketState(marketState);
     if (marketStateError !== true) {
       setError('summary', {
         message: marketStateError,
@@ -117,6 +116,7 @@ export const DealTicket = ({
       return;
     }
 
+    const hasNoBalance = generalAccountBalance === '0';
     if (hasNoBalance) {
       setError('summary', {
         message: SummaryValidationType.NoCollateral,
@@ -125,6 +125,7 @@ export const DealTicket = ({
       return;
     }
 
+    const marketTradingModeError = validateMarketTradingMode(marketTradingMode);
     if (marketTradingModeError !== true) {
       setError('summary', {
         message: marketTradingModeError,
@@ -132,41 +133,19 @@ export const DealTicket = ({
       });
       return;
     }
+    clearErrors('summary');
   }, [
-    hasNoBalance,
+    marketState,
-    marketStateError,
+    marketTradingMode,
-    marketTradingModeError,
+    generalAccountBalance,
     pubKey,
     setError,
-  ]);
-
-  useEffect(() => {
-    if (
-      (pubKey && errors.summary?.type === SummaryValidationType.NoPubKey) ||
-      (!hasNoBalance &&
-        errors.summary?.type === SummaryValidationType.NoCollateral) ||
-      (marketStateError === true &&
-        errors.summary?.type === SummaryValidationType.MarketState) ||
-      (marketTradingModeError === true &&
-        errors.summary?.type === SummaryValidationType.TradingMode)
-    ) {
-      clearErrors('summary');
-    }
-    checkForErrors();
-  }, [
-    pubKey,
-    hasNoBalance,
-    marketStateError,
-    marketTradingModeError,
     clearErrors,
-    errors.summary?.message,
+    errors.summary,
-    errors.summary?.type,
-    checkForErrors,
   ]);
 
   const onSubmit = useCallback(
     (order: OrderSubmission) => {
-      checkForErrors();
       submit(
         normalizeOrderSubmission(
           order,
@@ -175,11 +154,11 @@ export const DealTicket = ({
         )
       );
     },
-    [checkForErrors, submit, market.decimalPlaces, market.positionDecimalPlaces]
+    [submit, market.decimalPlaces, market.positionDecimalPlaces]
   );
 
   // if an order doesn't exist one will be created by the store immediately
-  if (!order) return null;
+  if (!order || !normalizedOrder) return null;
 
   return (
     <form
@@ -297,11 +276,7 @@ export const DealTicket = ({
         variant={order.side === Schema.Side.SIDE_BUY ? 'ternary' : 'secondary'}
       />
       <DealTicketFeeDetails
-        order={normalizeOrderSubmission(
+        order={normalizedOrder}
-          order,
-          market.decimalPlaces,
-          market.positionDecimalPlaces
-        )}
         market={market}
         marketData={marketData}
         margin={margin}

libs/deal-ticket/src/hooks/use-initial-margin.ts

@@ -13,8 +13,7 @@ import { marketInfoProvider } from '@vegaprotocol/market-info';
 
 export const useInitialMargin = (
   marketId: OrderSubmissionBody['orderSubmission']['marketId'],
-  size?: OrderSubmissionBody['orderSubmission']['size'],
+  order?: OrderSubmissionBody['orderSubmission']
-  side?: OrderSubmissionBody['orderSubmission']['side']
 ) => {
   const { pubKey: partyId } = useVegaWallet();
   const commonVariables = { marketId, partyId: partyId || '' };
@@ -33,7 +32,7 @@ export const useInitialMargin = (
   });
   let totalMargin = '0';
   let margin = '0';
-  if (marketInfo?.riskFactors && marketData && size && side) {
+  if (marketInfo?.riskFactors && marketData && order) {
     const {
       positionDecimalPlaces,
       decimalPlaces,
@@ -43,8 +42,8 @@ export const useInitialMargin = (
     const { marginCalculator, instrument } = tradableInstrument;
     const { decimals } = instrument.product.settlementAsset;
     margin = totalMargin = calculateMargins({
-      side,
+      side: order.side,
-      size,
+      size: order.size,
       price: marketData.markPrice, // getDerivedPrice(order, marketData), same in positions-data-providers
       positionDecimalPlaces,
       decimalPlaces,
@@ -57,7 +56,7 @@ export const useInitialMargin = (
   if (activeVolumeAndMargin) {
     let sellMargin = BigInt(activeVolumeAndMargin.sellInitialMargin);
     let buyMargin = BigInt(activeVolumeAndMargin.buyInitialMargin);
-    if (side === Side.SIDE_SELL) {
+    if (order?.side === Side.SIDE_SELL) {
       sellMargin += BigInt(totalMargin);
     } else {
       buyMargin += BigInt(totalMargin);