diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx index 80da15176..6691cd12c 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx @@ -59,7 +59,7 @@ export const DealTicketLimitAmount = ({ }, validate: validateAmount(sizeStep, 'Size'), }} - render={({ field }) => ( + render={({ field, fieldState }) => ( e.currentTarget.blur()} + hasError={!!fieldState.error} {...field} /> )} @@ -93,7 +94,7 @@ export const DealTicketLimitAmount = ({ }, validate: validateAmount(priceStep, 'Price'), }} - render={({ field }) => ( + render={({ field, fieldState }) => ( e.currentTarget.blur()} + hasError={!!fieldState.error} {...field} /> )} 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 c8ab0c2c0..a370bc78a 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 @@ -45,7 +45,7 @@ export const DealTicketMarketAmount = ({ }, validate: validateAmount(sizeStep, 'Size'), }} - render={({ field }) => ( + render={({ field, fieldState }) => ( e.currentTarget.blur()} data-testid="order-size" + hasError={!!fieldState.error} {...field} /> )} 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 4cd48641c..754bf3a03 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 @@ -246,7 +246,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => { validate: validateAmount(priceStep, 'Price'), }} control={control} - render={({ field }) => { + render={({ field, fieldState }) => { const { value, ...props } = field; return (
@@ -256,6 +256,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => { step={priceStep} appendElement={asset.symbol} value={value || ''} + hasError={!!fieldState.error} {...props} />
@@ -294,7 +295,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => { 'Trailing percentage offset' ), }} - render={({ field }) => { + render={({ field, fieldState }) => { const { value, ...props } = field; return (
@@ -304,6 +305,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => { appendElement="%" data-testid="triggerTrailingPercentOffset" value={value || ''} + hasError={!!fieldState.error} {...props} />
@@ -358,7 +360,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => { }, 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} /> ); @@ -397,7 +400,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => { }, 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} /> ); @@ -449,11 +453,12 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => { ( + render={({ field, fieldState }) => (