From 1646a2fca6b764d1f5a87906cc8888d611f03b30 Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:32:13 +0800 Subject: [PATCH] Thisyahlen/mt5 password modal (#10211) * 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 --- .../AvailableMT5AccountsList.tsx | 20 +++- .../MT5EnterPassword/MT5EnterPassword.scss | 108 ++++++++++++++++++ .../MT5EnterPassword/MT5EnterPassword.tsx | 34 ++++++ .../src/components/MT5EnterPassword/index.ts | 1 + packages/wallets/src/components/index.ts | 1 + 5 files changed, 162 insertions(+), 2 deletions(-) create mode 100644 packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.scss create mode 100644 packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.tsx create mode 100644 packages/wallets/src/components/MT5EnterPassword/index.ts diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/wallets/src/components/ExternalTradingPlatforms/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx index b950487c0cfe..67c877e72730 100644 --- a/packages/wallets/src/components/ExternalTradingPlatforms/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx +++ b/packages/wallets/src/components/ExternalTradingPlatforms/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx @@ -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'; @@ -30,6 +33,19 @@ type TProps = { }; const AvailableMT5AccountsList: React.FC = ({ account }) => { + const { show } = useModal(); + const { data } = useMT5AccountsList(); + + const hasMT5Account = data?.find(acc => acc?.loginid); + + const ShowMT5PasswordModal = () => { + return hasMT5Account ? ( + + ) : ( + + ); + }; + return ( ( @@ -38,7 +54,7 @@ const AvailableMT5AccountsList: React.FC = ({ account }) => { )} trailing={() => ( - + show()}>

Get

 )} diff --git a/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.scss b/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.scss new file mode 100644 index 000000000000..9fa9f65f6850 --- /dev/null +++ b/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.scss @@ -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; + } + } +} diff --git a/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.tsx b/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.tsx new file mode 100644 index 000000000000..4cdc50a1259e --- /dev/null +++ b/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.tsx @@ -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 = ({ name }) => { + const { hide } = useModal(); + + return ( + +
+
Enter your Deriv MT5 password
+ + Enter your Deriv MT5 password to add a Deriv MT5 {name} account. + +
+ + +
+
+
+ + +
+ + ); +}; + +export default MT5EnterPassword; diff --git a/packages/wallets/src/components/MT5EnterPassword/index.ts b/packages/wallets/src/components/MT5EnterPassword/index.ts new file mode 100644 index 000000000000..4c399dfa34a9 --- /dev/null +++ b/packages/wallets/src/components/MT5EnterPassword/index.ts @@ -0,0 +1 @@ +export { default as MT5EnterPassword } from './MT5EnterPassword'; diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts index 0acd47f54d5a..1654fecb306c 100644 --- a/packages/wallets/src/components/index.ts +++ b/packages/wallets/src/components/index.ts @@ -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';