feat: added derivez demo/real/static to tradershub/onboarding

packages/appstore/src/assets/svgs/trading-platform/index.tsx

@@ -4,6 +4,7 @@ import BinaryBotBlue from 'Assets/svgs/trading-platform/ic-appstore-binarybot-bl
 import DBot from 'Assets/svgs/trading-platform/ic-brand-dbot.svg';
 import Demo from 'Assets/svgs/trading-platform/ic-brand-demo.svg';
 import Derived from 'Assets/svgs/trading-platform/ic-appstore-derived.svg';
+import DerivEz from 'Assets/svgs/trading-platform/ic-brand-derivez.svg';
 import DerivGo from 'Assets/svgs/trading-platform/ic-brand-derivgo.svg';
 import DerivGoBlack from 'Assets/svgs/trading-platform/ic-appstore-derivgo-black.svg';
 import DerivLogo from 'Assets/svgs/trading-platform/ic-appstore-deriv-logo.svg';
@@ -24,6 +25,7 @@ export const PlatformIcons = {
     DBot,
     Demo,
     Derived,
+    DerivEz,
     DerivGo,
     DerivGoBlack,
     DerivLogo,

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -363,7 +363,7 @@
                 display: flex;
                 flex-direction: column;
                 width: 13.6rem;
-                height: 14rem;
+                height: auto;
                 padding: 0.8rem;
                 align-items: center;
                 border: 1px solid var(--border-disabled);

packages/appstore/src/components/cfds-listing/index.tsx

@@ -30,6 +30,7 @@ const CFDsListing = () => {
     } = useStores();
     const {
         available_dxtrade_accounts,
+        available_derivez_accounts,
         combined_cfd_mt5_accounts,
         selected_region,
         has_any_real_account,
@@ -278,6 +279,68 @@ const CFDsListing = () => {
             ) : (
                 <PlatformLoader />
             )}
+
+            {is_landing_company_loaded ? (
+                available_derivez_accounts?.map((account: AvailableAccount) => {
+                    const existing_accounts = getExistingAccounts(account.platform, account.market_type);
+                    const has_existing_accounts = existing_accounts.length > 0;
+                    return has_existing_accounts ? (
+                        existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+                            <TradingAppCard
+                                action_type='multi-action'
+                                availability={selected_region}
+                                clickable_icon
+                                icon={account.icon}
+                                sub_title={account.name}
+                                name={`${formatMoney(
+                                    existing_account.currency,
+                                    existing_account.display_balance,
+                                    true
+                                )} ${existing_account.currency}`}
+                                description={existing_account.display_login}
+                                platform={account.platform}
+                                key={`trading_app_card_${existing_account.display_login}`}
+                                onAction={(e?: React.MouseEvent<HTMLButtonElement>) => {
+                                    const button_name = e?.currentTarget?.name;
+                                    if (button_name === 'transfer-btn') {
+                                        toggleAccountTransferModal();
+                                        setSelectedAccount(existing_account);
+                                    } else if (button_name === 'topup-btn') {
+                                        showTopUpModal(existing_account);
+                                    } else {
+                                        startTrade(account.platform, existing_account);
+                                    }
+                                }}
+                            />
+                        ))
+                    ) : (
+                        <TradingAppCard
+                            action_type='get'
+                            availability={selected_region}
+                            clickable_icon
+                            icon={account.icon}
+                            name={account.name}
+                            platform={account.platform}
+                            description={account.description}
+                            onAction={() => {
+                                if ((has_no_real_account || no_CR_account) && is_real) {
+                                    openDerivRealAccountNeededModal();
+                                } else {
+                                    setAccountType({
+                                        category: selected_account_type,
+                                        type: account.market_type,
+                                    });
+                                    setAppstorePlatform(account.platform);
+                                    getAccount();
+                                }
+                            }}
+                            key={`trading_app_card_${account.name}`}
+                        />
+                    );
+                })
+            ) : (
+                <PlatformLoader />
+            )}
         </ListingContainer>
     );
 };

packages/appstore/src/components/onboarding-new/static-cfd-account-manager.tsx

@@ -116,6 +116,17 @@ const StaticCFDAccountManager = ({
                         />
                     ))}
 
