Develop to main

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

@@ -11,8 +11,8 @@ import invariant from 'tiny-invariant';
 import type { UseQueryResult } from '@tanstack/react-query';
 
 import { useDappStatus } from 'modules/web3';
-import { type MaxMintableResult, useVault } from 'modules/vaults';
-
+import { type MaxMintableResult } from 'modules/vaults';
+import { useDisableForm } from 'shared/hook-form';
 import { FormControllerStyled } from 'shared/components/form';
 
 import { mintFormResolver } from './validation';
@@ -46,12 +46,10 @@ export const useMintFormData = () => {
 
 export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const { isDappActive } = useDappStatus();
-  const { activeVault } = useVault();
   const { validationContext, mintableQuery, invalidateMintData } =
     useMintData();
-
+  const disabled = useDisableForm();
   const { mint, retryEvent } = useMint();
-  const { isPendingDisconnect, isPendingConnect } = activeVault ?? {};
 
   const formObject = useForm<
     MintFormFieldValues,
@@ -63,7 +61,7 @@ export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
       token: 'stETH',
       recipient: '',
     },
-    disabled: !isDappActive || isPendingDisconnect || isPendingConnect,
+    disabled: !isDappActive || disabled,
     mode: 'onTouched',
     resolver: mintFormResolver,
     context: validationContext,

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

@@ -9,7 +9,7 @@ import {
 import { useForm } from 'react-hook-form';
 
 import { useDappStatus } from 'modules/web3';
-import { useVault } from 'modules/vaults';
+import { useDisableForm } from 'shared/hook-form';
 import { FormControllerStyled } from 'shared/components/form';
 
 import { useRepay } from './use-repay';
@@ -45,9 +45,8 @@ export const RepayFormProvider = ({ children }: PropsWithChildren) => {
     maxRepayableWstETH,
   } = useRepayFormData();
   const { isDappActive } = useDappStatus();
-  const { activeVault } = useVault();
+  const disabled = useDisableForm();
   const { burn, retryEvent } = useRepay();
-  const { isPendingDisconnect, isPendingConnect } = activeVault ?? {};
 
   const formObject = useForm<
     RepayFormFieldValues,
@@ -61,7 +60,7 @@ export const RepayFormProvider = ({ children }: PropsWithChildren) => {
     mode: 'onTouched',
     context: validationContext,
     resolver: repayFormResolver,
-    disabled: !isDappActive || isPendingDisconnect || isPendingConnect,
+    disabled: !isDappActive || disabled,
   });
 
   const token = formObject.watch('token');

features/create-vault/create-vault-form/use-create-vault.ts

@@ -48,7 +48,7 @@ export const useCreateVault = () => {
           value,
         };
 
-        const success = await withSuccess(
+        const result = await withSuccess(
           sendTX({
             transactions: [tx],
             mainActionCompleteText: vaultTexts.actions.createVault.completed,
@@ -57,13 +57,15 @@ export const useCreateVault = () => {
           }),
         );
 
-        trackEvent(
-          ...MATOMO_CLICK_EVENTS[
-            MATOMO_CLICK_EVENTS_TYPES.finalisingCreatingVault
-          ],
-        );
+        if (result.success) {
+          trackEvent(
+            ...MATOMO_CLICK_EVENTS[
+              MATOMO_CLICK_EVENTS_TYPES.finalisingCreatingVault
+            ],
+          );
+        }
 
-        return success;
+        return result;
       },
       [chainId, sendTX],
     ),

features/funding/supply/form/supply-form-provider/supply-form-provider.tsx

@@ -10,12 +10,11 @@ import invariant from 'tiny-invariant';
 import { useForm } from 'react-hook-form';
 
 import { useDappStatus } from 'modules/web3';
-import { useVault } from 'modules/vaults';
 import { useAwaiter } from 'shared/hooks/use-awaiter';
 import { FormControllerStyled } from 'shared/components/form';
+import { useDisableForm } from 'shared/hook-form';
 
 import { SupplyFormResolver } from './validation';
-
 import {
   useSupply,
   useSupplyFormValidationContext,
@@ -45,10 +44,9 @@ export const SupplyFormProvider: FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const { isDappActive } = useDappStatus();
-  const { activeVault } = useVault();
   const { validationContext } = useSupplyFormValidationContext();
   const { supply, retryEvent } = useSupply();
-  const { isPendingDisconnect, isPendingConnect } = activeVault ?? {};
+  const disabled = useDisableForm();
 
   const formObject = useForm<
     SupplyFormFieldValues,
@@ -62,7 +60,7 @@ export const SupplyFormProvider: FC<{ children: ReactNode }> = ({
       mintAddress: '',
     },
     mode: 'onTouched',
-    disabled: !isDappActive || isPendingDisconnect || isPendingConnect,
+    disabled: !isDappActive || disabled,
     context: useAwaiter(validationContext).awaiter,
     resolver: SupplyFormResolver,
   });

