fix: handling of token page throttling

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

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

@@ -169,7 +169,9 @@ export const DEXPairs = ({ accountId, currency }: DexPairsProps) => {
         <table>
           <thead>
             <tr>
-              <th className="pair-header">{t('pair')}</th>
+              <th className="pair-header" className="left-align">
+                {t('pair')}
+              </th>
               <th>{t('issuer')}</th>
               <th className="stats-header">{t('offer_range')}</th>
             </tr>

src/containers/Token/TokenHeader/index.tsx

@@ -1,19 +1,15 @@
-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 +19,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 +129,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 +176,6 @@ const TokenHeader = ({
     )
   }
 
-  const { emailHash } = data
   return (
     <div className="box token-header">
       <div className="section box-header">
@@ -213,24 +187,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)