= ({ trade_type }: TTradeTypeOption) => (
-
-
-
-
- {trade_type.text}
-
-
-);
+const TradeTypeOption: React.FC = ({ trade_type: { value, icon, text } }: TTradeTypeOption) => {
+ return (
+
+ {icon?.length
+ ? icon.map((ic, idx) => (
+
+ ))
+ : null}
+
+ {text}
+
+
+ );
+};
const TradeTypeSelect: React.FC = () => {
const [trade_types, setTradeTypes] = React.useState([]);
const { setFieldValue, values, validateForm } = useFormikContext();
const { quick_strategy } = useStore();
const { setValue } = quick_strategy;
- const selected = values?.tradetype;
React.useEffect(() => {
- const first_time_user_data = !(JSON.parse(localStorage?.getItem('qs-fields') as string) as TFormData);
- if (first_time_user_data) {
- setFieldValue?.('tradetype', trade_types?.[0]?.value);
- validateForm();
- setValue('tradetype', trade_types?.[0]?.value);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ if (values?.symbol) {
+ const selected = values?.tradetype;
- React.useEffect(() => {
- if (values?.symbol && selected !== '') {
const { contracts_for } = ApiHelpers.instance as unknown as TApiHelpersInstance;
const getTradeTypes = async () => {
const trade_types = await contracts_for.getTradeTypesForQuickStrategy(values?.symbol);
setTradeTypes(trade_types);
const has_selected = trade_types?.some(trade_type => trade_type.value === selected);
if (!has_selected && trade_types?.[0]?.value !== selected) {
- await setFieldValue?.('tradetype', trade_types?.[0].value || '');
+ setFieldValue?.('tradetype', trade_types?.[0].value || '');
setValue('tradetype', trade_types?.[0].value);
}
};
- debounce(async () => {
- getTradeTypes();
- }, 100)();
+ getTradeTypes();
+ validateForm();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [values?.symbol, selected]);
+ }, [values?.symbol]);
const trade_type_dropdown_options = React.useMemo(
() =>
@@ -80,7 +74,7 @@ const TradeTypeSelect: React.FC = () => {
{...field}
readOnly
inputMode='none'
- data-testid='qs_autocomplete_tradetype'
+ data-testid='dt_qs_tradetype'
autoComplete='off'
className='qs__autocomplete'
value={selected_trade_type?.text || ''}
diff --git a/src/pages/main/main.scss b/src/pages/main/main.scss
index 9a07b6e1..77871ed8 100644
--- a/src/pages/main/main.scss
+++ b/src/pages/main/main.scss
@@ -613,6 +613,9 @@
outline: none;
cursor: pointer;
margin-inline-end: 0.8rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
&.default {
background: transparent;
diff --git a/src/pages/tutorials/common/search-input/index.tsx b/src/pages/tutorials/common/search-input/index.tsx
index 63f67f83..27b2e01e 100644
--- a/src/pages/tutorials/common/search-input/index.tsx
+++ b/src/pages/tutorials/common/search-input/index.tsx
@@ -3,7 +3,7 @@ import debounce from 'debounce';
import { observer } from 'mobx-react-lite';
import { DEBOUNCE_INTERVAL_TIME } from '@/constants/bot-contents';
import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
type TSearchInput = {
faq_value: string;
diff --git a/src/pages/tutorials/dbot-tours/tour-content.tsx b/src/pages/tutorials/dbot-tours/tour-content.tsx
index 96401b09..282d6747 100644
--- a/src/pages/tutorials/dbot-tours/tour-content.tsx
+++ b/src/pages/tutorials/dbot-tours/tour-content.tsx
@@ -2,8 +2,9 @@ import { getImageLocation } from '../../../public-path';
import React from 'react';
import Text from '@/components/shared_ui/text';
import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace';
+import { localize } from '@/utils/tmp/dummy';
import { LabelPairedCircleCheckCaptionRegularIcon } from '@deriv/quill-icons';
-import { Localize, localize } from '@deriv-com/translations';
+import { Localize } from '@deriv-com/translations';
import TourSteps from './common/tour-steps';
type TJoyrideConfig = Record<
diff --git a/src/pages/tutorials/faq-content/index.tsx b/src/pages/tutorials/faq-content/index.tsx
index 503deede..a6f2c8c8 100644
--- a/src/pages/tutorials/faq-content/index.tsx
+++ b/src/pages/tutorials/faq-content/index.tsx
@@ -3,7 +3,7 @@ import Accordion from '@/components/shared_ui/accordion';
import Text from '@/components/shared_ui/text';
import { DBOT_TABS } from '@/constants/bot-contents';
import { useStore } from '@/hooks/useStore';
-import { Localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
import { TDescription } from '../tutorials.types';
type TFAQContent = {
diff --git a/src/pages/tutorials/guide-content/guide-content.tsx b/src/pages/tutorials/guide-content/guide-content.tsx
index 308c2aaf..1c733152 100644
--- a/src/pages/tutorials/guide-content/guide-content.tsx
+++ b/src/pages/tutorials/guide-content/guide-content.tsx
@@ -5,9 +5,8 @@ import Text from '@/components/shared_ui/text';
import { DBOT_TABS } from '@/constants/bot-contents';
import { useStore } from '@/hooks/useStore';
import { removeKeyValue } from '@/utils/settings';
-import { localize } from '@/utils/tmp/dummy';
import { LabelPairedPlayCaptionFillIcon } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
+import { Localize, localize } from '@deriv-com/translations';
type TGuideList = {
content?: string;
diff --git a/src/pages/tutorials/tutorials.tsx b/src/pages/tutorials/tutorials.tsx
index 3ebdd1cc..bc3186a6 100644
--- a/src/pages/tutorials/tutorials.tsx
+++ b/src/pages/tutorials/tutorials.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
import NoSearchResult from './common/no-search-result-found';
import QuickStrategyGuides from './quick-strategy-content/quick-strategy-guides';
import FAQContent from './faq-content';
diff --git a/src/stores/quick-strategy-store.ts b/src/stores/quick-strategy-store.ts
index 30178267..bed56d39 100644
--- a/src/stores/quick-strategy-store.ts
+++ b/src/stores/quick-strategy-store.ts
@@ -34,7 +34,6 @@ interface IQuickStrategyStore {
};
is_contract_dialog_open: boolean;
is_stop_bot_dialog_open: boolean;
- is_enabled_toggle_switch: boolean;
setLossThresholdWarningData: (data: TLossThresholdWarningData) => void;
setFormVisibility: (is_open: boolean) => void;
setSelectedStrategy: (strategy: string) => void;
@@ -42,7 +41,6 @@ interface IQuickStrategyStore {
onSubmit: (data: TFormData) => void;
toggleStopBotDialog: () => void;
setCurrentDurationMinMax: (min: number, max: number) => void;
- setIsEnabledToggleSwitch: () => void;
}
export default class QuickStrategyStore implements IQuickStrategyStore {
@@ -64,7 +62,6 @@ export default class QuickStrategyStore implements IQuickStrategyStore {
loss_threshold_warning_data: TLossThresholdWarningData = {
show: false,
};
- is_enabled_toggle_switch = !!this.form_data.boolean_max_stake;
constructor(root_store: RootStore) {
makeObservable(this, {
@@ -83,8 +80,6 @@ export default class QuickStrategyStore implements IQuickStrategyStore {
setLossThresholdWarningData: action,
setValue: action,
toggleStopBotDialog: action,
- is_enabled_toggle_switch: observable,
- setIsEnabledToggleSwitch: action,
});
this.root_store = root_store;
reaction(
@@ -112,10 +107,6 @@ export default class QuickStrategyStore implements IQuickStrategyStore {
};
};
- setIsEnabledToggleSwitch = () => {
- this.is_enabled_toggle_switch = !this.is_enabled_toggle_switch;
- };
-
setFormVisibility = (is_open: boolean) => {
this.is_open = is_open;
};