Skip to content

Commit

Permalink
Thisyahlen/mt5 password modal (deriv-com#10211)
Browse files Browse the repository at this point in the history
* feat: added close icon and onclickoutside handler for modal

* chore: updated code based on comments

* chore: fix error

* chore: add mt5 password modal to buttons

* chore: add mt5 password modal to buttons

* chore: update master

---------

Co-authored-by: adrienne-rio <[email protected]>
  • Loading branch information
thisyahlen-deriv and adrienne-deriv authored Sep 21, 2023
1 parent 057c6e0 commit 1646a2f
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from 'react';
import { useSortedMT5Accounts } from '@deriv/api';
import { useMT5AccountsList, useSortedMT5Accounts } from '@deriv/api';
import DerivedMT5 from '../../../public/images/mt5-derived.svg';
import FinancialMT5 from '../../../public/images/mt5-financial.svg';
import SwapFreeMT5 from '../../../public/images/mt5-swap-free.svg';
import { useModal } from '../../ModalProvider';
import MT5CreatePassword from '../../MT5CreatePassword';
import { MT5EnterPassword } from '../../MT5EnterPassword';
import { SecondaryActionButton } from '../../SecondaryActionButton';
import { TradingAccountCard } from '../../TradingAccountCard';
import './AvailableMT5AccountsList.scss';
Expand Down Expand Up @@ -30,6 +33,19 @@ type TProps = {
};

const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
const { show } = useModal();
const { data } = useMT5AccountsList();

const hasMT5Account = data?.find(acc => acc?.loginid);

const ShowMT5PasswordModal = () => {
return hasMT5Account ? (
<MT5EnterPassword name={market_type_to_name_mapper[account.market_type || 'synthetic']} />
) : (
<MT5CreatePassword />
);
};

return (
<TradingAccountCard
leading={() => (
Expand All @@ -38,7 +54,7 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
</div>
)}
trailing={() => (
<SecondaryActionButton>
<SecondaryActionButton onClick={() => show(<ShowMT5PasswordModal />)}>
<p className='wallets-available-mt5__text'>Get</p>
</SecondaryActionButton>
)}
Expand Down
108 changes: 108 additions & 0 deletions packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
.wallets-enter-password {
display: inline-flex;
padding: 20px 0px 24px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border-radius: 8px;
background: var(--system-light-8-primary-background, #fff);
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.25);

&--container {
display: flex;
width: 400px;
padding: 0 24px 24px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

&-title {
display: flex;
width: 400px;
align-items: center;
padding-bottom: 24px;
gap: 8px;
color: var(--system-light-1-prominent-text, #333);

/* desktop/paragraph/P1 - bold */
font-family: 'IBM Plex Sans';
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
}

&-subtitle {
font-size: 14px;
color: #333333;
line-height: 20px;
}

&-input {
position: relative;
width: 100%;

& > input {
font-size: 14px;
padding: 1rem;
border: 1px solid #d6dadb;
border-bottom: 5px solid #e6e9e9;
border-radius: 5px;
margin-bottom: 20px;
outline: none;
width: 100%;

&::placeholder {
color: #999999;
}
}

&-trailing-icon {
position: absolute;
right: 20px;
top: 20%;
transform: scale(1.2);
}
}

&-buttons {
display: flex;
width: 400px;
padding-right: 24px;
justify-content: flex-end;
align-items: center;
gap: 8px;
}

&-forgot-password-button {
display: flex;
height: 40px;
padding: 10px 16px;
justify-content: center;
align-items: center;
border-radius: 4px;
background: var(--system-light-8-primary-background, #fff);
font-weight: 700;
cursor: pointer;
border: 2px solid var(--system-light-3-less-prominent-text, #999);
}

&-add-button {
display: flex;
height: 40px;
padding: 10px 16px;
justify-content: center;
align-items: center;
border-radius: 4px;
background: #ff444f;
border: none;
color: #ffffff;
font-weight: 700;
cursor: pointer;

&--disabled {
opacity: 0.32;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import PasswordShowIcon from '../../public/images/ic-password-show.svg';
import { useModal } from '../ModalProvider';
import { WalletModal } from '../WalletModal';
import './MT5EnterPassword.scss';

type TProps = {
name?: string;
};

const MT5EnterPassword: React.FC<TProps> = ({ name }) => {
const { hide } = useModal();

return (
<WalletModal className='wallets-enter-password' has_close_icon onClickCloseIcon={hide}>
<div className='wallets-enter-password--container'>
<div className='wallets-enter-password-title'>Enter your Deriv MT5 password</div>
<span className='wallets-enter-password-subtitle'>
Enter your Deriv MT5 password to add a Deriv MT5 {name} account.
</span>
<div className='wallets-enter-password-input'>
<input placeholder='Deriv MT5 password' type='password' />
<PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
</div>
</div>
<div className='wallets-enter-password-buttons'>
<button className='wallets-enter-password-forgot-password-button'>Forgot password?</button>
<button className='wallets-enter-password-add-button'>Add account</button>
</div>
</WalletModal>
);
};

export default MT5EnterPassword;
1 change: 1 addition & 0 deletions packages/wallets/src/components/MT5EnterPassword/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as MT5EnterPassword } from './MT5EnterPassword';
1 change: 1 addition & 0 deletions packages/wallets/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export * from './DesktopWalletsList';
export * from './ExternalTradingPlatforms';
export * from './InlineMessage';
export * from './Loader';
export * from './MT5EnterPassword';
export * from './OptionsAndMultipliersListing';
export * from './PrimaryActionButton';
export * from './ProgressBar';
Expand Down

0 comments on commit 1646a2f

Please sign in to comment.