refactor: update claim no fees form regarding new contracts

Author: ev-d

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

@@ -1,9 +1,10 @@
-import { useClaimForm } from 'features/claim/claim-form/form/claim-form-context';
 import { InfoRowAmount } from 'shared/components/form';
 import { vaultTexts } from 'modules/vaults';
 
+import { useClaimData } from './hooks';
+
 export const Claimable = () => {
-  const { claimableFeeQuery } = useClaimForm();
+  const { claimableFeeQuery } = useClaimData();
 
   return (
     <InfoRowAmount

features/claim/claim-form/form/claim-form-context/index.ts

@@ -1,15 +1,14 @@
-import { ClaimFormProvider } from './claim-form-context';
-
 import { Claimable } from './claimable';
 import { ClaimInputs } from './claim-inputs';
 import { SubmitButton } from './submit-button';
+import { FormContainer } from './styles';
 
 export const ClaimForm = () => {
   return (
-    <ClaimFormProvider>
+    <FormContainer>
       <Claimable />
       <ClaimInputs />
       <SubmitButton />
-    </ClaimFormProvider>
+    </FormContainer>
   );
 };

features/claim/claim-form/form/claim-form-context/use-claim.ts

@@ -0,0 +1,2 @@
+export * from './use-claim';
+export * from './use-claim-data';

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

@@ -0,0 +1,72 @@
+import { useCallback, useState } from 'react';
+import { useEstimateGas, useAccount } from 'wagmi';
+import { encodeFunctionData } from 'viem';
+
+import { dashboardAbi } from 'abi/dashboard-abi';
+import { useVaultInfo, vaultTexts, GoToVault } from 'modules/vaults';
+import invariant from 'tiny-invariant';
+import { useSendTransaction, withSuccess } from 'modules/web3';
+import {} from 'modules/vaults/components/go-to-vault';
+
+export const useClaim = () => {
+  const [isSubmitting, setSubmitting] = useState(false);
+  const { activeVault } = useVaultInfo();
+  const owner = activeVault?.owner;
+  const { sendTX, ...rest } = useSendTransaction();
+
+  return {
+    claim: useCallback(async () => {
+      invariant(owner, '[useClaim] owner is undefined');
+      setSubmitting(true);
+
+      const loadingActionText = vaultTexts.actions.claim.loading;
+      const mainActionCompleteText = vaultTexts.actions.claim.completed;
+
+      const claimCall = {
+        to: owner,
+        data: encodeFunctionData({
+          abi: dashboardAbi,
+          functionName: 'disburseNodeOperatorFee',
+        }),
+        loadingActionText,
+      };
+
+      const { success } = await withSuccess(
+        sendTX({
+          transactions: [claimCall],
+          mainActionLoadingText: loadingActionText,
+          mainActionCompleteText,
+          renderSuccessContent: GoToVault,
+        }),
+      );
+
+      setSubmitting(false);
+      return success;
+    }, [owner, sendTX]),
+    isSubmitting,
+    ...rest,
+  };
+};
+
+export const useEstimateClaim = () => {
+  const { address } = useAccount();
+  const { activeVault } = useVaultInfo();
+  const owner = activeVault?.owner;
+  const enabled = !!(
+    owner &&
+    address &&
+    activeVault.nodeOperatorUnclaimedFee > 0n
+  );
+
+  return useEstimateGas({
+    to: owner,
+    account: address,
+    data: encodeFunctionData({
+      abi: dashboardAbi,
+      functionName: 'disburseNodeOperatorFee',
+    }),
+    query: {
+      enabled,
+    },
+  });
+};

features/claim/claim-form/form/claimable.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const FormContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spaceMap.md}px;
+
+  width: 600px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.6em;
+  border-radius: 20px;
+  margin: 0;
+  padding: 32px;
+  box-shadow: none;
+  background: var(--lido-color-foreground);
+  color: var(--lido-color-textSecondary);
+`;