[TRAH] shontzu/TRAH-2576/MT5PlatformList-2 (binary-com#12807)

* chore: init MT5LoginList * style: fix the get more button size * style: remove scss * style: update quill button prop * chore: miscs from code review * chore: remove commented code * fix: responsive view * chore: removed sm * refactor: use market_type and shortcode as key in map function
mahdiyeh-deriv · Jan 10, 2024 · 6ff40ff · 6ff40ff
1 parent 810e8e3
commit 6ff40ff
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 20 deletions.
diff --git a/packages/tradershub/src/features/cfd/components/CTraderList/CTraderList.tsx b/packages/tradershub/src/features/cfd/components/CTraderList/CTraderList.tsx
@@ -16,10 +16,7 @@ const CTraderList = () => {
     return (
         <div className='pb-1200'>
             <Text bold>{PlatformDetails.ctrader.title}</Text>
-
-            <div className='grid grid-cols-3 gap-x-800 gap-y-2400 lg:grid-cols-1 lg:grid-rows-1'>
-                {hasCTraderAccount ? <AddedCTraderAccountsList /> : <AvailableCTraderAccountsList />}
-            </div>
+            {hasCTraderAccount ? <AddedCTraderAccountsList /> : <AvailableCTraderAccountsList />}
         </div>
     );
 };

diff --git a/packages/tradershub/src/features/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx b/packages/tradershub/src/features/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx
@@ -0,0 +1,55 @@
+import React, { Fragment, useEffect, useMemo } from 'react';
+import { useActiveTradingAccount, useAuthorize, useInvalidateQuery, useSortedMT5Accounts } from '@deriv/api';
+import { Text } from '@deriv/quill-design';
+import { THooks } from '../../../../types';
+import { AddedMT5AccountsList, AvailableMT5AccountsList } from '../../flows/MT5';
+import { GetMoreMT5Accounts } from '../../screens';
+
+type TMT5PlatformsListProps = {
+    onMT5PlatformListLoaded?: (value: boolean) => void;
+};
+
+const MT5PlatformsList = ({ onMT5PlatformListLoaded }: TMT5PlatformsListProps) => {
+    const { isFetching } = useAuthorize();
+    const { areAllAccountsCreated, data, isFetchedAfterMount } = useSortedMT5Accounts();
+    const { data: activeTradingAccount } = useActiveTradingAccount();
+    const invalidate = useInvalidateQuery();
+
+    const hasMT5Account = useMemo(() => {
+        return data?.some(account => account.is_added);
+    }, [data]);
+
+    useEffect(() => {
+        if (!isFetching) {
+            invalidate('mt5_login_list');
+        }
+    }, [invalidate, isFetching]);
+
+    useEffect(() => {
+        onMT5PlatformListLoaded?.(isFetchedAfterMount);
+        return () => onMT5PlatformListLoaded?.(false);
+    }, [isFetchedAfterMount, onMT5PlatformListLoaded]);
+
+    return (
+        <Fragment>
+            <Text bold>Deriv MT5</Text>
+            <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
+                {isFetchedAfterMount &&
+                    data?.map(account => {
+                        if (account.is_added)
+                            return <AddedMT5AccountsList account={account} key={`added-mt5-list-${account.loginid}`} />;
+
+                        return (
+                            <AvailableMT5AccountsList
+                                account={account as unknown as THooks.MT5AccountsList}
+                                key={`available-mt5-list-${account.market_type}-${account.shortcode}`}
+                            />
+                        );
+                    })}
+                {hasMT5Account && !activeTradingAccount?.is_virtual && !areAllAccountsCreated && <GetMoreMT5Accounts />}
+            </div>
+        </Fragment>
+    );
+};
+
+export default MT5PlatformsList;
diff --git a/packages/tradershub/src/features/cfd/components/MT5PlatformsList/index.ts b/packages/tradershub/src/features/cfd/components/MT5PlatformsList/index.ts
@@ -0,0 +1 @@
+export { default as MT5PlatformsList } from './MT5PlatformsList';
diff --git a/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/packages/tradershub/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
@@ -23,6 +23,8 @@ const AddedMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList })
             trailing={() => (
                 <div className='flex flex-col gap-y-200'>
                     <Button
+                        className='border-opacity-black-400 rounded-200 px-800'
+                        colorStyle='black'
                         disabled={jurisdictionStatus.is_failed || jurisdictionStatus.is_pending}
                         onClick={() => {
                             history.push('/wallets/cashier/transfer');
@@ -32,6 +34,7 @@ const AddedMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList })
                         Transfer
                     </Button>
                     <Button
+                        className='rounded-200 px-800'
                         disabled={jurisdictionStatus.is_failed || jurisdictionStatus.is_pending}
                         // onClick show MT5TradeModal
                     >
@@ -45,7 +48,7 @@ const AddedMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList })
                     <Text size='sm'>{title}</Text>
                     {!activeWallet?.is_virtual && (
                         <div className='flex items-center rounded-md h-1200 py-50 px-200 gap-200 bg-system-light-secondary-background'>
-                            <Text bold size='sm'>
+                            <Text bold size='xs'>
                                 {account.landing_company_short?.toUpperCase()}
                             </Text>
                         </div>
@@ -56,9 +59,7 @@ const AddedMT5AccountsList = ({ account }: { account: THooks.MT5AccountsList })
                         {account.display_balance}
                     </Text>
                 )}
-                <Text bold size='sm'>
-                    {account.display_login}
-                </Text>
+                <Text size='sm'>{account.display_login}</Text>
             </div>
         </TradingAccountCard>
     );

diff --git a/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx b/packages/tradershub/src/features/cfd/screens/GetMoreMT5Accounts/GetMoreMT5Accounts.tsx
@@ -9,7 +9,7 @@ const GetMoreMT5Accounts: FC = () => {
 
     return (
         <div
-            className='flex items-start w-full cursor-pointer lg:w-1/3'
+            className='flex items-start w-full cursor-pointer'
             onClick={() => show(<MT5AccountTypeModal />)}
             onKeyDown={e => {
                 if (e.key === 'Enter') {

diff --git a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx
@@ -9,6 +9,7 @@ import {
     TotalAssets,
 } from '../../components';
 import { CTraderList } from '../../features/cfd/components/CTraderList';
+import { MT5PlatformsList } from '../../features/cfd/components/MT5PlatformsList';
 import { OtherCFDPlatformsList } from '../../features/cfd/components/OtherCFDPlatformsList';
 
 const TradersHubRoute = () => {
@@ -31,7 +32,14 @@ const TradersHubRoute = () => {
                 <ContentSwitcher>
                     <ContentSwitcher.HeaderList list={['Options & Multipliers', 'CFDs']} />
                     <ContentSwitcher.PanelContainer>
-                        <OptionsAndMultipliersSection />
+                        <ContentSwitcher.Panel>
+                            <OptionsAndMultipliersSection />
+                        </ContentSwitcher.Panel>
+                        <ContentSwitcher.Panel>
+                            <MT5PlatformsList />
+                            <CTraderList />
+                            <OtherCFDPlatformsList />
+                        </ContentSwitcher.Panel>
                     </ContentSwitcher.PanelContainer>
                 </ContentSwitcher>
             </div>
@@ -64,16 +72,7 @@ const TradersHubRoute = () => {
                     </Text>
                 </div>
                 <div className='space-y-1200'>
-                    <div>
-                        <Text bold className='pb-800' size='md'>
-                            Deriv MT5
-                        </Text>
-                        <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
-                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                        </div>
-                    </div>
+                    <MT5PlatformsList />
                     <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
                         <CTraderList />
                     </div>