From c552a22af85bc8b454b67fd453d9369bcf607936 Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Wed, 18 Jan 2023 12:39:55 -0500
Subject: [PATCH] feat(#2560): show market code and name in the trading header
 (#2659)

---
 .../trading/client-pages/liquidity/liquidity.tsx |  2 +-
 .../client-pages/market/trade-market-header.tsx  |  1 +
 apps/trading/components/header/header.tsx        |  4 ++--
 .../components/select-market/select-market.tsx   | 16 ++++++++++++----
 .../vega-wallet-connect-button.tsx               |  6 +++---
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/trading/client-pages/liquidity/liquidity.tsx b/apps/trading/client-pages/liquidity/liquidity.tsx
index 9cbbe5017..84db6e3dc 100644
--- a/apps/trading/client-pages/liquidity/liquidity.tsx
+++ b/apps/trading/client-pages/liquidity/liquidity.tsx
@@ -226,7 +226,7 @@ export const LiquidityViewContainer = ({
             market?.tradableInstrument.instrument.name &&
             marketId && (
               <Link to={Links[Routes.MARKET](marketId)}>
-                <UiToolkitLink className="sm:text-lg md:text-xl lg:text-2xl flex items-center gap-2 whitespace-nowrap hover:text-neutral-500 dark:hover:text-neutral-300">
+                <UiToolkitLink className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
                   {`${market?.tradableInstrument.instrument.name} ${t(
                     'liquidity provision'
                   )}`}
diff --git a/apps/trading/client-pages/market/trade-market-header.tsx b/apps/trading/client-pages/market/trade-market-header.tsx
index 629241077..3a9c10c5b 100644
--- a/apps/trading/client-pages/market/trade-market-header.tsx
+++ b/apps/trading/client-pages/market/trade-market-header.tsx
@@ -44,6 +44,7 @@ export const TradeMarketHeader = ({
     <Header
       title={
         <SelectMarketPopover
+          marketCode={market?.tradableInstrument.instrument.code || NO_MARKET}
           marketName={market?.tradableInstrument.instrument.name || NO_MARKET}
           onSelect={onSelect}
           onCellClick={onCellClick}
diff --git a/apps/trading/components/header/header.tsx b/apps/trading/components/header/header.tsx
index 152d7c46a..d1a78c5d2 100644
--- a/apps/trading/components/header/header.tsx
+++ b/apps/trading/components/header/header.tsx
@@ -10,8 +10,8 @@ interface TradeMarketHeaderProps {
 
 export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   return (
-    <header className="w-screen xl:px-4 pt-3 border-b border-default">
-      <div className="xl:flex xl:gap-4  items-start">
+    <header className="w-screen xl:px-4 pt-2 border-b border-default">
+      <div className="xl:flex xl:gap-4 items-center">
         <div className="mb-4 xl:mb-0 px-4 xl:px-0">{title}</div>
         <div
           data-testid="header-summary"
diff --git a/apps/trading/components/select-market/select-market.tsx b/apps/trading/components/select-market/select-market.tsx
index f2477af20..facbe7446 100644
--- a/apps/trading/components/select-market/select-market.tsx
+++ b/apps/trading/components/select-market/select-market.tsx
@@ -91,16 +91,16 @@ export const SelectAllMarketsTableBody = ({
 };
 
 export const SelectMarketPopover = ({
+  marketCode,
   marketName,
   onSelect,
   onCellClick,
 }: {
+  marketCode: string;
   marketName: string;
   onSelect: (id: string) => void;
   onCellClick: OnCellClickHandler;
 }) => {
-  const triggerClasses =
-    'sm:text-lg md:text-xl lg:text-2xl flex items-center gap-2 whitespace-nowrap hover:text-neutral-500 dark:hover:text-neutral-300 mt-1';
   const { pubKey } = useVegaWallet();
   const [open, setOpen] = useState(false);
   const inViewRoot = useRef<HTMLDivElement>(null);
@@ -150,8 +150,16 @@ export const SelectMarketPopover = ({
       open={open}
       onChange={setOpen}
       trigger={
-        <span className={triggerClasses}>
-          {marketName}
+        <span className="flex items-center gap-2">
+          <span>
+            <span className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
+              {marketCode}
+            </span>
+            <span className="sm:text-xs text-sm flex items-center gap-2 whitespace-nowrap text-neutral-500 dark:text-neutral-400 pb-2">
+              {marketName}
+            </span>
+          </span>
+
           <Icon name="chevron-down" className={iconClass} size={6} />
         </span>
       }
diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
index d27ad65ae..7833ca1b3 100644
--- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
+++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
@@ -70,7 +70,7 @@ const MobileWalletButton = ({
     [selectPubKey]
   );
   return (
-    <div className="md:hidden overflow-hidden flex" ref={setContainer}>
+    <div className="lg:hidden overflow-hidden flex" ref={setContainer}>
       <Drawer
         dataTestId="wallets-drawer"
         open={drawerOpen}
@@ -141,7 +141,7 @@ export const VegaWalletConnectButton = () => {
   if (isConnected && pubKeys) {
     return (
       <>
-        <div className="hidden md:block">
+        <div className="hidden lg:block">
           <DropdownMenu open={dropdownOpen}>
             <DropdownMenuTrigger
               data-testid="manage-vega-wallet"
@@ -183,7 +183,7 @@ export const VegaWalletConnectButton = () => {
         data-testid="connect-vega-wallet"
         onClick={openVegaWalletDialog}
         size="sm"
-        className="hidden md:block"
+        className="hidden lg:block"
       >
         <span className="whitespace-nowrap">{t('Connect Vega wallet')}</span>
       </Button>