Skip to content

Commit

Permalink
Merge pull request #42 from amina-deriv/81217#Amina/_In_responsive,_n…
Browse files Browse the repository at this point in the history 
…ot_able_to_scroll_down_if_user_adding_all_CFD_accounts

81217#amina/ in responsive, not able to scroll down if user adding all cfd accounts
  • Loading branch information
@matin-deriv
matin-deriv committed Dec 13, 2022
2 parents 3fe6edf + 50f6d85 commit bd5f6fa
Showing 1 changed file with 111 additions and 100 deletions.
211 changes: 111 additions & 100 deletions packages/appstore/src/modules/trading-hub/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,17 @@ import { observer } from 'mobx-react-lite';
import { platform_config, mf_platform_config } from 'Constants/platform-config';
import Joyride from 'react-joyride';
import { useHistory } from 'react-router-dom';
import { Text, Button, ButtonToggle, Dropdown, DesktopWrapper, MobileWrapper, Loading } from '@deriv/components';
import { routes, isMobile } from '@deriv/shared';
import {
Button,
ButtonToggle,
DesktopWrapper,
Div100vhContainer,
Dropdown,
Loading,
MobileWrapper,
Text,
} from '@deriv/components';
import { routes, isMobile, isDesktop } from '@deriv/shared';
import { Localize, localize } from '@deriv/translations';
import ToggleAccountType from 'Components/toggle-account-type';
import {
Expand Down Expand Up @@ -182,113 +191,115 @@ const TradingHub: React.FC = () => {
if (is_loading) return <Loading className='cfd-accounts-container__loader' is_fullscreen={false} />;

return (
<div id='trading-hub' className='trading-hub'>
<div className='trading-hub_header'>
<div className='trading-hub_header--title'>
<Text weight='bold' size={isMobile() ? 'xxs' : 'm'} align='left'>
{localize("Trader's hub")}
</Text>
<Div100vhContainer height_offset='40px' is_disabled={isDesktop()}>
<div id='trading-hub' className='trading-hub'>
<div className='trading-hub_header'>
<div className='trading-hub_header--title'>
<Text weight='bold' size={isMobile() ? 'xxs' : 'm'} align='left'>
{localize("Trader's hub")}
</Text>
</div>
<div className='trading-hub_header--account'>
<TotalAssets category={tab_account_type} className='trading-hub_header--account_assets' />
<DesktopWrapper>
<ToggleAccountType
accountTypeChange={(event: {
target: {
value: string;
name: string;
};
}) => {
accountTypeChange(event);
}}
value={tab_account_type}
/>
</DesktopWrapper>
<MobileWrapper>
<Dropdown
id='platfrom_toggle_options'
className='trading-hub_header--platfrom_toggle_options'
is_alignment_left={false}
is_nativepicker={false}
list={account_toggle_options}
name='multiplier'
no_border={true}
value={tab_account_type}
onChange={accountTypeChange}
/>
</MobileWrapper>
</div>
</div>
<div className='trading-hub_header--account'>
<TotalAssets category={tab_account_type} className='trading-hub_header--account_assets' />

<div className='trading-hub_body'>
<DesktopWrapper>
<ToggleAccountType
accountTypeChange={(event: {
target: {
value: string;
name: string;
};
}) => {
accountTypeChange(event);
}}
value={tab_account_type}
<CFDAccounts account_type={tab_account_type} />
<Divider horizontal className='trading-hub_body--divider' />
<OptionsAccounts
platformlauncherprops={is_eu ? mf_platform_config : platform_config}
accountType={tab_account_type}
/>
</DesktopWrapper>
<MobileWrapper>
<Dropdown
id='platfrom_toggle_options'
className='trading-hub_header--platfrom_toggle_options'
is_alignment_left={false}
is_nativepicker={false}
list={account_toggle_options}
name='multiplier'
no_border={true}
value={tab_account_type}
onChange={accountTypeChange}
<ButtonToggle
buttons_arr={platform_toggle_options}
className='trading-hub_body--platform_type_toggle'
has_rounded_button
is_animated
name='platforn_type'
onChange={platformTypeChange}
value={platform_type}
/>
{platform_type === 'cfd' && <CFDAccounts account_type={tab_account_type} />}
{platform_type === 'options' && (
<OptionsAccounts
platformlauncherprops={is_eu ? mf_platform_config : platform_config}
accountType={tab_account_type}
/>
)}
</MobileWrapper>
</div>
<Joyride
run={is_tour_open}
continuous
disableScrolling
hideCloseButton
disableCloseOnEsc
steps={tour_step_config}
styles={is_dark_mode_on ? tour_styles_dark_mode : tour_styles}
locale={tour_step_locale}
floaterProps={{
disableAnimation: true,
}}
/>
<JurisdictionModal context={store} openPasswordModal={openRealPasswordModal} />
<CFDPasswordModal context={store} platform={platform} />
<CFDDbviOnBoarding context={store} />
<CFDPersonalDetailsModal context={store} />
<CFDResetPasswordModal context={store} platform={platform} />
<CFDServerErrorDialog context={store} />
<CFDTopUpDemoModal context={store} />
<MT5TradeModal
context={store}
current_list={current_list}
is_open={is_mt5_trade_modal_visible}
onPasswordManager={togglePasswordManagerModal}
toggleModal={toggleMT5TradeModal}
is_eu_user={(is_logged_in && is_eu) || (!is_logged_in && is_eu_country)}
/>
<CFDPasswordManagerModal
is_visible={password_manager.is_visible}
context={store}
selected_login={password_manager.selected_login}
selected_account={password_manager.selected_account}
selected_account_group={password_manager.selected_account_group}
selected_account_type={password_manager.selected_account_type}
selected_server={password_manager.selected_server}
platform={platform}
toggleModal={togglePasswordManagerModal}
/>
<ResetTradingPasswordModal context={store} />
</div>

<div className='trading-hub_body'>
<DesktopWrapper>
<CFDAccounts account_type={tab_account_type} />
<Divider horizontal className='trading-hub_body--divider' />
<OptionsAccounts
platformlauncherprops={is_eu ? mf_platform_config : platform_config}
accountType={tab_account_type}
/>
</DesktopWrapper>
<MobileWrapper>
<ButtonToggle
buttons_arr={platform_toggle_options}
className='trading-hub_body--platform_type_toggle'
has_rounded_button
is_animated
name='platforn_type'
onChange={platformTypeChange}
value={platform_type}
/>
{platform_type === 'cfd' && <CFDAccounts account_type={tab_account_type} />}
{platform_type === 'options' && (
<OptionsAccounts
platformlauncherprops={is_eu ? mf_platform_config : platform_config}
accountType={tab_account_type}
/>
)}
</MobileWrapper>
</div>
<Joyride
run={is_tour_open}
continuous
disableScrolling
hideCloseButton
disableCloseOnEsc
steps={tour_step_config}
styles={is_dark_mode_on ? tour_styles_dark_mode : tour_styles}
locale={tour_step_locale}
floaterProps={{
disableAnimation: true,
}}
/>
<JurisdictionModal context={store} openPasswordModal={openRealPasswordModal} />
<CFDPasswordModal context={store} platform={platform} />
<CFDDbviOnBoarding context={store} />
<CFDPersonalDetailsModal context={store} />
<CFDResetPasswordModal context={store} platform={platform} />
<CFDServerErrorDialog context={store} />
<CFDTopUpDemoModal context={store} />
<MT5TradeModal
context={store}
current_list={current_list}
is_open={is_mt5_trade_modal_visible}
onPasswordManager={togglePasswordManagerModal}
toggleModal={toggleMT5TradeModal}
is_eu_user={(is_logged_in && is_eu) || (!is_logged_in && is_eu_country)}
/>
<CFDPasswordManagerModal
is_visible={password_manager.is_visible}
context={store}
selected_login={password_manager.selected_login}
selected_account={password_manager.selected_account}
selected_account_group={password_manager.selected_account_group}
selected_account_type={password_manager.selected_account_type}
selected_server={password_manager.selected_server}
platform={platform}
toggleModal={togglePasswordManagerModal}
/>
<ResetTradingPasswordModal context={store} />
</div>
</Div100vhContainer>
);
};

Expand Down

0 comments on commit bd5f6fa

Please sign in to comment.