fix: handling of token page throttling (#1100)

The token page is prone to being throttled because it tries to load in
order books for the "top 10 tokens". This change moves logic to useQuery
and out of redux. It then makes sure the token's information is loaded
in before trying to load in dex pairs.

Fixes #790

### Type of Change

<!--
Please check relevant options, delete irrelevant ones.
-->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [x] Refactor (non-breaking change that only restructures code)
- [x] Tests (You added tests for code that already exists, or your new
feature included in this PR)
- [ ] Documentation Updates
- [ ] Translation Updates
- [ ] Release

### TypeScript/Hooks Update

- [ ] Updated files to React Hooks
- [x] Updated files to TypeScript

## Before / After

### Before
![Monosnap XRPL Explorer | Something bad happened 2024-12-17
14-04-17](https://github.com/user-attachments/assets/27ea108e-59ec-4318-9da3-60ec68c3c38c)

### After
![Monosnap XRPL Explorer | rMxCKbEDwqr7 2024-12-17
14-04-24](https://github.com/user-attachments/assets/7cc2d0d3-d686-408d-a5d2-d3c1c2f8880f)

Author: ckniffen

src/containers/App/index.tsx

@@ -34,7 +34,7 @@ import { Transaction } from '../Transactions'
 import { Network } from '../Network'
 import { Validator } from '../Validators'
 import { PayString } from '../PayStrings'
-import Token from '../Token'
+import { Token } from '../Token'
 import { NFT } from '../NFT/NFT'
 import { legacyRedirect } from './legacyRedirects'
 import { useCustomNetworks } from '../shared/hooks'

src/containers/Token/TokenHeader/actionTypes.js

@@ -1,19 +1,14 @@
-import { useContext, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { loadTokenState } from './actions'
-import { Loader } from '../../shared/components/Loader'
 import './styles.scss'
 import { localizeNumber, formatLargeNumber } from '../../shared/utils'
-import SocketContext from '../../shared/SocketContext'
 import Currency from '../../shared/components/Currency'
 import { Account } from '../../shared/components/Account'
 import DomainLink from '../../shared/components/DomainLink'
 import { TokenTableRow } from '../../shared/components/TokenTableRow'
 import { useLanguage } from '../../shared/hooks'
 import { LEDGER_ROUTE, TRANSACTION_ROUTE } from '../../App/routes'
 import { RouteLink } from '../../shared/routing'
+import { TokenData } from '../../../rippled/token'
 
 const CURRENCY_OPTIONS = {
   style: 'currency',
@@ -23,44 +18,21 @@ const CURRENCY_OPTIONS = {
 }
 
 interface TokenHeaderProps {
-  loading: boolean
   accountId: string
   currency: string
-  data: {
-    balance: string
-    reserve: number
-    sequence: number
-    rate: number
-    obligations: string
-    domain: string
-    emailHash: string
-    previousLedger: number
-    previousTxn: string
-    flags: string[]
-  }
-  actions: {
-    loadTokenState: typeof loadTokenState
-  }
+  data: TokenData
 }
 
-const TokenHeader = ({
-  actions,
+export const TokenHeader = ({
   accountId,
   currency,
   data,
-  loading,
 }: TokenHeaderProps) => {
   const language = useLanguage()
   const { t } = useTranslation()
-  const rippledSocket = useContext(SocketContext)
-
-  useEffect(() => {
-    actions.loadTokenState(currency, accountId, rippledSocket)
-  }, [accountId, actions, currency, rippledSocket])
+  const { domain, rate, emailHash, previousLedger, previousTxn } = data
 
   const renderDetails = () => {
-    const { domain, rate, emailHash, previousLedger, previousTxn } = data
-
     const prevTxn = previousTxn && previousTxn.replace(/(.{20})..+/, '$1...')
     const abbrvEmail = emailHash && emailHash.replace(/(.{20})..+/, '$1...')
     return (
@@ -156,7 +128,9 @@ const TokenHeader = ({
       language,
       CURRENCY_OPTIONS,
     )
-    const obligationsBalance = formatLargeNumber(Number.parseFloat(obligations))
+    const obligationsBalance = formatLargeNumber(
+      Number.parseFloat(obligations || '0'),
+    )
 
     return (
       <div className="section header-container">
@@ -201,7 +175,6 @@ const TokenHeader = ({
     )
   }
 
-  const { emailHash } = data
   return (
     <div className="box token-header">
       <div className="section box-header">
@@ -213,24 +186,7 @@ const TokenHeader = ({
           />
         )}
       </div>
-      <div className="box-content">
-        {loading ? <Loader /> : renderHeaderContent()}
-      </div>
+      <div className="box-content">{renderHeaderContent()}</div>
     </div>
   )
 }
-
-export default connect(
-  (state: any) => ({
-    loading: state.tokenHeader.loading,
-    data: state.tokenHeader.data,
-  }),
-  (dispatch) => ({
-    actions: bindActionCreators(
-      {
-        loadTokenState,
-      },
-      dispatch,
-    ),
-  }),
-)(TokenHeader)

src/containers/Token/TokenHeader/actions.js

@@ -1,9 +1,9 @@
-import { FC, PropsWithChildren, useEffect } from 'react'
+import { FC, PropsWithChildren, useContext, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { connect } from 'react-redux'
 
 import { Helmet } from 'react-helmet-async'
-import TokenHeader from './TokenHeader'
+import { useQuery } from 'react-query'
+import { TokenHeader } from './TokenHeader'
 import { TokenTransactionTable } from './TokenTransactionTable'
 import { DEXPairs } from './DEXPairs'
 import NoMatch from '../NoMatch'
@@ -14,6 +14,9 @@ import { useAnalytics } from '../shared/analytics'
 import { ErrorMessages } from '../shared/Interfaces'
 import { TOKEN_ROUTE } from '../App/routes'
 import { useRouteParams } from '../shared/routing'
+import { getToken } from '../../rippled'
+import SocketContext from '../shared/SocketContext'
+import { Loader } from '../shared/components/Loader'
 
 const IS_MAINNET = process.env.VITE_ENVIRONMENT === 'mainnet'
 
@@ -45,11 +48,20 @@ const Page: FC<PropsWithChildren<{ accountId: string }>> = ({
   </div>
 )
 
-const Token: FC<{ error: string }> = ({ error }) => {
+export const Token = () => {
+  const rippledSocket = useContext(SocketContext)
   const { trackScreenLoaded } = useAnalytics()
   const { token = '' } = useRouteParams(TOKEN_ROUTE)
   const [currency, accountId] = token.split('.')
   const { t } = useTranslation()
+  const {
+    data: tokenData,
+    error: tokenDataError,
+    isLoading: isTokenDataLoading,
+  } = useQuery({
+    queryKey: ['token', currency, accountId],
+    queryFn: () => getToken(currency, accountId, rippledSocket),
+  })
 
   useEffect(() => {
     trackScreenLoaded({
@@ -63,21 +75,31 @@ const Token: FC<{ error: string }> = ({ error }) => {
   }, [accountId, currency, trackScreenLoaded])
 
   const renderError = () => {
-    const message = getErrorMessage(error)
+    const message = getErrorMessage(tokenDataError)
     return <NoMatch title={message.title} hints={message.hints} />
   }
 
-  if (error) {
+  if (tokenDataError) {
     return <Page accountId={accountId}>{renderError()}</Page>
   }
 
   return (
     <Page accountId={accountId}>
-      {accountId && <TokenHeader accountId={accountId} currency={currency} />}
-      {accountId && IS_MAINNET && (
+      {isTokenDataLoading ? (
+        <Loader />
+      ) : (
+        tokenData && (
+          <TokenHeader
+            accountId={accountId}
+            currency={currency}
+            data={tokenData}
+          />
+        )
+      )}
+      {accountId && tokenData && IS_MAINNET && (
         <DEXPairs accountId={accountId} currency={currency} />
       )}
-      {accountId && (
+      {accountId && tokenData && (
         <div className="section">
           <h2>{t('token_transactions')}</h2>
           <TokenTransactionTable accountId={accountId} currency={currency} />
@@ -91,7 +113,3 @@ const Token: FC<{ error: string }> = ({ error }) => {
     </Page>
   )
 }
-
-export default connect((state: any) => ({
-  error: state.accountHeader.status,
-}))(Token)

src/containers/Token/TokenHeader/index.tsx

@@ -1,33 +1,32 @@
 import { mount } from 'enzyme'
-import configureMockStore from 'redux-mock-store'
-import thunk from 'redux-thunk'
-import { Provider } from 'react-redux'
 import { Route } from 'react-router-dom'
-import { initialState } from '../../../rootReducer'
 import i18n from '../../../i18n/testConfig'
-import Token from '../index'
-import TokenHeader from '../TokenHeader'
+import { Token } from '../index'
+import { TokenHeader } from '../TokenHeader'
 import { TokenTransactionTable } from '../TokenTransactionTable'
-import mockAccountState from '../../Accounts/test/mockAccountState.json'
-import { QuickHarness } from '../../test/utils'
+import { flushPromises, QuickHarness } from '../../test/utils'
 import { TOKEN_ROUTE } from '../../App/routes'
+import mockAccount from '../../Accounts/test/mockAccountState.json'
+import Mock = jest.Mock
+import { getToken } from '../../../rippled'
+
+jest.mock('../../../rippled', () => ({
+  __esModule: true,
+  getToken: jest.fn(),
+}))
 
 describe('Token container', () => {
   const TEST_ACCOUNT_ID = 'rTEST_ACCOUNT'
 
-  const middlewares = [thunk]
-  const mockStore = configureMockStore(middlewares)
-  const createWrapper = (state = {}) => {
-    const store = mockStore({ ...initialState, ...state })
+  const createWrapper = (getAccountImpl = () => new Promise(() => {})) => {
+    ;(getToken as Mock).mockImplementation(getAccountImpl)
     return mount(
-      <Provider store={store}>
-        <QuickHarness
-          i18n={i18n}
-          initialEntries={[`/token/USD.${TEST_ACCOUNT_ID}`]}
-        >
-          <Route path={TOKEN_ROUTE.path} element={<Token />} />
-        </QuickHarness>
-      </Provider>,
+      <QuickHarness
+        i18n={i18n}
+        initialEntries={[`/token/USD.${TEST_ACCOUNT_ID}`]}
+      >
+        <Route path={TOKEN_ROUTE.path} element={<Token />} />
+      </QuickHarness>,
     )
   }
 
@@ -36,17 +35,10 @@ describe('Token container', () => {
     wrapper.unmount()
   })
 
-  it('renders static parts', () => {
-    const state = {
-      ...initialState,
-      accountHeader: {
-        loading: false,
-        error: null,
-        data: mockAccountState,
-      },
-    }
-
-    const wrapper = createWrapper(state)
+  it('renders static parts', async () => {
+    const wrapper = createWrapper(() => Promise.resolve(mockAccount))
+    await flushPromises()
+    wrapper.update()
     expect(wrapper.find(TokenHeader).length).toBe(1)
     expect(wrapper.find(TokenTransactionTable).length).toBe(1)
     wrapper.unmount()

src/containers/Token/TokenHeader/reducer.js

@@ -4,7 +4,26 @@ import { getBalances, getAccountInfo, getServerInfo } from './lib/rippled'
 
 const log = logger({ name: 'iou' })
 
-const getToken = async (currencyCode, issuer, rippledSocket) => {
+export interface TokenData {
+  name: string
+  balance: string
+  reserve: number
+  sequence: number
+  gravatar: string
+  rate?: number
+  obligations?: string
+  domain?: string
+  emailHash?: string
+  previousLedger: number
+  previousTxn: string
+  flags: string[]
+}
+
+const getToken = async (
+  currencyCode,
+  issuer,
+  rippledSocket,
+): Promise<TokenData> => {
   try {
     log.info('fetching account info from rippled')
     const accountInfo = await getAccountInfo(rippledSocket, issuer)
@@ -47,7 +66,9 @@ const getToken = async (currencyCode, issuer, rippledSocket) => {
       previousLedger,
     }
   } catch (error) {
-    log.error(error.toString())
+    if (error) {
+      log.error(error.toString())
+    }
     throw error
   }
 }

src/containers/Token/TokenHeader/test/actions.test.js

@@ -2,18 +2,13 @@ import { combineReducers } from 'redux'
 import accountHeaderReducer, {
   initialState as accountHeaderState,
 } from './containers/Accounts/AccountHeader/reducer'
-import tokenHeaderReducer, {
-  initialState as tokenHeaderState,
-} from './containers/Token/TokenHeader/reducer'
 
 export const initialState = {
   accountHeader: accountHeaderState,
-  tokenHeader: tokenHeaderState,
 }
 
 const rootReducer = combineReducers({
   accountHeader: accountHeaderReducer,
-  tokenHeader: tokenHeaderReducer,
 })
 
 export default rootReducer