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

feat(orders): use i18next

Browse Source
This commit is contained in:
Bartłomiej Głownia
2023-11-17 14:46:18 -08:00
committed by Matthew Russell
parent b6052bc3e5
commit 7aa65b3e6b
15 changed files with 111 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/trading/lib/i18n/index.ts
+1
View File
@@ -71,6 +71,7 @@ i18n
defaultNS: 'trading',
nsSeparator: false,
keySeparator: false, // we use content as keys
nsSeparator: false,
backend,
debug: isInDev,
saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY,
libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
+10 -3
View File
@@ -36,7 +36,6 @@ import {
} from '@vegaprotocol/markets';
import { ExpirySelector } from './expiry-selector';
import { SideSelector } from './side-selector';
import { timeInForceLabel } from '@vegaprotocol/orders';
import {
NoWalletWarning,
REDUCE_ONLY_TOOLTIP,
@@ -479,13 +478,21 @@ const TimeInForce = ({
key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
>
{timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
{
Schema.OrderTimeInForceMapping[
Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
]
}
</option>
<option
key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
>
{timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
{
Schema.OrderTimeInForceMapping[
Schema.OrderTimeInForce.TIME_IN_FORCE_FOK
]
}
</option>
</Select>
</FormGroup>
libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import {
SimpleGrid,
} from '@vegaprotocol/ui-toolkit';
import * as Schema from '@vegaprotocol/types';
import { timeInForceLabel } from '@vegaprotocol/orders';
import { OrderTimeInForceMapping } from '@vegaprotocol/types';
import { compileGridData } from '../trading-mode-tooltip';
import { MarketModeValidationType } from '../../constants';
import type { Market, StaticMarketData } from '@vegaprotocol/markets';
@@ -120,7 +120,7 @@ export const TimeInForceSelector = ({
>
{options.map(([key, value]) => (
<option key={key} value={value}>
{timeInForceLabel(value)}
{OrderTimeInForceMapping[value]}
</option>
))}
</TradingSelect>
libs/i18n/src/locales/en/orders.json
+49
View File
@@ -0,0 +1,49 @@
{
"{{tifLabel}}. Post Only": "{{tifLabel}}. Post Only",
"{{tifLabel}}. Reduce only": "{{tifLabel}}. Reduce only",
"Cancel": "Cancel",
"Cancel all": "Cancel all",
"Cancel order": "Cancel order",
"Cancels": "Cancels",
"Copy": "Copy",
"Copy order ID": "Copy order ID",
"Created": "Created",
"Edit order": "Edit order",
"Expires": "Expires",
"Expires at": "Expires at",
"Filled": "Filled",
"Iceberg order": "Iceberg order",
"Liquidity provision": "Liquidity provision",
"Market": "Market",
"MAX": "MAX",
"Minimum size": "Minimum size",
"No orders": "No orders",
"No stop orders": "No stop orders",
"One Cancels the Other": "One Cancels the Other",
"Order details": "Order details",
"Order ID": "Order ID",
"Peak size": "Peak size",
"Pegged": "Pegged",
"Post only": "Post only",
"Price": "Price",
"Reduce only": "Reduce only",
"Remaining": "Remaining",
"Reserved remaining": "Reserved remaining",
"Side": "Side",
"Size": "Size",
"Something went wrong: {{errorMessage}}": "Something went wrong: {{errorMessage}}",
"Status": "Status",
"Submit": "Submit",
"The maximum volume that can be traded at once. Must be less than the total size of the order.": "The maximum volume that can be traded at once. Must be less than the total size of the order.",
"The price cannot be negative": "The price cannot be negative",
"The size cannot be negative": "The size cannot be negative",
"Trigger": "Trigger",
"Type": "Type",
"Update": "Update",
"Updated": "Updated",
"View order details": "View order details",
"When the order trades and its size falls below this threshold, it will be reset to the peak size and moved to the back of the priority order. Must be less than or equal to peak size, and greater than 0.": "When the order trades and its size falls below this threshold, it will be reset to the peak size and moved to the back of the priority order. Must be less than or equal to peak size, and greater than 0.",
"Yes": "Yes",
"You need to provide a price": "You need to provide a price",
"You need to provide a size": "You need to provide a size"
}
libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx
+9 -6
View File
@@ -1,8 +1,8 @@
import { t } from '@vegaprotocol/i18n';
import { TradingButton } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useVegaTransactionStore } from '@vegaprotocol/web3';
import { useHasAmendableOrder } from '../../order-hooks';
import { useT } from '../../use-t';
export const OpenOrdersMenu = () => {
const { isReadOnly } = useVegaWallet();
@@ -28,8 +28,11 @@ export const OpenOrdersMenu = () => {
);
};
const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
<TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
{t('Cancel all')}
</TradingButton>
);
const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => {
const t = useT();
return (
<TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
{t('Cancel all')}
</TradingButton>
);
};
libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
+9 -2
View File
@@ -1,4 +1,3 @@
import { t } from '@vegaprotocol/i18n';
import { useCallback, useRef, useState, useEffect } from 'react';
import { type AgGridReact } from 'ag-grid-react';
import { Pagination, type useDataGridEvents } from '@vegaprotocol/datagrid';
@@ -12,6 +11,7 @@ import { type Order } from '../order-data-provider';
import { OrderViewDialog } from '../order-list/order-view-dialog';
import { OrderListTable } from '../order-list';
import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
import { useT } from '../../use-t';
export enum Filter {
'Open' = 'Open',
@@ -38,6 +38,7 @@ export const OrderListManager = ({
gridProps,
noRowsMessage,
}: OrderListManagerProps) => {
const t = useT();
const gridRef = useRef<AgGridReact | null>(null);
const [editOrder, setEditOrder] = useState<Order | null>(null);
const [viewOrder, setViewOrder] = useState<Order | null>(null);
@@ -85,7 +86,13 @@ export const OrderListManager = ({
);
if (error) {
return <Splash>{t(`Something went wrong: ${error.message}`)}</Splash>;
return (
<Splash>
{t(`Something went wrong: {{errorMessage}}`, {
errorMessage: error.message,
})}
</Splash>
);
}
return (
libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
+5 -4
View File
@@ -5,7 +5,6 @@ import {
addDecimalsFormatNumber,
validateAmount,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { Size } from '@vegaprotocol/datagrid';
import * as Schema from '@vegaprotocol/types';
import {
@@ -19,6 +18,7 @@ import {
} from '@vegaprotocol/ui-toolkit';
import { useForm } from 'react-hook-form';
import type { Order } from '../order-data-provider';
import { useT } from '../../use-t';
interface OrderEditDialogProps {
isOpen: boolean;
@@ -38,6 +38,7 @@ export const OrderEditDialog = ({
order,
onSubmit,
}: OrderEditDialogProps) => {
const t = useT();
const headerClassName = 'text-xs font-bold text-black dark:text-white';
const {
register,
@@ -60,7 +61,7 @@ export const OrderEditDialog = ({
title={t('Edit order')}
icon={<VegaIcon name={VegaIconNames.EDIT} />}
>
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="grid grid-cols-1 gap-8 md:grid-cols-4">
{order.market && (
<div className="md:col-span-2">
<p className={headerClassName}>{t(`Market`)}</p>
@@ -99,10 +100,10 @@ export const OrderEditDialog = ({
<form
onSubmit={handleSubmit(onSubmit)}
data-testid="edit-order"
className="w-full mt-4"
className="mt-4 w-full"
noValidate
>
<div className="flex flex-col md:flex-row gap-4">
<div className="flex flex-col gap-4 md:flex-row">
<TradingFormGroup
label={t('Price')}
labelFor="limitPrice"
libs/orders/src/lib/components/order-list/order-list.tsx
+11 -6
View File
@@ -6,7 +6,6 @@ import {
isNumeric,
toBigNum,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import * as Schema from '@vegaprotocol/types';
import {
ActionsDropdown,
@@ -30,10 +29,11 @@ import {
type VegaValueFormatterParams,
type VegaValueGetterParams,
} from '@vegaprotocol/datagrid';
import { AgGridReact } from 'ag-grid-react';
import { type AgGridReact } from 'ag-grid-react';
import { type Order } from '../order-data-provider';
import { Filter } from '../order-list-manager/order-list-manager';
import { type ColDef } from 'ag-grid-community';
import { useT } from '../../use-t';
const defaultColDef = {
resizable: true,
@@ -68,6 +68,7 @@ export const OrderListTable = memo<
},
ref
) => {
const t = useT();
const showAllActions = props.isReadOnly
? false
: filter === undefined || filter === Filter.Open
@@ -252,11 +253,14 @@ export const OrderListTable = memo<
}
const tifLabel = value ? Schema.OrderTimeInForceCode[value] : '';
const label = `${tifLabel}${
data?.postOnly ? t('. Post Only') : ''
}${data?.reduceOnly ? t('. Reduce only') : ''}`;
if (data?.postOnly) {
return t('{{tifLabel}}. Post Only', { tifLabel });
}
if (data?.reduceOnly) {
return t('{{tifLabel}}. Reduce only', { tifLabel });
}
return label;
return tifLabel;
},
},
{
@@ -336,6 +340,7 @@ export const OrderListTable = memo<
onOrderTypeClick,
props.isReadOnly,
showAllActions,
t,
]
);
libs/orders/src/lib/components/order-list/order-view-dialog.tsx
+7 -6
View File
@@ -2,7 +2,6 @@ import {
addDecimalsFormatNumber,
getDateTimeFormat,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { Size } from '@vegaprotocol/datagrid';
import * as Schema from '@vegaprotocol/types';
import {
@@ -19,6 +18,7 @@ import type { Order } from '../order-data-provider';
import CopyToClipboard from 'react-copy-to-clipboard';
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
import classNames from 'classnames';
import { useT } from '../../use-t';
interface OrderViewDialogProps {
isOpen: boolean;
@@ -33,6 +33,7 @@ export const OrderViewDialog = ({
onChange,
onMarketClick,
}: OrderViewDialogProps) => {
const t = useT();
const [, setCopied] = useCopyTimeout();
return (
<Dialog open={isOpen} title={t('Order details')} onChange={onChange}>
@@ -184,21 +185,21 @@ export const OrderViewDialog = ({
<KeyValueTableRow key={'order-post-only'}>
<div data-testid={'order-post-only-label'}>{t('Post only')}</div>
<div data-testid={`order-post-only-value`}>
{order.postOnly ? t('Yes') : t('-')}
{order.postOnly ? t('Yes') : '-'}
</div>
</KeyValueTableRow>
<KeyValueTableRow key={'order-reduce-only'}>
<div data-testid={'order-reduce-only-label'}>{t('Reduce only')}</div>
<div data-testid={`order-reduce-only-value`}>
{order.reduceOnly ? t('Yes') : t('-')}
{order.reduceOnly ? t('Yes') : '-'}
</div>
</KeyValueTableRow>
<KeyValueTableRow key={'order-pegged'}>
<div data-testid={'order-pegged-label'}>{t('Pegged')}</div>
<div data-testid={`order-pegged-value`}>
{order.peggedOrder ? t('Yes') : t('-')}
{order.peggedOrder ? t('Yes') : '-'}
</div>
</KeyValueTableRow>
@@ -207,7 +208,7 @@ export const OrderViewDialog = ({
{t('Liquidity provision')}
</div>
<div data-testid={`order-liquidity-provision-value`}>
{order.liquidityProvision ? t('Yes') : t('-')}
{order.liquidityProvision ? t('Yes') : '-'}
</div>
</KeyValueTableRow>
</KeyValueTable>
@@ -217,7 +218,7 @@ export const OrderViewDialog = ({
{t('Iceberg order')}
</div>
<div data-testid={`order-iceberg-order-value`}>
{order.icebergOrder ? t('Yes') : t('-')}
{order.icebergOrder ? t('Yes') : '-'}
</div>
</KeyValueTableRow>
{order.icebergOrder && (
libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.tsx
+2 -1
View File
@@ -1,4 +1,3 @@
import { t } from '@vegaprotocol/i18n';
import { useCallback, useEffect, useState } from 'react';
import { StopOrdersTable } from '../stop-orders-table/stop-orders-table';
import { type useDataGridEvents } from '@vegaprotocol/datagrid';
@@ -11,6 +10,7 @@ import {
type StopOrdersQueryVariables,
} from '../order-data-provider';
import { useVegaTransactionStore } from '@vegaprotocol/web3';
import { useT } from '../../use-t';
export interface StopOrdersManagerProps {
partyId: string;
@@ -27,6 +27,7 @@ export const StopOrdersManager = ({
isReadOnly,
gridProps,
}: StopOrdersManagerProps) => {
const t = useT();
const create = useVegaTransactionStore((state) => state.create);
const [viewOrder, setViewOrder] = useState<Order | null>(null);
const variables: StopOrdersQueryVariables = {
libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx
+4 -3
View File
@@ -5,7 +5,6 @@ import {
toBigNum,
formatTrigger,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import * as Schema from '@vegaprotocol/types';
import {
ActionsDropdown,
@@ -35,6 +34,7 @@ import type {
import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
import type { ColDef } from 'ag-grid-community';
import type { Order } from '../order-data-provider';
import { useT } from '../../use-t';
const defaultColDef = {
resizable: true,
@@ -51,6 +51,7 @@ export type StopOrdersTableProps = TypedDataAgGrid<StopOrder> & {
export const StopOrdersTable = memo(
({ onCancel, onMarketClick, onView, ...props }: StopOrdersTableProps) => {
const t = useT();
const showAllActions = !props.isReadOnly;
const columnDefs: ColDef[] = useMemo(
() => [
@@ -176,7 +177,7 @@ export const StopOrdersTable = memo(
{data.ocoLinkId && (
<Pill
size="xxs"
className="uppercase ml-0.5"
className="ml-0.5 uppercase"
title={t('One Cancels the Other')}
>
OCO
@@ -281,7 +282,7 @@ export const StopOrdersTable = memo(
},
},
],
[onCancel, onMarketClick, onView, props.isReadOnly, showAllActions]
[onCancel, onMarketClick, onView, props.isReadOnly, showAllActions, t]
);
return (
libs/orders/src/lib/index.ts
-1
View File
@@ -1,3 +1,2 @@
export * from './components';
export * from './order-hooks';
export * from './utils';
libs/orders/src/lib/use-t.ts
+2
View File
@@ -0,0 +1,2 @@
import { useTranslation } from 'react-i18next';
export const useT = () => useTranslation('orders').t;
libs/orders/src/lib/utils.spec.ts
-28
View File
@@ -1,28 +0,0 @@
import { timeInForceLabel } from './utils';
import * as Types from '@vegaprotocol/types';
describe('utils', () => {
describe('timeInForceLabel', () => {
it('should return the correct label for time in force', () => {
expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(
`Fill or Kill (FOK)`
);
expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(
`Good 'til Cancelled (GTC)`
);
expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(
`Immediate or Cancel (IOC)`
);
expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe(
`Good 'til Time (GTT)`
);
expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe(
`Good for Auction (GFA)`
);
expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(
`Good for Normal (GFN)`
);
expect(timeInForceLabel('')).toBe('');
});
});
});
libs/orders/src/lib/utils.ts
-22
View File
@@ -1,22 +0,0 @@
import { t } from '@vegaprotocol/i18n';
import * as Schema from '@vegaprotocol/types';
// More detail in https://docs.vega.xyz/mainnet/graphql/enums/order-time-in-force
export const timeInForceLabel = (tif: string) => {
switch (tif) {
case Schema.OrderTimeInForce.TIME_IN_FORCE_GTC:
return t(`Good 'til Cancelled (GTC)`);
case Schema.OrderTimeInForce.TIME_IN_FORCE_IOC:
return t('Immediate or Cancel (IOC)');
case Schema.OrderTimeInForce.TIME_IN_FORCE_FOK:
return t('Fill or Kill (FOK)');
case Schema.OrderTimeInForce.TIME_IN_FORCE_GTT:
return t(`Good 'til Time (GTT)`);
case Schema.OrderTimeInForce.TIME_IN_FORCE_GFN:
return t('Good for Normal (GFN)');
case Schema.OrderTimeInForce.TIME_IN_FORCE_GFA:
return t('Good for Auction (GFA)');
default:
return t(tif);
}
};