Merge pull request #24 from lidofinance/feature/si-582-stake-widget-w…

…rap-page

Wrap/Unwrap forms refactor

features/withdrawals/claim/claim-form-context/claim-form-context.tsx

@@ -15,7 +15,7 @@ import { useClaimData } from 'features/withdrawals/contexts/claim-data-context';
 import { useTransactionModal } from 'features/withdrawals/contexts/transaction-modal-context';
 
 type ClaimFormDataContextValueType = {
-  onSubmit: NonNullable<React.ComponentProps<'form'>['onSubmit']>;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
 } & ClaimFormHelperState;
 
 const claimFormDataContext =

features/withdrawals/claim/claim-form-context/validation.ts

@@ -2,7 +2,7 @@ import { Resolver } from 'react-hook-form';
 import {
   ValidationError,
   handleResolverValidationError,
-} from 'shared/hook-form/validation-error';
+} from 'shared/hook-form/validation/validation-error';
 import invariant from 'tiny-invariant';
 import { ClaimFormValidationContext, ClaimFormInputType } from './types';
 import { RequestStatusClaimable } from 'features/withdrawals/types/request-status';

features/withdrawals/claim/form/submit-button.tsx

@@ -5,6 +5,7 @@ import { FormatToken } from 'shared/formatters/format-token';
 import { ClaimFormInputType, useClaimFormData } from '../claim-form-context';
 import { Zero } from '@ethersproject/constants';
 import { useFormState } from 'react-hook-form';
