- {is_wallet_account ?
:
}
-
+
+
+
+
+
+
+
+
+
+ {is_landing_company_loaded ? (
+
+ ) : (
+
+ )}
+ {selected_platform_type === 'options' && }
+ {selected_platform_type === 'cfd' && }
+
{scrolled &&
}
- {is_low_risk_cr_eu &&
}
-
+ {is_eu_low_risk &&
}
+
);
});
diff --git a/packages/appstore/src/modules/traders-hub/traders-hub.scss b/packages/appstore/src/modules/traders-hub/traders-hub.scss
index 4ff6454c1656..ab9fd05592b9 100644
--- a/packages/appstore/src/modules/traders-hub/traders-hub.scss
+++ b/packages/appstore/src/modules/traders-hub/traders-hub.scss
@@ -1,30 +1,13 @@
.traders-hub {
max-width: 123.2rem;
margin: auto;
- padding: 2.4rem 0;
+ padding: 5rem 0;
@include mobile {
padding: 2rem;
width: 100%;
}
- &__wallets {
- @include mobile {
- padding: 1.6rem;
- background-color: var(--general-main-1);
- }
-
- &-bg {
- background-color: var(--general-section-1);
- }
-
- &-demo-bg {
- @include mobile {
- background-color: var(--wallet-demo-bg-color);
- }
- }
- }
-
&__main-container {
display: flex;
flex-direction: column;
@@ -52,3 +35,28 @@
}
}
}
+
+.disclamer {
+ position: fixed;
+ bottom: 3.6rem;
+ width: 100%;
+ height: 5rem;
+ z-index: 3;
+ display: flex;
+ align-items: center;
+ backface-visibility: hidden;
+ background: var(--icon-grey-background);
+
+ @include mobile {
+ height: 8rem;
+ border: 1px solid var(--icon-grey-background);
+ }
+
+ &-text {
+ padding: 0 3rem;
+
+ @include mobile {
+ padding: 0 1.5rem;
+ }
+ }
+}
diff --git a/packages/appstore/src/modules/wallets/desktop-wallets-list.tsx b/packages/appstore/src/modules/wallets/desktop-wallets-list.tsx
new file mode 100644
index 000000000000..3f73ece0fef8
--- /dev/null
+++ b/packages/appstore/src/modules/wallets/desktop-wallets-list.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useWalletsList } from '@deriv/hooks';
+import { observer } from '@deriv/stores';
+import Wallet from 'Components/containers/wallet';
+
+const DesktopWalletsList = observer(() => {
+ const { data } = useWalletsList();
+
+ return (
+ <>
+ {data?.map(wallet => (
+
+ ))}
+
+ );
+});
+
+export default DesktopWalletsList;
diff --git a/packages/appstore/src/modules/wallets/index.ts b/packages/appstore/src/modules/wallets/index.ts
new file mode 100644
index 000000000000..b8cb10bdc8c3
--- /dev/null
+++ b/packages/appstore/src/modules/wallets/index.ts
@@ -0,0 +1 @@
+export { default as WalletsModule } from './wallets';
diff --git a/packages/appstore/src/modules/wallets/mobile-wallets-carousel.tsx b/packages/appstore/src/modules/wallets/mobile-wallets-carousel.tsx
new file mode 100644
index 000000000000..bc92679498c8
--- /dev/null
+++ b/packages/appstore/src/modules/wallets/mobile-wallets-carousel.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { ButtonToggle } from '@deriv/components';
+import { useActiveWallet, useContentFlag } from '@deriv/hooks';
+import { observer, useStore } from '@deriv/stores';
+import ButtonToggleLoader from 'Components/pre-loader/button-toggle-loader';
+import WalletCardsCarousel from 'Components/wallet-cards-carousel';
+import WalletCFDsListing from 'Components/wallet-content/wallet-cfds-listing';
+import WalletOptionsAndMultipliersListing from 'Components/wallet-content/wallet-option-multipliers-listing';
+import classNames from 'classnames';
+
+const MobileWalletsCarousel = observer(() => {
+ const { client, traders_hub } = useStore();
+ const { is_landing_company_loaded } = client;
+ const { selected_platform_type, setTogglePlatformType, is_eu_user } = traders_hub;
+ const { is_eu_demo, is_eu_real } = useContentFlag();
+ const eu_title = is_eu_demo || is_eu_real || is_eu_user;
+ const active_wallet = useActiveWallet();
+
+ const platform_toggle_options = [
+ { text: 'CFDs', value: 'cfd' },
+ { text: eu_title ? 'Multipliers' : 'Options & Multipliers', value: 'options' },
+ ];
+
+ const platformTypeChange = (event: { target: { value: string; name: string } }) => {
+ setTogglePlatformType(event.target.value);
+ };
+
+ return (
+ <>
+
+
+ {is_landing_company_loaded ? (
+
+ ) : (
+
+ )}
+ {selected_platform_type === 'cfd' && }
+ {selected_platform_type === 'options' && }
+
+
+ );
+});
+
+export default MobileWalletsCarousel;
diff --git a/packages/appstore/src/modules/wallets/wallets.scss b/packages/appstore/src/modules/wallets/wallets.scss
new file mode 100644
index 000000000000..d8db8f5d55c7
--- /dev/null
+++ b/packages/appstore/src/modules/wallets/wallets.scss
@@ -0,0 +1,25 @@
+.wallets-module {
+ display: flex;
+ min-height: 92.8vh;
+ background-color: var(--general-section-1);
+
+ @include mobile {
+ min-height: 100vh;
+ }
+
+ &__content {
+ width: 100%;
+ max-width: 131.2rem;
+ margin: auto;
+ display: flex;
+ padding: 4rem;
+ flex-direction: column;
+ align-items: center;
+ gap: 2.4rem;
+ align-self: stretch;
+
+ @include mobile {
+ padding: 2.4rem 0;
+ }
+ }
+}
diff --git a/packages/appstore/src/modules/wallets/wallets.tsx b/packages/appstore/src/modules/wallets/wallets.tsx
new file mode 100644
index 000000000000..c1e9fb0506bf
--- /dev/null
+++ b/packages/appstore/src/modules/wallets/wallets.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { Loading, ThemedScrollbars } from '@deriv/components';
+import { useActiveWallet, useWalletsList } from '@deriv/hooks';
+import { observer, useStore } from '@deriv/stores';
+import AddMoreWallets from 'Components/add-more-wallets';
+import ModalManager from 'Components/modals/modal-manager';
+import DesktopWalletsList from './desktop-wallets-list';
+import MobileWalletsCarousel from './mobile-wallets-carousel';
+import './wallets.scss';
+
+const Wallets = observer(() => {
+ const { client, ui } = useStore();
+ const { switchAccount, is_authorize } = client;
+ const { is_mobile } = ui;
+ const { data } = useWalletsList();
+ const active_wallet = useActiveWallet();
+
+ useEffect(() => {
+ if (!active_wallet && data && data?.length) {
+ switchAccount(data[0].loginid);
+ }
+ }, [active_wallet, data, switchAccount]);
+
+ return (
+
+ {!is_authorize && }
+ {is_authorize && (
+
+ )}
+
+
+ );
+});
+
+export default Wallets;
diff --git a/packages/appstore/src/services/websocket.ts b/packages/appstore/src/services/websocket.ts
deleted file mode 100644
index b2ac6e22830e..000000000000
--- a/packages/appstore/src/services/websocket.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { DerivWS } from 'Types';
-
-let ws: DerivWS = null;
-
-export const useWs = (): DerivWS => ws;
-
-export const initWs = (ws_instance: DerivWS): void => (ws = ws_instance);
diff --git a/packages/appstore/src/stores/base-store.ts b/packages/appstore/src/stores/base-store.ts
deleted file mode 100644
index b24a80ad456d..000000000000
--- a/packages/appstore/src/stores/base-store.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import RootStore from './root-store';
-
-export default class BaseStore {
- public root_store: RootStore;
-
- public constructor(root_store: RootStore) {
- this.root_store = root_store;
- }
-}
diff --git a/packages/appstore/src/stores/config-store.ts b/packages/appstore/src/stores/config-store.ts
deleted file mode 100644
index abe3d633621e..000000000000
--- a/packages/appstore/src/stores/config-store.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { TConfigProps } from 'Types';
-import BaseStore from './base-store';
-
-export default class ConfigStore extends BaseStore {
- public has_router = true;
- public routes = {
- traders_hub: '/appstore/traders-hub',
- onboarding: '/appstore/onboarding',
-
- my_apps: '/my-apps',
- explore: '/explore',
- about_us: '/about-us',
- resources: '/resources',
-
- market_commodities: '/markets/commodities',
- market_forex: '/markets/forex',
- market_stock: '/markets/stock',
- market_synthetic: '/markets/synthetic',
- markets: '/markets',
-
- platform_binary_bot: '/platforms/binary-bot',
- platform_dbot: '/platforms/dbot',
- platform_dmt5: '/platforms/dmt5',
- platform_dmt5_financial: '/platforms/dmt5-financial',
- platform_dmt5_financial_stp: '/platforms/dmt5-financial-stp',
- platform_dmt5_synthetic: '/platforms/dmt5-synthetic',
- platform_dtrader: '/platforms/dtrader',
- platform_smarttrader: '/platforms/smarttrader',
- platforms: '/platforms',
-
- trade_type_cfds: '/trade-types/cfds',
- trade_type_multipliers: '/trade-types/multipliers',
- trade_type_options: '/trade-types/options',
- trade_types: '/trade-types',
-
- wallet_bank_wire: '/wallets/bank-wire',
- wallet_cards: '/wallets/cards',
- wallet_crypto: '/wallets/crypto',
- wallet_ewallet: '/wallets/ewallet',
- wallets: '/wallets',
- };
-
- public setConfig(config: TConfigProps): void {
- this.has_router = config.has_router;
- this.routes = config.routes;
- }
-}
diff --git a/packages/appstore/src/stores/index.ts b/packages/appstore/src/stores/index.ts
index 7f15b07398b9..86259b611fcd 100644
--- a/packages/appstore/src/stores/index.ts
+++ b/packages/appstore/src/stores/index.ts
@@ -1,18 +1,4 @@
-import * as React from 'react';
-import { initWs } from 'Services/websocket';
-import { TRootStore } from 'Types';
-import RootStore from './root-store';
-
-let stores_context: React.Context
;
-
-export const initContext = (core_store: TRootStore, websocket: Record): void => {
- if (!stores_context) {
- const root_store = new RootStore(core_store);
- stores_context = React.createContext(root_store);
-
- initWs(websocket);
- }
-};
+import { useStore } from '@deriv/stores';
/** @deprecated Use `useStore` from `@deriv/stores` package instead. */
-export const useStores = (): TRootStore => React.useContext(stores_context);
+export const useStores: () => any = useStore;
diff --git a/packages/appstore/src/stores/root-store.ts b/packages/appstore/src/stores/root-store.ts
deleted file mode 100644
index 471185b72deb..000000000000
--- a/packages/appstore/src/stores/root-store.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { TRootStore } from 'Types';
-import ConfigStore from './config-store';
-
-export default class RootStore {
- public config: ConfigStore;
- public ws: unknown;
- public client: Record;
- public common: Record;
- public ui: Record;
- public modules: Record;
- public notifications: Record;
- public traders_hub: Record;
-
- public constructor(core_store: TRootStore) {
- this.config = new ConfigStore(this);
- this.client = core_store.client;
- this.common = core_store.common;
- this.ui = core_store.ui;
- this.modules = core_store.modules;
- this.notifications = core_store.notifications;
- this.traders_hub = core_store.traders_hub;
- }
-}
diff --git a/packages/appstore/src/types/api.types.ts b/packages/appstore/src/types/api.types.ts
deleted file mode 100644
index 90ebe40a82b9..000000000000
--- a/packages/appstore/src/types/api.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type TErrorResponse =
- | {
- message: string;
- code: string;
- }
- | undefined;
diff --git a/packages/appstore/src/types/index.ts b/packages/appstore/src/types/index.ts
index edc109feef38..237db8bfebe2 100644
--- a/packages/appstore/src/types/index.ts
+++ b/packages/appstore/src/types/index.ts
@@ -1,6 +1 @@
-export * from './props.types';
-export * from './stores.types';
-export * from './params.types';
-export * from './api.types';
-export * from './ws.types';
export * from './common.types';
diff --git a/packages/appstore/src/types/params.types.ts b/packages/appstore/src/types/params.types.ts
deleted file mode 100644
index 182bbc23e79d..000000000000
--- a/packages/appstore/src/types/params.types.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export type TRoute = {
- component?: any;
- default?: boolean;
- exact?: boolean;
- getTitle?: () => string;
- icon?: string;
- is_authenticated?: boolean;
- is_routed?: boolean;
- is_modal?: boolean;
- label?: string;
- path?: string;
- routes?: TRoute[];
- subroutes?: TRoute[];
- to?: string;
- is_logged_in?: boolean;
- is_logging_in?: boolean;
-};
-
-export type TRouteGroup = {
- default?: boolean;
- icon?: string;
- getTitle?: () => string;
- path?: string;
- subitems?: number[];
-};
-export type TRouteConfig = TRoute & {
- is_modal?: boolean;
- is_authenticated?: boolean;
- routes?: TRoute[];
-};
diff --git a/packages/appstore/src/types/props.types.ts b/packages/appstore/src/types/props.types.ts
deleted file mode 100644
index ed94bb03b11d..000000000000
--- a/packages/appstore/src/types/props.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import ConfigStore from 'Stores/config-store';
-
-export type TConfigProps = {
- has_router: boolean;
- routes: ConfigStore['routes'];
-};
diff --git a/packages/appstore/src/types/stores.types.ts b/packages/appstore/src/types/stores.types.ts
deleted file mode 100644
index 690863da4f7e..000000000000
--- a/packages/appstore/src/types/stores.types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import ConfigStore from 'Stores/config-store';
-
-export type TRootStore = {
- ui: Record;
- common: Record;
- client: Record;
- config: ConfigStore;
- modules: Record;
- notifications: Record;
- traders_hub: Record;
-};
diff --git a/packages/appstore/src/types/ws.types.ts b/packages/appstore/src/types/ws.types.ts
deleted file mode 100644
index 8dc541ad5384..000000000000
--- a/packages/appstore/src/types/ws.types.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type DerivWS = any;
diff --git a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
index 9680f5742435..cb91c49a0338 100644
--- a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
+++ b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
@@ -1,6 +1,6 @@
import { action, computed, observable, reaction, runInAction, makeObservable, override } from 'mobx';
import { getAccountListKey, getAccountTypeFields, CFD_PLATFORMS, WS, Jurisdiction } from '@deriv/shared';
-import BaseStore from 'Stores/base-store';
+import BaseStore from '../../base-store';
import { getDxCompanies, getMtCompanies, getDerivezCompanies } from './Helpers/cfd-config';
export default class CFDStore extends BaseStore {
diff --git a/packages/cfd/src/Utils/Validator/validator.js b/packages/cfd/src/Utils/Validator/validator.js
index c8aa2ce59dff..f6249ab21610 100644
--- a/packages/cfd/src/Utils/Validator/validator.js
+++ b/packages/cfd/src/Utils/Validator/validator.js
@@ -1,4 +1,4 @@
-import { template } from '_common/utility';
+import { template } from '../../_common/utility';
import { getPreBuildDVRs } from '@deriv/shared';
import Error from './errors';
diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
index 50f815b8c278..1008a28fae1c 100644
--- a/packages/core/src/Stores/client-store.js
+++ b/packages/core/src/Stores/client-store.js
@@ -1556,7 +1556,7 @@ export default class ClientStore extends BaseStore {
this.setIsLoggingIn(true);
this.root_store.notifications.removeNotifications(true);
this.root_store.notifications.removeAllNotificationMessages(true);
- if (!this.is_virtual && /VRTC/.test(loginid)) {
+ if (!this.is_virtual && /VRTC|VRW/.test(loginid)) {
this.setPrevRealAccountLoginid(this.loginid);
}
this.setSwitched(loginid);
@@ -1956,7 +1956,7 @@ export default class ClientStore extends BaseStore {
// if real to virtual --> switch to blue
// if virtual to real --> switch to green
// else keep the existing connection
- const should_switch_socket_connection = this.is_virtual || /VRTC/.test(from_login_id);
+ const should_switch_socket_connection = this.is_virtual || /VRTC|VRW/.test(from_login_id);
if (should_switch_socket_connection) {
BinarySocket.closeAndOpenNewConnection();
diff --git a/packages/hooks/src/useAuthorize.ts b/packages/hooks/src/useAuthorize.ts
index 727e826a0a6d..7f3d3b9e0408 100644
--- a/packages/hooks/src/useAuthorize.ts
+++ b/packages/hooks/src/useAuthorize.ts
@@ -8,10 +8,7 @@ const useAuthorize = (token?: string) => {
const { accounts, loginid = '' } = client;
const current_token = accounts[loginid || ''].token;
- const { data, ...rest } = useFetch('authorize', {
- payload: { authorize: token || current_token },
- options: { keepPreviousData: true },
- });
+ const { data, ...rest } = useFetch('authorize', { payload: { authorize: token || current_token } });
// Add additional information to the authorize response.
const modified_authorize = useMemo(() => ({ ...data?.authorize }), [data?.authorize]);
diff --git a/packages/stores/src/stores/FeatureFlagsStore.ts b/packages/stores/src/stores/FeatureFlagsStore.ts
index ca6a85211c28..904120a3b464 100644
--- a/packages/stores/src/stores/FeatureFlagsStore.ts
+++ b/packages/stores/src/stores/FeatureFlagsStore.ts
@@ -24,5 +24,7 @@ export default class FeatureFlagsStore extends BaseStore<{ [k in keyof typeof FL
});
}
});
+
+ this.data = FLAGS;
}
}