yashim/feat: add mock server integration

packages/core/src/App/Components/mock-controls/index.js

@@ -0,0 +1,4 @@
+import MockDialog from './mock-dialog';
+import { MockServerProvider, useMockServer } from './mock-server-provider';
+
+export { MockDialog, MockServerProvider, useMockServer };

packages/core/src/App/Components/mock-controls/mock-dialog.scss

@@ -0,0 +1,32 @@
+.mock-dialog {
+    position: absolute;
+    bottom: 4.6rem;
+    right: 1rem;
+    width: 34rem;
+    border-radius: $BORDER_RADIUS;
+    padding: 1rem 1.6rem;
+    background-color: var(--general-main-1);
+    box-shadow: 0 20px 13px rgba(0, 0, 0, 0.01), 0 4px 3px rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--general-hover);
+    z-index: 69420;
+
+    &__title {
+        margin-bottom: 1.4rem;
+    }
+
+    &__form {
+        display: flex;
+        min-height: 40rem;
+        flex-direction: column;
+        gap: 2rem;
+
+        &--input {
+            margin-bottom: unset;
+        }
+
+        &--submit-container {
+            display: flex;
+            justify-content: end;
+        }
+    }
+}

packages/core/src/App/Components/mock-controls/mock-dialog.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './mock-dialog.scss';
+import { Button, Checkbox, Input, Text } from '@deriv/components';
+import { useMockServer } from './mock-server-provider';
+
+const MockDialog = () => {
+    const { active_mock_id, handleSetActiveMockId } = useMockServer();
+    const [input_mock_id, setInputMockId] = React.useState(active_mock_id);
+
+    const saveHandler = () => {
+        if (input_mock_id) {
+            handleSetActiveMockId(input_mock_id);
+        }
+    };
+
+    return (
+        <div className='mock-dialog'>
+            <div className='mock-dialog__title'>
+                <Text weight='bold'>Mock Server Config</Text>
+            </div>
+            <div className='mock-dialog__form'>
+                <Checkbox checked={!!active_mock_id} label='Enable mock server' />
+                <Input
+                    type='text'
+                    value={input_mock_id}
+                    onChange={e => setInputMockId(e.target.value)}
+                    className='mock-dialog__form--input'
+                />
+                <div className='mock-dialog__form--submit-container'>
+                    <Button onClick={saveHandler}>Save</Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MockDialog;

packages/core/src/App/Components/mock-controls/mock-server-provider.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import { useWS } from '@deriv/shared';
+import { getLanguage } from '@deriv/translations';
+
+export const ACTIVE_MOCK_ID = 'mock_id';
+
+type MockServerData = {
+    active_mock_id: string;
+    handleSetActiveMockId: (mock_id: string) => void;
+};
+
+const MockServerContext = React.createContext<MockServerData | null>(null);
+
+type MockServerProviderProps = {
+    children: ReactNode;
+};
+
+export const MockServerProvider = ({ children }: MockServerProviderProps) => {
+    const WS = useWS();
+    const [active_mock_id, setActiveMockId] = React.useState(localStorage.getItem('mock_id') || '');
+
+    React.useEffect(() => {
+        if (active_mock_id) {
+            WS.closeAndOpenNewConnection(getLanguage(), active_mock_id);
+        }
+    }, [active_mock_id]);
+
+    const handleSetActiveMockId = (mock_id: string) => {
+        if (!mock_id) return;
+        window.localStorage.setItem(ACTIVE_MOCK_ID, mock_id);
+        setActiveMockId(mock_id);
+    };
+
+    return (
+        <MockServerContext.Provider value={{ active_mock_id, handleSetActiveMockId }}>
+            {children}
+        </MockServerContext.Provider>
+    );
+};
+
+export const useMockServer = () => {
+    const mock_server_contect = React.useContext(MockServerContext);
+    if (!mock_server_contect) {
+        throw new Error('useUserData must be within UserDataProvider');
+    }
+
+    return mock_server_contect;
+};

packages/core/src/App/app.jsx

@@ -19,6 +19,7 @@ import { APIProvider } from '@deriv/api';
 import { StoreProvider } from '@deriv/stores';
 import WS from 'Services/ws-methods';
 import { MobxContentProvider } from 'Stores/connect';
+import { MockDialog, MockServerProvider } from './Components/mock-controls';
 import SmartTraderIFrame from 'Modules/SmartTraderIFrame';
 import BinaryBotIFrame from 'Modules/BinaryBotIFrame';
 import AppToastMessages from './Containers/app-toast-messages.jsx';
@@ -81,24 +82,27 @@ const AppWithoutTranslation = ({ root_store }) => {
                     <MobxContentProvider store={root_store}>
                         <StoreProvider store={root_store}>
                             <APIProvider>
-                                <PlatformContainer>
-                                    <Header />
-                                    <ErrorBoundary>
-                                        <AppContents>
-                                            {/* TODO: [trader-remove-client-base] */}
-                                            <Routes passthrough={platform_passthrough} />
-                                        </AppContents>
-                                    </ErrorBoundary>
-                                    <DesktopWrapper>
-                                        <Footer />
-                                    </DesktopWrapper>
-                                    <ErrorBoundary>
-                                        <AppModals />
-                                    </ErrorBoundary>
-                                    <SmartTraderIFrame />
-                                    <BinaryBotIFrame />
-                                    <AppToastMessages />
-                                </PlatformContainer>
+                                <MockServerProvider>
+                                    <PlatformContainer>
+                                        <Header />
+                                        <ErrorBoundary>
+                                            <AppContents>
+                                                {/* TODO: [trader-remove-client-base] */}
+                                                <Routes passthrough={platform_passthrough} />
+                                            </AppContents>
+                                        </ErrorBoundary>
+                                        <DesktopWrapper>
+                                            <Footer />
+                                        </DesktopWrapper>
+                                        <ErrorBoundary>
+                                            <AppModals />
+                                        </ErrorBoundary>
+                                        <SmartTraderIFrame />
+                                        <BinaryBotIFrame />
+                                        <AppToastMessages />
+                                    </PlatformContainer>
+                                    <MockDialog />
+                                </MockServerProvider>
                             </APIProvider>
                         </StoreProvider>
                     </MobxContentProvider>

packages/core/src/_common/base/socket_base.js

@@ -29,8 +29,12 @@ const BinarySocketBase = (() => {
         is_down: false,
     };
 
-    const getSocketUrl = language =>
-        `wss://${getSocketURL()}/websockets/v3?app_id=${getAppId()}&l=${language}&brand=${website_name.toLowerCase()}`;
+    const getSocketUrl = (language, is_mock_server = false) => {
+        if (is_mock_server) {
+            return 'ws://127.0.0.1:42069';
+        }
+        return `wss://${getSocketURL()}/websockets/v3?app_id=${getAppId()}&l=${language}&brand=${website_name.toLowerCase()}`;
+    };
 
     const isReady = () => hasReadyState(1);
 
@@ -40,10 +44,10 @@ const BinarySocketBase = (() => {
         binary_socket.close();
     };
 
-    const closeAndOpenNewConnection = (language = getLanguage()) => {
+    const closeAndOpenNewConnection = (language = getLanguage(), mock_id = '') => {
         close();
         is_switching_socket = true;
-        openNewConnection(language);
+        openNewConnection(language, mock_id);
     };
 
     const hasReadyState = (...states) => binary_socket && states.some(s => binary_socket.readyState === s);
@@ -55,14 +59,32 @@ const BinarySocketBase = (() => {
         client_store = client;
     };
 
-    const openNewConnection = (language = getLanguage()) => {
+    const openNewConnection = (language = getLanguage(), mock_id = '') => {
         if (wrong_app_id === getAppId()) return;
 
         if (!is_switching_socket) config.wsEvent('init');
 
         if (isClose()) {
             is_disconnect_called = false;
-            binary_socket = new WebSocket(getSocketUrl(language));
+            binary_socket = new WebSocket(getSocketUrl(language, mock_id));
+
+            if (mock_id) {
+                const originalSend = DerivAPIBasic.prototype.send;
+                const originalSubscribe = DerivAPIBasic.prototype.subscribe;
+
+                DerivAPIBasic.prototype.send = function (...args) {
+                    const modifiedArgs = [...args];
+                    modifiedArgs[0] = { ...modifiedArgs[0], mock_id };
+                    return originalSend.apply(this, modifiedArgs);
+                };
+
+                DerivAPIBasic.prototype.subscribe = function (...args) {
+                    const modifiedArgs = [...args];
+                    modifiedArgs[0] = { ...modifiedArgs[0], mock_id };
+                    return originalSubscribe.apply(this, modifiedArgs);
+                };
+            }
+
             deriv_api = new DerivAPIBasic({
                 connection: binary_socket,
                 storage: SocketCache,