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) => { + 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; export const DepthChartContainer = ({ marketId }: DepthChartManagerProps) => { + const t = useT(); const { theme } = useThemeSwitcher(); const variables = useMemo(() => ({ marketId }), [marketId]); const [depthData, setDepthData] = useState(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;