diff --git a/src/pages/portfolio/Overview.tsx b/src/pages/portfolio/Overview.tsx index 3908a6228..0e8beccda 100644 --- 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 (
@@ -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 /> diff --git a/src/pages/portfolio/Positions.tsx b/src/pages/portfolio/Positions.tsx index ec72b74f6..60b840ae8 100644 --- 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 ( @@ -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 index a89df9ba9..90ff43ab7 100644 --- 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 index f5fe02494..f9526b8c2 100644 --- 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 index 9d6098057..bc9e6b60b 100644 --- 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>; 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 index 92c149d48..c4b12c675 100644 --- 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} /> )} - + {showClosePositionAction && ( + + )} ); };