From ca0c82aa384a7d8733b6a9be613ad8e42e585551 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Tue, 17 Oct 2023 13:55:00 +0800 Subject: [PATCH 01/10] chore: backup --- .../MT5PasswordModal/MT5PasswordModal.tsx | 4 +-- .../cfd/modals/SuccessModal/SuccessModal.tsx | 20 +++++++++++ .../features/cfd/modals/SuccessModal/index.ts | 1 + .../wallets/src/features/cfd/modals/index.ts | 1 + .../cfd/screens/AccountReady/index.tsx | 1 - .../Success.scss} | 2 +- .../AccountReady.tsx => Success/Success.tsx} | 34 +++++++++---------- .../features/cfd/screens/Success/index.tsx | 1 + .../wallets/src/features/cfd/screens/index.ts | 3 +- 9 files changed, 44 insertions(+), 23 deletions(-) create mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/SuccessModal.tsx create mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/index.ts delete mode 100644 packages/wallets/src/features/cfd/screens/AccountReady/index.tsx rename packages/wallets/src/features/cfd/screens/{AccountReady/AccountReady.scss => Success/Success.scss} (98%) rename packages/wallets/src/features/cfd/screens/{AccountReady/AccountReady.tsx => Success/Success.tsx} (61%) create mode 100644 packages/wallets/src/features/cfd/screens/Success/index.tsx diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index 45557328e2ea..f2e3544c11f3 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -9,7 +9,7 @@ import { } from '@deriv/api'; import { ModalWrapper } from '../../../../components/Base'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; -import { AccountReady, CreatePassword, EnterPassword } from '../../screens'; +import { Success, CreatePassword, EnterPassword } from '../../screens'; type TProps = { marketType: Exclude['data']>[number]['market_type'], undefined>; @@ -45,7 +45,7 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { return ( - {isSuccess && } + {isSuccess && } {!isSuccess && (hasMT5Account ? ( ['data']>[number]['market_type'], undefined>; + title: string; + description: string; +}; + +const SuccessModal: React.FC = ({ marketType, title, description }) => { + return ( + + + + ); +}; + +export default SuccessModal; diff --git a/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts b/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts new file mode 100644 index 000000000000..259dad886e14 --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts @@ -0,0 +1 @@ +export { default as SuccessModal } from './SuccessModal'; diff --git a/packages/wallets/src/features/cfd/modals/index.ts b/packages/wallets/src/features/cfd/modals/index.ts index 74194eedf82c..4587835122b9 100644 --- a/packages/wallets/src/features/cfd/modals/index.ts +++ b/packages/wallets/src/features/cfd/modals/index.ts @@ -1,3 +1,4 @@ export * from './DxtradeEnterPasswordModal'; export * from './MT5AccountTypeModal'; export * from './MT5PasswordModal'; +export * from './SuccessModal'; diff --git a/packages/wallets/src/features/cfd/screens/AccountReady/index.tsx b/packages/wallets/src/features/cfd/screens/AccountReady/index.tsx deleted file mode 100644 index 6177d0180166..000000000000 --- a/packages/wallets/src/features/cfd/screens/AccountReady/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default as AccountReady } from './AccountReady'; diff --git a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss b/packages/wallets/src/features/cfd/screens/Success/Success.scss similarity index 98% rename from packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss rename to packages/wallets/src/features/cfd/screens/Success/Success.scss index 532085a52987..9544ba1d5e44 100644 --- a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss +++ b/packages/wallets/src/features/cfd/screens/Success/Success.scss @@ -1,4 +1,4 @@ -.wallets-account-ready { +.wallets-success { display: flex; flex-direction: column; justify-content: center; diff --git a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx similarity index 61% rename from packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.tsx rename to packages/wallets/src/features/cfd/screens/Success/Success.tsx index b3d8103df1e2..0227d4bb2bda 100644 --- a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -3,37 +3,35 @@ import { useActiveWalletAccount, useSortedMT5Accounts } from '@deriv/api'; import { useModal } from '../../../../components/ModalProvider'; import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon'; -import './AccountReady.scss'; +import './Success.scss'; -type TAccountReadyProps = { +type TSuccessProps = { marketType: Exclude['data']>[number]['market_type'], undefined>; + title: string; + description: string; }; -const marketTypeToTitleMapper: Record = { +const marketTypeToTitleMapper: Record = { all: 'Swap-Free', financial: 'MT5 Financial', synthetic: 'MT5 Derived', }; -const AccountReady: React.FC = ({ marketType }) => { +const Success: React.FC = ({ marketType }) => { const { data } = useActiveWalletAccount(); const { hide } = useModal(); const isDemo = data?.is_virtual; const landingCompanyName = data?.landing_company_name?.toUpperCase(); return ( -
+
-
+
{isDemo ? 'Demo' : 'Real'}
= ({ marketType }) => { isDemo={isDemo || false} marketType={marketType} /> -
+
{marketTypeToTitleMapper[marketType]} ({landingCompanyName})
-
{data?.currency} Wallet
-
{data?.display_balance} USD
+
{data?.currency} Wallet
+
{data?.display_balance} USD
-
+
Your {marketTypeToTitleMapper[marketType]} {isDemo && ' demo'} account is ready
-
+
You can now start practicing trading with your {marketTypeToTitleMapper[marketType]} {isDemo && ' demo'} account.
-
); }; -export default AccountReady; +export default Success; diff --git a/packages/wallets/src/features/cfd/screens/Success/index.tsx b/packages/wallets/src/features/cfd/screens/Success/index.tsx new file mode 100644 index 000000000000..06b4b6a5e6f7 --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/Success/index.tsx @@ -0,0 +1 @@ +export { default as Success } from './Success'; diff --git a/packages/wallets/src/features/cfd/screens/index.ts b/packages/wallets/src/features/cfd/screens/index.ts index 911b22d66d18..aab89c8650a0 100644 --- a/packages/wallets/src/features/cfd/screens/index.ts +++ b/packages/wallets/src/features/cfd/screens/index.ts @@ -1,6 +1,7 @@ -export * from './AccountReady'; +export * from './Success'; export * from './CreatePassword'; export * from './EnterPassword'; export * from './GetMoreMT5Accounts'; export * from './MT5AccountType'; export * from './MT5AccountTypeCard'; +export * from './Success'; From 5f6b12874dd7b5715e00bd4857bcdbe77bb5ee83 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Tue, 17 Oct 2023 14:37:38 +0800 Subject: [PATCH 02/10] refactor: renamed account ready modal to success modal --- .../MT5PasswordModal/MT5PasswordModal.tsx | 27 ++++++++++++++++-- .../cfd/modals/SuccessModal/SuccessModal.tsx | 20 ------------- .../features/cfd/modals/SuccessModal/index.ts | 1 - .../wallets/src/features/cfd/modals/index.ts | 1 - .../features/cfd/screens/Success/Success.scss | 2 +- .../features/cfd/screens/Success/Success.tsx | 28 ++++++++----------- 6 files changed, 38 insertions(+), 41 deletions(-) delete mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/SuccessModal.tsx delete mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/index.ts diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index f2e3544c11f3..41d88d4de69f 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -7,14 +7,22 @@ import { useSettings, useSortedMT5Accounts, } from '@deriv/api'; -import { ModalWrapper } from '../../../../components/Base'; +import { ModalWrapper, WalletButton } from '../../../../components/Base'; +import { WalletText } from '../../../../components/Base/WalletText'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; import { Success, CreatePassword, EnterPassword } from '../../screens'; +import { useModal } from '../../../../components/ModalProvider'; type TProps = { marketType: Exclude['data']>[number]['market_type'], undefined>; }; +const marketTypeToTitleMapper: Record = { + all: 'Swap-Free', + financial: 'MT5 Financial', + synthetic: 'MT5 Derived', +}; + const MT5PasswordModal: React.FC = ({ marketType }) => { const [password, setPassword] = useState(''); const { isSuccess, mutate } = useCreateMT5Account(); @@ -22,8 +30,10 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { const { data: mt5Accounts } = useMT5AccountsList(); const { data: availableMT5Accounts } = useAvailableMT5Accounts(); const { data: settings } = useSettings(); + const { hide } = useModal(); const hasMT5Account = mt5Accounts?.find(account => account.login); + const isDemo = activeWallet?.is_virtual; const onSubmit = () => { const accountType = marketType === 'synthetic' ? 'gaming' : marketType; @@ -45,7 +55,20 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { return ( - {isSuccess && } + {isSuccess && ( + ( + + Continue + + )} + title={`Your ${marketTypeToTitleMapper[marketType]} ${isDemo && ' demo'} account is ready`} + /> + )} {!isSuccess && (hasMT5Account ? ( ['data']>[number]['market_type'], undefined>; - title: string; - description: string; -}; - -const SuccessModal: React.FC = ({ marketType, title, description }) => { - return ( - - - - ); -}; - -export default SuccessModal; diff --git a/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts b/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts deleted file mode 100644 index 259dad886e14..000000000000 --- a/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SuccessModal } from './SuccessModal'; diff --git a/packages/wallets/src/features/cfd/modals/index.ts b/packages/wallets/src/features/cfd/modals/index.ts index 4587835122b9..74194eedf82c 100644 --- a/packages/wallets/src/features/cfd/modals/index.ts +++ b/packages/wallets/src/features/cfd/modals/index.ts @@ -1,4 +1,3 @@ export * from './DxtradeEnterPasswordModal'; export * from './MT5AccountTypeModal'; export * from './MT5PasswordModal'; -export * from './SuccessModal'; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.scss b/packages/wallets/src/features/cfd/screens/Success/Success.scss index 9544ba1d5e44..4ff893d9eba2 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.scss +++ b/packages/wallets/src/features/cfd/screens/Success/Success.scss @@ -3,7 +3,7 @@ flex-direction: column; justify-content: center; align-items: center; - padding: 16px; + padding: 16px 24px; gap: 24px; width: 392px; border-radius: 10px; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index 0227d4bb2bda..6f4c47571b79 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -1,14 +1,15 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import { useActiveWalletAccount, useSortedMT5Accounts } from '@deriv/api'; -import { useModal } from '../../../../components/ModalProvider'; import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon'; +import { WalletText } from '../../../../components'; import './Success.scss'; type TSuccessProps = { + description: string; marketType: Exclude['data']>[number]['market_type'], undefined>; + renderButton: () => ReactNode; title: string; - description: string; }; const marketTypeToTitleMapper: Record = { @@ -17,9 +18,8 @@ const marketTypeToTitleMapper: Record = { synthetic: 'MT5 Derived', }; -const Success: React.FC = ({ marketType }) => { +const Success: React.FC = ({ description, marketType, renderButton, title }) => { const { data } = useActiveWalletAccount(); - const { hide } = useModal(); const isDemo = data?.is_virtual; const landingCompanyName = data?.landing_company_name?.toUpperCase(); @@ -45,17 +45,13 @@ const Success: React.FC = ({ marketType }) => {
{data?.currency} Wallet
{data?.display_balance} USD
-
- Your {marketTypeToTitleMapper[marketType]} - {isDemo && ' demo'} account is ready -
-
- You can now start practicing trading with your {marketTypeToTitleMapper[marketType]} - {isDemo && ' demo'} account. -
- + + {title} + + + {description} + + {renderButton()}
); }; From 75602063827227f57f4c30cdb3f687ecd7f627a1 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Tue, 17 Oct 2023 14:37:38 +0800 Subject: [PATCH 03/10] refactor: renamed account ready modal to success modal --- .../MT5PasswordModal/MT5PasswordModal.tsx | 27 ++++++++++++++++-- .../cfd/modals/SuccessModal/SuccessModal.tsx | 20 ------------- .../features/cfd/modals/SuccessModal/index.ts | 1 - .../wallets/src/features/cfd/modals/index.ts | 1 - .../features/cfd/screens/Success/Success.scss | 2 +- .../features/cfd/screens/Success/Success.tsx | 28 ++++++++----------- .../wallets/src/features/cfd/screens/index.ts | 1 - 7 files changed, 38 insertions(+), 42 deletions(-) delete mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/SuccessModal.tsx delete mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/index.ts diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index f2e3544c11f3..41d88d4de69f 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -7,14 +7,22 @@ import { useSettings, useSortedMT5Accounts, } from '@deriv/api'; -import { ModalWrapper } from '../../../../components/Base'; +import { ModalWrapper, WalletButton } from '../../../../components/Base'; +import { WalletText } from '../../../../components/Base/WalletText'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; import { Success, CreatePassword, EnterPassword } from '../../screens'; +import { useModal } from '../../../../components/ModalProvider'; type TProps = { marketType: Exclude['data']>[number]['market_type'], undefined>; }; +const marketTypeToTitleMapper: Record = { + all: 'Swap-Free', + financial: 'MT5 Financial', + synthetic: 'MT5 Derived', +}; + const MT5PasswordModal: React.FC = ({ marketType }) => { const [password, setPassword] = useState(''); const { isSuccess, mutate } = useCreateMT5Account(); @@ -22,8 +30,10 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { const { data: mt5Accounts } = useMT5AccountsList(); const { data: availableMT5Accounts } = useAvailableMT5Accounts(); const { data: settings } = useSettings(); + const { hide } = useModal(); const hasMT5Account = mt5Accounts?.find(account => account.login); + const isDemo = activeWallet?.is_virtual; const onSubmit = () => { const accountType = marketType === 'synthetic' ? 'gaming' : marketType; @@ -45,7 +55,20 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { return ( - {isSuccess && } + {isSuccess && ( + ( + + Continue + + )} + title={`Your ${marketTypeToTitleMapper[marketType]} ${isDemo && ' demo'} account is ready`} + /> + )} {!isSuccess && (hasMT5Account ? ( ['data']>[number]['market_type'], undefined>; - title: string; - description: string; -}; - -const SuccessModal: React.FC = ({ marketType, title, description }) => { - return ( - - - - ); -}; - -export default SuccessModal; diff --git a/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts b/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts deleted file mode 100644 index 259dad886e14..000000000000 --- a/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SuccessModal } from './SuccessModal'; diff --git a/packages/wallets/src/features/cfd/modals/index.ts b/packages/wallets/src/features/cfd/modals/index.ts index 4587835122b9..74194eedf82c 100644 --- a/packages/wallets/src/features/cfd/modals/index.ts +++ b/packages/wallets/src/features/cfd/modals/index.ts @@ -1,4 +1,3 @@ export * from './DxtradeEnterPasswordModal'; export * from './MT5AccountTypeModal'; export * from './MT5PasswordModal'; -export * from './SuccessModal'; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.scss b/packages/wallets/src/features/cfd/screens/Success/Success.scss index 9544ba1d5e44..4ff893d9eba2 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.scss +++ b/packages/wallets/src/features/cfd/screens/Success/Success.scss @@ -3,7 +3,7 @@ flex-direction: column; justify-content: center; align-items: center; - padding: 16px; + padding: 16px 24px; gap: 24px; width: 392px; border-radius: 10px; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index 0227d4bb2bda..6f4c47571b79 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -1,14 +1,15 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import { useActiveWalletAccount, useSortedMT5Accounts } from '@deriv/api'; -import { useModal } from '../../../../components/ModalProvider'; import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon'; +import { WalletText } from '../../../../components'; import './Success.scss'; type TSuccessProps = { + description: string; marketType: Exclude['data']>[number]['market_type'], undefined>; + renderButton: () => ReactNode; title: string; - description: string; }; const marketTypeToTitleMapper: Record = { @@ -17,9 +18,8 @@ const marketTypeToTitleMapper: Record = { synthetic: 'MT5 Derived', }; -const Success: React.FC = ({ marketType }) => { +const Success: React.FC = ({ description, marketType, renderButton, title }) => { const { data } = useActiveWalletAccount(); - const { hide } = useModal(); const isDemo = data?.is_virtual; const landingCompanyName = data?.landing_company_name?.toUpperCase(); @@ -45,17 +45,13 @@ const Success: React.FC = ({ marketType }) => {
{data?.currency} Wallet
{data?.display_balance} USD
-
- Your {marketTypeToTitleMapper[marketType]} - {isDemo && ' demo'} account is ready -
-
- You can now start practicing trading with your {marketTypeToTitleMapper[marketType]} - {isDemo && ' demo'} account. -
- + + {title} + + + {description} + + {renderButton()}
); }; diff --git a/packages/wallets/src/features/cfd/screens/index.ts b/packages/wallets/src/features/cfd/screens/index.ts index aab89c8650a0..d5c488942926 100644 --- a/packages/wallets/src/features/cfd/screens/index.ts +++ b/packages/wallets/src/features/cfd/screens/index.ts @@ -1,4 +1,3 @@ -export * from './Success'; export * from './CreatePassword'; export * from './EnterPassword'; export * from './GetMoreMT5Accounts'; From 747c5d2fd4b93a4a980a422311c180955e4ec639 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Tue, 17 Oct 2023 15:09:09 +0800 Subject: [PATCH 04/10] chore: used wallet text, waiting for line height --- .../modals/MT5PasswordModal/MT5PasswordModal.tsx | 8 +++++--- .../src/features/cfd/screens/Success/Success.tsx | 15 +++++++++++---- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index 41d88d4de69f..cf361567a106 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -59,14 +59,16 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { ( - Continue + + Continue + )} - title={`Your ${marketTypeToTitleMapper[marketType]} ${isDemo && ' demo'} account is ready`} + title={`Your ${marketTypeToTitleMapper[marketType]} ${isDemo ? ' demo' : 'real'} account is ready`} /> )} {!isSuccess && diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index 6f4c47571b79..f7d8dd42a614 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -39,11 +39,18 @@ const Success: React.FC = ({ description, marketType, renderButto isDemo={isDemo || false} marketType={marketType} /> -
+ {marketTypeToTitleMapper[marketType]} ({landingCompanyName}) -
-
{data?.currency} Wallet
-
{data?.display_balance} USD
+ + {/*
*/} + + {data?.currency} Wallet + + + {data?.display_balance} USD + + {/*
{data?.currency} Wallet
+
{data?.display_balance} USD
*/} {title} From 564768b01063b1d85cc95f2f5ebcf4ccaad9b4d1 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Tue, 17 Oct 2023 15:20:17 +0800 Subject: [PATCH 05/10] chore: removed unused css --- .../features/cfd/screens/Success/Success.scss | 32 ------------------- 1 file changed, 32 deletions(-) diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.scss b/packages/wallets/src/features/cfd/screens/Success/Success.scss index 4ff893d9eba2..588d7ef44de6 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.scss +++ b/packages/wallets/src/features/cfd/screens/Success/Success.scss @@ -20,27 +20,6 @@ position: relative; border-radius: 10px; - &__text { - &--type { - font-weight: 400; - line-height: 14px; - font-size: 10px; - } - - &--wallet { - font-size: 10px; - font-weight: 400; - line-height: 14px; - color: #999999; - } - - &--amount { - font-size: 14px; - font-weight: 700; - line-height: 20px; - } - } - &-badge { position: absolute; top: 0; @@ -63,17 +42,6 @@ } } - &__title { - font-weight: 700; - font-size: 16px; - line-height: 24px; - } - - &__subtitle { - font-size: 14px; - line-height: 20px; - } - &__button { background-color: #ff444f; color: #ffffff; From acb2a71088f8e7cff68faa5db6fe3c277bb79c73 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Wed, 18 Oct 2023 11:49:57 +0800 Subject: [PATCH 06/10] chore: backup before merge --- .../WalletMarketCurrencyIcon.tsx | 6 ++- .../DxtradeEnterPasswordModal.tsx | 40 ++++++++++++------- .../MT5PasswordModal/MT5PasswordModal.tsx | 36 ++++++++--------- .../features/cfd/screens/Success/Success.tsx | 15 ++++++- 4 files changed, 62 insertions(+), 35 deletions(-) diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx index 8e70a211a5ce..7532400859da 100644 --- a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx @@ -1,5 +1,7 @@ import React, { ComponentType, SVGAttributes } from 'react'; import DerivedMT5Icon from '../../public/images/mt5-derived.svg'; +import DerivXIcon from '../../public/images/derivx.svg'; +import CTraderIcon from '../../public/images/ctrader.svg'; import FinancialMT5Icon from '../../public/images/mt5-financial.svg'; import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg'; import { WalletCardIcon } from '../WalletCardIcon'; @@ -10,12 +12,14 @@ const marketTypeToIconMapper: Record { diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx index 3cbfbbc5edb4..ad5f9f703aeb 100644 --- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx @@ -1,21 +1,22 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { useActiveWalletAccount, useCreateOtherCFDAccount } from '@deriv/api'; -import { ModalWrapper } from '../../../../components/Base'; -import { useModal } from '../../../../components/ModalProvider'; +import { ModalWrapper, WalletButton, WalletText } from '../../../../components/Base'; import DxTradePasswordIcon from '../../../../public/images/ic-dxtrade-password.svg'; -import { CreatePassword } from '../../screens'; +import { Success, CreatePassword } from '../../screens'; import './DxtradeEnterPasswordModal.scss'; +import { useModal } from '../../../../components/ModalProvider'; const DxtradeEnterPasswordModal = () => { const [password, setPassword] = useState(''); const { isSuccess, mutate } = useCreateOtherCFDAccount(); const { data: activeWallet } = useActiveWalletAccount(); const { hide } = useModal(); + const accountType = activeWallet?.is_virtual ? 'demo' : 'real'; const onSubmit = () => { mutate({ payload: { - account_type: activeWallet?.is_virtual ? 'demo' : 'real', + account_type: accountType, market_type: 'all', password, platform: 'dxtrade', @@ -23,18 +24,29 @@ const DxtradeEnterPasswordModal = () => { }); }; - useEffect(() => { - if (isSuccess) hide(); - }, [hide, isSuccess]); - return ( - - } - onPasswordChange={e => setPassword(e.target.value)} - onPrimaryClick={onSubmit} + + ( + + + Continue + + + )} + title={`Your Deriv X ${accountType} account is ready`} /> + {/* {!isSuccess && ( + } + onPasswordChange={e => setPassword(e.target.value)} + onPrimaryClick={onSubmit} + platform='dxtrade' + /> + )} */} ); }; diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index cf361567a106..41d998e4ab16 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -55,23 +55,23 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { return ( - {isSuccess && ( - ( - - - Continue - - - )} - title={`Your ${marketTypeToTitleMapper[marketType]} ${isDemo ? ' demo' : 'real'} account is ready`} - /> - )} - {!isSuccess && + {/* {isSuccess && ( */} + ( + + + Continue + + + )} + title={`Your ${marketTypeToTitleMapper[marketType]} ${isDemo ? ' demo' : 'real'} account is ready`} + /> + {/* )} */} + {/* {!isSuccess && (hasMT5Account ? ( = ({ marketType }) => { onPrimaryClick={onSubmit} platform='mt5' /> - ))} + ))} */} ); }; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index f7d8dd42a614..189c86e65fa7 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -8,6 +8,7 @@ import './Success.scss'; type TSuccessProps = { description: string; marketType: Exclude['data']>[number]['market_type'], undefined>; + platform: Exclude['data']>[number]['platform'], undefined>; renderButton: () => ReactNode; title: string; }; @@ -18,11 +19,21 @@ const marketTypeToTitleMapper: Record = { synthetic: 'MT5 Derived', }; -const Success: React.FC = ({ description, marketType, renderButton, title }) => { +const marketTypeToPlatformMapper = { + derivx: 'Deriv X', + ctrader: 'cTrader', +}; + +const Success: React.FC = ({ description, marketType, platform, renderButton, title }) => { const { data } = useActiveWalletAccount(); const isDemo = data?.is_virtual; const landingCompanyName = data?.landing_company_name?.toUpperCase(); + const marketTypeTitle = + marketType === 'all' && Object.keys(marketTypeToPlatformMapper).includes(platform) + ? marketTypeToPlatformMapper[platform] + : marketTypeToTitleMapper[marketType]; + return (
= ({ description, marketType, renderButto marketType={marketType} /> - {marketTypeToTitleMapper[marketType]} ({landingCompanyName}) + {marketTypeTitle} ({landingCompanyName}) {/*
*/} From e5cfcac26f65d288a60a0f741023f2cee723c185 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Wed, 18 Oct 2023 14:27:27 +0800 Subject: [PATCH 07/10] chore: fix eslint types --- .../wallets/src/components/ModalProvider/ModalProvider.tsx | 1 + .../WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx | 3 ++- .../cfd/modals/JurisdictionModal/JurisdictionModal.tsx | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/wallets/src/components/ModalProvider/ModalProvider.tsx b/packages/wallets/src/components/ModalProvider/ModalProvider.tsx index 7b5f6759aed7..145d875e11cc 100644 --- a/packages/wallets/src/components/ModalProvider/ModalProvider.tsx +++ b/packages/wallets/src/components/ModalProvider/ModalProvider.tsx @@ -15,6 +15,7 @@ type TMarketTypes = React.ComponentProps['selectedMarketT type TModalState = { marketType?: TMarketTypes; + platform?: string; }; const ModalContext = createContext(null); diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx index d7743646e8b4..7d791e71e13d 100644 --- a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx @@ -6,6 +6,7 @@ import FinancialMT5Icon from '../../public/images/mt5-financial.svg'; import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg'; import { WalletCardIcon } from '../WalletCardIcon'; import { WalletGradientBackground } from '../WalletGradientBackground'; +import type { useSortedMT5Accounts } from '@deriv/api'; import './WalletMarketCurrencyIcon.scss'; const marketTypeToIconMapper: Record>> = { @@ -22,7 +23,7 @@ const marketTypeToPlatformIconMapper: Record['data']>[number]['market_type'], undefined>; platform: string; }; diff --git a/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx b/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx index 2d09076c83e0..3b85e33a8bf0 100644 --- a/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx +++ b/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx @@ -11,6 +11,7 @@ const JurisdictionModal = () => { const { isLoading } = useAvailableMT5Accounts(); const marketType = modalState?.marketType || 'all'; + const platform = modalState?.platform || 'mt5'; if (isLoading) return

Loading...

; @@ -20,7 +21,7 @@ const JurisdictionModal = () => { show()} + onClick={() => show()} > Next From 9b09f0fe728b7ae02745df7b4b29d24b3f1eaf24 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Wed, 18 Oct 2023 14:32:15 +0800 Subject: [PATCH 08/10] chore: fix eslint types --- packages/wallets/src/features/cfd/screens/Success/Success.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index 11bf872e4565..3ae8f4032f75 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -53,7 +53,7 @@ const Success: React.FC = ({ description, marketType, platform, r marketType={marketType} platform={platform} /> - + {marketTypeTitle} ({landingCompanyName}) {/*
*/} From 65da29e6ac503e2f8c131c4ef5220137877dbd44 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Wed, 18 Oct 2023 14:51:45 +0800 Subject: [PATCH 09/10] chore: fix issue where svg has checkbox jurisdiction --- .../features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx index 3fec01b2d448..d0f400ce776e 100644 --- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx +++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx @@ -42,7 +42,7 @@ const JurisdictionScreen: FC = ({ selectedJurisdiction ))}
- {selectedJurisdiction && ( + {selectedJurisdiction && selectedJurisdiction !== 'svg' && (
Add Your Deriv MT5 Financial account under Deriv (V) Ltd, regulated by the Vanuatu Financial Services Commission. From 0b3e209730fa2bf7873fa04bc606034d0752dede Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Wed, 18 Oct 2023 15:16:18 +0800 Subject: [PATCH 10/10] chore: fix eslint sort issue --- .../WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx | 2 +- .../DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx | 2 +- .../features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx | 3 +-- packages/wallets/src/features/cfd/screens/Success/Success.tsx | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx index 7d791e71e13d..b5b61d87da86 100644 --- a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx @@ -16,8 +16,8 @@ const marketTypeToIconMapper: Record>> = { - dxtrade: DerivXIcon, ctrader: CTraderIcon, + dxtrade: DerivXIcon, }; type TWalletMarketCurrencyIconProps = { diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx index dd4026acf59d..9141ca7e1a49 100644 --- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useActiveWalletAccount, useCreateOtherCFDAccount } from '@deriv/api'; -import { ModalWrapper, WalletButton, WalletText } from '../../../../components/Base'; +import { ModalWrapper, WalletButton } from '../../../../components/Base'; import DxTradePasswordIcon from '../../../../public/images/ic-dxtrade-password.svg'; import { Success, CreatePassword } from '../../screens'; import './DxtradeEnterPasswordModal.scss'; diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index af4a687dd4ce..c59feafcd908 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -8,7 +8,6 @@ import { useSortedMT5Accounts, } from '@deriv/api'; import { ModalWrapper, WalletButton } from '../../../../components/Base'; -import { WalletText } from '../../../../components/Base/WalletText'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; import { Success, CreatePassword, EnterPassword } from '../../screens'; import { useModal } from '../../../../components/ModalProvider'; @@ -25,8 +24,8 @@ const marketTypeToTitleMapper: Record = { }; const marketTypeToPlatformTitleMapper: Record = { - dxtrade: 'Deriv X', ctrader: 'cTrader', + dxtrade: 'Deriv X', }; const MT5PasswordModal: React.FC = ({ marketType, platform }) => { diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index 3ae8f4032f75..60a2f59a7b32 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -20,8 +20,8 @@ const marketTypeToTitleMapper: Record = { }; const marketTypeToPlatformMapper: Record = { - dxtrade: 'Deriv X', ctrader: 'cTrader', + dxtrade: 'Deriv X', }; const Success: React.FC = ({ description, marketType, platform, renderButton, title }) => {