LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore: console dapp routes for skeleton page (2361) (#2450)

Browse Source 
* chore: console dapp routes for skeleton page (2361)

* chore: console dapp routes for skeleton page (2361)

* chore: console dapp routes for skeleton page (2361)
This commit is contained in:
Art 2022-12-22 15:24:20 +01:00 committed by GitHub
parent b3bbe260c6
commit 9c26f4d01b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 79 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/trading-e2e/src/integration/global.cy.ts
View File

@ -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 })

2
apps/trading-e2e/src/integration/home.cy.ts
View File

@ -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'

6
apps/trading-e2e/src/integration/markets.cy.ts
View File

@ -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',

8
apps/trading/client-pages/home/home.tsx
View File

@ -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]);

3
apps/trading/client-pages/liquidity/liquidity.tsx
View File

@ -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 && (
<Link to={`/markets/${marketId}`}>
<Link to={Links[Routes.MARKET](marketId)}>
<UiToolkitLink className="sm:text-lg md:text-xl lg:text-2xl flex items-center gap-2 whitespace-nowrap hover:text-neutral-500 dark:hover:text-neutral-300">
{`${
marketProvision?.market?.tradableInstrument.instrument.name

20
apps/trading/client-pages/market/market.tsx
View File

@ -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 <TradePanels market={data} onSelect={onSelect} />;
}, [w, data, onSelect]);
if (!marketId && !isEmpty) {
if (!data && marketId) {
return (
<Splash>
<p>{t('Not found')}</p>
@ -126,7 +120,7 @@ export const Market = ({
data={data || undefined}
noDataCondition={(data) => false}
render={(data) => {
if (!data && !isEmpty) {
if (!data && marketId) {
return <Splash>{t('Market not found')}</Splash>;
}
return <>{tradeView}</>;

3
apps/trading/client-pages/markets/markets.tsx
View File

@ -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]
);

1
apps/trading/components/constants.ts
View File

@ -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.'

22
apps/trading/components/navbar/navbar.tsx
View File

@ -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 (
<Nav
navbarTheme={navbarTheme}
@ -38,7 +45,7 @@ export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => {
>
<AppNavLink
name={t('Markets')}
path={Routes.MARKETS}
path={Links[Routes.MARKETS]()}
navbarTheme={navbarTheme}
end
/>
@ -46,14 +53,15 @@ export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => {
name={t('Trading')}
path={tradingPath}
navbarTheme={navbarTheme}
end
/>
<AppNavLink
name={t('Portfolio')}
path={Routes.PORTFOLIO}
path={Links[Routes.PORTFOLIO]()}
navbarTheme={navbarTheme}
/>
<a
href={`${VEGA_TOKEN_URL}/governance`}
href={tokenLink(TOKEN_GOVERNANCE)}
target="_blank"
rel="noreferrer"
className={getActiveNavLinkClassNames(false, navbarTheme)}

5
apps/trading/components/select-market/select-market-columns.tsx
View File

@ -22,6 +22,7 @@ import { MarketMarkPrice } from '../market-mark-price';
import { Last24hPriceChange } from '../last-24h-price-change';
import { MarketTradingMode } from '../market-trading-mode';
import { Last24hVolume } from '../last-24h-volume';
import { Links, Routes } from '../../pages/client-router';
type Market = MarketWithData & MarketWithCandles;
@ -194,7 +195,7 @@ export const columns = (
kind: ColumnKind.Market,
value: (
<Link
to={`/markets/${market.id}`}
to={Links[Routes.MARKET](market.id)}
data-testid={`market-link-${market.id}`}
onKeyPress={(event) => handleKeyPress(event, market.id)}
onClick={(e) => {
@ -382,7 +383,7 @@ export const columnsPositionMarkets = (
kind: ColumnKind.Market,
value: (
<Link
to={`/markets/${market.id}`}
to={Links[Routes.MARKET](market.id)}
data-testid={`market-link-${market.id}`}
onKeyPress={(event) => handleKeyPress(event, market.id)}
onClick={(e) => {

9
apps/trading/components/welcome-dialog/welcome-landing-dialog.tsx
View File

@ -12,9 +12,9 @@ import {
} from '../select-market';
import { WelcomeDialogHeader } from './welcome-dialog-header';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { EMPTY_MARKET_ID } from '../constants';
import { useGlobalStore } from '../../stores';
import { ProposedMarkets } from './proposed-markets';
import { Links, Routes } from '../../pages/client-router';
export const SelectMarketLandingTable = ({
markets,
@ -25,8 +25,7 @@ export const SelectMarketLandingTable = ({
}) => {
const params = useParams();
const navigate = useNavigate();
const isEmpty = params.marketId === EMPTY_MARKET_ID;
const marketId = isEmpty ? undefined : params.marketId;
const marketId = params.marketId;
const { update } = useGlobalStore((store) => ({
update: store.update,
@ -36,7 +35,7 @@ export const SelectMarketLandingTable = ({
(id: string) => {
if (id && id !== marketId) {
update({ marketId: id });
navigate(`/markets/${id}`);
navigate(Links[Routes.MARKET](id));
}
},
[marketId, update, navigate]
@ -87,7 +86,7 @@ export const SelectMarketLandingTable = ({
</div>
<div className="mt-4 text-md">
<Link
to="/markets"
to={Links[Routes.MARKETS]()}
data-testid="view-market-list-link"
onClick={() => onClose()}
>

34
apps/trading/pages/client-router.tsx
View File

@ -1,8 +1,10 @@
import { Suspense } from 'react';
import type { RouteObject } from 'react-router-dom';
import { useRoutes } from 'react-router-dom';
import dynamic from 'next/dynamic';
import { t } from '@vegaprotocol/react-helpers';
import { Splash } from '@vegaprotocol/ui-toolkit';
import trimEnd from 'lodash/trimEnd';
const LazyHome = dynamic(() => import('../client-pages/home'), {
ssr: false,
@ -26,11 +28,24 @@ const LazyPortfolio = dynamic(() => import('../client-pages/portfolio'), {
export enum Routes {
HOME = '/',
MARKETS = '/markets',
MARKET = '/markets',
MARKETS = '/markets/all',
PORTFOLIO = '/portfolio',
LIQUIDITY = 'liquidity/:marketId',
}
const routerConfig = [
type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
export const Links: ConsoleLinks = {
[Routes.HOME]: () => Routes.HOME,
[Routes.MARKET]: (marketId: string | null | undefined) =>
marketId ? trimEnd(`${Routes.MARKET}/${marketId}`, '/') : Routes.MARKET,
[Routes.MARKETS]: () => Routes.MARKETS,
[Routes.PORTFOLIO]: () => Routes.PORTFOLIO,
[Routes.LIQUIDITY]: (marketId: string) =>
Routes.LIQUIDITY.replace(':marketId', marketId),
};
const routerConfig: RouteObject[] = [
{
index: true,
element: <LazyHome />,
@ -40,11 +55,20 @@ const routerConfig = [
element: <LazyMarkets />,
},
{
path: 'markets/:marketId',
element: <LazyMarket />,
path: Routes.MARKET,
children: [
{
index: true,
element: <LazyMarket />,
},
{
path: ':marketId',
element: <LazyMarket />,
},
],
},
{
path: 'liquidity/:marketId',
path: Routes.LIQUIDITY,
element: <LazyLiquidity />,
},
{

7
libs/environment/src/hooks/use-links.ts
View File

@ -91,6 +91,7 @@ export const BLOG = 'https://blog.vega.xyz/';
export const TOKEN_NEW_MARKET_PROPOSAL = '/governance/propose/new-market';
export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =
'/governance/propose/network-parameter';
export const TOKEN_GOVERNANCE = '/governance';
export const TOKEN_PROPOSALS = '/governance';
export const TOKEN_PROPOSAL = '/governance/:id';
@ -99,3 +100,9 @@ export const EXPLORER_TX = '/txs/:hash';
// Etherscan pages
export const ETHERSCAN_TX = '/tx/:hash';
// Console pages
export const CONSOLE_MARKET = '/markets/:marketId';
export const CONSOLE_MARKETS = '/markets/all';
export const CONSOLE_PORTFOLIO = '/portfolio';
export const CONSOLE_LIQUIDITY = 'liquidity/:marketId';