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>

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

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

apps/trading/client-pages/market/trade-market-header.tsx

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

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -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">
-        <Link
+        {t('View liquidity provision table')}
-          href={`/#/liquidity/${marketId}`}
+      </Link>
-          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>
   );
 };

apps/trading/components/welcome-dialog/welcome-landing-dialog.tsx

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

apps/trading/components/welcome-dialog/welcome-notice-dialog.tsx

@@ -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:',
+          '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:'
-          [networkName]
         )}
       </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>

libs/market-info/src/components/market-expires/market-expires.tsx

@@ -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) {
+  if (!metadataExpiryDate) {
-    content = closedMarketDate
+    content = marketTimestampCloseDate
-      ? `Expired on ${getDateTimeFormat().format(closedMarketDate)}`
+      ? `Expired on ${getDateTimeFormat().format(marketTimestampCloseDate)}`
       : t('Not time-based');
   } else {
-    const isExpired = Date.now() - closeDate.valueOf() > 0;
+    const isExpired =
-    const expiryDate = getDateTimeFormat().format(closeDate);
+      Date.now() - metadataExpiryDate.valueOf() > 0 &&
+      (market.state === MarketState.STATE_TRADING_TERMINATED ||
+        market.state === MarketState.STATE_SETTLED);
     if (isExpired) {
-      content = closedMarketDate
+      content = marketTimestampCloseDate
-        ? `Expired on ${getDateTimeFormat().format(closedMarketDate)}`
+        ? `Expired on ${getDateTimeFormat().format(marketTimestampCloseDate)}`
         : t('Expired');
     } else {
-      content = expiryDate;
+      content = getDateTimeFormat().format(metadataExpiryDate);
     }
   }
   return content;