From 19b95832c4368ed343ee2ae039986ebd01c55203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Sun, 19 Nov 2023 22:13:03 +0100
Subject: [PATCH] feat(market-depth): use i18next (#5267)

---
 libs/i18n/src/locales/en/market-depth.json   |  5 +++++
 libs/market-depth/__mocks__/react-i18next.ts | 15 +++++++++++++++
 libs/market-depth/src/lib/depth-chart.tsx    |  3 ++-
 libs/market-depth/src/lib/orderbook.tsx      |  4 +++-
 libs/market-depth/src/lib/use-t.jsx          |  3 +++
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 libs/i18n/src/locales/en/market-depth.json
 create mode 100644 libs/market-depth/__mocks__/react-i18next.ts
 create mode 100644 libs/market-depth/src/lib/use-t.jsx

diff --git a/libs/i18n/src/locales/en/market-depth.json b/libs/i18n/src/locales/en/market-depth.json
new file mode 100644
index 000000000..90da03a87
--- /dev/null
+++ b/libs/i18n/src/locales/en/market-depth.json
@@ -0,0 +1,5 @@
+{
+  "Last traded price": "Last traded price",
+  "No open orders": "No open orders",
+  "Spread": "Spread"
+}
diff --git a/libs/market-depth/__mocks__/react-i18next.ts b/libs/market-depth/__mocks__/react-i18next.ts
new file mode 100644
index 000000000..9a23fc585
--- /dev/null
+++ b/libs/market-depth/__mocks__/react-i18next.ts
@@ -0,0 +1,15 @@
+export const useTranslation = () => ({
+  t: (label: string, replacements?: Record<string, string>) => {
+    const replace =
+      replacements?.replace && typeof replacements === 'object'
+        ? replacements?.replace
+        : replacements;
+    let translatedLabel = replacements?.defaultValue || label;
+    if (typeof replace === 'object' && replace !== null) {
+      Object.keys(replace).forEach((key) => {
+        translatedLabel = translatedLabel.replace(`{{${key}}}`, replace[key]);
+      });
+    }
+    return translatedLabel;
+  },
+});
diff --git a/libs/market-depth/src/lib/depth-chart.tsx b/libs/market-depth/src/lib/depth-chart.tsx
index e4a2c20f0..0b7cc79ea 100644
--- a/libs/market-depth/src/lib/depth-chart.tsx
+++ b/libs/market-depth/src/lib/depth-chart.tsx
@@ -2,7 +2,6 @@ import { DepthChart } from 'pennant';
 import throttle from 'lodash/throttle';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { addDecimal, getNumberFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { marketDepthProvider } from './market-depth-provider';
@@ -16,6 +15,7 @@ import {
 } from './__generated__/MarketDepth';
 import { type DepthChartProps } from 'pennant';
 import { parseLevel, updateLevels } from './depth-chart-utils';
+import { useT } from './use-t';
 
 interface DepthChartManagerProps {
   marketId: string;
@@ -39,6 +39,7 @@ const getMidPrice = (
 type DepthData = Pick<DepthChartProps, 'data' | 'midPrice'>;
 
 export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => {
+  const t = useT();
   const { theme } = useThemeSwitcher();
   const variables = useMemo(() => ({ marketId }), [marketId]);
   const [depthData, setDepthData] = useState<DepthData | null>(null);
diff --git a/libs/market-depth/src/lib/orderbook.tsx b/libs/market-depth/src/lib/orderbook.tsx
index 8633e5b68..f1e123973 100644
--- a/libs/market-depth/src/lib/orderbook.tsx
+++ b/libs/market-depth/src/lib/orderbook.tsx
@@ -1,7 +1,6 @@
 import { useMemo, useRef, useState } from 'react';
 import ReactVirtualizedAutoSizer from 'react-virtualized-auto-sizer';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { usePrevious } from '@vegaprotocol/react-helpers';
 import { OrderbookRow } from './orderbook-row';
 import type { OrderbookRowData } from './orderbook-data';
@@ -10,6 +9,7 @@ import { Splash, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
 import type { PriceLevelFieldsFragment } from './__generated__/MarketDepth';
 import { OrderbookControls } from './orderbook-controls';
+import { useT } from './use-t';
 
 // Sets row height, will be used to calculate number of rows that can be
 // displayed each side of the book without overflow
@@ -85,6 +85,7 @@ export const OrderbookMid = ({
   bestAskPrice: string;
   bestBidPrice: string;
 }) => {
+  const t = useT();
   const previousLastTradedPrice = usePrevious(lastTradedPrice);
   const priceChangeRef = useRef<'up' | 'down' | 'none'>('none');
   const spread = (BigInt(bestAskPrice) - BigInt(bestBidPrice)).toString();
@@ -153,6 +154,7 @@ export const Orderbook = ({
   bids,
   assetSymbol,
 }: OrderbookProps) => {
+  const t = useT();
   const [resolution, setResolution] = useState(1);
 
   const groupedAsks = useMemo(() => {
diff --git a/libs/market-depth/src/lib/use-t.jsx b/libs/market-depth/src/lib/use-t.jsx
new file mode 100644
index 000000000..45cb836fc
--- /dev/null
+++ b/libs/market-depth/src/lib/use-t.jsx
@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+
+export const useT = () => useTranslation('market-depth').t;