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

…y-com#8270)

* chore: add useTraderStores

* chore: add trader-providers

* refactor: replace MobxContentProvider with TraderProviders

* chore: update trader to trade

* refactor: replace connect in Trader package v1.0 (#76)

* refactor: contract-replay, contract-drawer and contract-drawer-card to use useStore (#77)

* Jim/93585/replace connect with usestore in market countdown timer market unavailable trade modals unsupported contract modal (#79)

* refactor: remove connect from market-countdown-timer

* refactor: remove connect from market-unavailable

* refactor: remove connect from trade-modals

* refactor: move is_visible prop to market-unavailable

* refactor: remove connect from unsupported-contract-modal

* Hamza/93474/replace connect with use trader store (#78)

* refactor: replace connect in Trader package v1.0

* refactor: replace connect with useTraderStore v1.2

* refactor: replace connect with useTraderStore v1.2.1

* refactor: replace connect with useTraderStore v1.2.2

* refactor: replace connect with useTraderStore v1.2.3

* Hamza/93474/replace connect with use trader store (#80)

* refactor: replace connect in Trader package v1.0

* refactor: replace connect with useTraderStore v1.2

* refactor: replace connect with useTraderStore v1.2.1

* refactor: replace connect with useTraderStore v1.2.2

* refactor: replace connect with useTraderStore v1.2.3

* refactor: replace connect with useTraderStore v1.3

* refactor: replace connect with useTraderStore v1.4

* Jim/93604/replace connect with use store in positions drawer positions modal card toggle positions mobile time picker populate header (#81)

* refactor: remove connect from positions-drawer

* refactor: remove connect from positions-modal-card

* refactor: remove connect from toggle-positions-mobile

* refactor: remove connect from time-picker

* refactor: remove connect from populate-header

* Jim/93667/replace connect with use store in trade header extensions trade settings extensions progress slider stream routes (#83)

* refactor: remove connect from positions-drawer

* refactor: remove connect from positions-modal-card

* refactor: remove connect from toggle-positions-mobile

* refactor: remove connect from time-picker

* refactor: remove connect from populate-header

* refactor: remove connect from trade-footer-extensions

* refactor: migrate trade-header-extensions to ts and remove connect from it

* refactor: migrate trade-settings-extensions to ts and remove connect from it

* refactor: remove connect from progress-slider-stream and routes

* chore: update mocstore with new fields

* Hamza/93474/replace connect with use trader store (#82)

* refactor: replace connect in Trader package v1.0

* refactor: replace connect with useTraderStore v1.2

* refactor: replace connect with useTraderStore v1.2.1

* refactor: replace connect with useTraderStore v1.2.2

* refactor: replace connect with useTraderStore v1.2.3

* refactor: replace connect with useTraderStore v1.3

* refactor: replace connect with useTraderStore v1.4

* refactor: replace connect with useTraderStore v1.5

* refactor: replace connect with useTraderStore v1.5.1

* refactor: replace connect with useTraderStore v1.5.2

* refactor: replace connect with useTraderStore v1.5.3 test failing fixed

* refactor: replace connect with useTraderStore v1.5.4

* Jim/88556/replace connect with use store in settings chart accumulators stats contract replay widget contract and toolbar widgets (#84)

* chore: removeconnectsettings-chart/accumulators-stats/contract-replay-widget/contracttoolbar-widgets

* refactor: remove connect from accumulators-stats.spec

* refactor: replace connect in top-widgets_cancel-deal-mobile_risk-management-info_mobile-widget

* Hamza/93474/replace connect with use trader store (#85)

* refactor: replace connect in Trader package v1.0

* refactor: replace connect with useTraderStore v1.2

* refactor: replace connect with useTraderStore v1.2.1

* refactor: replace connect with useTraderStore v1.2.2

* refactor: replace connect with useTraderStore v1.2.3

* refactor: replace connect with useTraderStore v1.3

* refactor: replace connect with useTraderStore v1.4

* refactor: replace connect with useTraderStore v1.5

* refactor: replace connect with useTraderStore v1.5.1

* refactor: replace connect with useTraderStore v1.5.2

* refactor: replace connect with useTraderStore v1.5.3 test failing fixed

* refactor: replace connect with useTraderStore v1.5.4

* refactor: replace the connect with useStore v1.6

* fix: reverted the duration-wrapper

* fix: the duration-wrapper

* refactor: replace connect in top-widgets_cancel-deal-mobile_risk-management-info_mobile-widget (#86)

* refactor: restore component structure to its original form

* refactor: remove MobxContentProvider

* refactor: replace connect in strike, vanilla-trade-type, screen-small, chart-widgets, and test

* Jim/93866/replace_connect_with_usestore_in_strike_vanilla-trade-type_screen-small_chart-widgets_and_test (#87)

* refactor: replace connect in top-widgets_cancel-deal-mobile_risk-management-info_mobile-widget

* refactor: restore component structure to its original form

* refactor: remove MobxContentProvider

* refactor: replace connect in strike, vanilla-trade-type, screen-small, chart-widgets, and test

* Hamza/93474/replace connect with use trader store (#88)

* refactor: replace connect in Trader package v1.0

* refactor: replace connect with useTraderStore v1.2

* refactor: replace connect with useTraderStore v1.2.1

* refactor: replace connect with useTraderStore v1.2.2

* refactor: replace connect with useTraderStore v1.2.3

* refactor: replace connect with useTraderStore v1.3

* refactor: replace connect with useTraderStore v1.4

* refactor: replace connect with useTraderStore v1.5

* refactor: replace connect with useTraderStore v1.5.1

* refactor: replace connect with useTraderStore v1.5.2

* refactor: replace connect with useTraderStore v1.5.3 test failing fixed

* refactor: replace connect with useTraderStore v1.5.4

* refactor: replace the connect with useStore v1.6

* fix: reverted the duration-wrapper

* fix: the duration-wrapper

* fix: contract not bought error config missing from props

* refactor: remove connect function definition and connectwithcontractupdates

* Jim/93908/remove-connect-and-connect-with-contract-updates-definitions from trader (#89)

* refactor: replace connect in top-widgets_cancel-deal-mobile_risk-management-info_mobile-widget

* refactor: restore component structure to its original form

* refactor: remove MobxContentProvider

* refactor: replace connect in strike, vanilla-trade-type, screen-small, chart-widgets, and test

* refactor: remove connect function definition and connectwithcontractupdates

* refactor: address whitespace comments, type exportsclear

* chore: remove unused invalid import

* chore: add type keyword on import statement

* chore: add whitespace

* refactor: remove passthrough.root_store

* chore: restore props

* chore: remove sonarcloud bug

* refactor: wrap allowequalsmobile in a div to make it collapsible

---------

Co-authored-by: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>

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

@@ -136,6 +136,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: '',
@@ -262,6 +263,8 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_real_acc_signup_on: false,
             is_need_real_account_for_cashier_modal_visible: false,
             toggleNeedRealAccountForCashierModal: jest.fn(),
+            populateHeaderExtensions: jest.fn(),
+            populateSettingsExtensions: jest.fn(),
             setShouldShowCooldownModal: jest.fn(),
         },
         traders_hub: {

packages/stores/types.ts

@@ -12,6 +12,12 @@ import type { Moment } from 'moment';
 import type { RouteComponentProps } from 'react-router';
 import type { ExchangeRatesStore, FeatureFlagsStore } from './src/stores';
 
+type TPopulateSettingsExtensionsMenuItem = {
+    icon: string;
+    label: string;
+    value: <T extends object>(props: T) => JSX.Element;
+};
+
 type TAccount = NonNullable<Authorize['account_list']>[0] & {
     balance?: number;
 };
@@ -165,6 +171,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;
@@ -296,6 +303,8 @@ type TUiStore = {
     is_real_acc_signup_on: 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;
 };