smartxtrader 3.8.1-xm.0

package/src/javascript/app/pages/trade/lookback.js

@@ -0,0 +1,59 @@
+const Contract = require('./contract');
+const Defaults = require('./defaults');
+const localize = require('../../../_common/localize').localize;
+
+/**
+ * Handles lookback option form
+ */
+const Lookback = (() => {
+    const { MULTIPLIER } = Defaults.PARAM_NAMES;
+
+    const displayLookback = () => {
+        const multiplier_element    = document.getElementById('multiplier_row');
+        const multiplier_input      = document.getElementById('multiplier');
+        const payout_element        = document.getElementById('payout_row');
+
+        if (Contract.form() === 'lookback') {
+            multiplier_element.show();
+            payout_element.hide(); // Hide payout
+            if (Defaults.get(MULTIPLIER)) {
+                multiplier_input.value = Defaults.get(MULTIPLIER);
+            } else {
+                Defaults.set(MULTIPLIER, multiplier_input.value);
+            }
+        } else {
+            multiplier_element.hide();
+            payout_element.show(); // Show payout
+        }
+    };
+
+    const getFormula = (type = '', mul = '') => {
+        const formulaMapping = {
+            LBFLOATPUT : `${mul} x (${localize('High')} - ${localize('Close')})`,
+            LBFLOATCALL: `${mul} x (${localize('Close')} - ${localize('Low')})`,
+            LBHIGHLOW  : `${mul} x (${localize('High')} - ${localize('Low')})`,
+        };
+
+        return formulaMapping[type.toUpperCase()];
+    };
+
+    const isLookback = (type) => /^(LBFLOATCALL|LBFLOATPUT|LBHIGHLOW)$/.test(type);
+
+    const getBarrierLabel = (type) => {
+        const barrier_map = {
+            LBFLOATCALL: localize(['Low']),
+            LBFLOATPUT : localize(['High']),
+            LBHIGHLOW  : localize(['High', 'Low']),
+        };
+        return barrier_map[type] || localize(['Barrier']);
+    };
+
+    return {
+        display: displayLookback,
+        getFormula,
+        isLookback,
+        getBarrierLabel,
+    };
+})();
+
+module.exports = Lookback;

package/src/javascript/app/pages/trade/markets/contracts-dropdown.jsx

