feat(trading): mobile header

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

@@ -11,11 +11,9 @@ import {
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
-import { MarketBanner } from '../../components/market-banner';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { type TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
-
 interface TradePanelsProps {
   market: Market;
   pinnedAsset?: PinnedAsset;
@@ -72,9 +70,6 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
 
   return (
     <div className="h-full flex flex-col lg:grid grid-rows-[min-content_min-content_1fr_min-content]">
-      <div>
-        <MarketBanner market={market} />
-      </div>
       <div className="flex flex-col w-full overflow-hidden">
         <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
           {['chart', 'orderbook', 'trades', 'liquidity', 'fundingPayments']

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -3,14 +3,10 @@ import { Outlet } from 'react-router-dom';
 import { Sidebar, SidebarContent, useSidebar } from '../sidebar';
 import classNames from 'classnames';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { MarketHeader, MobileMarketHeader } from '../market-header';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
-export const LayoutWithSidebar = ({
-  header,
-  sidebar,
-}: {
-  header?: ReactNode;
-  sidebar?: ReactNode;
-}) => {
+export const LayoutWithSidebar = ({ sidebar }: { sidebar?: ReactNode }) => {
   const currentRouteId = useGetCurrentRouteId();
   const views = useSidebar((store) => store.views);
   const sidebarView = views[currentRouteId] || null;
@@ -22,10 +18,13 @@ export const LayoutWithSidebar = ({
     'lg:grid-cols-[1fr_280px_40px]',
     'xxxl:grid-cols-[1fr_320px_40px]'
   );
+  const { isMobile } = useScreenDimensions();
 
   return (
     <div className={gridClasses}>
-      <div className="col-span-full">{header}</div>
+      <div className="col-span-full">
+        {isMobile ? <MobileMarketHeader /> : <MarketHeader />}
+      </div>
       <main
         className={classNames(
           'col-start-1 col-end-1 overflow-y-auto grow lg:grow-0',

apps/trading/components/market-header/index.ts

@@ -1 +1,2 @@
 export * from './market-header';
+export * from './mobile-market-header';

apps/trading/components/market-header/mobile-market-header.tsx

@@ -1,16 +1,21 @@
 import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { MarketSelector } from '../market-selector';
-import { useMarket, useMarketList } from '@vegaprotocol/markets';
+import {
+  Last24hPriceChange,
+  useMarket,
+  useMarketList,
+} from '@vegaprotocol/markets';
 import { useParams } from 'react-router-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useState } from 'react';
 import { useT } from '../../lib/use-t';
 import classNames from 'classnames';
-
+import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
+import { MarketMarkPrice } from '../market-mark-price';
 /**
  * This is only rendered for the mobile navigation
  */
-export const NavHeader = () => {
+export const MobileMarketHeader = () => {
   const t = useT();
   const { marketId } = useParams();
   const { data } = useMarket(marketId);
@@ -24,14 +29,14 @@ export const NavHeader = () => {
   if (!marketId) return null;
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="p-2 flex items-center gap-4 h-10 pr-1 border-b border-default bg-vega-clight-700 dark:bg-vega-cdark-700">
       <FullScreenPopover
         open={openMarket}
         onOpenChange={(x) => {
           setOpenMarket(x);
         }}
         trigger={
-          <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-sm md:text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
+          <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-lg md:text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
             {data
               ? data.tradableInstrument.instrument.code
               : t('Select market')}
@@ -43,7 +48,7 @@ export const NavHeader = () => {
                 }
               )}
             >
-              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={12} />
+              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={16} />
             </span>
           </h1>
         }
@@ -60,8 +65,19 @@ export const NavHeader = () => {
           setOpenPrice(x);
         }}
         trigger={
-          <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-xs md:text-md whitespace-nowrap xl:pr-4 xl:border-r border-default">
-            44,500
+          <h1 className="flex gap-1 items-center text-sm md:text-md whitespace-nowrap xl:pr-4 xl:border-r border-default">
+            {data && (
+              <>
+                <Last24hPriceChange
+                  marketId={data.id}
+                  decimalPlaces={data.decimalPlaces}
+                />
+                <MarketMarkPrice
+                  marketId={data.id}
+                  decimalPlaces={data.decimalPlaces}
+                />
+              </>
+            )}
             <span
               className={classNames(
                 'transition-transform ease-in-out duration-300',
@@ -70,16 +86,14 @@ export const NavHeader = () => {
                 }
               )}
             >
-              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={12} />
+              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={16} />
             </span>
           </h1>
         }
       >
-        <MarketSelector
-          currentMarketId={marketId}
-          onSelect={() => setOpenMarket(false)}
-        />
-        {/* <MarketHeader /> */}
+        <div className="p-2 text-sm">
+          {data && <MarketHeaderStats market={data} />}
+        </div>
       </FullScreenPopover>
     </div>
   );
@@ -103,7 +117,7 @@ export const FullScreenPopover = ({
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           data-testid="popover-content"
-          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 text-default border border-default"
+          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 border border-default"
           sideOffset={5}
         >
           {children}

apps/trading/components/navbar/index.tsx

@@ -1,2 +1 @@
 export * from './navbar';
-export * from './nav-header';

apps/trading/pages/_app.page.tsx

@@ -25,7 +25,6 @@ import {
   ProtocolUpgradeProposalNotification,
 } from '@vegaprotocol/proposals';
 import { ViewingBanner } from '../components/viewing-banner';
-import { NavHeader } from '../components/navbar/nav-header';
 import { Telemetry } from '../components/telemetry';
 import { Routes as AppRoutes } from '../lib/links';
 import { SSRLoader } from './ssr-loader';
@@ -33,7 +32,6 @@ import { PartyActiveOrdersHandler } from './party-active-orders-handler';
 import { MaybeConnectEagerly } from './maybe-connect-eagerly';
 import { TransactionHandlers } from './transaction-handlers';
 import { useT } from '../lib/use-t';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
 const Title = () => {
   const t = useT();
@@ -65,8 +63,6 @@ function AppBody({ Component }: AppProps) {
     'grid relative h-full z-0',
     'grid-rows-[repeat(3,min-content),minmax(0,1fr)]'
   );
-
-  const { isMobile } = useScreenDimensions();
   return (
     <div className="h-full overflow-hidden">
       <Head>
@@ -83,10 +79,7 @@ function AppBody({ Component }: AppProps) {
             // render nothing for markets/all, otherwise markets/:marketId will match with markets/all
             element={null}
           />
-          <Route
-            path={AppRoutes.MARKET}
-            element={isMobile ? <NavHeader /> : null}
-          />
+          <Route path={AppRoutes.MARKET} />
         </Routes>
         <div data-testid="banners">
           <ProtocolUpgradeProposalNotification

libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx

@@ -11,6 +11,7 @@ import { useCandles } from '../../hooks/use-candles';
 import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
 import { useT } from '../../use-t';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
 interface Props {
   marketId?: string;
@@ -26,6 +27,7 @@ export const Last24hPriceChange = ({
   initialValue,
 }: Props) => {
   const t = useT();
+  const { isMobile } = useScreenDimensions();
   const { oneDayCandles, error, fiveDaysCandles } = useCandles({
     marketId,
   });
@@ -34,6 +36,10 @@ export const Last24hPriceChange = ({
     fiveDaysCandles.length > 0 &&
     (!oneDayCandles || oneDayCandles?.length === 0)
   ) {
+    // if there is no change and no percentage, we don't show anything on mobile
+    if (isMobile) {
+      return null;
+    }
     return (
       <Tooltip
         description={
@@ -61,6 +67,11 @@ export const Last24hPriceChange = ({
   const change = priceChange(candles);
   const changePercentage = priceChangePercentage(candles);
 
+  // if there is no change and no percentage, we don't show anything on mobile
+  if (!change && !changePercentage && isMobile) {
+    return null;
+  }
+
   return (
     <span
       className={classNames(