feat(orders): use i18next (#5263)
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
This commit is contained in:
parent
cefcff040f
commit
48e4ab53a1
@ -36,7 +36,6 @@ import {
|
|||||||
} from '@vegaprotocol/markets';
|
} from '@vegaprotocol/markets';
|
||||||
import { ExpirySelector } from './expiry-selector';
|
import { ExpirySelector } from './expiry-selector';
|
||||||
import { SideSelector } from './side-selector';
|
import { SideSelector } from './side-selector';
|
||||||
import { timeInForceLabel } from '@vegaprotocol/orders';
|
|
||||||
import {
|
import {
|
||||||
NoWalletWarning,
|
NoWalletWarning,
|
||||||
REDUCE_ONLY_TOOLTIP,
|
REDUCE_ONLY_TOOLTIP,
|
||||||
@ -479,13 +478,13 @@ const TimeInForce = ({
|
|||||||
key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
|
key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
|
||||||
value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
|
value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
|
||||||
>
|
>
|
||||||
{timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
|
{t(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option
|
||||||
key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
|
key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
|
||||||
value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
|
value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
|
||||||
>
|
>
|
||||||
{timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
|
{t(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
|
||||||
</option>
|
</option>
|
||||||
</Select>
|
</Select>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
@ -1181,7 +1180,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
|
|||||||
testId={'stop-order-warning-limit'}
|
testId={'stop-order-warning-limit'}
|
||||||
message={t(
|
message={t(
|
||||||
'There is a limit of {{maxNumberOfOrders}} active stop orders per market. Orders submitted above the limit will be immediately rejected.',
|
'There is a limit of {{maxNumberOfOrders}} active stop orders per market. Orders submitted above the limit will be immediately rejected.',
|
||||||
{ maxNumberOfOrders: MAX_NUMBER_OF_ACTIVE_STOP_ORDERS.toString() }
|
{
|
||||||
|
maxNumberOfOrders: MAX_NUMBER_OF_ACTIVE_STOP_ORDERS.toString(),
|
||||||
|
}
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -495,12 +495,15 @@ describe('DealTicket', () => {
|
|||||||
Array.from(screen.getByTestId('order-tif').children).map(
|
Array.from(screen.getByTestId('order-tif').children).map(
|
||||||
(o) => o.textContent
|
(o) => o.textContent
|
||||||
)
|
)
|
||||||
).toEqual(['Fill or Kill (FOK)', 'Immediate or Cancel (IOC)']);
|
).toEqual([
|
||||||
|
Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
|
||||||
|
Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
|
||||||
|
]);
|
||||||
|
|
||||||
// IOC should be default
|
// IOC should be default
|
||||||
// 7002-SORD-030
|
// 7002-SORD-030
|
||||||
expect(screen.getByTestId('order-tif')).toHaveDisplayValue(
|
expect(screen.getByTestId('order-tif')).toHaveDisplayValue(
|
||||||
'Immediate or Cancel (IOC)'
|
Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
|
||||||
);
|
);
|
||||||
|
|
||||||
// Select FOK - FOK should be selected
|
// Select FOK - FOK should be selected
|
||||||
@ -509,7 +512,7 @@ describe('DealTicket', () => {
|
|||||||
Schema.OrderTimeInForce.TIME_IN_FORCE_FOK
|
Schema.OrderTimeInForce.TIME_IN_FORCE_FOK
|
||||||
);
|
);
|
||||||
expect(screen.getByTestId('order-tif')).toHaveDisplayValue(
|
expect(screen.getByTestId('order-tif')).toHaveDisplayValue(
|
||||||
'Fill or Kill (FOK)'
|
Schema.OrderTimeInForce.TIME_IN_FORCE_FOK
|
||||||
);
|
);
|
||||||
|
|
||||||
// Switch to type limit order -> all TIF options should be shown
|
// Switch to type limit order -> all TIF options should be shown
|
||||||
|
@ -6,7 +6,6 @@ import {
|
|||||||
SimpleGrid,
|
SimpleGrid,
|
||||||
} from '@vegaprotocol/ui-toolkit';
|
} from '@vegaprotocol/ui-toolkit';
|
||||||
import * as Schema from '@vegaprotocol/types';
|
import * as Schema from '@vegaprotocol/types';
|
||||||
import { timeInForceLabel } from '@vegaprotocol/orders';
|
|
||||||
import { compileGridData } from '../trading-mode-tooltip';
|
import { compileGridData } from '../trading-mode-tooltip';
|
||||||
import { MarketModeValidationType } from '../../constants';
|
import { MarketModeValidationType } from '../../constants';
|
||||||
import type { Market, StaticMarketData } from '@vegaprotocol/markets';
|
import type { Market, StaticMarketData } from '@vegaprotocol/markets';
|
||||||
@ -119,9 +118,7 @@ export const TimeInForceSelector = ({
|
|||||||
hasError={!!errorMessage}
|
hasError={!!errorMessage}
|
||||||
>
|
>
|
||||||
{options.map(([key, value]) => (
|
{options.map(([key, value]) => (
|
||||||
<option key={key} value={value}>
|
<TimeInForceOption key={key} value={value} />
|
||||||
{timeInForceLabel(value)}
|
|
||||||
</option>
|
|
||||||
))}
|
))}
|
||||||
</TradingSelect>
|
</TradingSelect>
|
||||||
{errorMessage && (
|
{errorMessage && (
|
||||||
@ -133,3 +130,8 @@ export const TimeInForceSelector = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const TimeInForceOption = ({ value }: { value: Schema.OrderTimeInForce }) => {
|
||||||
|
const t = useT();
|
||||||
|
return <option value={value}>{t(value)}</option>;
|
||||||
|
};
|
||||||
|
@ -128,5 +128,11 @@
|
|||||||
"You need to connect your own wallet to start trading on this market": "You need to connect your own wallet to start trading on this market",
|
"You need to connect your own wallet to start trading on this market": "You need to connect your own wallet to start trading on this market",
|
||||||
"You need to provide a minimum visible size": "You need to provide a minimum visible size",
|
"You need to provide a minimum visible size": "You need to provide a minimum visible size",
|
||||||
"You need to provide a peak size": "You need to provide a peak size",
|
"You need to provide a peak size": "You need to provide a peak size",
|
||||||
"You need to provide a size": "You need to provide a size"
|
"You need to provide a size": "You need to provide a size",
|
||||||
|
"TIME_IN_FORCE_FOK": "Fill or Kill (FOK)",
|
||||||
|
"TIME_IN_FORCE_GFA": "Good for Auction (GFA)",
|
||||||
|
"TIME_IN_FORCE_GFN": "Good for Normal (GFN)",
|
||||||
|
"TIME_IN_FORCE_GTC": "Good 'til Cancelled (GTC)",
|
||||||
|
"TIME_IN_FORCE_GTT": "Good 'til Time (GTT)",
|
||||||
|
"TIME_IN_FORCE_IOC": "Immediate or Cancel (IOC)"
|
||||||
}
|
}
|
||||||
|
49
libs/i18n/src/locales/en/orders.json
Normal file
49
libs/i18n/src/locales/en/orders.json
Normal 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"
|
||||||
|
}
|
@ -1,8 +1,8 @@
|
|||||||
import { t } from '@vegaprotocol/i18n';
|
|
||||||
import { TradingButton } from '@vegaprotocol/ui-toolkit';
|
import { TradingButton } from '@vegaprotocol/ui-toolkit';
|
||||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||||
import { useVegaTransactionStore } from '@vegaprotocol/web3';
|
import { useVegaTransactionStore } from '@vegaprotocol/web3';
|
||||||
import { useHasAmendableOrder } from '../../order-hooks';
|
import { useHasAmendableOrder } from '../../order-hooks';
|
||||||
|
import { useT } from '../../use-t';
|
||||||
|
|
||||||
export const OpenOrdersMenu = () => {
|
export const OpenOrdersMenu = () => {
|
||||||
const { isReadOnly } = useVegaWallet();
|
const { isReadOnly } = useVegaWallet();
|
||||||
@ -28,8 +28,11 @@ export const OpenOrdersMenu = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
|
const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => {
|
||||||
<TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
|
const t = useT();
|
||||||
{t('Cancel all')}
|
return (
|
||||||
</TradingButton>
|
<TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
|
||||||
);
|
{t('Cancel all')}
|
||||||
|
</TradingButton>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import { t } from '@vegaprotocol/i18n';
|
|
||||||
import { useCallback, useRef, useState, useEffect } from 'react';
|
import { useCallback, useRef, useState, useEffect } from 'react';
|
||||||
import { type AgGridReact } from 'ag-grid-react';
|
import { type AgGridReact } from 'ag-grid-react';
|
||||||
import { Pagination, type useDataGridEvents } from '@vegaprotocol/datagrid';
|
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 { OrderViewDialog } from '../order-list/order-view-dialog';
|
||||||
import { OrderListTable } from '../order-list';
|
import { OrderListTable } from '../order-list';
|
||||||
import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
|
import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
|
||||||
|
import { useT } from '../../use-t';
|
||||||
|
|
||||||
export enum Filter {
|
export enum Filter {
|
||||||
'Open' = 'Open',
|
'Open' = 'Open',
|
||||||
@ -38,6 +38,7 @@ export const OrderListManager = ({
|
|||||||
gridProps,
|
gridProps,
|
||||||
noRowsMessage,
|
noRowsMessage,
|
||||||
}: OrderListManagerProps) => {
|
}: OrderListManagerProps) => {
|
||||||
|
const t = useT();
|
||||||
const gridRef = useRef<AgGridReact | null>(null);
|
const gridRef = useRef<AgGridReact | null>(null);
|
||||||
const [editOrder, setEditOrder] = useState<Order | null>(null);
|
const [editOrder, setEditOrder] = useState<Order | null>(null);
|
||||||
const [viewOrder, setViewOrder] = useState<Order | null>(null);
|
const [viewOrder, setViewOrder] = useState<Order | null>(null);
|
||||||
@ -85,7 +86,13 @@ export const OrderListManager = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return <Splash>{t(`Something went wrong: ${error.message}`)}</Splash>;
|
return (
|
||||||
|
<Splash>
|
||||||
|
{t(`Something went wrong: {{errorMessage}}`, {
|
||||||
|
errorMessage: error.message,
|
||||||
|
})}
|
||||||
|
</Splash>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { act, render, screen, within } from '@testing-library/react';
|
import { render, screen, within } from '@testing-library/react';
|
||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
import { OrderEditDialog } from './order-edit-dialog';
|
import { OrderEditDialog } from './order-edit-dialog';
|
||||||
@ -7,16 +7,14 @@ import { limitOrder } from '../mocks';
|
|||||||
describe('OrderEditDialog', () => {
|
describe('OrderEditDialog', () => {
|
||||||
it('must be warned (pre-submit) if the input price has too many digits after the decimal place for the market', async () => {
|
it('must be warned (pre-submit) if the input price has too many digits after the decimal place for the market', async () => {
|
||||||
// 7003-MORD-013
|
// 7003-MORD-013
|
||||||
await act(async () => {
|
render(
|
||||||
render(
|
<OrderEditDialog
|
||||||
<OrderEditDialog
|
order={limitOrder}
|
||||||
order={limitOrder}
|
onChange={jest.fn()}
|
||||||
onChange={jest.fn()}
|
isOpen={true}
|
||||||
isOpen={true}
|
onSubmit={jest.fn()}
|
||||||
onSubmit={jest.fn()}
|
/>
|
||||||
/>
|
);
|
||||||
);
|
|
||||||
});
|
|
||||||
const editOrder = await screen.findByTestId('edit-order');
|
const editOrder = await screen.findByTestId('edit-order');
|
||||||
const limitPrice = within(editOrder).getByLabelText('Price');
|
const limitPrice = within(editOrder).getByLabelText('Price');
|
||||||
await userEvent.type(limitPrice, '0.111111');
|
await userEvent.type(limitPrice, '0.111111');
|
||||||
|
@ -5,7 +5,6 @@ import {
|
|||||||
addDecimalsFormatNumber,
|
addDecimalsFormatNumber,
|
||||||
validateAmount,
|
validateAmount,
|
||||||
} from '@vegaprotocol/utils';
|
} from '@vegaprotocol/utils';
|
||||||
import { t } from '@vegaprotocol/i18n';
|
|
||||||
import { Size } from '@vegaprotocol/datagrid';
|
import { Size } from '@vegaprotocol/datagrid';
|
||||||
import * as Schema from '@vegaprotocol/types';
|
import * as Schema from '@vegaprotocol/types';
|
||||||
import {
|
import {
|
||||||
@ -19,6 +18,7 @@ import {
|
|||||||
} from '@vegaprotocol/ui-toolkit';
|
} from '@vegaprotocol/ui-toolkit';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import type { Order } from '../order-data-provider';
|
import type { Order } from '../order-data-provider';
|
||||||
|
import { useT } from '../../use-t';
|
||||||
|
|
||||||
interface OrderEditDialogProps {
|
interface OrderEditDialogProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@ -38,6 +38,7 @@ export const OrderEditDialog = ({
|
|||||||
order,
|
order,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
}: OrderEditDialogProps) => {
|
}: OrderEditDialogProps) => {
|
||||||
|
const t = useT();
|
||||||
const headerClassName = 'text-xs font-bold text-black dark:text-white';
|
const headerClassName = 'text-xs font-bold text-black dark:text-white';
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -60,7 +61,7 @@ export const OrderEditDialog = ({
|
|||||||
title={t('Edit order')}
|
title={t('Edit order')}
|
||||||
icon={<VegaIcon name={VegaIconNames.EDIT} />}
|
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 && (
|
{order.market && (
|
||||||
<div className="md:col-span-2">
|
<div className="md:col-span-2">
|
||||||
<p className={headerClassName}>{t(`Market`)}</p>
|
<p className={headerClassName}>{t(`Market`)}</p>
|
||||||
@ -99,10 +100,10 @@ export const OrderEditDialog = ({
|
|||||||
<form
|
<form
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
data-testid="edit-order"
|
data-testid="edit-order"
|
||||||
className="w-full mt-4"
|
className="mt-4 w-full"
|
||||||
noValidate
|
noValidate
|
||||||
>
|
>
|
||||||
<div className="flex flex-col md:flex-row gap-4">
|
<div className="flex flex-col gap-4 md:flex-row">
|
||||||
<TradingFormGroup
|
<TradingFormGroup
|
||||||
label={t('Price')}
|
label={t('Price')}
|
||||||
labelFor="limitPrice"
|
labelFor="limitPrice"
|
||||||
|
@ -6,7 +6,6 @@ import {
|
|||||||
isNumeric,
|
isNumeric,
|
||||||
toBigNum,
|
toBigNum,
|
||||||
} from '@vegaprotocol/utils';
|
} from '@vegaprotocol/utils';
|
||||||
import { t } from '@vegaprotocol/i18n';
|
|
||||||
import * as Schema from '@vegaprotocol/types';
|
import * as Schema from '@vegaprotocol/types';
|
||||||
import {
|
import {
|
||||||
ActionsDropdown,
|
ActionsDropdown,
|
||||||
@ -30,10 +29,11 @@ import {
|
|||||||
type VegaValueFormatterParams,
|
type VegaValueFormatterParams,
|
||||||
type VegaValueGetterParams,
|
type VegaValueGetterParams,
|
||||||
} from '@vegaprotocol/datagrid';
|
} from '@vegaprotocol/datagrid';
|
||||||
import { AgGridReact } from 'ag-grid-react';
|
import { type AgGridReact } from 'ag-grid-react';
|
||||||
import { type Order } from '../order-data-provider';
|
import { type Order } from '../order-data-provider';
|
||||||
import { Filter } from '../order-list-manager/order-list-manager';
|
import { Filter } from '../order-list-manager/order-list-manager';
|
||||||
import { type ColDef } from 'ag-grid-community';
|
import { type ColDef } from 'ag-grid-community';
|
||||||
|
import { useT } from '../../use-t';
|
||||||
|
|
||||||
const defaultColDef = {
|
const defaultColDef = {
|
||||||
resizable: true,
|
resizable: true,
|
||||||
@ -68,6 +68,7 @@ export const OrderListTable = memo<
|
|||||||
},
|
},
|
||||||
ref
|
ref
|
||||||
) => {
|
) => {
|
||||||
|
const t = useT();
|
||||||
const showAllActions = props.isReadOnly
|
const showAllActions = props.isReadOnly
|
||||||
? false
|
? false
|
||||||
: filter === undefined || filter === Filter.Open
|
: filter === undefined || filter === Filter.Open
|
||||||
@ -252,11 +253,14 @@ export const OrderListTable = memo<
|
|||||||
}
|
}
|
||||||
|
|
||||||
const tifLabel = value ? Schema.OrderTimeInForceCode[value] : '';
|
const tifLabel = value ? Schema.OrderTimeInForceCode[value] : '';
|
||||||
const label = `${tifLabel}${
|
if (data?.postOnly) {
|
||||||
data?.postOnly ? t('. Post Only') : ''
|
return t('{{tifLabel}}. Post Only', { tifLabel });
|
||||||
}${data?.reduceOnly ? t('. Reduce only') : ''}`;
|
}
|
||||||
|
if (data?.reduceOnly) {
|
||||||
|
return t('{{tifLabel}}. Reduce only', { tifLabel });
|
||||||
|
}
|
||||||
|
|
||||||
return label;
|
return tifLabel;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -336,6 +340,7 @@ export const OrderListTable = memo<
|
|||||||
onOrderTypeClick,
|
onOrderTypeClick,
|
||||||
props.isReadOnly,
|
props.isReadOnly,
|
||||||
showAllActions,
|
showAllActions,
|
||||||
|
t,
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -2,7 +2,6 @@ import {
|
|||||||
addDecimalsFormatNumber,
|
addDecimalsFormatNumber,
|
||||||
getDateTimeFormat,
|
getDateTimeFormat,
|
||||||
} from '@vegaprotocol/utils';
|
} from '@vegaprotocol/utils';
|
||||||
import { t } from '@vegaprotocol/i18n';
|
|
||||||
import { Size } from '@vegaprotocol/datagrid';
|
import { Size } from '@vegaprotocol/datagrid';
|
||||||
import * as Schema from '@vegaprotocol/types';
|
import * as Schema from '@vegaprotocol/types';
|
||||||
import {
|
import {
|
||||||
@ -19,6 +18,7 @@ import type { Order } from '../order-data-provider';
|
|||||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||||
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
|
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import { useT } from '../../use-t';
|
||||||
|
|
||||||
interface OrderViewDialogProps {
|
interface OrderViewDialogProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@ -33,6 +33,7 @@ export const OrderViewDialog = ({
|
|||||||
onChange,
|
onChange,
|
||||||
onMarketClick,
|
onMarketClick,
|
||||||
}: OrderViewDialogProps) => {
|
}: OrderViewDialogProps) => {
|
||||||
|
const t = useT();
|
||||||
const [, setCopied] = useCopyTimeout();
|
const [, setCopied] = useCopyTimeout();
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} title={t('Order details')} onChange={onChange}>
|
<Dialog open={isOpen} title={t('Order details')} onChange={onChange}>
|
||||||
@ -184,21 +185,21 @@ export const OrderViewDialog = ({
|
|||||||
<KeyValueTableRow key={'order-post-only'}>
|
<KeyValueTableRow key={'order-post-only'}>
|
||||||
<div data-testid={'order-post-only-label'}>{t('Post only')}</div>
|
<div data-testid={'order-post-only-label'}>{t('Post only')}</div>
|
||||||
<div data-testid={`order-post-only-value`}>
|
<div data-testid={`order-post-only-value`}>
|
||||||
{order.postOnly ? t('Yes') : t('-')}
|
{order.postOnly ? t('Yes') : '-'}
|
||||||
</div>
|
</div>
|
||||||
</KeyValueTableRow>
|
</KeyValueTableRow>
|
||||||
|
|
||||||
<KeyValueTableRow key={'order-reduce-only'}>
|
<KeyValueTableRow key={'order-reduce-only'}>
|
||||||
<div data-testid={'order-reduce-only-label'}>{t('Reduce only')}</div>
|
<div data-testid={'order-reduce-only-label'}>{t('Reduce only')}</div>
|
||||||
<div data-testid={`order-reduce-only-value`}>
|
<div data-testid={`order-reduce-only-value`}>
|
||||||
{order.reduceOnly ? t('Yes') : t('-')}
|
{order.reduceOnly ? t('Yes') : '-'}
|
||||||
</div>
|
</div>
|
||||||
</KeyValueTableRow>
|
</KeyValueTableRow>
|
||||||
|
|
||||||
<KeyValueTableRow key={'order-pegged'}>
|
<KeyValueTableRow key={'order-pegged'}>
|
||||||
<div data-testid={'order-pegged-label'}>{t('Pegged')}</div>
|
<div data-testid={'order-pegged-label'}>{t('Pegged')}</div>
|
||||||
<div data-testid={`order-pegged-value`}>
|
<div data-testid={`order-pegged-value`}>
|
||||||
{order.peggedOrder ? t('Yes') : t('-')}
|
{order.peggedOrder ? t('Yes') : '-'}
|
||||||
</div>
|
</div>
|
||||||
</KeyValueTableRow>
|
</KeyValueTableRow>
|
||||||
|
|
||||||
@ -207,7 +208,7 @@ export const OrderViewDialog = ({
|
|||||||
{t('Liquidity provision')}
|
{t('Liquidity provision')}
|
||||||
</div>
|
</div>
|
||||||
<div data-testid={`order-liquidity-provision-value`}>
|
<div data-testid={`order-liquidity-provision-value`}>
|
||||||
{order.liquidityProvision ? t('Yes') : t('-')}
|
{order.liquidityProvision ? t('Yes') : '-'}
|
||||||
</div>
|
</div>
|
||||||
</KeyValueTableRow>
|
</KeyValueTableRow>
|
||||||
</KeyValueTable>
|
</KeyValueTable>
|
||||||
@ -217,7 +218,7 @@ export const OrderViewDialog = ({
|
|||||||
{t('Iceberg order')}
|
{t('Iceberg order')}
|
||||||
</div>
|
</div>
|
||||||
<div data-testid={`order-iceberg-order-value`}>
|
<div data-testid={`order-iceberg-order-value`}>
|
||||||
{order.icebergOrder ? t('Yes') : t('-')}
|
{order.icebergOrder ? t('Yes') : '-'}
|
||||||
</div>
|
</div>
|
||||||
</KeyValueTableRow>
|
</KeyValueTableRow>
|
||||||
{order.icebergOrder && (
|
{order.icebergOrder && (
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import { t } from '@vegaprotocol/i18n';
|
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import { StopOrdersTable } from '../stop-orders-table/stop-orders-table';
|
import { StopOrdersTable } from '../stop-orders-table/stop-orders-table';
|
||||||
import { type useDataGridEvents } from '@vegaprotocol/datagrid';
|
import { type useDataGridEvents } from '@vegaprotocol/datagrid';
|
||||||
@ -11,6 +10,7 @@ import {
|
|||||||
type StopOrdersQueryVariables,
|
type StopOrdersQueryVariables,
|
||||||
} from '../order-data-provider';
|
} from '../order-data-provider';
|
||||||
import { useVegaTransactionStore } from '@vegaprotocol/web3';
|
import { useVegaTransactionStore } from '@vegaprotocol/web3';
|
||||||
|
import { useT } from '../../use-t';
|
||||||
|
|
||||||
export interface StopOrdersManagerProps {
|
export interface StopOrdersManagerProps {
|
||||||
partyId: string;
|
partyId: string;
|
||||||
@ -27,6 +27,7 @@ export const StopOrdersManager = ({
|
|||||||
isReadOnly,
|
isReadOnly,
|
||||||
gridProps,
|
gridProps,
|
||||||
}: StopOrdersManagerProps) => {
|
}: StopOrdersManagerProps) => {
|
||||||
|
const t = useT();
|
||||||
const create = useVegaTransactionStore((state) => state.create);
|
const create = useVegaTransactionStore((state) => state.create);
|
||||||
const [viewOrder, setViewOrder] = useState<Order | null>(null);
|
const [viewOrder, setViewOrder] = useState<Order | null>(null);
|
||||||
const variables: StopOrdersQueryVariables = {
|
const variables: StopOrdersQueryVariables = {
|
||||||
|
@ -191,6 +191,7 @@ describe('StopOrdersTable', () => {
|
|||||||
expect(cells[i]).toHaveTextContent(expectedValue)
|
expect(cells[i]).toHaveTextContent(expectedValue)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('formats status column', async () => {
|
it('formats status column', async () => {
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
render(generateJsx({ rowData }));
|
render(generateJsx({ rowData }));
|
||||||
@ -260,14 +261,13 @@ describe('StopOrdersTable', () => {
|
|||||||
await act(async () => {
|
await act(async () => {
|
||||||
render(generateJsx({ rowData, onView }));
|
render(generateJsx({ rowData, onView }));
|
||||||
});
|
});
|
||||||
const dropdownMenuButtons = screen.getByTestId('dropdown-menu');
|
const button = screen.getByTestId('icon-kebab');
|
||||||
dropdownMenuButtons.click();
|
await user.click(button);
|
||||||
await user.click(dropdownMenuButtons as HTMLButtonElement);
|
const menuItems = await screen.findAllByRole('menuitem');
|
||||||
const menuItems = screen.getAllByRole('menuitem');
|
|
||||||
expect(menuItems).toHaveLength(2);
|
expect(menuItems).toHaveLength(2);
|
||||||
expect(menuItems[0]).toHaveTextContent('Copy order ID');
|
expect(menuItems[0]).toHaveTextContent('Copy order ID');
|
||||||
expect(menuItems[1]).toHaveTextContent('View order details');
|
expect(menuItems[1]).toHaveTextContent('View order details');
|
||||||
menuItems[1].click();
|
await user.click(menuItems[1]);
|
||||||
expect(onView).toBeCalled();
|
expect(onView).toBeCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -5,7 +5,6 @@ import {
|
|||||||
toBigNum,
|
toBigNum,
|
||||||
formatTrigger,
|
formatTrigger,
|
||||||
} from '@vegaprotocol/utils';
|
} from '@vegaprotocol/utils';
|
||||||
import { t } from '@vegaprotocol/i18n';
|
|
||||||
import * as Schema from '@vegaprotocol/types';
|
import * as Schema from '@vegaprotocol/types';
|
||||||
import {
|
import {
|
||||||
ActionsDropdown,
|
ActionsDropdown,
|
||||||
@ -35,6 +34,7 @@ import type {
|
|||||||
import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
|
import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
|
||||||
import type { ColDef } from 'ag-grid-community';
|
import type { ColDef } from 'ag-grid-community';
|
||||||
import type { Order } from '../order-data-provider';
|
import type { Order } from '../order-data-provider';
|
||||||
|
import { useT } from '../../use-t';
|
||||||
|
|
||||||
const defaultColDef = {
|
const defaultColDef = {
|
||||||
resizable: true,
|
resizable: true,
|
||||||
@ -51,6 +51,7 @@ export type StopOrdersTableProps = TypedDataAgGrid<StopOrder> & {
|
|||||||
|
|
||||||
export const StopOrdersTable = memo(
|
export const StopOrdersTable = memo(
|
||||||
({ onCancel, onMarketClick, onView, ...props }: StopOrdersTableProps) => {
|
({ onCancel, onMarketClick, onView, ...props }: StopOrdersTableProps) => {
|
||||||
|
const t = useT();
|
||||||
const showAllActions = !props.isReadOnly;
|
const showAllActions = !props.isReadOnly;
|
||||||
const columnDefs: ColDef[] = useMemo(
|
const columnDefs: ColDef[] = useMemo(
|
||||||
() => [
|
() => [
|
||||||
@ -176,7 +177,7 @@ export const StopOrdersTable = memo(
|
|||||||
{data.ocoLinkId && (
|
{data.ocoLinkId && (
|
||||||
<Pill
|
<Pill
|
||||||
size="xxs"
|
size="xxs"
|
||||||
className="uppercase ml-0.5"
|
className="ml-0.5 uppercase"
|
||||||
title={t('One Cancels the Other')}
|
title={t('One Cancels the Other')}
|
||||||
>
|
>
|
||||||
OCO
|
OCO
|
||||||
@ -281,7 +282,7 @@ export const StopOrdersTable = memo(
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[onCancel, onMarketClick, onView, props.isReadOnly, showAllActions]
|
[onCancel, onMarketClick, onView, props.isReadOnly, showAllActions, t]
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,3 +1,2 @@
|
|||||||
export * from './components';
|
export * from './components';
|
||||||
export * from './order-hooks';
|
export * from './order-hooks';
|
||||||
export * from './utils';
|
|
||||||
|
2
libs/orders/src/lib/use-t.ts
Normal file
2
libs/orders/src/lib/use-t.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
export const useT = () => useTranslation('orders').t;
|
@ -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('');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
@ -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);
|
|
||||||
}
|
|
||||||
};
|
|
Loading…
Reference in New Issue
Block a user