@@ -0,0 +1,114 @@
+import { Divider, DropdownItem, DropdownTitle, useDropdown } from '@deriv-com/quill-ui';
+import React, { useEffect, useRef, useState } from 'react';
+import { triggerContractChange, useContractChange } from '../../../hooks/events';
+import dataManager from '../../../common/data_manager';
+import Defaults, { PARAM_NAMES } from '../defaults';
+
+export const ContractDropdown = () => {
+    const { close } = useDropdown();
+    const has_contract_change  = useContractChange();
+    const [data, setData] = useState(dataManager.getAllContracts());
+    const selected_ref = useRef(null);
+    const container_ref = useRef(null);
+    const close_dropdown_timer = useRef();
+
+    const onContractClick = (form_name) => {
+        if (form_name === data?.form_name) {
+            close();
+            return;
+        }
+
+        const contract_element = data?.contract_element;
+
+        if (contract_element) {
+            const event = new Event('change');
+            contract_element.value = form_name;
+            contract_element.dispatchEvent(event);
+        }
+
+        Defaults.set(PARAM_NAMES.FORM_NAME, form_name);
+
+        dataManager.setContract({
+            form_name,
+        });
+
+        triggerContractChange();
+
+        close_dropdown_timer.current = setTimeout(() => {
+            close();
+        }, 10);
+    };
+
+    useEffect(() => () => clearTimeout(close_dropdown_timer.current), []);
+
+    useEffect(() => {
+        setData(old_data => ({
+            ...old_data,
+            ...dataManager.getAllContracts(),
+        }));
+    }, [has_contract_change]);
+
+    useEffect(() => {
+        if (selected_ref.current && container_ref.current) {
+            const selected_rect = selected_ref.current.getBoundingClientRect();
+            const container_rect = container_ref.current.getBoundingClientRect();
+            const offset = 96;
+            if (selected_rect.top < container_rect.top + offset || selected_rect.bottom > container_rect.bottom) {
+                container_ref.current.scrollTo({
+                    top     : container_ref.current.scrollTop + selected_rect.top - container_rect.top - offset,
+                    behavior: 'auto',
+                });
+            }
+        }
+    }, [data]);
+
+    return (
+        <div className='quill-market-dropdown-container' >
+            <div className='quill-market-dropdown-item-container' ref={container_ref}>
+                {data?.contracts_tree?.map((contract, idx) => {
+                    if (typeof contract === 'object') {
+                        return (
+                            <React.Fragment key={idx}>
+                                <DropdownTitle
+                                    className='contract-dropdown__category-title'
+                                    label={data?.contracts[contract[0]]}
+                                />
+                                {contract[1].map((subtype, i) => (
+                                    <DropdownItem
+                                        key={i}
+                                        onClick={() => onContractClick(subtype)}
+                                        label={data?.contracts[subtype]}
+                                        selected={subtype === data?.form_name}
+                                        size='md'
+                                        className='trade-item-selected'
+                                        ref={subtype === data?.form_name ? selected_ref : null}
+                                    />
+                                )
+                                )}
+                                <Divider />
+                            </React.Fragment>
+                        );
+                    }
+
+                    return (
+                        <React.Fragment key={idx}>
+                            <DropdownTitle
+                                className='contract-dropdown__category-title'
+                                label={data?.contracts[contract]}
+                            />
+                            <DropdownItem
+                                onClick={() => onContractClick(contract)}
+                                label={data?.contracts[contract]}
+                                selected={contract === data?.form_name}
+                                size='md'
+                                className='contract-item-clickables'
+                                ref={contract === data?.form_name ? selected_ref : null}
+                            />
+                            <Divider />
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};

package/src/javascript/app/pages/trade/markets/market-selector.jsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import {
+    BreakpointProvider,
+    CustomDropdown,
+} from '@deriv-com/quill-ui';
+import {
+    MarketsDropdown,
+    getContractName,
+    getMarketName,
+    getStoredFavoriteMarkets,
+    setUnderlyingSelection,
+} from './markets-dropdown.jsx';
+import { ContractDropdown } from './contracts-dropdown.jsx';
+import { getElementById } from '../../../../_common/common_functions';
+import { localize } from '../../../../_common/localize';
+import { useContractChange, useMarketChange } from '../../../hooks/events.js';
+
+const FavoriteMarketsStrip = () => {
+    const [favoriteMarkets, setFavoriteMarkets] = useState(getStoredFavoriteMarkets());
+
+    useEffect(() => {
+        const handleFavoriteUpdate = (event) => {
+            setFavoriteMarkets(event.detail || getStoredFavoriteMarkets());
+        };
+
+        window.addEventListener('marketFavoritesUpdated', handleFavoriteUpdate);
+
+        return () => {
+            window.removeEventListener('marketFavoritesUpdated', handleFavoriteUpdate);
+        };
+    }, []);
+
+    if (!favoriteMarkets.length) return null;
+
+    return (
+        <div className='market-favorites-strip' aria-label={localize('Favorite markets')}>
+            {favoriteMarkets.map((favorite) => (
+                <button
+                    key={favorite.symbol}
+                    type='button'
+                    className='market-favorites-strip__item'
+                    onClick={() => setUnderlyingSelection(favorite.symbol, favorite.market, favorite.display)}
+                    aria-label={localize('Select {{market}} from favorites', { market: favorite.display })}
+                >
+                    <span className='market-favorites-strip__pill'>{favorite.display}</span>
+                </button>
+            ))}
+        </div>
+    );
+};
+
+const MarketSelector = () => {
+    const [market_label, setMarketLabel] = useState(getMarketName());
+    const [tradeTypeLabel, setTradeTypeLabel] = useState(getContractName());
+    const has_contract_change = useContractChange();
+    const has_market_change = useMarketChange();
+  
+    useEffect(() => {
+        setTradeTypeLabel(getContractName());
+    }, [has_contract_change]);
+
+    useEffect(() => {
+        setMarketLabel(getMarketName());
+    }, [has_market_change]);
+
+    return (
+        <BreakpointProvider>
+            <div className='quill-market-selector-container'>
+                <FavoriteMarketsStrip />
+                <CustomDropdown
+                    containerClassName='quill-market-selector-dropdown'
+                    label={localize('Market')}
+                    value={market_label}
+                >
+                    <MarketsDropdown />
+                </CustomDropdown>
+                <CustomDropdown
+                    containerClassName='quill-market-selector-dropdown quill-custom-contract-dropdown'
+                    label={localize('Trade types')}
+                    value={tradeTypeLabel}
+                >
+                    <ContractDropdown />
+                </CustomDropdown>
+            </div>
+        </BreakpointProvider>
+    );
+};
+
+export const init = () => {
+    ReactDOM.render(
+        <MarketSelector />,
+        getElementById('markets-dropdown-container')
+    );
+};
+
+export default init;