[CFDS]/Hasan/CFDS-4006/Ctrader strategy provider

packages/api-v2/src/hooks/__tests__/useAvailableCTraderAccounts.spec.ts

@@ -0,0 +1,78 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useQuery from '../../useQuery';
+import useAvailableCTraderAccounts from '../useAvailableCTraderAccounts';
+
+jest.mock('../../useQuery');
+
+describe('useAvailableCTraderAccounts', () => {
+    const mockUseQuery = useQuery as jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('returns modified accounts when data is available', () => {
+        const mockData = {
+            trading_platform_available_accounts: [
+                { market_type: 'gaming', someOtherField: 'value1' },
+                { market_type: 'financial', someOtherField: 'value2' },
+            ],
+        };
+
+        mockUseQuery.mockReturnValue({
+            data: mockData,
+            isLoading: false,
+            isError: false,
+        });
+
+        const { result } = renderHook(() => useAvailableCTraderAccounts());
+
+        expect(result.current.data).toEqual([
+            { market_type: 'synthetic', platform: 'ctrader', leverage: 500, someOtherField: 'value1' },
+            { market_type: 'financial', platform: 'ctrader', leverage: 1000, someOtherField: 'value2' },
+        ]);
+    });
+
+    it('returns empty array when no accounts are available', () => {
+        mockUseQuery.mockReturnValue({
+            data: null,
+            isLoading: false,
+            isError: false,
+        });
+
+        const { result } = renderHook(() => useAvailableCTraderAccounts());
+
+        expect(result.current.data).toBe(undefined);
+    });
+
+    it('passes through other fields from useAuthorizedQuery', () => {
+        mockUseQuery.mockReturnValue({
+            data: null,
+            isLoading: true,
+            isError: false,
+        });
+
+        const { result } = renderHook(() => useAvailableCTraderAccounts());
+
+        expect(result.current.isLoading).toBe(true);
+        expect(result.current.isError).toBe(false);
+    });
+
+    it('handles account types not in the mapper', () => {
+        const mockData = {
+            trading_platform_available_accounts: [{ market_type: 'unknown', someOtherField: 'value' }],
+        };
+
+        mockUseQuery.mockReturnValue({
+            data: mockData,
+            isLoading: false,
+            isError: false,
+        });
+
+        const { result } = renderHook(() => useAvailableCTraderAccounts());
+
+        expect(result.current.data).toEqual([
+            { market_type: 'unknown', platform: 'ctrader', leverage: undefined, someOtherField: 'value' },
+        ]);
+    });
+});

packages/api-v2/src/hooks/index.ts

@@ -10,6 +10,7 @@ export { default as useAllWalletAccounts } from './useAllWalletAccounts';
 export { default as useAuthentication } from './useAuthentication';
 export { default as useAuthorize } from './useAuthorize';
 export { default as useAccesiblePlatforms } from './useAccesiblePlatforms';
+export { default as useAvailableCTraderAccounts } from './useAvailableCTraderAccounts';
 export { default as useAvailableMT5Accounts } from './useAvailableMT5Accounts';
 export { default as useAvailableWallets } from './useAvailableWallets';
 export { default as useBalance } from './useBalance';

packages/api-v2/src/hooks/useAvailableCTraderAccounts.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import useQuery from '../useQuery';
+
+const market_type_to_leverage_mapper: Record<string, number> = {
+    gaming: 500,
+    financial: 1000,
+    all: 100,
+};
+
+/** A custom hook to get the list of available CTrader accounts. */
+const useAvailableCTraderAccounts = () => {
+    const { data: ctrader_available_accounts, ...rest } = useQuery('trading_platform_available_accounts', {
+        payload: { platform: 'ctrader' },
+    });
+
+    const modified_ctrader_available_accounts = useMemo(
+        () =>
+            ctrader_available_accounts?.trading_platform_available_accounts?.map(account => {
+                return {
+                    ...account,
+                    /** The market type for the account */
+                    market_type: account.market_type === 'gaming' ? 'synthetic' : account.market_type,
+                    /** The platform for the account */
+                    platform: 'ctrader',
+                    /** Leverage for the account */
+                    leverage:
+                        market_type_to_leverage_mapper[
+                            account.market_type as keyof typeof market_type_to_leverage_mapper
+                        ],
+                } as const;
+            }),
+        [ctrader_available_accounts?.trading_platform_available_accounts]
+    );
+
+    return {
+        /** The available ctrader accounts */
+        data: modified_ctrader_available_accounts,
+        ...rest,
+    };
+};
+
+export default useAvailableCTraderAccounts;

packages/api-v2/types.ts

@@ -1612,6 +1612,10 @@ type TPrivateSocketEndpoints = {
              */
             trading_platform_available_accounts?:
                 | {
+                      /**
+                       * The number of accounts a user has already created on the trading platform.
+                       */
+                      available_count?: number;
                       /**
                        * A list of Deriv landing companies that can work with this account type
                        */

packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss

@@ -13,6 +13,7 @@
     }
 
     &--vertical {
-        flex-direction: column;
+        grid-auto-flow: row;
+        grid-template-columns: 1fr;
     }
 }

