Skip to content

Commit

Permalink
Merge branch 'sergei/trah-2591/mt5-trade-screen' of github.com:sergei…
Browse files Browse the repository at this point in the history
…-deriv/deriv-app into sergei/trah-2591/mt5-trade-screen
  • Loading branch information
sergei-deriv committed Jan 10, 2024
2 parents b4f002f + 6e03df4 commit b394d7f
Show file tree
Hide file tree
Showing 23 changed files with 485 additions and 72 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
TRowItem,
} from 'Constants/regulators-modal-content';

const Row = ({ attribute, content }: TRegulatorsContentProps) => {
const Row = ({ attribute, content, id }: TRegulatorsContentProps) => {
return (
<Table.Row className='regulators-compare-table__table-row'>
<Table.Cell fixed>
Expand All @@ -22,7 +22,7 @@ const Row = ({ attribute, content }: TRegulatorsContentProps) => {
{Array.isArray(content[rowKey]) ? (
(content[rowKey] as TRowItem[])?.map(item => (
<Text
key={rowKey}
key={`${id}_${rowKey}_${item?.text}`}
as='p'
color={item?.options?.color ?? 'prominent'}
weight={item?.options?.weight ?? 'normal'}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import { Counter, DesktopWrapper, Icon, MobileWrapper, Popover } from '@deriv/components';
import { useP2PCompletedOrdersNotification } from '@deriv/hooks';
import NotificationsDialog from 'App/Containers/NotificationsDialog';
import 'Sass/app/modules/notifications-dialog.scss';

Expand All @@ -11,6 +12,8 @@ const ToggleNotificationsDrawer = ({
tooltip_message,
should_disable_pointer_events = false,
}) => {
useP2PCompletedOrdersNotification();

const notifications_toggler_el = (
<div
className={classNames('notifications-toggle__icon-wrapper', {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
import React from 'react';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { useStore } from '@deriv/stores';
import { DesktopWrapper, MobileWrapper, StaticUrl } from '@deriv/components';
import { getDecimalPlaces, platforms, routes } from '@deriv/shared';
import { AccountActions, MenuLinks, PlatformSwitcher } from 'App/Components/Layout/Header';
import { AccountsInfoLoader } from 'App/Components/Layout/Header/Components/Preloader';
import NewVersionNotification from 'App/Containers/new-version-notification.jsx';
import RealAccountSignup from 'App/Containers/RealAccountSignup';
import SetAccountCurrencyModal from 'App/Containers/SetAccountCurrencyModal';
import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
import platform_config from 'App/Constants/platform-config';
import DerivBrandLogo from 'Assets/SvgComponents/header/deriv-logo-short.svg';
import WalletsLogo from 'Assets/SvgComponents/header/wallets-logo.svg';

const DefaultHeaderWallets = () => {
const { client, common, ui, notifications, traders_hub } = useStore();
const {
account_switcher_disabled_message: acc_switcher_disabled_message,
disableApp,
enableApp,
header_extension,
is_account_switcher_disabled: is_acc_switcher_disabled,
is_accounts_switcher_on: is_acc_switcher_on,
is_app_disabled,
is_route_modal_on,
openRealAccountSignup,
toggleAccountsDialog,
is_trading_assessment_for_existing_user_enabled,
is_mobile,
} = ui;
const {
account_type,
balance,
currency,
country_standpoint,
is_bot_allowed,
is_eu,
is_logged_in,
is_logging_in,
is_mt5_allowed,
is_dxtrade_allowed,
is_virtual,
is_landing_company_loaded,
is_switching,
} = client;
const { current_language, platform, app_routing_history } = common;
const { setTogglePlatformType } = traders_hub;
const {
addNotificationMessage,
client_notifications,
is_notifications_visible,
notifications: { length: notifications_count },
removeNotificationMessage,
toggleNotificationsModal: toggleNotifications,
} = notifications;

const history = useHistory();

const addUpdateNotification = () => addNotificationMessage(client_notifications.new_version_available);
const removeUpdateNotification = React.useCallback(
() => removeNotificationMessage({ key: 'new_version_available' }),
[removeNotificationMessage]
);

React.useEffect(() => {
document.addEventListener('IgnorePWAUpdate', removeUpdateNotification);
return () => document.removeEventListener('IgnorePWAUpdate', removeUpdateNotification);
}, [removeUpdateNotification]);

const onClickDeposit = () => history.push(routes.cashier_deposit);

const filterPlatformsForClients = (payload: typeof platform_config) =>
payload.filter(config => {
if (config.link_to === routes.mt5) {
return !is_logged_in || is_mt5_allowed;
}
if (config.link_to === routes.dxtrade) {
return is_dxtrade_allowed;
}
if (
config.link_to === routes.bot ||
config.href === routes.binarybot ||
config.href === routes.smarttrader
) {
return is_bot_allowed;
}
return true;
});

return (
<header
className={classNames('header', {
'header--is-disabled': is_app_disabled || is_route_modal_on,
'header--is-hidden': platforms[platform],
})}
>
<div className='header__menu-items'>
<div className='header__menu-left'>
<DesktopWrapper>
<div className='header__menu-left-logo'>
<StaticUrl href='/'>
<DerivBrandLogo />
</StaticUrl>
</div>
<WalletsLogo className='header__menu-left-logo' onClick={() => history.push(routes.wallets)} />
<PlatformSwitcher
app_routing_history={app_routing_history}
is_landing_company_loaded={is_landing_company_loaded}
is_logged_in={is_logged_in}
is_logging_in={is_logging_in}
platform_config={filterPlatformsForClients(platform_config)}
setTogglePlatformType={setTogglePlatformType}
current_language={current_language}
/>
</DesktopWrapper>
<MobileWrapper>
<ToggleMenuDrawer platform_config={filterPlatformsForClients(platform_config)} />
{header_extension && is_logged_in && (
<div className='header__menu-left-extensions'>{header_extension}</div>
)}
</MobileWrapper>
<MenuLinks />
</div>
<div
className={classNames('header__menu-right', {
'header__menu-right--hidden': is_mobile && is_logging_in,
})}
>
{(is_logging_in || is_switching) && (
<div
id='dt_core_header_acc-info-preloader'
className={classNames('acc-info__preloader', {
'acc-info__preloader--no-currency': !currency,
'acc-info__preloader--is-crypto': getDecimalPlaces(currency) > 2,
})}
>
<AccountsInfoLoader is_logged_in={is_logged_in} is_mobile={is_mobile} speed={3} />
</div>
)}

<div id={'dt_core_header_acc-info-container'} className='acc-info__container'>
<AccountActions
acc_switcher_disabled_message={acc_switcher_disabled_message}
account_type={account_type}
balance={balance}
currency={currency}
country_standpoint={country_standpoint}
disableApp={disableApp}
enableApp={enableApp}
is_acc_switcher_on={is_acc_switcher_on}
is_acc_switcher_disabled={is_acc_switcher_disabled}
is_eu={is_eu}
is_notifications_visible={is_notifications_visible}
is_logged_in={is_logged_in}
is_virtual={is_virtual}
onClickDeposit={onClickDeposit}
notifications_count={notifications_count}
toggleAccountsDialog={toggleAccountsDialog}
toggleNotifications={toggleNotifications}
openRealAccountSignup={openRealAccountSignup}
/>
</div>
</div>
</div>
{/*
Prevent the modals that are part of Real Account signup to get triggered when the corresponding store value changes by
removing the parent element from DOM
*/}
{!is_trading_assessment_for_existing_user_enabled && <RealAccountSignup />}
<SetAccountCurrencyModal />
<NewVersionNotification onUpdate={addUpdateNotification} />
</header>
);
};

export default DefaultHeaderWallets;
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import { DesktopWrapper, MobileWrapper } from '@deriv/components';
import { DesktopWrapper, MobileWrapper, StaticUrl } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { routes, platforms } from '@deriv/shared';
import { MenuLinks, PlatformSwitcher } from 'App/Components/Layout/Header';
Expand All @@ -12,7 +12,9 @@ import SetAccountCurrencyModal from 'App/Containers/SetAccountCurrencyModal';
import NewVersionNotification from 'App/Containers/new-version-notification.jsx';
import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
import AccountsInfoLoaderWallets from 'App/Components/Layout/Header/wallets/accounts-info-loader-wallets';
import TradersHubHomeButton from './traders-hub-home-button';
import DerivBrandLogo from 'Assets/SvgComponents/header/deriv-logo-short.svg';
import WalletsLogo from 'Assets/SvgComponents/header/wallets-logo.svg';
import { useHistory } from 'react-router';

const Divider = () => <div className='header__menu--dtrader--separator' />;

Expand All @@ -22,6 +24,7 @@ const MenuLeft = observer(() => {
const { app_routing_history, current_language } = common;
const { header_extension } = ui;
const { setTogglePlatformType } = traders_hub;
const history = useHistory();

const filterPlatformsForClients = (payload: typeof platform_config) =>
payload.filter(config => {
Expand All @@ -44,6 +47,12 @@ const MenuLeft = observer(() => {
return (
<div className='header__menu-left'>
<DesktopWrapper>
<div className='header__menu-left-logo'>
<StaticUrl href='/'>
<DerivBrandLogo />
</StaticUrl>
</div>
<WalletsLogo className='header__menu-left-logo' onClick={() => history.push(routes.wallets)} />
<PlatformSwitcher
app_routing_history={app_routing_history}
platform_config={filterPlatformsForClients(platform_config)}
Expand All @@ -57,9 +66,6 @@ const MenuLeft = observer(() => {
<div className='header__menu-left-extensions'>{header_extension}</div>
)}
</MobileWrapper>
<DesktopWrapper>
<TradersHubHomeButton />
</DesktopWrapper>
<MenuLinks />
</div>
);
Expand All @@ -79,11 +85,6 @@ const MenuRight = observer(() => {
'header__menu-right--hidden': is_mobile && is_logging_in,
})}
>
<DesktopWrapper>
<div className='header__menu--dtrader--separator--account'>
<Divider />
</div>
</DesktopWrapper>
{(is_logging_in || is_switching) && (
<div
id='dt_core_header_acc-info-preloader'
Expand Down
9 changes: 5 additions & 4 deletions packages/core/src/App/Containers/Layout/header/header.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import React from 'react';
import { useLocation } from 'react-router-dom';
import { useFeatureFlags, useP2PCompletedOrdersNotification, useStoreWalletAccountsList } from '@deriv/hooks';
import { useFeatureFlags, useStoreWalletAccountsList } from '@deriv/hooks';
import { routes } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import DefaultHeader from './default-header';
import DefaultHeaderWallets from './defaut-header-wallets';
import DTraderHeader from './dtrader-header';
import TradersHubHeader from './traders-hub-header';
import DTraderHeaderWallets from './dtrader-header-wallets';
import TradersHubHeaderWallets from './traders-hub-header-wallets';
import { useReadLocalStorage } from 'usehooks-ts';

const Header = observer(() => {
const { client } = useStore();
const { accounts, is_logged_in, setAccounts, loginid, switchAccount } = client;
const { pathname } = useLocation();

useP2PCompletedOrdersNotification();
const is_wallets_cashier_route = pathname.includes(routes.wallets_cashier);

const traders_hub_routes =
Expand Down Expand Up @@ -52,7 +53,7 @@ const Header = observer(() => {
if (is_logged_in) {
let result;
if (traders_hub_routes) {
result = <TradersHubHeader />;
result = should_show_wallets ? <TradersHubHeaderWallets /> : <TradersHubHeader />;
} else if (pathname === routes.onboarding) {
result = null;
} else {
Expand All @@ -62,7 +63,7 @@ const Header = observer(() => {
} else if (pathname === routes.onboarding) {
return null;
}
return <DefaultHeader />;
return is_next_wallet_enabled ? <DefaultHeaderWallets /> : <DefaultHeader />;
});

export default Header;
Loading

0 comments on commit b394d7f

Please sign in to comment.