[TRAH] shontzu/TRAH-2343/show-dxtrade-in-tradershub-rout4e

packages/tradershub/src/features/cfd/components/CTraderList/CTraderList.tsx

@@ -11,7 +11,7 @@ const CTraderList: FC = () => {
         <div className='pb-1200'>
             <Text bold>{PlatformDetails.ctrader.title}</Text>
 
-            <div className='grid grid-cols-3 gap-x-800 gap-y-2400 md:grid-cols-1 md:grid-rows-1'>
+            <div className='grid grid-cols-3 gap-x-800 gap-y-2400 lg:grid-cols-1 lg:grid-rows-1'>
                 {hasCTraderAccount ? <AddedCTraderAccountsList /> : <AvailableCTraderAccountsList />}
             </div>
         </div>

packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { useAuthorize, useDxtradeAccountsList, useInvalidateQuery } from '@deriv/api';
+import { Text } from '@deriv/quill-design';
+import { AddedDxtradeAccountsList, AvailableDxtradeAccountsList } from '../../flows/OtherCFDs/Dxtrade';
+
+const OtherCFDPlatformsList = () => {
+    const { isFetching } = useAuthorize();
+    const { data, isFetchedAfterMount } = useDxtradeAccountsList();
+    const invalidate = useInvalidateQuery();
+    const hasDxtradeAccount = !!data?.length;
+
+    useEffect(() => {
+        if (!isFetching) {
+            invalidate('trading_platform_accounts');
+        }
+    }, [invalidate, isFetching]);
+
+    return (
+        <div className='pb-1200'>
+            <Text bold>Other CFD Platforms</Text>
+            <div className='grid grid-cols-3 gap-x-800 gap-y-2400 lg:grid-cols-1 lg:grid-rows-1'>
+                {isFetchedAfterMount &&
+                    (hasDxtradeAccount ? <AddedDxtradeAccountsList /> : <AvailableDxtradeAccountsList />)}
+            </div>
+        </div>
+    );
+};
+
+export default OtherCFDPlatformsList;

packages/tradershub/src/features/cfd/components/OtherCFDPlatformsList/index.ts

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

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

@@ -1,12 +1,12 @@
-import React, { FC, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { useActiveTradingAccount, useCtraderAccountsList } from '@deriv/api';
 import { Button, Text } from '@deriv/quill-design';
 import { TradingAccountCard } from '../../../../../components';
 import { getStaticUrl } from '../../../../../helpers/urls';
 import CTrader from '../../../../../public/images/cfd/ctrader.svg';
 import { PlatformDetails } from '../../../constants';
 
-const AddedCTraderAccountsList: FC = () => {
+const AddedCTraderAccountsList = () => {
     const { data: cTraderAccounts } = useCtraderAccountsList();
     const { data: activeTrading } = useActiveTradingAccount();
 
@@ -31,11 +31,13 @@ const AddedCTraderAccountsList: FC = () => {
         <div className='flex flex-col gap-y-200'>
             <Button
                 // todo: open transfer modal
+                className='border-opacity-black-400 rounded-200 px-800'
+                colorStyle='black'
                 variant='secondary'
             >
                 Transfer
             </Button>
-            <Button>Open</Button>
+            <Button className='rounded-200 px-800'>Open</Button>
         </div>
     );
 
@@ -51,7 +53,7 @@ const AddedCTraderAccountsList: FC = () => {
                                 <Text bold size='sm'>
                                     {account?.formatted_balance}
                                 </Text>
-                                <Text bold color='primary' size='sm'>
+                                <Text color='primary' size='sm'>
                                     {account.login}
                                 </Text>
                             </Fragment>

packages/tradershub/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useActiveTradingAccount, useCreateOtherCFDAccount } from '@deriv/api';
 import { Button, Text } from '@deriv/quill-design';
 import { TradingAccountCard } from '../../../../../components';
 import { getStaticUrl } from '../../../../../helpers/urls';
 import CTrader from '../../../../../public/images/cfd/ctrader.svg';
 import { PlatformDetails } from '../../../constants';
 
-const AvailableCTraderAccountsList: FC = () => {
+const AvailableCTraderAccountsList = () => {
     const { mutate } = useCreateOtherCFDAccount();
     const { data: activeTradingAccount } = useActiveTradingAccount();
 
@@ -40,12 +40,7 @@ const AvailableCTraderAccountsList: FC = () => {
     );
 
     const trailingButton = () => (
-        <Button
-            onClick={() => {
-                onSubmit();
-            }}
-            variant='primary'
-        >
+        <Button className='rounded-200' colorStyle='coral' onClick={onSubmit} variant='primary'>
             Get
         </Button>
     );

packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { useDxtradeAccountsList } from '@deriv/api';
 import { Button, Text } from '@deriv/quill-design';
 import { TradingAccountCard } from '../../../../../../components';
 import { getStaticUrl } from '../../../../../../helpers/urls';
 import DerivX from '../../../../../../public/images/cfd/derivx.svg';
 import { PlatformDetails } from '../../../../constants';
 
-const AddedDxtradeAccountsList: React.FC = () => {
-    const { data } = useDxtradeAccountsList();
+const AddedDxtradeAccountsList = () => {
+    const { data: dxTradeAccounts } = useDxtradeAccountsList();
 
-    const leadingComponent = () => (
+    const leading = () => (
         <div
             className='cursor-pointer'
             onClick={() => {
@@ -27,31 +27,33 @@ const AddedDxtradeAccountsList: React.FC = () => {
         </div>
     );
 
-    const trailingComponent = () => (
-        <div className='flex flex-col space-y-1'>
+    const trailing = () => (
+        <div className='flex flex-col gap-y-200'>
             <Button
                 // open transfer modal
-                variant='outlined'
+                className='border-opacity-black-400 rounded-200 px-800'
+                colorStyle='black'
+                variant='secondary'
             >
                 Transfer
             </Button>
-            <Button /* show <MT5TradeModal/> */>Open</Button>
+            <Button className='rounded-200 px-800'>Open</Button>
         </div>
     );
 
     return (
-        <TradingAccountCard leading={leadingComponent} trailing={trailingComponent}>
-            <div className='flex flex-col fles-grow'>
-                {data?.map(account => (
-                    <React.Fragment key={account?.account_id}>
+        <TradingAccountCard leading={leading} trailing={trailing}>
+            <div className='flex flex-col flex-grow'>
+                {dxTradeAccounts?.map(account => (
+                    <Fragment key={account?.account_id}>
                         <Text size='sm'>{PlatformDetails.dxtrade.title}</Text>
-                        <Text size='sm' weight='bold'>
+                        <Text bold size='sm'>
                             {account?.display_balance}
                         </Text>
-                        <Text color='primary' size='xs' weight='bold'>
+                        <Text color='primary' size='sm'>
                             {account?.login}
                         </Text>
-                    </React.Fragment>
+                    </Fragment>
                 ))}
             </div>
         </TradingAccountCard>

packages/tradershub/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx

@@ -4,7 +4,7 @@ import { TradingAccountCard } from '../../../../../../components';
 import { getStaticUrl } from '../../../../../../helpers/urls';
 import DerivX from '../../../../../../public/images/cfd/derivx.svg';
 
-const leadingComponent = () => {
+const leading = () => {
     return (
         <div
             className='cursor-pointer'
@@ -23,20 +23,22 @@ const leadingComponent = () => {
     );
 };
 
-const trailingComponent = () => {
-    return <Button color='primary-light' /* open <DxtradeEnterPasswordModal /> */>Get</Button>;
+const trailing = () => {
+    return (
+        <Button className='rounded-200' colorStyle='coral' variant='primary'>
+            Get
+        </Button>
+    );
 };
 
-const AvailableDxtradeAccountsList: React.FC = () => {
+const AvailableDxtradeAccountsList = () => {
     return (
-        <TradingAccountCard leading={leadingComponent} trailing={trailingComponent}>
-            <div className='flex-grow'>
-                <p>
-                    <Text size='sm' weight='bold'>
-                        Deriv X
-                    </Text>
-                </p>
-                <Text size='xs'>This account offers CFDs on a highly customisable CFD trading platform.</Text>
+        <TradingAccountCard leading={leading} trailing={trailing}>
+            <div className='flex flex-col flex-grow'>
+                <Text bold size='sm'>
+                    Deriv X
+                </Text>
+                <Text size='sm'>This account offers CFDs on a highly customisable CFD trading platform.</Text>
             </div>
         </TradingAccountCard>
     );

packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { Button, Heading, Text } from '@deriv/quill-design';
 import { OptionsAndMultipliersSection, StaticLink } from '../../components';
 import { CTraderList } from '../../features/cfd/components/CTraderList';
+import { OtherCFDPlatformsList } from '../../features/cfd/components/OtherCFDPlatformsList';
 
 const TradersHubRoute: FC = () => {
     return (
@@ -44,13 +45,8 @@ const TradersHubRoute: FC = () => {
                     <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
                         <CTraderList />
                     </div>
-                    <div>
-                        <Text bold className='pb-800' size='md'>
-                            Other CFDs
-                        </Text>
-                        <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
-                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                        </div>
+                    <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
+                        <OtherCFDPlatformsList />
                     </div>
                 </div>
             </div>