diff --git a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx index 5bea530bcc..e22a46b390 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx @@ -38,7 +38,7 @@ export const MostRecentTransaction = () => { useEffect(() => { const interval = setInterval(() => { setCurrentTime(getTimeMinutesBeforeNow(0)) - }, 60000) + }, 30000) return () => clearInterval(interval) }, []) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index 30192b2a0e..b3e3b11bf0 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -95,41 +95,66 @@ export const PendingTransaction = ({ originChain.blockTime) / 1000 : null - }, [originChain, eventType, originToken]) + }, [originChain, eventType, originToken, bridgeModuleName, transactionHash]) const currentTime: number = Math.floor(Date.now() / 1000) - const elapsedMinutes: number = useMemo(() => { - if (startedTimestamp) { + // Tracks initial elapsed minutes when transaction mounts to populate updatedElapsedTime + const initialElapsedMinutes: number = useMemo(() => { + if (!isSubmitted || currentTime < startedTimestamp) { + return 0 + } else if (startedTimestamp < currentTime) { return Math.floor((currentTime - startedTimestamp) / 60) + } else { + return 0 } - }, [startedTimestamp]) + }, [startedTimestamp, currentTime, isSubmitted, transactionHash]) + + // Holds most updated value for elapsed time to calculate timeRemaining + const [updatedElapsedTime, setUpdatedElapsedTime] = useState( + initialElapsedMinutes + ) - const [elapsedTime, setElapsedTime] = useState(elapsedMinutes ?? 0) + // Ensures we reset elapsed time so unique transactions track elapsed time accurately + useEffect(() => { + if (!initialElapsedMinutes && updatedElapsedTime > initialElapsedMinutes) { + setUpdatedElapsedTime(0) + } + }, [initialElapsedMinutes, updatedElapsedTime]) + // Update elapsed time in set intervals for countdown useEffect(() => { const interval = setInterval(() => { const currentTime: number = Math.floor(Date.now() / 1000) const elapsedMinutes: number = Math.floor( (currentTime - startedTimestamp) / 60 ) - setElapsedTime(elapsedMinutes) - }, 60000) + if (isSubmitted) { + setUpdatedElapsedTime(elapsedMinutes) + } + }, 30000) return () => { clearInterval(interval) } - }, [startedTimestamp, isSubmitted]) + }, [startedTimestamp, isSubmitted, transactionHash]) - const estimatedMinutes: number = Math.floor(estimatedCompletionInSeconds / 60) + const estimatedCompletionInMinutes: number = Math.floor( + estimatedCompletionInSeconds / 60 + ) const timeRemaining: number = useMemo(() => { - if (!startedTimestamp || !elapsedTime) { - return estimatedMinutes + if (!startedTimestamp || !updatedElapsedTime) { + return estimatedCompletionInMinutes } else { - return estimatedMinutes - elapsedTime + return estimatedCompletionInMinutes - updatedElapsedTime } - }, [estimatedMinutes, elapsedTime, startedTimestamp]) + }, [ + estimatedCompletionInMinutes, + initialElapsedMinutes, + updatedElapsedTime, + startedTimestamp, + ]) const isDelayed: boolean = useMemo(() => timeRemaining < 0, [timeRemaining]) @@ -172,29 +197,49 @@ export const PendingTransaction = ({ useEffect(() => { if (!isSubmitted && transactionHash) { + const maxRetries = 3 + const retryDelay = 5000 + let attempt = 0 + const updateResolvedTransaction = async () => { - const resolvedTransaction = await waitForTransaction({ - hash: transactionHash as Address, - }).catch((error) => { + try { + const resolvedTransaction = await waitForTransaction({ + hash: transactionHash as Address, + }) + + if (resolvedTransaction) { + const currentTimestamp: number = getTimeMinutesFromNow(0) + const updatedTransaction = { + id: startedTimestamp, + timestamp: currentTimestamp, + transactionHash: transactionHash, + isSubmitted: true, + } + + console.log('resolved transaction:', resolvedTransaction) + dispatch(updatePendingBridgeTransaction(updatedTransaction)) + } + } catch (error) { console.error('resolving transaction failed: ', error) - dispatch(removePendingBridgeTransaction(startedTimestamp)) - }) - - if (resolvedTransaction) { - const currentTimestamp: number = getTimeMinutesFromNow(0) - const updatedTransaction = { - id: startedTimestamp, - timestamp: currentTimestamp, - transactionHash: transactionHash, - isSubmitted: true, + if (attempt < maxRetries) { + attempt++ + console.log(`Retrying (${attempt}/${maxRetries})...`) + setTimeout(updateResolvedTransaction, retryDelay) } - - dispatch(updatePendingBridgeTransaction(updatedTransaction)) } } + updateResolvedTransaction() } - }, [startedTimestamp, isSubmitted, transactionHash]) + }, [ + startedTimestamp, + isSubmitted, + transactionHash, + dispatch, + updatePendingBridgeTransaction, + getTimeMinutesFromNow, + updatedElapsedTime, + ]) useEffect(() => { const currentTimestamp: number = getTimeMinutesFromNow(0) @@ -223,7 +268,9 @@ export const PendingTransaction = ({ completedTimestamp={completedTimestamp} transactionType={TransactionType.PENDING} estimatedDuration={estimatedCompletionInSeconds} - timeRemaining={timeRemaining} + timeRemaining={ + isSubmitted ? timeRemaining : estimatedCompletionInMinutes + } transactionStatus={transactionStatus} isCompleted={isCompleted} kappa={kappa}