[TRAH] Aizad/TRAH-2268/DemoRealAccountSwitcher (deriv-com#12635)

* feat: create real demo switch account on tradershub

* fix: added first_real_accounts and demo_loginid inside useTradingAccountList

* fix: resolve comments

* chore: added open and closing animations when toggle

* fix: resolve comments

* fix: remove invalid classname

* fix: remove headless and replace it with default tailwind

* feat: create real demo switch account on tradershub

* fix: added first_real_accounts and demo_loginid inside useTradingAccountList

* fix: resolve comments

* chore: added open and closing animations when toggle

* fix: resolve comments

* fix: remove invalid classname

* fix: remove headless and replace it with default tailwind

* chore: update code

* fix: remove ButtonGroup export inside of ./components

* fix: resolve build fail issue

* fix: resolve sonar cloud issue

* fix: add type to account

* Delete packages/tradershub/package-lock.json

packages/api/src/hooks/useTradingAccountsList.ts

@@ -17,6 +17,8 @@ const useTradingAccountsList = () => {
     const modified_accounts = useMemo(() => {
         return filtered_accounts?.map(trading => ({
             ...trading,
+            first_real_loginid: filtered_accounts?.find(account => account.account_type === 'real')?.loginid[0],
+            demo_loginid: filtered_accounts?.find(account => account.account_type === 'demo')?.loginid,
         }));
     }, [filtered_accounts]);
 

packages/tradershub/package.json

@@ -14,8 +14,8 @@
     },
     "dependencies": {
         "@deriv/api": "^1.0.0",
-        "@deriv/library": "^1.0.0",
         "@deriv/integration": "^1.0.0",
+        "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",
         "@deriv/quill-icons": "^1.0.10",
         "@deriv/react-joyride": "^2.6.2",

packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, qtMerge, Text } from '@deriv/quill-design';
+import { LabelPairedChevronDownSmRegularIcon } from '@deriv/quill-icons';
+
+type TAccount = {
+    label: string;
+    value: string;
+};
+
+const accountTypes = [
+    { label: 'Demo', value: 'demo' },
+    { label: 'Real', value: 'real' },
+];
+
+const DemoRealSwitcher = () => {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [selected, setSelected] = useState(accountTypes[0]);
+    const { label, value } = selected;
+
+    useEffect(() => {
+        setIsDropdownOpen(false);
+    }, [selected]);
+
+    const toggleDropdown = useCallback(() => {
+        setIsDropdownOpen(prevState => !prevState);
+    }, []);
+
+    const selectAccount = useCallback((account: TAccount) => {
+        setSelected(account);
+    }, []);
+
+    return (
+        <div className='relative inline-block w-auto'>
+            <Button
+                className={qtMerge(
+                    'cursor-pointer w-full py-[3px] px-400 border-75 rounded-200 [&>span]:flex [&>span]:items-center [&>span]:text-[14px]',
+                    value === 'demo'
+                        ? 'border-status-light-information text-status-light-information'
+                        : 'border-status-light-success text-status-light-success'
+                )}
+                colorStyle='white'
+                iconPosition='end'
+                onClick={toggleDropdown}
+                size='sm'
+                variant='secondary'
+            >
+                {label}
+                <LabelPairedChevronDownSmRegularIcon
+                    className={qtMerge(
+                        'transform transition duration-200 ease-in-out ml-400',
+                        value === 'demo' ? 'fill-status-light-information' : 'fill-status-light-success',
+                        isDropdownOpen && '-rotate-180'
+                    )}
+                />
+            </Button>
+            {isDropdownOpen && (
+                <div className='absolute top-1400 z-10 rounded-200 bg-system-light-primary-background shadow-320 w-full'>
+                    {accountTypes.map(account => (
+                        <div
+                            className={qtMerge(
+                                'cursor-pointer hover:bg-system-light-hover-background',
+                                account.value === value && 'bg-system-light-active-background'
+                            )}
+                            key={account.value}
+                            onClick={() => selectAccount(account)}
+                            onKeyDown={event => {
+                                if (event.key === 'Enter') {
+                                    selectAccount(account);
+                                }
+                            }}
+                            role='button'
+                        >
+                            <Text bold={account.value === value} className='px-800 py-300 text-center' size='sm'>
+                                {account.label}
+                            </Text>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DemoRealSwitcher;

packages/tradershub/src/components/DemoRealSwitcher/index.ts

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

packages/tradershub/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './ButtonGroup';
 export * from './Clipboard';
 export * from './ContentSwitcher';
 export * from './CurrencySwitcher';
+export * from './DemoRealSwitcher';
 export * from './Dialog';
 export * from './GetADerivAccountBanner';
 export * from './Modal';

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

@@ -1,14 +1,17 @@
 import React, { FC } from 'react';
 import { Button, Heading, Text } from '@deriv/quill-design';
-import { OptionsAndMultipliersSection, StaticLink, TotalAssets } from '../../components';
+import { DemoRealSwitcher, OptionsAndMultipliersSection, StaticLink, TotalAssets } from '../../components';
 import { CTraderList } from '../../features/cfd/components/CTraderList';
 import { OtherCFDPlatformsList } from '../../features/cfd/components/OtherCFDPlatformsList';
 
 const TradersHubRoute: FC = () => {
     return (
         <div className='flex flex-col gap-1200'>
             <div className='flex items-center justify-between align-start gap-100'>
-                <Heading.H3>Trader&apos;s Hub</Heading.H3>
+                <div className='flex flex-row gap-600'>
+                    <Heading.H3>Trader&apos;s Hub</Heading.H3>
+                    <DemoRealSwitcher />
+                </div>
                 <TotalAssets />
             </div>
             <OptionsAndMultipliersSection />