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)

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/index.tsx

@@ -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)