Merge pull request #160 from shafin-deriv/shafin/BOT-2413/chore-reset…

…-btn-chunk-load-quick-strategy chore: reset button issue, quick strategy issue and chunk loader not …
deriv-com · Nov 29, 2024 · dc9bd3f · dc9bd3f
2 parents e2cd9fd + 1d8b116
commit dc9bd3f
Show file tree

Hide file tree

Showing 16 changed files with 64 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "dependencies": {
         "@datadog/browser-rum": "^5.31.1",
         "@deriv-com/analytics": "^1.5.3",
-        "@deriv-com/auth-client": "^1.2.13",
+        "@deriv-com/auth-client": "^1.2.15",
         "@deriv-com/quill-ui": "1.18.1",
         "@deriv-com/translations": "^1.3.9",
         "@deriv-com/ui": "^1.37.1",

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -2,11 +2,11 @@ import { initSurvicate } from '../public-path';
 import { Fragment, lazy, Suspense } from 'react';
 import React from 'react';
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
+import ChunkLoader from '@/components/loader/chunk-loader';
 import RoutePromptDialog from '@/components/route-prompt-dialog';
 import CallbackPage from '@/pages/callback';
 import Endpoint from '@/pages/endpoint';
 import { initializeI18n, localize, TranslationProvider } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 import { StoreProvider } from '../hooks/useStore';
 import CoreStoreProvider from './CoreStoreProvider';
@@ -26,14 +26,7 @@ const router = createBrowserRouter(
             path='/'
             element={
                 <Suspense
-                    fallback={
-                        <div className='app-root'>
-                            <Loader />
-                            <div className='load-message'>
-                                {localize('Please wait while we connect to the server...')}
-                            </div>
-                        </div>
-                    }
+                    fallback={<ChunkLoader message={localize('Please wait while we connect to the server...')} />}
                 >
                     <TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
                         <StoreProvider>

diff --git a/src/app/CoreStoreProvider.tsx b/src/app/CoreStoreProvider.tsx
@@ -90,7 +90,11 @@ const CoreStoreProvider: React.FC<{ children: React.ReactNode }> = observer(({ c
             const data = res.data as TSocketResponseData<'balance'>;
             const { msg_type, error } = data;
 
-            if (error?.code === 'AuthorizationRequired') {
+            if (
+                error?.code === 'AuthorizationRequired' ||
+                error?.code === 'DisabledClient' ||
+                error?.code === 'InvalidToken'
+            ) {
                 await oAuthLogout();
             }
 

diff --git a/src/app/app-content.jsx b/src/app/app-content.jsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { ToastContainer } from 'react-toastify';
 import useLiveChat from '@/components/chat/useLiveChat';
+import ChunkLoader from '@/components/loader/chunk-loader';
 import { getUrlBase } from '@/components/shared';
 import TncStatusUpdateModal from '@/components/tnc-status-update-modal';
 import TransactionDetailsModal from '@/components/transaction-details';
@@ -15,7 +16,6 @@ import initDatadog from '@/utils/datadog';
 import { setSmartChartsPublicPath } from '@deriv/deriv-charts';
 import { ThemeProvider } from '@deriv-com/quill-ui';
 import { localize } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
 import Audio from '../components/audio';
 import BlocklyLoading from '../components/blockly-loading';
 import BotStopped from '../components/bot-stopped';
@@ -159,10 +159,7 @@ const AppContent = observer(() => {
     if (common?.error) return null;
 
     return is_loading ? (
-        <div className='app-root'>
-            <Loader />
-            <div>{localize('Please wait while we connect to the server...')}</div>
-        </div>
+        <ChunkLoader message={localize('Initializing your account...')} />
     ) : (
         <>
             <ThemeProvider theme={is_dark_mode_on ? 'dark' : 'light'}>

diff --git a/src/app/app-root.scss b/src/app/app-root.scss
@@ -1,11 +1,12 @@
 .app-root {
     height: 100vh;
+    width: 100vw;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
 
     .load-message {
-        margin-top: 9rem;
+        margin-top: 6rem;
     }
 }
diff --git a/src/app/app-root.tsx b/src/app/app-root.tsx
@@ -2,22 +2,17 @@ import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import ErrorBoundary from '@/components/error-component/error-boundary';
 import ErrorComponent from '@/components/error-component/error-component';
+import ChunkLoader from '@/components/loader/chunk-loader';
 import TradingAssesmentModal from '@/components/trading-assesment-modal';
 import { api_base } from '@/external/bot-skeleton';
 import { useStore } from '@/hooks/useStore';
 import { localize } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
 import './app-root.scss';
 
 const AppContent = lazy(() => import('./app-content'));
 
 const AppRootLoader = () => {
-    return (
-        <div className='app-root'>
-            <Loader />
-            <div>{localize('Please wait while we connect to the server...')}</div>
-        </div>
-    );
+    return <ChunkLoader message={localize('Initializing Deriv Bot...')} />;
 };
 
 const ErrorComponentWrapper = observer(() => {

diff --git a/src/components/blockly-loading/blockly-loading.tsx b/src/components/blockly-loading/blockly-loading.tsx
@@ -11,6 +11,7 @@ const BlocklyLoading = observer(() => {
             {is_loading && (
                 <div className='bot__loading' data-testid='blockly-loader'>
                     <Loader />
+                    <div>Loading Blockly...</div>
                 </div>
             )}
         </>

diff --git a/src/components/layout/header/account-switcher.tsx b/src/components/layout/header/account-switcher.tsx
@@ -119,7 +119,9 @@ const RenderAccountItems = ({
                                         if (!account.is_disabled) switchAccount(account.loginid);
                                     }}
                                     onResetBalance={
-                                        isVirtual && activeLoginId === account.loginid
+                                        isVirtual &&
+                                        activeLoginId === account.loginid &&
+                                        Number(account.balance) !== 10000
                                             ? () => {
                                                   api_base?.api?.send({
                                                       topup_virtual: 1,

diff --git a/src/components/layout/header/header.scss b/src/components/layout/header/header.scss
@@ -73,6 +73,10 @@
                 border-width: 1px;
                 height: 2.4rem;
                 min-width: 4.8rem;
+
+                span {
+                    color: var(--text-prominent) !important;
+                }
             }
         }
     }

diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -35,7 +35,7 @@ const Layout = () => {
             <Body>
                 <Outlet />
             </Body>
-            {isDesktop && <Footer />}
+            {!isCallbackPage && isDesktop && <Footer />}
         </div>
     );
 };

diff --git a/src/components/loader/chunk-loader.tsx b/src/components/loader/chunk-loader.tsx
@@ -0,0 +1,10 @@
+import { Loader } from '@deriv-com/ui';
+
+export default function ChunkLoader({ message }: { message: string }) {
+    return (
+        <div className='app-root'>
+            <Loader />
+            <div className='load-message'>{message}</div>
+        </div>
+    );
+}
diff --git a/src/pages/bot-builder/quick-strategy/quick-strategy.tsx b/src/pages/bot-builder/quick-strategy/quick-strategy.tsx
@@ -43,8 +43,7 @@ const getErrorMessage = (dir: 'MIN' | 'MAX', value: number, type = 'DEFAULT') =>
 
 const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children }) => {
     const { quick_strategy } = useStore();
-    const { selected_strategy, form_data, current_duration_min_max, initializeLossThresholdWarningData } =
-        quick_strategy;
+    const { selected_strategy, form_data, initializeLossThresholdWarningData } = quick_strategy;
     const config: TConfigItem[][] = STRATEGIES()[selected_strategy]?.fields;
     const [dynamic_schema, setDynamicSchema] = useState(Yup.object().shape({}));
     const is_mounted = useRef(true);
@@ -112,6 +111,7 @@ const FormikWrapper: React.FC<TFormikWrapper> = observer(({ children }) => {
                         let min_error = getErrorMessage('MIN', min);
                         let max_error = getErrorMessage('MAX', max);
                         let integer_error_message = '';
+                        const { current_duration_min_max } = quick_strategy;
                         if (field.name === 'duration' && current_duration_min_max) {
                             min = current_duration_min_max.min;
                             max = current_duration_min_max.max;

diff --git a/src/pages/bot-builder/quick-strategy/selects/duration-type.tsx b/src/pages/bot-builder/quick-strategy/selects/duration-type.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import Autocomplete from '@/components/shared_ui/autocomplete';
@@ -16,7 +16,7 @@ const DurationUnit: React.FC<TDurationUnit> = ({ attached }: TDurationUnit) => {
     const [prevSymbol, setPrevSymbol] = React.useState('');
     const [prevTradeType, setPrevTradeType] = React.useState('');
     const { quick_strategy } = useStore();
-    const { setValue, setCurrentDurationMinMax } = quick_strategy;
+    const { setValue, setCurrentDurationMinMax, current_duration_min_max } = quick_strategy;
     const { setFieldValue, validateForm, values } = useFormikContext<TFormData>();
     const { symbol, tradetype } = values;
 
@@ -51,6 +51,10 @@ const DurationUnit: React.FC<TDurationUnit> = ({ attached }: TDurationUnit) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [symbol, tradetype]);
 
+    useEffect(() => {
+        validateForm();
+    }, [current_duration_min_max, validateForm]);
+
     return (
         <div
             className={classNames('qs__form__field qs__form__field__input', {

diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/info-panel.tsx
@@ -37,7 +37,7 @@ const InfoPanel = observer(() => {
     const renderInfo = () => (
         <div className='db-info-panel'>
             <div data-testid='close-icon' className='db-info-panel__close-action' onClick={handleClose}>
-                <LegacyClose1pxIcon height='18px' width='18px' />
+                <LegacyClose1pxIcon height='18px' width='18px' fill='var(--text-prominent)' />
             </div>
 
             {SIDEBAR_INTRO().map(sidebar_item => {

diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
@@ -2,6 +2,7 @@ import React, { lazy, Suspense, useEffect } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useLocation, useNavigate } from 'react-router-dom';
+import ChunkLoader from '@/components/loader/chunk-loader';
 import DesktopWrapper from '@/components/shared_ui/desktop-wrapper';
 import Dialog from '@/components/shared_ui/dialog';
 import MobileWrapper from '@/components/shared_ui/mobile-wrapper';
@@ -209,7 +210,7 @@ const AppWrapper = observer(() => {
                                     : 'id-charts'
                             }
                         >
-                            <Suspense fallback={<div>Loading...</div>}>
+                            <Suspense fallback={<ChunkLoader message={localize('Please wait, loading chart...')} />}>
                                 <Chart show_digits_stats={false} />
                             </Suspense>
                         </div>
@@ -228,7 +229,9 @@ const AppWrapper = observer(() => {
                             id='id-tutorials'
                         >
                             <div className='tutorials-wrapper'>
-                                <Suspense fallback={<div>Loading...</div>}>
+                                <Suspense
+                                    fallback={<ChunkLoader message={localize('Please wait, loading tutorials...')} />}
+                                >
                                     <Tutorial handleTabChange={handleTabChange} />
                                 </Suspense>
                             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,7 +35,7 @@ const Layout = () => { @@
                 <Body>
                     <Outlet />
                 </Body>
-                {isDesktop && <Footer />}
+                {!isCallbackPage && isDesktop && <Footer />}
             </div>
         );
     };
@@ Expand Down @@