vega-frontend-monorepo/apps/trading/components/navbar/navbar.tsx
Art 9c26f4d01b
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)
2022-12-22 15:24:20 +01:00

122 lines
2.9 KiB
TypeScript

import classNames from 'classnames';
import { NavLink, Link } from 'react-router-dom';
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 { Links, Routes } from '../../pages/client-router';
import {
getNavLinkClassNames,
getActiveNavLinkClassNames,
Nav,
} from '@vegaprotocol/ui-toolkit';
type NavbarTheme = 'inherit' | 'dark' | 'yellow';
interface NavbarProps {
navbarTheme?: NavbarTheme;
}
export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => {
const tokenLink = useLinks(DApp.Token);
const { marketId } = useGlobalStore((store) => ({
marketId: store.marketId,
}));
const tradingPath = marketId
? Links[Routes.MARKET](marketId)
: Links[Routes.MARKET]();
return (
<Nav
navbarTheme={navbarTheme}
title={t('Console')}
titleContent={<NetworkSwitcher />}
icon={
<Link to="/">
<Vega className="w-13" />
</Link>
}
>
<AppNavLink
name={t('Markets')}
path={Links[Routes.MARKETS]()}
navbarTheme={navbarTheme}
end
/>
<AppNavLink
name={t('Trading')}
path={tradingPath}
navbarTheme={navbarTheme}
end
/>
<AppNavLink
name={t('Portfolio')}
path={Links[Routes.PORTFOLIO]()}
navbarTheme={navbarTheme}
/>
<a
href={tokenLink(TOKEN_GOVERNANCE)}
target="_blank"
rel="noreferrer"
className={getActiveNavLinkClassNames(false, navbarTheme)}
>
<span className="flex items-center gap-2">
{t('Governance')}
<NewTab />
</span>
</a>
<div className="flex items-center gap-2 ml-auto">
<VegaWalletConnectButton />
<ThemeSwitcher />
</div>
</Nav>
);
};
interface AppNavLinkProps {
name: string;
path: string;
navbarTheme: NavbarTheme;
testId?: string;
target?: HTMLAttributeAnchorTarget;
end?: boolean;
}
const AppNavLink = ({
name,
path,
navbarTheme,
target,
testId = name,
end,
}: AppNavLinkProps) => {
const borderClasses = classNames('absolute h-1 w-full bottom-[-1px] left-0', {
'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow',
'bg-black': navbarTheme === 'yellow',
});
return (
<NavLink
data-testid={testId}
to={{ pathname: path }}
className={getNavLinkClassNames(navbarTheme)}
target={target}
end={end}
>
{({ isActive }) => {
return (
<>
{name}
{isActive && <span className={borderClasses} />}
</>
);
}}
</NavLink>
);
};