feat: adapt market-selector for popover

apps/trading/client-pages/layout/layout.tsx

@@ -1,5 +1,4 @@
 import { Outlet, useLocation } from 'react-router-dom';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { Sidebar, SidebarContent, useSidebar } from '../../components/sidebar';
 import classNames from 'classnames';
 import { Navbar } from '../../components/navbar';
@@ -12,7 +11,6 @@ import {
 
 export const Layout = () => {
   const location = useLocation();
-  const { VEGA_ENV } = useEnvironment();
   const { view } = useSidebar();
   const sidebarOpen = view !== null;
 
@@ -40,7 +38,7 @@ export const Layout = () => {
         </div>
       )}
       <div className="col-span-full col-start-2 row-start-2 bg-vega-yellow">
-        <Navbar theme="dark" />
+        <Navbar theme="system" />
       </div>
       <div
         className="col-span-full col-start-2 row-start-3 bg-vega-pink-350"

apps/trading/client-pages/market/market-selector-item.tsx

@@ -21,30 +21,14 @@ export const MarketSelectorItem = ({
   market,
   style,
   currentMarketId,
-  onSelect,
 }: {
   market: MarketMaybeWithDataAndCandles;
   style: CSSProperties;
   currentMarketId?: string;
-  onSelect?: (marketId: string) => void;
 }) => {
-  const wrapperClasses = classNames(
-    'block bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg p-4',
-    'min-h-[120px]',
-    {
-      'ring-1 ring-vega-light-300 dark:ring-vega-dark-300':
-        currentMarketId === market.id,
-    }
-  );
   return (
     <div style={style} className="my-0.5 px-4">
-      <Link
-        to={`/markets/${market.id}`}
-        className={wrapperClasses}
-        onClick={() => {
-          onSelect && onSelect(market.id);
-        }}
-      >
+      <Link to={`/markets/${market.id}`} className="block">
         <MarketData market={market} />
       </Link>
     </div>
@@ -89,6 +73,37 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
       ? addDecimalsFormatNumber(vol, market.positionDecimalPlaces)
       : '0.00';
 
+  return (
+    <div className="grid gap-2 grid-cols-[120px_1fr_120px]">
+      <div>
+        <div className="text-ellipsis">
+          {market.tradableInstrument.instrument.code}
+        </div>
+        {mode && (
+          <p className="text-xs text-vega-orange-500 dark:text-vega-orange-550 whitespace-nowrap">
+            {mode}
+          </p>
+        )}
+      </div>
+      <div>
+        <DataRow value={volume} label={t('24h vol')} />
+        <DataRow
+          value={price}
+          label={instrument.product.settlementAsset.symbol}
+        />
+      </div>
+      <div>
+        {oneDayCandles && (
+          <Sparkline
+            width={120}
+            height={20}
+            data={oneDayCandles.map((c) => Number(c.close))}
+          />
+        )}
+      </div>
+    </div>
+  );
+
   return (
     <>
       <div className="flex items-end gap-1 mb-1">

apps/trading/client-pages/market/market-selector.tsx

@@ -11,7 +11,6 @@ import type { CSSProperties } from 'react';
 import { useCallback, useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import { useMarketSelectorList } from './use-market-selector-list';
 import type { ProductType } from './product-selector';
 import { Product, ProductSelector } from './product-selector';
@@ -48,11 +47,8 @@ export const MarketSelector = ({
   const { markets, data, loading, error } = useMarketSelectorList(filter);
 
   return (
-    <div
-      className="grid grid-rows-[min-content_1fr_min-content] h-full"
-      data-testid="market-selector"
-    >
-      <div className="px-4 pt-2 pb-4">
+    <div data-testid="market-selector">
+      <div className="pt-2 px-4 mb-2">
         <ProductSelector
           product={filter.product}
           onSelect={(product) => {
@@ -149,18 +145,6 @@ export const MarketSelector = ({
           }
         />
       </div>
-      <div className="px-4 py-2">
-        <span className="inline-block border-b border-black dark:border-white">
-          <Link
-            to={'/markets/all'}
-            data-testid="all-markets-link"
-            className="flex items-center gap-x-2"
-          >
-            {t('All markets')}
-            <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
-          </Link>
-        </span>
-      </div>
     </div>
   );
 };
@@ -185,21 +169,17 @@ const MarketList = ({
     return <div>{error.message}</div>;
   }
   return (
-    <AutoSizer>
-      {({ width, height }) => (
-        <TinyScroll>
-          <List
-            data={data}
-            loading={loading}
-            width={width}
-            height={height}
-            currentMarketId={currentMarketId}
-            onSelect={onSelect}
-            noItems={noItems}
-          />
-        </TinyScroll>
-      )}
-    </AutoSizer>
+    <TinyScroll>
+      <List
+        data={data}
+        loading={loading}
+        width={400}
+        height={400}
+        currentMarketId={currentMarketId}
+        onSelect={onSelect}
+        noItems={noItems}
+      />
+    </TinyScroll>
   );
 };
 
@@ -274,7 +254,7 @@ const List = ({
       className="virtualized-list"
       itemCount={data.length}
       itemData={itemData}
-      itemSize={130}
+      itemSize={50}
       itemKey={itemKey}
       width={width}
       height={height}

apps/trading/client-pages/market/trade-grid.tsx

@@ -8,7 +8,13 @@ import { t } from '@vegaprotocol/i18n';
 import { OracleBanner } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
-import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
+import {
+  Popover,
+  Tab,
+  LocalStoragePersistTabs as Tabs,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { HeaderTitle } from '../../components/header';
@@ -19,6 +25,7 @@ import {
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
 import { HeaderStats } from './header-stats';
+import { MarketSelector } from './market-selector';
 interface TradeGridProps {
   market: Market | null;
   onSelect: (marketId: string, metaKey?: boolean) => void;
@@ -167,6 +174,9 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
             primaryContent={market?.tradableInstrument.instrument.code}
             secondaryContent={market?.tradableInstrument.instrument.name}
           />
+          <Popover trigger={<VegaIcon name={VegaIconNames.CHEVRON_DOWN} />}>
+            <MarketSelector currentMarketId={market?.id} />
+          </Popover>
         </div>
       </div>
       <div className="border-b border-default min-w-0">

libs/ui-toolkit/src/components/popover/popover.tsx

@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { Icon } from '../icon';
+import { VegaIcon, VegaIconNames } from '../icon';
 
 export interface PopoverProps extends PopoverPrimitive.PopoverProps {
   trigger: React.ReactNode | string;
@@ -23,14 +23,14 @@ export const Popover = ({
         <PopoverPrimitive.Content
           data-testid="popover-content"
           align="start"
-          className="p-4 rounded bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 border border-neutral-400"
+          className="rounded bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 border border-neutral-400"
           sideOffset={10}
         >
           <PopoverPrimitive.Close
             className="px-4 py-2 absolute top-0 right-0 z-20"
             data-testid="dialog-close"
           >
-            <Icon name="cross" />
+            <VegaIcon name={VegaIconNames.CROSS} />
           </PopoverPrimitive.Close>
           {children}
         </PopoverPrimitive.Content>