+import { isValidationErrorTypeUnhandled } from 'shared/hook-form/validation/validation-error';
 
 export const SubmitButton = () => {
   const { active } = useWeb3();
@@ -19,7 +20,10 @@ export const SubmitButton = () => {
     <FormatToken amount={ethToClaim} symbol="ETH" />
   );
 
-  const disabled = Boolean(errors.requests) || selectedRequests.length === 0;
+  const disabled =
+    (!!errors.requests &&
+      !isValidationErrorTypeUnhandled(errors.requests.type)) ||
+    selectedRequests.length === 0;
 
   return (
     <Button

features/withdrawals/hooks/contract/useRequest.ts

@@ -279,11 +279,13 @@ const useWithdrawalRequestMethods = () => {
 type useWithdrawalRequestParams = {
   amount: BigNumber | null;
   token: TOKENS.STETH | TOKENS.WSTETH;
+  onConfirm?: () => Promise<void>;
 };
 
 export const useWithdrawalRequest = ({
   amount,
   token,
+  onConfirm,
 }: useWithdrawalRequestParams) => {
   const { chainId } = useSDK();
   const withdrawalQueueAddress = getWithdrawalQueueAddress(chainId);
@@ -380,6 +382,7 @@ export const useWithdrawalRequest = ({
           await method({ signature, requests });
         }
         // end flow
+        if (!isMultisig) await onConfirm?.();
         dispatchModalState({
           type: isMultisig ? 'success_multisig' : 'success',
         });
@@ -399,6 +402,7 @@ export const useWithdrawalRequest = ({
       isBunker,
       isMultisig,
       needsApprove,
+      onConfirm,
     ],
   );
 

features/withdrawals/request/form/inputs/input-group.tsx → features/withdrawals/request/form/controls/input-group-request.tsx

@@ -1,17 +1,16 @@
 import { useTvlMessage } from 'features/withdrawals/hooks';
 import { useFormState } from 'react-hook-form';
+import { InputGroupHookForm } from 'shared/hook-form/controls/input-group-hook-form';
 import { RequestFormInputType } from '../../request-form-context';
-import { InputGroupStyled } from '../styles';
 
-export const ErrorMessageInputGroup: React.FC = ({ children }) => {
+export const InputGroupRequest: React.FC = ({ children }) => {
   const {
     errors: { amount: amountError },
   } = useFormState<RequestFormInputType>({ name: 'amount' });
   const { tvlMessage } = useTvlMessage(amountError);
-  const errorMessage = amountError?.type === 'validate' && amountError.message;
   return (
-    <InputGroupStyled error={errorMessage} success={tvlMessage} fullwidth>
+    <InputGroupHookForm errorField="amount" success={tvlMessage}>
       {children}
-    </InputGroupStyled>
+    </InputGroupHookForm>
   );
 };

features/withdrawals/request/form/inputs/mode-input.tsx → features/withdrawals/request/form/controls/mode-picker-request.tsx

@@ -2,7 +2,7 @@ import { useController } from 'react-hook-form';
 import { RequestFormInputType } from '../../request-form-context';
 import { OptionsPicker } from '../options/options-picker';
 
-export const ModeInput = () => {
+export const ModePickerRequest = () => {
   const { field } = useController<RequestFormInputType, 'mode'>({
     name: 'mode',
   });

features/withdrawals/request/form/controls/submit-button-request.tsx

@@ -0,0 +1,52 @@
+import { useWithdrawals } from 'features/withdrawals/contexts/withdrawals-context';
+import {
+  RequestFormInputType,
+  useRequestFormData,
+} from '../../request-form-context';
+
+import { SubmitButtonHookForm } from 'shared/hook-form/controls/submit-button-hook-form';
+import { useFormState } from 'react-hook-form';
+import { isValidationErrorTypeUnhandled } from 'shared/hook-form/validation/validation-error';
+import { useIsMultisig } from 'shared/hooks/useIsMultisig';
+
+// conditional render breaks useFormState, so it can't be inside SubmitButton
+export const useRequestSubmitButtonProps = (): SubmitButtonRequestProps => {
+  const { isPaused } = useWithdrawals();
+  const { isValidating, isSubmitting, errors } =
+    useFormState<RequestFormInputType>({ name: ['requests', 'amount'] });
+
+  return {
+    loading: isValidating || isSubmitting,
+    disabled:
+      isPaused ||
+      (!!errors.amount && !isValidationErrorTypeUnhandled(errors.amount.type)),
+  };
+};
+
+type SubmitButtonRequestProps = {
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export const SubmitButtonRequest = ({
+  loading,
+  disabled,
+}: SubmitButtonRequestProps) => {
+  const [isMultisig] = useIsMultisig();
+  const { isTokenLocked } = useRequestFormData();
+  const buttonTitle = isTokenLocked
+    ? `Unlock tokens ${isMultisig ? 'for' : 'and'} withdrawal`
+    : 'Request withdrawal';
+
+  return (
+    <SubmitButtonHookForm
+      errorField="amount"
+      loading={loading}
+      isLocked={isTokenLocked}
+      disabled={disabled}
+      data-testid="requestButton"
+    >
+      {buttonTitle}
+    </SubmitButtonHookForm>
+  );
+};

features/withdrawals/request/form/inputs/amount-input.tsx → features/withdrawals/request/form/controls/token-amount-input-request.tsx

@@ -1,42 +1,35 @@
-import { TOKENS } from '@lido-sdk/constants';
 import { InputDecoratorTvlStake } from 'features/withdrawals/shared/input-decorator-tvl-stake';
 import { useController, useWatch } from 'react-hook-form';
-import { InputAmount } from 'shared/forms/components/input-amount';
-import { getTokenDisplayName } from 'utils/getTokenDisplayName';
 
 import {
   RequestFormInputType,
   useRequestFormData,
 } from 'features/withdrawals/request/request-form-context';
 import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage';
+import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
 
-export const AmountInput = () => {
-  const { balanceSteth, balanceWSteth, isTokenLocked } = useRequestFormData();
+export const TokenAmountInputRequest = () => {
   const token = useWatch<RequestFormInputType, 'token'>({ name: 'token' });
+  const { maxAmount, isTokenLocked } = useRequestFormData();
 
   const {
-    field,
     fieldState: { error },
   } = useController<RequestFormInputType, 'amount'>({
     name: 'amount',
   });
 
   const { balanceDiff } = useTvlMessage(error);
 
-  const balance = token === TOKENS.STETH ? balanceSteth : balanceWSteth;
-
   return (
-    <InputAmount
-      fullwidth
-      error={error?.type === 'validate'}
-      placeholder="0"
+    <TokenAmountInputHookForm
+      fieldName="amount"
+      token={token}
       isLocked={isTokenLocked}
-      maxValue={balance}
+      maxValue={maxAmount}
       rightDecorator={
         balanceDiff && <InputDecoratorTvlStake tvlDiff={balanceDiff} />
       }
-      label={`${getTokenDisplayName(token)} amount`}
-      {...field}
+      showErrorMessage={false}
     />
   );
 };

features/withdrawals/request/form/controls/token-select-request.tsx

@@ -0,0 +1,14 @@
+import {
+  TOKENS,
+  TokenOption,
+  TokenSelectHookForm,
+} from 'shared/hook-form/controls/token-select-hook-form';
+
+const OPTIONS: TokenOption[] = [
+  { token: TOKENS.STETH },
+  { token: TOKENS.WSTETH },
+];
+
+export const TokenSelectRequest = () => {
+  return <TokenSelectHookForm options={OPTIONS} />;
+};

features/withdrawals/request/form/request-form.tsx

@@ -4,48 +4,47 @@ import { Block } from '@lidofinance/lido-ui';
 import { BunkerInfo } from './bunker-info';
 import { PausedInfo } from './paused-info';
 import { useWithdrawals } from 'features/withdrawals/contexts/withdrawals-context';
-import { useFormState, useWatch } from 'react-hook-form';
+import { useWatch } from 'react-hook-form';
 import {
   RequestFormInputType,
   useRequestFormData,
 } from 'features/withdrawals/request/request-form-context';
 
-import { TokenInput } from './inputs/token-input';
-import { AmountInput } from './inputs/amount-input';
-import { ErrorMessageInputGroup } from './inputs/input-group';
+import { TokenSelectRequest } from './controls/token-select-request';
+import { TokenAmountInputRequest } from './controls/token-amount-input-request';
+import { InputGroupRequest } from './controls/input-group-request';
 import { RequestsInfo } from './requests-info';
-import { ModeInput } from './inputs/mode-input';
+import { ModePickerRequest } from './controls/mode-picker-request';
 import { DexOptions } from './options/dex-options';
 import { LidoOption } from './options/lido-option';
-import { SubmitButton } from './submit-button';
+import {
+  SubmitButtonRequest,
+  useRequestSubmitButtonProps,
+} from './controls/submit-button-request';
 import { TransactionInfo } from './transaction-info';
 
 export const RequestForm = () => {
   const { isBunker, isPaused } = useWithdrawals();
   const { onSubmit } = useRequestFormData();
   // conditional render breaks useFormState, so it can't be inside SubmitButton
-  const { isValidating, isSubmitting, errors } =
-    useFormState<RequestFormInputType>({ name: ['requests', 'amount'] });
+  const submitButtonProps = useRequestSubmitButtonProps();
   const mode = useWatch<RequestFormInputType, 'mode'>({ name: 'mode' });
 
   return (
     <Block>
       {isPaused && <PausedInfo />}
       {isBunker && <BunkerInfo />}
       <form onSubmit={onSubmit}>
-        <ErrorMessageInputGroup>
-          <TokenInput />
-          <AmountInput />
-        </ErrorMessageInputGroup>
+        <InputGroupRequest>
+          <TokenSelectRequest />
+          <TokenAmountInputRequest />
+        </InputGroupRequest>
         {mode === 'lido' && <RequestsInfo />}
-        <ModeInput />
+        <ModePickerRequest />
         {mode === 'lido' && (
           <>
             <LidoOption />
-            <SubmitButton
-              disabled={!!errors.amount}
-              loading={isValidating || isSubmitting}
-            />
+            <SubmitButtonRequest {...submitButtonProps} />
             <TransactionInfo />
           </>
         )}

features/withdrawals/request/form/styles.ts

@@ -1,14 +1,4 @@
 import styled from 'styled-components';
-import { InputGroup } from '@lidofinance/lido-ui';
-
-export const InputGroupStyled = styled(InputGroup)<{ success?: string }>`
-  margin-bottom: ${({ theme }) => theme.spaceMap.md}px;
-  z-index: 2;
-
-  span:nth-of-type(2) {
-    white-space: ${({ success }) => success && 'unset'};
-  }
-`;
 
 export const ButtonLinkWrap = styled.a`
   display: block;