From e850770ffc5e573ca6b41b5679437af4374fb406 Mon Sep 17 00:00:00 2001
From: meenakshi-deriv <104189801+meenakshi-deriv@users.noreply.github.com>
Date: Wed, 17 Jul 2024 12:49:00 +0400
Subject: [PATCH] Meenu market section subtask (#678)

* fix: updated dropdown size and added default value

* empty: empty commit

* fix: fixed sorting issue
---
 .../pages/trade/markets/markets-dropdown.jsx  | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx
index 6c2ea03a187..b3ff4208c4c 100644
--- a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx
+++ b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx
@@ -21,7 +21,7 @@ import contractManager from '../../../common/contract_manager';
 
 export const getMarketName = () => {
     const obj =  ActiveSymbols.getMarkets();
-    const symbolKey = Defaults.get(PARAM_NAMES.UNDERLYING);
+    const symbolKey = Defaults.get(PARAM_NAMES.UNDERLYING) || 'frxAUDJPY';
     
     // Find the market and submarket where the symbolKey exists
     const marketKey = Object.keys(obj).find(market =>
@@ -138,12 +138,12 @@ export const MarketsDropdown = () => {
     // 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 = 120;
                 const offsetTop = div.offsetTop - container.scrollTop - paddingOffset;
@@ -153,25 +153,25 @@ export const MarketsDropdown = () => {
                     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 getactiveMarketIndex = () => Object.keys(markets).indexOf(activeMarket);
 
     const scrollToMarketByIndex = (index) => {
@@ -244,10 +244,18 @@ export const MarketsDropdown = () => {
                     {Object.keys(markets).map((ik) => {
                         const market = markets[ik];
                         const { submarkets } = market;
+                       
+                        const sortedSubmarketKeys = Object.keys(submarkets).sort((a, b) => {
+                            if (a === 'major_pairs') return -1;
+                            if (b === 'major_pairs') return 1;
+                            if (a === 'minor_pairs') return -1;
+                            if (b === 'minor_pairs') return 1;
+                            return 0;
+                        });
 
                         return (
                             <div id={`${ik}-dropdown-list`} key={ik} data-id={ik}>
-                                {Object.keys(submarkets).map((sk) => {
+                                {sortedSubmarketKeys.map((sk) => {
                                     const submarket = submarkets[sk];
                                     const { symbols, name } = submarket;
 
@@ -258,14 +266,14 @@ export const MarketsDropdown = () => {
                                                 const symbol = symbols[yk];
                                                 const { display } = symbol;
                                                 const isSelected = yk === selectedMarket;
-                                               
+
                                                 return (
                                                     <DropdownItem
                                                         key={yk}
                                                         onClick={() => handleUnderlyingClick(yk)}
                                                         label={display}
                                                         selected={isSelected}
-                                                        size='sm'
+                                                        size='md'
                                                     />
                                                 );
                                             })}
@@ -276,6 +284,7 @@ export const MarketsDropdown = () => {
                             </div>
                         );
                     })}
+
                 </div>
             </div>
         </div>