From a04979ce3c234314c5b0725583ca5735e766826b Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Fri, 5 Jan 2024 15:00:53 +0800
Subject: [PATCH] chore: switching logic in real demo dropdown

---
 packages/api/src/hooks/useTotalAssets.ts      |  5 ++-
 .../DemoRealSwitcher/DemoRealSwitcher.tsx     | 39 +++++++++++++++----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/api/src/hooks/useTotalAssets.ts b/packages/api/src/hooks/useTotalAssets.ts
index e004e877d327..6a0ca8b2cde1 100644
--- a/packages/api/src/hooks/useTotalAssets.ts
+++ b/packages/api/src/hooks/useTotalAssets.ts
@@ -39,7 +39,10 @@ const useTotalAssets = () => {
 
     const demoMT5AccountBalance = cfdAccount?.mt5.find(account => account.is_virtual)?.converted_balance ?? 0;
 
-    const realMT5AccountBalance = cfdAccount?.mt5.reduce((total, account) => total + account.converted_balance, 0) ?? 0;
+    const realMT5AccountBalance =
+        cfdAccount?.mt5
+            .filter(account => !account.is_virtual)
+            .reduce((total, account) => total + account.converted_balance, 0) ?? 0;
 
     const demoDxtradeAccountBalance = cfdAccount?.dxtrade.find(account => account.is_virtual)?.converted_balance ?? 0;
 
diff --git a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx
index 0ed9a2905541..28c30803543e 100644
--- a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx
+++ b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx
@@ -1,4 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useOnClickOutside } from 'usehooks-ts';
+import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
 import { Button, qtMerge, Text } from '@deriv/quill-design';
 import { LabelPairedChevronDownSmRegularIcon } from '@deriv/quill-icons';
 
@@ -13,10 +15,24 @@ const accountTypes = [
 ];
 
 const DemoRealSwitcher = () => {
+    const { data: tradingAccountsList } = useTradingAccountsList();
+    const { data: activeTradingAccount } = useActiveTradingAccount();
+    const { switchAccount } = useAuthorize();
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const [selected, setSelected] = useState(accountTypes[0]);
     const { label, value } = selected;
 
+    const ref = useRef(null);
+    useOnClickOutside(ref, () => setIsDropdownOpen(false));
+
+    useEffect(() => {
+        const activeAccountType = activeTradingAccount?.is_virtual ? 'demo' : 'real';
+        const activeAccount = accountTypes.find(account => account.value === activeAccountType);
+        if (activeAccount) {
+            setSelected(activeAccount);
+        }
+    }, [activeTradingAccount]);
+
     useEffect(() => {
         setIsDropdownOpen(false);
     }, [selected]);
@@ -25,12 +41,21 @@ const DemoRealSwitcher = () => {
         setIsDropdownOpen(prevState => !prevState);
     }, []);
 
-    const selectAccount = useCallback((account: TAccount) => {
+    const firstRealLoginId = tradingAccountsList?.find(acc => !acc.is_virtual)?.loginid;
+
+    const demoLoginId = tradingAccountsList?.find(acc => acc.is_virtual)?.loginid;
+
+    const selectAccount = (account: TAccount) => {
         setSelected(account);
-    }, []);
+
+        const loginId = account.value === 'demo' ? demoLoginId : firstRealLoginId;
+        if (loginId) {
+            switchAccount(loginId);
+        }
+    };
 
     return (
-        <div className='relative inline-block w-auto'>
+        <div className='relative inline-block w-auto' ref={ref}>
             <Button
                 className={qtMerge(
                     'cursor-pointer w-full py-[3px] px-400 border-75 rounded-200 [&>span]:flex [&>span]:items-center [&>span]:text-[14px]',
@@ -54,11 +79,11 @@ const DemoRealSwitcher = () => {
                 />
             </Button>
             {isDropdownOpen && (
-                <div className='absolute top-1400 z-10 rounded-200 bg-system-light-primary-background shadow-320 w-full'>
+                <div className='absolute z-10 w-full top-1400 rounded-200 bg-system-light-primary-background shadow-320'>
                     {accountTypes.map(account => (
                         <div
                             className={qtMerge(
-                                'cursor-pointer hover:bg-system-light-hover-background',
+                                'cursor-pointer hover:bg-system-light-hover-background rounded-200',
                                 account.value === value && 'bg-system-light-active-background'
                             )}
                             key={account.value}
@@ -70,7 +95,7 @@ const DemoRealSwitcher = () => {
                             }}
                             role='button'
                         >
-                            <Text bold={account.value === value} className='px-800 py-300 text-center' size='sm'>
+                            <Text bold={account.value === value} className='text-center px-800 py-300' size='sm'>
                                 {account.label}
                             </Text>
                         </div>