{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 }
)}
diff --git a/libs/datagrid/src/lib/ag-grid/ag-grid-themed.tsx b/libs/datagrid/src/lib/ag-grid/ag-grid-themed.tsx
index 269aa1c99..edcb30bd8 100644
--- a/libs/datagrid/src/lib/ag-grid/ag-grid-themed.tsx
+++ b/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;
}) => {
+ const t = useT();
const { theme } = useThemeSwitcher();
const wrapperClasses = classNames('vega-ag-grid', 'w-full h-full', {
@@ -38,6 +37,8 @@ export const AgGridThemed = ({
diff --git a/libs/datagrid/src/lib/cells/order-type-cell.tsx b/libs/datagrid/src/lib/cells/order-type-cell.tsx
index 47f462af4..5eb5ba0bd 100644
--- a/libs/datagrid/src/lib/cells/order-type-cell.tsx
+++ b/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) => {
diff --git a/libs/datagrid/src/lib/filters/date-range-filter.tsx b/libs/datagrid/src/lib/filters/date-range-filter.tsx
index 48b1295e1..ecf03219e 100644
--- a/libs/datagrid/src/lib/filters/date-range-filter.tsx
+++ b/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(defaultDates);
const valueRef = useRef(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;
diff --git a/libs/datagrid/src/lib/filters/set-filter.tsx b/libs/datagrid/src/lib/filters/set-filter.tsx
index ecb4d7660..2a58be5cf 100644
--- a/libs/datagrid/src/lib/filters/set-filter.tsx
+++ b/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([]);
const valueRef = useRef(value);
const { readonly } = props;
diff --git a/libs/datagrid/src/lib/use-t.ts b/libs/datagrid/src/lib/use-t.ts
new file mode 100644
index 000000000..8db1b9e65
--- /dev/null
+++ b/libs/datagrid/src/lib/use-t.ts
@@ -0,0 +1,2 @@
+import { useTranslation } from 'react-i18next';
+export const useT = () => useTranslation('datagrid').t;