feat: show current market leverage in dropdown (#841)

src/state/perpetualsSelectors.ts

@@ -199,7 +199,10 @@ export const getCurrentMarketNextFundingRate = createAppSelector(
  */
 export const getMarketMaxLeverage = () =>
   createAppSelector(
-    [(state: RootState, marketId: string) => getMarketConfig(state, marketId)],
+    [
+      (state: RootState, marketId?: string) =>
+        marketId != null ? getMarketConfig(state, marketId) : undefined,
+    ],
     (marketConfig) => {
       const { effectiveInitialMarginFraction, initialMarginFraction } = orEmptyObj(marketConfig);
 

src/views/MarketsDropdown.tsx

@@ -9,6 +9,7 @@ import { MarketFilters, type MarketData } from '@/constants/markets';
 import { AppRoute, MarketsRoute } from '@/constants/routes';
 
 import { useMarketsData } from '@/hooks/useMarketsData';
+import { useParameterizedSelector } from '@/hooks/useParameterizedSelector';
 import { usePotentialMarkets } from '@/hooks/usePotentialMarkets';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
@@ -24,6 +25,8 @@ import { ColumnDef, Table } from '@/components/Table';
 import { Tag } from '@/components/Tag';
 import { Toolbar } from '@/components/Toolbar';
 
+import { getMarketMaxLeverage } from '@/state/perpetualsSelectors';
+
 import { calculateMarketMaxLeverage } from '@/lib/marketsHelpers';
 import { MustBigNumber } from '@/lib/numbers';
 
@@ -188,6 +191,14 @@ export const MarketsDropdown = memo(
     const [isOpen, setIsOpen] = useState(false);
     const stringGetter = useStringGetter();
     const navigate = useNavigate();
+    const marketMaxLeverage = useParameterizedSelector(getMarketMaxLeverage, currentMarketId);
+
+    const leverageTag =
+      currentMarketId != null ? (
+        <Tag>
+          <Output type={OutputType.Multiple} value={marketMaxLeverage} fractionDigits={0} />
+        </Tag>
+      ) : undefined;
 
     return (
       <$Popover
@@ -202,6 +213,7 @@ export const MarketsDropdown = memo(
               <div>
                 <AssetIcon symbol={symbol} />
                 <h2>{currentMarketId}</h2>
+                {leverageTag}
               </div>
             )}
             <p>