LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix: market expiry & trading live copy (#2619)

Browse Source 
* 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:
m.ray 2023-01-16 12:36:06 -05:00 committed by GitHub
parent 866a11fd89
commit e5bf54ca02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/trading-e2e/src/integration/market-summary.cy.ts
View File

@ -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.'

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

@ -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')}

21
apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
View File

@ -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>
);
};

6
apps/trading/components/welcome-dialog/welcome-landing-dialog.tsx
View File

@ -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 />}

7
apps/trading/components/welcome-dialog/welcome-notice-dialog.tsx
View File

@ -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>

23
libs/market-info/src/components/market-expires/market-expires.tsx
View File

@ -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;