fix: market expiry & trading live copy (#2619)
* fix(#2602): market expiry tooltip * fix(#2612): update live trading copy * fix: show - liq. supplied and fix lint issue * fix: on-chain functionality tooltip * Update apps/trading/components/welcome-dialog/welcome-notice-dialog.tsx Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com> * fix: propose a market link Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>
This commit is contained in:
parent
866a11fd89
commit
e5bf54ca02
@ -163,7 +163,7 @@ describe('Market trading page', () => {
|
||||
.realHover();
|
||||
});
|
||||
});
|
||||
cy.getByTestId('expiry-tool-tip')
|
||||
cy.getByTestId('expiry-tooltip')
|
||||
.should(
|
||||
'contain.text',
|
||||
'This market expires when triggered by its oracle, not on a set date.'
|
||||
|
@ -2,7 +2,7 @@ import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
|
||||
import { useEnvironment } from '@vegaprotocol/environment';
|
||||
import { ButtonLink, Link } from '@vegaprotocol/ui-toolkit';
|
||||
import { MarketProposalNotification } from '@vegaprotocol/governance';
|
||||
import { getExpiryDate } from '@vegaprotocol/market-info';
|
||||
import { getExpiryDate, getMarketExpiryDate } from '@vegaprotocol/market-info';
|
||||
import { t } from '@vegaprotocol/react-helpers';
|
||||
import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list';
|
||||
import {
|
||||
@ -18,6 +18,7 @@ import { Last24hVolume } from '../../components/last-24h-volume';
|
||||
import { MarketState } from '../../components/market-state';
|
||||
import { MarketTradingMode } from '../../components/market-trading-mode';
|
||||
import { MarketLiquiditySupplied } from '../../components/liquidity-supplied';
|
||||
import { MarketState as State } from '@vegaprotocol/types';
|
||||
|
||||
interface TradeMarketHeaderProps {
|
||||
market: SingleMarketFieldsFragment | null;
|
||||
@ -128,13 +129,30 @@ const ExpiryTooltipContent = ({
|
||||
market.tradableInstrument.instrument.product
|
||||
.dataSourceSpecForTradingTermination?.id;
|
||||
|
||||
const metadataExpiryDate = getMarketExpiryDate(
|
||||
market.tradableInstrument.instrument.metadata.tags
|
||||
);
|
||||
|
||||
const isExpired =
|
||||
metadataExpiryDate &&
|
||||
Date.now() - metadataExpiryDate.valueOf() > 0 &&
|
||||
(market.state === State.STATE_TRADING_TERMINATED ||
|
||||
market.state === State.STATE_SETTLED);
|
||||
|
||||
return (
|
||||
<section data-testid="expiry-tool-tip">
|
||||
<section data-testid="expiry-tooltip">
|
||||
<p className="mb-2">
|
||||
{t(
|
||||
'This market expires when triggered by its oracle, not on a set date.'
|
||||
)}
|
||||
</p>
|
||||
{metadataExpiryDate && !isExpired && (
|
||||
<p className="mb-2">
|
||||
{t(
|
||||
'This timestamp is user curated metadata and does not drive any on-chain functionality.'
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{explorerUrl && oracleId && (
|
||||
<Link href={`${explorerUrl}/oracles#${oracleId}`} target="_blank">
|
||||
{t('View oracle specification')}
|
||||
|
@ -114,18 +114,13 @@ export const MarketLiquiditySupplied = ({
|
||||
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
|
||||
market.trigger === AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY;
|
||||
|
||||
const description = (
|
||||
const description = marketId ? (
|
||||
<section>
|
||||
{compiledGrid && <DataGrid grid={compiledGrid} />}
|
||||
<br />
|
||||
{marketId && (
|
||||
<Link
|
||||
href={`/#/liquidity/${marketId}`}
|
||||
data-testid="view-liquidity-link"
|
||||
>
|
||||
{t('View liquidity provision table')}
|
||||
</Link>
|
||||
)}
|
||||
<Link href={`/#/liquidity/${marketId}`} data-testid="view-liquidity-link">
|
||||
{t('View liquidity provision table')}
|
||||
</Link>
|
||||
{showMessage && (
|
||||
<p className="mt-4">
|
||||
{t(
|
||||
@ -134,9 +129,11 @@ export const MarketLiquiditySupplied = ({
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
) : (
|
||||
'-'
|
||||
);
|
||||
|
||||
return (
|
||||
return marketId ? (
|
||||
<HeaderStat
|
||||
heading={t('Liquidity supplied')}
|
||||
description={description}
|
||||
@ -146,5 +143,9 @@ export const MarketLiquiditySupplied = ({
|
||||
{supplied} (
|
||||
{percentage.gt(100) ? '>100%' : formatNumberPercentage(percentage, 2)})
|
||||
</HeaderStat>
|
||||
) : (
|
||||
<HeaderStat heading={t('Liquidity supplied')} testId="liquidity-supplied">
|
||||
{'-'}
|
||||
</HeaderStat>
|
||||
);
|
||||
};
|
||||
|
@ -58,7 +58,7 @@ export const SelectMarketLandingTable = ({
|
||||
className="max-h-[60vh] overflow-x-auto"
|
||||
data-testid="select-market-list"
|
||||
>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">
|
||||
<p className="text-neutral-500 dark:text-neutral-400 mb-4">
|
||||
{t('Select a market to get started...')}
|
||||
</p>
|
||||
<table className="text-sm relative h-full min-w-full whitespace-nowrap">
|
||||
@ -84,7 +84,9 @@ export const SelectMarketLandingTable = ({
|
||||
data-testid="view-market-list-link"
|
||||
onClick={() => onClose()}
|
||||
>
|
||||
<UILink>{'Or view full market list'} </UILink>
|
||||
<UILink className="uppercase underline">
|
||||
{'Or view full market list'}
|
||||
</UILink>
|
||||
</Link>
|
||||
</div>
|
||||
{showProposed && <ProposedMarkets />}
|
||||
|
@ -16,8 +16,6 @@ export const WelcomeNoticeDialog = () => {
|
||||
const tokenLink = useLinks(DApp.Token);
|
||||
const consoleFairgroundLink = useLinks(DApp.Console, Networks.TESTNET);
|
||||
const isMainnet = VEGA_ENV === Networks.MAINNET;
|
||||
const networkName = isMainnet ? 'mainnet' : 'testnet';
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1
|
||||
@ -28,8 +26,7 @@ export const WelcomeNoticeDialog = () => {
|
||||
</h1>
|
||||
<p className="leading-6 mb-7">
|
||||
{t(
|
||||
'Vega %s is now live, but markets need to be voted for before the can be traded on. In the meantime:',
|
||||
[networkName]
|
||||
'There are no markets to trade on right now. Trading on Vega is now live, but markets need to pass a governance vote before they can be traded on. In the meantime:'
|
||||
)}
|
||||
</p>
|
||||
<ul className="list-[square] pl-7">
|
||||
@ -51,7 +48,7 @@ export const WelcomeNoticeDialog = () => {
|
||||
target="_blank"
|
||||
href={tokenLink(TOKEN_NEW_MARKET_PROPOSAL)}
|
||||
>
|
||||
{t('Propose your own markets')}
|
||||
{t('Propose a market')}
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
|
@ -2,6 +2,7 @@ import { getDateTimeFormat, t } from '@vegaprotocol/react-helpers';
|
||||
import { isValid, parseISO } from 'date-fns';
|
||||
|
||||
import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list';
|
||||
import { MarketState } from '@vegaprotocol/types';
|
||||
|
||||
export const getMarketExpiryDate = (
|
||||
tags?: ReadonlyArray<string> | null
|
||||
@ -36,25 +37,27 @@ export const getMarketExpiryDateFormatted = (
|
||||
};
|
||||
|
||||
export const getExpiryDate = (market: SingleMarketFieldsFragment): string => {
|
||||
const closeDate = getMarketExpiryDate(
|
||||
const metadataExpiryDate = getMarketExpiryDate(
|
||||
market.tradableInstrument.instrument.metadata.tags
|
||||
);
|
||||
const closedMarketDate =
|
||||
const marketTimestampCloseDate =
|
||||
market.marketTimestamps.close && new Date(market.marketTimestamps.close);
|
||||
let content = null;
|
||||
if (!closeDate) {
|
||||
content = closedMarketDate
|
||||
? `Expired on ${getDateTimeFormat().format(closedMarketDate)}`
|
||||
if (!metadataExpiryDate) {
|
||||
content = marketTimestampCloseDate
|
||||
? `Expired on ${getDateTimeFormat().format(marketTimestampCloseDate)}`
|
||||
: t('Not time-based');
|
||||
} else {
|
||||
const isExpired = Date.now() - closeDate.valueOf() > 0;
|
||||
const expiryDate = getDateTimeFormat().format(closeDate);
|
||||
const isExpired =
|
||||
Date.now() - metadataExpiryDate.valueOf() > 0 &&
|
||||
(market.state === MarketState.STATE_TRADING_TERMINATED ||
|
||||
market.state === MarketState.STATE_SETTLED);
|
||||
if (isExpired) {
|
||||
content = closedMarketDate
|
||||
? `Expired on ${getDateTimeFormat().format(closedMarketDate)}`
|
||||
content = marketTimestampCloseDate
|
||||
? `Expired on ${getDateTimeFormat().format(marketTimestampCloseDate)}`
|
||||
: t('Expired');
|
||||
} else {
|
||||
content = expiryDate;
|
||||
content = getDateTimeFormat().format(metadataExpiryDate);
|
||||
}
|
||||
}
|
||||
return content;
|
||||
|
Loading…
Reference in New Issue
Block a user