feat: order status [3/n] show place order error in order status notif…

…ication (#482) * show order error in order status notification
dydxprotocol · May 2, 2024 · 995d79c · 995d79c
1 parent 2d05a6c
commit 995d79c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 37 deletions.
diff --git a/src/views/forms/ClosePositionForm.tsx b/src/views/forms/ClosePositionForm.tsx
@@ -13,10 +13,12 @@ import {
 import { AlertType } from '@/constants/alerts';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
+import { NotificationType } from '@/constants/notifications';
 import { TOKEN_DECIMALS } from '@/constants/numbers';
 import { MobilePlaceOrderSteps } from '@/constants/trade';
 
 import { useBreakpoints, useIsFirstRender, useStringGetter, useSubaccount } from '@/hooks';
+import { useNotifications } from '@/hooks/useNotifications';
 import { useOnLastOrderIndexed } from '@/hooks/useOnLastOrderIndexed';
 
 import { breakpoints } from '@/styles';
@@ -35,11 +37,7 @@ import { Orderbook, orderbookMixins, type OrderbookScrollBehavior } from '@/view
 import { getCurrentMarketPositionData } from '@/state/accountSelectors';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 import { closeDialog } from '@/state/dialogs';
-import {
-  getClosePositionInputErrors,
-  getCurrentInput,
-  getInputClosePositionData,
-} from '@/state/inputsSelectors';
+import { getClosePositionInputErrors, getInputClosePositionData } from '@/state/inputsSelectors';
 import { getCurrentMarketConfig, getCurrentMarketId } from '@/state/perpetualsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
@@ -90,7 +88,6 @@ export const ClosePositionForm = ({
     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 || {};
@@ -108,14 +105,19 @@ export const ClosePositionForm = ({
     tickSizeDecimals,
   });
 
+  const { getNotificationPreferenceForType } = useNotifications();
+  const isErrorShownInOrderStatusToast = getNotificationPreferenceForType(
+    NotificationType.OrderStatus
+  );
+
   let alertContent;
   let alertType = AlertType.Error;
 
-  if (closePositionError) {
+  if (closePositionError && !isErrorShownInOrderStatusToast) {
     alertContent = closePositionError;
   } else if (inputAlert) {
-    alertContent = inputAlert?.alertString;
-    alertType = inputAlert?.type;
+    alertContent = inputAlert.alertString;
+    alertType = inputAlert.type;
   }
 
   useEffect(() => {

diff --git a/src/views/forms/TradeForm.tsx b/src/views/forms/TradeForm.tsx
@@ -18,6 +18,7 @@ import { AlertType } from '@/constants/alerts';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 import { DialogTypes, TradeBoxDialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS, StringKey } from '@/constants/localization';
+import { NotificationType } from '@/constants/notifications';
 import { USD_DECIMALS } from '@/constants/numbers';
 import {
   InputErrorData,
@@ -29,6 +30,7 @@ import {
 
 import { useBreakpoints, useStringGetter, useSubaccount } from '@/hooks';
 import { useComplianceState } from '@/hooks/useComplianceState';
+import { useNotifications } from '@/hooks/useNotifications';
 import { useOnLastOrderIndexed } from '@/hooks/useOnLastOrderIndexed';
 
 import { breakpoints } from '@/styles';
@@ -183,11 +185,16 @@ export const TradeForm = ({
     tickSizeDecimals,
   });
 
-  if (placeOrderError) {
+  const { getNotificationPreferenceForType } = useNotifications();
+  const isErrorShownInOrderStatusToast = getNotificationPreferenceForType(
+    NotificationType.OrderStatus
+  );
+
+  if (placeOrderError && !isErrorShownInOrderStatusToast) {
     alertContent = placeOrderError;
   } else if (inputAlert) {
-    alertContent = inputAlert?.alertString;
-    alertType = inputAlert?.type;
+    alertContent = inputAlert.alertString;
+    alertType = inputAlert.type;
   }
 
   const shouldPromptUserToPlaceLimitOrder = ['MARKET_ORDER_ERROR_ORDERBOOK_SLIPPAGE'].some(

diff --git a/src/views/notifications/OrderStatusNotification.tsx b/src/views/notifications/OrderStatusNotification.tsx
@@ -52,6 +52,7 @@ export const OrderStatusNotification = ({
 
   let orderStatusStringKey = STRING_KEYS.SUBMITTING;
   let orderStatusIcon = <Styled.LoadingSpinner />;
+  let customContent = null;
 
   switch (submissionStatus) {
     case OrderSubmissionStatuses.Placed:
@@ -66,12 +67,24 @@ export const OrderStatusNotification = ({
           ];
         orderStatusIcon = <Styled.OrderStatusIcon status={indexedOrderStatus} />;
       }
+      if (order && fill) {
+        customContent = (
+          <FillDetails
+            orderSide={ORDER_SIDES[order.side.name]}
+            tradeType={getTradeType(order.type.rawValue) ?? undefined}
+            filledAmount={order.totalFilled}
+            assetId={assetId}
+            averagePrice={order.price}
+            tickSizeDecimals={marketData?.configs?.displayTickSizeDecimals ?? USD_DECIMALS}
+          />
+        );
+      }
       break;
     default: // OrderSubmissionStatuses.Submitted
       if (localOrder.errorStringKey) {
         orderStatusStringKey = STRING_KEYS.ERROR;
         orderStatusIcon = <Styled.WarningIcon iconName={IconName.Warning} />;
-        // TODO(@aforaleka) replace trade form error with this depending on preferences
+        customContent = <span>{stringGetter({ key: localOrder.errorStringKey })}</span>;
       }
       break;
   }
@@ -88,19 +101,7 @@ export const OrderStatusNotification = ({
           {orderStatusIcon}
         </Styled.OrderStatus>
       }
-      slotCustomContent={
-        order &&
-        fill && (
-          <FillDetails
-            orderSide={ORDER_SIDES[order.side.name]}
-            tradeType={getTradeType(order.type.rawValue) ?? undefined}
-            filledAmount={order.totalFilled}
-            assetId={assetId}
-            averagePrice={order.price}
-            tickSizeDecimals={marketData?.configs?.displayTickSizeDecimals ?? USD_DECIMALS}
-          />
-        )
-      }
+      slotCustomContent={customContent}
     />
   );
 };

diff --git a/src/views/notifications/TradeNotification/FillDetails.tsx b/src/views/notifications/TradeNotification/FillDetails.tsx
@@ -11,7 +11,6 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { Details } from '@/components/Details';
 import { OrderSideTag } from '@/components/OrderSideTag';
 import { Output, OutputType } from '@/components/Output';
-import { OrderStatusIcon } from '@/views/OrderStatusIcon';
 
 export const FillDetails = ({
   orderSide,
@@ -68,16 +67,6 @@ Styled.Label = styled.span`
   gap: 0.5ch;
 `;
 
-Styled.OrderStatus = styled(Styled.Label)`
-  color: var(--color-text-0);
-  font: var(--font-small-book);
-`;
-
-Styled.OrderStatusIcon = styled(OrderStatusIcon)`
-  width: 0.9375rem;
-  height: 0.9375rem;
-`;
-
 Styled.Details = styled(Details)`
   --details-item-height: 1rem;