thisyahlen/TRAH-2999/chore: cleanup and minor refactoring (binary-com…

…#13775) * chore: cleanup and minor refactoring * chore: komen * chore: komen v2
shayan-deriv · Feb 26, 2024 · ef7e2a5 · ef7e2a5
1 parent 708a427
commit ef7e2a5
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 82 deletions.
diff --git a/packages/tradershub/src/components/AppContainer/AppContainer.tsx b/packages/tradershub/src/components/AppContainer/AppContainer.tsx
@@ -13,7 +13,7 @@ type TAppContainerProps = {
  */
 
 const AppContainer = ({ children, className }: TAppContainerProps) => (
-    <div className={twMerge('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-0 ', className)}>
+    <div className={twMerge('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-24', className)}>
         {children}
     </div>
 );

diff --git a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx
@@ -1,77 +1,35 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useOnClickOutside } from 'usehooks-ts';
-import { DemoRealSwitcherLoader, useUIContext } from '@/components';
-import { useRegulationFlags } from '@/hooks';
-import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
+import { DemoRealSwitcherLoader } from '@/components';
+import { useAccountSwitcher, useRegulationFlags } from '@/hooks';
 import { LabelPairedChevronDownSmRegularIcon } from '@deriv/quill-icons';
 import { Button, Text } from '@deriv-com/ui';
 
-type TAccount = {
-    label: string;
-    value: string;
-};
-
-const accountTypes = [
-    { label: 'Demo', value: 'demo' },
-    { label: 'Real', value: 'real' },
-];
-
 const DemoRealSwitcher = () => {
-    const { data: tradingAccountsList } = useTradingAccountsList();
-    const { data: activeTradingAccount } = useActiveTradingAccount();
-    const { switchAccount } = useAuthorize();
+    const { selectedAccount, setSelectedAccount, accountTypes } = useAccountSwitcher();
     const { isSuccess } = useRegulationFlags();
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const activeAccountType = activeTradingAccount?.is_virtual ? 'demo' : 'real';
-    const activeType = accountTypes.find(account => account.value === activeAccountType);
-    const [selected, setSelected] = useState(activeType);
-    const { label, value } = selected || {};
-    const { setUIState } = useUIContext();
+    const { label, value } = selectedAccount ?? {};
 
     const ref = useRef(null);
     useOnClickOutside(ref, () => setIsDropdownOpen(false));
 
-    const firstRealLoginId = tradingAccountsList?.find(acc => !acc.is_virtual)?.loginid;
-
-    const demoLoginId = tradingAccountsList?.find(acc => acc.is_virtual)?.loginid;
-
-    useEffect(() => {
-        if (activeType) {
-            setSelected(activeType);
-            setUIState({
-                accountType: activeAccountType,
-            });
-        }
-    }, [activeAccountType, activeType, setUIState]);
-
     useEffect(() => {
         setIsDropdownOpen(false);
-    }, [selected]);
+    }, [selectedAccount]);
 
     const toggleDropdown = useCallback(() => {
         setIsDropdownOpen(prevState => !prevState);
     }, []);
 