packages/wallets/src/components/ModalProvider/ModalProvider.tsx

@@ -12,7 +12,7 @@ type TModalState = {
     selectedJurisdiction?: THooks.AvailableMT5Accounts['shortcode'];
 };
 
-type TModalContext = {
+export type TModalContext = {
     getModalState: <T extends keyof TModalState>(key: T) => TModalState[T];
     hide: () => void;
     isOpen: boolean;

packages/wallets/src/components/ModalProvider/index.ts

@@ -1,3 +1,3 @@
-import ModalProvider, { useModal } from './ModalProvider';
+import ModalProvider, { type TModalContext, useModal } from './ModalProvider';
 
-export { ModalProvider, useModal };
+export { ModalProvider, TModalContext, useModal };

packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useCtraderAccountsList } from '@deriv/api-v2';
+import { displayMoney } from '@deriv/api-v2/src/utils';
 import {
     LabelPairedChevronLeftCaptionRegularIcon,
     LabelPairedChevronRightCaptionRegularIcon,
@@ -8,14 +9,27 @@ import { Text } from '@deriv-com/ui';
 import { TradingAccountCard } from '../../../../../components';
 import { useModal } from '../../../../../components/ModalProvider';
 import useIsRtl from '../../../../../hooks/useIsRtl';
+import { calculateTotalByKey } from '../../../../../utils/calculate-total-by-key';
 import { PlatformDetails } from '../../../constants';
 import { MT5TradeModal } from '../../../modals';
 
 const AddedCTraderAccountsList: React.FC = () => {
     const { data: cTraderAccounts } = useCtraderAccountsList();
+    const account = cTraderAccounts?.[0];
     const { show } = useModal();
     const isRtl = useIsRtl();
 
+    const totalBalance = useMemo(() => {
+        if (cTraderAccounts) {
+            return calculateTotalByKey(cTraderAccounts, 'display_balance');
+        }
+        return 0;
+    }, [cTraderAccounts]);
+
+    const displayBalance = displayMoney(totalBalance, account?.currency || 'USD', {
+        fractional_digits: account?.currency_config?.fractional_digits,
+    });
+
     return (
         <React.Fragment>
             {cTraderAccounts?.map((account, index) => (
@@ -28,9 +42,11 @@ const AddedCTraderAccountsList: React.FC = () => {
                         <Text align='start' size='sm'>
                             {PlatformDetails.ctrader.title}
                         </Text>
-                        <Text align='start' size='sm' weight='bold'>
-                            {account?.display_balance}
-                        </Text>
+                        {totalBalance !== undefined && (
+                            <Text align='start' size='sm' weight='bold'>
+                                {displayBalance}
+                            </Text>
+                        )}
                         <Text align='start' size='xs'>
                             {account.login}
                         </Text>

packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/__tests__/AddedCTraderAccountsList.spec.tsx

@@ -1,66 +1,73 @@
-import React from 'react';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import React, { PropsWithChildren } from 'react';
 import { useCtraderAccountsList } from '@deriv/api-v2';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { ModalProvider } from '../../../../../../components/ModalProvider';
+import { ModalProvider, TModalContext, useModal } from '../../../../../../components/ModalProvider';
+import { calculateTotalByKey } from '../../../../../../utils/calculate-total-by-key';
+import { PlatformDetails } from '../../../../constants';
+import { MT5TradeModal } from '../../../../modals';
 import AddedCTraderAccountsList from '../AddedCTraderAccountsList';
 
-jest.mock('@deriv/api-v2', () => ({
-    useCtraderAccountsList: jest.fn(),
+jest.mock('@deriv/api-v2');
+jest.mock('../../../../../../utils/calculate-total-by-key', () => ({
+    calculateTotalByKey: jest.fn(),
 }));
-
-jest.mock('../../../../modals', () => ({
-    MT5TradeModal: () => <div>Mocked MT5 Trade Modal</div>,
+const mockModalShow = jest.fn();
+jest.mock('../../../../../../components/ModalProvider', () => ({
+    ...jest.requireActual('../../../../../../components/ModalProvider'),
+    useModal: jest.fn(() => ({
+        ...jest.requireActual('../../../../../../components/ModalProvider').useModal(),
+        show: mockModalShow,
+    })),
 }));
 
+const mockAccount = { balance: 2000, currency: 'USD', market_type: 'financial' };
+
+const wrapper = ({ children }: PropsWithChildren) => <ModalProvider>{children}</ModalProvider>;
+
 describe('AddedCTraderAccountsList', () => {
-    let $modalContainer: HTMLDivElement;
-    const history = createMemoryHistory();
-    const mockAccounts = [
-        { display_balance: '1000', login: '123' },
-        { display_balance: '2000', login: '456' },
-    ];
+    const mockUseCtraderAccountsList = useCtraderAccountsList as jest.Mock;
+    const mockUseModal = useModal as jest.MockedFunction<() => TModalContext>;
+    const mockCalculateTotalBalance = calculateTotalByKey as jest.MockedFunction<typeof calculateTotalByKey>;
+    const mockShowModal = jest.fn();
 
     beforeEach(() => {
         jest.clearAllMocks();
-        $modalContainer = document.createElement('div');
-        $modalContainer.id = 'wallets_modal_root';
-        document.body.appendChild($modalContainer);
-        (useCtraderAccountsList as jest.Mock).mockReturnValue({
-            data: mockAccounts,
+        mockUseModal.mockReturnValue({
+            getModalState: jest.fn(),
+            hide: jest.fn(),
+            isOpen: false,
+            setModalOptions: jest.fn(),
+            setModalState: jest.fn(),
+            show: mockShowModal,
         });
     });
 
-    afterEach(() => {
-        document.body.removeChild($modalContainer);
+    it('should render nothing when there are no accounts', () => {
+        mockUseCtraderAccountsList.mockReturnValue({ data: null });
+
+        render(<AddedCTraderAccountsList />, { wrapper });
+
+        expect(screen.queryByTestId('dt_wallets_trading_account_card')).not.toBeInTheDocument();
     });
 
-    it('renders TradingAccountCard with cTraderAccounts', () => {
-        render(
-            <Router history={history}>
-                <ModalProvider>
-                    <AddedCTraderAccountsList />
-                </ModalProvider>
-            </Router>
-        );
+    it('should render the trading account card with account details', () => {
+        mockUseCtraderAccountsList.mockReturnValue({ data: [mockAccount] });
+        mockCalculateTotalBalance.mockReturnValue('2000.00');
 
-        mockAccounts.forEach(account => {
-            expect(screen.getByText(account.login)).toBeInTheDocument();
-            expect(screen.getByText(account.display_balance)).toBeInTheDocument();
-        });
+        render(<AddedCTraderAccountsList />, { wrapper });
+        expect(screen.getByTestId('dt_wallets_trading_account_card')).toBeInTheDocument();
+        expect(screen.getByText(PlatformDetails.ctrader.title)).toBeInTheDocument();
+        expect(screen.getByText('2,000.00 USD')).toBeInTheDocument();
     });
 
-    it('should show modal on click of cTrader account', () => {
-        render(
-            <Router history={history}>
-                <ModalProvider>
-                    <AddedCTraderAccountsList />
-                </ModalProvider>
-            </Router>
-        );
+    it('should open the MT5TradeModal when the trading account card is clicked', () => {
+        mockUseCtraderAccountsList.mockReturnValue({ data: [mockAccount] });
+        mockCalculateTotalBalance.mockReturnValue('2000.00');
+
+        render(<AddedCTraderAccountsList />);
+
+        fireEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
 
-        fireEvent.click(screen.getAllByTestId('dt_wallets_trading_account_card')[0]);
-        expect(screen.getByText('Mocked MT5 Trade Modal')).toBeInTheDocument();
+        expect(mockShowModal).toHaveBeenCalledWith(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />);
     });
 });

packages/wallets/src/features/cfd/modals/CTraderAddAccountSuccessModal/CTraderAddAccountSuccessModal.scss

@@ -0,0 +1,15 @@
+.wallets-ctrader-account-add-success-modal {
+    max-width: 44rem;
+    padding: 2.4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    background-color: var(--general-main-1, #ffffff);
+    border-radius: 0.8rem;
+
+    @include mobile {
+        width: 100%;
+        padding-inline: 1.6rem;
+        gap: 1.6rem;
+    }
+}

packages/wallets/src/features/cfd/modals/CTraderAddAccountSuccessModal/CTraderAddAccountSuccessModal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Localize } from '@deriv-com/translations';
+import { ActionScreen, Button } from '@deriv-com/ui';
+import { ModalWrapper, WalletButtonGroup } from '../../../../components';
+import { useModal } from '../../../../components/ModalProvider';
+import SuccessIcon from './SuccessIcon';
+import './CTraderAddAccountSuccessModal.scss';
+
+const CTraderAddAccountSuccessModal = () => {
+    const history = useHistory();
+    const { hide } = useModal();
+    const onClickTransferNow = () => {
+        hide();
+        history.push('/wallet/withdrawal');
+    };
+    return (
+        <ModalWrapper>
+            <div className='wallets-ctrader-account-add-success-modal'>
+                <ActionScreen
+                    actionButtons={
+                        <WalletButtonGroup>
+                            <Button onClick={hide} size='lg' variant='outlined'>
+                                <Localize i18n_default_text='Maybe later' />
+                            </Button>
+                            <Button onClick={onClickTransferNow} size='lg' variant='contained'>
+                                <Localize i18n_default_text='Transfer now' />
+                            </Button>
+                        </WalletButtonGroup>
+                    }
+                    description={
+                        <Localize i18n_default_text='Congratulations, you have successfully created your real Deriv cTrader account. To start trading,transfer funds from your Deriv account into this account.' />
+                    }
+                    descriptionSize='sm'
+                    icon={<SuccessIcon />}
+                    title={<Localize i18n_default_text='Success!' />}
+                />
+            </div>
+        </ModalWrapper>
+    );
+};
+
+export default CTraderAddAccountSuccessModal;