diff --git a/apps/trading-e2e/src/support/pages/base-page.ts b/apps/trading-e2e/src/support/pages/base-page.ts index 084ad09ef..6f62a0d70 100644 --- a/apps/trading-e2e/src/support/pages/base-page.ts +++ b/apps/trading-e2e/src/support/pages/base-page.ts @@ -20,11 +20,10 @@ export default class BasePage { .should('be.visible') .click({ force: true }); cy.url().should('include', '/portfolio'); - cy.getByTestId('portfolio'); } navigateToMarkets() { - cy.getByTestId('markets-link').should('be.visible').click({ force: true }); + cy.get(`a[href='${this.marketsUrl}']`).should('be.visible').click(); cy.url().should('include', '/markets'); } diff --git a/apps/trading-e2e/src/support/pages/markets-page.ts b/apps/trading-e2e/src/support/pages/markets-page.ts index b787da89b..7335b1546 100644 --- a/apps/trading-e2e/src/support/pages/markets-page.ts +++ b/apps/trading-e2e/src/support/pages/markets-page.ts @@ -8,7 +8,6 @@ export default class MarketPage extends BasePage { marketRowPrices = 'flash-cell'; marketRowDescription = 'name'; marketStateColId = 'data'; - openMarketMenu = 'arrow-down'; validateMarketsAreDisplayed() { // We need this to ensure that ag-grid is fully rendered before asserting @@ -57,13 +56,5 @@ export default class MarketPage extends BasePage { clickOnMarket(text: string) { cy.get(`[col-id=${this.marketStateColId}]`).should('be.visible'); cy.get(`[col-id=${this.marketStateColId}]`).contains(text).click(); - cy.url({ timeout: 8000 }).should( - 'contain', - 'portfolio=orders&trade=orderbook' - ); - } - - clickOpenMarketMenu() { - cy.getByTestId(this.openMarketMenu).click(); } } diff --git a/apps/trading-e2e/src/support/step_definitions/markets-page.step.ts b/apps/trading-e2e/src/support/step_definitions/markets-page.step.ts index a9722a928..73d3952d2 100644 --- a/apps/trading-e2e/src/support/step_definitions/markets-page.step.ts +++ b/apps/trading-e2e/src/support/step_definitions/markets-page.step.ts @@ -19,7 +19,6 @@ const mockMarkets = () => { Then('I navigate to markets page', () => { mockMarkets(); marketsPage.navigateToMarkets(); - marketsPage.clickOpenMarketMenu(); cy.wait('@Markets'); }); diff --git a/apps/trading/components/grid-tabs/grid-tabs.tsx b/apps/trading/components/grid-tabs/grid-tabs.tsx index e8b938561..5556d281f 100644 --- a/apps/trading/components/grid-tabs/grid-tabs.tsx +++ b/apps/trading/components/grid-tabs/grid-tabs.tsx @@ -1,38 +1,17 @@ import * as Tabs from '@radix-ui/react-tabs'; import classNames from 'classnames'; -import { useRouter } from 'next/router'; import type { ReactElement, ReactNode } from 'react'; -import { Children, isValidElement, useEffect, useState } from 'react'; +import { Children, isValidElement, useState } from 'react'; interface GridTabsProps { children: ReactElement[]; - group: string; } -export const GridTabs = ({ children, group }: GridTabsProps) => { - const { query, asPath, replace } = useRouter(); +export const GridTabs = ({ children }: GridTabsProps) => { const [activeTab, setActiveTab] = useState(() => { - const tab = query[group]; - - if (typeof tab === 'string') { - return tab; - } - - // Default to first tab return children[0].props.id; }); - // Update the query string in the url when the active tab changes - // uses group property as the query string key - useEffect(() => { - const [url, queryString] = asPath.split('?'); - const searchParams = new URLSearchParams(queryString); - searchParams.set(group, activeTab as string); - replace(`${url}?${searchParams.toString()}`); - // replace and using asPath causes a render loop - // eslint-disable-next-line - }, [activeTab, group]); - return ( { - const initNavItemsState = [ - { - name: t('Portfolio'), - path: '/portfolio', - testId: 'portfolio-link', - slug: '', - }, - ]; - const [navItems, setNavItems] = useState(initNavItemsState); - const marketId = LocalStorage.getItem('marketId') ?? ''; - - useEffect(() => { - setNavItems([ - { - name: t('Trading'), - path: '/markets', - testId: 'markets-link', - slug: marketId, - }, - { - name: t('Portfolio'), - path: '/portfolio', - testId: 'portfolio-link', - slug: '', - }, - ]); - }, [marketId]); - return ( @@ -53,30 +27,18 @@ interface NavLinkProps { path: string; exact?: boolean; testId?: string; - slug?: string; } -const NavLink = ({ - name, - path, - exact, - testId = name, - slug = '', -}: NavLinkProps) => { +const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => { const router = useRouter(); const isActive = router.asPath === path || (!exact && router.asPath.startsWith(path)); - const href = slug !== '' ? `${path}/${slug}` : path; return ( { - e.preventDefault(); - router.push(href); - }} + href={path} > {name} diff --git a/apps/trading/pages/index.page.tsx b/apps/trading/pages/index.page.tsx index 0f36de7b2..ee52b352b 100644 --- a/apps/trading/pages/index.page.tsx +++ b/apps/trading/pages/index.page.tsx @@ -1,5 +1,4 @@ import { gql, useQuery } from '@apollo/client'; -import { LocalStorage } from '@vegaprotocol/react-helpers'; import { MarketTradingMode } from '@vegaprotocol/types'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import sortBy from 'lodash/sortBy'; @@ -36,13 +35,10 @@ export function Index() { // should be the oldest market that is currently trading in continuous mode(i.e. not in auction). const { data, error, loading } = useQuery(MARKETS_QUERY); const setLandingDialog = useGlobalStore((state) => state.setLandingDialog); - const lastSelectedMarketId = LocalStorage.getItem('marketId'); useEffect(() => { if (data) { - const marketId = lastSelectedMarketId - ? lastSelectedMarketId - : marketList(data)[0]?.id; + const marketId = marketList(data)[0]?.id; // If a default market is found, go to it with the landing dialog open if (marketId) { @@ -54,7 +50,7 @@ export function Index() { replace('/markets'); } } - }, [data, lastSelectedMarketId, replace, setLandingDialog]); + }, [data, replace, setLandingDialog]); return ( diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx index 9fbdc0315..c93841bf4 100644 --- a/apps/trading/pages/markets/[marketId].page.tsx +++ b/apps/trading/pages/markets/[marketId].page.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'; import debounce from 'lodash/debounce'; import { PageQueryContainer } from '../../components/page-query-container'; import { TradeGrid, TradePanels } from './trade-grid'; -import { LocalStorage, t } from '@vegaprotocol/react-helpers'; +import { t } from '@vegaprotocol/react-helpers'; import { useGlobalStore } from '../../stores'; import { LandingDialog } from '@vegaprotocol/market-list'; import type { Market, MarketVariables } from './__generated__/Market'; @@ -74,7 +74,6 @@ const MarketPage = ({ id }: { id?: string }) => { ); } - LocalStorage.setItem('marketId', marketId); return ( query={MARKET_QUERY} diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index ec5b4c53f..56b20c5ae 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/apps/trading/pages/markets/trade-grid.tsx @@ -99,7 +99,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
- + @@ -112,7 +112,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => { - + @@ -122,7 +122,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => { - + diff --git a/apps/trading/pages/portfolio/index.page.tsx b/apps/trading/pages/portfolio/index.page.tsx index a362bebea..52deac12f 100644 --- a/apps/trading/pages/portfolio/index.page.tsx +++ b/apps/trading/pages/portfolio/index.page.tsx @@ -21,7 +21,7 @@ const Portfolio = () => {
- +

@@ -56,7 +56,7 @@ const Portfolio = () => {

- + diff --git a/libs/candles-chart/src/lib/candles-chart.tsx b/libs/candles-chart/src/lib/candles-chart.tsx index 518bc3d18..dac8075dd 100644 --- a/libs/candles-chart/src/lib/candles-chart.tsx +++ b/libs/candles-chart/src/lib/candles-chart.tsx @@ -60,7 +60,7 @@ export const CandlesChartContainer = ({ return (
-
+