diff --git a/features/withdrawals/claim/claim-form-context/claim-form-context.tsx b/features/withdrawals/claim/claim-form-context/claim-form-context.tsx index 0c50cec66..555257a7e 100644 --- a/features/withdrawals/claim/claim-form-context/claim-form-context.tsx +++ b/features/withdrawals/claim/claim-form-context/claim-form-context.tsx @@ -27,7 +27,9 @@ import { } from './use-default-values'; import { ClaimFormHelperState, useHelperState } from './use-helper-state'; -type ClaimFormDataContextValueType = ClaimFormHelperState; +type ClaimFormDataContextValueType = ClaimFormHelperState & { + maxSelectedCountReason: string | null; +}; const claimFormDataContext = createContext(null); @@ -43,8 +45,11 @@ export const ClaimFormProvider: FC = ({ children }) => { const { isDappActive } = useDappStatus(); const { data } = useClaimData(); - const { maxSelectedRequestCount, defaultSelectedRequestCount } = - useMaxSelectedCount(); + const { + maxSelectedRequestCount, + defaultSelectedRequestCount, + maxSelectedCountReason, + } = useMaxSelectedCount(); const { getDefaultValues } = useGetDefaultValues(defaultSelectedRequestCount); const formObject = useForm({ @@ -55,10 +60,14 @@ export const ClaimFormProvider: FC = ({ children }) => { reValidateMode: 'onChange', }); const { watch, reset, setValue, getValues, formState } = formObject; - const claimFormDataContextValue = useHelperState( - watch, - maxSelectedRequestCount, + + const helperState = useHelperState(watch, maxSelectedRequestCount); + + const claimFormDataContextValue = useMemo( + () => ({ ...helperState, maxSelectedCountReason }), + [helperState, maxSelectedCountReason], ); + const { retryEvent, retryFire } = useFormControllerRetry(); const claim = useClaim({ onRetry: retryFire }); diff --git a/features/withdrawals/claim/claim-form-context/use-max-selected-count.ts b/features/withdrawals/claim/claim-form-context/use-max-selected-count.ts index caab735ad..d59b2cc3b 100644 --- a/features/withdrawals/claim/claim-form-context/use-max-selected-count.ts +++ b/features/withdrawals/claim/claim-form-context/use-max-selected-count.ts @@ -15,8 +15,14 @@ export const useMaxSelectedCount = () => { DEFAULT_CLAIM_REQUEST_SELECTED, maxSelectedRequestCount, ); + + const maxSelectedCountReason = isLedgerLive + ? 'Ledger Clear Sign allows to claim up to 2 requests per transaction' + : null; + return { maxSelectedRequestCount, defaultSelectedRequestCount, + maxSelectedCountReason, }; }; diff --git a/features/withdrawals/claim/form/requests-list/request-item.tsx b/features/withdrawals/claim/form/requests-list/request-item.tsx index 39a20163a..a811f8cdd 100644 --- a/features/withdrawals/claim/form/requests-list/request-item.tsx +++ b/features/withdrawals/claim/form/requests-list/request-item.tsx @@ -2,7 +2,12 @@ import { forwardRef } from 'react'; import { useFormState, useWatch } from 'react-hook-form'; import { useAccount } from 'wagmi'; -import { Checkbox, CheckboxProps, External } from '@lidofinance/lido-ui'; +import { + Checkbox, + CheckboxProps, + External, + Tooltip, +} from '@lidofinance/lido-ui'; import { FormatToken } from 'shared/formatters'; import { RequestStatus } from './request-item-status'; @@ -21,7 +26,7 @@ export const RequestItem = forwardRef( ({ token_id, name, disabled, index, ...props }, ref) => { const { chainId } = useAccount(); const { isSubmitting } = useFormState(); - const { canSelectMore } = useClaimFormData(); + const { canSelectMore, maxSelectedCountReason } = useClaimFormData(); const { checked, status } = useWatch< ClaimFormInputType, `requests.${number}` @@ -42,15 +47,23 @@ export const RequestItem = forwardRef( : status.amountOfStETH; const symbol = isClaimable ? 'ETH' : 'stETH'; + const showDisabledReasonTooltip = + maxSelectedCountReason && + !canSelectMore && + status.isFinalized && + !checked; + const label = ( ); - return ( + const requestBody = ( ( ); + + return showDisabledReasonTooltip ? ( + + {requestBody} + + ) : ( + requestBody + ); }, ); diff --git a/features/withdrawals/withdrawals-constants/index.ts b/features/withdrawals/withdrawals-constants/index.ts index 72fd896a5..1a8112fb2 100644 --- a/features/withdrawals/withdrawals-constants/index.ts +++ b/features/withdrawals/withdrawals-constants/index.ts @@ -1,5 +1,6 @@ // max requests count for one tx export const MAX_REQUESTS_COUNT = 256; +// Leger Clear Sign only allows 2 requests per claim export const MAX_REQUESTS_COUNT_LEDGER_LIMIT = 2; export const DEFAULT_CLAIM_REQUEST_SELECTED = 80;