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 &&
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(
'liquidity provision'
)}`}

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

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

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

@ -10,8 +10,8 @@ interface TradeMarketHeaderProps {
export const Header = ({ title, children }: TradeMarketHeaderProps) => {
return (
<header className="w-screen xl:px-4 pt-3 border-b border-default">
<div className="xl:flex xl:gap-4 items-start">
<header className="w-screen xl:px-4 pt-2 border-b border-default">
<div className="xl:flex xl:gap-4 items-center">
<div className="mb-4 xl:mb-0 px-4 xl:px-0">{title}</div>
<div
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 = ({
marketCode,
marketName,
onSelect,
onCellClick,
}: {
marketCode: string;
marketName: string;
onSelect: (id: string) => void;
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 [open, setOpen] = useState(false);
const inViewRoot = useRef<HTMLDivElement>(null);
@ -150,8 +150,16 @@ export const SelectMarketPopover = ({
open={open}
onChange={setOpen}
trigger={
<span className={triggerClasses}>
{marketName}
<span className="flex items-center gap-2">
<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} />
</span>
}

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

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