vega-frontend-monorepo/apps/trading/components/navbar/navbar.tsx

155 lines
4.6 KiB
TypeScript
Raw Normal View History

import type { ComponentProps, ReactNode } from 'react';
import {
DApp,
NetworkSwitcher,
TOKEN_GOVERNANCE,
useEnvironment,
useLinks,
DocsLinks,
} from '@vegaprotocol/environment';
import { t } from '@vegaprotocol/i18n';
import { useGlobalStore } from '../../stores';
feat(#927) design update (#1201) * feat: create new buttons * feat: update anchor and button link styles * feat: add icon support * feat: fix full width with icon * feat: convert invalid button props to use new props * feat: tidy up explorer * feat: more tidy up for token and trading * feat: move styles to css file using @apply * chore: remove css with @apply as its not working in apps * fix: deposit form button * feat: use default tailwind config, start on forms * feat: fixup trade grid styles * feat: form styles * feat: styles for order book and tables * feat: make key management use dropdown * feat: update various components * feat: tidy up wallet section * feat: token tidy up * feat: token governance styles * Feat/927: Dialog styling * feat: token styles * feat: add font familys * feat: change token borders to be softer * feat: console-lite changes to support new theme * Feat/927: Centered key-value-table.tsx spacing * Feat/927: Tweak to Explorer site border colours to be inline with trading * Feat/927: Tweak to Explorer header * Feat/927: Theme switcher icon colours * Feat/927: Fix for Explorer block data styling * feat: fix tests, add status footer and change logos * feat: render both theme icons to avoid hydration error * chore: run migrations for project * fix: tailwindconfig build to work with new next version * feat: use document page for next as per documentation * chore: update build targets to use development mode when serving * fix: console-lite default text colors * chore: fix tooltip text break, change submit button * feat: adjust console-lite styles to work with tabs * feat: add bespoke dialog for console-lite market-selector * Feat/927: Theme switcher now has prop for fixed bg colour * Feat/927: Font size and border radius tweak for toggles * Feat/927: Cleaned up trade-grid.tsx spacing * feat: responsive styles for market header and nav * feat: update designs for market popover * fix: nav active state * chore: allow classname to be passed to button * Feat/927: Fix Token width on desktop (was overflowing) * Feat/927: Fix token header h1 from wrapping * Feat/927: Tweak for claim-flow.tsx * fix: connect button test * Feat/927: Proposals list styling polish * Feat/927: key-value-table.tsx spacing tweak * feat: add copy button to kp dropdown * Feat/927: Removing old theme params and uses * Feat/927: Removing old theme params and uses, documenting the now used otb sizes * feat: use key val table in asset dialog * feat: align tooltip styles * fix: orderbook grid alignment * chore: linting * fix: dialog sizing in medium mode, node switcher styles * chore: remove unused color classes * feat: update radio and checkbox designs * feat: updates to storybook * feat: update design system stories * chore: stories update * chore: rename resize panels and tidy * feat: fix checkbox tick * fix: add poyfills for jest in trading test setup * chore: fix checkbox tests * chore: fix tests * chore: fix tests again * chore: revert token wallet name test * fix: tooltip tests on console-lite * fix: wallet dropdown test Co-authored-by: sam-keen <samuel.kleinmann@gmail.com>
2022-08-31 04:35:46 +00:00
import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
import {
2023-03-10 15:46:51 +00:00
Navigation,
NavigationList,
NavigationItem,
NavigationLink,
ExternalLink,
NavigationBreakpoint,
NavigationTrigger,
NavigationContent,
VegaIconNames,
VegaIcon,
} from '@vegaprotocol/ui-toolkit';
2023-03-10 15:46:51 +00:00
import { Links, Routes } from '../../pages/client-router';
import { SettingsButton } from '../../client-pages/settings';
import {
ProtocolUpgradeCountdown,
ProtocolUpgradeCountdownMode,
} from '@vegaprotocol/proposals';
feat(#927) design update (#1201) * feat: create new buttons * feat: update anchor and button link styles * feat: add icon support * feat: fix full width with icon * feat: convert invalid button props to use new props * feat: tidy up explorer * feat: more tidy up for token and trading * feat: move styles to css file using @apply * chore: remove css with @apply as its not working in apps * fix: deposit form button * feat: use default tailwind config, start on forms * feat: fixup trade grid styles * feat: form styles * feat: styles for order book and tables * feat: make key management use dropdown * feat: update various components * feat: tidy up wallet section * feat: token tidy up * feat: token governance styles * Feat/927: Dialog styling * feat: token styles * feat: add font familys * feat: change token borders to be softer * feat: console-lite changes to support new theme * Feat/927: Centered key-value-table.tsx spacing * Feat/927: Tweak to Explorer site border colours to be inline with trading * Feat/927: Tweak to Explorer header * Feat/927: Theme switcher icon colours * Feat/927: Fix for Explorer block data styling * feat: fix tests, add status footer and change logos * feat: render both theme icons to avoid hydration error * chore: run migrations for project * fix: tailwindconfig build to work with new next version * feat: use document page for next as per documentation * chore: update build targets to use development mode when serving * fix: console-lite default text colors * chore: fix tooltip text break, change submit button * feat: adjust console-lite styles to work with tabs * feat: add bespoke dialog for console-lite market-selector * Feat/927: Theme switcher now has prop for fixed bg colour * Feat/927: Font size and border radius tweak for toggles * Feat/927: Cleaned up trade-grid.tsx spacing * feat: responsive styles for market header and nav * feat: update designs for market popover * fix: nav active state * chore: allow classname to be passed to button * Feat/927: Fix Token width on desktop (was overflowing) * Feat/927: Fix token header h1 from wrapping * Feat/927: Tweak for claim-flow.tsx * fix: connect button test * Feat/927: Proposals list styling polish * Feat/927: key-value-table.tsx spacing tweak * feat: add copy button to kp dropdown * Feat/927: Removing old theme params and uses * Feat/927: Removing old theme params and uses, documenting the now used otb sizes * feat: use key val table in asset dialog * feat: align tooltip styles * fix: orderbook grid alignment * chore: linting * fix: dialog sizing in medium mode, node switcher styles * chore: remove unused color classes * feat: update radio and checkbox designs * feat: updates to storybook * feat: update design system stories * chore: stories update * chore: rename resize panels and tidy * feat: fix checkbox tick * fix: add poyfills for jest in trading test setup * chore: fix checkbox tests * chore: fix tests * chore: fix tests again * chore: revert token wallet name test * fix: tooltip tests on console-lite * fix: wallet dropdown test Co-authored-by: sam-keen <samuel.kleinmann@gmail.com>
2022-08-31 04:35:46 +00:00
2023-03-10 15:46:51 +00:00
export const Navbar = ({
theme = 'system',
}: {
2023-03-10 15:46:51 +00:00
theme: ComponentProps<typeof Navigation>['theme'];
}) => {
const { GITHUB_FEEDBACK_URL } = useEnvironment();
const tokenLink = useLinks(DApp.Token);
const marketId = useGlobalStore((store) => store.marketId);
const tradingPath = marketId
? Links[Routes.MARKET](marketId)
: Links[Routes.MARKET]();
return (
2023-03-10 15:46:51 +00:00
<Navigation
appName="Console"
theme={theme}
actions={
<>
<ProtocolUpgradeCountdown
mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
/>
<SettingsButton />
2023-03-10 15:46:51 +00:00
<VegaWalletConnectButton />
</>
}
breakpoints={[521, 1122]}
>
2023-03-10 15:46:51 +00:00
<NavigationList
className="[.drawer-content_&]:border-b [.drawer-content_&]:border-b-vega-light-200 dark:[.drawer-content_&]:border-b-vega-dark-200 [.drawer-content_&]:pb-8 [.drawer-content_&]:mb-2"
hide={[NavigationBreakpoint.Small]}
>
<NavigationItem className="[.drawer-content_&]:w-full">
<NetworkSwitcher className="[.drawer-content_&]:w-full" />
</NavigationItem>
</NavigationList>
<NavigationList
hide={[NavigationBreakpoint.Narrow, NavigationBreakpoint.Small]}
>
<NavigationItem>
<NavigationLink data-testid="Markets" to={Links[Routes.MARKETS]()}>
{t('Markets')}
</NavigationLink>
</NavigationItem>
<NavigationItem>
<NavigationLink data-testid="Trading" to={tradingPath} end>
2023-03-10 15:46:51 +00:00
{t('Trading')}
</NavigationLink>
</NavigationItem>
<NavigationItem>
<NavigationLink
data-testid="Portfolio"
to={Links[Routes.PORTFOLIO]()}
>
{t('Portfolio')}
</NavigationLink>
</NavigationItem>
<NavigationItem>
<NavExternalLink href={tokenLink(TOKEN_GOVERNANCE)}>
{t('Governance')}
</NavExternalLink>
2023-03-10 15:46:51 +00:00
</NavigationItem>
{DocsLinks?.NEW_TO_VEGA && GITHUB_FEEDBACK_URL && (
<NavigationItem>
<NavigationTrigger>{t('Resources')}</NavigationTrigger>
<NavigationContent>
<NavigationList>
<NavigationItem>
<NavExternalLink href={DocsLinks.NEW_TO_VEGA}>
{t('Docs')}
</NavExternalLink>
</NavigationItem>
<NavigationItem>
<NavExternalLink href={GITHUB_FEEDBACK_URL}>
{t('Give Feedback')}
</NavExternalLink>
</NavigationItem>
<NavigationItem>
<NavigationLink
data-testid="Disclaimer"
to={Links[Routes.DISCLAIMER]()}
>
{t('Disclaimer')}
</NavigationLink>
</NavigationItem>
</NavigationList>
</NavigationContent>
</NavigationItem>
)}
2023-03-10 15:46:51 +00:00
</NavigationList>
<NavigationList
className="[.drawer-content_&]:border-t [.drawer-content_&]:border-t-vega-light-200 dark:[.drawer-content_&]:border-t-vega-dark-200 [.drawer-content_&]:pt-4 [.drawer-content_&]:mt-4"
2023-03-10 15:46:51 +00:00
hide={[
NavigationBreakpoint.Small,
NavigationBreakpoint.Narrow,
NavigationBreakpoint.Full,
]}
>
<NavigationItem className="[.drawer-content_&]:w-full">
<SettingsButton withMobile />
2023-03-10 15:46:51 +00:00
</NavigationItem>
</NavigationList>
</Navigation>
);
};
const NavExternalLink = ({
children,
href,
}: {
children: ReactNode;
href: string;
}) => {
return (
<ExternalLink href={href}>
<span className="flex items-center gap-2">
<span>{children}</span>
<VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
</span>
</ExternalLink>
);
};