refactor: transform single tx instead of array

packages/arb-token-bridge-ui/src/hooks/useDeposits.ts

@@ -4,7 +4,7 @@ import { useAccount, useChainId } from 'wagmi'
 
 import { PageParams } from '../components/TransactionHistory/TransactionsTable/TransactionsTable'
 import { MergedTransaction } from '../state/app/state'
-import { isPending, transformDeposits } from '../state/app/utils'
+import { isPending, transformDeposit } from '../state/app/utils'
 import {
   FetchDepositParams,
   fetchDeposits
@@ -31,7 +31,7 @@ export const fetchCompleteDepositData = async (
   // filter out pending deposits
   const pendingDepositsMap = new Map<string, boolean>()
   // get their complete transformed data (so that we get their exact status)
-  const completeDepositData = transformDeposits(deposits)
+  const completeDepositData = deposits.map(transformDeposit)
   completeDepositData.forEach(completeTxData => {
     if (isPending(completeTxData)) {
       pendingDepositsMap.set(completeTxData.txId, true)

packages/arb-token-bridge-ui/src/hooks/useWithdrawals.ts

@@ -4,7 +4,7 @@ import { useAccount, useChainId } from 'wagmi'
 
 import { PageParams } from '../components/TransactionHistory/TransactionsTable/TransactionsTable'
 import { MergedTransaction } from '../state/app/state'
-import { isPending, transformWithdrawals } from '../state/app/utils'
+import { isPending, transformWithdrawal } from '../state/app/utils'
 import {
   FetchWithdrawalsParams,
   fetchWithdrawals
@@ -31,9 +31,9 @@ const fetchCompleteWithdrawalData = async (
 
   // filter out pending withdrawals
   const pendingWithdrawalMap = new Map<string, boolean>()
-  const completeWithdrawalData = transformWithdrawals(
-    withdrawals.sort((msgA, msgB) => +msgB.timestamp - +msgA.timestamp)
-  )
+  const completeWithdrawalData = withdrawals
+    .sort((msgA, msgB) => +msgB.timestamp - +msgA.timestamp)
+    .map(transformWithdrawal)
 
   completeWithdrawalData.forEach(completeTxData => {
     if (isPending(completeTxData)) {

packages/arb-token-bridge-ui/src/state/app/state.ts

@@ -11,8 +11,8 @@ import dayjs from 'dayjs'
 
 import {
   filterTransactions,
-  transformDeposits,
-  transformWithdrawals
+  transformDeposit,
+  transformWithdrawal
 } from './utils'
 
 import {
@@ -150,19 +150,19 @@ export const defaultState: AppState = {
     )
   }),
   depositsTransformed: derived((s: AppState) => {
-    return transformDeposits(
-      s.sortedTransactions.filter(
+    return s.sortedTransactions
+      .filter(
         // only take the deposit transactions, rest `outbox`, `approve` etc should not come
         tx => tx.type === 'deposit' || tx.type === 'deposit-l1'
       )
-    )
+      .map(transformDeposit)
   }),
   withdrawalsTransformed: derived((s: AppState) => {
     const withdrawals = Object.values(
       s.arbTokenBridge?.pendingWithdrawalsMap || []
     ) as L2ToL1EventResultPlus[]
 
-    return transformWithdrawals(withdrawals)
+    return withdrawals.map(transformWithdrawal)
   }),
   mergedTransactions: derived((s: AppState) => {
     return _reverse(

packages/arb-token-bridge-ui/src/state/app/utils.ts

@@ -54,70 +54,64 @@ export const getDepositStatus = (tx: Transaction) => {
   }
 }
 
-export const transformDeposits = (
-  deposits: Transaction[]
-): MergedTransaction[] => {
-  return deposits.map(tx => {
-    return {
-      sender: tx.sender,
-      destination: tx.destination,
-      direction: tx.type,
-      status: tx.status,
-      createdAt: tx.timestampCreated
-        ? getStandardizedTimestamp(tx.timestampCreated)
-        : null,
-      resolvedAt: tx.timestampResolved
-        ? getStandardizedTimestamp(tx.timestampResolved)
-        : null,
-      txId: tx.txID,
-      asset: tx.assetName || '',
-      assetType: tx.assetType,
-      value: tx.value,
-      uniqueId: null, // not needed
-      isWithdrawal: false,
-      blockNum: tx.blockNumber || null,
-      tokenAddress: tx.tokenAddress || null,
-      l1ToL2MsgData: tx.l1ToL2MsgData,
-      l2ToL1MsgData: tx.l2ToL1MsgData,
-      depositStatus: getDepositStatus(tx),
-      chainId: Number(tx.l2NetworkID),
-      parentChainId: Number(tx.l1NetworkID)
-    }
-  })
+export const transformDeposit = (tx: Transaction): MergedTransaction => {
+  return {
+    sender: tx.sender,
+    destination: tx.destination,
+    direction: tx.type,
+    status: tx.status,
+    createdAt: tx.timestampCreated
+      ? getStandardizedTimestamp(tx.timestampCreated)
+      : null,
+    resolvedAt: tx.timestampResolved
+      ? getStandardizedTimestamp(tx.timestampResolved)
+      : null,
+    txId: tx.txID,
+    asset: tx.assetName || '',
+    assetType: tx.assetType,
+    value: tx.value,
+    uniqueId: null, // not needed
+    isWithdrawal: false,
+    blockNum: tx.blockNumber || null,
+    tokenAddress: tx.tokenAddress || null,
+    l1ToL2MsgData: tx.l1ToL2MsgData,
+    l2ToL1MsgData: tx.l2ToL1MsgData,
+    depositStatus: getDepositStatus(tx),
+    chainId: Number(tx.l2NetworkID),
+    parentChainId: Number(tx.l1NetworkID)
+  }
 }
 
-export const transformWithdrawals = (
-  withdrawals: L2ToL1EventResultPlus[]
-): MergedTransaction[] => {
-  return withdrawals.map(tx => {
-    const uniqueIdOrHash = getUniqueIdOrHashFromEvent(tx)
-
-    return {
-      sender: tx.sender,
-      destination: tx.destinationAddress,
-      direction: 'outbox',
-      status:
-        tx.nodeBlockDeadline ===
-        NodeBlockDeadlineStatusTypes.EXECUTE_CALL_EXCEPTION
-          ? 'Failure'
-          : outgoingStateToString[tx.outgoingMessageState],
-      createdAt: getStandardizedTimestamp(
-        String(BigNumber.from(tx.timestamp).toNumber() * 1000)
-      ),
-      resolvedAt: null,
-      txId: tx.l2TxHash || 'l2-tx-hash-not-found',
-      asset: tx.symbol || '',
-      assetType: tx.type,
-      value: ethers.utils.formatUnits(tx.value?.toString(), tx.decimals),
-      uniqueId: uniqueIdOrHash,
-      isWithdrawal: true,
-      blockNum: tx.ethBlockNum.toNumber(),
-      tokenAddress: tx.tokenAddress || null,
-      nodeBlockDeadline: tx.nodeBlockDeadline,
-      chainId: tx.chainId,
-      parentChainId: tx.parentChainId
-    }
-  })
+export const transformWithdrawal = (
+  tx: L2ToL1EventResultPlus
+): MergedTransaction => {
+  const uniqueIdOrHash = getUniqueIdOrHashFromEvent(tx)
+
+  return {
+    sender: tx.sender,
+    destination: tx.destinationAddress,
+    direction: 'outbox',
+    status:
+      tx.nodeBlockDeadline ===
+      NodeBlockDeadlineStatusTypes.EXECUTE_CALL_EXCEPTION
+        ? 'Failure'
+        : outgoingStateToString[tx.outgoingMessageState],
+    createdAt: getStandardizedTimestamp(
+      String(BigNumber.from(tx.timestamp).toNumber() * 1000)
+    ),
+    resolvedAt: null,
+    txId: tx.l2TxHash || 'l2-tx-hash-not-found',
+    asset: tx.symbol || '',
+    assetType: tx.type,
+    value: ethers.utils.formatUnits(tx.value?.toString(), tx.decimals),
+    uniqueId: uniqueIdOrHash,
+    isWithdrawal: true,
+    blockNum: tx.ethBlockNum.toNumber(),
+    tokenAddress: tx.tokenAddress || null,
+    nodeBlockDeadline: tx.nodeBlockDeadline,
+    chainId: tx.chainId,
+    parentChainId: tx.parentChainId
+  }
 }
 
 // filter the transactions based on current wallet address and network ID's
@@ -234,9 +228,9 @@ export const findMatchingL1TxForWithdrawal = (
   const cachedTransactions: Transaction[] = JSON.parse(
     window.localStorage.getItem('arbTransactions') || '[]'
   )
-  const outboxTransactions = transformDeposits(
-    cachedTransactions.filter(tx => tx.type === 'outbox')
-  )
+  const outboxTransactions = cachedTransactions
+    .filter(tx => tx.type === 'outbox')
+    .map(transformDeposit)
 
   return outboxTransactions.find(_tx => {
     const l2ToL1MsgData = _tx.l2ToL1MsgData