perf: load withdrawal tx history by priority

packages/arb-token-bridge-ui/src/token-bridge-sdk/utils.ts

@@ -12,6 +12,7 @@ import {
   getArbitrumNetwork
 } from '@arbitrum/sdk'
 import { isDepositMode } from '../util/isDepositMode'
+import { ConnectionInfo } from 'ethers/lib/utils.js'
 
 export const getAddressFromSigner = async (signer: Signer) => {
   const address = await signer.getAddress()
@@ -104,9 +105,32 @@ const getProviderForChainCache: {
   // start with empty cache
 }
 
+const THROTTLE_LIMIT = 10
+
+const connection: Omit<ConnectionInfo, 'url'> = {
+  timeout: 300000,
+  allowGzip: true,
+  skipFetchSetup: true,
+  throttleLimit: THROTTLE_LIMIT,
+  throttleSlotInterval: 3000,
+  throttleCallback: async (attempt: number) => {
+    // Always retry until we hit the THROTTLE_LIMIT
+    // Otherwise, it only throttles for specific response codes
+    // Return true to continue retrying, false to stop
+    return attempt <= THROTTLE_LIMIT
+  },
+  headers: {
+    Accept: '*/*',
+    'Accept-Encoding': 'gzip, deflate, br'
+  }
+}
+
 function createProviderWithCache(chainId: ChainId) {
   const rpcUrl = rpcURLs[chainId]
-  const provider = new StaticJsonRpcProvider(rpcUrl, chainId)
+  const provider = new StaticJsonRpcProvider(
+    { ...connection, url: rpcUrl! },
+    chainId
+  )
   getProviderForChainCache[chainId] = provider
   return provider
 }

packages/arb-token-bridge-ui/src/util/withdrawals/fetchTokenWithdrawalsFromEventLogs.ts

@@ -2,8 +2,6 @@ import { Provider, BlockTag } from '@ethersproject/providers'
 import { Erc20Bridger, EventArgs } from '@arbitrum/sdk'
 import { WithdrawalInitiatedEvent } from '@arbitrum/sdk/dist/lib/abi/L2ArbitrumGateway'
 
-import { getNonce } from '../AddressUtils'
-
 function dedupeEvents(
   events: (EventArgs<WithdrawalInitiatedEvent> & {
     txHash: string
@@ -41,11 +39,9 @@ export async function fetchTokenWithdrawalsFromEventLogs({
   const erc20Bridger = await Erc20Bridger.fromProvider(l2Provider)
   const promises: ReturnType<Erc20Bridger['getWithdrawalEvents']>[] = []
 
-  const senderNonce = await getNonce(sender, { provider: l2Provider })
-
   l2GatewayAddresses.forEach(gatewayAddress => {
     // funds sent by this address
-    if (sender && senderNonce > 0) {
+    if (sender) {
       promises.push(
         erc20Bridger.getWithdrawalEvents(
           l2Provider,

packages/arb-token-bridge-ui/src/util/withdrawals/fetchWithdrawals.ts

@@ -1,4 +1,8 @@
-import { Provider } from '@ethersproject/providers'
+import {
+  BlockTag,
+  Provider,
+  StaticJsonRpcProvider
+} from '@ethersproject/providers'
 
 import { fetchETHWithdrawalsFromEventLogs } from './fetchETHWithdrawalsFromEventLogs'
 
@@ -12,6 +16,9 @@ import { fetchL2Gateways } from '../fetchL2Gateways'
 import { Withdrawal } from '../../hooks/useTransactionHistory'
 import { attachTimestampToTokenWithdrawal } from './helpers'
 import { WithdrawalInitiated } from '../../hooks/arbTokenBridge.types'
+import { Erc20Bridger, getArbitrumNetwork } from '@arbitrum/sdk'
+import { ethers } from 'ethers'
+import { getNonce } from '../AddressUtils'
 
 export type FetchWithdrawalsParams = {
   sender?: string
@@ -25,6 +32,151 @@ export type FetchWithdrawalsParams = {
   searchString?: string
 }
 
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T
+
+type WithdrawalQuery = {
+  params: {
+    sender?: string
+    receiver?: string
+    fromBlock: BlockTag
+    toBlock: BlockTag
+    l2Provider: Provider
+    l2GatewayAddresses?: string[]
+  }
+  priority: number
+}
+
+type Result = UnwrapPromise<ReturnType<Erc20Bridger['getWithdrawalEvents']>>
+
+function wait(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+async function fetchTokenWithdrawalsFromEventLogsSequentially(
+  address: string,
+  provider: Provider,
+  fromBlock: BlockTag
+): Promise<Result> {
+  await wait(2000)
+
+  const network = await getArbitrumNetwork(provider)
+  const senderNonce = await getNonce(address, { provider: provider })
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+  const standardGateway = network.tokenBridge?.childErc20Gateway!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+  const customGateway = network.tokenBridge?.childCustomGateway!
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+  const wethGateway = network.tokenBridge?.childWethGateway!
+
+  let prio = 1
+
+  const queries: WithdrawalQuery[] = []
+
+  if (senderNonce > 0) {
+    queries.push({
+      params: {
+        sender: address,
+        fromBlock,
+        toBlock: 'latest',
+        l2Provider: provider,
+        l2GatewayAddresses: [standardGateway]
+      },
+      priority: prio
+    })
+    prio++
+    if (wethGateway !== ethers.constants.AddressZero) {
+      queries.push({
+        params: {
+          sender: address,
+          fromBlock,
+          toBlock: 'latest',
+          l2Provider: provider,
+          l2GatewayAddresses: [wethGateway]
+        },
+        priority: prio
+      })
+      prio++
+    }
+    queries.push({
+      params: {
+        sender: address,
+        fromBlock,
+        toBlock: 'latest',
+        l2Provider: provider,
+        l2GatewayAddresses: [customGateway]
+      },
+      priority: prio
+    })
+    prio++
+  }
+
+  queries.push({
+    params: {
+      receiver: address,
+      fromBlock,
+      toBlock: 'latest',
+      l2Provider: provider,
+      l2GatewayAddresses: [standardGateway]
+    },
+    priority: prio
+  })
+  prio++
+  if (wethGateway !== ethers.constants.AddressZero) {
+    queries.push({
+      params: {
+        receiver: address,
+        fromBlock,
+        toBlock: 'latest',
+        l2Provider: provider,
+        l2GatewayAddresses: [wethGateway]
+      },
+      priority: prio
+    })
+    prio++
+  }
+  queries.push({
+    params: {
+      receiver: address,
+      fromBlock,
+      toBlock: 'latest',
+      l2Provider: provider,
+      l2GatewayAddresses: [customGateway]
+    },
+    priority: prio
+  })
+  prio++
+
+  const maxPriority = queries.map(query => query.priority).sort()[
+    queries.length - 1
+  ]!
+
+  const result: Result = []
+  let currentPriority = 1
+
+  while (currentPriority <= maxPriority) {
+    const filteredQueries = queries.filter(
+      query => query.priority === currentPriority
+    )
+
+    const results = await Promise.all(
+      filteredQueries.map(query =>
+        fetchTokenWithdrawalsFromEventLogs(query.params)
+      )
+    )
+
+    results.forEach(r => {
+      result.push(...r)
+    })
+
+    await wait(2000)
+
+    currentPriority += 1
+  }
+
+  return result
+}
+
 export async function fetchWithdrawals({
   sender,
   receiver,
@@ -93,14 +245,11 @@ export async function fetchWithdrawals({
         toBlock: 'latest',
         l2Provider: l2Provider
       }),
-      fetchTokenWithdrawalsFromEventLogs({
-        sender,
-        receiver,
-        fromBlock: toBlock + 1,
-        toBlock: 'latest',
-        l2Provider: l2Provider,
-        l2GatewayAddresses
-      })
+      fetchTokenWithdrawalsFromEventLogsSequentially(
+        sender!,
+        l2Provider,
+        toBlock + 1
+      )
     ])
 
   const mappedEthWithdrawalsFromEventLogs: Withdrawal[] =