@@ -682,12 +954,12 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
>
@@ -699,12 +971,19 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
control={control}
watch={watch}
priceStep={priceStep}
- assetSymbol={asset.symbol}
+ quoteName={quoteName}
marketPrice={marketPrice}
decimalPlaces={market.decimalPlaces}
oco
/>
+
{
quoteName={quoteName}
oco
/>
-
+
@@ -728,11 +1019,12 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
return (
{
+ const now = Date.now();
if (
value &&
- (!expiresAt || new Date(expiresAt).getTime() < Date.now())
+ (!expiresAt || new Date(expiresAt).getTime() < now)
) {
- setValue('expiresAt', formatForInput(new Date()), {
+ setValue('expiresAt', formatForInput(new Date(now)), {
shouldValidate: true,
});
}
@@ -803,19 +1095,24 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
)}
-
-
);
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx
index 8fa639475..8de33126a 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx
@@ -1,6 +1,12 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import {
+ act,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { generateMarket, generateMarketData } from '../../test-helpers';
import { DealTicket } from './deal-ticket';
@@ -14,6 +20,7 @@ import {
} from '../../hooks/use-form-values';
import * as positionsTools from '@vegaprotocol/positions';
import { OrdersDocument } from '@vegaprotocol/orders';
+import { formatForInput } from '@vegaprotocol/utils';
jest.mock('zustand');
jest.mock('./deal-ticket-fee-details', () => ({
@@ -314,7 +321,7 @@ describe('DealTicket', () => {
expect(screen.getByTestId('iceberg')).toBeChecked();
});
- it('should set values for a non-persistent iceberg order and disable post only checkbox', () => {
+ it('should set values for a non-persistent order and disable post only checkbox', () => {
const expectedOrder = {
marketId: market.id,
type: Schema.OrderType.TYPE_LIMIT,
@@ -357,6 +364,7 @@ describe('DealTicket', () => {
expect(screen.getByTestId('reduce-only')).not.toBeChecked();
expect(screen.getByTestId('post-only')).not.toBeChecked();
expect(screen.getByTestId('iceberg')).not.toBeChecked();
+ expect(screen.getByTestId('iceberg')).toBeDisabled();
});
// eslint-disable-next-line jest/no-disabled-tests
@@ -473,4 +481,150 @@ describe('DealTicket', () => {
Object.keys(Schema.OrderTimeInForce).length
);
});
+
+ it('validates size field', async () => {
+ render(generateJsx());
+ const sizeErrorMessage = 'deal-ticket-error-message-size';
+ const sizeInput = 'order-size';
+ await userEvent.click(screen.getByTestId('place-order'));
+ // default value should be invalid
+ expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
+ // to small value should be invalid
+ await userEvent.type(screen.getByTestId(sizeInput), '0.01');
+ expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
+
+ // clear and fill using valid value
+ await userEvent.clear(screen.getByTestId(sizeInput));
+ await userEvent.type(screen.getByTestId(sizeInput), '0.1');
+ expect(screen.queryByTestId(sizeErrorMessage)).toBeNull();
+ });
+
+ it('validates price field', async () => {
+ const priceErrorMessage = 'deal-ticket-error-message-price';
+ const priceInput = 'order-price';
+ const submitButton = 'place-order';
+ const orderTypeMarket = 'order-type-Market';
+ const orderTypeLimit = 'order-type-Limit';
+ render(generateJsx());
+
+ await userEvent.click(screen.getByTestId(submitButton));
+
+ expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+ await userEvent.type(screen.getByTestId(priceInput), '0.001');
+ expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+
+ // switch to market order type error should disappear
+ await userEvent.click(screen.getByTestId(orderTypeMarket));
+ await userEvent.click(screen.getByTestId(submitButton));
+ expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
+
+ // switch back to limit type
+ await userEvent.click(screen.getByTestId(orderTypeLimit));
+ await userEvent.click(screen.getByTestId(submitButton));
+ expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+
+ // to small value should be invalid
+ await userEvent.type(screen.getByTestId(priceInput), '0.001');
+ expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+
+ // clear and fill using valid value
+ await userEvent.clear(screen.getByTestId(priceInput));
+ await userEvent.type(screen.getByTestId(priceInput), '0.01');
+ expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
+ });
+
+ it('validates iceberg field', async () => {
+ const peakSizeErrorMessage = 'deal-ticket-peak-error-message';
+ const minimumSizeErrorMessage = 'deal-ticket-minimum-error-message';
+ const sizeInput = 'order-size';
+ const peakSizeInput = 'order-peak-size';
+ const minimumSizeInput = 'order-minimum-size';
+ const submitButton = 'place-order';
+
+ render(generateJsx());
+ await userEvent.selectOptions(
+ screen.getByTestId('order-tif'),
+ Schema.OrderTimeInForce.TIME_IN_FORCE_GFA
+ );
+ await userEvent.click(screen.getByTestId('iceberg'));
+ await userEvent.click(screen.getByTestId(submitButton));
+
+ // validate empty fields
+ expect(screen.getByTestId(peakSizeErrorMessage)).toBeInTheDocument();
+ expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
+
+ await userEvent.type(screen.getByTestId(peakSizeInput), '0.01');
+ await userEvent.type(screen.getByTestId(minimumSizeInput), '0.01');
+
+ // validate value smaller than step
+ expect(screen.getByTestId(peakSizeErrorMessage)).toBeInTheDocument();
+ expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
+
+ await userEvent.clear(screen.getByTestId(peakSizeInput));
+ await userEvent.type(screen.getByTestId(peakSizeInput), '0.5');
+ await userEvent.clear(screen.getByTestId(minimumSizeInput));
+ await userEvent.type(screen.getByTestId(minimumSizeInput), '0.7');
+
+ await userEvent.clear(screen.getByTestId(sizeInput));
+ await userEvent.type(screen.getByTestId(sizeInput), '0.1');
+
+ // validate value higher than size
+ expect(screen.getByTestId(peakSizeErrorMessage)).toBeInTheDocument();
+ expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
+
+ await userEvent.clear(screen.getByTestId(sizeInput));
+ await userEvent.type(screen.getByTestId(sizeInput), '1');
+ // validate peak higher than minimum
+ expect(screen.queryByTestId(peakSizeErrorMessage)).toBeNull();
+ expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
+
+ await userEvent.clear(screen.getByTestId(peakSizeInput));
+ await userEvent.type(screen.getByTestId(peakSizeInput), '1');
+ await userEvent.clear(screen.getByTestId(minimumSizeInput));
+ await userEvent.type(screen.getByTestId(minimumSizeInput), '1');
+
+ // validate correct values
+ expect(screen.queryByTestId(peakSizeErrorMessage)).toBeNull();
+ expect(screen.queryByTestId(minimumSizeErrorMessage)).toBeNull();
+ });
+
+ it('sets expiry time/date to now if expiry is changed to checked', async () => {
+ const datePicker = 'date-picker-field';
+ const now = Math.round(Date.now() / 1000) * 1000;
+ render(generateJsx());
+ jest.spyOn(global.Date, 'now').mockImplementationOnce(() => now);
+ await userEvent.selectOptions(
+ screen.getByTestId('order-tif'),
+ Schema.OrderTimeInForce.TIME_IN_FORCE_GTT
+ );
+
+ // expiry time/date was empty it should be set to now
+ expect(
+ new Date(screen.getByTestId(datePicker).value).getTime()
+ ).toEqual(now);
+
+ // set to the value in the past (now - 1s)
+ fireEvent.change(screen.getByTestId(datePicker), {
+ target: { value: formatForInput(new Date(now - 1000)) },
+ });
+ expect(
+ new Date(
+ screen.getByTestId(datePicker).value
+ ).getTime() + 1000
+ ).toEqual(now);
+
+ // switch expiry off and on
+ await userEvent.selectOptions(
+ screen.getByTestId('order-tif'),
+ Schema.OrderTimeInForce.TIME_IN_FORCE_GFA
+ );
+ await userEvent.selectOptions(
+ screen.getByTestId('order-tif'),
+ Schema.OrderTimeInForce.TIME_IN_FORCE_GTT
+ );
+ // expiry time/date was in the past it should be set to now
+ expect(
+ new Date(screen.getByTestId(datePicker).value).getTime()
+ ).toEqual(now);
+ });
});
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
index 0319ee8de..7ec2eba85 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
@@ -3,7 +3,6 @@ import * as Schema from '@vegaprotocol/types';
import type { FormEventHandler } from 'react';
import { memo, useCallback, useEffect, useRef, useMemo } from 'react';
import { Controller, useController, useForm } from 'react-hook-form';
-import { DealTicketButton } from './deal-ticket-button';
import {
DealTicketFeeDetails,
DealTicketMarginDetails,
@@ -23,6 +22,8 @@ import {
Intent,
Notification,
Tooltip,
+ TradingButton as Button,
+ Pill,
} from '@vegaprotocol/ui-toolkit';
import {
@@ -35,6 +36,7 @@ import {
validateAmount,
toDecimal,
formatForInput,
+ formatValue,
} from '@vegaprotocol/utils';
import { activeOrdersProvider } from '@vegaprotocol/orders';
import { getDerivedPrice } from '@vegaprotocol/markets';
@@ -46,7 +48,10 @@ import {
validateType,
} from '../../utils';
import { ZeroBalanceError } from '../deal-ticket-validation/zero-balance-error';
-import { SummaryValidationType } from '../../constants';
+import {
+ NOTIONAL_SIZE_TOOLTIP_TEXT,
+ SummaryValidationType,
+} from '../../constants';
import type {
Market,
MarketData,
@@ -68,6 +73,7 @@ import { useDealTicketFormValues } from '../../hooks/use-form-values';
import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
import noop from 'lodash/noop';
import { isNonPersistentOrder } from '../../utils/time-in-force-persistance';
+import { KeyValue } from './key-value';
export const REDUCE_ONLY_TOOLTIP =
'"Reduce only" will ensure that this order will not increase the size of an open position. When the order is matched, it will only trade enough volume to bring your open volume towards 0 but never change the direction of your position. If applied to a limit order that is not instantly filled, the order will be stopped.';
@@ -118,6 +124,11 @@ const getDefaultValues = (
...storedValues,
});
+export const getAssetUnit = (tags?: string[] | null) =>
+ tags
+ ?.find((tag) => tag.startsWith('base:') || tag.startsWith('ticker:'))
+ ?.replace(/^[^:]*:/, '');
+
export const DealTicket = ({
market,
onMarketClick,
@@ -257,6 +268,10 @@ export const DealTicket = ({
const assetSymbol =
market.tradableInstrument.instrument.product.settlementAsset.symbol;
+ const assetUnit = getAssetUnit(
+ market.tradableInstrument.instrument.metadata.tags
+ );
+
const summaryError = useMemo(() => {
if (!pubKey) {
return {
@@ -338,6 +353,7 @@ export const DealTicket = ({
const priceStep = toDecimal(market?.decimalPlaces);
const sizeStep = toDecimal(market?.positionDecimalPlaces);
const quoteName = market.tradableInstrument.instrument.product.quoteName;
+ const isLimitType = type === Schema.OrderType.TYPE_LIMIT;
return (