feat: [console-lite] - refactor market-list view afetr design update (#1244)

* feat: [console-lite] - refactor market-list view afetr design update

* feat: [console-lite] - refactor market-list fix failing test

* feat: [console-lite] - refactor market-list fix failing test

* feat: [console-lite] - refactor market-list fix failing test

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/console-lite-e2e/src/integration/market-selector.test.ts

@@ -69,9 +69,7 @@ describe('market selector', () => {
       cy.get('input[placeholder="Search"]').clear();
       cy.get('input[placeholder="Search"]').type('aa');
       const filtered = markets.filter(
-        (market) =>
+        (market) => market.state === 'STATE_ACTIVE' && market.name.match(/aa/i)
-          market.data.market.state === 'STATE_ACTIVE' &&
-          market.name.match(/aa/i)
       );
       cy.getByTestId('market-pane')
         .children()

apps/console-lite-e2e/src/support/mocks/commons.ts

@@ -76,14 +76,7 @@ const protoCandles = [
 export const protoMarket = {
   id: 'first-btcusd-id',
   name: 'AAVEDAI Monthly (30 Jun 2022)',
-  data: {
+  state: 'STATE_ACTIVE',
-    market: {
-      id: 'first-btcusd-id',
-      state: 'STATE_ACTIVE',
-      __typename: 'Market',
-    },
-    __typename: 'MarketData',
-  },
   tradableInstrument: {
     instrument: {
       code: 'AAVEDAI.MF21',

apps/console-lite-e2e/src/support/mocks/generate-markets.ts

@@ -8,14 +8,6 @@ export const generateSimpleMarkets = () => {
         id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
         name: 'CELUSD (June 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
-            state: 'STATE_PENDING',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'CELUSD',
@@ -45,14 +37,6 @@ export const generateSimpleMarkets = () => {
         id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
         name: 'XMRUSD market',
         state: 'Suspended',
-        data: {
-          market: {
-            id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'XMRUSD',
@@ -82,14 +66,6 @@ export const generateSimpleMarkets = () => {
         id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
         name: 'UNIDAI Monthly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
-            state: 'STATE_SUSPENDED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'UNIDAI.MF21',
@@ -193,14 +169,6 @@ export const generateSimpleMarkets = () => {
         id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
         name: 'XMRUSD market',
         state: 'Pending',
-        data: {
-          market: {
-            id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'XMRUSD',
@@ -303,14 +271,6 @@ export const generateSimpleMarkets = () => {
         id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
         name: 'ApeCoin (18 Jul 2022)',
         state: 'Closed',
-        data: {
-          market: {
-            id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'APE/USD',
@@ -339,14 +299,6 @@ export const generateSimpleMarkets = () => {
         id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
         name: 'BTCUSD Monthly (18 Jul 2022)',
         state: 'Settled',
-        data: {
-          market: {
-            id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -377,14 +329,6 @@ export const generateSimpleMarkets = () => {
         id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
         name: 'Builders Club x ETHcc',
         state: 'Settled',
-        data: {
-          market: {
-            id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'LTCUSD',
@@ -475,14 +419,6 @@ export const generateSimpleMarkets = () => {
         id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
         name: 'BTCUSD Monthly (18 Jul 2022)',
         state: 'Pending',
-        data: {
-          market: {
-            id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -513,14 +449,6 @@ export const generateSimpleMarkets = () => {
         id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
         name: 'ETHBTC Quarterly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'ETHBTC.QM21',
@@ -624,14 +552,6 @@ export const generateSimpleMarkets = () => {
         id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
         name: 'Apple Monthly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'AAPL.MF21',
@@ -736,14 +656,6 @@ export const generateSimpleMarkets = () => {
         id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
         name: 'Tesla Quarterly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'TSLA.QM21',
@@ -848,14 +760,6 @@ export const generateSimpleMarkets = () => {
         id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
         name: 'Go big or Go home',
         state: 'Active',
-        data: {
-          market: {
-            id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
-            state: 'STATE_SUSPENDED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'LTCUSD',
@@ -899,14 +803,6 @@ export const generateSimpleMarkets = () => {
         id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
         name: 'BTCUSD Monthly (08 Jul 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -937,14 +833,6 @@ export const generateSimpleMarkets = () => {
         id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
         name: 'BTCUSD Monthly (18 Jul 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -983,10 +871,6 @@ export const generateLongListMarkets = (count: number) => {
       ...protoMarket,
       id: id + i,
       name: name + i,
-      data: {
-        ...protoMarket.data,
-        id: id + i,
-      },
     });
   }
   return { markets };

apps/console-lite/src/app/components/drawer/drawer.tsx

@@ -22,9 +22,8 @@ export const NavigationDrawer = ({
   const width = 'w-full md:w-auto md:min-w-[15%] shrink-0';
   const position = 'absolute inset-0 h-full z-10 md:static';
   const background = 'bg-black/50 dark:bg-white/50';
-  const border = 'border-r border-neutral-300 dark:border-neutral-700';
   const flex = 'flex justify-end overflow-hidden';
-  const joinedClasses = [flex, width, position, background, border].join(' ');
+  const joinedClasses = [flex, width, position, background].join(' ');
 
   const outerStyles = classNames(joinedClasses, {
     visible: isMenuOpen,

apps/console-lite/src/app/components/header/header.tsx

@@ -12,7 +12,7 @@ const Header = () => {
   } = useContext(LocalContext);
   return (
     <div
-      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400 border-b border-neutral-300 dark:border-neutral-700"
+      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400"
       data-testid="header"
     >
       <Logo />

apps/console-lite/src/app/components/simple-market-list/__generated__/SimpleMarkets.ts

@@ -9,26 +9,6 @@ import { MarketState } from "@vegaprotocol/types";
 // GraphQL query operation: SimpleMarkets
 // ====================================================
 
-export interface SimpleMarkets_markets_data_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarkets_markets_data {
-  __typename: "MarketData";
-  /**
-   * market ID of the associated mark price
-   */
-  market: SimpleMarkets_markets_data_market;
-}
-
 export interface SimpleMarkets_markets_tradableInstrument_instrument_metadata {
   __typename: "InstrumentMetadata";
   /**
@@ -107,10 +87,6 @@ export interface SimpleMarkets_markets {
    * Current state of the market
    */
   state: MarketState;
-  /**
-   * marketData for the given market
-   */
-  data: SimpleMarkets_markets_data | null;
   /**
    * An instance of, or reference to, a tradable instrument.
    */

apps/console-lite/src/app/components/simple-market-list/constants.ts

@@ -195,3 +195,5 @@ export const ROW_CLASS_RULES = {
   'cursor-pointer': ({ data }: { data: SimpleMarkets_markets }) =>
     IS_MARKET_TRADABLE(data || {}),
 };
+
+export const LARGE_SCREENS = ['xl', 'xxl'];

apps/console-lite/src/app/components/simple-market-list/data-provider.ts

@@ -10,25 +10,12 @@ import type {
   SimpleMarketDataSub_marketData,
 } from './__generated__/SimpleMarketDataSub';
 
-const MARKET_DATA_FRAGMENT = gql`
-  fragment SimpleMarketDataFields on MarketData {
-    market {
-      id
-      state
-    }
-  }
-`;
-
 export const MARKETS_QUERY = gql`
-  ${MARKET_DATA_FRAGMENT}
   query SimpleMarkets($CandleSince: String!) {
     markets {
       id
       name
       state
-      data {
-        ...SimpleMarketDataFields
-      }
       tradableInstrument {
         instrument {
           code
@@ -55,10 +42,12 @@ export const MARKETS_QUERY = gql`
 `;
 
 const MARKET_DATA_SUB = gql`
-  ${MARKET_DATA_FRAGMENT}
   subscription SimpleMarketDataSub {
     marketData {
-      ...SimpleMarketDataFields
+      market {
+        id
+        state
+      }
     }
   }
 `;
@@ -78,7 +67,7 @@ const update = (
   return produce(data, (draft) => {
     const index = draft.findIndex((m) => m.id === delta.market.id);
     if (index !== -1) {
-      draft[index].data = delta;
+      draft[index].state = delta.market.state;
     }
     // @TODO - else push new market to draft
   });

apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx

@@ -66,11 +66,7 @@ describe('SimpleMarketList', () => {
     const data = [
       {
         id: '1',
-        data: {
+        state: MarketState.STATE_ACTIVE,
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
         tradableInstrument: {
           instrument: {
             product: {
@@ -86,11 +82,7 @@ describe('SimpleMarketList', () => {
       },
       {
         id: '2',
-        data: {
+        state: MarketState.STATE_ACTIVE,
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
         tradableInstrument: {
           instrument: {
             product: {

apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx

@@ -45,7 +45,7 @@ export type RouterParams = Partial<{
 }>;
 
 const SimpleMarketList = () => {
-  const { isMobile } = useScreenDimensions();
+  const { isMobile, screenSize } = useScreenDimensions();
   const navigate = useNavigate();
   const params = useParams<RouterParams>();
   const theme = useContext(ThemeContext);
@@ -80,7 +80,7 @@ const SimpleMarketList = () => {
   useEffect(() => {
     const statuses: Record<string, MarketState | ''> = {};
     data?.forEach((market) => {
-      statuses[market.id] = market.data?.market.state || '';
+      statuses[market.id] = market.state || '';
     });
     statusesRef.current = statuses;
   }, [data, statusesRef]);
@@ -129,6 +129,10 @@ const SimpleMarketList = () => {
     [handleRowClicked]
   );
 
+  const shouldSuppressHorizontalScroll = useMemo(() => {
+    return !isMobile && constants.LARGE_SCREENS.includes(screenSize);
+  }, [isMobile, screenSize]);
+
   return (
     <div className="h-full p-4 md:p-6 grid grid-rows-[min-content,1fr]">
       <SimpleMarketToolbar data={data || []} />
@@ -156,6 +160,7 @@ const SimpleMarketList = () => {
           suppressRowTransform
           onCellKeyDown={onCellKeyDown}
           tabToNextCell={onTabToNextCell}
+          suppressHorizontalScroll={shouldSuppressHorizontalScroll}
         />
       </AsyncRenderer>
     </div>

apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx

@@ -75,7 +75,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
   );
 
   return (
-    <div className="w-full max-w-full mb-4 font-alpha">
+    <div className="w-full max-w-full mb-2 md:mb-8 font-alpha">
       <ul
         ref={slideContRef}
         className="grid grid-flow-col auto-cols-min gap-4 relative pb-2 mb-2"
@@ -121,8 +121,8 @@ const SimpleMarketToolbar = ({ data }: Props) => {
           style={sliderStyles}
         />
       </ul>
-      <div className="grid gap-8 pb-4 mt-6 md:grid-cols-[min-content,min-content,1fr]">
+      <div className="grid gap-4 pb-2 mt-2 md:mt-6 md:grid-cols-[min-content,min-content,1fr]">
-        <div className="pb-8">
+        <div className="pb-2">
           <DropdownMenu onOpenChange={(open) => setOpen(open)}>
             <DropdownMenuTrigger
               className="mr-2 w-auto text-capMenu text-black dark:text-white"
@@ -148,7 +148,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
             <DropdownMenuContent>
               {STATES_FILTER.map(({ value, text }) => (
                 <DropdownMenuCheckboxItem
-                  className="uppercase text-ui dark:text-white"
+                  className="uppercase text-ui"
                   key={value}
                   checked={
                     value === params.state ||
@@ -170,7 +170,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
         </div>
         {activeNumber > 0 && (
           <ul
-            className="md:gap-6 gap-4 pb-4 md:ml-2 flex flex-wrap"
+            className="md:gap-x-6 gap-x-4 gap-y-1 pb-2 md:ml-2 flex flex-wrap"
             data-testid="market-assets-menu"
             aria-label={t('Asset on the market')}
           >

apps/console-lite/src/app/constants/index.ts

@@ -10,7 +10,7 @@ export const TRADABLE_STATES = {
 };
 
 export const IS_MARKET_TRADABLE = (market: SimpleMarkets_markets) =>
-  Boolean((market.data?.market.state ?? '') in TRADABLE_STATES && market?.id);
+  Boolean((market.state ?? '') in TRADABLE_STATES && market?.id);
 
 export const MARKET_STATES_MAP: Record<MarketState | '', string> = {
   [MarketState.STATE_ACTIVE]: t('Active'),

apps/console-lite/src/app/hooks/use-column-definitions.tsx

@@ -93,13 +93,13 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
       {
         colId: 'status',
         headerName: t('Status'),
-        field: 'data.market.state',
+        field: 'state',
         headerClass: 'uppercase',
         minWidth: 100,
         cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
           <div className="uppercase flex h-full items-center justify-center">
-            <div className="border text-center px-2 md:px-8 leading-4 md:leading-6">
+            <div className="border text-center px-2 md:px-6 leading-4 md:leading-6">
-              {MARKET_STATES_MAP[data.data?.market.state || '']}
+              {MARKET_STATES_MAP[data.state || '']}
             </div>
           </div>
         ),

apps/console-lite/src/app/hooks/use-markets-filter-data.ts

@@ -27,7 +27,7 @@ const useMarketsFilterData = (
         : params.state
         ? params.state
         : MarketState.STATE_ACTIVE;
-    if (state && state !== item.data?.market.state) {
+    if (state && state !== item.state) {
       return false;
     }
     return true;

libs/react-helpers/src/hooks/use-screen-dimensions.ts

@@ -7,7 +7,7 @@ type Screen = keyof typeof theme.screens;
 
 interface Props {
   isMobile: boolean;
-  screen: Screen;
+  screenSize: Screen;
   width: number;
 }
 
@@ -17,7 +17,7 @@ export const useScreenDimensions = (): Props => {
     () => ({
       width,
       isMobile: width < parseInt(theme.screens.md),
-      screen: Object.entries(theme.screens).reduce((agg: Screen, entry) => {
+      screenSize: Object.entries(theme.screens).reduce((agg: Screen, entry) => {
         if (width > parseInt(entry[1])) {
           agg = entry[0] as Screen;
         }