diff --git a/packages/core/src/public/images/common/static_images/accumulator_description_dark.mp4 b/packages/core/src/public/images/common/static_images/accumulator_description_dark.mp4 new file mode 100644 index 000000000000..3f2677dbefdb Binary files /dev/null and b/packages/core/src/public/images/common/static_images/accumulator_description_dark.mp4 differ diff --git a/packages/core/src/public/images/common/static_images/accumulator_description_dark.webm b/packages/core/src/public/images/common/static_images/accumulator_description_dark.webm new file mode 100644 index 000000000000..1a97a9c69220 Binary files /dev/null and b/packages/core/src/public/images/common/static_images/accumulator_description_dark.webm differ diff --git a/packages/core/src/public/images/common/static_images/accumulator_description_light.mp4 b/packages/core/src/public/images/common/static_images/accumulator_description_light.mp4 new file mode 100644 index 000000000000..63cc64c25cca Binary files /dev/null and b/packages/core/src/public/images/common/static_images/accumulator_description_light.mp4 differ diff --git a/packages/core/src/public/images/common/static_images/accumulator_description_light.webm b/packages/core/src/public/images/common/static_images/accumulator_description_light.webm new file mode 100644 index 000000000000..8458b6252091 Binary files /dev/null and b/packages/core/src/public/images/common/static_images/accumulator_description_light.webm differ diff --git a/packages/trader/src/Assets/SvgComponents/trade_explanations/img-accumulator.svg b/packages/trader/src/Assets/SvgComponents/trade_explanations/img-accumulator.svg deleted file mode 100644 index 3288abe893c8..000000000000 --- a/packages/trader/src/Assets/SvgComponents/trade_explanations/img-accumulator.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/trader/src/Assets/Trading/Categories/contract-type-description-video.tsx b/packages/trader/src/Assets/Trading/Categories/contract-type-description-video.tsx new file mode 100644 index 000000000000..7eda40b8a33a --- /dev/null +++ b/packages/trader/src/Assets/Trading/Categories/contract-type-description-video.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { localize } from '@deriv/translations'; +import { getUrlBase, isMobile } from '@deriv/shared'; +import { useStore } from '@deriv/stores'; + +const ContractTypeDescriptionVideo = ({ selected_contract_type }: { selected_contract_type: string }) => { + const { ui } = useStore(); + const { is_dark_mode_on: is_dark_theme } = ui; + const getVideoSource = React.useCallback( + (extension: 'mp4' | 'webm') => { + return getUrlBase( + `/public/images/common/${selected_contract_type}_description${ + is_dark_theme ? '_dark' : '_light' + }.${extension}` + ); + }, + [is_dark_theme, selected_contract_type] + ); + + // memoize file paths for videos and open the modal only after we get them + const mp4_src = React.useMemo(() => getVideoSource('mp4'), [getVideoSource]); + const webm_src = React.useMemo(() => getVideoSource('webm'), [getVideoSource]); + + if (selected_contract_type !== 'accumulator') return null; + return ( + + ); +}; + +export default React.memo(ContractTypeDescriptionVideo); diff --git a/packages/trader/src/Assets/Trading/Categories/trade-categories-gif.jsx b/packages/trader/src/Assets/Trading/Categories/trade-categories-gif.jsx index 1eff98d0f0c4..6d94956deec6 100644 --- a/packages/trader/src/Assets/Trading/Categories/trade-categories-gif.jsx +++ b/packages/trader/src/Assets/Trading/Categories/trade-categories-gif.jsx @@ -14,13 +14,13 @@ import ImageReset from 'Assets/SvgComponents/trade_explanations/img-reset.svg'; import ImageRiseFall from 'Assets/SvgComponents/trade_explanations/img-rise-fall.svg'; import ImageRunHighLow from 'Assets/SvgComponents/trade_explanations/img-run-high-low.svg'; import ImageSpread from 'Assets/SvgComponents/trade_explanations/img-spread.svg'; -import ImageAccumulator from 'Assets/SvgComponents/trade_explanations/img-accumulator.svg'; import ImageTickHighLow from 'Assets/SvgComponents/trade_explanations/img-tick-high-low.svg'; import ImageTouch from 'Assets/SvgComponents/trade_explanations/img-touch.svg'; import ImageVanilla from 'Assets/SvgComponents/trade_explanations/img-vanilla.svg'; +import ContractTypeDescriptionVideo from './contract-type-description-video'; // TODO: Replace static image svgs with themed GIFs or animated SVGs -const TradeCategoriesGIF = ({ category }) => { +const TradeCategoriesGIF = ({ category, selected_contract_type }) => { switch (category) { case 'asian': return ; @@ -53,7 +53,7 @@ const TradeCategoriesGIF = ({ category }) => { case 'run_high_low': return ; case 'accumulator': - return ; + return ; case 'tick_high_low': return ; case 'touch': @@ -67,6 +67,7 @@ const TradeCategoriesGIF = ({ category }) => { TradeCategoriesGIF.propTypes = { category: PropTypes.string, + selected_contract_type: PropTypes.string, }; export default TradeCategoriesGIF; diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx index 510021fda2ea..d16704345bb2 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx @@ -18,30 +18,22 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list } const [carousel_index, setCarouselIndex] = React.useState(''); const [selected_tab, setSelectedTab] = React.useState(TABS.DESCRIPTION); const contract_types = getContractTypes(list, item).filter(i => i.value !== 'rise_fall_equal'); - const has_toggle_buttons = carousel_index !== 'accumulator' && carousel_index !== 'vanilla'; + const has_toggle_buttons = /accumulator|vanilla/i.test(carousel_index); const is_description_tab_selected = selected_tab === TABS.DESCRIPTION; const is_glossary_tab_selected = selected_tab === TABS.GLOSSARY; const width = isMobile() ? '328' : '528'; - const scroll_bar_height = has_toggle_buttons ? '560px' : '464px'; + const scroll_bar_height = has_toggle_buttons ? '464px' : '560px'; const selected_contract_type = contract_types.find(type => type.value === carousel_index); const onClickGlossary = () => setSelectedTab(TABS.GLOSSARY); const handleItemSelect = active_index => { setCarouselIndex(contract_types[active_index].value); handleNavigationClick(contract_types[active_index]); - if (has_toggle_buttons && is_glossary_tab_selected) { - setSelectedTab(TABS.DESCRIPTION); - } }; const cards = contract_types.map((type, idx) => { return ( -
+
{is_description_tab_selected ? ( - + ) : ( )} @@ -80,7 +77,7 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list } return ( - {!has_toggle_buttons && ( + {has_toggle_buttons && (