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>
2022-09-06 08:13:17 +02:00 · 2022-09-06 08:13:17 +02:00 · 7fe282a9fb
commit 7fe282a9fb
parent 5eb06254de
15 changed files with 32 additions and 194 deletions
--- a/apps/console-lite-e2e/src/integration/market-selector.test.ts
+++ b/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.data.market.state === 'STATE_ACTIVE' &&
-          market.name.match(/aa/i)
+        (market) => market.state === 'STATE_ACTIVE' && market.name.match(/aa/i)
      );
      cy.getByTestId('market-pane')
        .children()
--- a/apps/console-lite-e2e/src/support/mocks/commons.ts
+++ b/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: {
-    market: {
-      id: 'first-btcusd-id',
-      state: 'STATE_ACTIVE',
-      __typename: 'Market',
-    },
-    __typename: 'MarketData',
-  },
+  state: 'STATE_ACTIVE',
  tradableInstrument: {
    instrument: {
      code: 'AAVEDAI.MF21',
--- a/apps/console-lite-e2e/src/support/mocks/generate-markets.ts
+++ b/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 };
--- a/apps/console-lite/src/app/components/drawer/drawer.tsx
+++ b/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,
--- a/apps/console-lite/src/app/components/header/header.tsx
+++ b/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 />
--- a/apps/console-lite/src/app/components/simple-market-list/generated/SimpleMarkets.ts
+++ b/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.
   */
--- a/apps/console-lite/src/app/components/simple-market-list/constants.ts
+++ b/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'];
--- a/apps/console-lite/src/app/components/simple-market-list/data-provider.ts
+++ b/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
  });
--- a/apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx
+++ b/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: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
+        state: MarketState.STATE_ACTIVE,
        tradableInstrument: {
          instrument: {
            product: {
@ -86,11 +82,7 @@ describe('SimpleMarketList', () => {
      },
      {
        id: '2',
-        data: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
+        state: MarketState.STATE_ACTIVE,
        tradableInstrument: {
          instrument: {
            product: {
--- a/apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx
+++ b/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>
--- a/apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx
+++ b/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="pb-8">
+      <div className="grid gap-4 pb-2 mt-2 md:mt-6 md:grid-cols-[min-content,min-content,1fr]">
+        <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')}
          >
--- a/apps/console-lite/src/app/constants/index.ts
+++ b/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'),
--- a/apps/console-lite/src/app/hooks/use-column-definitions.tsx
+++ b/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">
-              {MARKET_STATES_MAP[data.data?.market.state || '']}
+            <div className="border text-center px-2 md:px-6 leading-4 md:leading-6">
+              {MARKET_STATES_MAP[data.state || '']}
            </div>
          </div>
        ),
--- a/apps/console-lite/src/app/hooks/use-markets-filter-data.ts
+++ b/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;
--- a/libs/react-helpers/src/hooks/use-screen-dimensions.ts
+++ b/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;
        }