From 99c901273283063f78ec79fc90bf6abf4711631f Mon Sep 17 00:00:00 2001
From: maryia-deriv <maryia@binary.com>
Date: Fri, 24 May 2024 16:36:14 +0300
Subject: [PATCH 1/5] refactor: utilize Tag in ContractCardStatusTimer

---
 .../ContractCard/contract-card-status-timer.tsx | 17 ++++++++++-------
 .../Components/ContractCard/contract-card.scss  |  8 +-------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx b/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx
index e309adf877fe..30805add4d31 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TPortfolioPosition } from '@deriv/stores/types';
 import { Localize } from '@deriv/translations';
-import { CaptionText } from '@deriv-com/quill-ui';
+import { Tag } from '@deriv-com/quill-ui';
 import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons';
 import { getCardLabels } from '@deriv/shared';
 import { RemainingTime } from '@deriv/components';
@@ -30,13 +30,16 @@ export const ContractCardStatusTimer = ({
         return <RemainingTime end_time={date_expiry} getCardLabels={getCardLabels} start_time={serverTime} />;
     };
     if (!date_expiry || serverTime.unix() > +date_expiry || isSold) {
-        return <CaptionText className='status'>{getCardLabels().CLOSED}</CaptionText>;
+        return <Tag className='status' label={getCardLabels().CLOSED} variant='custom' color='custom' size='sm' />;
     }
     return (
-        // TODO: when <Tag /> is exported from quill-ui, use it instead
-        <div className='timer'>
-            <LabelPairedStopwatchCaptionRegularIcon />
-            <CaptionText as='div'>{getDisplayedDuration()}</CaptionText>
-        </div>
+        <Tag
+            className='timer'
+            icon={LabelPairedStopwatchCaptionRegularIcon}
+            label={getDisplayedDuration()}
+            variant='custom'
+            color='custom'
+            size='sm'
+        />
     );
 };
diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
index 7fc1cba56025..18ccd8ff88e7 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
@@ -1,4 +1,3 @@
-// TODO: Utilize tokens from quill and logical css properties;
 .contract-card {
     position: relative;
     display: flex;
@@ -33,9 +32,7 @@
         flex-grow: 1;
     }
     .details,
