Input warning highlight for wrapEth

features/wsteth/wrap/wrap-form-controls/input-group-wrap.tsx

@@ -0,0 +1,22 @@
+import { useWatch } from 'react-hook-form';
+import { InputGroupHookForm } from 'shared/hook-form/controls/input-group-hook-form';
+import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning';
+import { WrapFormInputType, useWrapFormData } from '../wrap-form-context';
+import { TokenAmountInputWrap } from './token-amount-input-wrap';
+import { TokenSelectWrap } from './token-select-wrap';
+
+export const InputGroupWrap: React.FC = () => {
+  const token = useWatch<WrapFormInputType, 'token'>({ name: 'token' });
+  const { stakeLimitInfo } = useWrapFormData();
+  const { limitWarning } = useStakingLimitWarning(
+    stakeLimitInfo?.stakeLimitLevel,
+  );
+  const hasWarning = !!(token === 'ETH' && limitWarning);
+  const warningText = hasWarning ? limitWarning : null;
+  return (
+    <InputGroupHookForm warning={warningText} errorField="amount">
+      <TokenSelectWrap warning={hasWarning} />
+      <TokenAmountInputWrap warning={hasWarning} />
+    </InputGroupHookForm>
+  );
+};

features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx

@@ -2,16 +2,15 @@ import { useWatch } from 'react-hook-form';
 import { useWrapFormData, WrapFormInputType } from '../wrap-form-context';
 
 import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
-import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning';
 
-export const TokenAmountInputWrap = () => {
-  const token = useWatch<WrapFormInputType, 'token'>({ name: 'token' });
+type TokenAmountInputWrapProps = Pick<
+  React.ComponentProps<typeof TokenAmountInputHookForm>,
+  'warning'
+>;
 
-  const { maxAmount, isApprovalNeededBeforeWrap, stakeLimitInfo } =
-    useWrapFormData();
-  const { limitWarning } = useStakingLimitWarning(
-    stakeLimitInfo?.stakeLimitLevel,
-  );
+export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => {
+  const token = useWatch<WrapFormInputType, 'token'>({ name: 'token' });
+  const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData();
 
   return (
     <TokenAmountInputHookForm
@@ -20,8 +19,8 @@ export const TokenAmountInputWrap = () => {
       data-testid="wrapInput"
       isLocked={isApprovalNeededBeforeWrap}
       maxValue={maxAmount}
-      warning={token === 'ETH' ? limitWarning : null}
       showErrorMessage={false}
+      {...props}
     />
   );
 };

features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx

@@ -14,7 +14,12 @@ const OPTIONS = [
   },
 ];
 
-export const TokenSelectWrap = () => {
+type TokenSelectWrapProps = Pick<
+  React.ComponentProps<typeof TokenSelectHookForm>,
+  'warning'
+>;
+
+export const TokenSelectWrap = (props: TokenSelectWrapProps) => {
   return (
     <TokenSelectHookForm
       options={OPTIONS}
@@ -25,6 +30,7 @@ export const TokenSelectWrap = () => {
             : MATOMO_CLICK_EVENTS.wrapTokenSelectSteth),
         );
       }}
+      {...props}
     />
   );
 };

features/wsteth/wrap/wrap-form/wrap-form.tsx

@@ -5,25 +5,20 @@ import { WrapBlock } from '../../shared/styles';
 import { WrapFormTxModal } from './wrap-form-tx-modal';
 import { WrapFormProvider } from '../wrap-form-context/wrap-form-context';
 import { FormControllerWrap } from '../wrap-form-controls/form-controller-wrap';
-import { TokenSelectWrap } from '../wrap-form-controls/token-select-wrap';
-import { TokenAmountInputWrap } from '../wrap-form-controls/token-amount-input-wrap';
+import { InputGroupWrap } from '../wrap-form-controls/input-group-wrap';
 import { SubmitButtonWrap } from '../wrap-form-controls/submit-button-wrap';
 
 import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context';
-import { InputGroupHookForm } from 'shared/hook-form/controls/input-group-hook-form';
+
 import { L2Wsteth } from 'shared/banners/l2-wsteth';
 import { MATOMO_CLICK_EVENTS } from 'config';
