290b7ae856
Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com> Co-authored-by: Joe Tsang <30622993+jtsang586@users.noreply.github.com> Co-authored-by: Joe <joe@vega.xyz>
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
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, useMarketList } from '@vegaprotocol/markets';
|
|
import { useState } from 'react';
|
|
import { MarketProductPill } from '@vegaprotocol/datagrid';
|
|
|
|
export const MarketHeader = () => {
|
|
const { marketId } = useParams();
|
|
const { data } = useMarket(marketId);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
// Ensure that markets are kept cached so opening the list
|
|
// shows all markets instantly
|
|
useMarketList();
|
|
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<Header
|
|
title={
|
|
<Popover
|
|
open={open}
|
|
onChange={setOpen}
|
|
trigger={
|
|
<HeaderTitle>
|
|
<span>
|
|
{data.tradableInstrument.instrument.code}
|
|
<MarketProductPill
|
|
productType={
|
|
data.tradableInstrument.instrument.product.__typename
|
|
}
|
|
/>
|
|
</span>
|
|
<VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
|
|
</HeaderTitle>
|
|
}
|
|
alignOffset={-10}
|
|
>
|
|
<MarketSelector
|
|
currentMarketId={marketId}
|
|
onSelect={() => setOpen(false)}
|
|
/>
|
|
</Popover>
|
|
}
|
|
>
|
|
<MarketHeaderStats market={data} />
|
|
</Header>
|
|
);
|
|
};
|