feat: mint/repay new flow

Author: Jeday

features/adjustment/mint/form/submit-button/submit-button.tsx

@@ -1,4 +1,3 @@
-import { OracleReportButton } from 'features/report';
 import { useVaultInfo, type VAULT_OWNER_ROLES } from 'modules/vaults';
 import { MultiplePermissionedSubmitButton } from 'modules/vaults/components';
 import { useMemo } from 'react';
@@ -39,14 +38,12 @@ export const SubmitButton = () => {
   const disabled = isSubmitting && !isValid;
 
   return (
-    <OracleReportButton action="minting">
-      <MultiplePermissionedSubmitButton
-        dashboardRoles={roles}
-        type="submit"
-        disabled={disabled}
-      >
-        Mint
-      </MultiplePermissionedSubmitButton>
-    </OracleReportButton>
+    <MultiplePermissionedSubmitButton
+      dashboardRoles={roles}
+      type="submit"
+      disabled={disabled}
+    >
+      Mint
+    </MultiplePermissionedSubmitButton>
   );
 };

features/adjustment/mint/hooks/use-mint.ts

@@ -1,67 +1,59 @@
 import { useCallback } from 'react';
-import {
-  useConfig,
-  useWriteContract,
-  usePublicClient,
-  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 {
-  SubmitPayload,
-  SubmitStepEnum,
-} from 'shared/components/submit-modal/types';
 import invariant from 'tiny-invariant';
 import { useVaultPermission } from 'modules/vaults/hooks/use-vault-permissions';
 import { fallbackedAddress } from 'utils/fallbacked-address';
+import { useSendTransaction, withSuccess } from 'modules/web3';
+import { useReportStatus } from 'features/report/use-report';
 
-export const useMint = (onMutate = () => {}) => {
-  const { chainId } = useDappStatus();
-  const wagmiConfig = useConfig();
+export const useMint = () => {
   const { activeVault } = useVaultInfo();
-  const publicClient = usePublicClient();
-  const { data: mintTx, writeContractAsync } = useWriteContract({
-    config: wagmiConfig,
-    mutation: {
-      onMutate,
-    },
-  });
+  const { shouldApplyReport, prepareReportCall } = useReportStatus();
+  const { sendTX, ...rest } = useSendTransaction();
+
+  return {
+    mint: useCallback(
+      async (recipient: Address, amount: bigint, token: string) => {
+        invariant(activeVault?.owner, '[useMint] owner is undefined');
 
-  const callMint = useCallback(
-    async (
-      recipient: Address,
-      amount: bigint,
-      token: string,
-      setModalState: (submitStep: SubmitPayload) => void,
-    ) => {
-      invariant(publicClient, '[useMintDashboard] publicClient is undefined');
+        const loadingActionText = `Minting ${token} backed by vault`;
+        const mainActionCompleteText = `Minted ${token} backed by vault`;
 
-      setModalState({ step: SubmitStepEnum.confirming });
-      const tx = await writeContractAsync({
-        abi: dashboardAbi,
-        address: activeVault?.owner as Address,
-        functionName: token === 'stETH' ? 'mintStETH' : 'mintWstETH',
-        args: [recipient, amount],
-        chainId,
-      });
+        const mintCall = {
+          to: activeVault.owner,
+          data: encodeFunctionData({
+            abi: dashboardAbi,
+            functionName: token === 'stETH' ? 'mintStETH' : 'mintWstETH',
+            args: [recipient, amount],
+          }),
+          value: amount,
+          loadingActionText,
+        };
 
-      setModalState({ step: SubmitStepEnum.submitting, tx });
-      await publicClient.waitForTransactionReceipt({
-        hash: tx,
-      });
+        // if we have to post report, there will be extra modal due to async fetch
+        const transactions = shouldApplyReport
+          ? async () => {
+              return [await prepareReportCall(), mintCall];
+            }
+          : [mintCall];
 
-      return tx;
-    },
-    [chainId, writeContractAsync, activeVault?.owner, publicClient],
-  );
+        const { success } = await withSuccess(
+          sendTX({
+            transactions,
+            mainActionLoadingText: loadingActionText,
+            mainActionCompleteText,
+          }),
+        );
 
-  return {
-    callMint,
-    mintTx,
+        return success;
+      },
+      [activeVault?.owner, prepareReportCall, sendTX, shouldApplyReport],
+    ),
+    ...rest,
   };
 };
 

features/adjustment/mint/mint-form-context/mint-form-provider.tsx

@@ -5,12 +5,10 @@ import {
   useCallback,
   createContext,
   useContext,
-  useState,
 } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
 
-import { useFormControllerRetry } from 'shared/hook-form/form-controller/use-form-controller-retry-delegate';
 import { useVaultInfo } from 'modules/vaults';
 import { useMint } from 'features/adjustment/mint/hooks';
 
@@ -20,12 +18,6 @@ import {
   FormControllerContextValueType,
 } from 'shared/hook-form/form-controller';
 import { MintFormSchema } from 'features/adjustment/mint/types';
-import { SubmitModal } from 'shared/components';
-import {
-  SubmitPayload,
-  SubmitStep,
-  SubmitStepEnum,
-} from 'shared/components/submit-modal/types';
 import { Address } from 'viem';
 
 type MintDataContextValue = {
@@ -48,20 +40,17 @@ export const useMintFormData = () => {
 };
 
 export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
-  const [submitStep, setSubmitStep] = useState<{
-    step: SubmitStep;
-    tx?: Address;
-  }>(() => ({ step: SubmitStepEnum.edit }));
   const formObject = useForm<MintFormSchema>({
     defaultValues: {
       amount: undefined,
       token: 'stETH',
       recipient: '' as Address,
     },
     mode: 'all',
+    // TODO: validation
     reValidateMode: 'onChange',
   });
-  const { callMint } = useMint();
+  const { mint, retryEvent } = useMint();
   const { activeVault } = useVaultInfo();
 
   const mintData = useMemo(() => {
@@ -76,54 +65,35 @@ export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
     };
   }, [activeVault]);
 
-  const { retryEvent, retryFire } = useFormControllerRetry();
-  const setModalState = useCallback((submitStep: SubmitPayload) => {
-    setSubmitStep(submitStep);
-  }, []);
-
   const onSubmit = useCallback(
     async ({ recipient, amount, token }: MintFormSchema) => {
-      if (amount && recipient) {
-        try {
-          setModalState({ step: SubmitStepEnum.initiate });
-          const tx = await callMint(recipient, amount, token, 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 });
-          }
-        }
-      }
+      // TODO: add validation, remove stub
+      if (!recipient || !amount) return false;
+      invariant(recipient, '[MintFormProvider] recipient is undefined');
+      invariant(amount, '[MintFormProvider] amount is undefined');
+      invariant(token, '[MintFormProvider] token is undefined');
 
-      return false;
+      return await mint(recipient, amount, token);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [callMint],
+    [mint],
   );
 
   const formControllerValue: FormControllerContextValueType<MintFormSchema> =
     useMemo(
       () => ({
         onSubmit,
         retryEvent,
-        retryFire,
         onReset: formObject.reset,
       }),
-      [retryFire, retryEvent, onSubmit, formObject.reset],
+      [retryEvent, onSubmit, formObject.reset],
     );
 
   return (
     <MintDataContext.Provider value={mintData}>
       <FormProvider {...formObject}>
         <FormControllerContext.Provider value={formControllerValue}>
           <FormController>{children}</FormController>
-          <SubmitModal submitStep={submitStep} setModalState={setModalState} />
         </FormControllerContext.Provider>
       </FormProvider>
     </MintDataContext.Provider>