diff --git a/packages/arb-token-bridge-ui/src/hooks/useDeposits.ts b/packages/arb-token-bridge-ui/src/hooks/useDeposits.ts index 15d479fa4c..5e3fba5c5c 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useDeposits.ts +++ b/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() // 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) diff --git a/packages/arb-token-bridge-ui/src/hooks/useWithdrawals.ts b/packages/arb-token-bridge-ui/src/hooks/useWithdrawals.ts index 10a5e6852a..c10a00edd3 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useWithdrawals.ts +++ b/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() - 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)) { diff --git a/packages/arb-token-bridge-ui/src/state/app/state.ts b/packages/arb-token-bridge-ui/src/state/app/state.ts index 738543d022..0a3d72d717 100644 --- a/packages/arb-token-bridge-ui/src/state/app/state.ts +++ b/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( diff --git a/packages/arb-token-bridge-ui/src/state/app/utils.ts b/packages/arb-token-bridge-ui/src/state/app/utils.ts index 405c689c01..6599107508 100644 --- a/packages/arb-token-bridge-ui/src/state/app/utils.ts +++ b/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