[69420] Refactor account ready modal to success modal

packages/wallets/src/components/ModalProvider/ModalProvider.tsx

@@ -15,6 +15,7 @@ type TMarketTypes = React.ComponentProps<typeof MT5AccountType>['selectedMarketT
 
 type TModalState = {
     marketType?: TMarketTypes;
+    platform?: string;
 };
 
 const ModalContext = createContext<TModalContext | null>(null);

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<string, ComponentType<SVGAttributes<SVGElement>>> = {
@@ -12,14 +15,23 @@ const marketTypeToIconMapper: Record<string, ComponentType<SVGAttributes<SVGElem
     synthetic: DerivedMT5Icon,
 };
 
+const marketTypeToPlatformIconMapper: Record<string, ComponentType<SVGAttributes<SVGElement>>> = {
+    dxtrade: DerivXIcon,
+    ctrader: CTraderIcon,
+};
+
 type TWalletMarketCurrencyIconProps = {
     currency: string;
     isDemo: boolean;
-    marketType: string;
+    marketType: Exclude<NonNullable<ReturnType<typeof useSortedMT5Accounts>['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 (
         <div className='wallets-market-currency-icon'>

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 (
         <div className='wallets-ctrader'>
             <div className='wallets-ctrader__title'>
@@ -24,7 +28,13 @@ const CTraderList: React.FC = () => {
                         {...account}
                         key={`ctrader--${account.title}`}
                         leading={() => <div className='wallets-ctrader__content__icon'>{account.icon}</div>}
-                        trailing={() => <WalletButton color='primary-light' text='Get' />}
+                        trailing={() => (
+                            <WalletButton
+                                color='primary-light'
+                                onClick={() => show(<MT5PasswordModal marketType='all' platform='ctrader' />)}
+                                text='Get'
+                            />
+                        )}
                     >
                         <div className='wallets-ctrader__content__details'>
                             <p className='wallets-ctrader__content__details-title'>{account.title}</p>

packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx

@@ -42,7 +42,14 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
             trailing={() => (
                 <WalletButton
                     color='primary-light'
-                    onClick={() => show(<MT5PasswordModal marketType={account?.market_type || 'synthetic'} />)}
+                    onClick={() =>
+                        show(
+                            <MT5PasswordModal
+                                marketType={account?.market_type || 'synthetic'}
+                                platform={account.platform}
+                            />
+                        )
+                    }
                     text='Get'
                 />
             )}

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, WalletText } 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 (
         <ModalWrapper hideCloseButton={isSuccess}>
-            {isSuccess && <AccountReady marketType='all' />}
+            {isSuccess && (
+                <Success
+                    description={`You can now start practicing trading with your Deriv X ${accountType} account.`}
+                    marketType='all'
+                    platform='dxtrade'
+                    renderButton={() => <WalletButton isFullWidth onClick={hide} size='lg' text='Continue' />}
+                    title={`Your Deriv X ${accountType} account is ready`}
+                />
+            )}
             {!isSuccess && (
                 <CreatePassword
                     icon={<DxTradePasswordIcon />}

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 <h1>Loading...</h1>;
 
@@ -20,7 +21,7 @@ const JurisdictionModal = () => {
                 <React.Fragment>
                     <WalletButton
                         disabled={!selectedJurisdiction}
-                        onClick={() => show(<MT5PasswordModal marketType={marketType} />)}
+                        onClick={() => show(<MT5PasswordModal marketType={marketType} platform={platform} />)}
                     >
                         <WalletText color='white' size='xs' weight='bold'>
                             Next

packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx

@@ -7,22 +7,43 @@ 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 { AccountReady, CreatePassword, EnterPassword } from '../../screens';
+import { Success, CreatePassword, EnterPassword } from '../../screens';
+import { useModal } from '../../../../components/ModalProvider';
 
 type TProps = {
     marketType: Exclude<NonNullable<ReturnType<typeof useSortedMT5Accounts>['data']>[number]['market_type'], undefined>;
+    platform: string;
 };
 
-const MT5PasswordModal: React.FC<TProps> = ({ marketType }) => {
+const marketTypeToTitleMapper: Record<TProps['marketType'], string> = {
+    all: 'Swap-Free',
+    financial: 'MT5 Financial',
+    synthetic: 'MT5 Derived',
+};
+
+const marketTypeToPlatformTitleMapper: Record<string, string> = {
+    dxtrade: 'Deriv X',
+    ctrader: 'cTrader',
+};
+
+const MT5PasswordModal: React.FC<TProps> = ({ 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 +70,17 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType }) => {
 
     return (
         <ModalWrapper hideCloseButton={isSuccess}>
-            {isSuccess && <AccountReady marketType={marketType} />}
+            {isSuccess && (
+                <Success
+                    description={`You can now start practicing trading with your ${marketTypeTitle} ${
+                        isDemo ? ' demo' : 'real'
+                    } account.`}
+                    marketType={marketType}
+                    platform={platform}
+                    renderButton={() => <WalletButton isFullWidth onClick={hide} size='lg' text='Continue' />}
+                    title={`Your ${marketTypeTitle} ${isDemo ? ' demo' : 'real'} account is ready`}
+                />
+            )}
             {!isSuccess &&
                 (hasMT5Account ? (
                     <EnterPassword

packages/wallets/src/features/cfd/screens/AccountReady/AccountReady.scss → 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;