feat: add hasError to deal ticket inputs

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 }) => (
                 <Input
                   id="input-order-size-limit"
                   className="w-full"
@@ -68,6 +68,7 @@ export const DealTicketLimitAmount = ({
                   min={sizeStep}
                   data-testid="order-size"
                   onWheel={(e) => e.currentTarget.blur()}
+                  hasError={!!fieldState.error}
                   {...field}
                 />
               )}
@@ -93,7 +94,7 @@ export const DealTicketLimitAmount = ({
                 },
                 validate: validateAmount(priceStep, 'Price'),
               }}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
                 <Input
                   id="input-price-quote"
                   className="w-full"
@@ -101,6 +102,7 @@ export const DealTicketLimitAmount = ({
                   step={priceStep}
                   data-testid="order-price"
                   onWheel={(e) => e.currentTarget.blur()}
+                  hasError={!!fieldState.error}
                   {...field}
                 />
               )}

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 }) => (
               <Input
                 id="input-order-size-market"
                 className="w-full"
@@ -54,6 +54,7 @@ export const DealTicketMarketAmount = ({
                 min={sizeStep}
                 onWheel={(e) => e.currentTarget.blur()}
                 data-testid="order-size"
+                hasError={!!fieldState.error}
                 {...field}
               />
             )}

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 (
                   <div className="mb-2">
@@ -256,6 +256,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                       step={priceStep}
                       appendElement={asset.symbol}
                       value={value || ''}
+                      hasError={!!fieldState.error}
                       {...props}
                     />
                   </div>
@@ -294,7 +295,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                   'Trailing percentage offset'
                 ),
               }}
-              render={({ field }) => {
+              render={({ field, fieldState }) => {
                 const { value, ...props } = field;
                 return (
                   <div className="mb-2">
@@ -304,6 +305,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                       appendElement="%"
                       data-testid="triggerTrailingPercentOffset"
                       value={value || ''}
+                      hasError={!!fieldState.error}
                       {...props}
                     />
                   </div>
@@ -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 (
                   <Input
@@ -370,6 +372,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                     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 (
                       <Input
@@ -408,6 +411,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                         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) => {
           <Controller
             name="timeInForce"
             control={control}
-            render={({ field }) => (
+            render={({ field, fieldState }) => (
               <Select
                 id="select-time-in-force"
                 className="w-full"
                 data-testid="order-tif"
+                hasError={!!fieldState.error}
                 {...field}
               >
                 <option

libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx

@@ -31,6 +31,7 @@ export const ExpirySelector = ({
         value={dateFormatted}
         onChange={(e) => onSelect(e.target.value)}
         min={minDate}
+        hasError={!!errorMessage}
       />
       {errorMessage && (
         <InputError testId="deal-ticket-error-message-expiry">

libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx

@@ -103,6 +103,7 @@ export const TimeInForceSelector = ({
         }}
         className="w-full"
         data-testid="order-tif"
+        hasError={!!errorMessage}
       >
         {options.map(([key, value]) => (
           <option key={key} value={value}>