Merge pull request #143 from shafin-deriv/shafin/BOT-2438/fix-unable-…

…to-run-real

fix: unable to run bot in real account

src/components/flyout/flyout.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
+import GTM from '@/utils/gtm';
 import { help_content_config } from '@/utils/help-content/help-content.config';
 import { LabelPairedCircleExclamationCaptionFillIcon } from '@deriv/quill-icons';
 import { localize } from '@deriv-com/translations';
@@ -182,7 +183,6 @@ const FlyoutContent = (props: TFlyoutContent) => {
 
 const Flyout = observer(() => {
     const { flyout, flyout_help } = useStore();
-    const { gtm } = useStore();
     const { active_helper, initFlyoutHelp, setHelpContent } = flyout_help;
     const {
         flyout_content,
@@ -197,15 +197,13 @@ const Flyout = observer(() => {
         first_get_variable_block_index,
     } = flyout;
 
-    const { pushDataLayer } = gtm;
-
     React.useEffect(() => {
         onMount();
         return () => onUnmount();
     }, [onMount, onUnmount]);
 
     if (is_visible && is_search_flyout) {
-        pushDataLayer({ event: 'dbot_search_results', value: true });
+        GTM?.pushDataLayer?.({ event: 'dbot_search_results', value: true });
     }
 
     const total_result = Object.keys(flyout_content).length;

src/components/layout/header/header.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
 import { generateOAuthURL, standalone_routes } from '@/components/shared';
@@ -10,7 +9,6 @@ import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons/Standalone';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Header, useDevice, Wrapper } from '@deriv-com/ui';
 import { Tooltip } from '@deriv-com/ui';
-import { URLUtils } from '@deriv-com/utils';
 import { AppLogo } from '../app-logo';
 import AccountsInfoLoader from './account-info-loader';
 import AccountSwitcher from './account-switcher';
@@ -20,8 +18,6 @@ import MobileMenu from './mobile-menu';
 import PlatformSwitcher from './platform-switcher';
 import './header.scss';
 
-const { getOauthURL } = URLUtils;
-
 const AppHeader = observer(() => {
     const { isDesktop } = useDevice();
     const { isAuthorizing, activeLoginid } = useApiBase();

src/pages/bot-builder/quick-strategy/form.tsx

@@ -190,7 +190,7 @@ const QuickStrategyForm = observer(() => {
                             case 'contract_type':
                                 return <ContractTypeSelect {...field} key={key} name={field.name as string} />;
                             case 'growth_rate':
-                                return <GrowthRateSelect {...field} name={field.name as string} />;
+                                return <GrowthRateSelect {...field} key={key} name={field.name as string} />;
                             case 'sell_conditions':
                                 return <SellConditions {...field} key={key} />;
                             default:

src/pages/bot-builder/quick-strategy/selects/growth-rate-type.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import debounce from 'debounce';
 import { Field, FieldProps, useFormikContext } from 'formik';
@@ -8,14 +8,9 @@ import { TItem } from '@/components/shared_ui/dropdown-list';
 import Text from '@/components/shared_ui/text';
 import { api_base } from '@/external/bot-skeleton';
 import { requestProposalForQS } from '@/external/bot-skeleton/scratch/accumulators-proposal-handler';
-import { CONNECTION_STATUS } from '@/external/bot-skeleton/services/api/observables/connection-status-stream';
-import { useApiBase } from '@/hooks/useApiBase';
 import { useStore } from '@/hooks/useStore';
 import { localize } from '@deriv-com/translations';
 import { TDropdownItems, TFormData } from '../types';
-// TODO need to check the currency
-// import { currency } from '@deriv/components/src/components/icon/icons-manifest';
-const currency = 'USD';
 
 type TContractTypes = {
     name: string;
@@ -38,18 +33,9 @@ const GrowthRateSelect: React.FC<TContractTypes> = observer(({ name }) => {
     const { is_desktop } = ui;
     const [list, setList] = React.useState<TDropdownItems[]>([]);
     const { quick_strategy } = useStore();
-    const [ws, setWs] = useState(null);
     const { setValue, setAdditionalData } = quick_strategy;
     const { setFieldValue, values, setFieldError, errors } = useFormikContext<TFormData>();
 
-    const { connectionStatus } = useApiBase();
-
-    useEffect(() => {
-        if (connectionStatus === CONNECTION_STATUS.OPENED) {
-            setWs(api_base.api);
-        }
-    }, [connectionStatus]);
-
     const prev_proposal_payload = React.useRef<TProposalRequest | null>(null);
     const ref_max_payout = React.useRef<TProposalRequest | null>(null);
     const prev_error = React.useRef<{
@@ -82,7 +68,7 @@ const GrowthRateSelect: React.FC<TContractTypes> = observer(({ name }) => {
             setFieldError('take_profit', prev_error.current?.take_profit ?? undefined);
             setFieldError('tick_count', undefined);
         }
-    }, [values, errors.take_profit, errors.tick_count, values.boolean_tick_count]);
+    }, [values, errors.take_profit, errors.tick_count, values.boolean_tick_count, setFieldValue, setFieldError]);
 
     const validateMinMaxForAccumulators = async values => {
         const growth_rate = Number(values.growth_rate);
@@ -100,7 +86,7 @@ const GrowthRateSelect: React.FC<TContractTypes> = observer(({ name }) => {
 
         prev_proposal_payload.current = { ...request_proposal, boolean_tick_count: values.boolean_tick_count };
         try {
-            const response = await requestProposalForQS(request_proposal, ws);
+            const response = await requestProposalForQS(request_proposal, api_base.api);
             const min_ticks = 1;
             const max_ticks = response?.proposal?.validation_params?.max_ticks;
             let min_error = '';
@@ -159,13 +145,22 @@ const GrowthRateSelect: React.FC<TContractTypes> = observer(({ name }) => {
             prev_proposal_payload.current?.symbol !== values.symbol ||
             prev_proposal_payload.current?.amount !== values.stake ||
             prev_proposal_payload.current?.limit_order?.take_profit !== values.take_profit ||
-            prev_proposal_payload.current?.currency !== client.currency ||
+            prev_proposal_payload.current?.currency !== client?.currency ||
             prev_proposal_payload.current?.growth_rate !== values.growth_rate ||
             prev_proposal_payload.current?.boolean_tick_count !== values.boolean_tick_count
         ) {
             debounceChange(values);
         }
-    }, [values.take_profit, values.tick_count, values.stake, values.growth_rate, currency, values.boolean_tick_count]);
+    }, [
+        values.take_profit,
+        values.tick_count,
+        values.stake,
+        values.growth_rate,
+        client?.currency,
+        values.boolean_tick_count,
+        values,
+        debounceChange,
+    ]);
 
     const handleChange = async (value: string) => {
         setFieldValue?.(name, value);

src/stores/client-store.ts

@@ -15,7 +15,7 @@ export default class ClientStore {
     loginid = '';
     account_list: TAuthData['account_list'] = [];
     balance = '0';
-    currency = 'USD';
+    currency = 'AUD';
     is_logged_in = false;
     account_status: GetAccountStatus | undefined;
     account_settings: GetSettings | undefined;

src/stores/flyout-store.ts

@@ -158,7 +158,7 @@ export default class FlyoutStore implements IFlyoutStore {
 
         this.block_listeners.push(
             window?.Blockly?.browserEvents?.conditionalBind(block_svg_root, 'mousedown', null, event => {
-                GTM.pushDataLayer({
+                GTM?.pushDataLayer?.({
                     event: 'dbot_drag_block',
                     block_type: block.type,
                 });

src/stores/root-store.ts

@@ -52,9 +52,6 @@ export default class RootStore {
         client: {},
         common: {},
     };
-    gtm = {
-        pushDataLayer: () => {},
-    };
 
     constructor(dbot: unknown) {
         this.dbot = dbot;

src/stores/run-panel-store.ts

@@ -437,7 +437,7 @@ export default class RunPanelStore {
         let disposeIsSocketOpenedListener: (() => void) | undefined, disposeLogoutListener: (() => void) | undefined;
 
         const registerIsSocketOpenedListener = () => {
-            // TODO: fix notifications and is_socket_opened
+            // TODO: fix notifications
             if (common.is_socket_opened) {
                 disposeIsSocketOpenedListener = reaction(
                     () => client.loginid,
@@ -575,7 +575,7 @@ export default class RunPanelStore {
                 const { is_virtual } = this.core.client;
 
                 if (!is_virtual && buy) {
-                    this.core.gtm.pushDataLayer({ event: 'dbot_purchase', buy_price: buy.buy_price });
+                    GTM?.pushDataLayer?.({ event: 'dbot_purchase', buy_price: buy.buy_price });
                 }
 
                 break;

src/stores/toolbox-store.ts

@@ -1,5 +1,6 @@
 import { action, makeObservable, observable, reaction } from 'mobx';
 import { scrollWorkspace } from '@/external/bot-skeleton';
+import GTM from '@/utils/gtm';
 import { TStores } from '@deriv/stores/types';
 import { localize } from '@deriv-com/translations';
 import RootStore from './root-store';
@@ -61,8 +62,7 @@ export default class ToolboxStore {
                 if (is_toolbox_open) {
                     //this.adjustWorkspace();
                     // Emit event to GTM
-                    const { gtm } = this.core;
-                    gtm.pushDataLayer({ event: 'dbot_toolbox_visible', value: true });
+                    GTM?.pushDataLayer?.({ event: 'dbot_toolbox_visible', value: true });
                 }
             }
         );

src/utils/gtm.ts

@@ -1,14 +1,8 @@
 import { TStatistics } from '@/components/transaction-details/transaction-details.types';
 import { ProposalOpenContract } from '@deriv/api-types';
 
-declare global {
-    interface Window {
-        dataLayer?: any[];
-    }
-}
-
 const GTM = (() => {
-    const pushDataLayer = (data: Record<string, unknown>): void => {
+    const pushDataLayer = (data: { [key: string]: string | number | boolean; event: string }): void => {
         window.dataLayer?.push(data);
     };
 
@@ -55,7 +49,7 @@ const GTM = (() => {
     const onTransactionClosed = (contract: ProposalOpenContract): void => {
         const data = {
             event: 'dbot_run_transaction',
-            reference_id: contract.contract_id,
+            reference_id: contract?.contract_id ?? '',
         };
         pushDataLayer(data);
     };