more details nits

src/components/Details.tsx

@@ -133,6 +133,7 @@ const detailsLayoutVariants = {
   row: css`
     ${layoutMixins.row}
     align-self: stretch;
+    white-space: nowrap;
   `,
 
   rowColumns: css`
@@ -159,12 +160,16 @@ const itemLayoutVariants: Record<string, FlattenInterpolation<ThemeProps<any>>>
 
     ${layoutMixins.spacedRow}
     gap: 0.5rem;
+    align-items: start;
+    padding: 0.5rem 0;
 
     min-height: var(--details-item-height);
 
-    > :last-child {
-      align-self: stretch;
+    > :first-child > abbr {
+      min-width: auto;
+    }
 
+    > :last-child {
       ${layoutMixins.row}
       ${layoutMixins.stickyRight}
 
@@ -217,8 +222,6 @@ Styled.Details = styled.dl<{
   --details-grid-numColumns: 2;
 
   ${({ layout }) => layout && detailsLayoutVariants[layout]}
-
-  white-space: nowrap;
 `;
 
 Styled.Item = styled.div<{
@@ -231,7 +234,7 @@ Styled.Item = styled.div<{
   ${({ justifyItems }) =>
     justifyItems === 'end' &&
     css`
-      &:nth-child(even) {
+      > :nth-child(even) {
         justify-items: end;
         text-align: end;
       }
@@ -243,6 +246,7 @@ Styled.Item = styled.div<{
     {
       column: css`
         &:not(:hover) > :first-child {
+          white-space: nowrap;
           overflow-x: hidden;
           text-overflow: ellipsis;
         }

src/components/DetailsDialog.tsx

@@ -26,7 +26,7 @@ export const DetailsDialog = ({ slotIcon, title, items, slotFooter, setIsOpen }:
       placement={isTablet ? DialogPlacement.Default : DialogPlacement.Sidebar}
     >
       <Styled.Content>
-        <Styled.Details withSeparators items={items} />
+        <Styled.Details withSeparators justifyItems="end" items={items} />
 
         <Styled.Footer>{slotFooter}</Styled.Footer>
       </Styled.Content>

src/constants/trade.ts

@@ -4,6 +4,7 @@ import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';
 import { TimeUnitShort } from '@/constants/time';
 
+// TODO: rename to OrderType
 export enum TradeTypes {
   MARKET = 'MARKET',
   LIMIT = 'LIMIT',
@@ -14,16 +15,6 @@ export enum TradeTypes {
   TRAILING_STOP = 'TRAILING_STOP',
 }
 
-enum ClosingTradeTypes {
-  LIQUIDATED = 'LIQUIDATED',
-  LIQUIDATION = 'LIQUIDATION',
-  OFFSETTING = 'OFFSETTING',
-  DELEVERAGED = 'DELEVERAGED',
-  FINAL_SETTLEMENT = 'FINAL_SETTLEMENT',
-}
-
-export type OrderType = TradeTypes | ClosingTradeTypes;
-
 export enum TimeInForceOptions {
   GTT = 'GTT',
   FOK = 'FOK',
@@ -49,74 +40,49 @@ export const POSITION_SIDE_STRINGS: Record<PositionSide, string> = {
   [PositionSide.Short]: STRING_KEYS.SHORT_POSITION_SHORT,
 };
 
-export const ORDER_TYPE_STRINGS: Record<
-  OrderType,
+export const TRADE_TYPE_STRINGS: Record<
+  TradeTypes,
   {
-    orderTypeKeyShort: string;
-    orderTypeKey: string;
-    descriptionKey: string | null;
+    tradeTypeKeyShort: string;
+    tradeTypeKey: string;
+    descriptionKey: string;
   }
 > = {
   [TradeTypes.LIMIT]: {
-    orderTypeKeyShort: STRING_KEYS.LIMIT_ORDER_SHORT,
-    orderTypeKey: STRING_KEYS.LIMIT_ORDER,
+    tradeTypeKeyShort: STRING_KEYS.LIMIT_ORDER_SHORT,
+    tradeTypeKey: STRING_KEYS.LIMIT_ORDER,
     descriptionKey: STRING_KEYS.LIMIT_ORDER_DESCRIPTION,
   },
   [TradeTypes.MARKET]: {
-    orderTypeKeyShort: STRING_KEYS.MARKET_ORDER_SHORT,
-    orderTypeKey: STRING_KEYS.MARKET_ORDER,
+    tradeTypeKeyShort: STRING_KEYS.MARKET_ORDER_SHORT,
+    tradeTypeKey: STRING_KEYS.MARKET_ORDER,
     descriptionKey: STRING_KEYS.MARKET_ORDER_DESCRIPTION,
   },
   [TradeTypes.STOP_LIMIT]: {
-    orderTypeKeyShort: STRING_KEYS.STOP_LIMIT,
-    orderTypeKey: STRING_KEYS.STOP_LIMIT,
+    tradeTypeKeyShort: STRING_KEYS.STOP_LIMIT,
+    tradeTypeKey: STRING_KEYS.STOP_LIMIT,
     descriptionKey: STRING_KEYS.STOP_LIMIT_DESCRIPTION,
   },
   [TradeTypes.STOP_MARKET]: {
-    orderTypeKeyShort: STRING_KEYS.STOP_MARKET,
-    orderTypeKey: STRING_KEYS.STOP_MARKET,
+    tradeTypeKeyShort: STRING_KEYS.STOP_MARKET,
+    tradeTypeKey: STRING_KEYS.STOP_MARKET,
     descriptionKey: STRING_KEYS.STOP_MARKET_DESCRIPTION,
   },
   [TradeTypes.TAKE_PROFIT]: {
-    orderTypeKeyShort: STRING_KEYS.TAKE_PROFIT_LIMIT,
-    orderTypeKey: STRING_KEYS.TAKE_PROFIT_LIMIT,
+    tradeTypeKeyShort: STRING_KEYS.TAKE_PROFIT_LIMIT,
+    tradeTypeKey: STRING_KEYS.TAKE_PROFIT_LIMIT,
     descriptionKey: STRING_KEYS.TAKE_PROFIT_LIMIT_DESCRIPTION,
   },
   [TradeTypes.TAKE_PROFIT_MARKET]: {
-    orderTypeKeyShort: STRING_KEYS.TAKE_PROFIT_MARKET,
-    orderTypeKey: STRING_KEYS.TAKE_PROFIT_MARKET,
+    tradeTypeKeyShort: STRING_KEYS.TAKE_PROFIT_MARKET,
+    tradeTypeKey: STRING_KEYS.TAKE_PROFIT_MARKET,
     descriptionKey: STRING_KEYS.TAKE_PROFIT_MARKET_DESCRIPTION,
   },
   [TradeTypes.TRAILING_STOP]: {
-    orderTypeKeyShort: STRING_KEYS.TRAILING_STOP,
-    orderTypeKey: STRING_KEYS.TRAILING_STOP,
+    tradeTypeKeyShort: STRING_KEYS.TRAILING_STOP,
+    tradeTypeKey: STRING_KEYS.TRAILING_STOP,
     descriptionKey: STRING_KEYS.TRAILING_STOP_DESCRIPTION,
   },
-  [ClosingTradeTypes.LIQUIDATED]: {
-    orderTypeKeyShort: STRING_KEYS.LIQUIDATED,
-    orderTypeKey: STRING_KEYS.LIQUIDATED,
-    descriptionKey: null,
-  },
-  [ClosingTradeTypes.LIQUIDATION]: {
-    orderTypeKeyShort: STRING_KEYS.LIQUIDATION,
-    orderTypeKey: STRING_KEYS.LIQUIDATION,
-    descriptionKey: null,
-  },
-  [ClosingTradeTypes.OFFSETTING]: {
-    orderTypeKeyShort: STRING_KEYS.OFFSETTING,
-    orderTypeKey: STRING_KEYS.OFFSETTING,
-    descriptionKey: null,
-  },
-  [ClosingTradeTypes.DELEVERAGED]: {
-    orderTypeKeyShort: STRING_KEYS.DELEVERAGED,
-    orderTypeKey: STRING_KEYS.DELEVERAGED,
-    descriptionKey: null,
-  },
-  [ClosingTradeTypes.FINAL_SETTLEMENT]: {
-    orderTypeKeyShort: STRING_KEYS.FINAL_SETTLEMENT,
-    orderTypeKey: STRING_KEYS.FINAL_SETTLEMENT,
-    descriptionKey: null,
-  },
 };
 
 export const GOOD_TIL_TIME_TIMESCALE_STRINGS: Record<TimeUnitShort, string> = {

src/hooks/tradingView/useTradingView.ts

@@ -5,11 +5,9 @@ import isEmpty from 'lodash/isEmpty';
 import { LanguageCode, ResolutionString, widget } from 'public/tradingview/charting_library';
 
 import { DEFAULT_RESOLUTION } from '@/constants/candles';
-import { SUPPORTED_LOCALE_BASE_TAGS, STRING_KEYS } from '@/constants/localization';
-
+import { SUPPORTED_LOCALE_BASE_TAGS } from '@/constants/localization';
 import { LocalStorageKey } from '@/constants/localStorage';
-
-import { useDydxClient, useLocalStorage, useStringGetter } from '@/hooks';
+import { useDydxClient, useLocalStorage } from '@/hooks';
 import { store } from '@/state/_store';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
@@ -25,19 +23,14 @@ import { getSavedResolution, getWidgetOptions, getWidgetOverrides } from '@/lib/
  */
 export const useTradingView = ({
   tvWidgetRef,
-  displayButtonRef,
   setIsChartReady,
 }: {
   tvWidgetRef: React.MutableRefObject<any>;
-  displayButtonRef: React.MutableRefObject<any>;
   setIsChartReady: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const stringGetter = useStringGetter();
-
+  const marketId = useSelector(getCurrentMarketId);
   const appTheme = useSelector(getAppTheme);
   const appColorMode = useSelector(getAppColorMode);
-
-  const marketId = useSelector(getCurrentMarketId);
   const marketIds = useSelector(getMarketIds, shallowEqual);
   const selectedLocale = useSelector(getSelectedLocale);
   const selectedNetwork = useSelector(getSelectedNetwork);
@@ -56,6 +49,7 @@ export const useTradingView = ({
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
       const options = {
+        // debug: true,
         ...widgetOptions,
         ...widgetOverrides,
         datafeed: getDydxDatafeed(store, getCandlesForDatafeed),
@@ -69,17 +63,6 @@ export const useTradingView = ({
       tvWidgetRef.current = tvChartWidget;
 
       tvWidgetRef.current.onChartReady(() => {
-        tvWidgetRef?.current?.headerReady().then(() => {
-          displayButtonRef.current = tvWidgetRef?.current?.createButton();
-          displayButtonRef.current.innerHTML = `<span>${stringGetter({
-            key: STRING_KEYS.ORDER_LINES,
-          })}</span> <div class="displayOrdersButton-toggle"></div>`;
-          displayButtonRef.current.setAttribute(
-            'title',
-            stringGetter({ key: STRING_KEYS.ORDER_LINES_TOOLTIP })
-          );
-        });
-
         tvWidgetRef?.current?.subscribe('onAutoSaveNeeded', () =>
           tvWidgetRef?.current?.save((chartConfig: object) => setTvChartConfig(chartConfig))
         );
@@ -89,8 +72,6 @@ export const useTradingView = ({
     }
 
     return () => {
-      displayButtonRef.current?.remove();
-      displayButtonRef.current = null;
       tvWidgetRef.current?.remove();
       tvWidgetRef.current = null;
       setIsChartReady(false);

src/hooks/tradingView/useTradingViewTheme.ts

@@ -1,16 +1,12 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import type {
-  IChartingLibraryWidget,
-  IOrderLineAdapter,
-  ThemeName,
-} from 'public/tradingview/charting_library';
+import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';
 
 import { AppColorMode, AppTheme } from '@/state/configs';
 import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 
-import { getWidgetOverrides, getOrderLineColors } from '@/lib/tradingView/utils';
+import { getWidgetOverrides } from '@/lib/tradingView/utils';
 
 /**
  * @description Method to define a type guard and check that an element is an IFRAME
@@ -26,11 +22,9 @@ const isIFrame = (element: HTMLElement | null): element is HTMLIFrameElement =>
  * In order to support our Classic along with Dark/Light, we are directly accessing the <html> within the iFrame.
  */
 export const useTradingViewTheme = ({
-  orderLines,
   tvWidget,
   isWidgetReady,
 }: {
-  orderLines: Record<string, IOrderLineAdapter>;
   tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null;
   isWidgetReady?: boolean;
 }) => {
@@ -43,8 +37,8 @@ export const useTradingViewTheme = ({
         .changeTheme?.(
           {
             [AppTheme.Classic]: '',
-            [AppTheme.Dark]: 'dark',
-            [AppTheme.Light]: 'light',
+            [AppTheme.Dark]: 'Dark',
+            [AppTheme.Light]: 'Light',
           }[appTheme] as ThemeName
         )
         .then(() => {
@@ -55,17 +49,9 @@ export const useTradingViewTheme = ({
 
             if (isIFrame(frame) && frame.contentWindow) {
               const innerHtml = frame.contentWindow.document.documentElement;
-              switch (appTheme) {
-                case AppTheme.Classic:
-                  innerHtml?.classList.remove('theme-dark', 'theme-light');
-                  break;
-                case AppTheme.Dark:
-                  innerHtml?.classList.remove('theme-light');
-                  innerHtml?.classList.add('theme-dark');
-                  break;
-                case AppTheme.Light:
-                  innerHtml?.classList.remove('theme-dark');
-                  innerHtml?.classList.add('theme-light');
+
+              if (appTheme === AppTheme.Classic) {
+                innerHtml?.classList.remove('theme-dark', 'theme-light');
               }
             }
           }
@@ -87,22 +73,7 @@ export const useTradingViewTheme = ({
               'volume.color.1': studies_overrides['volume.volume.color.1'],
             });
           }
-
-          // Necessary to update existing chart lines
-          Object.entries(orderLines).forEach(([key, line]) => {
-            const { orderColor, borderColor, backgroundColor, textColor, textButtonColor } =
-              getOrderLineColors({ side: key.split('-')[0], appTheme, appColorMode });
-
-            line
-              .setLineColor(orderColor)
-              .setQuantityBackgroundColor(orderColor)
-              .setQuantityBorderColor(borderColor)
-              .setBodyBackgroundColor(backgroundColor)
-              .setBodyBorderColor(borderColor)
-              .setBodyTextColor(textColor)
-              .setQuantityTextColor(textButtonColor);
-          });
         });
     }
-  }, [appTheme, appColorMode, isWidgetReady]);
+  }, [appTheme, appColorMode]);
 };

src/lib/tradingView/utils.ts

@@ -1,8 +1,6 @@
-import { OrderSide } from '@dydxprotocol/v4-client-js';
-
 import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
 
-import { AppTheme, type AppColorMode } from '@/state/configs';
+import type { AppTheme, AppColorMode } from '@/state/configs';
 
 import { Themes } from '@/styles/themes';
 
@@ -49,30 +47,6 @@ export const getHistorySlice = ({
   return bars.filter(({ time }) => time >= fromMs);
 };
 
-export const getOrderLineColors = ({
-  appTheme,
-  appColorMode,
-  side,
-}: {
-  appTheme: AppTheme;
-  appColorMode: AppColorMode;
-  side: OrderSide;
-}) => {
-  const theme = Themes[appTheme][appColorMode];
-  const orderColor = {
-    [OrderSide.BUY]: theme.positive,
-    [OrderSide.SELL]: theme.negative,
-  }[side];
-
-  return {
-    orderColor,
-    borderColor: theme.borderDefault,
-    backgroundColor: theme.layer1,
-    textColor: theme.textTertiary,
-    textButtonColor: theme.textButton,
-  };
-};
-
 export const getWidgetOverrides = ({
   appTheme,
   appColorMode,
@@ -83,7 +57,6 @@ export const getWidgetOverrides = ({
   const theme = Themes[appTheme][appColorMode];
 
   return {
-    theme: appTheme === AppTheme.Dark ? 'dark' : AppTheme.Light ? 'light' : '',
     overrides: {
       'paneProperties.background': theme.layer2,
       'paneProperties.horzGridProperties.color': theme.layer3,

src/pages/trade/TradeDialogTrigger.tsx

@@ -3,7 +3,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { ORDER_TYPE_STRINGS } from '@/constants/trade';
+import { TRADE_TYPE_STRINGS } from '@/constants/trade';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -43,7 +43,7 @@ export const TradeDialogTrigger = () => {
             <Styled.TradeSummary>
               <Styled.TradeType>
                 <span>
-                  {stringGetter({ key: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey })}
+                  {stringGetter({ key: TRADE_TYPE_STRINGS[selectedTradeType].tradeTypeKey })}
                 </span>
                 <OrderSideTag size={TagSize.Medium} orderSide={selectedOrderSide} />
               </Styled.TradeType>

src/views/charts/TvChart.tsx

@@ -1,52 +1,28 @@
 import { useEffect, useRef, useState } from 'react';
-
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
+import { useDispatch, useSelector } from 'react-redux';
 
-import type {
-  IChartingLibraryWidget,
-  IOrderLineAdapter,
-  ResolutionString,
-} from 'public/tradingview/charting_library';
+import type { IChartingLibraryWidget, ResolutionString } from 'public/tradingview/charting_library';
 
-import { AbacusOrderStatus } from '@/constants/abacus';
-import { DEFAULT_RESOLUTION, RESOLUTION_CHART_CONFIGS } from '@/constants/candles';
 import { DEFAULT_MARKETID } from '@/constants/markets';
-import { type OrderType, ORDER_TYPE_STRINGS } from '@/constants/trade';
-
-import { useStringGetter } from '@/hooks';
+import { DEFAULT_RESOLUTION, RESOLUTION_CHART_CONFIGS } from '@/constants/candles';
 import { useTradingView, useTradingViewTheme } from '@/hooks/tradingView';
 
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 
-import { getCurrentMarketOrders } from '@/state/accountSelectors';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 import { setTvChartResolution } from '@/state/perpetuals';
+
 import { getCurrentMarketId, getSelectedResolutionForMarket } from '@/state/perpetualsSelectors';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { MustBigNumber } from '@/lib/numbers';
-import { getOrderLineColors } from '@/lib/tradingView/utils';
-
 type TvWidget = IChartingLibraryWidget & { _id?: string; _ready?: boolean };
 
-let orderLines: Record<string, IOrderLineAdapter> = {};
-
 export const TvChart = () => {
-  const dispatch = useDispatch();
-  const stringGetter = useStringGetter();
-
   const [isChartReady, setIsChartReady] = useState(false);
-  const [showOrderLines, setShowOrderLines] = useState(false);
-
-  const displayButtonRef = useRef<HTMLElement | null>(null);
-
-  const appTheme = useSelector(getAppTheme);
-  const appColorMode = useSelector(getAppColorMode);
 
+  const dispatch = useDispatch();
   const currentMarketId: string = useSelector(getCurrentMarketId) || DEFAULT_MARKETID;
-  const currentMarketOrders = useSelector(getCurrentMarketOrders, shallowEqual);
 
   const selectedResolution: string =
     useSelector(getSelectedResolutionForMarket(currentMarketId)) || DEFAULT_RESOLUTION;
@@ -57,8 +33,8 @@ export const TvChart = () => {
   const chart = isWidgetReady ? tvWidget?.chart() : undefined;
   const chartResolution = chart?.resolution?.();
 
-  const { savedResolution } = useTradingView({ tvWidgetRef, displayButtonRef, setIsChartReady });
-  useTradingViewTheme({ tvWidget, isWidgetReady, orderLines });
+  const { savedResolution } = useTradingView({ tvWidgetRef, setIsChartReady });
+  useTradingViewTheme({ tvWidget, isWidgetReady });
 
   const setVisibleRangeForResolution = ({ resolution }: { resolution: ResolutionString }) => {
     // Different resolutions have different timeframes to display data efficiently.
@@ -73,9 +49,6 @@ export const TvChart = () => {
     tvWidget?.activeChart().setVisibleRange(newRange, { percentRightMargin: 10 });
   };
 
-  /**
-   * @description Hook to handle changing chart resolution
-   */
   useEffect(() => {
     if (chartResolution) {
       if (chartResolution !== selectedResolution) {
@@ -96,111 +69,6 @@ export const TvChart = () => {
     }
   }, [currentMarketId, isWidgetReady]);
 
-  /**
-   * @description Hook to handle order line toggle state
-   */
-  useEffect(() => {
-    if (isChartReady && displayButtonRef && displayButtonRef.current) {
-      displayButtonRef.current.onclick = () => {
-        const newShowOrderLinesState = !showOrderLines;
-        if (newShowOrderLinesState) {
-          displayButtonRef.current?.classList?.add('order-lines-active');
-        } else {
-          displayButtonRef.current?.classList?.remove('order-lines-active');
-        }
-        setShowOrderLines(newShowOrderLinesState);
-      };
-    }
-  }, [isChartReady, showOrderLines]);
-
-  /**
-   * @description Hook to handle drawing order lines
-   */
-  useEffect(() => {
-    if (tvWidget && isChartReady) {
-      tvWidget.onChartReady(() => {
-        tvWidget.chart().dataReady(() => {
-          if (showOrderLines) {
-            drawOrderLines();
-          } else {
-            deleteOrderLines();
-          }
-        });
-      });
-    }
-  }, [isChartReady, showOrderLines, currentMarketOrders, currentMarketId]);
-
-  const drawOrderLines = () => {
-    if (!currentMarketOrders) return;
-    currentMarketOrders.forEach(
-      ({
-        id,
-        type,
-        status,
-        side,
-        cancelReason,
-        remainingSize,
-        size,
-        triggerPrice,
-        price,
-        trailingPercent,
-      }) => {
-        const key = `${side.rawValue}-${id}`;
-        const quantity = (remainingSize ?? size).toString();
-
-        const orderType = type.rawValue as OrderType;
-        const orderLabel = stringGetter({
-          key: ORDER_TYPE_STRINGS[orderType].orderTypeKey,
-        });
-        const orderString = trailingPercent ? `${orderLabel} ${trailingPercent}%` : orderLabel;
-
-        const shouldShow =
-          !cancelReason &&
-          (status === AbacusOrderStatus.open || status === AbacusOrderStatus.untriggered);
-
-        const maybeOrderLine = key in orderLines ? orderLines[key] : null;
-        if (maybeOrderLine) {
-          if (!shouldShow) {
-            maybeOrderLine.remove();
-            delete orderLines[key];
-            return;
-          } else if (maybeOrderLine.getQuantity() !== quantity) {
-            maybeOrderLine.setQuantity(quantity);
-            return;
-          }
-        } else if (shouldShow) {
-          const { orderColor, borderColor, backgroundColor, textColor, textButtonColor } =
-            getOrderLineColors({ side: side.rawValue, appTheme, appColorMode });
-
-          const orderLine = tvWidget
-            ?.chart()
-            .createOrderLine({ disableUndo: false })
-            .setPrice(MustBigNumber(triggerPrice ?? price).toNumber())
-            .setQuantity(quantity)
-            .setText(orderString)
-            .setLineColor(orderColor)
-            .setQuantityBackgroundColor(orderColor)
-            .setQuantityBorderColor(borderColor)
-            .setBodyBackgroundColor(backgroundColor)
-            .setBodyBorderColor(borderColor)
-            .setBodyTextColor(textColor)
-            .setQuantityTextColor(textButtonColor);
-
-          if (orderLine) {
-            orderLines[key] = orderLine;
-          }
-        }
-      }
-    );
-  };
-
-  const deleteOrderLines = () => {
-    Object.values(orderLines).forEach((line) => {
-      line.remove();
-    });
-    orderLines = {};
-  };
-
   return (
     <Styled.PriceChart isChartReady={isChartReady}>
       {!isChartReady && <LoadingSpace id="tv-chart-loading" />}

src/views/dialogs/TradeDialog.tsx

@@ -4,7 +4,7 @@ import styled, { AnyStyledComponent, css } from 'styled-components';
 
 import { TradeInputField } from '@/constants/abacus';
 import { STRING_KEYS, StringKey } from '@/constants/localization';
-import { TradeTypes, ORDER_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
+import { TradeTypes, TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';

src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx

@@ -5,7 +5,7 @@ import type { TradeInputSummary } from '@/constants/abacus';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
-import { ORDER_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
+import { TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
 
 import { useStringGetter, useTokenConfigs } from '@/hooks';
 
@@ -184,7 +184,7 @@ export const PlaceOrderButtonAndReceipt = ({
               ORDER: stringGetter({
                 key: isClosePosition
                   ? STRING_KEYS.CLOSE_ORDER
-                  : ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey,
+                  : TRADE_TYPE_STRINGS[selectedTradeType].tradeTypeKey,
               }),
             },
           })}

src/views/notifications/TradeNotification/index.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/constants/abacus';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { ORDER_TYPE_STRINGS, TradeTypes } from '@/constants/trade';
+import { TRADE_TYPE_STRINGS, TradeTypes } from '@/constants/trade';
 import { useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -48,7 +48,7 @@ export const TradeNotification = ({ isToast, data, notification }: TradeNotifica
   const { assetId } = marketData ?? {};
   const orderType = ORDER_TYPE as KotlinIrEnumValues<typeof AbacusOrderType>;
   const tradeType = TRADE_TYPES[orderType];
-  const titleKey = tradeType && ORDER_TYPE_STRINGS[tradeType]?.orderTypeKey;
+  const titleKey = tradeType && TRADE_TYPE_STRINGS[tradeType]?.tradeTypeKey;
   const orderStatus = ORDER_STATUS as KotlinIrEnumValues<typeof AbacusOrderStatus>;
 
   return (