LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(positions): use i18next (#5266)

Browse Source
This commit is contained in:
Bartłomiej Głownia 2023-11-18 04:49:19 +01:00 committed by GitHub
parent c3ef639daf
commit cefcff040f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 88 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/i18n/src/index.ts
View File

@ -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,
},
};

30
libs/i18n/src/locales/en/positions.json Normal file
View File

@ -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."
}

7
libs/positions/src/lib/liquidation-price.tsx
View File

@ -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 = ({
<tbody>
<tr>
<th>{t('Worst case')}</th>
<td className="pl-2 font-mono text-right">{worstCase}</td>
<td className="pl-2 text-right font-mono">{worstCase}</td>
</tr>
<tr>
<th>{t('Best case')}</th>
<td className="pl-2 font-mono text-right">{bestCase}</td>
<td className="pl-2 text-right font-mono">{bestCase}</td>
</tr>
</tbody>
</table>

3
libs/positions/src/lib/position-actions-dropdown.tsx
View File

@ -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 (

3
libs/positions/src/lib/positions-manager.tsx
View File

@ -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(

45
libs/positions/src/lib/positions-table.tsx
View File

@ -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<Position> {
onClose?: (data: Position) => void;
@ -81,6 +81,7 @@ export const PositionsTable = ({
pubKey,
...props
}: Props) => {
const t = useT();
return (
<AgGrid
overlayNoRowsTemplate={t('No positions')}
@ -193,8 +194,8 @@ export const PositionsTable = ({
switch (args.data.status) {
case PositionStatus.POSITION_STATUS_CLOSED_OUT:
secondaryTooltip = t(
`You did not have enough %s collateral to meet the maintenance margin requirements for your position, so it was closed by the network.`,
args.data.assetSymbol
`You did not have enough {{assetSymbol}} collateral to meet the maintenance margin requirements for your position, so it was closed by the network.`,
{ assetSymbol: args.data.assetSymbol }
);
break;
case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
@ -218,10 +219,12 @@ export const PositionsTable = ({
<p className="mb-2">{primaryTooltip}</p>
<p className="mb-2">{secondaryTooltip}</p>
<p className="mb-2">
{t(
'Status: %s',
PositionStatusMapping[args.data.status]
)}
{t('Status: {{status}}', {
nsSeparator: '*',
replace: {
status: PositionStatusMapping[args.data.status],
},
})}
</p>
{POSITION_RESOLUTION_LINK && (
<ExternalLink href={POSITION_RESOLUTION_LINK}>
@ -386,18 +389,26 @@ export const PositionsTable = ({
value={
<>
<p className="mb-2">
{t('Realised PNL: %s', args.value)}
{t('Realised PNL: {{value}}', {
nsSeparator: '*',
replace: { value: args.value },
})}
</p>
<p className="mb-2">
{t(
'Lifetime loss socialisation deductions: %s',
lossesFormatted
'Lifetime loss socialisation deductions: {{losses}}',
{
nsSeparator: '*',
replace: {
losses: lossesFormatted,
},
}
)}
</p>
<p className="mb-2">
{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 }
)}
</p>
{LOSS_SOCIALIZATION_LINK && (
@ -481,7 +492,15 @@ export const PositionsTable = ({
return columnDefs.filter<ColDef>(
(colDef: ColDef | null): colDef is ColDef => colDef !== null
);
}, [isReadOnly, multipleKeys, onClose, onMarketClick, pubKey, pubKeys])}
}, [
isReadOnly,
multipleKeys,
onClose,
onMarketClick,
pubKey,
pubKeys,
t,
])}
{...props}
/>
);

13
libs/positions/src/setup-tests.ts
View File

@ -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;

3
libs/positions/src/use-t.ts Normal file
View File

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