feat: use i18next in datagrid

apps/trading/lib/i18n/index.ts

@@ -23,6 +23,7 @@ i18n
       'accounts',
       'assets',
       'candles-chart',
+      'datagrid',
       'fills',
       'funding-payments',
       'trading',

libs/assets/src/lib/asset-details-dialog.tsx

@@ -101,8 +101,8 @@ export const AssetDetailsDialog = ({
       {content}
       <p className="my-4 text-xs">
         {t(
-          'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
-          [assetSymbol]
+          'There is 1 unit of the settlement asset ({{assetSymbol}}) to every 1 quote unit.',
+          { assetSymbol }
         )}
       </p>
       <div className="w-1/4">

libs/datagrid/src/lib/ag-grid/ag-grid-themed.tsx

@@ -1,14 +1,12 @@
 import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
 import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
-import { t } from '@vegaprotocol/i18n';
 import classNames from 'classnames';
 import type { ColDef } from 'ag-grid-community';
+import { useT } from '../use-t';
 
 const defaultProps: AgGridReactProps = {
   enableCellTextSelection: true,
-  overlayLoadingTemplate: t('Loading...'),
-  overlayNoRowsTemplate: t('No data'),
   suppressCellFocus: true,
   suppressColumnMoveAnimation: true,
 };
@@ -26,6 +24,7 @@ export const AgGridThemed = ({
   style?: React.CSSProperties;
   gridRef?: React.ForwardedRef<AgGridReact>;
 }) => {
+  const t = useT();
   const { theme } = useThemeSwitcher();
 
   const wrapperClasses = classNames('vega-ag-grid', 'w-full h-full', {
@@ -38,6 +37,8 @@ export const AgGridThemed = ({
       <AgGridReact
         defaultColDef={defaultColDef}
         ref={gridRef}
+        overlayLoadingTemplate={t('Loading...')}
+        overlayNoRowsTemplate={t('No data')}
         {...defaultProps}
         {...props}
       />

libs/datagrid/src/lib/cells/order-type-cell.tsx

@@ -1,9 +1,9 @@
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
 import { useCallback } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { useT } from '../use-t';
 
 interface OrderTypeCellProps {
   value?: Schema.OrderType;
@@ -17,6 +17,7 @@ export const OrderTypeCell = ({
   onClick,
 }: OrderTypeCellProps) => {
   const id = order?.market?.id ?? '';
+  const t = useT();
 
   const label = useMemo(() => {
     if (!order) {
@@ -25,7 +26,9 @@ export const OrderTypeCell = ({
     if (!value) return '-';
 
     if (order?.icebergOrder) {
-      return t('%s (Iceberg)', [Schema.OrderTypeMapping[value]]);
+      return t('{{orderType}} (Iceberg)', {
+        orderType: Schema.OrderTypeMapping[value],
+      });
     }
 
     if (order?.peggedOrder) {
@@ -37,14 +40,18 @@ export const OrderTypeCell = ({
         order.peggedOrder?.offset,
         order.market.decimalPlaces
       );
-      return t('%s %s %s Peg limit', [reference, side, offset]);
+      return t('{{reference}} {{side}} {{offset}} Peg limit', {
+        reference,
+        side,
+        offset,
+      });
     }
 
     if (order?.liquidityProvision) {
       return t('Liquidity provision');
     }
     return Schema.OrderTypeMapping[value];
-  }, [order, value]);
+  }, [order, value, t]);
 
   const handleOnClick = useCallback(
     (ev: MouseEvent<HTMLButtonElement>) => {

libs/datagrid/src/lib/filters/date-range-filter.tsx

@@ -14,8 +14,8 @@ import {
   isValid,
 } from 'date-fns';
 import { formatForInput } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { TradingInputError } from '@vegaprotocol/ui-toolkit';
+import { useT } from '../use-t';
 
 const defaultValue: DateRange = {};
 export interface DateRangeFilterProps extends IFilterParams {
@@ -27,6 +27,7 @@ export interface DateRangeFilterProps extends IFilterParams {
 
 export const DateRangeFilter = forwardRef(
   (props: DateRangeFilterProps, ref) => {
+    const t = useT();
     const defaultDates = props?.defaultValue || defaultValue;
     const [value, setValue] = useState<DateRange>(defaultDates);
     const valueRef = useRef<DateRange>(value);
@@ -119,8 +120,10 @@ export const DateRangeFilter = forwardRef(
       ) {
         setError(
           t(
-            'The earliest data that can be queried is %s days ago.',
-            String(props.maxSubDays)
+            'The earliest data that can be queried is {{maxSubDays}} days ago.',
+            {
+              maxSubDays: String(props.maxSubDays),
+            }
           )
         );
         return false;
@@ -137,8 +140,8 @@ export const DateRangeFilter = forwardRef(
         ) {
           setError(
             t(
-              'The maximum time range that can be queried is %s days.',
-              String(props.maxDaysRange)
+              'The maximum time range that can be queried is {{maxDaysRange}} days.',
+              { maxDaysRange: String(props.maxDaysRange) }
             )
           );
           return false;

libs/datagrid/src/lib/filters/set-filter.tsx

@@ -7,10 +7,11 @@ import {
   useRef,
 } from 'react';
 import type { IDoesFilterPassParams, IFilterParams } from 'ag-grid-community';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../use-t';
 
 export const SetFilter = forwardRef(
   (props: IFilterParams & { readonly?: boolean }, ref) => {
+    const t = useT();
     const [value, setValue] = useState<string[]>([]);
     const valueRef = useRef(value);
     const { readonly } = props;

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

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