Merge pull request #83 from lidofinance/feature/si-1953-handle-404-for-vaults

 Display error for vaults when could not fetch/invalid

Author: Jeday

modules/vaults/consts/texts.ts

@@ -315,6 +315,11 @@ export const vaultTexts = {
 
       noRoles: (roleNames: string[]) =>
         `You don't have ${roleNames.join(',')} role${roleNames.length > 1 ? 's' : ''}` as const,
+      loadingVault: 'Error loading stVault',
+      vaultAddress: 'Invalid stVault address',
+    },
+    links: {
+      goToAll: 'To All Vaults',
     },
   },
 } as const;

modules/vaults/vault-context/index.tsx

@@ -1,3 +1,4 @@
+import invariant from 'tiny-invariant';
 import {
   FC,
   createContext,
@@ -8,10 +9,11 @@ import {
 } from 'react';
 import { useRouter } from 'next/router';
 import { Address, isAddress } from 'viem';
-import invariant from 'tiny-invariant';
+import type { QueryObserverResult } from '@tanstack/react-query';
+
 import { useSingleVaultData } from 'modules/vaults/hooks/use-vault-data';
-import { VaultInfo } from 'types';
-import { QueryObserverResult } from '@tanstack/react-query';
+
+import type { VaultInfo } from 'types';
 
 type VaultContextType = {
   vaultAddress: Address | undefined;
@@ -23,11 +25,18 @@ type VaultContextType = {
 const VaultContext = createContext<VaultContextType | null>(null);
 VaultContext.displayName = 'VaultContext';
 
+export class VaultAddressError extends Error {
+  constructor(vaultAddress: string) {
+    super(`Vault address is not valid: ${vaultAddress}`);
+    this.name = 'VaultAddressError';
+  }
+}
+
 export const VaultProvider: FC<PropsWithChildren> = ({ children }) => {
   const router = useRouter();
   const { vaultAddress = '' } = router.query as { vaultAddress?: Address };
-  const sanitizedVaultAddress = isAddress(vaultAddress)
-    ? vaultAddress
+  const sanitizedVaultAddress = isAddress(vaultAddress.toLowerCase())
+    ? (vaultAddress.toLowerCase() as Address)
     : undefined;
   const { data, error, refetch, isPending, isRefetching } = useSingleVaultData(
     sanitizedVaultAddress,
@@ -43,12 +52,26 @@ export const VaultProvider: FC<PropsWithChildren> = ({ children }) => {
       vaultAddress: sanitizedVaultAddress,
       activeVault: data,
       isLoadingVault: isPending,
-      error: error,
+
+      error:
+        error ||
+        (vaultAddress &&
+          !sanitizedVaultAddress &&
+          new VaultAddressError(vaultAddress)) ||
+        null,
       refetchVaultInfo: () =>
         refetch({ cancelRefetch: true, throwOnError: false }),
       isRefetching: isRefetching,
     };
-  }, [sanitizedVaultAddress, data, isPending, error, isRefetching, refetch]);
+  }, [
+    sanitizedVaultAddress,
+    data,
+    isPending,
+    error,
+    vaultAddress,
+    isRefetching,
+    refetch,
+  ]);
 
   return (
     <VaultContext.Provider value={contextValue}>

shared/components/button-link/button-link.tsx

@@ -20,7 +20,7 @@ export const ButtonLink: FC<PropsWithChildren<CloseButtonProps>> = ({
   );
 
   if (href) {
-    <Link href={href}>{content}</Link>;
+    return <Link href={href}>{content}</Link>;
   }
 
   return content;

shared/components/layout/navigation/modes/vault.tsx

@@ -1,14 +1,18 @@
-import { Stake, Withdraw, Wrap } from '@lidofinance/lido-ui';
-import { appPaths } from 'consts/routing';
+import { useMemo } from 'react';
 import { type Address } from 'viem';
-import { NavList, SelectedVaultWrapper } from '../styles';
+import { Stake, Withdraw, Wrap } from '@lidofinance/lido-ui';
+
 import { useVaultInfo } from 'modules/vaults';
 import { AddressBadge } from 'shared/components/address-badge';
-import { useMemo } from 'react';
-import { ReactComponent as GearIcon } from 'assets/icons/gear.svg';
-import { ReactComponent as MosaicIcon } from 'assets/icons/mosaic.svg';
+import { appPaths } from 'consts/routing';
+
 import { NavigationLink } from '../navigation-link';
 import { BackAllVaults } from '../back-all-vaults';
+import { NavList, SelectedVaultWrapper } from '../styles';
+
+import { ReactComponent as GearIcon } from 'assets/icons/gear.svg';
+import { ReactComponent as MosaicIcon } from 'assets/icons/mosaic.svg';
+import { VaultError } from '../vault-error';
 
 const vaultRoutes = (vaultAddress: Address, overrideMode?: any) => [
   {
@@ -82,6 +86,7 @@ export const VaultNavigation = () => {
           />
         ))}
       </NavList>
+      <VaultError />
     </>
   );
 };

shared/components/layout/navigation/styles.ts

@@ -122,3 +122,11 @@ export const SelectedVaultWrapper = styled.div`
   background-color: var(--lido-color-background);
   overflow: clip;
 `;
+
+// Error modal
+
+export const ErrorModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spaceMap.sm}px;
+`;

shared/components/layout/navigation/vault-error.tsx

@@ -0,0 +1,37 @@
+import { Modal, Button } from '@lidofinance/lido-ui';
+
+import { useVaultInfo, VaultAddressError, vaultTexts } from 'modules/vaults';
+import { ButtonLink } from 'shared/components/button-link';
+import { appPaths } from 'consts/routing';
+
+import { ErrorModalContent } from './styles';
+
+const texts = vaultTexts.common;
+
+export const VaultError = () => {
+  const { error, refetchVaultInfo } = useVaultInfo();
+  if (!error) return null;
+
+  const goToAll = (
+    <ButtonLink href={appPaths.vaults.all}>{texts.links.goToAll}</ButtonLink>
+  );
+
+  if (error instanceof VaultAddressError) {
+    return (
+      <Modal title={texts.errors.vaultAddress} center open>
+        {goToAll}
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal title={texts.errors.loadingVault} center open>
+      <ErrorModalContent>
+        <Button variant="outlined" onClick={() => refetchVaultInfo()}>
+          Try Again
+        </Button>
+        {goToAll}
+      </ErrorModalContent>
+    </Modal>
+  );
+};