fix(sltp): fix positions tables in non trade views when sltp flag is …

…on (#447) * needs to be cleaned up * clean up types * fix unique stringId * update localization * fix lock file * fix columns * review comment * review comments #2
dydxprotocol · Apr 22, 2024 · aa2ae94 · aa2ae94
1 parent aa978a6
commit aa2ae94
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 30 deletions.
diff --git a/src/pages/portfolio/Overview.tsx b/src/pages/portfolio/Overview.tsx
@@ -11,7 +11,10 @@ import { AttachedExpandingSection, DetachedSection } from '@/components/ContentS
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
 import { PositionsTable, PositionsTableColumnKey } from '@/views/tables/PositionsTable';
 
-import { calculateShouldRenderTriggersInPositionsTable } from '@/state/accountCalculators';
+import {
+  calculateShouldRenderTriggersInPositionsTable,
+  calculateShouldRenderActionsInPositionsTable,
+} from '@/state/accountCalculators';
 
 import { isTruthy } from '@/lib/isTruthy';
 
@@ -22,9 +25,10 @@ export const Overview = () => {
   const { isTablet } = useBreakpoints();
   const navigate = useNavigate();
 
+  const showClosePositionAction = false;
+
   const shouldRenderTriggers = useSelector(calculateShouldRenderTriggersInPositionsTable);
-  // TODO: CT-503
-  // const shouldRenderActions = useSelector(calculateShouldRenderActionsInPositionsTable);
+  const shouldRenderActions = useSelector(calculateShouldRenderActionsInPositionsTable(showClosePositionAction));
 
   return (
     <div>
@@ -53,8 +57,7 @@ export const Overview = () => {
                   PositionsTableColumnKey.RealizedPnl,
                   PositionsTableColumnKey.AverageOpenAndClose,
                   shouldRenderTriggers && PositionsTableColumnKey.Triggers,
-                  // TODO: CT-503 re-enable when close positions dialog is created
-                  // shouldRenderActions && PositionsTableColumnKey.Actions,
+                  shouldRenderActions && PositionsTableColumnKey.Actions,
                 ].filter(isTruthy)
           }
           currentRoute={AppRoute.Portfolio}
@@ -63,6 +66,7 @@ export const Overview = () => {
               state: { from: AppRoute.Portfolio },
             })
           }
+          showClosePositionAction={showClosePositionAction}
           withOuterBorder
         />
       </Styled.AttachedExpandingSection>

diff --git a/src/pages/portfolio/Positions.tsx b/src/pages/portfolio/Positions.tsx
@@ -10,7 +10,10 @@ import { AttachedExpandingSection } from '@/components/ContentSection';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
 import { PositionsTable, PositionsTableColumnKey } from '@/views/tables/PositionsTable';
 
-import { calculateShouldRenderTriggersInPositionsTable } from '@/state/accountCalculators';
+import {
+  calculateShouldRenderTriggersInPositionsTable,
+  calculateShouldRenderActionsInPositionsTable,
+} from '@/state/accountCalculators';
 
 import { isTruthy } from '@/lib/isTruthy';
 import { testFlags } from '@/lib/testFlags';
