vega-frontend-monorepo/apps/trading/components/market-header/market-header.tsx
Matthew Russell c1675e4b49
feat(trading): design changes (#4264)
Co-authored-by: Art <artur@vegaprotocol.io>
Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>
2023-07-24 09:37:18 +01:00

34 lines
987 B
TypeScript

import { Popover, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
import { Header, HeaderTitle } from '../header';
import { useParams } from 'react-router-dom';
import { MarketSelector } from '../../components/market-selector/market-selector';
import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
import { useMarket } from '@vegaprotocol/markets';
export const MarketHeader = () => {
const { marketId } = useParams();
const { data } = useMarket(marketId);
if (!data) return null;
return (
<Header
title={
<Popover
trigger={
<HeaderTitle>
{data.tradableInstrument.instrument.code}
<VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
</HeaderTitle>
}
alignOffset={-10}
>
<MarketSelector currentMarketId={marketId} />
</Popover>
}
>
<MarketHeaderStats market={data} />
</Header>
);
};