From cefcff040f5ec7427354bb43d7683bc809e949b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Sat, 18 Nov 2023 04:49:19 +0100 Subject: [PATCH] feat(positions): use i18next (#5266) --- libs/i18n/src/index.ts | 2 + libs/i18n/src/locales/en/positions.json | 30 +++++++++++++ libs/positions/src/lib/liquidation-price.tsx | 7 +-- .../src/lib/position-actions-dropdown.tsx | 3 +- libs/positions/src/lib/positions-manager.tsx | 3 +- libs/positions/src/lib/positions-table.tsx | 45 +++++++++++++------ libs/positions/src/setup-tests.ts | 13 ++++++ libs/positions/src/use-t.ts | 3 ++ 8 files changed, 88 insertions(+), 18 deletions(-) create mode 100644 libs/i18n/src/locales/en/positions.json create mode 100644 libs/positions/src/use-t.ts diff --git a/libs/i18n/src/index.ts b/libs/i18n/src/index.ts index bb5117d3a..ba752c01e 100644 --- a/libs/i18n/src/index.ts +++ b/libs/i18n/src/index.ts @@ -13,6 +13,7 @@ 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'; export const locales = { en: { accounts: en_accounts, @@ -28,5 +29,6 @@ export const locales = { trading: en_trading, markets: en_markets, web3: en_web3, + positions: en_positions, }, }; diff --git a/libs/i18n/src/locales/en/positions.json b/libs/i18n/src/locales/en/positions.json new file mode 100644 index 000000000..0d6df577a --- /dev/null +++ b/libs/i18n/src/locales/en/positions.json @@ -0,0 +1,30 @@ +{ + "Best case": "Best case", + "Close position": "Close position", + "Entry / Mark": "Entry / Mark", + "Lifetime loss socialisation deductions: {{losses}}": "Lifetime loss socialisation deductions: {{losses}}", + "Maintained by network": "Maintained by network", + "Margin / Leverage": "Margin / Leverage", + "Market": "Market", + "No positions": "No positions", + "Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.": "Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.", + "Read more about loss socialisation": "Read more about loss socialisation", + "Read more about position resolution": "Read more about position resolution", + "Realised PNL": "Realised PNL", + "Realised PNL: {{value}}": "Realised PNL: {{value}}", + "Size / Notional": "Size / Notional", + "Status: {{status}}": "Status: {{status}}", + "The position was distressed, but could not be closed out - orders were removed from the book, and the open volume will be closed out once there is sufficient volume on the book.": "The position was distressed, but could not be closed out - orders were removed from the book, and the open volume will be closed out once there is sufficient volume on the book.", + "The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained.": "The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained.", + "Unrealised PNL": "Unrealised PNL", + "Unrealised profit is the current profit on your open position. Margin is still allocated to your position.": "Unrealised profit is the current profit on your open position. Margin is still allocated to your position.", + "Vega key": "Vega key", + "View settlement asset details": "View settlement asset details", + "Worst case": "Worst case", + "Worst case liquidation price": "Worst case liquidation price", + "You did not have enough {{assetSymbol}} collateral to meet the maintenance margin requirements for your position, so it was closed by the network.": "You did not have enough {{assetSymbol}} collateral to meet the maintenance margin requirements for your position, so it was closed by the network.", + "You received less {{assetSymbol}} in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.": "You received less {{assetSymbol}} in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.", + "Your open orders were cancelled.": "Your open orders were cancelled.", + "Your position is distressed.": "Your position is distressed.", + "Your position was closed.": "Your position was closed." +} diff --git a/libs/positions/src/lib/liquidation-price.tsx b/libs/positions/src/lib/liquidation-price.tsx index 5370d1475..28082cf84 100644 --- a/libs/positions/src/lib/liquidation-price.tsx +++ b/libs/positions/src/lib/liquidation-price.tsx @@ -1,7 +1,7 @@ import { Tooltip } from '@vegaprotocol/ui-toolkit'; import { useEstimatePositionQuery } from './__generated__/Positions'; import { addDecimalsFormatNumber } from '@vegaprotocol/utils'; -import { t } from '@vegaprotocol/i18n'; +import { useT } from '../use-t'; export const LiquidationPrice = ({ marketId, @@ -14,6 +14,7 @@ export const LiquidationPrice = ({ collateralAvailable: string; decimalPlaces: number; }) => { + const t = useT(); const { data: currentData, previousData } = useEstimatePositionQuery({ variables: { marketId, @@ -43,11 +44,11 @@ export const LiquidationPrice = ({ {t('Worst case')} - {worstCase} + {worstCase} {t('Best case')} - {bestCase} + {bestCase} diff --git a/libs/positions/src/lib/position-actions-dropdown.tsx b/libs/positions/src/lib/position-actions-dropdown.tsx index 8448a6824..ca43c5587 100644 --- a/libs/positions/src/lib/position-actions-dropdown.tsx +++ b/libs/positions/src/lib/position-actions-dropdown.tsx @@ -1,4 +1,3 @@ -import { t } from '@vegaprotocol/i18n'; import { ActionsDropdown, TradingDropdownItem, @@ -6,8 +5,10 @@ import { VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; +import { useT } from '../use-t'; export const PositionActionsDropdown = ({ assetId }: { assetId: string }) => { + const t = useT(); const open = useAssetDetailsDialogStore((store) => store.open); return ( diff --git a/libs/positions/src/lib/positions-manager.tsx b/libs/positions/src/lib/positions-manager.tsx index d431ef019..05dc1685b 100644 --- a/libs/positions/src/lib/positions-manager.tsx +++ b/libs/positions/src/lib/positions-manager.tsx @@ -3,7 +3,6 @@ import { PositionsTable } from './positions-table'; import * as Schema from '@vegaprotocol/types'; import { useVegaTransactionStore } from '@vegaprotocol/web3'; import { useVegaWallet } from '@vegaprotocol/wallet'; -import { t } from '@vegaprotocol/i18n'; import { useDataProvider } from '@vegaprotocol/data-provider'; import { positionsMetricsProvider, @@ -11,6 +10,7 @@ import { } from './positions-data-providers'; import type { useDataGridEvents } from '@vegaprotocol/datagrid'; import { MAXGOINT64 } from '@vegaprotocol/utils'; +import { useT } from '../use-t'; interface PositionsManagerProps { partyIds: string[]; @@ -27,6 +27,7 @@ export const PositionsManager = ({ gridProps, showClosed = false, }: PositionsManagerProps) => { + const t = useT(); const { pubKeys, pubKey } = useVegaWallet(); const create = useVegaTransactionStore((store) => store.create); const onClose = useCallback( diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx index 5fd00fa24..e09b1b6a7 100644 --- a/libs/positions/src/lib/positions-table.tsx +++ b/libs/positions/src/lib/positions-table.tsx @@ -28,7 +28,6 @@ import { addDecimalsFormatNumber, addDecimalsFormatNumberQuantum, } from '@vegaprotocol/utils'; -import { t } from '@vegaprotocol/i18n'; import { type Position } from './positions-data-providers'; import { MarketTradingMode, @@ -38,6 +37,7 @@ import { import { DocsLinks } from '@vegaprotocol/environment'; import { PositionActionsDropdown } from './position-actions-dropdown'; import { LiquidationPrice } from './liquidation-price'; +import { useT } from '../use-t'; interface Props extends TypedDataAgGrid { onClose?: (data: Position) => void; @@ -81,6 +81,7 @@ export const PositionsTable = ({ pubKey, ...props }: Props) => { + const t = useT(); return ( {primaryTooltip}

{secondaryTooltip}

- {t( - 'Status: %s', - PositionStatusMapping[args.data.status] - )} + {t('Status: {{status}}', { + nsSeparator: '*', + replace: { + status: PositionStatusMapping[args.data.status], + }, + })}

{POSITION_RESOLUTION_LINK && ( @@ -386,18 +389,26 @@ export const PositionsTable = ({ value={ <>

- {t('Realised PNL: %s', args.value)} + {t('Realised PNL: {{value}}', { + nsSeparator: '*', + replace: { value: args.value }, + })}

{t( - 'Lifetime loss socialisation deductions: %s', - lossesFormatted + 'Lifetime loss socialisation deductions: {{losses}}', + { + nsSeparator: '*', + replace: { + losses: lossesFormatted, + }, + } )}

{t( - `You received less %s in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`, - args.data.assetSymbol + `You received less {{assetSymbol}} in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`, + { assetSymbol: args.data.assetSymbol } )}

{LOSS_SOCIALIZATION_LINK && ( @@ -481,7 +492,15 @@ export const PositionsTable = ({ return columnDefs.filter( (colDef: ColDef | null): colDef is ColDef => colDef !== null ); - }, [isReadOnly, multipleKeys, onClose, onMarketClick, pubKey, pubKeys])} + }, [ + isReadOnly, + multipleKeys, + onClose, + onMarketClick, + pubKey, + pubKeys, + t, + ])} {...props} /> ); diff --git a/libs/positions/src/setup-tests.ts b/libs/positions/src/setup-tests.ts index 68773380a..aa13037f3 100644 --- a/libs/positions/src/setup-tests.ts +++ b/libs/positions/src/setup-tests.ts @@ -1,4 +1,17 @@ import '@testing-library/jest-dom'; import ResizeObserver from 'resize-observer-polyfill'; +import { locales } from '@vegaprotocol/i18n'; +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; + +// Set up i18n instance so that components have the correct default +// en translations +i18n.use(initReactI18next).init({ + // we init with resources + resources: locales, + fallbackLng: 'en', + ns: ['positions'], + defaultNS: 'positions', +}); global.ResizeObserver = ResizeObserver; diff --git a/libs/positions/src/use-t.ts b/libs/positions/src/use-t.ts new file mode 100644 index 000000000..57ddb5f2f --- /dev/null +++ b/libs/positions/src/use-t.ts @@ -0,0 +1,3 @@ +import { useTranslation } from 'react-i18next'; +export const ns = 'positions'; +export const useT = () => useTranslation(ns).t;