binary-com · farzin-deriv · May 25, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 29, 2023
@@ -29,6 +29,7 @@
         "@deriv/cashier": "^1.0.0",
         "@deriv/components": "^1.0.0",
         "@deriv/cfd": "^1.0.0",
+        "@deriv/hooks": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/trader": "^3.8.0",

@@ -16,6 +16,7 @@ import Financial from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-fin
 import Options from 'Assets/svgs/trading-platform/ic-appstore-options.svg';
 import SmartTrader from 'Assets/svgs/trading-platform/branding/ic-branding-smarttrader-dashboard.svg';
 import SmartTraderBlue from 'Assets/svgs/trading-platform/ic-appstore-smarttrader-blue.svg';
+import SwapFree from 'Assets/svgs/trading-platform/ic-appstore-swap-free.svg';
 import { IconProps } from '../icon-types';
 
 export const PlatformIcons = {
@@ -33,6 +34,7 @@ export const PlatformIcons = {
     DropDown,
     DTrader,
     Financial,
+    SwapFree,
     Options,
     SmartTrader,
     SmartTraderBlue,

@@ -1,5 +1,6 @@
 .cfd-jurisdiction-card--synthetic,
-.cfd-jurisdiction-card--financial {
+.cfd-jurisdiction-card--financial,
+.cfd-jurisdiction-card--all {
     border: solid 1px var(--border-normal);
     border-radius: 0.8rem;
     display: flex;

@@ -5,21 +5,11 @@ import { observer } from 'mobx-react-lite';
 import classNames from 'classnames';
 import { useStores } from 'Stores/index';
 import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
-import { TModalContent, TAccountType, TAccountCard, TTradingPlatformAvailableAccount } from './types';
+import { TModalContent, TAccountCard, TTradingPlatformAvailableAccount } from './types';
 import { TIconTypes } from 'Types';
 import { CFD_PLATFORMS } from '@deriv/shared';
-
-const getDerivedAccount = (): TAccountType => ({
-    title_and_type: localize('Derived'),
-    icon: 'Derived',
-    description: localize('Trade CFDs on MT5 with Derived indices that simulate real-world market movements.'),
-});
-
-const getFinancialAccount = (): TAccountType => ({
-    title_and_type: localize('Financial'),
-    icon: 'Financial',
-    description: localize('Trade CFDs on MT5 with forex, stock indices, commodities, and cryptocurrencies.'),
-});
+import { getDerivedAccount, getFinancialAccount, getSwapFreeAccount } from '../../../helpers/account-helper';
+import { useHasSwapFreeAccount } from '@deriv/hooks';
 
 const AccountCard = ({ selectAccountTypeCard, account_type_card, title_and_type, description, icon }: TAccountCard) => {
     const cardSelection = (cardType: string) => {
@@ -54,6 +44,7 @@ const ModalContent = ({
     selectAccountTypeCard,
     is_financial_available,
     is_synthetic_available,
+    is_swapfree_available,
 }: TModalContent) => {
     return (
         <div className='account-type-card__wrapper'>
@@ -75,6 +66,15 @@ const ModalContent = ({
                     icon={getFinancialAccount().icon}
                 />
             )}
+            {is_swapfree_available && (
+                <AccountCard
+                    account_type_card={account_type_card}
+                    selectAccountTypeCard={() => selectAccountTypeCard(`${getSwapFreeAccount().title_and_type}`)}
+                    description={getSwapFreeAccount().description}
+                    title_and_type={getSwapFreeAccount().title_and_type}
+                    icon={getSwapFreeAccount().icon}
+                />
+            )}
         </div>
     );
 };
@@ -92,19 +92,36 @@ const MT5AccountTypeModal = () => {
     const { trading_platform_available_accounts } = client;
     const { enableApp, disableApp } = ui;
     const { setAppstorePlatform } = common;
+
+    React.useEffect(() => {
+        if (!is_account_type_modal_visible) {
+            selectAccountTypeCard('');
+        }
+    }, [is_account_type_modal_visible, selectAccountTypeCard]);
+
     const is_financial_available = trading_platform_available_accounts.some(
         (available_account: TTradingPlatformAvailableAccount) => available_account.market_type === 'financial'
     );
 
     const is_synthetic_available = trading_platform_available_accounts.some(
         (available_account: TTradingPlatformAvailableAccount) => available_account.market_type === 'gaming'
     );
+    const is_swapfree_available = useHasSwapFreeAccount();
 
-    const set_account_type = () =>
-        account_type_card === localize('Derived')
-            ? setAccountType({ category: 'real', type: 'synthetic' })
-            : setAccountType({ category: 'real', type: 'financial' });
-
+    const set_account_type = () => {
+        switch (account_type_card) {
+            case 'Derived':
+                setAccountType({ category: 'real', type: 'synthetic' });
+                break;
+            case 'Swap-Free':
+                setAccountType({ category: 'real', type: 'all' });
+                break;
+            case 'Financial':
+            default:
+                setAccountType({ category: 'real', type: 'financial' });
+                break;
+        }
+    };
     return (
         <div>
             <React.Suspense fallback={<UILoader />}>
@@ -126,6 +143,7 @@ const MT5AccountTypeModal = () => {
                             selectAccountTypeCard={selectAccountTypeCard}
                             is_financial_available={is_financial_available}
                             is_synthetic_available={is_synthetic_available}
+                            is_swapfree_available={is_swapfree_available}
                         />
                         <Modal.Footer has_separator>
                             <Button
@@ -155,6 +173,7 @@ const MT5AccountTypeModal = () => {
                             selectAccountTypeCard={selectAccountTypeCard}
                             is_financial_available={is_financial_available}
                             is_synthetic_available={is_synthetic_available}
+                            is_swapfree_available={is_swapfree_available}
                         />
                         <Modal.Footer has_separator>
                             <Button

@@ -3,6 +3,7 @@ export type TModalContent = {
     selectAccountTypeCard: React.Dispatch<React.SetStateAction<string>>;
     is_financial_available: boolean;
     is_synthetic_available: boolean;
+    is_swapfree_available: boolean;
 };
 
 export type TAccountType = {
@@ -20,7 +21,7 @@ export type TAccountCard = {
 };
 
 export type TTradingPlatformAvailableAccount = {
-    market_type: 'financial' | 'gaming';
+    market_type: 'financial' | 'gaming' | 'all';
     name: string;
     requirements: {
         after_first_deposit: {

@@ -11,6 +11,7 @@ import {
     CFDPasswordManagerModal,
     CompareAccountsModal,
 } from '@deriv/cfd';
+import { TTradingPlatformAvailableAccount } from './account-type-modal/types';
 import MT5AccountTypeModal from './account-type-modal';
 import RegulatorsCompareModal from './regulators-compare-modal';
 import { useStores } from 'Stores';
@@ -45,6 +46,7 @@ const ModalManager = () => {
         toggleMT5TradeModal,
         getRealSyntheticAccountsExistingData,
         getRealFinancialAccountsExistingData,
+        getRealSwapfreeAccountsExistingData,
         current_account,
         dxtrade_companies,
         mt5_companies,
@@ -102,7 +104,7 @@ const ModalManager = () => {
         enableCFDPasswordModal();
     };
 
-    const existing_accounts_data = (acc_type: 'synthetic' | 'financial') => {
+    const existing_accounts_data = (acc_type: TTradingPlatformAvailableAccount['market_type'] | 'synthetic') => {
         const current_list_keys = Object.keys(current_list);
         const should_be_enabled = (list_item: TCurrentList) =>
             platform === 'dxtrade' ? list_item.enabled === 1 : true;
@@ -123,6 +125,7 @@ const ModalManager = () => {
 
     getRealSyntheticAccountsExistingData(existing_accounts_data('synthetic'));
     getRealFinancialAccountsExistingData(existing_accounts_data('financial'));
+    getRealSwapfreeAccountsExistingData(existing_accounts_data('all'));
 
     return (
         <React.Fragment>

@@ -88,7 +88,7 @@ const StaticCFDAccountManager = ({
                         />
                     ) : (
                         <TradigPlatformIconProps
-                            icon='Derived'
+                            icon={type === 'swap_free' ? 'SwapFree' : 'Derived'}
                             size={icon_size}
                             className={classNames('static-cfd-account-manager--cfds', {
                                 'static-cfd-account-manager__icon--blurry': is_blurry.icon,

@@ -135,7 +135,8 @@
         }
 
         &__body {
-            display: flex;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
 
             &--header {
                 margin-top: 2rem;
@@ -160,6 +161,7 @@
             }
 
             @include mobile {
+                display: flex;
                 flex-direction: column;
             }
 

@@ -471,25 +471,49 @@ const StaticDashboard = ({
                                     is_eu_user={is_eu_user}
                                 />
                             )}
+
                             {!is_eu_user && !CFDs_restricted_countries && (
-                                <StaticCFDAccountManager
-                                    type='financial'
-                                    platform='mt5'
-                                    appname={localize('Financial')}
-                                    description={localize(
-                                        'Trade CFDs on MT5 with forex, stocks, stock indices, commodities, and cryptocurrencies.'
+                                <React.Fragment>
+                                    <StaticCFDAccountManager
+                                        type='financial'
+                                        platform='mt5'
+                                        appname={localize('Financial')}
+                                        description={localize(
+                                            'Trade CFDs on MT5 with forex, stocks, stock indices, commodities, and cryptocurrencies.'
+                                        )}
+                                        financial_amount={financial_amount}
+                                        derived_amount={derived_amount}
+                                        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_financial_last_step={is_financial_last_step}
+                                        is_eu_user={is_eu_user}
+                                    />
+                                    {isMobile() && !has_account && <Divider />}
+                                    {!financial_restricted_countries && (
+                                        <StaticCFDAccountManager
+                                            type='swap_free'
+                                            platform='mt5'
+                                            appname={localize('Swap-Free')}
+                                            description={localize(
+                                                'Trade swap-free CFDs on MT5 with synthetics, forex, stocks, stock indices, cryptocurrencies and ETFs.'
+                                            )}
+                                            financial_amount={financial_amount}
+                                            derived_amount={derived_amount}
+                                            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_financial_last_step={is_financial_last_step}
+                                            is_eu_user={is_eu_user}
+                                        />
                                     )}
-                                    financial_amount={financial_amount}
-                                    derived_amount={derived_amount}
-                                    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_financial_last_step={is_financial_last_step}
-                                    is_eu_user={is_eu_user}
-                                />
+                                </React.Fragment>
                             )}
                             {isDesktop() && has_account && !eu_user && (
                                 <StaticGetMoreAccounts

@@ -1,4 +1,6 @@
 import { isCryptocurrency } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import { TAccountType } from '../components/modals/account-type-modal/types';
 
 type TAccountProps = {
     a_currency: string;
@@ -35,3 +37,23 @@ export const getSortedAccountList = (account_list: TAccountProps, accounts: TAcc
         return 1;
     });
 };
+
+export const getDerivedAccount = (): TAccountType => ({
+    title_and_type: localize('Derived'),
+    icon: 'Derived',
+    description: localize('Trade CFDs on MT5 with Derived indices that simulate real-world market movements.'),
+});
+
+export const getFinancialAccount = (): TAccountType => ({
+    title_and_type: localize('Financial'),
+    icon: 'Financial',
+    description: localize('Trade CFDs on MT5 with forex, stock indices, commodities, and cryptocurrencies.'),
+});
+
+export const getSwapFreeAccount = (): TAccountType => ({
+    title_and_type: localize('Swap-Free'),
+    icon: 'SwapFree',
+    description: localize(
+        'Trade swap-free CFDs on MT5 with synthetics, forex, stocks, stock indices, cryptocurrencies and ETFs.'
+    ),
+});
@@ -66,7 +66,7 @@ export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & {
 };
 
 export type TTradingPlatformAvailableAccount = {
-    market_type: 'financial' | 'gaming';
+    market_type: 'financial' | 'gaming' | 'all';
     name: string;
     requirements: {
         after_first_deposit: {