[DTRA] Kate/Maryia/DTRA-1279/Redesign: Positions page

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;

packages/core/package.json

@@ -96,8 +96,8 @@
         "@babel/polyfill": "^7.4.4",
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.5.8",
-        "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.2",
+        "@deriv-com/quill-tokens": "^2.0.4",
+        "@deriv-com/quill-ui": "^1.10.13",
         "@deriv-com/translations": "^1.2.3",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",

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 />

packages/reports/src/Stores/Modules/Profit/Helpers/format-response.ts

@@ -0,0 +1,38 @@
+import { formatMoney, toMoment, getSymbolDisplayName, getMarketInformation } from '@deriv/shared';
+import { ActiveSymbols, ProfitTable } from '@deriv/api-types';
+
+export type TTransaction = NonNullable<NonNullable<ProfitTable>['transactions']>[number];
+
+export const formatProfitTableTransactions = (
+    transaction: TTransaction,
+    currency: string,
+    active_symbols: ActiveSymbols = []
+) => {
+    const format_string = 'DD MMM YYYY HH:mm:ss';
+    const purchase_time =
+        transaction.purchase_time && `${toMoment(Number(transaction.purchase_time)).format(format_string)}`;
+    const purchase_time_unix = transaction.purchase_time;
+    const sell_time = transaction.sell_time && `${toMoment(Number(transaction.sell_time)).format(format_string)}`;
+    const payout = transaction.payout ?? NaN;
+    const sell_price = transaction.sell_price ?? NaN;
+    const buy_price = transaction.buy_price ?? NaN;
+    const profit_loss = formatMoney(currency, Number(sell_price - buy_price), true);
+    const display_name = getSymbolDisplayName(
+        active_symbols,
+        getMarketInformation(transaction.shortcode ?? '').underlying
+    );
+
+    return {
+        ...transaction,
+        ...{
+            payout,
+            sell_price,
+            buy_price,
+            profit_loss,
+            sell_time,
+            purchase_time,
+            display_name,
+            purchase_time_unix,
+        },
+    };
+};

packages/reports/src/Stores/useReportsStores.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { useStore } from '@deriv/stores';
 import ProfitStores from './Modules/Profit/profit-store';
 import StatementStores from './Modules/Statement/statement-store';
+import { formatProfitTableTransactions } from './Modules/Profit/Helpers/format-response';
 
 type TOverrideProfitStore = Omit<ProfitStores, 'data' | 'date_from' | 'totals'> & {
     date_from: number;
-    data: { [key: string]: string }[];
+    data: ReturnType<typeof formatProfitTableTransactions>[];
     totals: { [key: string]: unknown };
 };
 
@@ -39,7 +40,7 @@ type TOverrideStatementStore = Omit<
     suffix_icon: string;
 };
 
-type TReportsStore = {
+export type TReportsStore = {
     profit_table: TOverrideProfitStore;
     statement: TOverrideStatementStore;
 };

packages/shared/src/utils/contract/__tests__/contract.spec.ts

@@ -786,3 +786,76 @@ describe('isForwardStartingBuyTransaction', () => {
         ).toBe(false);
     });
 });
+
+describe('getCurrentTick', () => {
+    const tickStreamWithFourTicks = [
+        {
+            epoch: 1716910930,
+            tick: 1338.44,
+            tick_display_value: '1338.44',
+        },
+        {
+            epoch: 1716910932,
+            tick: 1338.71,
+            tick_display_value: '1338.71',
+        },
+        {
+            epoch: 1716910934,
+            tick: 1338.69,
+            tick_display_value: '1338.69',
+        },
+        {
+            epoch: 1716910936,
+            tick: 1338.94,
+            tick_display_value: '1338.94',
+        },
+    ];
+    it('should return tick_passed if tick_passed is available for a non-digit/non-asian contract', () => {
+        const mockedAccuContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.ACCUMULATOR,
+            tick_passed: 2,
+        });
+        expect(ContractUtils.getCurrentTick(mockedAccuContractInfo)).toEqual(2);
+    });
+    it('should return tick_stream.length - 1 if tick_passed is missing for a non-digit/non-asian contract', () => {
+        const mockedRiseContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.RISE,
+            tick_stream: tickStreamWithFourTicks,
+        });
+        expect(ContractUtils.getCurrentTick(mockedRiseContractInfo)).toEqual(3);
+    });
+    it('should return tick_stream.length for a digit/asian contract', () => {
+        const mockedDigitContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.MATCH_DIFF.MATCH,
+            tick_stream: tickStreamWithFourTicks,
+        });
+        const mockedAsianContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.ASIAN.UP,
+            tick_stream: tickStreamWithFourTicks,
+        });
+        expect(ContractUtils.getCurrentTick(mockedDigitContractInfo)).toEqual(4);
+        expect(ContractUtils.getCurrentTick(mockedAsianContractInfo)).toEqual(4);
+    });
+    it('should return 0 if tick_stream is empty/missing for a digit/asian contract', () => {
+        const mockedDigitContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.MATCH_DIFF.MATCH,
+        });
+        const mockedAsianContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.ASIAN.UP,
+            tick_stream: [],
+        });
+        expect(ContractUtils.getCurrentTick(mockedDigitContractInfo)).toEqual(0);
+        expect(ContractUtils.getCurrentTick(mockedAsianContractInfo)).toEqual(0);
+    });
+    it('should return 0 if both tick_stream and tick_passed are empty/missing for a non-digit/non-asian contract', () => {
+        const mockedAccuContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.ACCUMULATOR,
+        });
+        const mockedRiseContractInfo = mockContractInfo({
+            contract_type: CONTRACT_TYPES.RISE,
+            tick_stream: [],
+        });
+        expect(ContractUtils.getCurrentTick(mockedAccuContractInfo)).toEqual(0);
+        expect(ContractUtils.getCurrentTick(mockedRiseContractInfo)).toEqual(0);
+    });
+});

