Revert "[DTRA] Ahmad/FEQ-857/Worldwide launch smartchart2 (deriv-com#…

…11195)" (deriv-com#12053) * Revert "[DTRA] Ahmad/FEQ-857/Worldwide launch smartchart2 (deriv-com#11195)" This reverts commit cd5c2e1. * fix: test case
shaheer-deriv · Dec 6, 2023 · 2c67343 · 2c67343
1 parent eeea94b
commit 2c67343
Show file tree

Hide file tree

Showing 44 changed files with 1,663 additions and 180 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
@@ -70,7 +70,8 @@
         "@datadog/browser-logs": "^4.36.0",
         "@deriv/bot-skeleton": "^1.0.0",
         "@deriv/components": "^1.0.0",
-        "@deriv/deriv-charts": "^2.0.0-beta.15",
+        "@deriv/deriv-charts": "1.4.2",
+        "@deriv/deriv-charts-beta": "npm:@deriv/deriv-charts@^2.0.0-beta.14",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

diff --git a/packages/bot-web-ui/src/components/chart/__tests__/chart.spec.tsx b/packages/bot-web-ui/src/components/chart/__tests__/chart.spec.tsx
@@ -12,7 +12,6 @@ jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => ({
     saveRecentWorkspace: jest.fn(),
     unHighlightAllBlocks: jest.fn(),
 }));
-
 jest.mock('@deriv/bot-skeleton/src/scratch/hooks/block_svg', () => jest.fn());
 
 jest.mock('../toolbar-widgets', () => jest.fn(() => <div>Mocked ToolbarWidgets</div>));
@@ -31,6 +30,19 @@ jest.mock('../v1', () => ({
     ChartTitle: jest.fn(() => <div>Mocked ChartTitle</div>),
 }));
 