features/funding/withdraw/form/withdraw-form-context/withdraw-form-provider.tsx

@@ -10,8 +10,7 @@ import { useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
 
 import { useDappStatus } from 'modules/web3';
-import { useVault } from 'modules/vaults';
-
+import { useDisableForm } from 'shared/hook-form';
 import { FormControllerStyled } from 'shared/components/form';
 import { useWithdraw } from 'features/funding/withdraw/form/hooks';
 
@@ -42,14 +41,13 @@ export const WithdrawFormProvider: FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const { isDappActive } = useDappStatus();
-  const { activeVault } = useVault();
   const { withdraw, retryEvent } = useWithdraw();
-  const { isPendingDisconnect, isPendingConnect } = activeVault ?? {};
   const {
     validationContext,
     withdrawableEtherQuery,
     invalidateWithdrawFormData,
   } = useWithdrawValidationContext();
+  const disabled = useDisableForm();
 
   const formObject = useForm<
     WithdrawFormFieldValues,
@@ -62,7 +60,7 @@ export const WithdrawFormProvider: FC<{ children: ReactNode }> = ({
       recipient: '',
     },
     mode: 'onTouched',
-    disabled: !isDappActive || isPendingDisconnect || isPendingConnect,
+    disabled: !isDappActive || disabled,
     context: validationContext,
     resolver: withdrawFormResolver,
   });

features/overview/shared/overview-item/overview-item-value.tsx

@@ -3,6 +3,7 @@ import { type FC, useMemo } from 'react';
 import { InlineLoader } from 'shared/components';
 import { FormatToken } from 'shared/formatters';
 import { isBigint } from 'utils';
+import { WEI_PER_ETHER } from 'consts/tx';
 
 import { ContentText } from './styles';
 
@@ -14,14 +15,18 @@ export interface ItemValueProps {
   textSize?: 'lg' | 'xl';
 }
 
