Merge pull request #66 from lidofinance/feature/post-testnet

Tesnet v1.1

Author: Jeday

config/external-config/types.ts

@@ -18,7 +18,7 @@ export type ManifestConfig = {
     };
   };
 };
-
+// TODO adjust for vaults routing
 export enum ManifestConfigPageEnum {
   main = '/',
   overview = '/overview',

config/external-config/utils.ts

@@ -23,7 +23,7 @@ export const isPagesValid = (config: object) => {
   const pages = config.pages as ManifestConfig['pages'];
   if (pages && typeof pages === 'object') {
     // INFO: exclude possible issue when main page can be deactivated
-    return !pages[ManifestConfigPageEnum.main]?.shouldDisable;
+    return !pages['/']?.shouldDisable;
   }
 
   return false;

consts/routing.ts

@@ -0,0 +1,35 @@
+import type { Address } from 'viem';
+
+export const appPaths = {
+  myVaults: '/',
+  vaults: {
+    all: '/vaults',
+    create: '/vaults/create',
+    vault: (vaultAddress: Address) =>
+      ({
+        overview: `/vaults/${vaultAddress}`,
+        eth: (mode: 'supply' | 'withdraw') =>
+          `/vaults/${vaultAddress}/eth/${mode}` as const,
+        steth: (mode: 'mint' | 'repay') =>
+          `/vaults/${vaultAddress}/steth/${mode}` as const,
+        claim: `/vaults/${vaultAddress}/claim`,
+        settings: `/vaults/${vaultAddress}/settings`,
+        validators: `/vaults/${vaultAddress}/validators`,
+      }) as const,
+  },
+} as const;
+
+type StringValues<T> =
+  T extends Record<string, infer U> ? (U extends string ? U : never) : never;
+
+type ObjectValues<T> = T extends string
+  ? T
+  : T extends Record<string, infer U>
+    ? StringValues<T> | ObjectValues<U> | FunctionValues<U>
+    : never;
+
+type FunctionValues<T> = T extends (...args: any[]) => infer R
+  ? ObjectValues<R>
+  : never;
+
+export type AppPathsType = ObjectValues<typeof appPaths>;

consts/urls.ts

@@ -1,6 +1,3 @@
-// TODO: path + basePath
-export { ManifestConfigPageEnum as AppPaths } from 'config/external-config';
-
 export const getPathWithoutFirstSlash = (path: string): string => {
   if (path.length === 0 || path[0] !== '/') return path;
 

features/adjustment/adjustment-tabs.tsx

@@ -2,26 +2,26 @@ import { useAdjustment } from 'features/adjustment/contexts/adjustment-provider'
 import { useVaultInfo } from 'modules/vaults';
 
 import { Switch } from 'shared/components/switch';
-import { ManifestConfigPageEnum } from 'config/external-config';
 
 import { Mint } from './mint';
 import { Repay } from './repay';
-import { adjustmentToggleList } from './const';
 import { FormBlock, PageWrapper } from './styles';
+import { appPaths } from 'consts/routing';
+import { zeroAddress } from 'viem';
 
 export const AdjustmentTabs = () => {
   const { isMintTab } = useAdjustment();
-  const { activeVault } = useVaultInfo();
+  const { vaultAddress } = useVaultInfo();
 
   // TODO: improve creation of the path
   const mintRoutes = [
     {
-      path: `/${activeVault?.address}${ManifestConfigPageEnum.adjustment}/${adjustmentToggleList[0].value}`,
-      name: adjustmentToggleList[0].label,
+      path: appPaths.vaults.vault(vaultAddress ?? zeroAddress).steth('mint'),
+      name: 'Mint',
     },
     {
-      path: `/${activeVault?.address}${ManifestConfigPageEnum.adjustment}/${adjustmentToggleList[1].value}`,
-      name: adjustmentToggleList[1].label,
+      path: appPaths.vaults.vault(vaultAddress ?? zeroAddress).steth('repay'),
+      name: 'Repay',
     },
   ];
 

features/adjustment/const.ts

@@ -6,22 +6,3 @@ export const TOKENS_TO_MINT = {
 } as const;
 
 export type TOKENS_TO_MINT = keyof typeof TOKENS_TO_MINT;
-
-export enum ADJUSTMENT_PATHS {
-  mint = 'mint',
-  repay = 'repay',
-}
-
-export type AdjustmentPaths = 'mint' | 'repay';
-
-export const adjustmentToggleList: { value: AdjustmentPaths; label: string }[] =
-  [
-    {
-      value: ADJUSTMENT_PATHS.mint,
-      label: 'Mint',
-    },
-    {
-      value: ADJUSTMENT_PATHS.repay,
-      label: 'Repay',
-    },
-  ];

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

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

@@ -5,27 +5,15 @@ 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';
 
-import {
-  FormController,
-  FormControllerContext,
-  FormControllerContextValueType,
-} from 'shared/hook-form/form-controller';
+import { FormController } 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 +36,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,55 +61,25 @@ 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],
-    );
-
   return (
     <MintDataContext.Provider value={mintData}>
       <FormProvider {...formObject}>
-        <FormControllerContext.Provider value={formControllerValue}>
-          <FormController>{children}</FormController>
-          <SubmitModal submitStep={submitStep} setModalState={setModalState} />
-        </FormControllerContext.Provider>
+        <FormController onSubmit={onSubmit} retryEvent={retryEvent}>
+          {children}
+        </FormController>
       </FormProvider>
     </MintDataContext.Provider>
   );