- (
- (
+ e.currentTarget.blur()}
+ hasError={!!fieldState.error}
{...field}
/>
)}
/>
-
+
-
@
+
@
- (
- (
+ e.currentTarget.blur()}
+ hasError={!!fieldState.error}
{...field}
/>
)}
/>
-
+
{renderError()}
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
index 9b3e77e66..82e003364 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
@@ -4,7 +4,11 @@ import {
validateAmount,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
-import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+ TradingInput,
+ TradingInputError,
+ Tooltip,
+} from '@vegaprotocol/ui-toolkit';
import { isMarketInAuction } from '@vegaprotocol/markets';
import type { DealTicketAmountProps } from './deal-ticket-amount';
import { Controller } from 'react-hook-form';
@@ -33,7 +37,7 @@ export const DealTicketMarketAmount = ({
-
{t('Size')}
+
{t('Size')}
(
- (
+ e.currentTarget.blur()}
data-testid="order-size"
+ hasError={!!fieldState.error}
{...field}
/>
)}
/>
-
@
+
@
{inAuction && (
{priceFormatted && quoteName ? (
<>
@@ -85,12 +90,12 @@ export const DealTicketMarketAmount = ({
{sizeError && (
-
{sizeError}
-
+
)}
);
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx
index 40a5480d3..1b69cac2b 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx
@@ -4,9 +4,9 @@ import type { OrderFormValues } from '../../hooks/use-form-values';
import { toDecimal, validateAmount } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import {
- FormGroup,
- Input,
- InputError,
+ TradingFormGroup,
+ TradingInput,
+ TradingInputError,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
@@ -32,9 +32,9 @@ export const DealTicketSizeIceberg = ({
const renderPeakSizeError = () => {
if (peakSizeError) {
return (
-
+
{peakSizeError}
-
+
);
}
@@ -44,9 +44,9 @@ export const DealTicketSizeIceberg = ({
const renderMinimumSizeError = () => {
if (minimumVisibleSizeError) {
return (
-
+
{minimumVisibleSizeError}
-
+
);
}
@@ -57,7 +57,7 @@ export const DealTicketSizeIceberg = ({
{renderPeakSizeError()}
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
index 5e048d14e..dbe61bdf3 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
@@ -10,13 +10,13 @@ import {
import { useForm, Controller, useController } from 'react-hook-form';
import * as Schema from '@vegaprotocol/types';
import {
- Radio,
- RadioGroup,
- Input,
- Checkbox,
- FormGroup,
- InputError,
- Select,
+ TradingRadio,
+ TradingRadioGroup,
+ TradingInput,
+ TradingCheckbox,
+ TradingFormGroup,
+ TradingInputError,
+ TradingSelect,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
import { getDerivedPrice, type Market } from '@vegaprotocol/markets';
@@ -187,9 +187,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
}}
/>
{errors.type && (
-
+
{errors.type.message}
-
+
)}
{
)}
/>
-
+
{
const { onChange, value } = field;
return (
-
- {
id="triggerDirection-risesAbove"
label={'Rises above'}
/>
- {
id="triggerDirection-fallsBelow"
label={'Falls below'}
/>
-
+
);
}}
/>
@@ -246,16 +246,17 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
validate: validateAmount(priceStep, 'Price'),
}}
control={control}
- render={({ field }) => {
+ render={({ field, fieldState }) => {
const { value, ...props } = field;
return (
-
@@ -263,9 +264,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
}}
/>
{errors.triggerPrice && (
-
+
{errors.triggerPrice.message}
-
+
)}
)}
@@ -294,16 +295,17 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
'Trailing percentage offset'
),
}}
- render={({ field }) => {
+ render={({ field, fieldState }) => {
const { value, ...props } = field;
return (
-
@@ -311,9 +313,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
}}
/>
{errors.triggerTrailingPercentOffset && (
-
+
{errors.triggerTrailingPercentOffset.message}
-
+
)}
)}
@@ -324,25 +326,29 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
render={({ field }) => {
const { onChange, value } = field;
return (
-
-
{
},
validate: validateAmount(sizeStep, 'Size'),
}}
- render={({ field }) => {
+ render={({ field, fieldState }) => {
const { value, ...props } = field;
return (
- {
onWheel={(e) => e.currentTarget.blur()}
data-testid="order-size"
value={value || ''}
+ hasError={!!fieldState.error}
{...props}
/>
);
}}
/>
-
-
@
+
+
@
{type === Schema.OrderType.TYPE_LIMIT ? (
-
{
},
validate: validateAmount(priceStep, 'Price'),
}}
- render={({ field }) => {
+ render={({ field, fieldState }) => {
const { value, ...props } = field;
return (
- {
data-testid="order-price"
onWheel={(e) => e.currentTarget.blur()}
value={value || ''}
+ hasError={!!fieldState.error}
{...props}
/>
);
}}
/>
-
+
) : (
{priceFormatted && quoteName
@@ -427,21 +435,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
{errors.size && (
-
+
{errors.size.message}
-
+
)}
{!errors.size &&
errors.price &&
type === Schema.OrderType.TYPE_LIMIT && (
-
+
{errors.price.message}
-
+
)}
- {
(
-
+
)}
/>
-
+
{errors.timeInForce && (
-
+
{errors.timeInForce.message}
-
+
)}
@@ -485,29 +494,29 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
render={({ field }) => {
const { onChange: onCheckedChange, value } = field;
return (
- {t('Expire')}}
+ label={t('Expire')}
/>
);
}}
/>
- {t(REDUCE_ONLY_TOOLTIP)}}>
- {t('Reduce only')}
+ <>{t('Reduce only')}>
}
/>
{expire && (
<>
-
{
control={control}
render={({ field }) => {
return (
-
-
+
-
-
+
);
}}
/>
-
+
(
- (
- (
-
-
+
{
'You need to connect your own wallet to start trading on this market'
}
-
+
);
}
@@ -613,9 +613,9 @@ const SummaryMessage = memo(
if (error?.message) {
return (
-
+
{error?.message}
-
+
);
}
diff --git a/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
index 811edc9b4..b174fcbda 100644
--- a/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
@@ -1,4 +1,8 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import {
+ TradingFormGroup,
+ TradingInput,
+ TradingInputError,
+} from '@vegaprotocol/ui-toolkit';
import { formatForInput } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { useRef } from 'react';
@@ -19,24 +23,25 @@ export const ExpirySelector = ({
const dateFormatted = formatForInput(date);
const minDate = formatForInput(date);
return (
-
- onSelect(e.target.value)}
min={minDate}
+ hasError={!!errorMessage}
/>
{errorMessage && (
-
+
{errorMessage}
-
+
)}
-
+
);
};
diff --git a/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
index 8d1b09f3e..7fefd689c 100644
--- a/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
@@ -1,7 +1,7 @@
import {
- FormGroup,
- InputError,
- Select,
+ TradingFormGroup,
+ TradingInputError,
+ TradingSelect,
Tooltip,
SimpleGrid,
} from '@vegaprotocol/ui-toolkit';
@@ -90,12 +90,12 @@ export const TimeInForceSelector = ({
};
return (
-
-
+
{errorMessage && (
-
+
{renderError(errorMessage)}
-
+
)}
-
+
);
};
diff --git a/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
index f6798d813..55ce9ef61 100644
--- a/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
@@ -1,5 +1,5 @@
import {
- InputError,
+ TradingInputError,
SimpleGrid,
Tooltip,
TradingDropdown,
@@ -178,9 +178,9 @@ export const TypeSelector = ({
value={value}
/>
{errorMessage && (
-
+
{renderError(errorMessage as MarketModeValidationType)}
-
+
)}
>
);
diff --git a/libs/deposits/src/lib/deposit-form.tsx b/libs/deposits/src/lib/deposit-form.tsx
index 3468cce63..4dc0a8771 100644
--- a/libs/deposits/src/lib/deposit-form.tsx
+++ b/libs/deposits/src/lib/deposit-form.tsx
@@ -14,14 +14,14 @@ import { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import {
Button,
- FormGroup,
- Input,
- InputError,
- RichSelect,
+ TradingFormGroup,
+ TradingInput,
+ TradingInputError,
+ TradingRichSelect,
Notification,
Intent,
ButtonLink,
- Select,
+ TradingSelect,
} from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useWeb3React } from '@web3-react/core';
@@ -151,7 +151,7 @@ export const DepositForm = ({
noValidate={true}
data-testid="deposit-form"
>
-
@@ -197,15 +197,17 @@ export const DepositForm = ({
}}
/>
{errors.from?.message && (
- {errors.from.message}
+
+ {errors.from.message}
+
)}
-
-
+
+
setValue('to', '')}
select={
-
+
}
input={
-
{errors.to?.message && (
-
+
{errors.to.message}
-
+
)}
-
-
+
+
(
-
))}
-
+
)}
/>
{errors.asset?.message && (
-
+
{errors.asset.message}
-
+
)}
{isActive && isFaucetable && selectedAsset && (
@@ -296,7 +298,7 @@ export const DepositForm = ({
{t('View asset details')}
)}
-
+
)}
{approved && (
-
-
+
{errors.amount?.message && (
-
+
{errors.amount.message}
-
+
)}
{selectedAsset && balances && (
)}
-
+
)}
void }) => {
`This app will only work on ${VEGA_ENV}. Select a node to connect to.`
)}
- setNodeRadio(value)}
>
@@ -112,7 +112,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
/>