+                {platform === CFD_PLATFORMS.DERIVEZ && (
+                    <TradigPlatformIconProps
+                        icon='DerivEz'
+                        size={icon_size}
+                        className={classNames('static-cfd-account-manager--cfds', {
+                            'static-cfd-account-manager__icon--blurry':
+                                is_blurry.icon || is_last_step || is_derivx_last_step,
+                        })}
+                    />
+                )}
+
                 {platform === CFD_PLATFORMS.DXTRADE && (
                     <TradigPlatformIconProps
                         icon='DerivX'

packages/appstore/src/components/onboarding-new/static-dashboard.tsx

@@ -64,9 +64,11 @@ const StaticDashboard = ({
     loginid,
 }: TStaticDashboard) => {
     const { client, traders_hub } = useStores();
-    const { content_flag, CFDs_restricted_countries } = traders_hub;
+    const { content_flag } = traders_hub;
     const { is_eu_country, is_logged_in } = client;
 
+    //starting ctrader project
+
     const [index, setIndex] = React.useState<number>(0);
 
     const Divider = () => <div className='divider' />;
@@ -219,7 +221,7 @@ const StaticDashboard = ({
                                     actions={
                                         <Button
                                             secondary
-                                            className={classNames('static-dashboard--deposit-button', {
+                                            className={classNames('', {
                                                 'static-dashboard--deposit-button-animated':
                                                     is_onboarding_animated.topup,
                                                 'static-dashboard--deposit-button-blurry': is_blurry.topup,
@@ -471,7 +473,7 @@ const StaticDashboard = ({
                                     is_eu_user={is_eu_user}
                                 />
                             )}
-                            {!is_eu_user && !CFDs_restricted_countries && (
+                            {!is_eu_user && (
                                 <StaticCFDAccountManager
                                     type='financial'
                                     platform='mt5'
@@ -501,7 +503,8 @@ const StaticDashboard = ({
                                 />
                             )}
                         </div>
-                        {!is_eu_user && !CFDs_restricted_countries && (
+
+                        {!is_eu_user && (
                             <React.Fragment>
                                 <Divider />
                                 <div className='static-dashboard-wrapper__body--header'>
@@ -520,24 +523,42 @@ const StaticDashboard = ({
                                 </div>
                             </React.Fragment>
                         )}
-                        {!is_eu_user && !CFDs_restricted_countries && (
-                            <StaticCFDAccountManager
-                                type='all'
-                                platform='dxtrade'
-                                appname={localize('Deriv X')}
-                                description={localize(
-                                    'Trade CFDs on Deriv X with financial markets and our Derived indices.'
-                                )}
-                                loginid={loginid}
-                                currency={currency}
-                                has_account={has_account}
-                                is_last_step={is_last_step}
-                                is_blurry={is_blurry}
-                                is_onboarding_animated={is_onboarding_animated}
-                                is_derivx_last_step={is_derivx_last_step}
-                                is_financial_last_step={is_financial_last_step}
-                                is_eu_user={is_eu_user}
-                            />
+                        {!is_eu_user && (
+                            <div className='static-dashboard-wrapper__body'>
+                                <StaticCFDAccountManager
+                                    type='all'
+                                    platform='dxtrade'
+                                    appname={localize('Deriv X')}
+                                    description={localize(
+                                        'Trade CFDs on Deriv X with financial markets and our Derived indices.'
+                                    )}
+                                    loginid={loginid}
+                                    currency={currency}
+                                    has_account={has_account}
+                                    is_last_step={is_last_step}
+                                    is_blurry={is_blurry}
+                                    is_onboarding_animated={is_onboarding_animated}
+                                    is_derivx_last_step={is_derivx_last_step}
+                                    is_financial_last_step={is_financial_last_step}
+                                    is_eu_user={is_eu_user}
+                                />
+                                <StaticCFDAccountManager
+                                    type='Financial'
+                                    platform='derivez'
+                                    appname={localize('Deriv EZ')}
+                                    description={localize(
+                                        'Trade CFDs on forex, commodities, cryptocurrencies, stocks, stock indices, and derived indices.'
+                                    )}
+                                    loginid={loginid}
+                                    currency={currency}
+                                    has_account={has_account}
+                                    derived_amount={derived_amount}
+                                    financial_amount={financial_amount}
+                                    is_blurry={is_blurry}
+                                    is_onboarding_animated={is_onboarding_animated}
+                                    is_eu_user={is_eu_user}
+                                />
+                            </div>
                         )}
                     </div>
                 )}

packages/appstore/src/types/common.types.ts

@@ -12,7 +12,7 @@ export type RequiredAndNotNull<T> = {
 
 export type TRegionAvailability = 'Non-EU' | 'EU' | 'All';
 export type TAccountCategory = 'real' | 'demo';
-export type TPlatform = 'dxtrade' | 'mt5' | 'trader' | 'dbot' | 'smarttrader' | 'bbot' | 'go';
+export type TPlatform = 'dxtrade' | 'mt5' | 'trader' | 'dbot' | 'smarttrader' | 'bbot' | 'go' | 'derivez';
 export type TBrandData = {
     name: string;
     icon?: string;
@@ -119,7 +119,8 @@ export type TIconTypes =
     | 'Options'
     | 'SmartTrader'
     | 'SmartTraderBlue'
-    | 'CFDs';
+    | 'CFDs'
+    | 'DerivEz';
 
 export interface AvailableAccount {
     name: string;

packages/cfd/build/webpack.config.js

@@ -18,6 +18,7 @@ module.exports = function (env) {
             CFDServerErrorDialog: 'Containers/cfd-server-error-dialog.tsx',
             CFDTopUpDemoModal: 'Containers/cfd-top-up-demo-modal.tsx',
             MT5TradeModal: 'Containers/mt5-trade-modal.tsx',
+            TradeModal: 'Containers/trade-modal.tsx',
             CFDPasswordManagerModal: 'Containers/cfd-password-manager-modal.tsx',
             CFDFinancialStpRealAccountSignup: 'Containers/cfd-financial-stp-real-account-signup.tsx',
             getDXTradeWebTerminalLink: 'Helpers/constants.ts',

packages/cfd/src/Assets/svgs/trading-platform/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Derived from './ic-appstore-derived.svg';
 import Financial from './ic-appstore-financial.svg';
 import CFDs from './ic-appstore-cfds.svg';
+import DerivEz from './ic-appstore-derivez.svg';
 
 export interface IconProps<T> {
     icon: T;
@@ -14,6 +15,7 @@ export const PlatformIcons = {
     Derived,
     Financial,
     CFDs,
+    DerivEz,
 };
 
 const TradingPlatformIcon = ({ icon, className, size, onClick }: IconProps<keyof typeof PlatformIcons>) => {

packages/cfd/src/Components/passwordbox.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { getCFDPlatformLabel } from '@deriv/shared';
+import { Text, Button, Icon, Popover } from '@deriv/components';
+import { TPasswordBoxProps } from './props.types';
+import { localize } from '@deriv/translations';
+
+const PasswordBox = ({ platform, onClick }: TPasswordBoxProps) => (
+    <div className='cfd-trade-modal__password-box'>
+        <div className='cfd-trade-modal__password-text'>
+            <Popover
+                alignment='right'
+                message={localize(
+                    'Use these credentials to log in to your {{platform}} account on the website and mobile apps.',
+                    {
+                        platform: getCFDPlatformLabel(platform),
+                    }
+                )}
+                classNameBubble='cfd-trade-modal__password-tooltip'
+                zIndex={9999}
+            >
+                <Text size='xs'>***************</Text>
+            </Popover>
+        </div>
+        <Popover
+            className='cfd-trade-modal__password-popover'
+            alignment='left'
+            message={localize('Change Password')}
+            relative_render
+            zIndex={9999}
+        >
+            <Button
+                className='cfd-trade-modal__password-action'
+                transparent
+                onClick={onClick}
+                icon={
+                    <Icon
+                        icon='IcEdit'
+                        className='da-article__learn-more-icon'
+                        custom_color='var(--text-less-prominent)'
+                    />
+                }
+            />
+        </Popover>
+    </div>
+);
+
+export default PasswordBox;

packages/cfd/src/Components/props.types.ts

@@ -2,11 +2,18 @@ import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
 
 export type TCFDPlatform = 'dxtrade' | 'mt5';
 
+export type TCFDsPlatformType = 'dxtrade' | 'derivez';
+
 export type TCFDAccountCopy = {
     text: string | undefined;
     className: string;
 };
 
+export type TDxtradeDesktopDownloadProps = {
+    dxtrade_tokens: TCFDDashboardContainer['dxtrade_tokens'];
+    is_demo: string;
+};
+
 export type TAccountIconValues = { [key: string]: string };
 
 export type TSpecBoxProps = {
@@ -52,7 +59,7 @@ export type TCFDAccountCardActionProps = {
 };
 
 export type TTradingPlatformAvailableAccount = {
-    market_type: 'financial' | 'gaming';
+    market_type: 'financial' | 'gaming' | 'all';
     name: string;
     requirements: {
         after_first_deposit: {
@@ -64,8 +71,10 @@ export type TTradingPlatformAvailableAccount = {
         };
         signup: string[];
     };
-    shortcode: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'maltainvest';
+    shortcode: 'bvi' | 'labuan' | 'maltainvest' | 'svg' | 'vanuatu';
     sub_account_type: string;
+    account_type?: 'real' | 'demo';
+    landing_company_short?: 'bvi' | 'labuan' | 'svg' | 'vanuatu' | 'svg';
 };
 
 export type TExistingData = DetailsOfEachMT5Loginid & DetailsOfEachMT5Loginid[];

packages/cfd/src/Components/specbox.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { CFDAccountCopy } from './cfd-account-copy';
+
+export type TSpecBoxProps = {
+    value: string | undefined;
+    is_bold?: boolean;
+};
+
+const SpecBox = ({ value, is_bold }: TSpecBoxProps) => (
+    <div className='cfd-trade-modal__spec-box'>
+        <Text size='xs' weight={is_bold ? 'bold' : ''} className='cfd-trade-modal__spec-text'>
+            {value}
+        </Text>
+        <CFDAccountCopy text={value} className='cfd-trade-modal__spec-copy' />
+    </div>
+);
+
+export default SpecBox;