From 7fe282a9fbb0f06d183bdfc1568a774bb99d52bb Mon Sep 17 00:00:00 2001 From: macqbat Date: Tue, 6 Sep 2022 08:13:17 +0200 Subject: [PATCH] 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 --- .../src/integration/market-selector.test.ts | 4 +- .../src/support/mocks/commons.ts | 9 +- .../src/support/mocks/generate-markets.ts | 116 ------------------ .../src/app/components/drawer/drawer.tsx | 3 +- .../src/app/components/header/header.tsx | 2 +- .../__generated__/SimpleMarkets.ts | 24 ---- .../simple-market-list/constants.ts | 2 + .../simple-market-list/data-provider.ts | 21 +--- .../simple-market-list.spec.tsx | 12 +- .../simple-market-list/simple-market-list.tsx | 9 +- .../simple-market-toolbar.tsx | 10 +- apps/console-lite/src/app/constants/index.ts | 2 +- .../src/app/hooks/use-column-definitions.tsx | 6 +- .../src/app/hooks/use-markets-filter-data.ts | 2 +- .../src/hooks/use-screen-dimensions.ts | 4 +- 15 files changed, 32 insertions(+), 194 deletions(-) diff --git a/apps/console-lite-e2e/src/integration/market-selector.test.ts b/apps/console-lite-e2e/src/integration/market-selector.test.ts index 352311f40..fef2122c8 100644 --- 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() diff --git a/apps/console-lite-e2e/src/support/mocks/commons.ts b/apps/console-lite-e2e/src/support/mocks/commons.ts index 0b7b90522..e0f67fb75 100644 --- 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', diff --git a/apps/console-lite-e2e/src/support/mocks/generate-markets.ts b/apps/console-lite-e2e/src/support/mocks/generate-markets.ts index 9a7b50bdd..114af877a 100644 --- 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 }; diff --git a/apps/console-lite/src/app/components/drawer/drawer.tsx b/apps/console-lite/src/app/components/drawer/drawer.tsx index 465124817..ef7fb9015 100644 --- 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, diff --git a/apps/console-lite/src/app/components/header/header.tsx b/apps/console-lite/src/app/components/header/header.tsx index bb3586cfd..ebc7b8410 100644 --- 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 (
diff --git 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 index 1e0ea0b65..ac8761d5a 100644 --- 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. */ diff --git a/apps/console-lite/src/app/components/simple-market-list/constants.ts b/apps/console-lite/src/app/components/simple-market-list/constants.ts index 523dca420..d834f7239 100644 --- 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']; diff --git 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 index 67a5d294e..2032149a1 100644 --- 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 }); diff --git 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 index 22caa75ee..3fe962126 100644 --- 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: { diff --git 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 index c42d935d3..0161cfaea 100644 --- 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(); const theme = useContext(ThemeContext); @@ -80,7 +80,7 @@ const SimpleMarketList = () => { useEffect(() => { const statuses: Record = {}; 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 (
@@ -156,6 +160,7 @@ const SimpleMarketList = () => { suppressRowTransform onCellKeyDown={onCellKeyDown} tabToNextCell={onTabToNextCell} + suppressHorizontalScroll={shouldSuppressHorizontalScroll} />
diff --git 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 index b87dbddab..0896095f9 100644 --- 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 ( -
+
    { style={sliderStyles} />
-
-
+
+
setOpen(open)}> { {STATES_FILTER.map(({ value, text }) => ( {
{activeNumber > 0 && (
    diff --git a/apps/console-lite/src/app/constants/index.ts b/apps/console-lite/src/app/constants/index.ts index feaea0f08..fc26ee723 100644 --- 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.STATE_ACTIVE]: t('Active'), diff --git a/apps/console-lite/src/app/hooks/use-column-definitions.tsx b/apps/console-lite/src/app/hooks/use-column-definitions.tsx index 5a8ea69c0..647b0e427 100644 --- 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 }) => (
    -
    - {MARKET_STATES_MAP[data.data?.market.state || '']} +
    + {MARKET_STATES_MAP[data.state || '']}
    ), diff --git a/apps/console-lite/src/app/hooks/use-markets-filter-data.ts b/apps/console-lite/src/app/hooks/use-markets-filter-data.ts index 7763209f1..71ca60f02 100644 --- 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; diff --git a/libs/react-helpers/src/hooks/use-screen-dimensions.ts b/libs/react-helpers/src/hooks/use-screen-dimensions.ts index 403fe1c5c..fb07b695a 100644 --- 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; }