diff --git a/packages/appstore/src/components/elements/account-wizard/containers/account-wizard.scss b/packages/appstore/src/components/elements/account-wizard/containers/account-wizard.scss
new file mode 100644
index 000000000000..60cdee0ffc39
--- /dev/null
+++ b/packages/appstore/src/components/elements/account-wizard/containers/account-wizard.scss
@@ -0,0 +1,174 @@
+.dw-account-wizard {
+ width: 100%;
+ padding: 0 2.4rem;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--fill-normal);
+
+ @include mobile {
+ padding: 0 1.6rem;
+ }
+
+ &__header {
+ border-radius: 0.8rem;
+
+ display: flex;
+ flex-direction: column;
+
+ &-steps {
+ padding: 0.8rem 2.4rem 1.6rem;
+ background: var(--general-section-3);
+ display: flex;
+ }
+ &-step {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ position: relative;
+
+ @include desktop {
+ padding: 1.6rem 0;
+ justify-content: center;
+ }
+
+ &:not(&--disabled) {
+ cursor: pointer;
+ }
+ &--active {
+ .dw-account-wizard__header-step-line {
+ background: var(--text-prominent);
+ }
+ }
+ &-line {
+ position: absolute;
+ height: 2px;
+ left: 0px;
+ right: -0.4px;
+ bottom: 0px;
+ background: var(--border-normal);
+ }
+ &-title-wrapper {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+ svg {
+ margin-right: 0.8rem;
+ }
+ }
+
+ &-active-title {
+ padding: 4rem 0 1.6rem;
+ border-bottom: 2px solid var(--text-disabled);
+
+ @include mobile {
+ padding: 1.6rem 0 0.8rem;
+ }
+ }
+ }
+
+ .wizard__main-step {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
+ @include mobile {
+ padding-top: 2rem;
+ }
+ form {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+ .dc-themed-scrollbars {
+ padding-top: 4rem;
+ }
+ }
+ .dc-form-submit-button {
+ &--has-cancel {
+ justify-content: space-between;
+ }
+ &--absolute {
+ padding: 0.8rem 1.6rem;
+ bottom: 0rem;
+ }
+ }
+
+ .details-form {
+ flex: 1;
+ align-content: unset;
+
+ > .dc-themed-scrollbars {
+ .details-form__elements {
+ flex-grow: unset;
+ padding: 1rem 0 0;
+ }
+ }
+
+ &__elements {
+ .dc-input {
+ @include desktop {
+ min-width: 328px;
+
+ &__label {
+ left: 1.6rem;
+ top: 1.6rem;
+ }
+ &__field {
+ padding: 1.6rem;
+ height: unset;
+
+ /* Not empty fields */
+ &:focus,
+ &:disabled,
+ &:not(:focus):not([value='']) {
+ & ~ label {
+ transform: translate(-0.5rem, -2.4rem) scale(0.75);
+ }
+ }
+ }
+ }
+
+ @include mobile {
+ label {
+ background-color: var(--fill-normal);
+ }
+ }
+ }
+ .dc-select-native__placeholder {
+ @include mobile {
+ background-color: var(--fill-normal);
+ }
+ }
+ }
+
+ @include desktop {
+ .dc-autocomplete,
+ .dc-radio-group {
+ margin-bottom: 3.2rem;
+ }
+ .dc-field--error {
+ top: 5.5rem;
+ }
+ }
+ }
+ .terms-of-use {
+ @include mobile {
+ padding: 0;
+ }
+ }
+}
+
+.cancel-progress-modal {
+ @include mobile {
+ .dc-dialog__dialog {
+ max-width: 32rem;
+ }
+ .dc-dialog__footer {
+ .dc-btn {
+ flex: 1;
+ margin-bottom: 0;
+ }
+ }
+ }
+}
diff --git a/packages/appstore/src/components/elements/account-wizard/containers/address-details-form/index.ts b/packages/appstore/src/components/elements/account-wizard/containers/address-details-form/index.tsx
similarity index 100%
rename from packages/appstore/src/components/elements/account-wizard/containers/address-details-form/index.ts
rename to packages/appstore/src/components/elements/account-wizard/containers/address-details-form/index.tsx
diff --git a/packages/appstore/src/components/onboarding/static-applauncher.scss b/packages/appstore/src/components/onboarding/static-applauncher.scss
new file mode 100644
index 000000000000..39ddea6d70be
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-applauncher.scss
@@ -0,0 +1,55 @@
+.static-applauncher {
+ display: flex;
+ width: 22rem;
+ margin-left: 1rem;
+ align-items: center;
+ justify-content: space-between;
+
+ &--grey {
+ background: var(--general-section-1);
+ width: 22rem;
+ margin-left: 0;
+
+ @include desktop {
+ height: 6rem;
+ }
+
+ @include mobile {
+ width: 70%;
+ margin-left: 1.5rem;
+ }
+ }
+
+ &__icon {
+ margin-right: 1rem;
+ &--blurry {
+ opacity: 0.2;
+ }
+ &--selected {
+ margin-left: 1rem;
+ }
+ }
+
+ &__details {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__buttons {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ margin-left: 1rem;
+ margin-right: 0.5rem;
+ width: auto;
+
+ &--animated {
+ animation: triggerAnimation 0.5s linear infinite alternate;
+ }
+
+ &-topup {
+ margin-bottom: 2.3rem;
+ cursor: not-allowed;
+ }
+ }
+}
diff --git a/packages/appstore/src/components/onboarding/static-applauncher.tsx b/packages/appstore/src/components/onboarding/static-applauncher.tsx
new file mode 100644
index 000000000000..7f73bf92a72b
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-applauncher.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon, Button, Text } from '@deriv/components';
+import { formatMoney } from '@deriv/shared';
+import { Localize, localize } from '@deriv/translations';
+
+import './static-applauncher.scss';
+
+type TStaticAppLauncher = {
+ icon_type: 'USD' | 'EUR' | 'Bitcoin' | 'Ethereum' | 'Litecoin';
+ is_item_blurry?: boolean;
+ is_grey?: boolean;
+ is_eu_user: boolean;
+};
+
+const eu_currency_config = {
+ EUR: 'Euro',
+};
+
+const eu_icon_config = {
+ EUR: 'EUR',
+};
+
+const crypto_icon_config = {
+ USD: 'USD',
+ Bitcoin: 'BTC',
+ Ethereum: 'ETH',
+ Litecoin: 'LTC',
+};
+
+const crypto_config = {
+ USD: 'US Dollar',
+ Bitcoin: 'Bitcoin',
+ Ethereum: 'Ethereum',
+ Litecoin: 'Litecoin',
+};
+
+type TCryptoIcon = {
+ currency: string;
+ is_eu_user: boolean;
+};
+
+type TCryptoConfig = {
+ currency: string;
+ is_item_blurry?: boolean;
+ is_eu_user: boolean;
+};
+
+const CryptoIcon = ({ currency, is_eu_user }: TCryptoIcon) => {
+ const currency_icon_classname =
+ currency === ('USD' && 'EUR') ? 'static-applauncher__icon--selected' : 'static-applauncher__icon--blurry';
+ const currency_icon = is_eu_user ? eu_icon_config : crypto_icon_config;
+ const icon_selector: keyof typeof crypto_icon_config & keyof typeof eu_icon_config =
+ currency as keyof typeof crypto_icon_config & keyof typeof eu_icon_config;
+ return (
+
+
+ {localize(`${currency_config[icon_selector]}`)}
+
+
+ {loginid}
+
+ {`${formatMoney(currency_icon[icon_selector], '0', true)} ${currency_icon[icon_selector]}`}
+
+ );
+};
+
+const StaticAppLauncher = ({ icon_type, is_item_blurry, is_grey, is_eu_user }: TStaticAppLauncher) => {
+ return (
+ = props => {
+ const { client, ui } = useStores();
+ const [is_modal_open, setIsModalOpen] = React.useState(false);
+ const {
+ account_list,
+ accounts,
+ country_standpoint,
+ is_eu,
+ market_type,
+ server,
+ sub_account_type,
+ has_error,
+ platform,
+ is_dark_mode_on,
+ shortcode,
+ should_show_server_name,
+ resetVirtualBalance,
+ has_any_real_account,
+ loginid,
+ switchAccount,
+ is_logging_in,
+ } = client;
+ const sortedAccountList = React.useMemo(
+ () => getSortedAccountList(account_list, accounts).filter(account => !account.is_virtual),
+ [account_list, accounts]
+ );
+ const toggleAccountsDialog = ui.toggleAccountsDialog;
+ const resetBalance = async () => {
+ closeAccountsDialog();
+ resetVirtualBalance();
+ };
+ const closeAccountsDialog = () => {
+ toggleAccountsDialog(false);
+ };
+
+ const onClickDeposit = () => {
+ props.history.push(routes.cashier_deposit);
+ };
+ const openSwitchAccountModal = () => {
+ setIsModalOpen(true);
+ };
+ const doSwitch = async (loginid_selected: React.SetStateAction) => {
+ setIsModalOpen(false);
+ closeAccountsDialog();
+ if (loginid === loginid_selected) return;
+ await switchAccount(loginid_selected);
+ };
+
+ const canResetBalance = (account: TAccount) => {
+ const account_init_balance = 10000;
+ return !!account.is_virtual && account.balance !== account_init_balance;
+ };
+
+ const is_eu_title = is_eu ? 'Multipliers' : 'Options and Multipliers';
+
+ const is_eu_account_title = is_eu ? 'Multipliers account' : 'Options and Multipliers account';
+ const is_mf = loginid?.startsWith('MF');
+ return (
+ [0];
+
+export default {
+ title: 'PlatformLauncher',
+} as Meta;
+
+const Template: Story = args =>
+ {has_default_subroute && pathname === route.path &&
+ );
+ }
+
+ const title = route.getTitle?.() || '';
+ document.title = `${title} | ${default_title}`;
+ return result;
+ };
+
+ return {
}
>
-
+
+ );
+ //
+};
+
+export default StaticAppLauncher;
diff --git a/packages/appstore/src/components/onboarding/static-cfd-account-manager.scss b/packages/appstore/src/components/onboarding/static-cfd-account-manager.scss
new file mode 100644
index 000000000000..677a7bb29a2a
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-cfd-account-manager.scss
@@ -0,0 +1,82 @@
+.static-cfd-account-manager {
+ display: flex;
+ width: 29.4rem;
+ margin-left: 1rem;
+ margin-top: 2rem;
+ align-items: center;
+ justify-content: space-between;
+
+ @include mobile {
+ width: auto;
+ }
+
+ &--cfds {
+ @include mobile {
+ width: auto;
+ margin-bottom: 4.5rem;
+ }
+ }
+
+ &__icon {
+ &--blurry {
+ opacity: 0.2;
+ }
+ margin-right: 1rem;
+ }
+
+ &__details {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__buttons {
+ display: flex;
+ flex-direction: column;
+ margin-left: auto;
+
+ @include mobile {
+ margin-right: 2rem;
+ }
+
+ &--animated {
+ animation: triggerAnimation 1s linear infinite alternate;
+ box-shadow: 0 2rem 1.5rem -0.1rem var(--general-section-1);
+ }
+
+ &-topup {
+ margin-bottom: 0.5rem;
+ cursor: not-allowed;
+
+ &--blurry {
+ opacity: 0.2;
+ }
+
+ &--animated {
+ animation: triggerAnimation 0.5s linear infinite alternate;
+ box-shadow: 0 2rem 1.5rem -0.1rem var(--general-section-1);
+ }
+ }
+
+ &-trade {
+ margin-bottom: 0.5rem;
+ cursor: not-allowed;
+
+ &--blurry {
+ opacity: 0.2;
+ }
+
+ &--animated {
+ animation: triggerAnimation 1s linear infinite alternate;
+ box-shadow: 0 2rem 1.5rem -0.1rem var(--general-section-1);
+ }
+ }
+
+ &-get {
+ cursor: not-allowed;
+ margin-left: 1rem;
+ &--blurry {
+ opacity: 0.2;
+ }
+ }
+ }
+}
diff --git a/packages/appstore/src/components/onboarding/static-cfd-account-manager.tsx b/packages/appstore/src/components/onboarding/static-cfd-account-manager.tsx
new file mode 100644
index 000000000000..05b1d8191eb5
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-cfd-account-manager.tsx
@@ -0,0 +1,192 @@
+import React from 'react';
+import { Button, Text } from '@deriv/components';
+import { formatMoney, CFD_PLATFORMS } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+import WalletIcon from 'Assets/svgs/wallet';
+import { TPlatform } from 'Types';
+
+import './static-cfd-account-manager.scss';
+import classNames from 'classnames';
+
+type TStaticCFDAccountManager = {
+ type: string;
+ appname: string;
+ loginid?: string;
+ currency?: string;
+ description?: string;
+ is_animated?: boolean;
+ has_account?: boolean;
+ is_last_step?: boolean;
+ derived_amount?: string;
+ is_blurry: {
+ icon: boolean;
+ item: boolean;
+ text: boolean;
+ get: boolean;
+ topup: boolean;
+ trade: boolean;
+ cfd_item: boolean;
+ cfd_text: boolean;
+ options_item: boolean;
+ options_text: boolean;
+ cfd_description: boolean;
+ options_description: boolean;
+ platformlauncher: boolean;
+ };
+ financial_amount?: string;
+ is_onboarding_animated: {
+ text: boolean;
+ trade: boolean;
+ topup: boolean;
+ button: boolean;
+ get: boolean;
+ };
+ is_derivx_last_step?: boolean;
+ platform: TPlatform | 'options';
+ is_financial_last_step?: boolean;
+ is_eu_user: boolean;
+};
+
+const StaticCFDAccountManager = ({
+ type,
+ appname,
+ loginid,
+ currency,
+ platform,
+ has_account,
+ description,
+ is_last_step,
+ derived_amount,
+ is_blurry,
+ financial_amount,
+ is_onboarding_animated,
+ is_eu_user,
+}: TStaticCFDAccountManager) => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default StaticCFDAccountManager;
diff --git a/packages/appstore/src/components/onboarding/static-dashboard.scss b/packages/appstore/src/components/onboarding/static-dashboard.scss
new file mode 100644
index 000000000000..1bddcc3e22f4
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-dashboard.scss
@@ -0,0 +1,132 @@
+.static-dashboard {
+ background-color: var(--general-main-1);
+ border-radius: 1.6rem;
+ padding: 3rem;
+
+ @include mobile {
+ width: 80%;
+ margin: 0 10%;
+ padding: 0;
+ }
+
+ &-wrapper {
+ border-radius: $BORDER_RADIUS;
+ border: 2rem solid var(--general-section-1);
+ padding: 3rem;
+
+ @include mobile {
+ border: none;
+ padding: 0;
+ }
+
+ &__description {
+ margin-left: 1.2rem;
+ margin-bottom: 1rem;
+ }
+
+ &__header {
+ display: flex;
+ padding-left: 1rem;
+ padding-top: 1rem;
+
+ @include mobile {
+ padding-left: 0;
+ }
+
+ &--toggle-account {
+ background-color: var(--general-section-1);
+ padding: 0.4rem;
+ border-radius: $BORDER_RADIUS;
+ align-self: center;
+ width: 80%;
+ }
+
+ @include mobile {
+ flex-direction: column;
+ }
+
+ &-compare-accounts {
+ margin-left: 1rem;
+
+ &--blurry {
+ opacity: 0.2;
+ }
+ }
+
+ &--underlined {
+ text-decoration: underline;
+ &--blurry {
+ opacity: 0.2;
+ }
+ }
+
+ &--animated {
+ font-size: 2rem;
+ position: inherit;
+ animation: triggerAnimation 0.5s linear infinite alternate;
+ }
+
+ &--normal {
+ font-size: 2rem;
+ }
+ }
+ &__body {
+ display: flex;
+
+ &--grey {
+ padding: 0;
+ }
+
+ &--with-add {
+ display: flex;
+ }
+
+ &--add-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &-text {
+ margin-left: 0.3rem;
+ }
+ }
+
+ @include mobile {
+ flex-direction: column;
+ }
+
+ &--apps {
+ display: flex;
+ margin-bottom: 1rem;
+
+ &--eu {
+ display: flex;
+ width: 95.6rem;
+ margin-bottom: 1rem;
+ }
+
+ @include mobile {
+ flex-direction: column;
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+
+ .divider {
+ width: calc(100% - 3.2rem);
+ border-top: 1px solid var(--general-section-1);
+ margin: 1rem 0 1.6rem 1.6rem;
+ }
+
+ .Add-Square {
+ display: flex;
+ align-self: center;
+ margin-left: 1rem;
+ opacity: 0.2;
+ }
+
+ .Add-Rounded {
+ opacity: 0.2;
+ }
+}
diff --git a/packages/appstore/src/components/onboarding/static-dashboard.tsx b/packages/appstore/src/components/onboarding/static-dashboard.tsx
new file mode 100644
index 000000000000..33ae471937f7
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-dashboard.tsx
@@ -0,0 +1,499 @@
+import React from 'react';
+import { useStores } from 'Stores';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Text, ButtonToggle, Icon } from '@deriv/components';
+import { isMobile, isDesktop } from '@deriv/shared';
+import { localize, Localize } from '@deriv/translations';
+import StaticCFDAccountManager from './static-cfd-account-manager';
+import StaticPlatformLauncher from './static-platform-launcher';
+import StaticAppLauncher from './static-applauncher';
+
+import './static-dashboard.scss';
+
+type TStaticDashboard = {
+ loginid?: string;
+ is_grey?: boolean;
+ currency?: string;
+ mf_currency?: string;
+ has_account?: boolean;
+ is_last_step?: boolean;
+ derived_amount?: string;
+ financial_amount?: string;
+ is_blurry: {
+ icon: boolean;
+ item: boolean;
+ text: boolean;
+ get: boolean;
+ topup: boolean;
+ trade: boolean;
+ cfd_item: boolean;
+ cfd_text: boolean;
+ options_item: boolean;
+ options_text: boolean;
+ cfd_description: boolean;
+ options_description: boolean;
+ platformlauncher: boolean;
+ };
+ is_onboarding_animated: {
+ text: boolean;
+ trade: boolean;
+ topup: boolean;
+ button: boolean;
+ get: boolean;
+ };
+ is_derivx_last_step?: boolean;
+ is_financial_last_step?: boolean;
+ has_applauncher_account?: boolean;
+};
+
+const StaticDashboard = ({
+ currency,
+ mf_currency,
+ financial_amount,
+ derived_amount,
+ has_account,
+ has_applauncher_account,
+ is_blurry,
+ is_derivx_last_step,
+ is_financial_last_step,
+ is_grey,
+ is_last_step,
+ is_onboarding_animated,
+ loginid,
+}: TStaticDashboard) => {
+ const Divider = () => ;
+
+ const { client } = useStores();
+ const { is_eu, is_eu_country, is_logged_in } = client;
+
+ const is_eu_user = (is_logged_in && is_eu) || (!is_logged_in && is_eu_country);
+ const toggle_options = [
+ { text: 'CFDs', value: 0 },
+ { text: 'Options', value: 1 },
+ ];
+
+ const [index, setIndex] = React.useState(0);
+
+ React.useEffect(() => {
+ const change_index_interval_id = setInterval(() => {
+ if (index === 0) {
+ setIndex(1);
+ } else {
+ setIndex(0);
+ }
+ }, 5000);
+
+ return () => clearInterval(change_index_interval_id);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [index]);
+
+ const is_eu_title = is_eu_user ? localize('Multipliers') : localize('Options and Multipliers');
+ const is_eu_account_title = is_eu_user ? 'Multipliers account' : 'Options and Multipliers account';
+
+ return (
+
+ {platform === CFD_PLATFORMS.MT5 &&
+ !is_eu_user &&
+ (type === 'financial' ? (
+
+
+
+ {appname}
+
+ {has_account ? (
+
+ {`${formatMoney(
+ currency,
+ type === 'financial' ? financial_amount : derived_amount,
+ true
+ )} ${currency}`}
+
+ {loginid}
+
+
+ ) : (
+
+ {description}
+
+ )}
+
+
+ {has_account && platform !== CFD_PLATFORMS.DXTRADE ? (
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+export default observer(StaticDashboard);
diff --git a/packages/appstore/src/components/onboarding/static-platform-launcher.scss b/packages/appstore/src/components/onboarding/static-platform-launcher.scss
new file mode 100644
index 000000000000..cee95b0b036e
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-platform-launcher.scss
@@ -0,0 +1,69 @@
+.static-platform-launcher {
+ &--grey {
+ background: var(--general-section-1);
+ width: 100%;
+ @include mobile {
+ width: 90%;
+ margin-left: 1.4rem;
+ height: 8rem;
+ }
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0;
+ gap: 1.6rem;
+ width: 18.32rem;
+ height: 5.4rem;
+ margin-bottom: 1.6rem;
+ margin-left: 1rem;
+
+ @include mobile {
+ width: auto;
+ }
+
+ &--icon {
+ width: 3.2rem;
+ height: 3.2rem;
+
+ &--blurry {
+ width: 3.2rem;
+ height: 3.2rem;
+ opacity: 0.2;
+ }
+ }
+ &--title-desc-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0;
+ width: 13.52rem;
+ height: 4rem;
+
+ @include mobile {
+ width: auto;
+ }
+ }
+ }
+ &__trade-button {
+ width: 90%;
+ margin-bottom: 2rem;
+ cursor: not-allowed;
+
+ &--eu {
+ margin-bottom: 2rem;
+ display: flex;
+ margin-left: 1rem;
+ width: 20%;
+ }
+
+ @include mobile {
+ width: auto;
+ margin-right: 1rem;
+ margin-left: auto;
+ margin-top: 2rem;
+ }
+ }
+}
diff --git a/packages/appstore/src/components/onboarding/static-platform-launcher.tsx b/packages/appstore/src/components/onboarding/static-platform-launcher.tsx
new file mode 100644
index 000000000000..ecde341af7bf
--- /dev/null
+++ b/packages/appstore/src/components/onboarding/static-platform-launcher.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Button, Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { isMobile } from '@deriv/shared';
+import { useStores } from 'Stores';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import WalletIcon, { Icons } from 'Assets/svgs/wallet';
+
+import './static-platform-launcher.scss';
+
+type TPlatformLauncherProps = {
+ app_icon: keyof typeof Icons;
+ app_desc?: string;
+ is_grey?: boolean;
+ app_title?: string;
+ has_applauncher_account?: boolean;
+ is_item_blurry?: boolean;
+};
+
+const PlatformLauncher = ({
+ app_icon,
+ app_desc,
+ is_grey,
+ app_title,
+ is_item_blurry,
+ has_applauncher_account,
+}: TPlatformLauncherProps) => {
+ const { client } = useStores();
+ const { is_eu, is_eu_country, is_logged_in } = client;
+
+ const is_eu_user = (is_logged_in && is_eu) || (!is_logged_in && is_eu_country);
+ return (
+
+ {(isDesktop() || (isMobile() && index === 0)) && (
+ <>
+
+
+ {isMobile() ? (
+ {
+ setIndex(item.target.value);
+ }}
+ name='CFDs'
+ value={index}
+ />
+ ) : (
+
+
+ )}
+
+
+
+
+ {isMobile() && (
+
+ {localize('Compare accounts')}
+
+ )}
+
+
+ {!is_eu_user && (
+
+
+ )}
+ {!isMobile() &&
+
+ )}
+ {is_eu_user && (
+
+
+ {localize('More derived accounts')}
+
+
+ )}
+
+
+ )}
+ {!is_eu_user && (
+
+
+ )}
+ {!is_eu_user && (
+
+
+ {localize('More [account name] accounts')}
+
+
+ )}
+
+
+ )}
+
+ {isMobile() ? (
+ {
+ setIndex(item.target.value);
+ }}
+ name='Options'
+ value={index}
+ />
+ ) : (
+
+ {is_eu_title}
+
+ )}
+
+
+
+ {is_eu_user ? (
+
+
+
+ {!has_applauncher_account ? (
+
+ {!has_applauncher_account &&
+ {!isMobile() ? (
+
+ {is_eu_user ? (
+
+ ) : (
+
+ )}
+
+
+
+ )}
+
+ {is_eu_user ? (
+
+ )}
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default observer(PlatformLauncher);
diff --git a/packages/appstore/src/components/options/index.ts b/packages/appstore/src/components/options/index.ts
new file mode 100644
index 000000000000..196cb25d7b97
--- /dev/null
+++ b/packages/appstore/src/components/options/index.ts
@@ -0,0 +1,4 @@
+import OptionsAccounts from './options-accounts';
+import './options-accounts.scss';
+
+export default OptionsAccounts;
diff --git a/packages/appstore/src/components/options/options-accounts.scss b/packages/appstore/src/components/options/options-accounts.scss
new file mode 100644
index 000000000000..b4fe9120ebed
--- /dev/null
+++ b/packages/appstore/src/components/options/options-accounts.scss
@@ -0,0 +1,110 @@
+.options-accounts-container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ &__description {
+ margin-bottom: 2.4rem;
+ }
+ &__appLauncher {
+ width: 100%;
+ display: flex;
+ overflow-x: auto;
+ @include mobile {
+ overflow: hidden;
+ }
+ &--account-real,
+ &--account-demo {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ @include mobile {
+ position: relative;
+ }
+ .account-container {
+ width: 20%;
+ min-width: 26rem;
+ @include mobile {
+ width: 80%;
+ }
+ }
+ }
+ &--add-options-scroller {
+ position: absolute;
+ right: 6.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ height: 7.2rem;
+ @include mobile {
+ right: 0;
+ height: auto;
+ }
+ }
+ &--add-options {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 1.6rem;
+ @include mobile {
+ height: auto;
+ position: absolute;
+ right: 0;
+ margin: 0;
+ }
+ }
+ &--account__loader {
+ height: 7.2rem;
+ @include mobile {
+ height: 5.2rem;
+ }
+ }
+ }
+
+ &__accounts {
+ &-platform-container {
+ &--account-launcher {
+ padding: 1rem;
+ }
+ }
+ }
+
+ &__platformLauncher,
+ &__platformLauncher--applauncher {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ border-radius: 0rem 0.6rem 0.6rem;
+ padding: 1.6rem 2.4rem;
+ overflow-x: auto;
+ &--item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 20%;
+ min-width: 25rem;
+ &_divider {
+ width: 4rem;
+ height: 0.1rem;
+ background: $color-grey-4;
+ transform: rotate(90deg);
+ }
+ @include mobile {
+ width: 100%;
+ }
+ }
+ @include mobile {
+ flex-direction: column;
+ padding: 1.6rem 0;
+ }
+ }
+ &__platformLauncher {
+ background: var(--general-section-5);
+ }
+ &__divider {
+ margin: 1.1rem 0;
+ height: 0.2rem;
+ width: 100%;
+ border: none;
+ background-color: var(--general-section-1);
+ }
+}
diff --git a/packages/appstore/src/components/options/options-accounts.tsx b/packages/appstore/src/components/options/options-accounts.tsx
new file mode 100644
index 000000000000..71ffaa01b56b
--- /dev/null
+++ b/packages/appstore/src/components/options/options-accounts.tsx
@@ -0,0 +1,367 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStores } from 'Stores';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import classNames from 'classnames';
+import { Text, StaticUrl, MobileDialog, Modal, Button, Loading } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { isMobile, routes } from '@deriv/shared';
+import PlatformLauncher from '../platform-launcher';
+import OptionsAccount from '../account';
+import AddOptions from '../add-options';
+import { getSortedAccountList } from '../../helpers';
+import AccountManager from '../account-manager';
+import { Icons } from 'Assets/svgs/wallet';
+
+type TPlatformLauncherPropsArray = {
+ app_icon: keyof typeof Icons;
+ app_title: string;
+ app_desc: string;
+ link_to?: string;
+ href?: string;
+}[];
+type TOptionsAccountsProps = {
+ platformlauncherprops: TPlatformLauncherPropsArray;
+ accountType: string;
+};
+
+type TAccount = {
+ // TODO: Replace with the one from client store when it's migrated to TS
+ account_type: string;
+ balance: number;
+ created_at: number;
+ currency: string;
+ excluded_until: string;
+ is_disabled: number;
+ is_virtual: number;
+ landing_company_name: string;
+ landing_company_shortcode: string;
+ token: string;
+};
+
+const OptionsAccounts: React.FunctionComponent
+
+ {has_applauncher_account && !isMobile() && (
+
+ )}
+
+
+
+
+
+
+
+
+ {isMobile() && has_applauncher_account && (
+
+ )}
+
+
+ )} +
+ );
+};
+
+export default withRouter(observer(OptionsAccounts));
diff --git a/packages/appstore/src/components/platform-launcher/index.ts b/packages/appstore/src/components/platform-launcher/index.ts
new file mode 100644
index 000000000000..565b2111d0aa
--- /dev/null
+++ b/packages/appstore/src/components/platform-launcher/index.ts
@@ -0,0 +1,4 @@
+import PlatformLauncher from './platform-launcher';
+import './platform-launcher.scss';
+
+export default PlatformLauncher;
diff --git a/packages/appstore/src/components/platform-launcher/platform-launcher.scss b/packages/appstore/src/components/platform-launcher/platform-launcher.scss
new file mode 100644
index 000000000000..329a22f97a0a
--- /dev/null
+++ b/packages/appstore/src/components/platform-launcher/platform-launcher.scss
@@ -0,0 +1,79 @@
+.platform-launcher,
+.platform-launcher-applauncher {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1.6rem;
+ width: 100%;
+ @include mobile {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 1rem;
+ height: 5.6rem;
+ }
+ &__container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0;
+ gap: 1.6rem;
+ width: 100%;
+ height: 5.4rem;
+ &--icon {
+ width: 3.2rem;
+ height: 3.2rem;
+ }
+ &--title-desc-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0;
+ @include mobile {
+ width: 18.3rem;
+ height: 2.8rem;
+ left: 0;
+ top: 0;
+ &--title {
+ width: 16.4rem;
+ height: 1.4rem;
+ font-size: 1rem;
+ }
+ &--description {
+ width: 18.3rem;
+ height: 1.4rem;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 0.96rem;
+ line-height: 1.4rem;
+ color: var(--text-general);
+ }
+ }
+ }
+ @include mobile {
+ justify-content: center;
+ padding: 0 0 0 0.8rem;
+ gap: 1.2rem;
+ width: 22.8rem;
+ height: 3.2rem;
+ }
+ }
+ a {
+ display: flex;
+ justify-content: flex-end;
+ text-decoration: none;
+ text-align: center;
+ width: 100%;
+ }
+ &__trade-button {
+ width: 100%;
+ height: 3.2rem;
+
+ @include mobile {
+ padding: 0.3rem 0.8rem;
+ width: 4.9rem;
+ height: 2.4rem;
+ top: 0.2rem;
+ }
+ }
+}
diff --git a/packages/appstore/src/components/platform-launcher/platform-launcher.tsx b/packages/appstore/src/components/platform-launcher/platform-launcher.tsx
new file mode 100644
index 000000000000..e8c297e3f2e2
--- /dev/null
+++ b/packages/appstore/src/components/platform-launcher/platform-launcher.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Text, Button } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import WalletIcon, { Icons } from 'Assets/svgs/wallet';
+import { isMobile } from '@deriv/shared';
+import { Link } from 'react-router-dom';
+import { useStores } from 'Stores';
+import { observer } from 'mobx-react-lite';
+
+type TPlatformLauncherProps = {
+ app_icon: keyof typeof Icons;
+ app_title?: string;
+ app_desc?: string;
+ link_to?: string;
+ href?: string;
+ has_real_account: boolean;
+ account_type: string;
+};
+
+const PlatformLauncher = ({
+ app_icon,
+ app_title,
+ app_desc,
+ link_to,
+ href,
+ has_real_account,
+ account_type,
+}: TPlatformLauncherProps) => {
+ const { client } = useStores();
+
+ const { is_eu } = client;
+
+ const is_eu_description = 'Multipliers trading platform.';
+
+ const app_description =
+ app_desc === 'Options & multipliers trading platform.' && is_eu ? is_eu_description : app_desc;
+
+ return (
+
+ {!isMobile() && (
+
+
+ )}
+
+
+
+ {is_eu ? (
+
+
+
+
+ {!is_logging_in ? (
+
+ {props.accountType === 'demo' && (
+
+ ) : (
+ setIsModalOpen(false)}
+ wrapper_classname='account-switcher-container'
+ footer={
+
+
+
+ }
+ >
+ {sortedAccountList.map(account => (
+ {
+ return !account.is_disabled && doSwitch(account.loginid);
+ }}
+ onClickResetVirtualBalance={resetBalance}
+ selected_loginid={account.loginid}
+ history={props.history}
+ location={props.location}
+ match={props.match}
+ activeAccount={loginid}
+ onClickDeposit={onClickDeposit}
+ switchAccountModal={openSwitchAccountModal}
+ is_modal={true}
+ />
+ ))}
+
+
+ {!has_any_real_account && props.accountType === 'real' && (
+
+ {getSortedAccountList(account_list, accounts)
+ .filter(account => account.is_virtual)
+ .map(account => (
+ {
+ return !account.is_disabled && doSwitch(account.loginid);
+ }}
+ onClickResetVirtualBalance={resetBalance}
+ selected_loginid={account.loginid}
+ history={props.history}
+ location={props.location}
+ match={props.match}
+ activeAccount={loginid}
+ />
+ ))}
+
+ )}
+ {has_any_real_account && props.accountType === 'real' && (
+ = 5 && props.accountType === 'real',
+ })}
+ >
+ {sortedAccountList.map(account =>
+ isMobile() ? (
+ account.loginid === loginid && (
+ {
+ return !account.is_disabled && doSwitch(account.loginid);
+ }}
+ onClickResetVirtualBalance={resetBalance}
+ selected_loginid={loginid}
+ history={props.history}
+ location={props.location}
+ match={props.match}
+ activeAccount={loginid}
+ onClickDeposit={onClickDeposit}
+ />
+ )
+ )}
+ {props.accountType === 'real' && (
+
+ )}
+ {!has_any_real_account && props.accountType === 'real' && (
+ = 4 ? '-scroller' : ''
+ }`}
+ >
+
+ )}
+
+ ui.openRealAccountSignup()}
+ description={`Get a real ${is_eu_title} account, start trading and manage your funds.`}
+ />
+
+ )}
+ + )} +
+ {props.platformlauncherprops.map((item, index) => {
+ return (
+
+
+
+ );
+ })}
+
+
+ {link_to ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ )}
+
+ );
+};
+
+export default observer(PlatformLauncher);
diff --git a/packages/appstore/src/components/platform-launcher/stories/platform-launcher.stories.tsx b/packages/appstore/src/components/platform-launcher/stories/platform-launcher.stories.tsx
new file mode 100644
index 000000000000..c5d4b8c73004
--- /dev/null
+++ b/packages/appstore/src/components/platform-launcher/stories/platform-launcher.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, Story } from '@storybook/react';
+import PlatformLauncher from '../index';
+
+type PlatformLauncherProps = Parameters
+
+ {((has_real_account && account_type === 'real') || account_type === 'demo') && (
+
+
+
+
+
+
+
+
+