fix: account swircher blincking (binary-com#8407)

Co-authored-by: Nijil Nirmal <62882794+nijil-deriv@users.noreply.github.com>
yaswanth-deriv · May 1, 2023 · 5dcef82 · 5dcef82
1 parent 46df180
commit 5dcef82
Showing 1 changed file with 33 additions and 38 deletions.
diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -117,7 +117,6 @@ const TradingHubHeader = ({
     const { pathname } = useLocation();
     const cashier_routes = pathname.startsWith(routes.cashier);
     const is_mf = loginid?.startsWith('MF');
-
     const filterPlatformsForClients = payload =>
         payload.filter(config => {
             if (config.link_to === routes.mt5) {
@@ -145,30 +144,22 @@ const TradingHubHeader = ({
         }
     };
 
-    const CashierMobileLinks = () => (
-        <React.Fragment>
-            <div className='trading-hub-header__menu-right--items--notifications__cashier'>
-                <ShowNotifications
-                    is_notifications_visible={is_notifications_visible}
-                    notifications_count={notifications_count}
-                    toggleNotifications={toggleNotifications}
-                />
-            </div>
-            <div className='trading-hub-header__menu-right--items--account-toggle'>
-                <AccountInfo
-                    acc_switcher_disabled_message={acc_switcher_disabled_message}
-                    account_type={account_type}
-                    balance={formatMoney(currency, balance, true)}
-                    is_disabled={is_acc_switcher_disabled}
-                    is_eu={is_eu}
-                    is_virtual={is_virtual}
-                    currency={currency}
-                    country_standpoint={country_standpoint}
-                    is_dialog_on={is_acc_switcher_on}
-                    toggleDialog={toggleAccountsDialog}
-                />
-            </div>
-        </React.Fragment>
+    const AccountInfoComponent = React.useCallback(
+        () => (
+            <AccountInfo
+                acc_switcher_disabled_message={acc_switcher_disabled_message}
+                account_type={account_type}
+                balance={formatMoney(currency, balance, true)}
+                is_disabled={is_acc_switcher_disabled}
+                is_eu={is_eu}
+                is_virtual={is_virtual}
+                currency={currency}
+                country_standpoint={country_standpoint}
+                is_dialog_on={is_acc_switcher_on}
+                toggleDialog={toggleAccountsDialog}
+            />
+        ),
+        [is_acc_switcher_on]
     );
 
     const DefaultMobileLinks = () => (
@@ -259,18 +250,7 @@ const TradingHubHeader = ({
                         </Popover>
                         {cashier_routes && (
                             <div className='trading-hub-header__menu-right--items--account-toggle'>
-                                <AccountInfo
-                                    acc_switcher_disabled_message={acc_switcher_disabled_message}
-                                    account_type={account_type}
-                                    balance={formatMoney(currency, balance, true)}
-                                    is_disabled={is_acc_switcher_disabled}
-                                    is_eu={is_eu}
-                                    is_virtual={is_virtual}
-                                    currency={currency}
-                                    country_standpoint={country_standpoint}
-                                    is_dialog_on={is_acc_switcher_on}
-                                    toggleDialog={toggleAccountsDialog}
-                                />
+                                <AccountInfoComponent />
                             </div>
                         )}
                     </div>
@@ -280,7 +260,22 @@ const TradingHubHeader = ({
             <MobileWrapper>
                 <div className='trading-hub-header__mobile-parent'>
                     <div className='trading-hub-header__menu-middle'>
-                        {cashier_routes ? <CashierMobileLinks /> : <DefaultMobileLinks />}
+                        {cashier_routes ? (
+                            <React.Fragment>
+                                <div className='trading-hub-header__menu-right--items--notifications__cashier'>
+                                    <ShowNotifications
+                                        is_notifications_visible={is_notifications_visible}
+                                        notifications_count={notifications_count}
+                                        toggleNotifications={toggleNotifications}
+                                    />
+                                </div>
+                                <div className='trading-hub-header__menu-right--items--account-toggle'>
+                                    <AccountInfoComponent />
+                                </div>
+                            </React.Fragment>
+                        ) : (
+                            <DefaultMobileLinks />
+                        )}
                     </div>
                 </div>
                 <RealAccountSignup />