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

fix: 1569 trading tab navigation update (#1573)

Browse Source 
* fix: #1569 trading tab navigation update

* fix: #1569 get market id value from init
This commit is contained in:
m.ray 2022-09-30 16:50:48 +01:00 committed by GitHub
parent efcd128240
commit c221d0772c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
marketId: store.marketId, marketId: store.marketId,
update: store.update, update: store.update,
})); }));
const tradingPath = marketId ? `/markets/${marketId}` : '/markets'; const tradingPath = marketId ? `/markets/${marketId}` : '/';
return ( return (
<div className="dark px-4 flex items-stretch border-b border-default bg-black text-white"> <div className="dark px-4 flex items-stretch border-b border-default bg-black text-white">
<div className="flex gap-4 mr-4 items-center h-full"> <div className="flex gap-4 mr-4 items-center h-full">
@ -35,7 +35,6 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
{ {
name: t('Trading'), name: t('Trading'),
path: tradingPath, path: tradingPath,
exact: false,
}, },
{ name: t('Portfolio'), path: '/portfolio' }, { name: t('Portfolio'), path: '/portfolio' },
].map((route) => ( ].map((route) => (
@ -55,14 +54,12 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
interface NavLinkProps { interface NavLinkProps {
name: string; name: string;
path: string; path: string;
exact?: boolean;
testId?: string; testId?: string;
} }
const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => { const NavLink = ({ name, path, testId = name }: NavLinkProps) => {
const router = useRouter(); const router = useRouter();
const isActive = const isActive = router.asPath === path;
router.asPath === path || (!exact && router.asPath.startsWith(path));
const linkClasses = classNames('mx-2 py-2 self-end border-b-4', { const linkClasses = classNames('mx-2 py-2 self-end border-b-4', {
'border-vega-yellow text-white cursor-default': isActive, 'border-vega-yellow text-white cursor-default': isActive,
'border-transparent text-neutral-400 hover:text-neutral-300': !isActive, 'border-transparent text-neutral-400 hover:text-neutral-300': !isActive,

8
apps/trading/pages/index.page.tsx
View File

@ -1,5 +1,9 @@
import { useMarketList } from '@vegaprotocol/market-list'; import { useMarketList } from '@vegaprotocol/market-list';
import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/react-helpers'; import {
addDecimalsFormatNumber,
LocalStorage,
titlefy,
} from '@vegaprotocol/react-helpers';
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect } from 'react'; import { useEffect } from 'react';
@ -19,7 +23,7 @@ export function Index() {
update({ landingDialog: true }); update({ landingDialog: true });
if (data) { if (data) {
const marketId = data.markets[0]?.id; const marketId = LocalStorage.getItem('marketId') || data.markets[0]?.id;
const marketName = data.markets[0]?.tradableInstrument.instrument.name; const marketName = data.markets[0]?.tradableInstrument.instrument.name;
const marketPrice = data.marketsData[0]?.markPrice const marketPrice = data.marketsData[0]?.markPrice
? addDecimalsFormatNumber( ? addDecimalsFormatNumber(

6
apps/trading/stores/global.ts
View File

@ -1,3 +1,4 @@
import { LocalStorage } from '@vegaprotocol/react-helpers';
import create from 'zustand'; import create from 'zustand';
interface GlobalStore { interface GlobalStore {
@ -15,9 +16,12 @@ export const useGlobalStore = create<GlobalStore>((set) => ({
networkSwitcherDialog: false, networkSwitcherDialog: false,
landingDialog: false, landingDialog: false,
riskNoticeDialog: false, riskNoticeDialog: false,
marketId: null, marketId: LocalStorage.getItem('marketId') || null,
pageTitle: null, pageTitle: null,
update: (state) => { update: (state) => {
set(state); set(state);
if (state.marketId) {
LocalStorage.setItem('marketId', state.marketId);
}
}, },
})); }));