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

feat(#2560): show market code and name in the trading header (#2659)

Browse Source
This commit is contained in:
m.ray 2023-01-18 12:39:55 -05:00 committed by GitHub
parent fbdcd04096
commit c552a22af8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -226,7 +226,7 @@ export const LiquidityViewContainer = ({
market?.tradableInstrument.instrument.name && market?.tradableInstrument.instrument.name &&
marketId && ( marketId && (
<Link to={Links[Routes.MARKET](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"> <UiToolkitLink className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
{`${market?.tradableInstrument.instrument.name} ${t( {`${market?.tradableInstrument.instrument.name} ${t(
'liquidity provision' 'liquidity provision'
)}`} )}`}

1
apps/trading/client-pages/market/trade-market-header.tsx
View File

@ -44,6 +44,7 @@ export const TradeMarketHeader = ({
<Header <Header
title={ title={
<SelectMarketPopover <SelectMarketPopover
marketCode={market?.tradableInstrument.instrument.code || NO_MARKET}
marketName={market?.tradableInstrument.instrument.name || NO_MARKET} marketName={market?.tradableInstrument.instrument.name || NO_MARKET}
onSelect={onSelect} onSelect={onSelect}
onCellClick={onCellClick} onCellClick={onCellClick}

4
apps/trading/components/header/header.tsx
View File

@ -10,8 +10,8 @@ interface TradeMarketHeaderProps {
export const Header = ({ title, children }: TradeMarketHeaderProps) => { export const Header = ({ title, children }: TradeMarketHeaderProps) => {
return ( return (
<header className="w-screen xl:px-4 pt-3 border-b border-default"> <header className="w-screen xl:px-4 pt-2 border-b border-default">
<div className="xl:flex xl:gap-4 items-start"> <div className="xl:flex xl:gap-4 items-center">
<div className="mb-4 xl:mb-0 px-4 xl:px-0">{title}</div> <div className="mb-4 xl:mb-0 px-4 xl:px-0">{title}</div>
<div <div
data-testid="header-summary" data-testid="header-summary"

16
apps/trading/components/select-market/select-market.tsx
View File

@ -91,16 +91,16 @@ export const SelectAllMarketsTableBody = ({
}; };
export const SelectMarketPopover = ({ export const SelectMarketPopover = ({
marketCode,
marketName, marketName,
onSelect, onSelect,
onCellClick, onCellClick,
}: { }: {
marketCode: string;
marketName: string; marketName: string;
onSelect: (id: string) => void; onSelect: (id: string) => void;
onCellClick: OnCellClickHandler; onCellClick: OnCellClickHandler;
}) => { }) => {
const triggerClasses =
'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 mt-1';
const { pubKey } = useVegaWallet(); const { pubKey } = useVegaWallet();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const inViewRoot = useRef<HTMLDivElement>(null); const inViewRoot = useRef<HTMLDivElement>(null);
@ -150,8 +150,16 @@ export const SelectMarketPopover = ({
open={open} open={open}
onChange={setOpen} onChange={setOpen}
trigger={ trigger={
<span className={triggerClasses}> <span className="flex items-center gap-2">
{marketName} <span>
<span className="sm:text-sm md:text-md lg:text-lg flex items-center gap-2 whitespace-nowrap">
{marketCode}
</span>
<span className="sm:text-xs text-sm flex items-center gap-2 whitespace-nowrap text-neutral-500 dark:text-neutral-400 pb-2">
{marketName}
</span>
</span>
<Icon name="chevron-down" className={iconClass} size={6} /> <Icon name="chevron-down" className={iconClass} size={6} />
</span> </span>
} }

6
apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
View File

@ -70,7 +70,7 @@ const MobileWalletButton = ({
[selectPubKey] [selectPubKey]
); );
return ( return (
<div className="md:hidden overflow-hidden flex" ref={setContainer}> <div className="lg:hidden overflow-hidden flex" ref={setContainer}>
<Drawer <Drawer
dataTestId="wallets-drawer" dataTestId="wallets-drawer"
open={drawerOpen} open={drawerOpen}
@ -141,7 +141,7 @@ export const VegaWalletConnectButton = () => {
if (isConnected && pubKeys) { if (isConnected && pubKeys) {
return ( return (
<> <>
<div className="hidden md:block"> <div className="hidden lg:block">
<DropdownMenu open={dropdownOpen}> <DropdownMenu open={dropdownOpen}>
<DropdownMenuTrigger <DropdownMenuTrigger
data-testid="manage-vega-wallet" data-testid="manage-vega-wallet"
@ -183,7 +183,7 @@ export const VegaWalletConnectButton = () => {
data-testid="connect-vega-wallet" data-testid="connect-vega-wallet"
onClick={openVegaWalletDialog} onClick={openVegaWalletDialog}
size="sm" size="sm"
className="hidden md:block" className="hidden lg:block"
> >
<span className="whitespace-nowrap">{t('Connect Vega wallet')}</span> <span className="whitespace-nowrap">{t('Connect Vega wallet')}</span>
</Button> </Button>