diff --git a/packages/appstore/src/assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg b/packages/appstore/src/assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg
new file mode 100644
index 000000000000..6173fbf60c24
--- /dev/null
+++ b/packages/appstore/src/assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg
@@ -0,0 +1 @@
+
diff --git a/packages/appstore/src/assets/svgs/trading-platform/branding/ic-branding-derivx-dashboard.svg b/packages/appstore/src/assets/svgs/trading-platform/branding/ic-branding-dxtrade-dashboard.svg
similarity index 100%
rename from packages/appstore/src/assets/svgs/trading-platform/branding/ic-branding-derivx-dashboard.svg
rename to packages/appstore/src/assets/svgs/trading-platform/branding/ic-branding-dxtrade-dashboard.svg
diff --git a/packages/appstore/src/assets/svgs/trading-platform/index.tsx b/packages/appstore/src/assets/svgs/trading-platform/index.tsx
index 560dfa830f9d..6a4d77989224 100644
--- a/packages/appstore/src/assets/svgs/trading-platform/index.tsx
+++ b/packages/appstore/src/assets/svgs/trading-platform/index.tsx
@@ -5,11 +5,12 @@ import CFDs from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-cfds.svg
import DBot from 'Assets/svgs/trading-platform/branding/ic-branding-dbot-dashboard.svg';
import Demo from 'Assets/svgs/trading-platform/ic-brand-demo.svg';
import Derived from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-derived-dashboard.svg';
+import DerivEz from 'Assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg';
import DerivGo from 'Assets/svgs/trading-platform/branding/ic-branding-derivgo-dashboard.svg';
import DerivGoBlack from 'Assets/svgs/trading-platform/ic-appstore-derivgo-black.svg';
import DerivLogo from 'Assets/svgs/trading-platform/branding/ic-branding-deriv-logo.svg';
import DerivTradingLogo from 'Assets/svgs/trading-platform/ic-appstore-deriv-trading-logo.svg';
-import DerivX from 'Assets/svgs/trading-platform/branding/ic-branding-derivx-dashboard.svg';
+import DerivX from 'Assets/svgs/trading-platform/branding/ic-branding-dxtrade-dashboard.svg';
import DropDown from 'Assets/svgs/trading-platform/drop-down.svg';
import DTrader from 'Assets/svgs/trading-platform/branding/ic-branding-dtrader-dashboard.svg';
import Financial from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-financial-dashboard.svg';
@@ -26,6 +27,7 @@ export const PlatformIcons = {
DBot,
Demo,
Derived,
+ DerivEz,
DerivGo,
DerivGoBlack,
DerivLogo,
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
index f8e0fb77bd50..b2335c6e8bdd 100644
--- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss
+++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -391,7 +391,6 @@
background: var(--brand-dark-grey);
align-items: center;
text-decoration: none;
- padding: 0.2rem;
border-radius: $BORDER_RADIUS;
&-text {
@@ -402,6 +401,9 @@
white-space: nowrap;
}
}
+ &-icon {
+ margin-left: 0.6rem;
+ }
}
&__specs {
padding: 1.6rem;
@@ -453,6 +455,12 @@
padding-top: 2rem;
padding-bottom: 5.8rem;
+ &-description {
+ display: flex;
+ justify-content: center;
+ margin-top: 1.4rem;
+ }
+
&-app {
display: flex;
flex-direction: column;
@@ -524,7 +532,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);
diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx
index ab42f5260e01..37265d011887 100644
--- a/packages/appstore/src/components/cfds-listing/index.tsx
+++ b/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,
@@ -206,16 +207,17 @@ const CFDsListing = () => {
)}
{!is_eu_user && !CFDs_restricted_countries && !financial_restricted_countries && (
-
-
-
- )}
- {available_dxtrade_accounts?.length > 0 && (
-
-
- {localize('Other CFD Platforms')}
-
-
+
+
+
+
+
+
+
+ {localize('Other CFDs')}
+
+
+
)}
{is_landing_company_loaded ? (
available_dxtrade_accounts?.map((account: AvailableAccount) => {
@@ -279,6 +281,68 @@ const CFDsListing = () => {
) : (
)}
+
+ {/* TODO: remove is_real flag to unblock the flow for derivez real account creation */}
+ {is_landing_company_loaded && !is_real
+ ? 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) => (
+ ) => {
+ const button_name = e?.currentTarget?.name;
+ if (button_name === 'transfer-btn') {
+ toggleAccountTransferModal();
+ setSelectedAccount(existing_account);
+ } else if (button_name === 'topup-btn') {
+ showTopUpModal(existing_account);
+ setAppstorePlatform(account.platform);
+ } else {
+ startTrade(account.platform, existing_account);
+ }
+ }}
+ />
+ ))
+ ) : (
+ {
+ 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}`}
+ />
+ );
+ })
+ : !is_real && }
);
};
diff --git a/packages/appstore/src/components/containers/trading-app-card-actions.tsx b/packages/appstore/src/components/containers/trading-app-card-actions.tsx
index b82fc602f9b9..bb4899f1f5c7 100644
--- a/packages/appstore/src/components/containers/trading-app-card-actions.tsx
+++ b/packages/appstore/src/components/containers/trading-app-card-actions.tsx
@@ -14,6 +14,7 @@ export type Actions = {
is_external?: boolean;
new_tab?: boolean;
is_buttons_disabled?: boolean;
+ is_account_being_created?: boolean;
is_real?: boolean;
};
@@ -23,13 +24,14 @@ const TradingAppCardActions = ({
onAction,
is_external,
new_tab,
+ is_account_being_created,
is_buttons_disabled,
is_real,
}: Actions) => {
switch (action_type) {
case 'get':
return (
-