Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WALL] Lubega / WALL-3675 / Demo ctrader design updates #14398

Merged
merged 9 commits into from
Apr 1, 2024
Merged

[WALL] Lubega / WALL-3675 / Demo ctrader design updates #14398

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6f27fc9
fix: demo ctrader design updates
lubega-deriv Mar 29, 2024
02f418a
Merge branch 'master' of github.com:binary-com/deriv-app into WALL-36…
lubega-deriv Mar 29, 2024
08ef8ab
fix: applied comments
lubega-deriv Mar 29, 2024
9755aea
fix: missing prop
lubega-deriv Mar 29, 2024
886cddb
fix: missing prop
lubega-deriv Mar 29, 2024
c11c13c
fix: applied comments
lubega-deriv Mar 29, 2024
65aee23
Merge branch 'master' of github.com:binary-com/deriv-app into WALL-36…
lubega-deriv Apr 1, 2024
eba026f
Merge branch 'master' of github.com:binary-com/deriv-app into WALL-36…
lubega-deriv Apr 1, 2024
27e2c8b
fix: applied comments
lubega-deriv Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}

&__header {
padding: 2rem;
padding: 1.6rem 2.4rem;
border-bottom: 0.2rem solid #f2f3f4;
display: flex;
justify-content: space-between;
Expand Down
46 changes: 27 additions & 19 deletions packages/wallets/src/features/cfd/modals/CTraderSuccessModal/CTraderSuccessModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { useCtraderAccountsList } from '@deriv/api-v2';
import { useActiveWalletAccount, useCtraderAccountsList } from '@deriv/api-v2';
import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components';
import { useModal } from '../../../../components/ModalProvider';
import useDevice from '../../../../hooks/useDevice';
Expand All @@ -15,32 +15,40 @@ type TCTraderSuccessModal = {

const CTraderSuccessModal = ({ isDemo, walletCurrencyType }: TCTraderSuccessModal) => {
const { data: cTraderAccounts } = useCtraderAccountsList();
const { data: activeWallet } = useActiveWalletAccount();
lubega-deriv marked this conversation as resolved.
Show resolved Hide resolved
const { isMobile } = useDevice();
const history = useHistory();
const { hide } = useModal();

const renderButtons = useCallback(
() => (
<WalletButtonGroup isFlex isFullWidth>
<WalletButton onClick={() => hide()} size='lg' variant='outlined'>
Maybe later
</WalletButton>
<WalletButton
onClick={() => {
hide();
history.push('/wallets/cashier/transfer');
}}
size='lg'
>
Transfer funds
</WalletButton>
</WalletButtonGroup>
),
[hide, history]
() =>
lubega-deriv marked this conversation as resolved.
Show resolved Hide resolved
isDemo ? (
<div className='wallets-success-btn'>
<WalletButton isFullWidth onClick={hide} size='lg'>
OK
</WalletButton>
</div>
) : (
<WalletButtonGroup isFlex isFullWidth>
<WalletButton onClick={() => hide()} size='lg' variant='outlined'>
lubega-deriv marked this conversation as resolved.
Show resolved Hide resolved
Maybe later
</WalletButton>
<WalletButton
onClick={() => {
hide();
history.push('/wallets/cashier/transfer');
}}
size='lg'
>
Transfer funds
</WalletButton>
</WalletButtonGroup>
),
[hide, history, isDemo]
);

const description = isDemo
? `Transfer virtual funds from your Demo Wallet to your ${PlatformDetails.ctrader.title} Demo account to practice trading.`
? `Let's practise trading with ${activeWallet?.display_balance} virtual funds.`
: `Transfer funds from your ${walletCurrencyType} Wallet to your ${PlatformDetails.ctrader.title} account to start trading.`;

if (isMobile) {
Expand Down
1 change: 0 additions & 1 deletion ...lets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@

@include mobile {
padding: 0.8rem;
height: 6rem;
}
}

Expand Down
6 changes: 3 additions & 3 deletions ...llets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value, vari
>
{variant !== 'info' && (
<React.Fragment>
<WalletText color='less-prominent' size='sm'>
<WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
{label}
</WalletText>
<div className='wallets-mt5-trade-details-item__values'>
<WalletText size='sm' weight='bold'>
<WalletText size={isDesktop ? 'xs' : 'sm'} weight='bold'>
{value}
</WalletText>
{variant === 'clipboard' && (
Expand All @@ -51,7 +51,7 @@ const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value, vari
</React.Fragment>
)}
{variant === 'info' && (
<WalletText color='less-prominent' size={isDesktop ? 'sm' : 'md'}>
<WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
{value}
</WalletText>
)}
Expand Down
4 changes: 3 additions & 1 deletion packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@
&--left {
display: flex;
align-items: center;
gap: 0.8rem;

& > svg {
transform: scale(0.7) translateX(-0.7rem);
width: 2.4rem;
height: 2.4rem;
aizad-deriv marked this conversation as resolved.
Show resolved Hide resolved
}

.wallets-mt5-trade-screen__details-title {
Expand Down
6 changes: 3 additions & 3 deletions packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
: PlatformDetails[platform].icon}
<div className='wallets-mt5-trade-screen__label'>
<div className='wallets-mt5-trade-screen__title'>
<WalletText lineHeight='3xs' size='sm'>
<WalletText lineHeight='3xs' size={isDesktop ? 'sm' : 'md'}>
{platform === mt5Platform
? MarketTypeDetails[marketType ?? 'all'].title
: PlatformDetails[platform].title}{' '}
Expand All @@ -117,7 +117,7 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
{activeWalletData?.is_virtual && <WalletListCardBadge isDemo label='virtual' />}
</div>
<WalletText color='less-prominent' size='xs'>
{loginId}
{platform !== ctraderPlatform && loginId}
</WalletText>
</div>
</div>
Expand Down Expand Up @@ -155,7 +155,7 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {

<div className='wallets-mt5-trade-screen__details-maintainance'>
<ImportantIcon />
<WalletText color='less-prominent' size='2xs'>
<WalletText color='less-prominent' size={isDesktop ? '2xs' : 'xs'}>
{serviceMaintenanceMessages[platform || mt5Platform]}
</WalletText>
</div>
Expand Down
Loading