From a90c5c3b0cb39c9863db32ac7d568ebcb72cbd6c Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Sat, 9 Mar 2024 11:32:35 +0000
Subject: [PATCH] chore: move market expiry to react helpers

---
 .../market/market-header-stats.tsx            | 18 ++---
 apps/trading/client-pages/markets/closed.tsx  |  6 +-
 .../market-banner/market-settled-banner.tsx   |  7 +-
 .../profile-dialog/profile-dialog.tsx         |  2 +-
 libs/i18n/src/index.ts                        |  2 +
 .../en/{utils.json => react-helpers.json}     |  0
 .../market-info/market-info-panels.tsx        |  2 +-
 libs/react-helpers/src/hooks/index.ts         |  1 +
 .../src/hooks/use-format-trigger.ts           |  4 +-
 .../src/hooks/use-market-expiry-date.ts}      | 70 +++++++++----------
 .../lib => react-helpers/src/hooks}/use-t.ts  |  2 +-
 libs/react-helpers/src/hooks/use-validate.ts  |  4 +-
 libs/trading-view/src/lib/use-datafeed.ts     |  3 +-
 libs/utils/src/index.ts                       |  1 -
 14 files changed, 58 insertions(+), 64 deletions(-)
 rename libs/i18n/src/locales/en/{utils.json => react-helpers.json} (100%)
 rename libs/{utils/src/lib/markets.ts => react-helpers/src/hooks/use-market-expiry-date.ts} (92%)
 rename libs/{utils/src/lib => react-helpers/src/hooks}/use-t.ts (73%)

diff --git a/apps/trading/client-pages/market/market-header-stats.tsx b/apps/trading/client-pages/market/market-header-stats.tsx
index ffb327a16..e21d3b86a 100644
--- a/apps/trading/client-pages/market/market-header-stats.tsx
+++ b/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,
-  fromNanoSeconds,
-  getExpiryDate,
+  useMarketExpiryDate,
   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(
-        market.tradableInstrument.instrument.metadata.tags,
-        market.marketTimestamps.close,
-        market.state
-      )
+    ? expiryDate
     : '-';
   return <div data-testid="trading-expiry">{content}</div>;
 };
diff --git a/apps/trading/client-pages/markets/closed.tsx b/apps/trading/client-pages/markets/closed.tsx
index e55dec97b..8ddcc43e8 100644
--- a/apps/trading/client-pages/markets/closed.tsx
+++ b/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 {
-  addDecimalsFormatNumber,
-  getMarketExpiryDate,
-} from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { getMarketExpiryDate } from '@vegaprotocol/react-helpers';
 import { closedMarketsWithDataProvider, getAsset } from '@vegaprotocol/markets';
 import type { DataSourceFilterFragment } from '@vegaprotocol/markets';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
diff --git a/apps/trading/components/market-banner/market-settled-banner.tsx b/apps/trading/components/market-banner/market-settled-banner.tsx
index 513608c23..83915ad46 100644
--- a/apps/trading/components/market-banner/market-settled-banner.tsx
+++ b/apps/trading/components/market-banner/market-settled-banner.tsx
@@ -7,11 +7,8 @@ import {
   useSuccessorMarket,
   type Market,
 } from '@vegaprotocol/markets';
-import {
-  addDecimalsFormatNumber,
-  getMarketExpiryDate,
-  isNumeric,
-} from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber, isNumeric } from '@vegaprotocol/utils';
+import { getMarketExpiryDate } from '@vegaprotocol/react-helpers';
 import { useT, ns } from '../../lib/use-t';
 import { Links } from '../../lib/links';
 
diff --git a/apps/trading/components/profile-dialog/profile-dialog.tsx b/apps/trading/components/profile-dialog/profile-dialog.tsx
index 3778d9c88..27821721c 100644
--- a/apps/trading/components/profile-dialog/profile-dialog.tsx
+++ b/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,
diff --git a/libs/i18n/src/index.ts b/libs/i18n/src/index.ts
index ad763dae3..57a58b1b0 100644
--- a/libs/i18n/src/index.ts
+++ b/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,
diff --git a/libs/i18n/src/locales/en/utils.json b/libs/i18n/src/locales/en/react-helpers.json
similarity index 100%
rename from libs/i18n/src/locales/en/utils.json
rename to libs/i18n/src/locales/en/react-helpers.json
diff --git a/libs/markets/src/lib/components/market-info/market-info-panels.tsx b/libs/markets/src/lib/components/market-info/market-info-panels.tsx
index 53254fb53..7f4923481 100644
--- a/libs/markets/src/lib/components/market-info/market-info-panels.tsx
+++ b/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 {
diff --git a/libs/react-helpers/src/hooks/index.ts b/libs/react-helpers/src/hooks/index.ts
index 6556970fe..e593306f3 100644
--- a/libs/react-helpers/src/hooks/index.ts
+++ b/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';
diff --git a/libs/react-helpers/src/hooks/use-format-trigger.ts b/libs/react-helpers/src/hooks/use-format-trigger.ts
index 3f9b20547..ddc8cdead 100644
--- a/libs/react-helpers/src/hooks/use-format-trigger.ts
+++ b/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';
-
-// TODO: add real useT func
-const useT = () => (str: string) => str;
+import { useT } from './use-t';
 
 export const useFormatTrigger = () => {
   const t = useT();
diff --git a/libs/utils/src/lib/markets.ts b/libs/react-helpers/src/hooks/use-market-expiry-date.ts
similarity index 92%
rename from libs/utils/src/lib/markets.ts
rename to libs/react-helpers/src/hooks/use-market-expiry-date.ts
index 3b3c45dfb..67844da52 100644
--- a/libs/utils/src/lib/markets.ts
+++ b/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 = (
-  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;
-};
-
-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,
+export const useMarketExpiryDate = (
+  tags: ReadonlyArray<string> | null | undefined,
   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;
+};
diff --git a/libs/utils/src/lib/use-t.ts b/libs/react-helpers/src/hooks/use-t.ts
similarity index 73%
rename from libs/utils/src/lib/use-t.ts
rename to libs/react-helpers/src/hooks/use-t.ts
index 098a37922..d124d9817 100644
--- a/libs/utils/src/lib/use-t.ts
+++ b/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;
diff --git a/libs/react-helpers/src/hooks/use-validate.ts b/libs/react-helpers/src/hooks/use-validate.ts
index 81a5843ee..572de3721 100644
--- a/libs/react-helpers/src/hooks/use-validate.ts
+++ b/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';
-
-// TODO: add i18n to react helpers
-const useT = () => (str: string) => str;
+import { useT } from './use-t';
 
 export const useRequired = () => {
   const t = useT();
diff --git a/libs/trading-view/src/lib/use-datafeed.ts b/libs/trading-view/src/lib/use-datafeed.ts
index 4b0233172..f8e0ccd33 100644
--- a/libs/trading-view/src/lib/use-datafeed.ts
+++ b/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,
diff --git a/libs/utils/src/index.ts b/libs/utils/src/index.ts
index 984c5c7b2..585ce00c5 100644
--- a/libs/utils/src/index.ts
+++ b/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';