From 9c26f4d01baf5e4bdfb381db2da2809a43783cdb Mon Sep 17 00:00:00 2001 From: Art Date: Thu, 22 Dec 2022 15:24:20 +0100 Subject: [PATCH] chore: console dapp routes for skeleton page (2361) (#2450) * chore: console dapp routes for skeleton page (2361) * chore: console dapp routes for skeleton page (2361) * chore: console dapp routes for skeleton page (2361) --- apps/trading-e2e/src/integration/global.cy.ts | 2 +- apps/trading-e2e/src/integration/home.cy.ts | 2 +- .../trading-e2e/src/integration/markets.cy.ts | 6 ++-- apps/trading/client-pages/home/home.tsx | 8 +++-- .../client-pages/liquidity/liquidity.tsx | 3 +- apps/trading/client-pages/market/market.tsx | 20 ++++------- apps/trading/client-pages/markets/markets.tsx | 3 +- apps/trading/components/constants.ts | 1 - apps/trading/components/navbar/navbar.tsx | 22 ++++++++---- .../select-market/select-market-columns.tsx | 5 +-- .../welcome-dialog/welcome-landing-dialog.tsx | 9 +++-- apps/trading/pages/client-router.tsx | 34 ++++++++++++++++--- libs/environment/src/hooks/use-links.ts | 7 ++++ 13 files changed, 79 insertions(+), 43 deletions(-) diff --git a/apps/trading-e2e/src/integration/global.cy.ts b/apps/trading-e2e/src/integration/global.cy.ts index 7dc436d5e..1dc3cee63 100644 --- a/apps/trading-e2e/src/integration/global.cy.ts +++ b/apps/trading-e2e/src/integration/global.cy.ts @@ -138,7 +138,7 @@ describe('Navbar', { tags: '@smoke' }, () => { it('should be properly rendered', () => { const links = ['Markets', 'Trading', 'Portfolio']; - const hashes = ['#/markets', '#/markets/market-0', '#/portfolio']; + const hashes = ['#/markets/all', '#/markets/market-0', '#/portfolio']; let i = 0; cy.getByTestId('navbar').within(() => { cy.get('a[data-testid]', { log: true }) diff --git a/apps/trading-e2e/src/integration/home.cy.ts b/apps/trading-e2e/src/integration/home.cy.ts index 64bd703e5..34fd81171 100644 --- a/apps/trading-e2e/src/integration/home.cy.ts +++ b/apps/trading-e2e/src/integration/home.cy.ts @@ -158,7 +158,7 @@ describe('home', { tags: '@regression' }, () => { cy.visit('/'); cy.wait('@Markets'); cy.wait('@MarketsData'); - cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/empty`); + cy.url().should('eq', Cypress.config().baseUrl + `/#/markets`); cy.getByTestId('welcome-notice-title').should( 'contain.text', 'Welcome to Console' diff --git a/apps/trading-e2e/src/integration/markets.cy.ts b/apps/trading-e2e/src/integration/markets.cy.ts index e5b3ee584..4db9d0761 100644 --- a/apps/trading-e2e/src/integration/markets.cy.ts +++ b/apps/trading-e2e/src/integration/markets.cy.ts @@ -62,9 +62,9 @@ describe('markets table', { tags: '@smoke' }, () => { 'SOLUSD', ]; cy.getByTestId('view-market-list-link') - .should('have.attr', 'href', '#/markets') + .should('have.attr', 'href', '#/markets/all') .click(); - cy.url().should('eq', Cypress.config('baseUrl') + '/#/markets'); + cy.url().should('eq', Cypress.config('baseUrl') + '/#/markets/all'); cy.contains('AAPL.MF21').should('be.visible'); cy.get('.ag-header-cell-label').contains('Market').click(); // sort by market name for (let i = 0; i < ExpectedSortedMarkets.length; i++) { @@ -76,7 +76,7 @@ describe('markets table', { tags: '@smoke' }, () => { it('proposed markets tab should be rendered properly', () => { cy.getByTestId('view-market-list-link') - .should('have.attr', 'href', '#/markets') + .should('have.attr', 'href', '#/markets/all') .click(); cy.get('[data-testid="Active markets"]').should( 'have.attr', diff --git a/apps/trading/client-pages/home/home.tsx b/apps/trading/client-pages/home/home.tsx index 694c2583b..e49cbcae2 100644 --- a/apps/trading/client-pages/home/home.tsx +++ b/apps/trading/client-pages/home/home.tsx @@ -5,7 +5,7 @@ import { useDataProvider, } from '@vegaprotocol/react-helpers'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; -import { EMPTY_MARKET_ID } from '../../components/constants'; +import { Links, Routes } from '../../pages/client-router'; import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useGlobalStore, usePageTitleStore } from '../../stores'; @@ -39,13 +39,15 @@ export const Home = () => { const newPageTitle = titlefy([marketName, marketPrice]); if (marketId) { - navigate(`/markets/${marketId}`, { replace: true }); + navigate(Links[Routes.MARKET](marketId), { + replace: true, + }); update({ marketId }); if (pageTitle !== newPageTitle) { updateTitle(newPageTitle); } } else { - navigate(`/markets/${EMPTY_MARKET_ID}`); + navigate(Links[Routes.MARKET]()); } } }, [data, navigate, update, pageTitle, updateTitle]); diff --git a/apps/trading/client-pages/liquidity/liquidity.tsx b/apps/trading/client-pages/liquidity/liquidity.tsx index 3a11ff5d2..d2416cf2b 100644 --- a/apps/trading/client-pages/liquidity/liquidity.tsx +++ b/apps/trading/client-pages/liquidity/liquidity.tsx @@ -27,6 +27,7 @@ import { Header, HeaderStat } from '../../components/header'; import type { AgGridReact } from 'ag-grid-react'; import type { LiquidityProvisionData } from '@vegaprotocol/liquidity'; import { Link, useParams } from 'react-router-dom'; +import { Links, Routes } from '../../pages/client-router'; export const Liquidity = () => { const params = useParams(); @@ -227,7 +228,7 @@ export const LiquidityViewContainer = ({ title={ marketProvision?.market?.tradableInstrument.instrument.name && marketId && ( - + {`${ marketProvision?.market?.tradableInstrument.instrument.name diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx index b91a6e302..f3feeff88 100644 --- a/apps/trading/client-pages/market/market.tsx +++ b/apps/trading/client-pages/market/market.tsx @@ -18,7 +18,7 @@ import { marketProvider, marketDataProvider } from '@vegaprotocol/market-list'; import { useGlobalStore, usePageTitleStore } from '../../stores'; import { TradeGrid, TradePanels } from './trade-grid'; import { useNavigate, useParams } from 'react-router-dom'; -import { EMPTY_MARKET_ID } from '../../components/constants'; +import { Links, Routes } from '../../pages/client-router'; const calculatePrice = (markPrice?: string, decimalPlaces?: number) => { return markPrice && decimalPlaces @@ -31,17 +31,11 @@ export interface SingleMarketData extends SingleMarketFieldsFragment { data: MarketData; } -export const Market = ({ - id, - marketId: mid, -}: { - id?: string; - marketId?: string; -}) => { +export const Market = () => { const params = useParams(); const navigate = useNavigate(); - const isEmpty = params.marketId === EMPTY_MARKET_ID; - const marketId = isEmpty ? undefined : params.marketId; + + const marketId = params.marketId; const { w } = useWindowSize(); const { update } = useGlobalStore((store) => ({ @@ -57,7 +51,7 @@ export const Market = ({ (id: string) => { if (id && id !== marketId) { update({ marketId: id }); - navigate(`/markets/${id}`); + navigate(Links[Routes.MARKET](id)); } }, [marketId, update, navigate] @@ -111,7 +105,7 @@ export const Market = ({ return ; }, [w, data, onSelect]); - if (!marketId && !isEmpty) { + if (!data && marketId) { return (

{t('Not found')}

@@ -126,7 +120,7 @@ export const Market = ({ data={data || undefined} noDataCondition={(data) => false} render={(data) => { - if (!data && !isEmpty) { + if (!data && marketId) { return {t('Market not found')}; } return <>{tradeView}; diff --git a/apps/trading/client-pages/markets/markets.tsx b/apps/trading/client-pages/markets/markets.tsx index 2f2edd5a4..04aab70b9 100644 --- a/apps/trading/client-pages/markets/markets.tsx +++ b/apps/trading/client-pages/markets/markets.tsx @@ -2,6 +2,7 @@ import { useCallback } from 'react'; import { MarketsContainer } from '@vegaprotocol/market-list'; import { useGlobalStore } from '../../stores'; import { useNavigate } from 'react-router-dom'; +import { Links, Routes } from '../../pages/client-router'; export const Markets = () => { const navigate = useNavigate(); @@ -9,7 +10,7 @@ export const Markets = () => { const handleOnSelect = useCallback( (marketId: string) => { update({ marketId }); - navigate(`/markets/${marketId}`); + navigate(Links[Routes.MARKET](marketId)); }, [update, navigate] ); diff --git a/apps/trading/components/constants.ts b/apps/trading/components/constants.ts index 739bbb424..31377fb5a 100644 --- a/apps/trading/components/constants.ts +++ b/apps/trading/components/constants.ts @@ -1,6 +1,5 @@ import { t } from '@vegaprotocol/react-helpers'; export const DEBOUNCE_UPDATE_TIME = 500; -export const EMPTY_MARKET_ID = 'empty'; export const RISK_ACCEPTED_KEY = 'vega-risk-accepted'; export const MAINNET_WELCOME_HEADER = t( 'Trade cash settled futures on the fully decentralised Vega network.' diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx index cc86cebf2..2fc4313f0 100644 --- a/apps/trading/components/navbar/navbar.tsx +++ b/apps/trading/components/navbar/navbar.tsx @@ -1,13 +1,18 @@ import classNames from 'classnames'; import { NavLink, Link } from 'react-router-dom'; -import { NetworkSwitcher, useEnvironment } from '@vegaprotocol/environment'; +import { + DApp, + NetworkSwitcher, + TOKEN_GOVERNANCE, + useLinks, +} from '@vegaprotocol/environment'; import { t } from '@vegaprotocol/react-helpers'; import { useGlobalStore } from '../../stores/global'; import { VegaWalletConnectButton } from '../vega-wallet-connect-button'; import { NewTab, ThemeSwitcher } from '@vegaprotocol/ui-toolkit'; import { Vega } from '../icons/vega'; import type { HTMLAttributeAnchorTarget } from 'react'; -import { Routes } from '../../pages/client-router'; +import { Links, Routes } from '../../pages/client-router'; import { getNavLinkClassNames, getActiveNavLinkClassNames, @@ -20,11 +25,13 @@ interface NavbarProps { } export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => { - const { VEGA_TOKEN_URL } = useEnvironment(); + const tokenLink = useLinks(DApp.Token); const { marketId } = useGlobalStore((store) => ({ marketId: store.marketId, })); - const tradingPath = marketId ? `/markets/${marketId}` : '/markets'; + const tradingPath = marketId + ? Links[Routes.MARKET](marketId) + : Links[Routes.MARKET](); return (