thisyahlen/feat: cfd created accounts list (#10126)

* chore: refactor tradingaccountcard

* chore: handle created derivx account

* chore: update style in dxtrade

* chore: show ctrader to only virtual wallet and remove derivez from ui

* chore: fix dxtrade length

packages/api/src/hooks/useDxtradeAccountsList.ts

@@ -1,8 +1,10 @@
 import { useMemo } from 'react';
 import useFetch from '../useFetch';
+import useAuthorize from './useAuthorize';
 
 /** A custom hook that gets the list of created Deriv X accounts. */
 const useDxtradeAccountsList = () => {
+    const { data: authorize_data } = useAuthorize();
     const { data: dxtrade_accounts } = useFetch('trading_platform_accounts', {
         payload: { platform: 'dxtrade' },
     });
@@ -12,9 +14,13 @@ const useDxtradeAccountsList = () => {
         () =>
             dxtrade_accounts?.trading_platform_accounts?.map(account => ({
                 ...account,
-                loginid: account.account_id,
+                display_balance: Intl.NumberFormat(authorize_data?.preferred_language || 'en-US', {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                    minimumIntegerDigits: 1,
+                }).format(account?.balance || 0),
             })),
-        [dxtrade_accounts?.trading_platform_accounts]
+        [authorize_data?.preferred_language, dxtrade_accounts?.trading_platform_accounts]
     );
 
     return {

packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss

@@ -0,0 +1,90 @@
+.wallets-available-derivx {
+    &__transfer_button {
+        display: flex;
+        height: 32px;
+        padding: 6px 16px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        border: 1px solid var(--system-light-3-less-prominent-text, #999);
+        cursor: pointer;
+        background: #fff;
+    }
+
+    &__transfer_text {
+        color: var(--system-light-1-prominent-text, #333);
+        text-align: center;
+
+        /* desktop/paragraph/P2 - bold */
+        font-family: 'IBM Plex Sans';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 20px; /* 142.857% */
+    }
+
+    &__open_text {
+        color: var(--system-dark-1-prominent-text, #fff);
+        text-align: center;
+
+        /* desktop/paragraph/P2 - bold */
+        font-family: 'IBM Plex Sans';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 20px; /* 142.857% */
+    }
+
+    &__actions {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    &__details {
+        flex-grow: 1;
+
+        &-loginid {
+            color: var(--system-light-3-less-prominent-text, #999);
+
+            /* desktop/small/S - bold */
+            font-family: 'IBM Plex Sans';
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 18px; /* 150% */
+        }
+
+        &-title {
+            color: var(--system-light-2-general-text, #333);
+
+            /* desktop/paragraph/P2 - bold */
+            font-family: 'IBM Plex Sans';
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 20px; /* 142.857% */
+        }
+
+        &-balance {
+            color: var(--system-light-1-prominent-text, #333);
+
+            /* desktop/paragraph/P2 - bold */
+            font-family: 'IBM Plex Sans';
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 20px; /* 142.857% */
+        }
+
+        &-description {
+            font-size: 1.2rem;
+            line-height: 14px;
+
+            @include mobile {
+                font-size: 1.4rem;
+                line-height: 20px;
+            }
+        }
+    }
+}

packages/wallets/src/components/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useDxtradeAccountsList } from '@deriv/api';
+import DerivX from '../../public/images/derivx.svg';
+import { PrimaryActionButton } from '../PrimaryActionButton';
+import { TradingAccountCard } from '../TradingAccountCard';
+import './AddedDxtradeAccountsList.scss';
+
+const AddedDxtradeAccountsList: React.FC = () => {
+    const { data } = useDxtradeAccountsList();
+
+    return (
+        <TradingAccountCard
+            leading={() => (
+                <div className='wallets-available-derivx__icon'>
+                    <DerivX />
+                </div>
+            )}
+            trailing={() => (
+                <div className='wallets-available-derivx__actions'>
+                    <PrimaryActionButton className='wallets-available-derivx__transfer_button'>
+                        <p className='wallets-available-derivx__transfer_text'>Transfer</p>
+                    </PrimaryActionButton>
+                    <PrimaryActionButton>
+                        <p className='wallets-available-derivx__open_text'>Open</p>
+                    </PrimaryActionButton>
+                </div>
+            )}
+        >
+            <div className='wallets-available-derivx__details'>
+                {data?.map(account => (
+                    <>
+                        <p className='wallets-available-derivx__details-title'>Deriv X</p>
+                        <p className='wallets-available-derivx__details-balance'>
+                            {account?.display_balance} {account?.currency}
+                        </p>
+                        <p className='wallets-available-derivx__details-loginid'>{account.login}</p>
+                    </>
+                ))}
+            </div>
+        </TradingAccountCard>
+    );
+};
+
+export default AddedDxtradeAccountsList;

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

@@ -0,0 +1 @@
+export { default as AddedDxtradeAccountsList } from './AddedDxtradeAccountsList';

packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.scss

@@ -0,0 +1,32 @@
+.wallets-available-derivez {
+    &__text {
+        color: var(--brand-coral, #ff444f);
+        text-align: center;
+
+        /* desktop/paragraph/P2 - bold */
+        font-family: 'IBM Plex Sans';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 20px; /* 142.857% */
+    }
+
+    &__details {
+        flex-grow: 1;
+        &-title {
+            font-weight: bold;
+            font-size: 1.4rem;
+            line-height: 20px;
+        }
+
+        &-description {
+            font-size: 1.2rem;
+            line-height: 14px;
+
+            @include mobile {
+                font-size: 1.4rem;
+                line-height: 20px;
+            }
+        }
+    }
+}

packages/wallets/src/components/AvailableDerivezAccountsList/AvailableDerivezAccountsList.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import DerivEZ from '../../public/images/derivez.svg';
+import { SecondaryActionButton } from '../SecondaryActionButton';
+import { TradingAccountCard } from '../TradingAccountCard';
+import './AvailableDerivezAccountsList.scss';
+
+const AvailableDerivezAccountsList: React.FC = () => {
+    return (
+        <TradingAccountCard
+            leading={() => (
+                <div className='wallets-available-derivez__icon'>
+                    <DerivEZ />
+                </div>
+            )}
+            trailing={() => (
+                <SecondaryActionButton>
+                    <p className='wallets-available-derivez__text'>Get</p>
+                </SecondaryActionButton>
+            )}
+        >
+            <div className='wallets-available-derivez__details'>
+                <p className='wallets-available-derivez__details-title'>Deriv EZ</p>
+                <p className='wallets-available-derivez__details-description'>
+                    This account offers CFDs on an easy-to-get-started CFD trading platform.
+                </p>
+            </div>
+        </TradingAccountCard>
+    );
+};
+
+export default AvailableDerivezAccountsList;

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

@@ -0,0 +1 @@
+export { default as AvailableDerivezAccountsList } from './AvailableDerivezAccountsList';

packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.scss

@@ -0,0 +1,32 @@
+.wallets-available-dxtrade {
+    &__text {
+        color: var(--brand-coral, #ff444f);
+        text-align: center;
+
+        /* desktop/paragraph/P2 - bold */
+        font-family: 'IBM Plex Sans';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 20px; /* 142.857% */
+    }
+
+    &__details {
+        flex-grow: 1;
+        &-title {
+            font-weight: bold;
+            font-size: 1.4rem;
+            line-height: 20px;
+        }
+
+        &-description {
+            font-size: 1.2rem;
+            line-height: 14px;
+
+            @include mobile {
+                font-size: 1.4rem;
+                line-height: 20px;
+            }
+        }
+    }
+}

packages/wallets/src/components/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import DerivX from '../../public/images/derivx.svg';
+import { SecondaryActionButton } from '../SecondaryActionButton';
+import { TradingAccountCard } from '../TradingAccountCard';
+import './AvailableDxtradeAccountsList.scss';
+
+const AvailableDxtradeAccountsList: React.FC = () => {
+    return (
+        <TradingAccountCard
+            leading={() => (
+                <div className='wallets-available-dxtrade__icon'>
+                    <DerivX />
+                </div>
+            )}
+            trailing={() => (
+                <SecondaryActionButton>
+                    <p className='wallets-available-dxtrade__text'>Get</p>
+                </SecondaryActionButton>
+            )}
+        >
+            <div className='wallets-available-dxtrade__details'>
+                <p className='wallets-available-dxtrade__details-title'>Deriv X</p>
+                <p className='wallets-available-dxtrade__details-description'>
+                    This account offers CFDs on a highly customisable CFD trading platform.
+                </p>
+            </div>
+        </TradingAccountCard>
+    );
+};
+
+export default AvailableDxtradeAccountsList;

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

@@ -0,0 +1 @@
+export { default as AvailableDxtradeAccountsList } from './AvailableDxtradeAccountsList';

packages/wallets/src/components/CFDList/CFDList.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import { useActiveWalletAccount } from '@deriv/api';
 import { CTraderList } from '../CTraderList';
 import { MT5List } from '../MT5List';
 import { OtherCFDPlatformsList } from '../OtherCFDPlatformsList';
 import './CFDList.scss';
 
 const CFDList = () => {
+    const { data: active_wallet } = useActiveWalletAccount();
     return (
         <div className='wallets-cfd-list'>
             <section className='wallets-cfd-list__header'>
@@ -21,7 +23,7 @@ const CFDList = () => {
                 </div>
             </section>
             <MT5List />
-            <CTraderList />
+            {active_wallet?.is_virtual && <CTraderList />}
             <OtherCFDPlatformsList />
         </div>
     );

packages/wallets/src/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx

@@ -1,47 +1,20 @@
 import React from 'react';
-import DerivEZ from '../../public/images/derivez.svg';
-import DerivX from '../../public/images/derivx.svg';
-import { SecondaryActionButton } from '../SecondaryActionButton';
-import { TradingAccountCard } from '../TradingAccountCard';
+import { useDxtradeAccountsList } from '@deriv/api';
+import { AddedDxtradeAccountsList } from '../AddedDxtradeAccountsList';
+import { AvailableDxtradeAccountsList } from '../AvailableDxtradeAccountsList';
 import './OtherCFDPlatformsList.scss';
 
-const other_cfd_mapper = [
-    {
-        title: 'Deriv X',
-        description: 'This account offers CFDs on a highly customisable CFD trading platform.',
-        icon: <DerivX />,
-    },
-    {
-        title: 'Deriv EZ',
-        description: 'This account offers CFDs on an easy-to-get-started CFD trading platform .',
-        icon: <DerivEZ />,
-    },
-];
-
 const OtherCFDPlatformsList: React.FC = () => {
+    const { data } = useDxtradeAccountsList();
+    const has_dxtrade_account = !!data?.length;
+
     return (
         <div className='wallets-other-cfd'>
             <div className='wallets-other-cfd__title'>
                 <h1>Other CFD Platforms</h1>
             </div>
             <div className='wallets-other-cfd__content'>
-                {other_cfd_mapper.map(account => (
-                    <TradingAccountCard
-                        {...account}
-                        key={`cfd_other_platform_list--${account.title}`}
-                        leading={() => <div className='wallets-other-cfd__content__icon'>{account.icon}</div>}
-                        trailing={() => (
-                            <SecondaryActionButton>
-                                <p className='wallets-other-cfd__text'>Get</p>
-                            </SecondaryActionButton>
-                        )}
-                    >
-                        <div className='wallets-other-cfd__content__details'>
-                            <p className='wallets-other-cfd__content__details-title'>{account.title}</p>
-                            <p className='wallets-other-cfd__content__details-description'>{account.description}</p>
-                        </div>
-                    </TradingAccountCard>
-                ))}
+                {has_dxtrade_account ? <AddedDxtradeAccountsList /> : <AvailableDxtradeAccountsList />}
             </div>
         </div>
     );

packages/wallets/src/components/index.ts

@@ -21,3 +21,6 @@ export * from './WalletsCarouselContent';
 export * from './OtherCFDPlatformsList';
 export * from './SecondaryActionButton';
 export * from './PrimaryActionButton';
+export * from './AvailableDxtradeAccountsList';
+export * from './AvailableDerivezAccountsList';
+export * from './AddedDxtradeAccountsList';