+jest.mock('../v2', () => ({
+    ...jest.requireActual('../v2'),
+    __esModule: true,
+    SmartChartBeta: jest.fn(({ children, chartStatusListener, toolbarWidget, topWidgets }) => (
+        <div>
+            {children}
+            {chartStatusListener()}
+            {toolbarWidget()}
+            {topWidgets()}
+        </div>
+    )),
+}));
+
 describe('Chart', () => {
     let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element, mock_DBot_store: RootStore | undefined;
     const mock_store = mockStore({});
@@ -46,7 +58,18 @@ describe('Chart', () => {
         );
     });
 
+    it('renders Chart component with SmartChartBeta component', async () => {
+        mock_store.client.is_beta_chart = true;
+        const { container } = render(<Chart show_digits_stats={false} />, {
+            wrapper,
+        });
+        await waitFor(() => {
+            expect(container).toBeInTheDocument();
+        });
+    });
+
     it('renders Chart component with SmartChart component', async () => {
+        mock_store.client.is_beta_chart = false;
         const { container } = render(<Chart show_digits_stats={false} />, {
             wrapper,
         });

diff --git a/packages/bot-web-ui/src/components/chart/chart.tsx b/packages/bot-web-ui/src/components/chart/chart.tsx
@@ -4,10 +4,11 @@ import { observer, useStore } from '@deriv/stores';
 import { useDBotStore } from 'Stores/useDBotStore';
 import ToolbarWidgets from './toolbar-widgets';
 import { ChartTitle, SmartChart } from './v1';
+import { ChartTitleBeta, SmartChartBeta } from './v2';
 
 const Chart = observer(({ show_digits_stats }: { show_digits_stats: boolean }) => {
     const barriers: [] = [];
-    const { common, ui } = useStore();
+    const { client, common, ui } = useStore();
     const { chart_store, run_panel, dashboard } = useDBotStore();
 
     const {
@@ -46,32 +47,68 @@ const Chart = observer(({ show_digits_stats }: { show_digits_stats: boolean }) =
                 'dashboard__chart-wrapper--modal': is_chart_modal_visible && !is_mobile,
             })}
         >
-            <SmartChart
-                id='dbot'
-                barriers={barriers}
-                showLastDigitStats={show_digits_stats}
-                chartControlsWidgets={null}
-                enabledChartFooter={false}
-                chartStatusListener={(v: boolean) => setChartStatus(!v)}
-                toolbarWidget={() => (
-                    <ToolbarWidgets updateChartType={updateChartType} updateGranularity={updateGranularity} />
-                )}
-                chartType={chart_type}
-                isMobile={is_mobile}
-                enabledNavigationWidget={is_desktop}
-                granularity={granularity}
-                requestAPI={wsSendRequest}
-                requestForget={wsForget}
-                requestForgetStream={wsForgetStream}
-                requestSubscribe={wsSubscribe}
-                settings={settings}
-                symbol={symbol}
-                topWidgets={() => <ChartTitle onChange={onSymbolChange} />}
-                isConnectionOpened={is_socket_opened}
-                getMarketsOrder={getMarketsOrder}
-                isLive
-                leftMargin={80}
-            />
+            {client.is_beta_chart && (
+                <SmartChartBeta
+                    id='dbot'
+                    barriers={barriers}
+                    showLastDigitStats={show_digits_stats}
+                    chartControlsWidgets={null}
+                    enabledChartFooter={false}
+                    chartStatusListener={v => setChartStatus(!v)}
+                    toolbarWidget={() => (
+                        <ToolbarWidgets
+                            is_beta_chart={true}
+                            updateChartType={updateChartType}
+                            updateGranularity={updateGranularity}
+                        />
+                    )}
+                    chartType={chart_type}
+                    isMobile={is_mobile}
+                    enabledNavigationWidget={is_desktop}
+                    granularity={granularity}
+                    requestAPI={wsSendRequest}
+                    requestForget={wsForget}
+                    requestForgetStream={wsForgetStream}
+                    requestSubscribe={wsSubscribe}
+                    settings={settings}
+                    symbol={symbol}
+                    topWidgets={() => <ChartTitleBeta onChange={onSymbolChange} />}
+                    isConnectionOpened={is_socket_opened}
+                    getMarketsOrder={getMarketsOrder}
+                    isLive={true}
+                    leftMargin={80}
+                />
+            )}
+            {!client.is_beta_chart && (
+                <SmartChart
+                    id='dbot'
+                    barriers={barriers}
+                    showLastDigitStats={show_digits_stats}
+                    chartControlsWidgets={null}
+                    enabledChartFooter={false}
+                    chartStatusListener={v => setChartStatus(!v)}
+                    toolbarWidget={() => (
+                        <ToolbarWidgets
+                            is_beta_chart={false}
+                            updateChartType={updateChartType}
+                            updateGranularity={updateGranularity}
+                        />
+                    )}
+                    chartType={chart_type}
+                    isMobile={is_mobile}
+                    enabledNavigationWidget={is_desktop}
+                    granularity={granularity}
+                    requestAPI={wsSendRequest}
+                    requestForget={wsForget}
+                    requestForgetStream={wsForgetStream}
+                    requestSubscribe={wsSubscribe}
+                    settings={settings}
+                    symbol={symbol}
+                    topWidgets={() => <ChartTitle onChange={onSymbolChange} />}
+                    isConnectionOpened={is_socket_opened}
+                    getMarketsOrder={getMarketsOrder}
+                />
+            )}
         </div>
     );
 });

diff --git a/packages/bot-web-ui/src/components/chart/toolbar-widgets.tsx b/packages/bot-web-ui/src/components/chart/toolbar-widgets.tsx
@@ -1,25 +1,52 @@
 import React from 'react';
 import { isDesktop, isMobile } from '@deriv/shared';
 import { ChartMode, DrawTools, Share, StudyLegend, ToolbarWidget, Views } from './v1';
+import { ChartModeBeta, DrawToolsBeta, ShareBeta, StudyLegendBeta, ToolbarWidgetBeta, ViewsBeta } from './v2';
 
 type TToolbarWidgetsProps = {
+    is_beta_chart?: boolean;
     updateChartType: (chart_type: string) => void;
     updateGranularity: (updateGranularity: number) => void;
 };
 
-const ToolbarWidgets = ({ updateChartType, updateGranularity }: TToolbarWidgetsProps) => {
+const ToolbarWidgets = ({ is_beta_chart, updateChartType, updateGranularity }: TToolbarWidgetsProps) => {
     return (
-        <ToolbarWidget position={isMobile() ? 'bottom' : null}>
-            <ChartMode portalNodeId='modal_root' onChartType={updateChartType} onGranularity={updateGranularity} />
-            {isDesktop() && (
-                <>
-                    <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
-                    <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
-                    <DrawTools portalNodeId='modal_root' />
-                    <Share portalNodeId='modal_root' />
-                </>
+        <>
+            {is_beta_chart && (
+                <ToolbarWidgetBeta position={isMobile() ? 'bottom' : null}>
+                    <ChartModeBeta
+                        portalNodeId='modal_root'
+                        onChartType={updateChartType}
+                        onGranularity={updateGranularity}
+                    />
+                    {isDesktop() && (
+                        <>
+                            <StudyLegendBeta portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+                            <ViewsBeta portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+                            <DrawToolsBeta portalNodeId='modal_root' />
+                            <ShareBeta portalNodeId='modal_root' />
+                        </>
+                    )}
+                </ToolbarWidgetBeta>
             )}
-        </ToolbarWidget>
+            {!is_beta_chart && (
+                <ToolbarWidget position={isMobile() ? 'bottom' : null}>
+                    <ChartMode
+                        portalNodeId='modal_root'
+                        onChartType={updateChartType}
+                        onGranularity={updateGranularity}
+                    />
+                    {isDesktop() && (
+                        <>
+                            <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+                            <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+                            <DrawTools portalNodeId='modal_root' />
+                            <Share portalNodeId='modal_root' />
+                        </>
+                    )}
+                </ToolbarWidget>
+            )}
+        </>
     );
 };
 

diff --git a/packages/bot-web-ui/src/components/chart/v2.ts b/packages/bot-web-ui/src/components/chart/v2.ts
@@ -0,0 +1,42 @@
+import React from 'react';
+import { getUrlBase, moduleLoader } from '@deriv/shared';
+
+let module: Promise<any> | undefined;
+
+const init = () => {
+    module = moduleLoader(() => {
+        // TODO: Proper fix for types in smartcharts
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return import(/* webpackChunkName: "smart_chart_beta" */ '@deriv/deriv-charts-beta');
+    });
+
+    module.then(({ setSmartChartsPublicPath }: { setSmartChartsPublicPath: (path: string) => void }) => {
+        setSmartChartsPublicPath(getUrlBase('/js/smartchartsbeta/'));
+    });
+};
+
+// React.Lazy expects a default export for the component
+// SmartChart library exports many components
+const load = (component_name: string) => () => {
+    if (!module) {
+        init();
+    }
+    return module!.then(module => {
+        return { default: module[component_name] };
+    });
+};
+
+export const SmartChartBeta = React.lazy(load('SmartChart'));
+export const ChartTitleBeta = React.lazy(load('ChartTitle'));
+
+export const ChartSizeBeta = React.lazy(load('ChartSize'));
+export const ChartModeBeta = React.lazy(load('ChartMode'));
+export const DrawToolsBeta = React.lazy(load('DrawTools'));
+export const ShareBeta = React.lazy(load('Share'));
+export const StudyLegendBeta = React.lazy(load('StudyLegend'));
+export const ViewsBeta = React.lazy(load('Views'));
+export const ToolbarWidgetBeta = React.lazy(load('ToolbarWidget'));
+
+export const FastMarkerBeta = React.lazy(load('FastMarker'));
+export const RawMarkerBeta = React.lazy(load('RawMarker'));
diff --git a/packages/bot-web-ui/src/stores/chart-store.js b/packages/bot-web-ui/src/stores/chart-store.js
@@ -96,6 +96,7 @@ export default class ChartStore {
     }
 
     saveToLocalStorage() {
+        if (!this.root_store?.app?.core?.client?.is_beta_chart) return;
         LocalStore.set(
             'bot.chart_props',
             JSON.stringify({
@@ -107,6 +108,8 @@ export default class ChartStore {
     }
 
     restoreFromStorage() {
+        if (!this.root_store?.app?.core?.client?.is_beta_chart) return;
+
         try {
             const props = LocalStore.get('bot.chart_props');
 

diff --git a/packages/components/src/components/contract-card/result-overlay/result-overlay.scss b/packages/components/src/components/contract-card/result-overlay/result-overlay.scss
@@ -53,6 +53,14 @@
             color: var(--text-general);
         }
     }
+    &__payout {
+        &--won {
+            color: var(--text-profit-success);
+        }
+        &--lost {
+            color: var(--text-loss-danger);
+        }
+    }
     &__positions-overlay {
         max-width: 218px;
     }