-    .status-and-profit,
-    .status,
-    .timer {
+    .status-and-profit {
         display: flex;
         gap: var(--core-spacing-400);
         align-items: center;
@@ -43,9 +40,6 @@
     .status,
     .timer {
         background-color: var(--core-color-opacity-black-75);
-        height: var(--core-size-1200);
-        padding: 0 var(--core-spacing-400);
-        border-radius: var(--semantic-borderRadius-sm);
 
         .dc-remaining-time {
             font-size: unset;

From 2ecf9ecb4a3c658128083415c4e97d7ef3ae862b Mon Sep 17 00:00:00 2001
From: maryia-deriv <maryia@binary.com>
Date: Fri, 24 May 2024 17:21:08 +0300
Subject: [PATCH 2/5] chore: add opacity transition to buttons when
 revealing/hiding them

---
 .../src/AppV2/Components/ContractCard/contract-card.scss  | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
index 18ccd8ff88e7..15913cb3b57f 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
@@ -81,6 +81,8 @@
         inset-inline-end: 0;
         inset-block-end: 0;
         transform: translateX(100%);
+        opacity: var(--core-opacity-50);
+        transition: opacity var(--core-motion-duration-200) var(--motion-easing-inandout);
 
         button {
             width: var(--core-size-3600);
@@ -217,4 +219,10 @@
             }
         }
     }
+    &.show-buttons,
+    &-list--has-buttons-demo {
+        .buttons {
+            opacity: var(--core-opacity-1300);
+        }
+    }
 }

From 42953a2ec4200ad1cdd0ea8fcd8350d3256b1760 Mon Sep 17 00:00:00 2001
From: maryia-deriv <maryia@binary.com>
Date: Mon, 27 May 2024 10:53:00 +0300
Subject: [PATCH 3/5] feat: add total profit + improve card

---
 .../remaining-time/remaining-time.tsx         |  6 +-
 .../contract-card-status-timer.tsx            |  2 +-
 .../ContractCard/contract-card.scss           | 29 ++++-----
 .../Components/ContractCard/contract-card.tsx | 62 +++++++++++--------
 .../Positions/positions-content.tsx           | 12 +++-
 .../AppV2/Containers/Positions/positions.scss | 24 +++++++
 .../Positions/total-profit-loss.tsx           | 31 ++++++++++
 .../trader/src/AppV2/Utils/positions-utils.ts | 15 ++++-
 8 files changed, 135 insertions(+), 46 deletions(-)
 create mode 100644 packages/trader/src/AppV2/Containers/Positions/total-profit-loss.tsx

diff --git a/packages/components/src/components/remaining-time/remaining-time.tsx b/packages/components/src/components/remaining-time/remaining-time.tsx
index 047336f831dd..293b11be71eb 100644
--- a/packages/components/src/components/remaining-time/remaining-time.tsx
+++ b/packages/components/src/components/remaining-time/remaining-time.tsx
@@ -6,13 +6,15 @@ import { formatDuration, getDiffDuration } from '@deriv/shared';
 import { TGetCardLables } from '../types';
 
 type TRemainingTimeProps = {
+    as?: React.ElementType;
     end_time?: number;
     start_time: moment.Moment;
     format?: string;
     getCardLabels: TGetCardLables;
 };
 
-const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => {
+const RemainingTime = ({ as = 'div', end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => {
+    const Tag = as;
     if (!end_time || start_time.unix() > +end_time) {
         return <React.Fragment>{''}</React.Fragment>;
     }
@@ -24,7 +26,7 @@ const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemaini
     }
     const is_zeroes = /^00:00$/.test(remaining_time);
 
-    return <React.Fragment>{!is_zeroes && <div className='dc-remaining-time'>{remaining_time}</div>}</React.Fragment>;
+    return <React.Fragment>{!is_zeroes && <Tag className='dc-remaining-time'>{remaining_time}</Tag>}</React.Fragment>;
 };
 
 export default RemainingTime;
diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx b/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx
index 30805add4d31..ce6f17edf70b 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card-status-timer.tsx
@@ -27,7 +27,7 @@ export const ContractCardStatusTimer = ({
         if (tick_count) {
             return `${currentTick ?? 0}/${tick_count} ${getCardLabels().TICKS.toLowerCase()}`;
         }
-        return <RemainingTime end_time={date_expiry} getCardLabels={getCardLabels} start_time={serverTime} />;
+        return <RemainingTime as='span' end_time={date_expiry} getCardLabels={getCardLabels} start_time={serverTime} />;
     };
     if (!date_expiry || serverTime.unix() > +date_expiry || isSold) {
         return <Tag className='status' label={getCardLabels().CLOSED} variant='custom' color='custom' size='sm' />;
diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
index 15913cb3b57f..f9004e52a96d 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
@@ -10,28 +10,25 @@
     transform: translateX(0);
     transition: transform var(--core-motion-duration-200) var(--motion-easing-inandout);
 
-    .icon,
     .dc-icon {
-        position: relative;
         display: flex;
         flex-shrink: 0;
         justify-content: center;
         align-items: center;
         width: var(--core-size-1600);
         height: var(--core-size-1600);
-        cursor: pointer;
     }
-    .body {
+    &__body {
         display: flex;
         flex-direction: column;
         gap: var(--semantic-spacing-gap-md);
     }
-    .body,
-    .title {
+    &__body,
+    &__title {
         min-width: 0;
         flex-grow: 1;
     }
-    .details,
+    &__details,
     .status-and-profit {
         display: flex;
         gap: var(--core-spacing-400);
@@ -48,7 +45,7 @@
     .status-and-profit {
         justify-content: space-between;
     }
-    .title {
+    &__title {
         display: flex;
         flex-direction: column;
     }
@@ -58,7 +55,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
 
-        &__icon {
+        &-icon {
             padding: var(--core-size-200);
         }
     }
@@ -85,16 +82,20 @@
         transition: opacity var(--core-motion-duration-200) var(--motion-easing-inandout);
 
         button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             width: var(--core-size-3600);
             height: 100%;
+            cursor: pointer;
 
-            div {
+            .label {
                 color: var(--core-color-solid-slate-50);
             }
             &:disabled:not(.loading) {
                 background-color: var(--core-color-opacity-black-200);
 
-                div {
+                .label {
                     color: var(--component-textIcon-normal-disabled);
                 }
             }
@@ -132,7 +133,7 @@
         }
     }
     &.lost {
-        .total-profit {
+        .profit {
             color: var(--core-color-solid-red-600);
         }
         button:not(:disabled),
@@ -145,7 +146,7 @@
         }
     }
     &.won {
-        .total-profit {
+        .profit {
             color: var(--core-color-solid-green-600);
         }
         button:not(:disabled),
@@ -185,7 +186,7 @@
         flex-direction: column;
         gap: var(--core-spacing-400);
         width: inherit;
-        padding: var(--core-spacing-400);
+        padding: 0 var(--core-spacing-400);
 
         &--has-buttons-demo {
             .contract-card-wrapper:first-child {
diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx b/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx
index 6ddf98ab8e24..cdbad3af9f53 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx
@@ -8,7 +8,6 @@ import {
     getCardLabels,
     getCurrentTick,
     getMarketName,
-    getTotalProfit,
     getTradeTypeName,
     isEnded,
     isHighLow,
@@ -20,6 +19,7 @@ import { ContractCardStatusTimer, TContractCardStatusTimerProps } from './contra
 import { BinaryLink } from 'App/Components/Routes';
 import { TClosedPosition } from 'AppV2/Containers/Positions/positions-content';
 import { TRootStore } from 'Types';
+import { getProfit } from 'AppV2/Utils/positions-utils';
 
 type TContractCardProps = TContractCardStatusTimerProps & {
     className?: string;
@@ -45,7 +45,7 @@ const swipeConfig = {
 };
 
 const ContractCard = ({
-    className,
+    className = 'contract-card',
     contractInfo,
     currency,
     hasActionButtons,
@@ -57,6 +57,8 @@ const ContractCard = ({
     serverTime,
 }: TContractCardProps) => {
     const [isDeleted, setIsDeleted] = React.useState(false);
+    const [isClosing, setIsClosing] = React.useState(false);
+    const [isCanceling, setIsCanceling] = React.useState(false);
     const [shouldShowButtons, setShouldShowButtons] = React.useState(false);
     const { buy_price, contract_type, display_name, sell_time, shortcode } = contractInfo;
     const contract_main_title = getTradeTypeName(contract_type ?? '', {
@@ -71,11 +73,7 @@ const ContractCard = ({
         'underlying_symbol' in contractInfo ? getMarketName(contractInfo.underlying_symbol ?? '') : display_name;
     const isMultiplier = isMultiplierContract(contract_type);
     const isSold = isEnded(contractInfo as TContractInfo);
-    const totalProfit =
-        (contractInfo as TClosedPosition['contract_info']).profit_loss ??
-        (isMultiplierContract(contract_type)
-            ? getTotalProfit(contractInfo as TContractInfo)
-            : (contractInfo as TContractInfo).profit);
+    const totalProfit = getProfit(contractInfo);
     const validToCancel = isValidToCancel(contractInfo as TContractInfo);
     const validToSell = isValidToSell(contractInfo as TContractInfo) && !isSellRequested;
 
@@ -93,7 +91,13 @@ const ContractCard = ({
     const handleClose = (e: React.MouseEvent<HTMLButtonElement>, shouldCancel?: boolean) => {
         e.preventDefault();
         e.stopPropagation();
-        shouldCancel ? onCancel?.(e) : onClose?.(e);
+        if (shouldCancel) {
+            onCancel?.(e);
+            setIsCanceling(true);
+        } else {
+            onClose?.(e);
+            setIsClosing(true);
+        }
     };
 
     React.useEffect(() => {
@@ -104,10 +108,10 @@ const ContractCard = ({
 
     if (!contract_type) return null;
     return (
-        <div className={classNames('contract-card-wrapper', { deleted: isDeleted })}>
+        <div className={classNames(`${className}-wrapper`, { deleted: isDeleted })}>
             <BinaryLink
                 {...(hasActionButtons ? swipeHandlers : {})}
-                className={classNames('contract-card', className, {
+                className={classNames(className, {
                     'show-buttons': shouldShowButtons,
                     'has-cancel-button': validToCancel,
                     lost: Number(totalProfit) < 0,
@@ -117,10 +121,10 @@ const ContractCard = ({
                 onDragStart={e => e.preventDefault()}
                 to={redirectTo}
             >
-                <div className='body'>
-                    <div className='details'>
-                        <IconTradeTypes className='trade-type__icon' type={contract_type ?? ''} size={32} />
-                        <div className='title'>
+                <div className={`${className}__body`}>
+                    <div className={`${className}__details`}>
+                        <IconTradeTypes className='trade-type-icon' type={contract_type ?? ''} size={32} />
+                        <div className={`${className}__title`}>
                             <Text className='trade-type' size='sm'>
                                 {tradeTypeName}
                             </Text>
@@ -140,7 +144,7 @@ const ContractCard = ({
                             serverTime={serverTime}
                             {...contractInfo}
                         />
-                        <Text className='total-profit' size='sm'>
+                        <Text className='profit' size='sm'>
                             <Money amount={totalProfit} currency={currency} has_sign show_currency />
                         </Text>
                     </div>
@@ -149,25 +153,31 @@ const ContractCard = ({
                     <div className='buttons'>
                         {validToCancel && (
                             <button
-                                className={classNames('icon', 'cancel', { loading: isSellRequested })}
-                                aria-label='cancel'
-                                disabled={Number(totalProfit) >= 0}
+                                className={classNames({ loading: isSellRequested && isCanceling })}
+                                disabled={Number((contractInfo as TContractInfo).profit) >= 0}
                                 onClick={e => handleClose(e, true)}
                             >
-                                <CaptionText bold as='div'>
-                                    {isSellRequested ? <div className='circle-loader' /> : getCardLabels().CANCEL}
-                                </CaptionText>
+                                {isSellRequested && isCanceling ? (
+                                    <div className='circle-loader' />
+                                ) : (
+                                    <CaptionText bold as='div' className='label'>
+                                        {getCardLabels().CANCEL}
+                                    </CaptionText>
+                                )}
                             </button>
                         )}
                         <button
-                            className={classNames('icon', 'close', { loading: isSellRequested })}
-                            aria-label='close'
+                            className={classNames({ loading: isSellRequested && isClosing })}
                             disabled={!validToSell}
                             onClick={handleClose}
                         >
-                            <CaptionText bold as='div'>
-                                {isSellRequested ? <div className='circle-loader' /> : getCardLabels().CLOSE}
-                            </CaptionText>
+                            {isSellRequested && isClosing ? (
+                                <div className='circle-loader' />
+                            ) : (
+                                <CaptionText bold as='div' className='label'>
+                                    {getCardLabels().CLOSE}
+                                </CaptionText>
+                            )}
                         </button>
                     </div>
                 )}
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
index 62ad9a955f0b..3030a66d738b 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
+++ b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
@@ -7,8 +7,9 @@ import { EmptyPositions, TEmptyPositionsProps } from 'AppV2/Components/EmptyPosi
 import { TPortfolioPosition } from '@deriv/stores/types';
 import { ContractCardList } from 'AppV2/Components/ContractCard';
 import { ContractTypeFilter, TimeFilter } from 'AppV2/Components/Filter';
-import { filterPositions } from '../../Utils/positions-utils';
+import { filterPositions, getTotalPositionsProfit } from '../../Utils/positions-utils';
 import { TReportsStore, useReportsStore } from '../../../../../reports/src/Stores/useReportsStores';
+import TotalProfitLoss from './total-profit-loss';
 
 type TPositionsContentProps = Omit<TEmptyPositionsProps, 'noMatchesFound'> & {
     hasButtonsDemo?: boolean;
@@ -27,7 +28,7 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
     const [noMatchesFound, setNoMatchesFound] = React.useState(false);
 
     const { common, client, portfolio } = useStore();
-    const { server_time = moment() } = isClosedTab ? {} : common;
+    const { server_time = moment() } = isClosedTab ? {} : common; // Server time is required for cards update in Open positions
     const { currency } = client;
     const { active_positions, is_active_empty, onClickCancel, onClickSell, onMount: onOpenTabMount } = portfolio;
     const {
@@ -97,6 +98,13 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
                     </div>
                 )}
             </div>
+            {shouldShowContractCards && (
+                <TotalProfitLoss
+                    currency={currency}
+                    hasBottomAlignment={isClosedTab}
+                    totalProfitLoss={getTotalPositionsProfit(filteredPositions)}
+                />
+            )}
             {shouldShowEmptyMessage ? (
                 <EmptyPositions isClosedTab={isClosedTab} noMatchesFound={noMatchesFound} />
             ) : (
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions.scss b/packages/trader/src/AppV2/Containers/Positions/positions.scss
index 28507e976032..6be5428d735b 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions.scss
+++ b/packages/trader/src/AppV2/Containers/Positions/positions.scss
@@ -4,6 +4,7 @@ $TABS_HEIGHT: 4.8rem;
 .positions-page {
     height: 100%;
     background-color: var(--core-color-solid-slate-75);
+    position: relative;
 
     .tab-list--container {
         display: block;
@@ -47,4 +48,27 @@ $TABS_HEIGHT: 4.8rem;
     .initial-loader {
         height: 100%;
     }
+    .total-profit-loss {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: var(--core-size-1900);
+        padding: var(--core-spacing-400) var(--core-spacing-800);
+
+        &.bottom {
+            position: absolute;
+            inset-block-end: 0;
+            z-index: 1;
+            background-color: var(--component-modal-bg);
+            box-shadow: var(--core-elevation-shadow-210);
+        }
+        &__amount {
+            &.positive {
+                color: var(--core-color-solid-green-600);
+            }
+            &.negative {
+                color: var(--core-color-solid-red-600);
+            }
+        }
+    }
 }
diff --git a/packages/trader/src/AppV2/Containers/Positions/total-profit-loss.tsx b/packages/trader/src/AppV2/Containers/Positions/total-profit-loss.tsx
new file mode 100644
index 000000000000..2f81765120e7
--- /dev/null
+++ b/packages/trader/src/AppV2/Containers/Positions/total-profit-loss.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text } from '@deriv-com/quill-ui';
+import { getCardLabels } from '@deriv/shared';
+import { Money } from '@deriv/components';
+import classNames from 'classnames';
+
+type TTotalProfitLossProps = {
+    currency?: string;
+    hasBottomAlignment?: boolean;
+    totalProfitLoss: number;
+};
+
+const TotalProfitLoss = ({ currency, hasBottomAlignment, totalProfitLoss }: TTotalProfitLossProps) => (
+    <div className={classNames('total-profit-loss', { bottom: hasBottomAlignment })}>
+        <Text bold size='sm'>
+            {getCardLabels().TOTAL_PROFIT_LOSS}
+        </Text>
+        <Text
+            className={classNames('total-profit-loss__amount', {
+                positive: totalProfitLoss > 0,
+                negative: totalProfitLoss < 0,
+            })}
+            bold
+            size='sm'
+        >
+            <Money amount={totalProfitLoss} currency={currency} show_currency has_sign />
+        </Text>
+    </div>
+);
+
+export default TotalProfitLoss;
diff --git a/packages/trader/src/AppV2/Utils/positions-utils.ts b/packages/trader/src/AppV2/Utils/positions-utils.ts
index 921bb3e73787..ce15d37df5c5 100644
--- a/packages/trader/src/AppV2/Utils/positions-utils.ts
+++ b/packages/trader/src/AppV2/Utils/positions-utils.ts
@@ -1,4 +1,4 @@
-import { getSupportedContracts, isHighLow } from '@deriv/shared';
+import { getSupportedContracts, getTotalProfit, isHighLow, isMultiplierContract } from '@deriv/shared';
 import { TPortfolioPosition } from '@deriv/stores/types';
 import { TClosedPosition } from 'AppV2/Containers/Positions/positions-content';
 
@@ -15,3 +15,16 @@ export const filterPositions = (positions: (TPortfolioPosition | TClosedPosition
         return splittedFilter.includes('main_title' in config ? config.main_title : config.name);
     });
 };
+
+export const getProfit = (contract_info: TPortfolioPosition['contract_info'] | TClosedPosition['contract_info']) => {
+    return (
+        (contract_info as TClosedPosition['contract_info']).profit_loss ??
+        (isMultiplierContract(contract_info.contract_type)
+            ? getTotalProfit(contract_info as TPortfolioPosition['contract_info'])
+            : (contract_info as TPortfolioPosition['contract_info']).profit)
+    );
+};
+
+export const getTotalPositionsProfit = (positions: (TPortfolioPosition | TClosedPosition)[]) => {
+    return positions.reduce((sum, { contract_info }) => sum + Number(getProfit(contract_info)), 0);
+};

From 8211117ef613eb7cbf65f293eba3327c16228eeb Mon Sep 17 00:00:00 2001
From: maryia-deriv <maryia@binary.com>
Date: Mon, 27 May 2024 16:38:11 +0300
Subject: [PATCH 4/5] fix: card deletion transition + total pnl positioning

---
 packages/reports/src/Containers/open-positions.tsx           | 3 +--
 .../src/AppV2/Components/ContractCard/contract-card.scss     | 5 +++--
 .../src/AppV2/Components/ContractCard/contract-card.tsx      | 4 ++--
 .../src/AppV2/Containers/Positions/positions-content.tsx     | 5 +++++
 .../trader/src/AppV2/Containers/Positions/positions.scss     | 5 +++--
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/reports/src/Containers/open-positions.tsx b/packages/reports/src/Containers/open-positions.tsx
index d158e5cdd9e1..b6b5bff9c95e 100644
--- a/packages/reports/src/Containers/open-positions.tsx
+++ b/packages/reports/src/Containers/open-positions.tsx
@@ -655,8 +655,7 @@ const OpenPositions = observer(({ component_icon, ...props }: TOpenPositions) =>
             />
         );
     };
-    // TODO: Uncomment and update this when DTrader 2.0 development starts:
-    // if (useFeatureFlags().is_dtrader_v2_enabled) return <Text size='l'>I am Open positions for DTrader 2.0.</Text>;
+
     return (
         <React.Fragment>
             <NotificationMessages />
diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
index 3ec3846c47bf..272a0152c178 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card.scss
@@ -169,14 +169,15 @@
         position: relative;
         width: inherit;
         overflow: hidden;
-        min-height: 10.4rem; // equal to __item's height of 104px, must be an exact value for item deletion transition to work
+        flex-shrink: 0;
+        max-height: 10.4rem; // Update carefully: max-height in exact units is needed for transition below to work
         box-shadow: var(--core-elevation-shadow-130);
         border-radius: var(--semantic-borderRadius-md);
 
         &.deleted {
             opacity: var(--core-opacity-50);
             max-height: 0;
-            transition: max-height 0.3s, opacity 0.3s;
+            transition: max-height 0.3s, opacity 0.1s;
             transition-timing-function: var(--motion-easing-out);
         }
     }
diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx b/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx
index 84ee88c95ee9..8ac293c12bf0 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-card.tsx
@@ -72,7 +72,7 @@ const ContractCard = ({
     const symbolName =
         'underlying_symbol' in contractInfo ? getMarketName(contractInfo.underlying_symbol ?? '') : display_name;
     const isMultiplier = isMultiplierContract(contract_type);
-    const isSold = isEnded(contractInfo as TContractInfo);
+    const isSold = !!sell_time || isEnded(contractInfo as TContractInfo);
     const totalProfit = getProfit(contractInfo);
     const validToCancel = isValidToCancel(contractInfo as TContractInfo);
     const validToSell = isValidToSell(contractInfo as TContractInfo) && !isSellRequested;
@@ -140,7 +140,7 @@ const ContractCard = ({
                         <ContractCardStatusTimer
                             currentTick={currentTick}
                             hasNoAutoExpiry={isMultiplier}
-                            isSold={!!sell_time || isSold}
+                            isSold={isSold}
                             serverTime={serverTime}
                             {...contractInfo}
                         />
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
index 32815241eb91..1ada13494bb0 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
+++ b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
@@ -37,6 +37,7 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
         is_empty,
         is_loading: isLoading,
         onMount: onClosedTabMount,
+        onUnmount: onClosedTabUnmount,
         handleDateChange,
     } = useReportsStore().profit_table;
     const closedPositions = React.useMemo(() => data.map(d => ({ contract_info: d })), [data]);
@@ -51,6 +52,10 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
 
     React.useEffect(() => {
         isClosedTab ? onClosedTabMount() : onOpenTabMount();
+
+        return () => {
+            isClosedTab && onClosedTabUnmount();
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions.scss b/packages/trader/src/AppV2/Containers/Positions/positions.scss
index d581e44481d7..3eef01aeb44c 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions.scss
+++ b/packages/trader/src/AppV2/Containers/Positions/positions.scss
@@ -52,15 +52,16 @@ $TABS_HEIGHT: 4.8rem;
         display: flex;
         justify-content: space-between;
         width: 100%;
-        height: var(--core-size-1900);
-        padding: var(--core-spacing-400) var(--core-spacing-800);
+        padding: var(--core-spacing-400) var(--core-spacing-800) 0 var(--core-spacing-800);
 
         &.bottom {
             position: absolute;
+            inset-inline-start: 0;
             inset-block-end: 0;
             z-index: 1;
             background-color: var(--component-modal-bg);
             box-shadow: var(--core-elevation-shadow-210);
+            padding: var(--core-spacing-400) var(--core-spacing-800);
         }
         &__amount {
             &.positive {

From 1163533148e566173af96e14f65c1dc12a4722ae Mon Sep 17 00:00:00 2001
From: maryia-deriv <maryia@binary.com>
Date: Mon, 27 May 2024 18:38:22 +0300
Subject: [PATCH 5/5] feat: add pagination on scroll (initial version)

---
 .../ContractCard/__tests__/contract-cards-sections.spec.tsx  | 1 +
 .../Components/ContractCard/contract-cards-sections.tsx      | 5 +++--
 .../src/AppV2/Containers/Positions/positions-content.tsx     | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/trader/src/AppV2/Components/ContractCard/__tests__/contract-cards-sections.spec.tsx b/packages/trader/src/AppV2/Components/ContractCard/__tests__/contract-cards-sections.spec.tsx
index 497bff2ae4a5..3cdde3b29d65 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/__tests__/contract-cards-sections.spec.tsx
+++ b/packages/trader/src/AppV2/Components/ContractCard/__tests__/contract-cards-sections.spec.tsx
@@ -7,6 +7,7 @@ const ContractCard = 'Contract Card';
 jest.mock('../contract-card', () => jest.fn(() => <div>{ContractCard}</div>));
 
 const mockProps = {
+    onScroll: jest.fn(),
     positions: [
         {
             contract_info: {
diff --git a/packages/trader/src/AppV2/Components/ContractCard/contract-cards-sections.tsx b/packages/trader/src/AppV2/Components/ContractCard/contract-cards-sections.tsx
index 9f0d994c598b..1079caf95012 100644
--- a/packages/trader/src/AppV2/Components/ContractCard/contract-cards-sections.tsx
+++ b/packages/trader/src/AppV2/Components/ContractCard/contract-cards-sections.tsx
@@ -6,10 +6,11 @@ import { formatDate } from 'AppV2/Utils/positions-utils';
 import ContractCardList from './contract-card-list';
 
 type TContractCardsSections = {
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
     positions?: (TClosedPosition | TPortfolioPosition)[];
 };
 
-const ContractCardsSections = ({ positions }: TContractCardsSections) => {
+const ContractCardsSections = ({ onScroll, positions }: TContractCardsSections) => {
     const dates = positions?.map(element => {
         const sellTime = element.contract_info.sell_time;
         return sellTime && formatDate({ time: sellTime });
@@ -19,7 +20,7 @@ const ContractCardsSections = ({ positions }: TContractCardsSections) => {
 
     if (!positions?.length) return null;
     return (
-        <div className='contract-cards-sections'>
+        <div className='contract-cards-sections' onScroll={onScroll}>
             {uniqueDates.map(date => (
                 <div className='contract-cards-section' key={date}>
                     <Text as='p' className='contract-cards-section__title' bold size='sm'>
diff --git a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
index 1ada13494bb0..a07caa64c830 100644
--- a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
+++ b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
@@ -34,6 +34,7 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
     const { active_positions, is_active_empty, onClickCancel, onClickSell, onMount: onOpenTabMount } = portfolio;
     const {
         data,
+        handleScroll,
         is_empty,
         is_loading: isLoading,
         onMount: onClosedTabMount,
@@ -119,7 +120,7 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
             ) : (
                 shouldShowContractCards &&
                 (isClosedTab ? (
-                    <ContractCardsSections positions={filteredPositions} />
+                    <ContractCardsSections positions={filteredPositions} onScroll={handleScroll} />
                 ) : (
                     <ContractCardList
                         currency={currency}