Merge pull request #447 from lidofinance/feature/si-1533-add-hover-on…

…-ledger-live-if-try-to-click-on-disabled-request

feat: ledger live claim tooltip

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<ClaimFormDataContextValueType | null>(null);
@@ -43,8 +45,11 @@ export const ClaimFormProvider: FC<PropsWithChildren> = ({ children }) => {
   const { isDappActive } = useDappStatus();
   const { data } = useClaimData();
 
-  const { maxSelectedRequestCount, defaultSelectedRequestCount } =
-    useMaxSelectedCount();
+  const {
+    maxSelectedRequestCount,
+    defaultSelectedRequestCount,
+    maxSelectedCountReason,
+  } = useMaxSelectedCount();
   const { getDefaultValues } = useGetDefaultValues(defaultSelectedRequestCount);
 
   const formObject = useForm<ClaimFormInputType, ClaimFormValidationContext>({
@@ -55,10 +60,14 @@ export const ClaimFormProvider: FC<PropsWithChildren> = ({ 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 });

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,
   };
 };

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<HTMLInputElement, RequestItemProps>(
   ({ 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<HTMLInputElement, RequestItemProps>(
       : status.amountOfStETH;
     const symbol = isClaimable ? 'ETH' : 'stETH';
 
+    const showDisabledReasonTooltip =
+      maxSelectedCountReason &&
+      !canSelectMore &&
+      status.isFinalized &&
+      !checked;
+
     const label = (
       <FormatToken
         data-testid="requestAmount"
         amount={amountValue}
         symbol={symbol}
+        // prevents tip overlap
+        showAmountTip={!showDisabledReasonTooltip}
       />
     );
 
-    return (
+    const requestBody = (
       <RequestStyled data-testid={'requestItem'} $disabled={isDisabled}>
         <Checkbox
           {...props}
@@ -72,5 +85,13 @@ export const RequestItem = forwardRef<HTMLInputElement, RequestItemProps>(
         </LinkStyled>
       </RequestStyled>
     );
+
+    return showDisabledReasonTooltip ? (
+      <Tooltip title={maxSelectedCountReason} placement="top">
+        {requestBody}
+      </Tooltip>
+    ) : (
+      requestBody
+    );
   },
 );

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;