+const countMaxDecimalDigits = (amount: bigint) => {
+  return amount / WEI_PER_ETHER > 1000 ? 1 : 4;
+};
+
 export const OverviewItemValue: FC<ItemValueProps> = (props) => {
   const { content, isLoading, color, textSize = 'xl', symbol = '' } = props;
   const contentView = useMemo(
     () =>
       isBigint(content) ? (
         <FormatToken
           amount={content}
-          maxDecimalDigits={4}
+          maxDecimalDigits={countMaxDecimalDigits(content)}
           showAmountTip={false}
           symbol={symbol}
         />

features/settings/main/contexts/main-settings-provider.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { trackEvent } from '@lidofinance/analytics-matomo';
 
 import { useDappStatus } from 'modules/web3';
-import { FormController } from 'shared/hook-form/form-controller';
+import { FormController, useDisableForm } from 'shared/hook-form';
 import { useVault } from 'modules/vaults';
 import { useAwaiter } from 'shared/hooks/use-awaiter';
 import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
@@ -22,14 +22,13 @@ import type {
 export const MainSettingsProvider: FC<PropsWithChildren> = ({ children }) => {
   const { isDappActive } = useDappStatus();
   const {
-    activeVault,
     invalidateVaultConfig,
     invalidateVaultState,
     refetch: refetchVault,
   } = useVault();
   const { editMainSettings, retryEvent } = useEditMainSettings();
   const { data, refetch } = useMainSettingsFormData();
-  const { isPendingDisconnect, isPendingConnect } = activeVault ?? {};
+  const disabled = useDisableForm();
 
   const promisedSettingsData = useAwaiter(data).awaiter;
 
@@ -40,7 +39,7 @@ export const MainSettingsProvider: FC<PropsWithChildren> = ({ children }) => {
   >({
     defaultValues: async () =>
       await promisedSettingsData.then(prepareDefaultValues),
-    disabled: !isDappActive || isPendingDisconnect || isPendingConnect,
+    disabled: !isDappActive || disabled,
     resolver: mainSettingsFormResolver,
     context: promisedSettingsData,
     mode: 'all',

features/settings/permissions/permissions-form-provider.tsx

@@ -8,7 +8,7 @@ import { useVault } from 'modules/vaults';
 import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
 
 import { useAwaiter } from 'shared/hooks/use-awaiter';
-import { FormController } from 'shared/hook-form/form-controller';
+import { FormController, useDisableForm } from 'shared/hook-form';
 
 import { editPermissionsSchema } from './consts';
 import { useEditPermissions, usePermissionsFormData } from './hooks';
@@ -19,17 +19,17 @@ import { FormAndContentWrapper } from './styles';
 export const PermissionsFormProvider: FC<PropsWithChildren> = ({
   children,
 }) => {
-  const { invalidateVaultConfig, activeVault } = useVault();
+  const { invalidateVaultConfig } = useVault();
   const { isDappActive } = useDappStatus();
   const { data: rolesList, refetch } = usePermissionsFormData();
   const asyncPermissions = useAwaiter(rolesList);
   const { editPermissions, retryEvent } = useEditPermissions();
-  const { isPendingDisconnect, isPendingConnect } = activeVault ?? {};
+  const disabled = useDisableForm();
 
   const formObject = useForm<EditPermissionsSchema>({
     defaultValues: async () => asyncPermissions.awaiter,
     resolver: zodResolver(editPermissionsSchema),
-    disabled: !isDappActive || isPendingDisconnect || isPendingConnect,
+    disabled: !isDappActive || disabled,
     mode: 'all',
   });
 

features/settings/tier/contexts/tier-form-provider.tsx

@@ -2,7 +2,7 @@ import { type FC, type PropsWithChildren, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { trackEvent } from '@lidofinance/analytics-matomo';
 
-import { FormController } from 'shared/hook-form/form-controller';
+import { FormController, useDisableForm } from 'shared/hook-form';
 import { useAwaiter } from 'shared/hooks/use-awaiter';
 import { useDappStatus } from 'modules/web3';
 import {
@@ -32,23 +32,19 @@ const prepareDefaultValues = async (
 
 export const TierFormProvider: FC<PropsWithChildren> = ({ children }) => {
   const { isDappActive } = useDappStatus();
-  const { activeVault, refetch } = useVault();
+  const { refetch } = useVault();
   const { editTierSettings, retryEvent } = useEditTierSettings();
   const { data } = useVaultTierInfo();
   const { isNodeOperator, hasAdmin } = useVaultConfirmingRoles();
+  const disabled = useDisableForm();
   const { hasPermission } = useVaultPermission('vaultConfiguration');
   const promisedTierInfo = useAwaiter(data).awaiter;
   const isDisabledByRoles = !(isNodeOperator || hasAdmin || hasPermission);
-  const { isPendingDisconnect, isPendingConnect } = activeVault ?? {};
 
   const formObject = useForm<TierSettingsFormValues>({
     defaultValues: async () =>
       await promisedTierInfo.then(prepareDefaultValues),
-    disabled:
-      !isDappActive ||
-      isPendingDisconnect ||
-      isPendingConnect ||
-      isDisabledByRoles,
+    disabled: !isDappActive || disabled || isDisabledByRoles,
     context: promisedTierInfo,
     resolver: tierSettingsFormResolver,
     mode: 'onChange',

shared/components/layout/styles.tsx

@@ -56,7 +56,7 @@ export const LayoutStyles = styled(Container)<{ isError: boolean }>`
   min-height: 100vh;
   height: auto;
 
-  @media ${devicesHeaderMedia.tablet} {
+  @media ${devicesHeaderMedia.laptop} {
     grid-template-columns: 200px 1fr;
     grid-template-areas: ${({ isError }) =>
       tabletTemplateAreas[isError ? 'withError' : 'default']};

shared/hook-form/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-disable-form';

shared/hook-form/hooks/use-disable-form.ts

@@ -0,0 +1,14 @@
+import { useVault } from 'modules/vaults';
+
+export const useDisableForm = () => {
+  const { activeVault } = useVault();
+  const { isPendingDisconnect, isPendingConnect, isVaultDisconnected } =
+    activeVault ?? {};
+
+  return (
+    !activeVault ||
+    isPendingDisconnect ||
+    isPendingConnect ||
+    isVaultDisconnected
+  );
+};

shared/hook-form/index.ts

@@ -0,0 +1,4 @@
+export * from './controls';
+export * from './form-controller';
+export * from './hooks';
+export * from './validation';

shared/hook-form/validation/index.ts

@@ -0,0 +1,4 @@
+export * from './validate-bigint-max';
+export * from './validate-bigint-min';
+export * from './validate-ether-amount';
+export * from './validation-error';

styles/constants.ts

@@ -1,3 +1,4 @@
 export const NAV_MOBILE_HEIGHT = 60;
 export const NAV_MOBILE_MAX_WIDTH = 880;
 export const NAV_TABLET_MAX_WIDTH = 1024;
+export const NAV_LAPTOP_MAX_WIDTH = 1200;

styles/global.ts

@@ -2,12 +2,14 @@ import { createGlobalStyle } from 'styled-components';
 import { ThemeName } from '@lidofinance/lido-ui';
 
 import {
+  NAV_LAPTOP_MAX_WIDTH,
   NAV_MOBILE_HEIGHT,
   NAV_MOBILE_MAX_WIDTH,
   NAV_TABLET_MAX_WIDTH,
 } from './constants';
 
 export const devicesHeaderMedia = {
+  laptop: `screen and (max-width: ${NAV_LAPTOP_MAX_WIDTH}px)`,
   tablet: `screen and (max-width: ${NAV_TABLET_MAX_WIDTH}px)`,
   mobile: `screen and (max-width: ${NAV_MOBILE_MAX_WIDTH}px)`,
 };