packages/shared/src/utils/contract/contract.tsx

@@ -203,7 +203,7 @@ export const getCurrentTick = (contract_info: TContractInfo) => {
     const current_tick =
         isDigitContract(contract_info.contract_type) || isAsiansContract(contract_info.contract_type)
             ? tick_stream.length
-            : tick_stream.length - 1;
+            : contract_info.tick_passed ?? tick_stream.length - 1;
     return !current_tick || current_tick < 0 ? 0 : current_tick;
 };
 

packages/stores/src/mockStore.ts

@@ -575,6 +575,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             barriers: [],
             error: '',
             getPositionById: jest.fn(),
+            is_active_empty: false,
             is_loading: false,
             is_accumulator: false,
             is_multiplier: false,
@@ -632,6 +633,16 @@ const mock = (): TStores & { is_mock: boolean } => {
                 setAccountType: jest.fn(),
                 setMigratedMT5Accounts: jest.fn(),
             },
+            positions: {
+                openContractTypeFilter: [],
+                closedContractTypeFilter: [],
+                timeFilter: '',
+                customTimeRangeFilter: '',
+                setClosedContractTypeFilter: jest.fn(),
+                setOpenContractTypeFilter: jest.fn(),
+                setTimeFilter: jest.fn(),
+                setCustomTimeRangeFilter: jest.fn(),
+            },
             trade: {
                 accumulator_range_list: [],
                 active_symbols: [],

packages/stores/types.ts

@@ -152,12 +152,14 @@ type BrandConfig = {
 };
 
 export type TPortfolioPosition = {
+    barrier?: number;
     contract_info: ProposalOpenContract &
         Portfolio1 & {
             contract_update?: ContractUpdate;
         };
     details?: string;
     display_name: string;
+    entry_spot?: number;
     id?: number;
     indicative: number;
     payout?: number;
@@ -167,7 +169,9 @@ export type TPortfolioPosition = {
     is_unsupported: boolean;
     contract_update: ProposalOpenContract['limit_order'];
     is_sell_requested: boolean;
+    is_valid_to_sell?: boolean;
     profit_loss: number;
+    status?: null | string;
 };
 
 type TAppRoutingHistory = {
@@ -801,6 +805,7 @@ type TPortfolioStore = {
     barriers: TBarriers;
     error: string;
     getPositionById: (id: number) => TPortfolioPosition;
+    is_active_empty: boolean;
     is_loading: boolean;
     is_multiplier: boolean;
     is_accumulator: boolean;

packages/trader/package.json

@@ -89,8 +89,8 @@
     "dependencies": {
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.5.8",
-        "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.2",
+        "@deriv-com/quill-tokens": "^2.0.4",
+        "@deriv-com/quill-ui": "^1.10.13",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "1.0.172",
         "@deriv/components": "^1.0.0",
@@ -104,6 +104,7 @@
         "@deriv/quill-icons": "^1.22.10",
         "@types/react-loadable": "^5.5.6",
         "classnames": "^2.2.6",
+        "clsx": "^2.1.1",
         "extend": "^3.0.2",
         "formik": "^2.1.4",
         "framer-motion": "^6.5.1",
@@ -121,6 +122,7 @@
         "react-loadable": "^5.5.0",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
+        "react-swipeable": "^6.2.1",
         "react-transition-group": "4.4.2"
     }
 }

packages/trader/src/App/Components/Routes/binary-link.tsx

@@ -3,39 +3,45 @@ import { NavLink } from 'react-router-dom';
 import { findRouteByPath, normalizePath } from './helpers';
 import getRoutesConfig from '../../Constants/routes-config';
 
-type TBinaryLinkProps = React.PropsWithChildren<{
-    active_class?: string;
-    className?: string;
-    to?: string;
-    onClick?: () => void;
-}>;
+type TBinaryLinkProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'title' | 'ref'> &
+    React.PropsWithChildren<{
+        active_class?: string;
+        className?: string;
+        to?: string;
+        onClick?: () => void;
+    }>;
 
 // TODO: solve circular dependency problem
 // when binary link is imported into components present in routes config
 // or into their descendants
-const BinaryLink = ({ active_class = '', to, children, ...props }: TBinaryLinkProps) => {
-    const path = normalizePath(to);
-    const route = findRouteByPath(path, getRoutesConfig());
+const BinaryLink = React.forwardRef<HTMLAnchorElement, TBinaryLinkProps>(
+    ({ active_class = '', to, children, ...props }, ref) => {
+        const path = normalizePath(to);
+        const route = findRouteByPath(path, getRoutesConfig());
 
-    if (!route) {
-        throw new Error(`Route not found: ${to}`);
+        if (!route) {
+            throw new Error(`Route not found: ${to}`);
+        }
+
+        return to ? (
+            <NavLink
+                data-testid='dt_binary_link'
+                to={path}
+                activeClassName={active_class || 'active'}
+                exact={route.exact}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </NavLink>
+        ) : (
+            <a data-testid='dt_binary_link' ref={ref} {...props}>
+                {children}
+            </a>
+        );
     }
+);
 
-    return to ? (
-        <NavLink
-            data-testid='dt_binary_link'
-            to={path}
-            activeClassName={active_class || 'active'}
-            exact={route.exact}
-            {...props}
-        >
-            {children}
-        </NavLink>
-    ) : (
-        <a data-testid='dt_binary_link' {...props}>
-            {children}
-        </a>
-    );
-};
+BinaryLink.displayName = 'BinaryLink';
 
 export default BinaryLink;