Jim | Hamza/88557/replace-connect-with-use-store-trader-parent

packages/components/src/components/u-i-loader/ui-loader.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
+import Loadable from 'react-loadable';
 
 type TUILoader = {
     className?: string;
     classNameBlock?: string;
-};
+} & Loadable.LoadingComponentProps;
+
 const UILoader = ({ className, classNameBlock }: TUILoader) => {
     const block_class = classNames(classNameBlock, 'block-ui');
     const loading_class = classNames('block-ui__loading', className);

packages/stores/src/mockStore.ts

@@ -134,6 +134,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_trading_experience_incomplete: false,
             is_virtual: false,
             is_withdrawal_lock: false,
+            is_populating_account_list: false,
             landing_company_shortcode: '',
             local_currency_config: {
                 currency: '',
@@ -245,6 +246,8 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_ready_to_deposit_modal_visible: false,
             is_need_real_account_for_cashier_modal_visible: false,
             toggleNeedRealAccountForCashierModal: jest.fn(),
+            populateHeaderExtensions: jest.fn(),
+            populateSettingsExtensions: jest.fn(),
             setShouldShowCooldownModal: jest.fn(),
         },
         traders_hub: {
@@ -288,6 +291,9 @@ const mock = (): TStores & { is_mock: boolean } => {
             update: jest.fn(),
             unmount: jest.fn(),
         },
+        portfolio: {
+            onMount: jest.fn(),
+        },
     };
 };
 

packages/stores/types.ts

@@ -2,6 +2,12 @@ import type { Authorize, DetailsOfEachMT5Loginid, GetAccountStatus, GetLimits, L
 import type { RouteComponentProps } from 'react-router';
 import { ExchangeRatesStore } from './src/stores';
 
+type TPopulateSettingsExtensionsMenuItem = {
+    icon: string;
+    label: string;
+    value: <T extends object>(props: T) => JSX.Element;
+};
+
 type TAccount = NonNullable<Authorize['account_list']>[0];
 
 type TAccountsList = {
@@ -135,6 +141,7 @@ type TClientStore = {
     is_virtual: boolean;
     is_withdrawal_lock: boolean;
     landing_company_shortcode: string;
+    is_populating_account_list: boolean;
     local_currency_config: {
         currency: string;
         decimal_places?: number;
@@ -249,6 +256,8 @@ type TUiStore = {
     is_ready_to_deposit_modal_visible: boolean;
     is_need_real_account_for_cashier_modal_visible: boolean;
     toggleNeedRealAccountForCashierModal: () => void;
+    populateHeaderExtensions: (header_items: JSX.Element | null) => void;
+    populateSettingsExtensions: (menu_items: Array<TPopulateSettingsExtensionsMenuItem> | null) => void;
     setShouldShowCooldownModal: (value: boolean) => void;
 };
 
@@ -296,6 +305,10 @@ type TTradersHubStore = {
     is_demo: boolean;
 };
 
+type TPortfolioStore = {
+    onMount: () => void;
+};
+
 /**
  * This is the type that contains all the `core` package stores
  */
@@ -309,6 +322,7 @@ export type TCoreStores = {
     modules: any;
     notifications: TNotificationStore;
     traders_hub: TTradersHubStore;
+    portfolio: TPortfolioStore;
 };
 
 export type TStores = TCoreStores & {