feat(trades): use i18next (#5268)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

libs/i18n/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/i18n';
+
 import en_accounts from './locales/en/accounts.json';
 import en_assets from './locales/en/assets.json';
 import en_candles_chart from './locales/en/candles-chart.json';
@@ -12,8 +13,9 @@ import en_governance from './locales/en/governance.json';
 import en_trading from './locales/en/trading.json';
 import en_markets from './locales/en/markets.json';
 import en_web3 from './locales/en/web3.json';
-
 import en_positions from './locales/en/positions.json';
+import en_trades from './locales/en/trading.json';
+
 export const locales = {
   en: {
     accounts: en_accounts,
@@ -30,5 +32,6 @@ export const locales = {
     markets: en_markets,
     web3: en_web3,
     positions: en_positions,
+    trades: en_trades,
   },
 };

libs/i18n/src/locales/en/trades.json

@@ -0,0 +1,6 @@
+{
+  "Created at": "Created at",
+  "No trades": "No trades",
+  "Price": "Price",
+  "Size": "Size"
+}

libs/trades/__mocks__/react-i18next.ts

@@ -0,0 +1,3 @@
+export const useTranslation = () => ({
+  t: (label: string) => label,
+});

libs/trades/src/lib/trades-manager.tsx

@@ -2,8 +2,8 @@ import { useDataProvider } from '@vegaprotocol/data-provider';
 import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
-import { t } from '@vegaprotocol/i18n';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { useT } from './use-t';
 
 interface TradesContainerProps {
   marketId: string;
@@ -14,6 +14,7 @@ export const TradesManager = ({
   marketId,
   gridProps,
 }: TradesContainerProps) => {
+  const t = useT();
   const update = useDealTicketFormValues((state) => state.updateAll);
 
   const { data, error } = useDataProvider({

libs/trades/src/lib/trades-table.tsx

@@ -10,7 +10,6 @@ import {
   addDecimalsFormatNumber,
   getTimeFormat,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   type ColDef,
   type CellClassParams,
@@ -20,6 +19,7 @@ import {
 import { type AgGridReactProps } from 'ag-grid-react';
 import { type Trade } from './trades-data-provider';
 import { Side } from '@vegaprotocol/types';
+import { useT } from './use-t';
 
 export const BUY_CLASS = 'text-market-green-600 dark:text-market-green';
 export const SELL_CLASS = 'text-market-red dark:text-market-red';
@@ -51,6 +51,7 @@ interface Props extends AgGridReactProps {
 }
 
 export const TradesTable = ({ onClick, ...props }: Props) => {
+  const t = useT();
   const columnDefs = useMemo<ColDef[]>(
     () => [
       {
@@ -118,7 +119,7 @@ export const TradesTable = ({ onClick, ...props }: Props) => {
         },
       },
     ],
-    [onClick]
+    [onClick, t]
   );
   return (
     <AgGrid

libs/trades/src/lib/use-t.ts

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