fix: show error for malformed accounts (#772)

Let the user know when they directly hit the account page with a malformed account address. ### Context of Change This was broken when the AMM account support was added
ripple · Jul 6, 2023 · 5665e15 · 5665e15
1 parent 99abfad
commit 5665e15
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/src/containers/Accounts/AccountsRouter.tsx b/src/containers/Accounts/AccountsRouter.tsx
@@ -1,15 +1,20 @@
 import { useContext } from 'react'
 import { useParams } from 'react-router'
 import { useQuery } from 'react-query'
-import { isValidXAddress, xAddressToClassicAddress } from 'ripple-address-codec'
+import {
+  isValidClassicAddress,
+  isValidXAddress,
+  xAddressToClassicAddress,
+} from 'ripple-address-codec'
 import { AMMAccounts } from './AMM/AMMAccounts'
 import SocketContext from '../shared/SocketContext'
 import { getAccountInfo } from '../../rippled/lib/rippled'
 import NoMatch from '../NoMatch'
 import { Accounts } from './index'
 import { ERROR_MESSAGES } from './Errors'
 import { Loader } from '../shared/components/Loader'
-import { ACCOUNT_FLAGS } from '../../rippled/lib/utils'
+import { ACCOUNT_FLAGS, Error } from '../../rippled/lib/utils'
+import { BAD_REQUEST } from '../shared/utils'
 
 const getErrorMessage = (error: any) =>
   ERROR_MESSAGES[error] || ERROR_MESSAGES.default
@@ -37,6 +42,10 @@ export const AccountsRouter = () => {
       classicAddress = xAddressToClassicAddress(accountId).classicAddress
     }
 
+    if (!isValidClassicAddress(classicAddress)) {
+      return Promise.reject(new Error('account malformed', BAD_REQUEST))
+    }
+
     return (
       getAccountInfo(rippledSocket, classicAddress)
         .then((data: any) => {
@@ -46,7 +55,13 @@ export const AccountsRouter = () => {
           return <Accounts />
         })
         // Even if account info fails it might be a deleted account
-        .catch(() => <Accounts />)
+        .catch((responseError: Error) => {
+          if (responseError?.code === 404) {
+            return <Accounts />
+          }
+
+          return Promise.reject(responseError)
+        })
     )
   })
 

diff --git a/src/containers/App/test/App.test.jsx b/src/containers/App/test/App.test.jsx
@@ -267,16 +267,16 @@ describe('App container', () => {
   })
 
   it('renders account page for classic address', () => {
-    const id = 'rZaChweF5oXn'
+    const id = 'rKV8HEL3vLc6q9waTiJcewdRdSFyx67QFb'
     const wrapper = createWrapper(`/accounts/${id}#ssss`)
     flushPromises()
     flushPromises()
     return new Promise((r) => setTimeout(r, 200)).then(() => {
-      expect(document.title).toEqual(`xrpl_explorer | ${id}...`)
+      expect(document.title).toEqual(`xrpl_explorer | rKV8HEL3vLc6...`)
       expect(window.dataLayer).toEqual([
         {
-          page_path: '/accounts/rZaChweF5oXn#ssss',
-          page_title: 'xrpl_explorer | rZaChweF5oXn...',
+          page_path: '/accounts/rKV8HEL3vLc6q9waTiJcewdRdSFyx67QFb#ssss',
+          page_title: 'xrpl_explorer | rKV8HEL3vLc6...',
           event: 'screen_view',
           network: 'mainnet',
         },
@@ -285,6 +285,26 @@ describe('App container', () => {
     })
   })
 
+  it('renders account page for malformed', async () => {
+    const id = 'rZaChweF5oXn'
+    const wrapper = createWrapper(`/accounts/${id}#ssss`)
+    await flushPromises()
+    await flushPromises()
+    wrapper.update()
+    expect(document.title).toEqual(`xrpl_explorer | invalid_xrpl_address`)
+    expect(window.dataLayer).toEqual([
+      {
+        page_path: '/accounts/rZaChweF5oXn#ssss',
+        description: 'invalid_xrpl_address -- check_account_id',
+        event: 'not_found',
+        network: 'mainnet',
+      },
+    ])
+    expect(wrapper.find('.no-match .title')).toHaveText('invalid_xrpl_address')
+    expect(wrapper.find('.no-match .hint')).toHaveText('check_account_id')
+    wrapper.unmount()
+  })
+
   it('renders account page for a deleted account', () => {
     const id = 'r35jYntLwkrbc3edisgavDbEdNRSKgcQE6'
     const wrapper = createWrapper(`/accounts/${id}#ssss`, [], () =>
@@ -373,14 +393,14 @@ describe('App container', () => {
   })
 
   it('redirects legacy account page', () => {
-    const id = 'rZaChweF5oXn'
+    const id = 'rKV8HEL3vLc6q9waTiJcewdRdSFyx67QFb'
     const wrapper = createWrapper(`/#/graph/${id}#ssss`)
     return new Promise((r) => setTimeout(r, 200)).then(() => {
-      expect(document.title).toEqual(`xrpl_explorer | ${id}...`)
+      expect(document.title).toEqual(`xrpl_explorer | rKV8HEL3vLc6...`)
       expect(window.dataLayer).toEqual([
         {
-          page_path: '/accounts/rZaChweF5oXn#ssss',
-          page_title: 'xrpl_explorer | rZaChweF5oXn...',
+          page_path: '/accounts/rKV8HEL3vLc6q9waTiJcewdRdSFyx67QFb#ssss',
+          page_title: 'xrpl_explorer | rKV8HEL3vLc6...',
           event: 'screen_view',
           network: 'mainnet',
         },