[TRAH] Aizad/TRAH-2268/DemoRealAccountSwitcher

packages/api/src/hooks/useTradingAccountsList.ts

@@ -13,7 +13,11 @@ const useTradingAccountsList = () => {
 
     // Add additional information to each trading account.
     const modified_accounts = useMemo(() => {
-        return filtered_accounts?.map(trading => ({ ...trading }));
+        return filtered_accounts?.map(trading => ({
+            ...trading,
+            first_real_account: filtered_accounts?.find(account => account.account_type === 'real')?.loginid[0],
+            demo_loginid: filtered_accounts?.find(account => account.account_type === 'demo')?.loginid,
+        }));
     }, [filtered_accounts]);
 
     return {

packages/tradershub/package.json

@@ -14,12 +14,13 @@
     },
     "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",
         "@deriv/utils": "^1.0.0",
+        "@headlessui/react": "^1.7.17",
         "@tanstack/react-table": "^8.10.3",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",

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

@@ -0,0 +1,79 @@
+// TODO: Create a Generic component for this once the designed is finalized.
+import React, { useState } from 'react';
+import { qtMerge, Text } from '@deriv/quill-design';
+import { LabelPairedChevronDownSmRegularIcon } from '@deriv/quill-icons';
+import { Listbox, Transition } from '@headlessui/react';
+
+const accountTypes = [
+    { label: 'Demo', value: 'demo' },
+    { label: 'Real', value: 'real' },
+];
+
+const DemoRealSwitcher = () => {
+    const [selected, setSelected] = useState(accountTypes[0]);
+    const { label, value } = selected;
+
+    return (
+        <div className='w-auto'>
+            <Listbox as='div' onChange={setSelected} value={selected}>
+                {({ open }) => (
+                    <div className='relative mt-1'>
+                        <Listbox.Button
+                            as='button'
+                            className={`cursor-pointer relative w-full py-[3px] px-400 border-75 rounded-200 flex gap-x-400 items-center ${
+                                value === 'demo' ? 'border-status-light-information' : 'border-status-light-success'
+                            }`}
+                        >
+                            <Text
+                                bold
+                                className={
+                                    value === 'demo' ? 'text-status-light-information' : 'text-status-light-success'
+                                }
+                                size='sm'
+                            >
+                                {label}
+                            </Text>
+                            <LabelPairedChevronDownSmRegularIcon
+                                className={qtMerge(
+                                    value === 'demo' ? 'fill-status-light-information' : 'fill-status-light-success',
+                                    open
+                                        ? 'transform -rotate-180 transition duration-200 ease-in-out'
+                                        : 'transition duration-200 ease-in-out'
+                                )}
+                            />
+                        </Listbox.Button>
+                        <Transition leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
+                            <Listbox.Options
+                                as='div'
+                                className='absolute mt-200 max-h-3000 w-full rounded-200 bg-system-light-primary-background shadow-210'
+                            >
+                                {accountTypes?.map(account => (
+                                    <Listbox.Option
+                                        as='div'
+                                        className='cursor-pointer bg-system-light-primary-background hover:bg-system-light-hover-background'
+                                        key={account.label}
+                                        value={account}
+                                    >
+                                        {({ selected }) => (
+                                            <Text
+                                                bold={selected}
+                                                className={`px-800 py-300 text-center ${
+                                                    selected && 'bg-system-light-active-background'
+                                                }`}
+                                                size='sm'
+                                            >
+                                                {account.label}
+                                            </Text>
+                                        )}
+                                    </Listbox.Option>
+                                ))}
+                            </Listbox.Options>
+                        </Transition>
+                    </div>
+                )}
+            </Listbox>
+        </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

@@ -1,6 +1,7 @@
 export * from './ActionScreen';
 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 } from '../../components';
+import { DemoRealSwitcher, OptionsAndMultipliersSection, StaticLink } 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>
                 <div className='flex flex-col items-end justify-end'>
                     <Text size='sm'>Total assets</Text>
                     <Heading.H3 className='text-status-light-information'>10,000.00 USD</Heading.H3>