-    const selectAccount = (account: TAccount) => {
-        setSelected(account);
-        setUIState({
-            accountType: account.value,
-        });
-
-        const loginId = account.value === 'demo' ? demoLoginId : firstRealLoginId;
-        if (loginId) {
-            switchAccount(loginId);
-        }
-    };
-
     if (!isSuccess) return <DemoRealSwitcherLoader />;
 
     return (
         <div className='relative inline-block w-auto ' ref={ref}>
             <Button
                 className={twMerge(
-                    'cursor-pointer w-full py-2 px-6 border-1 border-solid rounded-xs',
+                    'cursor-pointer w-auto py-2 px-6 border-1 border-solid rounded-xs',
                     value === 'demo' ? 'border-status-light-information' : 'border-status-light-success '
                 )}
                 onClick={toggleDropdown}
@@ -98,32 +56,26 @@ const DemoRealSwitcher = () => {
                 </div>
             </Button>
             {isDropdownOpen && (
-                <div className='absolute z-10 items-center w-full top-28 rounded-xs bg-system-light-primary-background shadow-10'>
+                <div className='absolute z-10 flex flex-col items-center w-full top-28 rounded-xs bg-system-light-primary-background shadow-10'>
                     {accountTypes.map(account => (
-                        <div
+                        <button
                             className={twMerge(
-                                'cursor-pointer hover:bg-system-light-hover-background rounded-xs',
+                                'cursor-pointer hover:bg-system-light-hover-background rounded-xs w-full',
                                 account.value === value && 'bg-system-light-active-background'
                             )}
                             key={account.value}
-                            onClick={() => selectAccount(account)}
-                            onKeyDown={event => {
-                                if (event.key === 'Enter') {
-                                    selectAccount(account);
-                                }
-                            }}
-                            role='button'
+                            onClick={() => setSelectedAccount(account)}
                         >
                             <Text
                                 align='center'
                                 as='p'
-                                className='px-16 py-6 text-center'
+                                className='py-6'
                                 size='sm'
                                 weight={account.value === value ? 'bold' : 'normal'}
                             >
                                 {account.label}
                             </Text>
-                        </div>
+                        </button>
                     ))}
                 </div>
             )}

diff --git a/...ptionsAndMultipliersSection/OptionsAndMultipliersHeading/OptionsAndMultipliersHeading.tsx b/...ptionsAndMultipliersSection/OptionsAndMultipliersHeading/OptionsAndMultipliersHeading.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CurrencySwitcher, StaticLink, TitleDescriptionLoader } from '@/components';
 import { useRegulationFlags } from '@/hooks';
-import { Text, useDevice } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
 
 const getDescription = (isEU: boolean) => {
     if (isEU) {
@@ -27,7 +27,6 @@ const getDescription = (isEU: boolean) => {
  * @returns {React.ElementType} The `OptionsAndMultipliersHeading` component.
  */
 const OptionsAndMultipliersHeading = () => {
-    const { isDesktop } = useDevice();
     const { isSuccess: isRegulationAccessible } = useRegulationFlags();
     const { isEU } = useRegulationFlags();
 
@@ -40,11 +39,11 @@ const OptionsAndMultipliersHeading = () => {
     return (
         <div className='flex flex-col items-start justify-between gap-16 lg:flex-row lg:gap-48'>
             <div className='gap-2 lg:flex lg:flex-col'>
-                {isDesktop && (
+                <div className='d-none lg:block'>
                     <Text size='lg' weight='bold'>
                         {title}
                     </Text>
-                )}
+                </div>
                 {description}
             </div>
             <CurrencySwitcher />

diff --git a/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx b/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx
@@ -3,19 +3,19 @@ import { twMerge } from 'tailwind-merge';
 import { TotalAssetsLoader } from '@/components';
 import { useTotalAssets } from '@/hooks';
 import { useActiveTradingAccount } from '@deriv/api';
-import { Text, useDevice } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
 
 const TotalAssets = () => {
     const { data: totalAssets, isSuccess } = useTotalAssets();
     const { data: activeTrading } = useActiveTradingAccount();
 
-    const { isDesktop } = useDevice();
-
     if (!isSuccess) return <TotalAssetsLoader />;
 
     return (
         <div className='relative inline-block w-auto text-center lg:text-right'>
-            {isDesktop && <Text size='sm'>Total assets</Text>}
+            <div className='d-none lg:block'>
+                <Text size='sm'>Total assets</Text>
+            </div>
             <Text
                 as='p'
                 className={twMerge(

diff --git a/packages/tradershub/src/components/TradersHubContent/TradersHubContent.tsx b/packages/tradershub/src/components/TradersHubContent/TradersHubContent.tsx
@@ -1,24 +1,16 @@
-import React, { Fragment } from 'react';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
 import { CFDSection, OptionsAndMultipliersSection } from '@/components';
 import { useRegulationFlags } from '@/hooks';
 
 const TradersHubContent = () => {
     const { isEU } = useRegulationFlags();
 
-    if (isEU) {
-        return (
-            <Fragment>
-                <CFDSection />
-                <OptionsAndMultipliersSection />
-            </Fragment>
-        );
-    }
-
     return (
-        <Fragment>
+        <div className={twMerge('flex gap-24 flex-col', isEU && 'flex-col-reverse')}>
             <OptionsAndMultipliersSection />
             <CFDSection />
-        </Fragment>
+        </div>
     );
 };
 

diff --git a/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx b/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
+import { IconComponent } from '@/components';
 import { IconToCurrencyMapper } from '@/constants';
 import { useRegulationFlags } from '@/hooks';
 import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
@@ -29,7 +30,7 @@ const TradingAccountsList = () => {
                                 key={`trading-accounts-list-${account.loginid}`}
                                 onClick={() => switchAccount(account.loginid)}
                             >
-                                {IconToCurrencyMapper[iconCurrency].icon}
+                                <IconComponent height={35} icon={iconCurrency} width={35} />
                                 <div className='flex flex-col items-start flex-1'>
                                     <Text size='sm'>{IconToCurrencyMapper[iconCurrency].text}</Text>
                                     <Text size='sm'>{account.loginid}</Text>

diff --git a/packages/tradershub/src/hooks/index.ts b/packages/tradershub/src/hooks/index.ts
@@ -1,3 +1,4 @@
+export { default as useAccountSwitcher } from './useAccountSwitcher';
 export { default as useCFDAssets } from './useCFDAssets';
 export { default as useCurrencies } from './useCurrencies';
 export { default as useMT5AccountHandler } from './useMT5AccountHandler';

diff --git a/packages/tradershub/src/hooks/useAccountSwitcher.ts b/packages/tradershub/src/hooks/useAccountSwitcher.ts
@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useUIContext } from '@/components';
+import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
+
+const accountTypes = [
+    { label: 'Demo', value: 'demo' },
+    { label: 'Real', value: 'real' },
+] as const;
+
+type TAccountType = typeof accountTypes[number];
+
+/**
+ * @description This hook contains the logic that is used to switch between demo and real accounts
+ * @returns {selected: {label: string, value: string}, selectAccount: (account: TAccount) => void}
+ * @example
+ * const { selected, selectAccount } = useAccountSwitcher();
+ * selectAccount({ label: 'Demo', value: 'demo' });
+ */
+const useAccountSwitcher = () => {
+    const { data: tradingAccountsList } = useTradingAccountsList();
+    const { data: activeTradingAccount } = useActiveTradingAccount();
+    const { switchAccount } = useAuthorize();
+    const { setUIState } = useUIContext();
+    const activeAccountType = activeTradingAccount?.is_virtual ? 'demo' : 'real';
+    const activeType = accountTypes.find(account => account.value === activeAccountType);
+    const [selectedAccount, setSelected] = useState(activeType);
+    const firstRealLoginId = tradingAccountsList?.find(acc => !acc.is_virtual)?.loginid;
+    const demoLoginId = tradingAccountsList?.find(acc => acc.is_virtual)?.loginid;
+
+    useEffect(() => {
+        if (activeType) {
+            setSelected(activeType);
+            setUIState({
+                accountType: activeAccountType,
+            });
+        }
+    }, [activeAccountType, activeType, setUIState]);
+
+    const setSelectedAccount = useCallback(
+        (account: TAccountType) => {
+            setSelected(account);
+            setUIState({
+                accountType: account.value,
+            });
+
+            const loginId = account.value === 'demo' ? demoLoginId : firstRealLoginId;
+            if (loginId) {
+                switchAccount(loginId);
+            }
+        },
+        [demoLoginId, firstRealLoginId, setUIState, switchAccount]
+    );
+
+    return {
+        // selected: {label: string, value: string}
+        selectedAccount,
+        // selectAccount: (account: TAccount) => void
+        setSelectedAccount,
+        // accountTypes: {label: Demo | Real, value: demo | real}[]
+        accountTypes,
+    };
+};
+
+export default useAccountSwitcher;