smartxtrader 3.8.1-xm.0

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

@@ -0,0 +1,671 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+    DropdownItem,
+    SearchField,
+    Tab,
+    DropdownTitle,
+    Divider,
+    useDropdown,
+} from '@deriv-com/quill-ui';
+import Symbols from '../symbols';
+import ActiveSymbols, {
+    marketOrder,
+    sortObjectByKeys,
+    derived,
+} from '../../../common/active_symbols';
+import Defaults, { PARAM_NAMES } from '../defaults';
+import { triggerMarketChange, useActiveSymbolsChange, useMarketChange } from '../../../hooks/events';
+import { localize } from '../../../../_common/localize';
+import dataManager from '../../../common/data_manager';
+import BinarySocket from '../../../base/socket';
+
+// Volatility 100 Index
+const DEFAULT_UNDERLYING = 'R_100';
+export const FAVORITES_STORAGE_KEY = 'quill_market_favorites';
+
+export const getStoredFavoriteMarkets = () => {
+    if (typeof localStorage === 'undefined') return [];
+
+    try {
+        const stored_favorites = JSON.parse(localStorage.getItem(FAVORITES_STORAGE_KEY));
+        if (!Array.isArray(stored_favorites)) return [];
+
+        return stored_favorites.filter((item) => item?.symbol && item?.display && item?.market);
+    } catch (e) {
+        return [];
+    }
+};
+
+const persistFavoriteMarkets = (favorites) => {
+    if (typeof localStorage === 'undefined') return;
+
+    try {
+        localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify(favorites));
+    } catch (e) {
+        // ignore storage errors
+    }
+};
+
+const notifyFavoriteUpdate = (favorites) => {
+    window.dispatchEvent(new CustomEvent('marketFavoritesUpdated', { detail: favorites }));
+};
+
+const updateLegacyUnderlyingInput = (underlying, display) => {
+    const underlyingElement = document.getElementById('underlying');
+    if (!underlyingElement) return;
+
+    underlyingElement.value = underlying;
+
+    if (display) {
+        underlyingElement.setAttribute('data-text', display);
+    } else {
+        underlyingElement.removeAttribute('data-text');
+    }
+
+    underlyingElement.dispatchEvent(new Event('change'));
+};
+
+export const setUnderlyingSelection = (underlying, market, display) => {
+    Defaults.set(PARAM_NAMES.UNDERLYING, underlying);
+    Defaults.set(PARAM_NAMES.MARKET, market);
+    updateLegacyUnderlyingInput(underlying, display);
+    triggerMarketChange();
+
+    document.querySelectorAll('.symbol_name').forEach(el => el.id === underlying && el.click());
+};
+
+export const getMarketName = () => {
+    const obj =  ActiveSymbols.getMarkets();
+    const symbolKey = Defaults.get(PARAM_NAMES.UNDERLYING) || DEFAULT_UNDERLYING;
+    
+    // Find the market and submarket where the symbolKey exists
+    const marketKey = Object.keys(obj).find(market =>
+        Object.keys(obj[market].submarkets).some(submarket =>
+            obj[market].submarkets[submarket].symbols?.[symbolKey]
+        )
+    );
+
+    // Return the display value if found
+    const displayValue = obj[marketKey]?.submarkets?.[Object.keys(obj[marketKey].submarkets).find(submarket =>
+        obj[marketKey].submarkets[submarket].symbols?.[symbolKey]
+    )]?.symbols[symbolKey]?.display;
+
+    return displayValue || '';
+
+};
+
+export const getContractName = () => {
+    const data = dataManager.getAllContracts('contract');
+    let name = '';
+    // eslint-disable-next-line consistent-return
+    data?.contracts_tree?.forEach((contract) => {
+        if (typeof contract === 'object') {
+            contract[1].forEach((subtype) => {
+                if (subtype === data?.actual_form_name) {
+                    name =  data?.contracts[subtype];
+                }
+            
+            });
+        
+        } else if (contract === data?.actual_form_name) {
+            name = data?.contracts[contract];
+        }
+       
+    });
+
+    return name;
+};
+
+export const MarketsDropdown = () => {
+    const { MARKET, UNDERLYING } = PARAM_NAMES;
+    const [defaultMarkets, setDefaultMarkets] = useState({});
+    const [markets, setMarkets] = useState({});
+    const [isMounted, setIsMounted] = useState(false);
+    const [activeMarket, setActiveMarket] = useState('');
+    const [selectedMarket, setSelectedMarket] = useState(
+        Defaults.get(UNDERLYING) || DEFAULT_UNDERLYING
+    );
+    const [favoriteMarkets, setFavoriteMarkets] = useState(getStoredFavoriteMarkets());
+    const [searchKey, setSearchKey] = useState('');
+    const [isMobile, setIsMobile] = useState(false);
+    const itemsContainer = useRef(null);
+    const isScrolling = useRef(false);
+    const disableScrollTimer = useRef();
+
+    const { close: closeMarketDropdown, isOpen: isMarketModalOpen } = useDropdown();
+    const activeSymbolsChanged = useActiveSymbolsChange();
+    const hasMarketChange = useMarketChange();
+
+    const findMarketForUnderlying = (marketsToSearch, underlying) => (
+        Object.keys(marketsToSearch).find(market => (
+            Object.keys(marketsToSearch[market].submarkets).some(submarket =>
+                marketsToSearch[market].submarkets[submarket].symbols?.[underlying]
+            )
+        ))
+    );
+
+    const getFirstAvailableSymbol = (marketsToSearch) => {
+        const first_market_key = Object.keys(marketsToSearch)[0];
+
+        if (!first_market_key) return undefined;
+
+        const first_submarket_key = Object.keys(marketsToSearch[first_market_key].submarkets)[0];
+        const available_symbols = marketsToSearch[first_market_key].submarkets[first_submarket_key].symbols;
+
+        return Object.keys(available_symbols)[0];
+    };
+
+    const getPreferredUnderlying = (marketsToSearch) => {
+        if (!Object.keys(marketsToSearch).length) return undefined;
+
+        const preferred_underlyings = [Defaults.get(UNDERLYING), DEFAULT_UNDERLYING];
+
+        const resolved_underlying = preferred_underlyings.find(symbol =>
+            symbol && findMarketForUnderlying(marketsToSearch, symbol)
+        );
+
+        if (resolved_underlying) return resolved_underlying;
+
+        return getFirstAvailableSymbol(marketsToSearch);
+    };
+
+    const filterMarkets = (marketsToFilter = defaultMarkets) => {
+        const data = JSON.parse(JSON.stringify(marketsToFilter));
+        const searchStr = searchKey?.toLowerCase();
+        let foundMatchingSymbol = false;
+
+        Object.keys(data).forEach((marketKey) => {
+            const market = data[marketKey];
+
+            Object.keys(market.submarkets).forEach((submarketKey) => {
+                const submarket = market.submarkets[submarketKey];
+                const subMarketName = submarket.name.toLowerCase();
+
+                // If submarket name matches to search key then don't filter children
+                if (!subMarketName.includes(searchStr)) {
+                    Object.keys(submarket.symbols).forEach((symbolKey) => {
+                        const symbol = submarket.symbols[symbolKey];
+                        const displayName = symbol.display.toLowerCase();
+
+                        if (!displayName.includes(searchStr)) {
+                            delete submarket.symbols[symbolKey];
+                        } else {
+                            foundMatchingSymbol = true;
+                        }
+                    });
+                } else {
+                    foundMatchingSymbol = true;
+                }
+
+                if (Object.keys(submarket.symbols).length === 0) {
+                    delete market.submarkets[submarketKey];
+                }
+            });
+
+            if (Object.keys(market.submarkets).length === 0) {
+                delete data[marketKey];
+            }
+        });
+
+        // If no matching symbols were found, return the original markets object
+        if (!foundMatchingSymbol) {
+            return marketsToFilter;
+        }
+
+        return data;
+    };
+
+    useEffect(() => {
+        setMarkets(filterMarkets());
+    }, [searchKey, defaultMarkets]);
+
+    useEffect(() => {
+        const checkIsMobile = () => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+
+        checkIsMobile();
+        window.addEventListener('resize', checkIsMobile);
+
+        const setMarketsFromSymbols = () => {
+            const marketList = Symbols.markets();
+
+            if (marketList && Object.keys(marketList).length) {
+                const originalMarkets = sortObjectByKeys(marketList, marketOrder);
+                setDefaultMarkets(originalMarkets);
+                setMarkets(originalMarkets);
+                const resolved_underlying = getPreferredUnderlying(originalMarkets) || DEFAULT_UNDERLYING;
+                const resolved_market = findMarketForUnderlying(originalMarkets, resolved_underlying)
+                    || Object.keys(originalMarkets)[0];
+
+                Defaults.set(UNDERLYING, resolved_underlying);
+                if (resolved_market) {
+                    Defaults.set(MARKET, resolved_market);
+                    setActiveMarket(resolved_market);
+                }
+                setSelectedMarket(resolved_underlying);
+                setIsMounted(true);
+                return true;
+            }
+            return false;
+        };
+
+        const fetchActiveSymbols = async () => {
+            const response = await BinarySocket.send({ active_symbols: 'brief' });
+
+            if (response?.active_symbols?.length) {
+                Symbols.details(response);
+                setMarketsFromSymbols();
+            }
+        };
+
+        if (!setMarketsFromSymbols()) {
+            fetchActiveSymbols();
+        }
+
+        return () => {
+            clearTimeout(disableScrollTimer.current);
+            window.removeEventListener('resize', checkIsMobile);
+        };
+    }, [activeSymbolsChanged]);
+
+    useEffect(() => {
+        setFavoriteMarkets((prevFavorites) => {
+            const sanitizedFavorites = prevFavorites.filter((favorite) => {
+                const market = markets[favorite.market];
+                if (!market) return false;
+
+                return Object.keys(market.submarkets).some((submarketKey) =>
+                    market.submarkets[submarketKey].symbols?.[favorite.symbol]
+                );
+            });
+
+            return sanitizedFavorites;
+        });
+    }, [markets]);
+
+    // Handle selecting of tabs on scroll
+    useEffect(() => {
+        const container = itemsContainer.current;
+    
+        const checkActiveMarket = () => {
+            const marketDivs = container.querySelectorAll('div');
+            let closestMarket = '';
+            let closestOffset = Infinity;
+    
+            marketDivs.forEach((div) => {
+                const paddingOffset = window.innerWidth > 768 ? 120 : 220;
+                const offsetTop = div.offsetTop - container.scrollTop - paddingOffset;
+
+                if (offsetTop <= 0 && Math.abs(offsetTop) < Math.abs(closestOffset)) {
+                    closestOffset = offsetTop;
+                    closestMarket = div.getAttribute('data-id');
+                }
+            });
+    
+            if (closestMarket) {
+                setActiveMarket(closestMarket);
+            }
+        };
+    
+        const handleScroll = () => {
+            if (!isScrolling.current) {
+                checkActiveMarket();
+            }
+        };
+    
+        container.addEventListener('scroll', handleScroll);
+    
+        return () => {
+            container.removeEventListener('scroll', handleScroll);
+        };
+    }, [isMounted]);
+    
+    const prioritizedMarketKeys = useMemo(() => {
+        const market_keys = Object.keys(markets);
+
+        if (!isMobile) return market_keys;
+
+        const priority = ['synthetics'];
+
+        return [
+            ...priority.filter(key => market_keys.includes(key)),
+            ...market_keys.filter(key => !priority.includes(key)),
+        ];
+    }, [isMobile, markets]);
+
+    const getactiveMarketIndex = () => {
+        const market_index = prioritizedMarketKeys.indexOf(activeMarket);
+        return market_index >= 0 ? market_index : 0;
+    };
+
+    const handleMarketTabClick = (index, marketKey) => {
+        const resolved_market = marketKey || prioritizedMarketKeys[index];
+        if (!resolved_market) return;
+
+        setActiveMarket(resolved_market);
+
+        if (!isMobile) return;
+
+        isScrolling.current = true;
+        const container = itemsContainer.current;
+
+        if (container) {
+            container.scrollTo({
+                top     : 0,
+                behavior: 'smooth',
+            });
+            disableScrollTimer.current = setTimeout(() => {
+                isScrolling.current = false;
+            }, 600);
+        }
+    };
+
+    const handleUnderlyingClick = (underlying, market, display) => {
+        setSelectedMarket(underlying);
+        setUnderlyingSelection(underlying, market, display);
+
+        closeMarketDropdown();
+    };
+
+    const handleFavoriteToggle = (symbol, display, market) => {
+        setFavoriteMarkets((prevFavorites) => {
+            const exists = prevFavorites.some((fav) => fav.symbol === symbol);
+            const updatedFavorites = exists
+                ? prevFavorites.filter((fav) => fav.symbol !== symbol)
+                : [...prevFavorites, { symbol, display, market }];
+
+            return updatedFavorites;
+        });
+    };
+
+    useEffect(() => {
+        persistFavoriteMarkets(favoriteMarkets);
+        notifyFavoriteUpdate(favoriteMarkets);
+    }, [favoriteMarkets]);
+
+    useEffect(() => {
+        if (isMounted && itemsContainer.current) {
+            const paddingOffset = 96;
+            const container = itemsContainer.current;
+            const selectedElement = container.querySelector('.market-item-selected');
+            if (selectedElement) {
+                const offsetTop = selectedElement.offsetTop - container.offsetTop - paddingOffset;
+                container.scrollTo({
+                    top     : offsetTop,
+                    behavior: 'auto',
+                });
+            }
+                
+        }
+    
+        const goToActiveMarket = () => {
+            const container = itemsContainer.current;
+            let selectedElement = container.querySelector('.market-item-selected');
+        
+            while (selectedElement && selectedElement !== document) {
+                if (selectedElement.tagName === 'DIV' && selectedElement.hasAttribute('data-id')) {
+                    const market =  selectedElement.getAttribute('data-id');
+                    setActiveMarket(market);
+                }
+                selectedElement = selectedElement.parentElement;
+            }
+        };
+
+        if (searchKey === '') {
+            goToActiveMarket();
+        }
+
+    }, [isMounted, markets, searchKey]);
+
+    useEffect(() => {
+        if (!activeMarket && Object.keys(markets).length) {
+            const resolved_market = findMarketForUnderlying(markets, selectedMarket) || Object.keys(markets)[0];
+            if (resolved_market) {
+                setActiveMarket(resolved_market);
+            }
+        }
+    }, [activeMarket, markets, selectedMarket]);
+
+    useEffect(() => {
+        if (!hasMarketChange) return;
+
+        const updatedUnderlying = Defaults.get(UNDERLYING) || DEFAULT_UNDERLYING;
+        const updatedMarket = Defaults.get(MARKET)
+            || findMarketForUnderlying(markets, updatedUnderlying)
+            || activeMarket;
+
+        setSelectedMarket(updatedUnderlying);
+
+        if (updatedMarket) {
+            setActiveMarket(updatedMarket);
+        }
+    }, [hasMarketChange, markets]);
+
+    const prioritizedMarketContent = useMemo(() => {
+        if (!activeMarket || !markets[activeMarket]) return {};
+
+        return { [activeMarket]: markets[activeMarket] };
+    }, [activeMarket, markets]);
+
+    const prioritizeSubmarkets = (market_key, submarket_keys) => {
+        if (market_key !== 'synthetics') return submarket_keys;
+
+        const priority = ['continuous_indices'];
+        const prioritized_keys = priority.filter(key => submarket_keys.includes(key));
+        const remaining_keys = submarket_keys.filter(key => !priority.includes(key));
+
+        return [...prioritized_keys, ...remaining_keys];
+    };
+
+    const getSymbolKeys = (market_key, symbols) => {
+        const symbol_keys = Object.keys(symbols);
+
+        if (market_key === 'synthetics' && symbol_keys.length >= 16) {
+            const sixteenth_symbol = symbol_keys[15];
+
+            symbol_keys.splice(15, 1);
+
+            return [sixteenth_symbol, ...symbol_keys];
+        }
+
+        return symbol_keys;
+    };
+
+    const renderMarketContent = (marketsToRender) => (
+        Object.keys(marketsToRender).map((market_key) => {
+            const market = marketsToRender[market_key];
+            const { submarkets } = market;
+
+            const sortedSubmarketKeys = prioritizeSubmarkets(
+                market_key,
+                Object.keys(submarkets).sort((a, b) => {
+                    const pairs = ['major_pairs', 'minor_pairs'];
+                    if (pairs.includes(a)) return -1;
+                    if (pairs.includes(b)) return 1;
+                    return 0;
+                }),
+            );
+
+            return (
+                <div
+                    id={`${market_key}-dropdown-list`}
+                    key={market_key}
+                    data-id={market_key}
+                    className='market-modal__group'
+                >
+                    {sortedSubmarketKeys.map((sub_market_key) => {
+                        const submarket = submarkets[sub_market_key];
+                        const { symbols, name } = submarket;
+
+                        return (
+                            <React.Fragment key={sub_market_key}>
+                                <DropdownTitle
+                                    label={name}
+                                    data-id={market_key}
+                                    className='market-modal__category'
+                                />
+                                <div className='market-modal__grid'>
+                                    {getSymbolKeys(market_key, symbols).map((symbol_key) => {
+                                        const symbol = symbols[symbol_key];
+                                        const { display } = symbol;
+                                        const isSelected = symbol_key === selectedMarket;
+                                        const isFavorite = favoriteMarkets.some((fav) => fav.symbol === symbol_key);
+
+                                        return (
+                                            <DropdownItem
+                                                key={symbol_key}
+                                                data-id={market_key}
+                                                onClick={() => handleUnderlyingClick(symbol_key, market_key, display)}
+                                                label={(
+                                                    <span className='market-modal__item-content'>
+                                                        <span className='market-modal__item-label'>{display}</span>
+                                                        <span
+                                                            role='button'
+                                                            tabIndex={0}
+                                                            className={`market-modal__favorite ${isFavorite ? 'market-modal__favorite--active' : ''}`}
+                                                            aria-pressed={isFavorite}
+                                                            aria-label={isFavorite
+                                                                ? localize('Remove {{market}} from favorites', { market: display })
+                                                                : localize('Add {{market}} to favorites', { market: display })}
+                                                            onClick={(e) => {
+                                                                e.preventDefault();
+                                                                e.stopPropagation();
+                                                                handleFavoriteToggle(symbol_key, display, market_key);
+                                                            }}
+                                                            onKeyDown={(e) => {
+                                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                                    e.preventDefault();
+                                                                    e.stopPropagation();
+                                                                    handleFavoriteToggle(symbol_key, display, market_key);
+                                                                }
+                                                            }}
+                                                        >
+                                                            {isFavorite ? '★' : '☆'}
+                                                        </span>
+                                                    </span>
+                                                )}
+                                                selected={isSelected}
+                                                className={`${isSelected ? 'market-item-selected' : ''} market-modal__item`}
+                                                size='md'
+                                            />
+                                        );
+                                    })}
+                                </div>
+                                <Divider />
+                            </React.Fragment>
+                        );
+                    })}
+                </div>
+            );
+        })
+    );
+
+    return (
+        <div className={`market-modal ${isMarketModalOpen ? 'market-modal--open' : ''} ${isMobile ? 'market-modal--mobile' : ''}`}>
+            <button
+                aria-label={localize('Close market selection')}
+                className='market-modal__backdrop'
+                onClick={closeMarketDropdown}
+                type='button'
+            />
+            <div className='market-modal__panel' role='dialog' aria-modal='true'>
+                <div className='market-modal__header'>
+                    <div>
+                        <p className='market-modal__eyebrow'>{localize('Market')}</p>
+                        <h3 className='market-modal__title'>{localize('Choose your market')}</h3>
+                    </div>
+                    <div className='market-modal__controls'>
+                        <SearchField
+                            inputSize='sm'
+                            onChange={(e) => setSearchKey(e.target.value)}
+                            placeholder={localize('Search...')}
+                            value={searchKey}
+                            variant='fill'
+                        />
+                        <button
+                            type='button'
+                            className='market-modal__close'
+                            onClick={closeMarketDropdown}
+                            aria-label={localize('Close')}
+                        >
+                            ✕
+                        </button>
+                    </div>
+                </div>
+
+                <div className='market-modal__layout'>
+                    {!isMobile && (
+                        <div className='market-modal__sidebar'>
+                            <Tab.Container
+                                size='md'
+                                contentStyle='hug'
+                                selectedTabIndex={getactiveMarketIndex()}
+                                onTabClick={(index) => handleMarketTabClick(index)}
+                            >
+                                <Tab.List className='market-modal__tabs'>
+                                    {prioritizedMarketKeys.map((market_key) => {
+                                        const market = markets[market_key];
+                                        const marketName = derived.includes(market_key)
+                                            ? `Derived (${market.name})`
+                                            : market.name;
+                                        return (
+                                            <Tab.Trigger
+                                                key={market_key}
+                                                className={`market-modal__tab ${activeMarket === market_key ? 'market-modal__tab--active' : ''}`}
+                                                onClick={() => handleMarketTabClick(null, market_key)}
+                                            >
+                                                {marketName}
+                                            </Tab.Trigger>
+                                        );
+                                    })}
+                                </Tab.List>
+                            </Tab.Container>
+                        </div>
+                    )}
+
+                    {isMobile ? (
+                        <div className='market-modal__accordion' ref={itemsContainer}>
+                            {prioritizedMarketKeys.map((market_key, index) => {
+                                const market = markets[market_key];
+                                const marketName = derived.includes(market_key)
+                                    ? `Derived (${market.name})`
+                                    : market.name;
+                                const isActive = activeMarket === market_key;
+
+                                return (
+                                    <div
+                                        key={market_key}
+                                        className={`market-modal__accordion-item ${isActive ? 'market-modal__accordion-item--open' : ''}`}
+                                    >
+                                        <button
+                                            type='button'
+                                            className={`market-modal__tab market-modal__tab--accordion ${isActive ? 'market-modal__tab--active' : ''}`}
+                                            aria-expanded={isActive}
+                                            onClick={() => handleMarketTabClick(index, market_key)}
+                                        >
+                                            {marketName}
+                                        </button>
+                                        {isActive && (
+                                            <div className='market-modal__accordion-content'>
+                                                {renderMarketContent({ [market_key]: market })}
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    ) : (
+                        <div
+                            className='quill-market-dropdown-item-container market-item-container market-modal__content'
+                            id='quill-market-dropdown-list'
+                            ref={itemsContainer}
+                        >
+                            {renderMarketContent(prioritizedMarketContent)}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};