[TRAH] Aizad/TRAH-2693/WrongPlacementForRealAccounts (#13118)

* chore: fix Currency Switcher

* chore: split component in different files

* fix: change from quill to ui

* fix: updated import with latest path

* fix: provide fallback for undefined values

Author: aizad-deriv

packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx

@@ -7,7 +7,8 @@ import { THooks } from '@/types';
 import { useActiveTradingAccount, useResetVirtualBalance } from '@deriv/api';
 import { Provider } from '@deriv/library';
 import { StandaloneChevronDownBoldIcon } from '@deriv/quill-icons';
-import { Button, Text } from '@deriv-com/ui';
+import { Button } from '@deriv-com/ui';
+import { DemoCurrencySwitcherAccountInfo, RealCurrencySwitcherAccountInfo } from './CurrencySwitcherAccountInfo';
 
 type AccountActionButtonProps = {
     balance: THooks.ActiveTradingAccount['balance'];
@@ -53,25 +54,20 @@ const CurrencySwitcher = () => {
 
     if (!isSuccess) return <CurrencySwitcherLoader />;
 
+    const { icon, text } = IconToCurrencyMapper[iconCurrency];
+
     return (
         <div className='flex items-center justify-between w-full border-solid h-3600 p-800 rounded-400 border-75 border-system-light-active-background lg:w-auto lg:shrink-0 gap-800'>
-            <div className='flex-none '>{IconToCurrencyMapper[iconCurrency].icon}</div>
+            <div className='flex-none '>{icon}</div>
             <div className='grow'>
-                <Text
-                    as='p'
-                    className={isDemo ? 'text-status-light-information' : 'text-system-light-less-prominent-text'}
-                    size='sm'
-                    weight={isDemo ? 'bold' : 'normal'}
-                >
-                    {isDemo ? activeAccount.display_balance : IconToCurrencyMapper[iconCurrency].text}
-                </Text>
-                <Text
-                    className={!isDemo ? 'text-status-light-success' : ''}
-                    size='sm'
-                    weight={isDemo ? 'normal' : 'bold'}
-                >
-                    {isDemo ? 'Demo' : activeAccount?.display_balance}
-                </Text>
+                {isDemo ? (
+                    <DemoCurrencySwitcherAccountInfo displayBalance={activeAccount?.display_balance} />
+                ) : (
+                    <RealCurrencySwitcherAccountInfo
+                        currencyText={text}
+                        displayBalance={activeAccount?.display_balance}
+                    />
+                )}
             </div>
             <div className='flex-none'>
                 <AccountActionButton balance={activeAccount?.balance ?? 0} isDemo={isDemo ?? false} />

packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcherAccountInfo.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { IconToCurrencyMapperType } from '@/constants';
+import { THooks } from '@/types';
+import { Text } from '@deriv-com/ui';
+
+type DemoCurrencySwitcherAccountInfoProps = {
+    displayBalance: THooks.ActiveTradingAccount['display_balance'];
+};
+
+type RealCurrencySwitcherAccountInfoProps = {
+    currencyText: IconToCurrencyMapperType['currency_text']['text'];
+    displayBalance?: THooks.ActiveTradingAccount['display_balance'];
+};
+
+export const DemoCurrencySwitcherAccountInfo = ({ displayBalance }: DemoCurrencySwitcherAccountInfoProps) => (
+    <div className='flex flex-col'>
+        <Text className='font-light text-system-light-less-prominent-text' size='sm' weight='bold'>
+            Demo
+        </Text>
+        <Text className='text-status-light-information' size='sm' weight='bold'>
+            {displayBalance}
+        </Text>
+    </div>
+);
+
+export const RealCurrencySwitcherAccountInfo = ({
+    currencyText,
+    displayBalance,
+}: RealCurrencySwitcherAccountInfoProps) => (
+    <div className='flex flex-col'>
+        <Text className='text-status-light-success' size='sm' weight='bold'>
+            {displayBalance ?? '0.00'}
+        </Text>
+        <Text className='text-system-light-less-prominent-text' size='sm'>
+            {currencyText}
+        </Text>
+    </div>
+);

packages/tradershub/src/constants/constants.tsx

@@ -13,7 +13,7 @@ import {
 import { PlatformIcon } from '../components';
 import { getStaticUrl, getUrlBinaryBot, getUrlSmartTrader } from '../helpers/urls';
 
-type IconToCurrencyMapperType = {
+export type IconToCurrencyMapperType = {
     [key: string]: {
         icon: React.ReactNode;
         text: string;