82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { useState } from 'react';
|
|
import { format, formatDuration, intervalToDuration } from 'date-fns';
|
|
import { Intent, NotificationBanner } from '@vegaprotocol/ui-toolkit';
|
|
import { useMarketViewProposals } from '@vegaprotocol/proposals';
|
|
import { t } from '@vegaprotocol/i18n';
|
|
import * as Types from '@vegaprotocol/types';
|
|
import type { Market } from '@vegaprotocol/markets';
|
|
import { getQuoteName } from '@vegaprotocol/markets';
|
|
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
|
|
|
|
export const MarketTerminationBanner = ({
|
|
market,
|
|
}: {
|
|
market: Market | null;
|
|
}) => {
|
|
const [visible, setVisible] = useState(true);
|
|
const skip = !market || !visible;
|
|
const proposalsData = useMarketViewProposals({
|
|
skip,
|
|
inState: Types.ProposalState.STATE_PASSED,
|
|
typename: 'UpdateMarketState',
|
|
});
|
|
|
|
if (!market) return null;
|
|
const marketFound = (proposalsData || []).find(
|
|
(item) =>
|
|
item.terms.change.__typename === 'UpdateMarketState' &&
|
|
item.terms.change.market.id === market.id &&
|
|
item.terms.change.updateType ===
|
|
Types.MarketUpdateType.MARKET_STATE_UPDATE_TYPE_TERMINATE &&
|
|
item.state === Types.ProposalState.STATE_PASSED // subscription doesn't have state parameter
|
|
);
|
|
|
|
const enactmentDatetime = new Date(marketFound?.terms.enactmentDatetime);
|
|
const name =
|
|
marketFound?.terms.change.__typename === 'UpdateMarketState'
|
|
? marketFound.terms.change.market.tradableInstrument.instrument.code
|
|
: '';
|
|
|
|
if (name && enactmentDatetime.getTime() > Date.now()) {
|
|
const dayMonthDate = format(enactmentDatetime, 'dd MMMM');
|
|
const duration = intervalToDuration({
|
|
start: new Date(),
|
|
end: enactmentDatetime,
|
|
});
|
|
const formattedDuration = formatDuration(duration, {
|
|
format: ['days', 'hours'],
|
|
});
|
|
const price =
|
|
marketFound?.terms.change.__typename === 'UpdateMarketState'
|
|
? marketFound.terms.change.price
|
|
: '';
|
|
const assetSymbol = getQuoteName(market);
|
|
return (
|
|
<NotificationBanner
|
|
intent={Intent.Warning}
|
|
onClose={() => {
|
|
setVisible(false);
|
|
}}
|
|
data-testid={`termination-warning-banner-${market.id}`}
|
|
>
|
|
<div className="uppercase mb-1">
|
|
{t('Trading on Market %s will stop on %s', [name, dayMonthDate])}
|
|
</div>
|
|
<div>
|
|
{t(
|
|
'You will no longer be able to hold a position on this market when it closes in %s.',
|
|
[formattedDuration]
|
|
)}{' '}
|
|
{price &&
|
|
assetSymbol &&
|
|
t('The final price will be %s %s.', [
|
|
addDecimalsFormatNumber(price, market.decimalPlaces),
|
|
assetSymbol,
|
|
])}
|
|
</div>
|
|
</NotificationBanner>
|
|
);
|
|
}
|
|
return null;
|
|
};
|