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 8e70a211a5ce..b5b61d87da86 100644 --- a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx @@ -1,9 +1,12 @@ 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'; import { WalletGradientBackground } from '../WalletGradientBackground'; +import type { useSortedMT5Accounts } from '@deriv/api'; import './WalletMarketCurrencyIcon.scss'; const marketTypeToIconMapper: Record>> = { @@ -12,14 +15,23 @@ const marketTypeToIconMapper: Record>> = { + ctrader: CTraderIcon, + dxtrade: DerivXIcon, +}; + type TWalletMarketCurrencyIconProps = { currency: string; isDemo: boolean; - marketType: string; + marketType: Exclude['data']>[number]['market_type'], undefined>; + platform: string; }; -const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType }: TWalletMarketCurrencyIconProps) => { - const MarketTypeIcon = marketTypeToIconMapper[marketType]; +const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TWalletMarketCurrencyIconProps) => { + const MarketTypeIcon = + marketType === 'all' && Object.keys(marketTypeToPlatformIconMapper).includes(platform) + ? marketTypeToPlatformIconMapper[platform] + : marketTypeToIconMapper[marketType]; return (
diff --git a/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx b/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx index 8cf7153acc19..64c21582d6d5 100644 --- a/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx +++ b/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx @@ -3,6 +3,8 @@ import { TradingAccountCard } from '../../../../components'; import { WalletButton } from '../../../../components/Base'; import CTrader from '../../../../public/images/ctrader.svg'; import './CTraderList.scss'; +import { useModal } from '../../../../components/ModalProvider'; +import { MT5PasswordModal } from '../../modals'; const ctraderMapper = [ { @@ -13,6 +15,8 @@ const ctraderMapper = [ ]; const CTraderList: React.FC = () => { + const { show } = useModal(); + return (
@@ -24,7 +28,13 @@ const CTraderList: React.FC = () => { {...account} key={`ctrader--${account.title}`} leading={() =>
{account.icon}
} - trailing={() => } + trailing={() => ( + show()} + text='Get' + /> + )} >

{account.title}

diff --git a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx index 2d6eea77fe9b..4abdb172576d 100644 --- a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx +++ b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx @@ -50,7 +50,10 @@ const AvailableMT5AccountsList: React.FC = ({ account }) => { }); show( activeWallet?.is_virtual ? ( - + ) : ( ) diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx index 2e02484466e1..9141ca7e1a49 100644 --- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx @@ -1,19 +1,22 @@ import React, { useState } from 'react'; import { useActiveWalletAccount, useCreateOtherCFDAccount } from '@deriv/api'; -import { ModalWrapper } from '../../../../components/Base'; +import { ModalWrapper, WalletButton } from '../../../../components/Base'; import DxTradePasswordIcon from '../../../../public/images/ic-dxtrade-password.svg'; -import { AccountReady, 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,7 +26,15 @@ const DxtradeEnterPasswordModal = () => { return ( - {isSuccess && } + {isSuccess && ( + } + title={`Your Deriv X ${accountType} account is ready`} + /> + )} {!isSuccess && ( } diff --git a/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx b/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx index a55d6b8891ba..baadc31a4ba4 100644 --- a/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx +++ b/packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx @@ -17,6 +17,7 @@ const JurisdictionModal = () => { const { isLoading } = useAvailableMT5Accounts(); const marketType = modalState?.marketType || 'all'; + const platform = modalState?.platform || 'mt5'; const capitalizedMarketType = marketTypeToTitleMapper[marketType]; @@ -27,7 +28,7 @@ const JurisdictionModal = () => { renderFooter={() => ( show()} + onClick={() => show()} text='Next' /> )} diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index f35dc1b35d47..c59feafcd908 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -7,22 +7,42 @@ import { useSettings, useSortedMT5Accounts, } from '@deriv/api'; -import { ModalWrapper } from '../../../../components/Base'; +import { ModalWrapper, WalletButton } from '../../../../components/Base'; import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; -import { AccountReady, CreatePassword, EnterPassword } from '../../screens'; +import { Success, CreatePassword, EnterPassword } from '../../screens'; +import { useModal } from '../../../../components/ModalProvider'; type TProps = { marketType: Exclude['data']>[number]['market_type'], undefined>; + platform: string; }; -const MT5PasswordModal: React.FC = ({ marketType }) => { +const marketTypeToTitleMapper: Record = { + all: 'Swap-Free', + financial: 'MT5 Financial', + synthetic: 'MT5 Derived', +}; + +const marketTypeToPlatformTitleMapper: Record = { + ctrader: 'cTrader', + dxtrade: 'Deriv X', +}; + +const MT5PasswordModal: React.FC = ({ marketType, platform }) => { const [password, setPassword] = useState(''); const { isSuccess, mutate } = useCreateMT5Account(); const { data: activeWallet } = useActiveWalletAccount(); 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 marketTypeTitle = + marketType === 'all' && Object.keys(marketTypeToPlatformTitleMapper).includes(platform) + ? marketTypeToPlatformTitleMapper[platform] + : marketTypeToTitleMapper[marketType]; const onSubmit = () => { const accountType = marketType === 'synthetic' ? 'gaming' : marketType; @@ -49,7 +69,17 @@ const MT5PasswordModal: React.FC = ({ marketType }) => { return ( - {isSuccess && } + {isSuccess && ( + } + title={`Your ${marketTypeTitle} ${isDemo ? ' demo' : 'real'} account is ready`} + /> + )} {!isSuccess && (hasMT5Account ? ( ['data']>[number]['market_type'], undefined>; -}; - -const marketTypeToTitleMapper: Record = { - all: 'Swap-Free', - financial: 'MT5 Financial', - synthetic: 'MT5 Derived', -}; - -const AccountReady: 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'} -
- -
- {marketTypeToTitleMapper[marketType]} ({landingCompanyName}) -
-
{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; 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/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. diff --git a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss b/packages/wallets/src/features/cfd/screens/Success/Success.scss similarity index 62% rename from packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss rename to packages/wallets/src/features/cfd/screens/Success/Success.scss index 532085a52987..588d7ef44de6 100644 --- a/packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss +++ b/packages/wallets/src/features/cfd/screens/Success/Success.scss @@ -1,9 +1,9 @@ -.wallets-account-ready { +.wallets-success { display: flex; flex-direction: column; justify-content: center; align-items: center; - padding: 16px; + padding: 16px 24px; gap: 24px; width: 392px; border-radius: 10px; @@ -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; diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx new file mode 100644 index 000000000000..60a2f59a7b32 --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -0,0 +1,78 @@ +import React, { ReactNode } from 'react'; +import { useActiveWalletAccount, useSortedMT5Accounts } from '@deriv/api'; +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>; + platform: Exclude['data']>[number]['platform'], undefined>; + renderButton: () => ReactNode; + title: string; +}; + +const marketTypeToTitleMapper: Record = { + all: 'Swap-Free', + financial: 'MT5 Financial', + synthetic: 'MT5 Derived', +}; + +const marketTypeToPlatformMapper: Record = { + ctrader: 'cTrader', + dxtrade: 'Deriv X', +}; + +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 ( +
+ +
+ + {isDemo ? 'Demo' : 'Real'} + +
+ + + {marketTypeTitle} ({landingCompanyName}) + + {/*
*/} + + {data?.currency} Wallet + + + {data?.display_balance} + +
+ + {title} + + + {description} + + {renderButton()} +
+ ); +}; + +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..d5c488942926 100644 --- a/packages/wallets/src/features/cfd/screens/index.ts +++ b/packages/wallets/src/features/cfd/screens/index.ts @@ -1,6 +1,6 @@ -export * from './AccountReady'; export * from './CreatePassword'; export * from './EnterPassword'; export * from './GetMoreMT5Accounts'; export * from './MT5AccountType'; export * from './MT5AccountTypeCard'; +export * from './Success';