Move route address validation from AccountPage into routes

src/app/components/ErrorBoundary/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom'
+import { ErrorPayload, WalletError, WalletErrors } from 'types/errors'
+import { Box } from 'grommet'
+import { AlertBox } from 'app/components/AlertBox'
+import { ErrorFormatter } from 'app/components/ErrorFormatter'
+
+export function ErrorBoundary() {
+  const error = useRouteError()
+
+  let errorPayload: ErrorPayload
+  if (isRouteErrorResponse(error)) {
+    errorPayload = { code: WalletErrors.UnknownError, message: error.statusText }
+  } else if (error instanceof WalletError) {
+    errorPayload = { code: error.type, message: error.message }
+  } else if (error instanceof Error) {
+    errorPayload = { code: WalletErrors.UnknownError, message: error.message }
+  } else {
+    errorPayload = { code: WalletErrors.UnknownError, message: error as string }
+  }
+
+  return (
+    <Box pad={'small'}>
+      <AlertBox color="status-error">
+        <ErrorFormatter code={errorPayload.code} message={errorPayload.message} />
+      </AlertBox>
+    </Box>
+  )
+}

src/app/pages/AccountPage/index.tsx

@@ -32,6 +32,7 @@ import {
 import { mobileHeaderZIndex } from '../../components/Sidebar'
 import { AccountSummary } from './Features/AccountSummary'
 import { isValidAddress } from '../../lib/helpers'
+import { WalletError, WalletErrors } from 'types/errors'
 
 const StyledNavItem = styled(NavLink)`
   display: flex;
@@ -87,7 +88,7 @@ interface AccountPageParams {
   address: string
 }
 
-function AccountPageInternal(props: AccountPageProps) {
+export function AccountPage(props: AccountPageProps) {
   const { t } = useTranslation()
   const isMobile = React.useContext(ResponsiveContext) === 'small'
   const { address } = useParams<keyof AccountPageParams>()
@@ -210,15 +211,8 @@ function AccountPageInternal(props: AccountPageProps) {
   )
 }
 
-export function AccountPage(props: AccountPageProps) {
-  const { t } = useTranslation()
-  const { address } = useParams<keyof AccountPageParams>()
-  if (!isValidAddress(address!)) {
-    return (
-      <Box pad={'small'}>
-        <AlertBox color={'status-error'}>{t('errors.invalidAddress', 'Invalid address')}</AlertBox>
-      </Box>
-    )
+export async function validateRoute(params: AccountPageParams) {
+  if (!isValidAddress(params.address!)) {
+    throw new WalletError(WalletErrors.InvalidAddress, 'Invalid address')
   }
-  return <AccountPageInternal {...props} />
 }

src/commonRoutes.tsx

@@ -5,12 +5,13 @@ import { HomePage } from 'app/pages/HomePage'
 import { FromLedger } from 'app/pages/OpenWalletPage/Features/FromLedger'
 import { FromMnemonic } from 'app/pages/OpenWalletPage/Features/FromMnemonic'
 import { FromPrivateKey } from 'app/pages/OpenWalletPage/Features/FromPrivateKey'
-import { AccountPage } from 'app/pages/AccountPage'
+import { AccountPage, validateRoute } from 'app/pages/AccountPage'
 import { AccountDetails } from 'app/pages/AccountPage/Features/AccountDetails'
 import { ValidatorList } from 'app/pages/StakingPage/Features/ValidatorList'
 import { ActiveDelegationList } from 'app/pages/StakingPage/Features/DelegationList/ActiveDelegationList'
 import { DebondingDelegationList } from 'app/pages/StakingPage/Features/DelegationList/DebondingDelegationList'
 import { ParaTimes } from 'app/pages/ParaTimesPage'
+import { ErrorBoundary } from 'app/components/ErrorBoundary'
 
 export const commonRoutes: RouteObject[] = [
   {
@@ -24,6 +25,10 @@ export const commonRoutes: RouteObject[] = [
   {
     path: 'account/:address/*',
     element: <AccountPage />,
+    errorElement: <ErrorBoundary></ErrorBoundary>,
+    loader: async ({ params }) => {
+      await validateRoute(params as any)
+    },
     children: [
       {
         path: '',