chore: move market expiry to react helpers

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

@@ -2,12 +2,11 @@ import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { DocsLinks, useEnvironment } from '@vegaprotocol/environment';
 import { ButtonLink, ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
 import type { Market } from '@vegaprotocol/markets';
+import { addDecimalsFormatNumber, fromNanoSeconds } from '@vegaprotocol/utils';
 import {
-  addDecimalsFormatNumber,
+  useMarketExpiryDate,
-  fromNanoSeconds,
-  getExpiryDate,
   getMarketExpiryDate,
-} from '@vegaprotocol/utils';
+} from '@vegaprotocol/react-helpers';
 import {
   Last24hPriceChange,
   Last24hVolume,
@@ -264,12 +263,13 @@ export const FundingCountdown = ({ marketId }: { marketId: string }) => {
 };
 
 const ExpiryLabel = ({ market }: ExpiryLabelProps) => {
+  const expiryDate = useMarketExpiryDate(
+    market.tradableInstrument.instrument.metadata.tags,
+    market.marketTimestamps.close,
+    market.state
+  );
   const content = market.tradableInstrument.instrument.metadata.tags
-    ? getExpiryDate(
+    ? expiryDate
-        market.tradableInstrument.instrument.metadata.tags,
-        market.marketTimestamps.close,
-        market.state
-      )
     : '-';
   return <div data-testid="trading-expiry">{content}</div>;
 };

apps/trading/client-pages/markets/closed.tsx

@@ -11,10 +11,8 @@ import { useMemo } from 'react';
 import type { Asset } from '@vegaprotocol/types';
 import type { ProductType } from '@vegaprotocol/types';
 import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
-import {
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-  addDecimalsFormatNumber,
+import { getMarketExpiryDate } from '@vegaprotocol/react-helpers';
-  getMarketExpiryDate,
-} from '@vegaprotocol/utils';
 import { closedMarketsWithDataProvider, getAsset } from '@vegaprotocol/markets';
 import type { DataSourceFilterFragment } from '@vegaprotocol/markets';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';

apps/trading/components/market-banner/market-settled-banner.tsx

@@ -7,11 +7,8 @@ import {
   useSuccessorMarket,
   type Market,
 } from '@vegaprotocol/markets';
-import {
+import { addDecimalsFormatNumber, isNumeric } from '@vegaprotocol/utils';
-  addDecimalsFormatNumber,
+import { getMarketExpiryDate } from '@vegaprotocol/react-helpers';
-  getMarketExpiryDate,
-  isNumeric,
-} from '@vegaprotocol/utils';
 import { useT, ns } from '../../lib/use-t';
 import { Links } from '../../lib/links';
 

apps/trading/components/profile-dialog/profile-dialog.tsx

@@ -9,7 +9,7 @@ import {
 import { useProfileDialogStore } from '../../stores/profile-dialog-store';
 import { useForm } from 'react-hook-form';
 import { useT } from '../../lib/use-t';
-import { useRequired } from '@vegaprotocol/utils';
+import { useRequired } from '@vegaprotocol/react-helpers';
 import {
   useSimpleTransaction,
   type Status,

libs/i18n/src/index.ts

@@ -16,6 +16,7 @@ import en_markets from './locales/en/markets.json';
 import en_web3 from './locales/en/web3.json';
 import en_proposals from './locales/en/proposals.json';
 import en_positions from './locales/en/positions.json';
+import en_react_helpers from './locales/en/react-helpers.json';
 import en_trades from './locales/en/trading.json';
 import en_ui_toolkit from './locales/en/ui-toolkit.json';
 import en_wallet from './locales/en/wallet.json';
@@ -39,6 +40,7 @@ export const locales = {
     web3: en_web3,
     positions: en_positions,
     proposals: en_proposals,
+    react_helpers: en_react_helpers,
     trades: en_trades,
     'ui-toolkit': en_ui_toolkit,
     wallet: en_wallet,

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -27,8 +27,8 @@ import {
   formatNumber,
   formatNumberPercentage,
   getDateTimeFormat,
-  getMarketExpiryDateFormatted,
 } from '@vegaprotocol/utils';
+import { getMarketExpiryDateFormatted } from '@vegaprotocol/react-helpers';
 import type { Get } from 'type-fest';
 import { MarketInfoTable } from './info-key-value-table';
 import type {

libs/react-helpers/src/hooks/index.ts

@@ -13,6 +13,7 @@ export * from './use-storybook-theme-observer';
 export * from './use-yesterday';
 export * from './use-previous';
 export * from './use-validate';
+export * from './use-market-expiry-date';
 export { useScript } from './use-script';
 export { useUserAgent } from './use-user-agent';
 export { useFormatTrigger } from './use-format-trigger';

libs/react-helpers/src/hooks/use-format-trigger.ts

@@ -1,9 +1,7 @@
 import { useCallback } from 'react';
 import { type StopOrder, StopOrderTriggerDirection } from '@vegaprotocol/types';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-
+import { useT } from './use-t';
-// TODO: add real useT func
-const useT = () => (str: string) => str;
 
 export const useFormatTrigger = () => {
   const t = useT();

libs/react-helpers/src/hooks/use-market-expiry-date.ts

@@ -1,42 +1,10 @@
 import { MarketState } from '@vegaprotocol/types';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { isValid, parseISO } from 'date-fns';
-import { getDateTimeFormat } from './format';
 import { useT } from './use-t';
 
-export const getMarketExpiryDate = (
+export const useMarketExpiryDate = (
-  tags?: ReadonlyArray<string> | null
+  tags: ReadonlyArray<string> | null | undefined,
-): Date | null => {
-  if (tags) {
-    const dateFound = tags.reduce<Date | null>((agg, tag) => {
-      const parsed = parseISO(
-        (tag.match(/^settlement.*:/) &&
-          tag
-            .split(':')
-            .filter((item, i) => i)
-            .join(':')) as string
-      );
-      if (isValid(parsed)) {
-        agg = parsed;
-      }
-      return agg;
-    }, null);
-    return dateFound;
-  }
-  return null;
-};
-
-export const getMarketExpiryDateFormatted = (
-  tags?: ReadonlyArray<string> | null
-): string | null => {
-  if (tags) {
-    const dateFound = getMarketExpiryDate(tags);
-    return dateFound ? getDateTimeFormat().format(dateFound) : null;
-  }
-  return null;
-};
-
-export const getExpiryDate = (
-  tags: ReadonlyArray<string> | null,
   close: string | null,
   state: MarketState
 ): string => {
@@ -67,3 +35,35 @@ export const getExpiryDate = (
   }
   return content;
 };
+
+export const getMarketExpiryDateFormatted = (
+  tags?: ReadonlyArray<string> | null
+): string | null => {
+  if (tags) {
+    const dateFound = getMarketExpiryDate(tags);
+    return dateFound ? getDateTimeFormat().format(dateFound) : null;
+  }
+  return null;
+};
+
+export const getMarketExpiryDate = (
+  tags?: ReadonlyArray<string> | null
+): Date | null => {
+  if (tags) {
+    const dateFound = tags.reduce<Date | null>((agg, tag) => {
+      const parsed = parseISO(
+        (tag.match(/^settlement.*:/) &&
+          tag
+            .split(':')
+            .filter((item, i) => i)
+            .join(':')) as string
+      );
+      if (isValid(parsed)) {
+        agg = parsed;
+      }
+      return agg;
+    }, null);
+    return dateFound;
+  }
+  return null;
+};

libs/react-helpers/src/hooks/use-t.ts

@@ -1,3 +1,3 @@
 import { useTranslation } from 'react-i18next';
-export const ns = 'utils';
+export const ns = 'react-helpers';
 export const useT = () => useTranslation(ns).t;

libs/react-helpers/src/hooks/use-validate.ts

@@ -1,9 +1,7 @@
 import { useCallback } from 'react';
 import BigNumber from 'bignumber.js';
 import * as utils from '@vegaprotocol/utils';
-
+import { useT } from './use-t';
-// TODO: add i18n to react helpers
-const useT = () => (str: string) => str;
 
 export const useRequired = () => {
   const t = useT();

libs/trading-view/src/lib/use-datafeed.ts

@@ -17,7 +17,8 @@ import {
   type SymbolQuery,
   type SymbolQueryVariables,
 } from './__generated__/Symbol';
-import { getMarketExpiryDate, toBigNum } from '@vegaprotocol/utils';
+import { toBigNum } from '@vegaprotocol/utils';
+import { getMarketExpiryDate } from '@vegaprotocol/react-helpers';
 import {
   type IBasicDataFeed,
   type DatafeedConfiguration,

libs/utils/src/index.ts

@@ -7,7 +7,6 @@ export * from './lib/helpers';
 export * from './lib/is-asset-erc20';
 export * from './lib/is-valid-url';
 export * from './lib/local-storage';
-export * from './lib/markets';
 export * from './lib/price-change';
 export * from './lib/remove-0x';
 export * from './lib/remove-pagination-wrapper';