@@ -20,9 +23,10 @@ export const Positions = () => {
   const { isTablet, isNotTablet } = useBreakpoints();
   const navigate = useNavigate();
 
+  const showClosePositionAction = false;
+
   const shouldRenderTriggers = useSelector(calculateShouldRenderTriggersInPositionsTable);
-  // TODO: CT-503
-  // const shouldRenderActions = useSelector(calculateShouldRenderActionsInPositionsTable);
+  const shouldRenderActions = useSelector(calculateShouldRenderActionsInPositionsTable(showClosePositionAction));
 
   return (
     <AttachedExpandingSection>
@@ -48,12 +52,12 @@ export const Positions = () => {
                 PositionsTableColumnKey.AverageOpenAndClose,
                 PositionsTableColumnKey.NetFunding,
                 shouldRenderTriggers && PositionsTableColumnKey.Triggers,
-                // TODO: CT-503 re-enable when close positions dialog is created
-                // shouldRenderActions && PositionsTableColumnKey.Actions,
+                shouldRenderActions && PositionsTableColumnKey.Actions,
               ].filter(isTruthy)
         }
         currentRoute={`${AppRoute.Portfolio}/${PortfolioRoute.Positions}`}
         withOuterBorder={isNotTablet}
+        showClosePositionAction={showClosePositionAction}
         navigateToOrders={() =>
           navigate(`${AppRoute.Portfolio}/${PortfolioRoute.Orders}`, {
             state: { from: AppRoute.Portfolio },

diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { shallowEqual, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import styled, { type AnyStyledComponent } from 'styled-components';
+import styled from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
@@ -72,22 +72,25 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
   const currentMarketId = useSelector(getCurrentMarketId);
   const currentMarketAssetId = useSelector(getCurrentMarketAssetId);
 
-  const { numTotalPositions, numTotalOpenOrders, numTotalFills, numTotalFundingPayments } =
+  const { numTotalPositions, numTotalOpenOrders, numTotalFills } =
     useSelector(getTradeInfoNumbers, shallowEqual) || {};
 
-  const { numOpenOrders, numFills, numFundingPayments } =
+  const { numOpenOrders, numFills } =
     useSelector(getCurrentMarketTradeInfoNumbers, shallowEqual) || {};
 
+  const showClosePositionAction = true;
+
   const hasUnseenOrderUpdates = useSelector(getHasUnseenOrderUpdates);
   const hasUnseenFillUpdates = useSelector(getHasUnseenFillUpdates);
   const isAccountViewOnly = useSelector(calculateIsAccountViewOnly);
   const shouldRenderTriggers = useSelector(calculateShouldRenderTriggersInPositionsTable);
-  const shouldRenderActions = useSelector(calculateShouldRenderActionsInPositionsTable);
+  const shouldRenderActions = useSelector(
+    calculateShouldRenderActionsInPositionsTable(showClosePositionAction)
+  );
   const isWaitingForOrderToIndex = useSelector(calculateHasUncommittedOrders);
   const showCurrentMarket = isTablet || view === PanelView.CurrentMarket;
 
   const fillsTagNumber = shortenNumberForDisplay(showCurrentMarket ? numFills : numTotalFills);
-
   const ordersTagNumber = shortenNumberForDisplay(
     showCurrentMarket ? numOpenOrders : numTotalOpenOrders
   );
@@ -139,6 +142,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
                     shouldRenderActions && PositionsTableColumnKey.Actions,
                   ].filter(isTruthy)
             }
+            showClosePositionAction={showClosePositionAction}
             onNavigate={() => setView(PanelView.CurrentMarket)}
             navigateToOrders={onViewOrders}
           />

diff --git a/src/state/accountCalculators.ts b/src/state/accountCalculators.ts
@@ -98,7 +98,9 @@ export const calculateShouldRenderTriggersInPositionsTable = createSelector(
 /**
  * @description calculate whether positions table should render actions column
  */
-export const calculateShouldRenderActionsInPositionsTable = createSelector(
-  [calculateIsAccountViewOnly],
-  (isAccountViewOnly: boolean) => !isAccountViewOnly
-);
+export const calculateShouldRenderActionsInPositionsTable = (isCloseActionShown: boolean) =>
+  createSelector(
+    [calculateIsAccountViewOnly, calculateShouldRenderTriggersInPositionsTable],
+    (isAccountViewOnly: boolean, areTriggersRendered: boolean) =>
+      !isAccountViewOnly && (areTriggersRendered || isCloseActionShown)
+  );
diff --git a/src/views/tables/PositionsTable.tsx b/src/views/tables/PositionsTable.tsx
@@ -75,12 +75,14 @@ const getPositionsTableColumnDef = ({
   stringGetter,
   width,
   isAccountViewOnly,
+  showClosePositionAction,
   navigateToOrders,
 }: {
   key: PositionsTableColumnKey;
   stringGetter: StringGetterFunction;
   width?: ColumnSize;
   isAccountViewOnly: boolean;
+  showClosePositionAction: boolean;
   navigateToOrders: (market: string) => void;
 }) => ({
   width,
@@ -338,6 +340,7 @@ const getPositionsTableColumnDef = ({
             marketId={id}
             assetId={assetId}
             isDisabled={isAccountViewOnly}
+            showClosePositionAction={showClosePositionAction}
             stopLossOrders={stopLossOrders}
             takeProfitOrders={takeProfitOrders}
             navigateToMarketOrders={navigateToOrders}
@@ -353,6 +356,7 @@ type ElementProps = {
   columnWidths?: Partial<Record<PositionsTableColumnKey, ColumnSize>>;
   currentRoute?: string;
   currentMarket?: string;
+  showClosePositionAction: boolean;
   onNavigate?: () => void;
   navigateToOrders: (market: string) => void;
 };
@@ -367,6 +371,7 @@ export const PositionsTable = ({
   columnWidths,
   currentRoute,
   currentMarket,
+  showClosePositionAction,
   onNavigate,
   navigateToOrders,
   withGradientCardRows,
@@ -430,6 +435,7 @@ export const PositionsTable = ({
           stringGetter,
           width: columnWidths?.[key],
           isAccountViewOnly,
+          showClosePositionAction,
           navigateToOrders,
         })
       )}

diff --git a/src/views/tables/PositionsTable/PositionsActionsCell.tsx b/src/views/tables/PositionsTable/PositionsActionsCell.tsx
@@ -24,6 +24,7 @@ type ElementProps = {
   stopLossOrders: SubaccountOrder[];
   takeProfitOrders: SubaccountOrder[];
   isDisabled?: boolean;
+  showClosePositionAction: boolean;
   navigateToMarketOrders: (market: string) => void;
 };
 
@@ -33,6 +34,7 @@ export const PositionsActionsCell = ({
   stopLossOrders,
   takeProfitOrders,
   isDisabled,
+  showClosePositionAction,
   navigateToMarketOrders,
 }: ElementProps) => {
   const dispatch = useDispatch();
@@ -81,17 +83,19 @@ export const PositionsActionsCell = ({
           isDisabled={isDisabled}
         />
       )}
-      <Styled.CloseButtonToggle
-        key="closepositions"
-        isToggle={true}
-        isPressed={
-          tradeBoxDialogType === TradeBoxDialogTypes.ClosePosition && currentMarketId === marketId
-        }
-        onPressedChange={onCloseButtonToggle}
-        iconName={IconName.Close}
-        shape={ButtonShape.Square}
-        isDisabled={isDisabled}
-      />
+      {showClosePositionAction && (
+        <Styled.CloseButtonToggle
+          key="closepositions"
+          isToggle={true}
+          isPressed={
+            tradeBoxDialogType === TradeBoxDialogTypes.ClosePosition && currentMarketId === marketId
+          }
+          onPressedChange={onCloseButtonToggle}
+          iconName={IconName.Close}
+          shape={ButtonShape.Square}
+          isDisabled={isDisabled}
+        />
+      )}
     </ActionsTableCell>
   );
 };