From 0523b56e3908b0b0d115d3cb6d315170f9165195 Mon Sep 17 00:00:00 2001 From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com> Date: Thu, 11 Aug 2022 13:56:35 +0200 Subject: [PATCH] feat: market list mega dropdown (rich popover) (#889) * feat: use MarketList query only * fix: remove Market.ts from index * feat: 30 refactor dialog, market list, change query * feat: #30 add indicativeVolume, total fees, tooltip, large dialog, tooltip accepts html description * fix: #30 total fees display in tooltip * fix: #30 toggle title on dialog open * fix: #30 fix order, price, high, low utils * fix: #30 fix test for market utils * feat: #30 add popover with markets to select * feat: #30 storybook popover * feat: #30 remove border on trigger and add some other classes * fix: #30 fix format check with format:write * feat: #30 add tooltip on taker fee * feat: #30 add tooltip on taker fee * fix: #30 format on select market list * fix: #30 remove unknown cast in test mock data * fix: #30 show markets where you have open positions * fix: #30 double check if open positions * fix: #30 dialog has only small/large sizes * feat: #30 add border on trigger and change padding and no wrap * fix: #30 if fees or factors are not found * fix: #30 remove markets.cy tests as markets page is now gone * fix #30 remove view full market list test * fix: #30 add rotating arrow on market title * fix: #30 add ease-in-out on popover * fix: #30 add ease-in-out on popover * fix: #30 align select a market table * fix: #30 select a market title * fix: #30 select a market title * fix: #30 fix any validateDOMnesting issues * fix: #30 show loading market data * fix: #30 add list of header columns * fix: #30 add list of header columns * fix: #30 small refactoring after review * fix: #30 update bold undreline class names * fix: #30 add large-mobile size * feat: #30 refactor select markets tables to render array of columns * fix: #30 remove size from select market dialog * fix: #30 add extra file for columns * fix: #30 update formtting * fix: #30 make sure popup closes on same market navigation * fix: rename market-utils, add calcCandle methods, store market id on select * fix: useMemo ondata and marketPositionData + orderbook stories fix * feat: #30 add open volume positions * fix: add market summary back * fix: update formatting * fix: use currentcolor on arrow * fix: create all markets page * fix: add overflow-y auto * fix: enlarge select market to get started dialog * fix: revert markets container * fix: use query to fix flickering on position markets * fix: edit unordered list in tooltips * fix: fix tooltip table * fix: fix home.cy.ts * chore: skip /markets tests --- apps/trading-e2e/src/integration/home.cy.ts | 10 - .../trading-e2e/src/integration/markets.cy.ts | 4 +- apps/trading/components/navbar/navbar.tsx | 9 +- apps/trading/pages/index.page.tsx | 6 +- .../trading/pages/markets/[marketId].page.tsx | 26 +- apps/trading/pages/markets/trade-grid.tsx | 54 +- apps/trading/stores/global.ts | 6 + libs/accounts/src/index.ts | 7 +- libs/accounts/src/lib/__generated__/index.ts | 3 + libs/accounts/src/lib/index.ts | 5 + libs/candles-chart/src/index.ts | 6 +- .../src/lib/__generated__/index.ts | 4 + libs/candles-chart/src/lib/index.ts | 3 + .../src/components/info-market.tsx | 9 +- .../src/components/market-selector.tsx | 8 +- .../src/components/time-in-force-selector.tsx | 12 +- libs/market-depth/src/index.ts | 4 +- .../src/lib/__generated__/index.ts | 2 + libs/market-depth/src/lib/index.ts | 9 + .../src/lib/orderbook.stories.tsx | 9 +- libs/market-list/src/index.ts | 3 +- .../__generated__/MarketDataFields.ts | 4 + .../__generated__/MarketDataSub.ts | 4 + .../__generated__/MarketList.ts | 92 ++- .../__generated__/index.ts | 1 - libs/market-list/src/lib/components/index.ts | 4 +- .../src/lib/components/landing/index.ts | 3 - .../lib/components/landing/landing-dialog.tsx | 41 -- .../landing/select-market-dialog.spec.tsx | 33 -- .../landing/select-market-dialog.tsx | 28 - .../components/landing/select-market-list.tsx | 118 ---- .../__generated__/Markets.ts | 130 ----- .../lib/components/markets-container/index.ts | 4 - .../market-list-table.spec.tsx | 20 - .../markets-container/market-list-table.tsx | 16 +- .../markets-container/markets-container.tsx | 32 +- .../lib/components/select-market-columns.tsx | 543 ++++++++++++++++++ .../lib/components/select-market-table.tsx | 43 ++ ...t-list.spec.tsx => select-market.spec.tsx} | 62 +- .../src/lib/components/select-market.tsx | 249 ++++++++ libs/market-list/src/lib/index.ts | 4 + .../markets-data-provider.ts | 72 +-- libs/market-list/src/lib/utils/index.ts | 2 +- .../src/lib/utils/market-list.utils.spec.tsx | 151 ----- .../src/lib/utils/market-list.utils.ts | 39 -- .../src/lib/utils/market-utils.spec.tsx | 222 +++++++ .../market-list/src/lib/utils/market-utils.ts | 85 +++ .../components/order-list/order-list.spec.tsx | 1 - .../src/lib/__generated__/Positions.ts | 4 +- .../src/lib/positions-data-provider.ts | 2 +- .../src/components/arrows/arrow.tsx | 39 +- .../src/components/dialog/dialog.tsx | 20 +- libs/ui-toolkit/src/components/index.ts | 3 +- .../src/components/popover/index.ts | 1 + .../components/popover/popover.stories.tsx | 61 ++ .../src/components/popover/popover.tsx | 52 ++ .../resizable-panel/{index.tsx => index.ts} | 0 .../src/components/tooltip/tooltip.tsx | 2 +- package.json | 1 + yarn.lock | 154 +++++ 60 files changed, 1790 insertions(+), 751 deletions(-) create mode 100644 libs/accounts/src/lib/__generated__/index.ts create mode 100644 libs/accounts/src/lib/index.ts create mode 100644 libs/candles-chart/src/lib/__generated__/index.ts create mode 100644 libs/candles-chart/src/lib/index.ts create mode 100644 libs/market-depth/src/lib/__generated__/index.ts create mode 100644 libs/market-depth/src/lib/index.ts rename libs/market-list/src/lib/{components/markets-container => }/__generated__/MarketDataFields.ts (91%) rename libs/market-list/src/lib/{components/markets-container => }/__generated__/MarketDataSub.ts (92%) rename libs/market-list/src/lib/{components/markets-container => }/__generated__/MarketList.ts (60%) rename libs/market-list/src/lib/{components/markets-container => }/__generated__/index.ts (78%) delete mode 100644 libs/market-list/src/lib/components/landing/index.ts delete mode 100644 libs/market-list/src/lib/components/landing/landing-dialog.tsx delete mode 100644 libs/market-list/src/lib/components/landing/select-market-dialog.spec.tsx delete mode 100644 libs/market-list/src/lib/components/landing/select-market-dialog.tsx delete mode 100644 libs/market-list/src/lib/components/landing/select-market-list.tsx delete mode 100644 libs/market-list/src/lib/components/markets-container/__generated__/Markets.ts delete mode 100644 libs/market-list/src/lib/components/markets-container/market-list-table.spec.tsx create mode 100644 libs/market-list/src/lib/components/select-market-columns.tsx create mode 100644 libs/market-list/src/lib/components/select-market-table.tsx rename libs/market-list/src/lib/components/{landing/select-market-list.spec.tsx => select-market.spec.tsx} (68%) create mode 100644 libs/market-list/src/lib/components/select-market.tsx create mode 100644 libs/market-list/src/lib/index.ts rename libs/market-list/src/lib/{components/markets-container => }/markets-data-provider.ts (73%) delete mode 100644 libs/market-list/src/lib/utils/market-list.utils.spec.tsx delete mode 100644 libs/market-list/src/lib/utils/market-list.utils.ts create mode 100644 libs/market-list/src/lib/utils/market-utils.spec.tsx create mode 100644 libs/market-list/src/lib/utils/market-utils.ts create mode 100644 libs/ui-toolkit/src/components/popover/index.ts create mode 100644 libs/ui-toolkit/src/components/popover/popover.stories.tsx create mode 100644 libs/ui-toolkit/src/components/popover/popover.tsx rename libs/ui-toolkit/src/components/resizable-panel/{index.tsx => index.ts} (100%) diff --git a/apps/trading-e2e/src/integration/home.cy.ts b/apps/trading-e2e/src/integration/home.cy.ts index a3e8906df..e9c21313c 100644 --- a/apps/trading-e2e/src/integration/home.cy.ts +++ b/apps/trading-e2e/src/integration/home.cy.ts @@ -92,16 +92,6 @@ describe('home', () => { cy.getByTestId(selectMarketOverlay).should('not.exist'); cy.url().should('include', 'market-1'); }); - - it('view full market list goes to markets page', () => { - cy.getByTestId(selectMarketOverlay) - .should('exist') - .contains('Or view full market list') - .click(); - cy.getByTestId(selectMarketOverlay).should('not.exist'); - cy.url().should('include', '/markets'); - cy.get('main[data-testid="markets"]').should('exist'); - }); }); describe('no default found', () => { diff --git a/apps/trading-e2e/src/integration/markets.cy.ts b/apps/trading-e2e/src/integration/markets.cy.ts index d9c1b2431..432eb4b78 100644 --- a/apps/trading-e2e/src/integration/markets.cy.ts +++ b/apps/trading-e2e/src/integration/markets.cy.ts @@ -11,7 +11,7 @@ describe('markets table', () => { cy.visit('/markets'); }); - it('renders correctly', () => { + it.skip('renders correctly', () => { const marketRowHeaderClassname = 'div > span.ag-header-cell-text'; const marketRowNameColumn = 'tradableInstrument.instrument.code'; const marketRowSymbolColumn = @@ -56,7 +56,7 @@ describe('markets table', () => { }); }); - it('can select an active market', () => { + it.skip('can select an active market', () => { cy.wait('@Markets'); cy.get('.ag-root-wrapper').should('be.visible'); diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx index c4d2d5d43..17fe3b994 100644 --- a/apps/trading/components/navbar/navbar.tsx +++ b/apps/trading/components/navbar/navbar.tsx @@ -3,8 +3,11 @@ import { Vega } from '../icons/vega'; import Link from 'next/link'; import { t } from '@vegaprotocol/react-helpers'; import classNames from 'classnames'; +import { useGlobalStore } from '../../stores/global'; export const Navbar = () => { + const { marketId } = useGlobalStore(); + const tradingPath = marketId ? `/markets/${marketId}` : '/'; return (