(
+ (prev, current) => [...prev, ...current.contract_types],
[]
);
- contract_category.icon = contract_type_category_icon[contract_category.key];
+
+ const icon = contract_category.key
+ ? contract_type_category_icon[contract_category.key]
+ : contract_category.icon;
+
+ let contract_categories = contract_category.contract_categories;
if (search_query) {
- contract_category.contract_categories = contract_category.contract_categories
- .filter(category =>
+ contract_categories = contract_category?.contract_categories
+ ?.filter(category =>
category.contract_types.find(type =>
- type.text.toLowerCase().includes(search_query.toLowerCase())
+ type.text?.toLowerCase().includes(search_query.toLowerCase())
)
)
.map(category => ({
...category,
contract_types: category.contract_types.filter(type =>
- type.text.toLowerCase().includes(search_query.toLowerCase())
+ type.text?.toLowerCase().includes(search_query.toLowerCase())
),
}));
}
- return contract_category;
+ return {
+ ...contract_category,
+ contract_types,
+ icon,
+ contract_categories,
+ };
});
};
@@ -164,25 +185,18 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
return (selected_list_category || list_with_category()[0]).contract_categories;
};
- const selected_contract_index = () => {
- const contract_types_arr = list_with_category()?.flatMap(category => category.contract_types);
- return contract_types_arr
- .filter(type => type.value !== 'rise_fall_equal' && type.value !== 'turbosshort')
- .findIndex(type => type.value === item?.value);
- };
-
return (
@@ -191,7 +205,6 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
is_open={is_dialog_open}
item={item || { value }}
categories={list_with_category()}
- list={list}
selected={selected_category || list_with_category()[0]?.key}
onBackButtonClick={onBackButtonClick}
onClose={handleVisibility}
@@ -201,8 +214,6 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
>
{is_info_dialog_open ? (
)}
@@ -222,13 +231,4 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
);
};
-ContractTypeWidget.propTypes = {
- is_equal: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- languageChanged: PropTypes.bool,
- list: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
- name: PropTypes.string,
- onChange: PropTypes.func,
- value: PropTypes.string,
-};
-
export default ContractTypeWidget;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type.jsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type.jsx
deleted file mode 100644
index 173f67fcd0d1..000000000000
--- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import Dialog from './contract-type-dialog.jsx';
-import Display from './contract-type-display.jsx';
-import List from './contract-type-list.jsx';
-import Info from './ContractTypeInfo';
-
-const ContractType = ({ children }) => <>{children};
-
-ContractType.Dialog = Dialog;
-ContractType.Display = Display;
-ContractType.List = List;
-ContractType.Info = Info;
-
-export default ContractType;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type.tsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type.tsx
new file mode 100644
index 000000000000..8f76d5aa3783
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Dialog from './contract-type-dialog';
+import Display from './contract-type-display';
+import List from './contract-type-list';
+import Info from './ContractTypeInfo';
+
+const ContractType = ({ children }: React.PropsWithChildren<{ children: React.ReactNode }>) => <>{children};
+
+ContractType.Dialog = Dialog;
+ContractType.Display = Display;
+ContractType.List = List;
+ContractType.Info = Info;
+
+export default ContractType;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/index.js b/packages/trader/src/Modules/Trading/Components/Form/ContractType/index.js
index b32041731d1e..b638203edde2 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/index.js
+++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/index.js
@@ -1,3 +1,3 @@
-import ContractTypeWidget from './contract-type-widget.jsx';
+import ContractTypeWidget from './contract-type-widget';
export default ContractTypeWidget;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/types.ts b/packages/trader/src/Modules/Trading/Components/Form/ContractType/types.ts
new file mode 100644
index 000000000000..0a9a4ea567e6
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/types.ts
@@ -0,0 +1,21 @@
+export type TContractType = {
+ text?: string;
+ value: string;
+};
+
+export type TContractCategory = {
+ component?: JSX.Element | null;
+ contract_types: TContractType[];
+ icon?: string;
+ key: string;
+ label?: string;
+};
+
+export type TList = {
+ component?: JSX.Element | null;
+ contract_categories?: TContractCategory[];
+ contract_types?: TContractType[];
+ icon: string;
+ label?: string;
+ key: string;
+};
diff --git a/packages/trader/src/Modules/Trading/Containers/contract-type.jsx b/packages/trader/src/Modules/Trading/Containers/contract-type.jsx
index 09ea1a1a91ef..5859840db86b 100644
--- a/packages/trader/src/Modules/Trading/Containers/contract-type.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/contract-type.jsx
@@ -15,13 +15,11 @@ const Contract = observer(() => {
contract_type,
contract_types_list,
is_mobile_digit_view_selected: is_digit_view,
- is_equal,
onChange,
symbol,
} = useTraderStore();
const {
common: { current_language },
- client: { is_virtual },
} = useStore();
const list = getAvailableContractTypes(contract_types_list, unsupported_contract_types_list);
@@ -39,8 +37,6 @@ const Contract = observer(() => {
)}
* @param {array} unsupported_list - list of unsupported contract types
*/
-export const getAvailableContractTypes = (contract_types_list: TcontractTypesList, unsupported_list: string[]) => {
+export const getAvailableContractTypes = (contract_types_list: TContractTypesList, unsupported_list: string[]) => {
return Object.keys(contract_types_list)
.map(key => {
const contract_types = contract_types_list[key].categories;
@@ -131,8 +123,8 @@ export const getAvailableContractTypes = (contract_types_list: TcontractTypesLis
// )
// );
-export const findContractCategory = (list: TList[], item: TItem) =>
- list?.find(list_item => list_item.contract_types.some(i => i.value === item.value)) || ({} as TList);
+export const findContractCategory = (list: Partial, item: TItem) =>
+ list?.find(list_item => list_item?.contract_types?.some(i => i.value === item.value)) || ({} as TContractCategory);
export const getContractCategoryKey = (list: TList[], item: TItem) => findContractCategory(list, item)?.key;
diff --git a/packages/trader/src/sass/app/_common/components/contract-type-dialog.scss b/packages/trader/src/sass/app/_common/components/contract-type-dialog.scss
index 73fca5a74fe2..0c6e4a78634d 100644
--- a/packages/trader/src/sass/app/_common/components/contract-type-dialog.scss
+++ b/packages/trader/src/sass/app/_common/components/contract-type-dialog.scss
@@ -14,8 +14,8 @@
position: absolute;
right: calc(100% + 10px);
top: -66px;
- display: grid;
- grid-auto-columns: 1fr;
+ display: flex;
+ flex-direction: column;
z-index: 2;
border-radius: 4px;
background: var(--general-main-1);
@@ -106,3 +106,7 @@
.contract-type-widget__header ~ .dc-mobile-dialog__content {
height: 100%;
}
+
+.dc-mobile-dialog__contracts-modal-info {
+ overflow-y: hidden;
+}
diff --git a/packages/trader/src/sass/app/_common/components/contract-type-info.scss b/packages/trader/src/sass/app/_common/components/contract-type-info.scss
index 6435e9fd07b3..75c3c0ec66b2 100644
--- a/packages/trader/src/sass/app/_common/components/contract-type-info.scss
+++ b/packages/trader/src/sass/app/_common/components/contract-type-info.scss
@@ -4,6 +4,7 @@
height: 100%;
display: flex;
flex-direction: column;
+ margin: 0 auto;
@include mobile {
height: calc(100% - 7.4rem);
@@ -12,52 +13,19 @@
}
}
- & .dc-carousel {
- width: 100%;
-
- &__wrapper {
- padding: 0;
- }
- &__card {
- padding-bottom: 0;
- }
- &__icon {
- &--disabled {
- pointer-events: none;
- }
- }
- &__nav {
- padding: 0 1.2rem;
- }
-
- @include mobile {
- &__wrapper {
- padding: 0;
- }
- &__nav {
- margin: 1.6rem auto;
- padding: 0 2rem;
- }
- &__container {
- height: 100%;
- }
- &__box {
- height: 100%;
- }
- }
- }
&__card {
display: flex;
flex-direction: column;
justify-content: space-between;
+ height: 100%;
@include mobile {
height: 100%;
padding: 0;
+ margin-bottom: 1.6rem;
}
}
&__content {
- overflow: hidden;
/* postcss-bem-linter: ignore */
&-glossary {
&--heading {
@@ -94,6 +62,10 @@
margin-bottom: 0.8rem;
}
}
+ svg,
+ video {
+ margin-bottom: 1.6rem;
+ }
@include mobile {
/* postcss-bem-linter: ignore */
h2 {
@@ -123,12 +95,8 @@
border-radius: 4px;
text-align: center;
margin-top: 1.6rem;
- margin-bottom: 1.6rem;
@include mobile {
- display: flex;
- align-items: center;
- justify-content: center;
width: 32.8rem;
height: 16.4rem;
background-color: var(--general-section-1);
@@ -162,45 +130,13 @@
&__title {
cursor: default;
}
- &__nav {
- display: flex;
- align-items: center;
- width: 320px;
- padding: 0 2.4rem;
- overflow: hidden;
- margin-bottom: 2.4rem;
-
- &-list {
- display: inline-block;
- text-align: center;
- margin: 0 auto;
- position: relative;
- }
- &-item {
- width: 0.8rem;
- height: 0.8rem;
- border-radius: 50%;
- display: inline-block;
- margin: 0 0.8rem;
- cursor: pointer;
- background-color: var(--text-disabled);
-
- &--active {
- position: absolute;
- top: 0;
- left: 0;
- cursor: initial;
- transition: transform 0.3s linear;
- background-color: var(--brand-red-coral);
- }
- }
- }
&__icon {
cursor: pointer;
padding-right: 2.4rem;
}
&__scrollbars {
position: relative;
+ height: 100%;
&-description--active {
transition: transform 0.3s linear;
}
diff --git a/packages/trader/src/sass/app/_common/components/contract-type-widget.scss b/packages/trader/src/sass/app/_common/components/contract-type-widget.scss
index 21140788b286..cc732d49376f 100644
--- a/packages/trader/src/sass/app/_common/components/contract-type-widget.scss
+++ b/packages/trader/src/sass/app/_common/components/contract-type-widget.scss
@@ -17,7 +17,7 @@
padding: 1.6rem;
/* postcss-bem-linter: ignore */
- span[name='contract_type'] {
+ span[data-name='contract_type'] {
@include typeface(--paragraph-left-normal-black);
color: var(--text-prominent);
font-weight: bold;