feat: claim fee flow

Author: Jeday

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

@@ -5,13 +5,11 @@ import {
   useCallback,
   createContext,
   useContext,
-  useState,
 } from 'react';
 import { isAddress, ReadContractErrorType } from 'viem';
 import { useReadContract } from 'wagmi';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { useFormControllerRetry } from 'shared/hook-form/form-controller/use-form-controller-retry-delegate';
 import { useClaim } from 'features/claim/claim-form/hooks';
 import { useVaultInfo } from 'modules/vaults';
 
@@ -24,11 +22,6 @@ import {
 import { dashboardAbi } from 'abi/dashboard-abi';
 import { ClaimFormSchema } from 'features/claim/claim-form/types';
 import invariant from 'tiny-invariant';
-import {
-  SubmitPayload,
-  SubmitStepEnum,
-} from 'shared/components/submit-modal/types';
-import { SubmitModal } from 'shared/components';
 
 type ClaimDataContextValue = {
   availableToClaim: bigint | undefined;
@@ -53,11 +46,28 @@ export const useClaimFormData = () => {
 export const ClaimFormProvider: FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [submitStep, setSubmitStep] = useState<SubmitPayload>(() => ({
-    step: SubmitStepEnum.edit,
-  }));
   const { activeVault } = useVaultInfo();
 
+  const formObject = useForm<ClaimFormSchema>({
+    defaultValues: {
+      recipient: '',
+    },
+    mode: 'all',
+    // TODO: validation
+    reValidateMode: 'onChange',
+  });
+  const { claim, retryEvent } = useClaim();
+
+  const onSubmit = useCallback(
+    async ({ recipient }: ClaimFormSchema) => {
+      // TODO: add validation, remove stub
+      if (!isAddress(recipient)) return false;
+
+      return claim(recipient);
+    },
+    [claim],
+  );
+
   const {
     data: availableToClaim,
     isFetching: isLoadingClaimInfo,
@@ -82,63 +92,21 @@ export const ClaimFormProvider: FC<{ children: ReactNode }> = ({
     [availableToClaim, isLoadingClaimInfo, isErrorClaimInfo, errorClaimInfo],
   );
 
-  const formObject = useForm<ClaimFormSchema>({
-    defaultValues: {
-      recipient: '',
-    },
-    mode: 'all',
-    reValidateMode: 'onChange',
-  });
-  const { callClaim } = useClaim();
-
-  const { retryEvent, retryFire } = useFormControllerRetry();
-  const setModalState = useCallback((submitStep: SubmitPayload) => {
-    setSubmitStep(submitStep);
-  }, []);
-
-  const onSubmit = useCallback(
-    async ({ recipient }: ClaimFormSchema) => {
-      if (recipient && isAddress(recipient)) {
-        try {
-          setModalState({ step: SubmitStepEnum.initiate });
-          const tx = await callClaim(recipient, setModalState);
-          setModalState({ step: SubmitStepEnum.overview, tx });
-          return true;
-        } catch (err) {
-          if (
-            err instanceof Error &&
-            err.message.includes('User rejected the request')
-          ) {
-            setModalState({ step: SubmitStepEnum.reject });
-          } else {
-            setModalState({ step: SubmitStepEnum.error });
-          }
-        }
-      }
-
-      return false;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [callClaim],
-  );
-
   const formControllerValue: FormControllerContextValueType<ClaimFormSchema> =
     useMemo(
       () => ({
         onSubmit,
         retryEvent,
-        retryFire,
         onReset: formObject.reset,
       }),
-      [retryFire, retryEvent, onSubmit, formObject.reset],
+      [retryEvent, onSubmit, formObject.reset],
     );
 
   return (
     <ClaimDataContext.Provider value={claimInfo}>
       <FormProvider {...formObject}>
         <FormControllerContext.Provider value={formControllerValue}>
           <FormController>{children}</FormController>
-          <SubmitModal submitStep={submitStep} setModalState={setModalState} />
         </FormControllerContext.Provider>
       </FormProvider>
     </ClaimDataContext.Provider>

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

@@ -1,71 +1,50 @@
 import { useCallback } from 'react';
-import {
-  useConfig,
-  usePublicClient,
-  useWriteContract,
-  useEstimateGas,
-  useAccount,
-} from 'wagmi';
+import { useEstimateGas, useAccount } from 'wagmi';
 import { Address, encodeFunctionData } from 'viem';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
-import { useDappStatus } from 'modules/web3/hooks/use-dapp-status';
 import { useVaultInfo } from 'modules/vaults';
 import invariant from 'tiny-invariant';
-import {
-  SubmitPayload,
-  SubmitStepEnum,
-} from 'shared/components/submit-modal/types';
 import { useVaultPermission } from 'modules/vaults/hooks/use-vault-permissions';
 import { fallbackedAddress } from 'utils/fallbacked-address';
+import { useSendTransaction, withSuccess } from 'modules/web3';
 
-export const useClaim = (onMutate = () => {}) => {
-  const { chainId } = useDappStatus();
-  const wagmiConfig = useConfig();
+export const useClaim = () => {
   const { activeVault } = useVaultInfo();
-  const publicClient = usePublicClient();
   const owner = activeVault?.owner;
+  const { sendTX, ...rest } = useSendTransaction();
 
-  const { data: claimTx, writeContractAsync } = useWriteContract({
-    config: wagmiConfig,
-    mutation: {
-      onMutate,
-    },
-  });
+  return {
+    claim: useCallback(
+      async (recipient: Address) => {
+        invariant(owner, '[useClaim] owner is undefined');
 
-  const callClaim = useCallback(
-    async (
-      recipient: Address,
-      setModalState: (submitStep: SubmitPayload) => void,
-    ) => {
-      invariant(owner, '[useClaimDashboard] owner is not available');
-      invariant(
-        publicClient,
-        '[useClaimDashboard] publicClient is not available',
-      );
+        const loadingActionText = `Claiming node operator fee`;
+        const mainActionCompleteText = `Claimed node operator fee`;
 
-      setModalState({ step: SubmitStepEnum.confirming });
-      const tx = await writeContractAsync({
-        abi: dashboardAbi,
-        address: owner,
-        functionName: 'claimNodeOperatorFee',
-        args: [recipient],
-        chainId,
-      });
+        const claimCall = {
+          to: owner,
+          data: encodeFunctionData({
+            abi: dashboardAbi,
+            functionName: 'claimNodeOperatorFee',
+            args: [recipient],
+          }),
+          loadingActionText,
+        };
 
-      setModalState({ step: SubmitStepEnum.submitting, tx });
-      await publicClient.waitForTransactionReceipt({
-        hash: tx,
-      });
+        const { success } = await withSuccess(
+          sendTX({
+            transactions: [claimCall],
+            mainActionLoadingText: loadingActionText,
+            mainActionCompleteText,
+          }),
+        );
 
-      return tx;
-    },
-    [chainId, writeContractAsync, owner, publicClient],
-  );
-
-  return {
-    callClaim,
-    claimTx,
+        return success;
+      },
+      [owner, sendTX],
+    ),
+    ...rest,
   };
 };