-
 export const WrapForm: React.FC = memo(() => {
   return (
     <TransactionModalProvider>
       <WrapFormProvider>
         <WrapBlock data-testid="wrapForm">
           <FormControllerWrap>
-            <InputGroupHookForm errorField="amount">
-              <TokenSelectWrap />
-              <TokenAmountInputWrap />
-            </InputGroupHookForm>
+            <InputGroupWrap />
             <SubmitButtonWrap />
           </FormControllerWrap>
           <L2Wsteth matomoEventLink={MATOMO_CLICK_EVENTS.l2BannerWrap} />

package.json

@@ -37,7 +37,7 @@
     "@lidofinance/api-rpc": "^0.39.1",
     "@lidofinance/eth-api-providers": "^0.39.1",
     "@lidofinance/eth-providers": "^0.39.1",
-    "@lidofinance/lido-ui": "^3.20.1",
+    "@lidofinance/lido-ui": "^3.23.0",
     "@lidofinance/next-api-wrapper": "^0.39.1",
     "@lidofinance/next-ip-rate-limit": "^0.39.1",
     "@lidofinance/next-pages": "^0.39.1",

shared/hook-form/controls/token-select-hook-form.tsx

@@ -37,6 +37,7 @@ type TokenSelectHookFormProps = {
   resetField?: string;
   errorField?: string;
   onChange?: (value: TOKENS) => void;
+  warning?: boolean;
 };
 
 export const TokenSelectHookForm = ({
@@ -45,6 +46,7 @@ export const TokenSelectHookForm = ({
   resetField = 'amount',
   errorField = 'amount',
   onChange,
+  warning,
 }: TokenSelectHookFormProps) => {
   const { field } = useController<Record<string, TOKENS>>({ name: fieldName });
   const { setValue, clearErrors } = useFormContext();
@@ -56,6 +58,7 @@ export const TokenSelectHookForm = ({
   return (
     <SelectIcon
       {...field}
+      warning={warning}
       icon={iconsMap[field.value]}
       data-testid="drop-down"
       error={isValidationErrorTypeValidate(errors[errorField]?.type)}

yarn.lock

@@ -2224,7 +2224,7 @@
   resolved "https://registry.yarnpkg.com/@lidofinance/eth-providers/-/eth-providers-0.39.1.tgz#46f4c264da61b2a8c3704ea07fd9088b4de93279"
   integrity sha512-XT8Fu3CQbqVayoE01ZFGYwQJte8G4NHg2FD+xxK++Q7C7umfAsU00H68YwnWoQOpOj/DHtnsqItvU0uj0jQ1Zg==
 
-"@lidofinance/lido-ui@^3.18.0", "@lidofinance/lido-ui@^3.20.1":
+"@lidofinance/lido-ui@^3.18.0":
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/@lidofinance/lido-ui/-/lido-ui-3.21.0.tgz#da772e44ca7e96a062187858fe896ebc7e3d5cd1"
   integrity sha512-bnyjUs09yVAz1Irw/z3LGIcGudJ4whIJrIJqWWqKpcZB62zQacgueTIEd2ZRgZYDrv2EuVyTsbnnNdw0ly+8ng==
@@ -2238,6 +2238,20 @@
     ua-parser-js "^1.0.35"
     use-callback-ref "1.2.5"
 
+"@lidofinance/lido-ui@^3.23.1":
+  version "3.23.0"
+  resolved "https://registry.yarnpkg.com/@lidofinance/lido-ui/-/lido-ui-3.23.0.tgz#b62ea16dda33da86279e0d2285e1f5283b215997"
+  integrity sha512-qSTMtJhlH0/JTqZfDBMRk95fTbU0AGSLPFMCvURD41yF9YboDfTQZcJjbqZHavWvwE55fiJ+BCarH6UaGhPBuA==
+  dependencies:
+    "@styled-system/should-forward-prop" "5.1.5"
+    react-collapsed "3.0.2"
+    react-jazzicon "^1.0.4"
+    react-toastify "7.0.4"
+    react-transition-group "4"
+    styled-system "5.1.5"
+    ua-parser-js "^1.0.35"
+    use-callback-ref "1.2.5"
+
 "@lidofinance/next-api-wrapper@^0.39.1", "@lidofinance/next-api-wrapper@~0.39.1":
   version "0.39.1"
   resolved "https://registry.yarnpkg.com/@lidofinance/next-api-wrapper/-/next-api-wrapper-0.39.1.tgz#604472a842fa4571c9691fb909685f4d2aaeb65a"