Merge pull request #77 from lidofinance/feature/si-1895-polish-not-connectwrong-chain-state

fix: chain mismatch for settings

Author: Jeday

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

@@ -1,15 +1,13 @@
 import { useVaultInfo, type VAULT_OWNER_ROLES } from 'modules/vaults';
 import { MultiplePermissionedSubmitButton } from 'modules/vaults/components';
 import { useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormState, useWatch } from 'react-hook-form';
 
 const NON_INCREASE_LOCK_ROLES = ['minter'] as VAULT_OWNER_ROLES[];
 const INCREASE_LOCK_ROLES = ['minter', 'locker'] as VAULT_OWNER_ROLES[];
 
 export const SubmitButton = () => {
-  const {
-    formState: { isSubmitting, isValid },
-  } = useFormContext();
+  const { isSubmitting, isValid, disabled } = useFormState();
 
   const { activeVault } = useVaultInfo();
 
@@ -35,13 +33,13 @@ export const SubmitButton = () => {
     return NON_INCREASE_LOCK_ROLES;
   }, [activeVault, amount, token]);
 
-  const disabled = isSubmitting && !isValid;
+  const isDisabled = isSubmitting && !isValid && disabled;
 
   return (
     <MultiplePermissionedSubmitButton
       dashboardRoles={roles}
       type="submit"
-      disabled={disabled}
+      disabled={isDisabled}
     >
       Mint
     </MultiplePermissionedSubmitButton>

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

@@ -6,15 +6,16 @@ import {
   createContext,
   useContext,
 } from 'react';
+import type { Address } from 'viem';
 import { FormProvider, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
 
 import { useVaultInfo } from 'modules/vaults';
-import { useMint } from 'features/adjustment/mint/hooks';
+import { useDappStatus } from 'modules/web3';
 
 import { FormController } from 'shared/hook-form/form-controller';
+import { useMint } from 'features/adjustment/mint/hooks';
 import { MintFormSchema } from 'features/adjustment/mint/types';
-import { Address } from 'viem';
 
 type MintDataContextValue = {
   mintableStETH: bigint;
@@ -36,12 +37,14 @@ export const useMintFormData = () => {
 };
 
 export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const { isDappActive } = useDappStatus();
   const formObject = useForm<MintFormSchema>({
     defaultValues: {
       amount: undefined,
       token: 'stETH',
       recipient: '' as Address,
     },
+    disabled: !isDappActive,
     mode: 'all',
     // TODO: validation
     reValidateMode: 'onChange',

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

@@ -1,17 +1,15 @@
 import { PermissionedSubmitButton } from 'modules/vaults/components';
-import { useFormContext } from 'react-hook-form';
+import { useFormState } from 'react-hook-form';
 
 export const SubmitButton = () => {
-  const {
-    formState: { isSubmitting, isValid },
-  } = useFormContext();
-  const disabled = isSubmitting || !isValid;
+  const { isSubmitting, isValid, disabled } = useFormState();
+  const isDisabled = isSubmitting || !isValid || disabled;
 
   return (
     <PermissionedSubmitButton
       dashboardRole="repayer"
       type="submit"
-      disabled={disabled}
+      disabled={isDisabled}
     >
       Repay
     </PermissionedSubmitButton>

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

@@ -8,11 +8,10 @@ import {
 import { FormProvider, useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
 
-import { useBurn } from 'features/adjustment/repay/hooks';
 import { useDappStatus, useStethBalance, useWstethBalance } from 'modules/web3';
-
 import { FormController } from 'shared/hook-form/form-controller';
 
+import { useBurn } from 'features/adjustment/repay/hooks';
 import { RepayFormSchema } from 'features/adjustment/repay/types';
 
 type RepayDataContextValue = {
@@ -40,12 +39,14 @@ export const useRepayFormData = () => {
 };
 
 export const RepayFormProvider = ({ children }: { children: ReactNode }) => {
+  const { isDappActive } = useDappStatus();
   const formObject = useForm<RepayFormSchema>({
     defaultValues: {
       amount: undefined,
       token: 'stETH',
     },
     mode: 'all',
+    disabled: !isDappActive,
     // TODO: validation
     reValidateMode: 'onChange',
   });

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

@@ -6,18 +6,18 @@ import {
   createContext,
   useContext,
 } from 'react';
+import invariant from 'tiny-invariant';
 import { isAddress, ReadContractErrorType } from 'viem';
 import { useReadContract } from 'wagmi';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { useClaim } from 'features/claim/claim-form/hooks';
+import { useDappStatus } from 'modules/web3';
 import { useVaultInfo } from 'modules/vaults';
-
+import { dashboardAbi } from 'abi/dashboard-abi';
 import { FormController } from 'shared/hook-form/form-controller';
 
-import { dashboardAbi } from 'abi/dashboard-abi';
+import { useClaim } from 'features/claim/claim-form/hooks';
 import { ClaimFormSchema } from 'features/claim/claim-form/types';
-import invariant from 'tiny-invariant';
 
 type ClaimDataContextValue = {
   availableToClaim: bigint | undefined;
@@ -43,11 +43,12 @@ export const ClaimFormProvider: FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const { activeVault } = useVaultInfo();
-
+  const { isDappActive } = useDappStatus();
   const formObject = useForm<ClaimFormSchema>({
     defaultValues: {
       recipient: '',
     },
+    disabled: !isDappActive,
     mode: 'all',
     // TODO: validation
     reValidateMode: 'onChange',

features/claim/claim-form/form/submit-button/submit-button.tsx

@@ -1,23 +1,23 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormState } from 'react-hook-form';
 import { useClaimFormData } from 'features/claim/claim-form/claim-form-context';
 import { formatBalance } from 'utils';
 import { PermissionedSubmitButton } from 'modules/vaults/components';
 
 export const SubmitButton = () => {
-  const {
-    formState: { isValid, isSubmitting },
-  } = useFormContext();
+  const { isValid, isSubmitting, disabled } = useFormState();
   const { isLoadingClaimInfo, availableToClaim, isErrorClaimInfo } =
     useClaimFormData();
 
   const isLoading =
     (!isErrorClaimInfo && !availableToClaim) || isLoadingClaimInfo;
 
+  const isDisabled = isSubmitting || !isValid || disabled || isLoading;
+
   return (
     <PermissionedSubmitButton
       dashboardRole="nodeOperatorFeeClaimer"
       type="submit"
-      disabled={isSubmitting || !isValid || isLoading}
+      disabled={isDisabled}
     >
       {isLoading && <>Wait for claim information</>}
       {!!availableToClaim && <>{formatBalance(availableToClaim).trimmed} ETH</>}

features/create-vault/create-vault-form/create-vault-form.tsx

@@ -3,6 +3,7 @@ import type { Address } from 'viem';
 import { useForm, FormProvider } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 
+import { useDappStatus } from 'modules/web3';
 import { FormController } from 'shared/hook-form/form-controller';
 
 import { CreateVaultSchema } from 'features/create-vault/types';
@@ -26,6 +27,7 @@ const AFTER_SUBMIT_RESET_OPTIONS = {
 };
 
 export const CreateVaultForm: FC<PropsWithChildren> = () => {
+  const { isDappActive } = useDappStatus();
   const formObject = useForm({
     defaultValues: {
       nodeOperator: '' as Address,
@@ -37,6 +39,7 @@ export const CreateVaultForm: FC<PropsWithChildren> = () => {
       roles: {},
       step: CREATE_VAULT_FORM_STEPS.main,
     },
+    disabled: !isDappActive,
     mode: 'onTouched',
     shouldUnregister: false,
     resolver: zodResolver(createVaultSchema, { async: false }, { raw: false }),

features/create-vault/create-vault-form/stages/confirmation/confirmation-action.tsx

@@ -21,14 +21,16 @@ export const ConfirmationAction: FC<ConfirmationActionProps> = ({
   isConnected,
 }) => {
   const {
-    formState: { isValid, isSubmitting },
+    formState: { isValid, isSubmitting, disabled },
     setValue,
   } = useFormContext<CreateVaultSchema>();
 
   const handleSetPrevStep = () => {
     setValue('step', CREATE_VAULT_FORM_STEPS.main);
   };
 
+  const isSubmitDisabled = isDisabled || disabled || isSubmitting || !isValid;
+
   return (
     <ActionButtonContainer>
       <ActionButton
@@ -42,7 +44,7 @@ export const ConfirmationAction: FC<ConfirmationActionProps> = ({
       {isConnected ? (
         <ActionButton
           loading={isSubmitting}
-          disabled={isDisabled || !isValid}
+          disabled={isSubmitDisabled}
           type="submit"
           fullwidth
         >

features/create-vault/create-vault-form/stages/main-settings/create-vault-input/address-array-input.tsx

@@ -1,4 +1,4 @@
-import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
 import { Plus } from '@lidofinance/lido-ui';
 
 import { ButtonClose } from 'shared/components';
@@ -17,6 +17,7 @@ type PlaceholderForm = {
 
 export const AddressArrayInput: FC<AddressArrayProps> = ({ name, label }) => {
   const { register } = useFormContext();
+  const { disabled } = useFormState();
   const { fields, append, remove } = useFieldArray<
     PlaceholderForm,
     'addresses'
@@ -37,16 +38,18 @@ export const AddressArrayInput: FC<AddressArrayProps> = ({ name, label }) => {
           </AddressInputGroup>
         );
       })}
-      <AppendButton
-        color="primary"
-        icon={<Plus />}
-        size="md"
-        variant="ghost"
-        type="button"
-        onClick={() => append({ value: '' as Address })}
-      >
-        Add new address
-      </AppendButton>
+      {!disabled && (
+        <AppendButton
+          color="primary"
+          icon={<Plus />}
+          size="md"
+          variant="ghost"
+          type="button"
+          onClick={() => append({ value: '' as Address })}
+        >
+          Add new address
+        </AppendButton>
+      )}
     </AddressList>
   );
 };

features/create-vault/create-vault-form/stages/main-settings/main-settings-action.tsx

@@ -1,21 +1,23 @@
+import type { FC } from 'react';
 import { useFormContext, useFormState } from 'react-hook-form';
 import { useRouter } from 'next/router';
 
-import { CREATE_VAULT_FORM_STEPS } from 'features/create-vault/consts';
 import { appPaths } from 'consts/routing';
 
+import { CREATE_VAULT_FORM_STEPS } from 'features/create-vault/consts';
 import {
   ActionButton,
   ActionButtonContainer,
 } from 'features/create-vault/create-vault-form/styles';
 
-import type { FC } from 'react';
 import type { CreateVaultSchema } from 'features/create-vault/types';
 
 export const MainSettingsAction: FC = () => {
   const router = useRouter();
   const { trigger, setValue } = useFormContext<CreateVaultSchema>();
-  const { isValidating } = useFormState<CreateVaultSchema>();
+  const { isValidating, isValid } = useFormState<CreateVaultSchema>();
+
+  const isSubmitDisabled = isValidating || !isValid;
 
   const handleNavigateToRoot = () => {
     void router.push(appPaths.myVaults);
@@ -42,7 +44,7 @@ export const MainSettingsAction: FC = () => {
       <ActionButton
         type="button"
         onClick={handleSetNextStep}
-        disabled={isValidating}
+        disabled={isSubmitDisabled}
         fullwidth
       >
         Continue