Union modals standart for forms

features/adjustment/mint/form/address-field/address-field.tsx

@@ -14,7 +14,6 @@ export const AddressField = () => {
     });
   };
 
-  // TODO: add error
   return (
     <Input
       {...field}

features/adjustment/mint/form/feature-tx-info/feature-tx-info.tsx

@@ -22,9 +22,9 @@ export const FeatureTxInfo = () => {
         </Text>
         {isLoading && <Loader size="small" />}
         {/*TODO: replace static by real data*/}
-        {data && <AmountInfo>{'$99.99'}</AmountInfo>}
-        {isError && <AmountInfo>Is not available</AmountInfo>}
-        {!isLoading && !data && !isError && <AmountInfo>{'$0'}</AmountInfo>}
+        {data?.result && !isLoading && <AmountInfo>{data?.result}</AmountInfo>}
+        {isError && !isLoading && <AmountInfo>Is not available</AmountInfo>}
+        {!isLoading && !data?.result && !isError && <AmountInfo>-</AmountInfo>}
       </InfoRow>
     </Wrapper>
   );

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

@@ -2,49 +2,64 @@ import { useCallback } from 'react';
 import {
   useConfig,
   useSimulateContract,
-  useWaitForTransactionReceipt,
   useWriteContract,
+  usePublicClient,
   UseSimulateContractParameters,
 } from 'wagmi';
 import { Address } from 'viem';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
 import { useDappStatus } from 'modules/web3/hooks/use-dapp-status';
 import { useVaultInfo } from 'features/overview/contexts';
+import {
+  SubmitStep,
+  SubmitStepEnum,
+} from 'shared/components/submit-modal/types';
+import invariant from 'tiny-invariant';
 
 export const useMint = (onMutate = () => {}) => {
   const { chainId } = useDappStatus();
   const wagmiConfig = useConfig();
   const { activeVault } = useVaultInfo();
-
+  const publicClient = usePublicClient();
   const { data: mintTx, writeContractAsync } = useWriteContract({
     config: wagmiConfig,
     mutation: {
       onMutate,
     },
   });
 
-  const { data: mintReceipt } = useWaitForTransactionReceipt({
-    hash: mintTx,
-  });
-
   const callMint = useCallback(
-    async (recipient: Address, amount: bigint, token: string) => {
-      return await writeContractAsync({
+    async (
+      recipient: Address,
+      amount: bigint,
+      token: string,
+      setModalState: (submitStep: { step: SubmitStep; tx?: Address }) => void,
+    ) => {
+      invariant(publicClient, '[useMintDashboard] publicClient is undefined');
+
+      setModalState({ step: SubmitStepEnum.confirming });
+      const tx = await writeContractAsync({
         abi: dashboardAbi,
         address: activeVault?.owner as Address,
         functionName: token === 'stETH' ? 'mintStETH' : 'mintWstETH',
         args: [recipient, amount],
         chainId,
       });
+
+      setModalState({ step: SubmitStepEnum.submitting, tx });
+      await publicClient.waitForTransactionReceipt({
+        hash: tx,
+      });
+
+      return tx;
     },
-    [chainId, writeContractAsync, activeVault?.owner],
+    [chainId, writeContractAsync, activeVault?.owner, publicClient],
   );
 
   return {
     callMint,
     mintTx,
-    mintReceipt,
   };
 };
 

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

@@ -5,6 +5,7 @@ import {
   useCallback,
   createContext,
   useContext,
+  useState,
 } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
@@ -19,6 +20,12 @@ import {
   FormControllerContextValueType,
 } from 'shared/hook-form/form-controller';
 import { MintFormSchema } from 'features/adjustment/mint/types';
+import { SubmitModal } from 'shared/components';
+import {
+  SubmitStep,
+  SubmitStepEnum,
+} from 'shared/components/submit-modal/types';
+import { Address } from 'viem';
 
 type MintDataContextValue = {
   mintableStETH: bigint;
@@ -39,11 +46,15 @@ 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: undefined,
+      recipient: '' as Address,
     },
     mode: 'all',
     reValidateMode: 'onChange',
@@ -60,16 +71,36 @@ export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
   }, [activeVault]);
 
   const { retryEvent, retryFire } = useFormControllerRetry();
+  const setModalState = useCallback(
+    (submitStep: { step: SubmitStep; tx?: Address }) => {
+      setSubmitStep(submitStep);
+    },
+    [],
+  );
 
   const onSubmit = useCallback(
     async ({ recipient, amount, token }: MintFormSchema) => {
       if (amount && recipient) {
-        await callMint(recipient, amount, token);
-        return true;
+        try {
+          setModalState({ step: SubmitStepEnum.initiate });
+          const tx = await callMint(recipient, amount, token, setModalState);
+          setModalState({ step: SubmitStepEnum.success, 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
     [callMint],
   );
 
@@ -89,6 +120,7 @@ export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
       <FormProvider {...formObject}>
         <FormControllerContext.Provider value={formControllerValue}>
           <FormController>{children}</FormController>
+          <SubmitModal submitStep={submitStep} setModalState={setModalState} />
         </FormControllerContext.Provider>
       </FormProvider>
     </MintDataContext.Provider>

features/adjustment/mint/types.ts

@@ -3,5 +3,5 @@ import { Address } from 'viem';
 export type MintFormSchema = {
   amount: bigint | undefined;
   token: string;
-  recipient: Address | undefined;
+  recipient: Address;
 };

features/adjustment/repay/form/balance/balance.tsx

@@ -29,7 +29,9 @@ export const Balance = () => {
             {formatBalance(balance).trimmed} {token}
           </AmountInfo>
         )}
-        {isError && <AmountInfo>stEth amount is not available</AmountInfo>}
+        {isError && !isLoading && (
+          <AmountInfo>stEth amount is not available</AmountInfo>
+        )}
       </InfoRow>
     </Wrapper>
   );

features/adjustment/repay/form/feature-tx-info/feature-tx-info.tsx

@@ -30,10 +30,9 @@ export const FeatureTxInfo = () => {
           Transaction cost
         </Text>
         {isLoading && <Loader size="small" />}
-        {/*TODO: replace static by real data*/}
-        {data && <AmountInfo>{'$99.99'}</AmountInfo>}
-        {isError && <AmountInfo>Is not available</AmountInfo>}
-        {!isLoading && !data && !isError && <AmountInfo>{'$0'}</AmountInfo>}
+        {!!data?.result && <AmountInfo>{data?.result}</AmountInfo>}
+        {isError && !isLoading && <AmountInfo>Is not available</AmountInfo>}
+        {!isLoading && !data?.result && !isError && <AmountInfo>-</AmountInfo>}
       </InfoRow>
     </Wrapper>
   );

features/adjustment/repay/hooks/use-burn.ts

@@ -3,17 +3,24 @@ import {
   useConfig,
   useWaitForTransactionReceipt,
   useWriteContract,
+  usePublicClient,
 } from 'wagmi';
 import { Address } from 'viem';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
 import { useDappStatus } from 'modules/web3/hooks/use-dapp-status';
 import { useVaultInfo } from 'features/overview/contexts';
+import {
+  SubmitStep,
+  SubmitStepEnum,
+} from 'shared/components/submit-modal/types';
+import invariant from 'tiny-invariant';
 
 export const useBurn = (onMutate = () => {}) => {
   const { chainId } = useDappStatus();
   const wagmiConfig = useConfig();
   const { activeVault } = useVaultInfo();
+  const publicClient = usePublicClient();
 
   const { data: burnTx, writeContractAsync } = useWriteContract({
     config: wagmiConfig,
@@ -27,16 +34,34 @@ export const useBurn = (onMutate = () => {}) => {
   });
 
   const callBurn = useCallback(
-    async ({ token, amount }: { token: string; amount: bigint }) => {
-      return await writeContractAsync({
+    async ({
+      token,
+      amount,
+      setModalState,
+    }: {
+      token: string;
+      amount: bigint;
+      setModalState: (submitStep: { step: SubmitStep; tx?: Address }) => void;
+    }) => {
+      invariant(publicClient, '[useBurn] publicClient is undefined');
+
+      setModalState({ step: SubmitStepEnum.confirming });
+      const tx = await writeContractAsync({
         abi: dashboardAbi,
         address: activeVault?.owner as Address,
         functionName: token === 'stETH' ? 'burnStETH' : 'burnWstETH',
         args: [amount],
         chainId,
       });
+
+      setModalState({ step: SubmitStepEnum.submitting, tx });
+      await publicClient.waitForTransactionReceipt({
+        hash: tx,
+      });
+
+      return tx;
     },
-    [chainId, activeVault?.owner, writeContractAsync],
+    [chainId, activeVault?.owner, writeContractAsync, publicClient],
   );
 
   return {

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

@@ -4,6 +4,7 @@ import {
   useCallback,
   createContext,
   useContext,
+  useState,
 } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
@@ -19,6 +20,9 @@ import {
 } from 'shared/hook-form/form-controller';
 
 import { RepayFormSchema } from 'features/adjustment/repay/types';
+import { SubmitModal } from 'shared/components';
+import { SubmitStep, SubmitStepEnum } from 'shared/components/submit-modal';
+import { Address } from 'viem';
 
 type RepayDataContextValue = {
   stEthBalance: bigint | undefined;
@@ -45,6 +49,10 @@ export const useRepayFormData = () => {
 };
 
 export const RepayFormProvider = ({ children }: { children: ReactNode }) => {
+  const [submitStep, setSubmitStep] = useState<{
+    step: SubmitStep;
+    tx?: Address;
+  }>(() => ({ step: SubmitStepEnum.edit }));
   const formObject = useForm<RepayFormSchema>({
     defaultValues: {
       amount: undefined,
@@ -92,16 +100,38 @@ export const RepayFormProvider = ({ children }: { children: ReactNode }) => {
   );
 
   const { retryEvent, retryFire } = useFormControllerRetry();
+  const setModalState = useCallback(
+    (submitStep: { step: SubmitStep; tx?: Address }) => {
+      setSubmitStep(submitStep);
+    },
+    [],
+  );
 
   const onSubmit = useCallback(
     async ({ amount, token }: RepayFormSchema) => {
-      if (amount) {
-        await callBurn({ amount, token });
-        return true;
+      try {
+        if (amount) {
+          setModalState({ step: SubmitStepEnum.initiate });
+          const tx = await callBurn({ amount, token, setModalState });
+          setModalState({ step: SubmitStepEnum.success, tx });
+          return true;
+        }
+
+        return false;
+      } 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
     [callBurn],
   );
 
@@ -121,6 +151,7 @@ export const RepayFormProvider = ({ children }: { children: ReactNode }) => {
       <FormProvider {...formObject}>
         <FormControllerContext.Provider value={formControllerValue}>
           <FormController>{children}</FormController>
+          <SubmitModal submitStep={submitStep} setModalState={setModalState} />
         </FormControllerContext.Provider>
       </FormProvider>
     </RepayDataContext.Provider>