From 4795474dd02e99e0dc49716f7131e09a325c5a1d Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Mon, 6 Nov 2023 17:09:18 -0800 Subject: [PATCH 01/10] Ensure `PendingTransaction` cis consistent across `PendingBridgeTransaction` and `BridgeTransaction` where estimated duration matches up --- .../Portfolio/Transaction/MostRecentTransaction.tsx | 6 ++++++ .../Portfolio/Transaction/PendingTransaction.tsx | 8 ++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx index 5bea530bcc..408a8b130a 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx @@ -135,6 +135,9 @@ export const MostRecentTransaction = () => { let transaction + // console.log('lastPendingBridgeTransaction:', lastPendingBridgeTransaction) + // console.log('lastPendingTransaction:', lastPendingTransaction) + return useMemo(() => { if ( isUserHistoricalTransactionsLoading || @@ -145,6 +148,8 @@ export const MostRecentTransaction = () => { if (!masqueradeActive && lastPendingBridgeTransaction) { transaction = lastPendingBridgeTransaction as PendingBridgeTransaction + + console.log('lastPendingBridgeTransaction:', lastPendingBridgeTransaction) return (
{ if (!masqueradeActive && lastPendingTransaction) { transaction = lastPendingTransaction as BridgeTransaction + console.log('lastPendingTransaction:', lastPendingTransaction) return (
{ - if (startedTimestamp) { + if (currentTime < startedTimestamp) { + return 0 + } else if (startedTimestamp > currentTime) { return Math.floor((currentTime - startedTimestamp) / 60) + } else { + return 0 } - }, [startedTimestamp]) + }, [startedTimestamp, currentTime]) const [elapsedTime, setElapsedTime] = useState(elapsedMinutes ?? 0) From d425e89662b10075c512bb39dbecd6b680d78196 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Mon, 6 Nov 2023 17:32:50 -0800 Subject: [PATCH 02/10] PendingTransaction timer to not start until isSubmitted --- .../Transaction/MostRecentTransaction.tsx | 2 +- .../Transaction/PendingTransaction.tsx | 21 +++++++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx index 408a8b130a..7c76c6e061 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx @@ -257,7 +257,7 @@ export const MostRecentTransaction = () => { } }, [ currentTime, - lastPendingBridgeTransaction, + lastPendingBridgeTransaction?.id, lastHistoricalTransaction, lastPendingTransaction, masqueradeActive, diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index ee2bb7622a..992cf1a34e 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -100,24 +100,37 @@ export const PendingTransaction = ({ const currentTime: number = Math.floor(Date.now() / 1000) const elapsedMinutes: number = useMemo(() => { - if (currentTime < startedTimestamp) { + if (!isSubmitted) { return 0 - } else if (startedTimestamp > currentTime) { + } else if (currentTime < startedTimestamp) { + console.log('1') + return 0 + } else if (startedTimestamp < currentTime) { + console.log('currentTime:', currentTime) + console.log('2') return Math.floor((currentTime - startedTimestamp) / 60) } else { + console.log('currentTime:', currentTime) + console.log('startedTimestamp: ', startedTimestamp) + console.log('3') return 0 } - }, [startedTimestamp, currentTime]) + }, [startedTimestamp, isSubmitted]) const [elapsedTime, setElapsedTime] = useState(elapsedMinutes ?? 0) + console.log('elapsedMinutes:', elapsedMinutes) + console.log('elapsedTime:', elapsedTime) + useEffect(() => { const interval = setInterval(() => { const currentTime: number = Math.floor(Date.now() / 1000) const elapsedMinutes: number = Math.floor( (currentTime - startedTimestamp) / 60 ) - setElapsedTime(elapsedMinutes) + if (isSubmitted) { + setElapsedTime(elapsedMinutes) + } }, 60000) return () => { From 2f8f5ffda5ac31fc6336ae4e160038f58f96d8d9 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Mon, 6 Nov 2023 19:11:38 -0800 Subject: [PATCH 03/10] PendingTransaction to only display time passed after isSubmitted is true --- .../Transaction/MostRecentTransaction.tsx | 2 +- .../Transaction/PendingTransaction.tsx | 17 ++++++----------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx index 7c76c6e061..408a8b130a 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx @@ -257,7 +257,7 @@ export const MostRecentTransaction = () => { } }, [ currentTime, - lastPendingBridgeTransaction?.id, + lastPendingBridgeTransaction, lastHistoricalTransaction, lastPendingTransaction, masqueradeActive, diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index 992cf1a34e..f5e31abca5 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -100,19 +100,11 @@ export const PendingTransaction = ({ const currentTime: number = Math.floor(Date.now() / 1000) const elapsedMinutes: number = useMemo(() => { - if (!isSubmitted) { - return 0 - } else if (currentTime < startedTimestamp) { - console.log('1') + if (!isSubmitted || currentTime < startedTimestamp) { return 0 } else if (startedTimestamp < currentTime) { - console.log('currentTime:', currentTime) - console.log('2') return Math.floor((currentTime - startedTimestamp) / 60) } else { - console.log('currentTime:', currentTime) - console.log('startedTimestamp: ', startedTimestamp) - console.log('3') return 0 } }, [startedTimestamp, isSubmitted]) @@ -128,7 +120,9 @@ export const PendingTransaction = ({ const elapsedMinutes: number = Math.floor( (currentTime - startedTimestamp) / 60 ) + console.log('isSubmitted:', isSubmitted) if (isSubmitted) { + console.log('setting elapsed time: ', elapsedMinutes) setElapsedTime(elapsedMinutes) } }, 60000) @@ -206,12 +200,13 @@ export const PendingTransaction = ({ isSubmitted: true, } + console.log('resolved transaction:', resolvedTransaction) dispatch(updatePendingBridgeTransaction(updatedTransaction)) } } updateResolvedTransaction() } - }, [startedTimestamp, isSubmitted, transactionHash]) + }, [startedTimestamp, isSubmitted, transactionHash, elapsedTime]) useEffect(() => { const currentTimestamp: number = getTimeMinutesFromNow(0) @@ -240,7 +235,7 @@ export const PendingTransaction = ({ completedTimestamp={completedTimestamp} transactionType={TransactionType.PENDING} estimatedDuration={estimatedCompletionInSeconds} - timeRemaining={timeRemaining} + timeRemaining={isSubmitted ? timeRemaining : estimatedMinutes} transactionStatus={transactionStatus} isCompleted={isCompleted} kappa={kappa} From 2a04fd0b40d857d1200cfc4822d695f498d2dc22 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Mon, 6 Nov 2023 19:55:06 -0800 Subject: [PATCH 04/10] Update for timeRemaining to be accurate, need to ensure new transactions fired off have accurate time if existing pending --- .../Portfolio/Transaction/PendingTransaction.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index f5e31abca5..f8d4dedd35 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -109,12 +109,16 @@ export const PendingTransaction = ({ } }, [startedTimestamp, isSubmitted]) - const [elapsedTime, setElapsedTime] = useState(elapsedMinutes ?? 0) + const [elapsedTime, setElapsedTime] = useState(elapsedMinutes) console.log('elapsedMinutes:', elapsedMinutes) console.log('elapsedTime:', elapsedTime) useEffect(() => { + console.log('startedTimestamp:', startedTimestamp) + console.log('isSubmitted:', isSubmitted) + console.log('transactionHash:', transactionHash) + const interval = setInterval(() => { const currentTime: number = Math.floor(Date.now() / 1000) const elapsedMinutes: number = Math.floor( @@ -125,12 +129,12 @@ export const PendingTransaction = ({ console.log('setting elapsed time: ', elapsedMinutes) setElapsedTime(elapsedMinutes) } - }, 60000) + }, 30000) return () => { clearInterval(interval) } - }, [startedTimestamp, isSubmitted]) + }, [startedTimestamp, isSubmitted, transactionHash]) const estimatedMinutes: number = Math.floor(estimatedCompletionInSeconds / 60) @@ -140,7 +144,9 @@ export const PendingTransaction = ({ } else { return estimatedMinutes - elapsedTime } - }, [estimatedMinutes, elapsedTime, startedTimestamp]) + }, [estimatedMinutes, elapsedMinutes, elapsedTime, startedTimestamp]) + + console.log('timeRemaining:', timeRemaining) const isDelayed: boolean = useMemo(() => timeRemaining < 0, [timeRemaining]) From b7eef5a9d27749d9618cc4cad0570ed16928bc91 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:32:17 -0800 Subject: [PATCH 05/10] Each transaction has indepedent `timeElapsed` counter --- .../Transaction/MostRecentTransaction.tsx | 3 +- .../Transaction/PendingTransaction.tsx | 30 +++++++++++++------ 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx index 408a8b130a..529afeeb75 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) }, []) @@ -139,6 +139,7 @@ export const MostRecentTransaction = () => { // console.log('lastPendingTransaction:', lastPendingTransaction) return useMemo(() => { + console.log('re-rendering mostrecenttransaction') if ( isUserHistoricalTransactionsLoading || isUserPendingTransactionsLoading diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index f8d4dedd35..f7fd14a21a 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -107,26 +107,32 @@ export const PendingTransaction = ({ } else { return 0 } - }, [startedTimestamp, isSubmitted]) + }, [startedTimestamp, currentTime, isSubmitted, transactionHash]) const [elapsedTime, setElapsedTime] = useState(elapsedMinutes) - console.log('elapsedMinutes:', elapsedMinutes) - console.log('elapsedTime:', elapsedTime) + console.log( + 'elapsedMinutes:', + elapsedMinutes, + ' and elapsedTime:', + elapsedTime, + ' and txnHash: ', + transactionHash + ) useEffect(() => { - console.log('startedTimestamp:', startedTimestamp) - console.log('isSubmitted:', isSubmitted) - console.log('transactionHash:', transactionHash) - const interval = setInterval(() => { const currentTime: number = Math.floor(Date.now() / 1000) const elapsedMinutes: number = Math.floor( (currentTime - startedTimestamp) / 60 ) - console.log('isSubmitted:', isSubmitted) if (isSubmitted) { - console.log('setting elapsed time: ', elapsedMinutes) + console.log( + 'setElapsedMinutes:', + elapsedMinutes, + ' for transactionHash: ', + transactionHash + ) setElapsedTime(elapsedMinutes) } }, 30000) @@ -136,6 +142,12 @@ export const PendingTransaction = ({ } }, [startedTimestamp, isSubmitted, transactionHash]) + useEffect(() => { + if (!elapsedMinutes && elapsedTime > elapsedMinutes) { + setElapsedTime(0) + } + }, [elapsedMinutes, elapsedTime]) + const estimatedMinutes: number = Math.floor(estimatedCompletionInSeconds / 60) const timeRemaining: number = useMemo(() => { From ecb5d7ebae2a102bae1e53269f4af5cb006bc1f5 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:39:42 -0800 Subject: [PATCH 06/10] Update time variables for readability --- .../Transaction/PendingTransaction.tsx | 52 ++++++++----------- 1 file changed, 23 insertions(+), 29 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index f7fd14a21a..a5cb17b7fc 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -99,7 +99,7 @@ export const PendingTransaction = ({ const currentTime: number = Math.floor(Date.now() / 1000) - const elapsedMinutes: number = useMemo(() => { + const initialElapsedMinutes: number = useMemo(() => { if (!isSubmitted || currentTime < startedTimestamp) { return 0 } else if (startedTimestamp < currentTime) { @@ -109,15 +109,8 @@ export const PendingTransaction = ({ } }, [startedTimestamp, currentTime, isSubmitted, transactionHash]) - const [elapsedTime, setElapsedTime] = useState(elapsedMinutes) - - console.log( - 'elapsedMinutes:', - elapsedMinutes, - ' and elapsedTime:', - elapsedTime, - ' and txnHash: ', - transactionHash + const [updatedElapsedTime, setUpdatedElapsedTime] = useState( + initialElapsedMinutes ) useEffect(() => { @@ -127,13 +120,7 @@ export const PendingTransaction = ({ (currentTime - startedTimestamp) / 60 ) if (isSubmitted) { - console.log( - 'setElapsedMinutes:', - elapsedMinutes, - ' for transactionHash: ', - transactionHash - ) - setElapsedTime(elapsedMinutes) + setUpdatedElapsedTime(elapsedMinutes) } }, 30000) @@ -143,22 +130,27 @@ export const PendingTransaction = ({ }, [startedTimestamp, isSubmitted, transactionHash]) useEffect(() => { - if (!elapsedMinutes && elapsedTime > elapsedMinutes) { - setElapsedTime(0) + if (!initialElapsedMinutes && updatedElapsedTime > initialElapsedMinutes) { + setUpdatedElapsedTime(0) } - }, [elapsedMinutes, elapsedTime]) + }, [initialElapsedMinutes, updatedElapsedTime]) - 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, elapsedMinutes, elapsedTime, startedTimestamp]) - - console.log('timeRemaining:', timeRemaining) + }, [ + estimatedCompletionInMinutes, + initialElapsedMinutes, + updatedElapsedTime, + startedTimestamp, + ]) const isDelayed: boolean = useMemo(() => timeRemaining < 0, [timeRemaining]) @@ -224,7 +216,7 @@ export const PendingTransaction = ({ } updateResolvedTransaction() } - }, [startedTimestamp, isSubmitted, transactionHash, elapsedTime]) + }, [startedTimestamp, isSubmitted, transactionHash, updatedElapsedTime]) useEffect(() => { const currentTimestamp: number = getTimeMinutesFromNow(0) @@ -253,7 +245,9 @@ export const PendingTransaction = ({ completedTimestamp={completedTimestamp} transactionType={TransactionType.PENDING} estimatedDuration={estimatedCompletionInSeconds} - timeRemaining={isSubmitted ? timeRemaining : estimatedMinutes} + timeRemaining={ + isSubmitted ? timeRemaining : estimatedCompletionInMinutes + } transactionStatus={transactionStatus} isCompleted={isCompleted} kappa={kappa} From 1066f75b0b773916250804126ee445d31c757fb7 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:40:08 -0800 Subject: [PATCH 07/10] rm logs --- .../Portfolio/Transaction/MostRecentTransaction.tsx | 7 ------- .../Portfolio/Transaction/PendingTransaction.tsx | 3 +++ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx index 529afeeb75..e22a46b390 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/MostRecentTransaction.tsx @@ -135,11 +135,7 @@ export const MostRecentTransaction = () => { let transaction - // console.log('lastPendingBridgeTransaction:', lastPendingBridgeTransaction) - // console.log('lastPendingTransaction:', lastPendingTransaction) - return useMemo(() => { - console.log('re-rendering mostrecenttransaction') if ( isUserHistoricalTransactionsLoading || isUserPendingTransactionsLoading @@ -149,8 +145,6 @@ export const MostRecentTransaction = () => { if (!masqueradeActive && lastPendingBridgeTransaction) { transaction = lastPendingBridgeTransaction as PendingBridgeTransaction - - console.log('lastPendingBridgeTransaction:', lastPendingBridgeTransaction) return (
{ if (!masqueradeActive && lastPendingTransaction) { transaction = lastPendingTransaction as BridgeTransaction - console.log('lastPendingTransaction:', lastPendingTransaction) return (
{ if (!isSubmitted || currentTime < startedTimestamp) { return 0 @@ -109,6 +110,7 @@ export const PendingTransaction = ({ } }, [startedTimestamp, currentTime, isSubmitted, transactionHash]) + // Holds most updated value for elapsed time to calculate timeRemaining const [updatedElapsedTime, setUpdatedElapsedTime] = useState( initialElapsedMinutes ) @@ -129,6 +131,7 @@ export const PendingTransaction = ({ } }, [startedTimestamp, isSubmitted, transactionHash]) + // Ensures we reset elapsed time so unique transactions track elapsed time accurately useEffect(() => { if (!initialElapsedMinutes && updatedElapsedTime > initialElapsedMinutes) { setUpdatedElapsedTime(0) From 934492ee7472c281e650532f5da087343d3f6212 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:45:05 -0800 Subject: [PATCH 08/10] Persist `PendingTransaction` until transactionHash resolves if block not found --- .../components/Portfolio/Transaction/PendingTransaction.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index ba237df594..9697916252 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -201,7 +201,6 @@ export const PendingTransaction = ({ hash: transactionHash as Address, }).catch((error) => { console.error('resolving transaction failed: ', error) - dispatch(removePendingBridgeTransaction(startedTimestamp)) }) if (resolvedTransaction) { From 94121b60d383ddebf22472931b60f18fe9141b86 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:54:01 -0800 Subject: [PATCH 09/10] Implement retries for resolving transaction in the case initial resolution fails --- .../Transaction/PendingTransaction.tsx | 52 +++++++++++++------ 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index 9697916252..f25a84ac01 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -196,29 +196,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) - }) - - 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) } - - console.log('resolved transaction:', resolvedTransaction) - dispatch(updatePendingBridgeTransaction(updatedTransaction)) } } + updateResolvedTransaction() } - }, [startedTimestamp, isSubmitted, transactionHash, updatedElapsedTime]) + }, [ + startedTimestamp, + isSubmitted, + transactionHash, + dispatch, + updatePendingBridgeTransaction, + getTimeMinutesFromNow, + updatedElapsedTime, + ]) useEffect(() => { const currentTimestamp: number = getTimeMinutesFromNow(0) From 6ab3239968f1a42633af3f685574169f9f4a79e6 Mon Sep 17 00:00:00 2001 From: Jonah Lin <57741810+linjonah@users.noreply.github.com> Date: Tue, 7 Nov 2023 11:30:45 -0800 Subject: [PATCH 10/10] Update comment --- .../Transaction/PendingTransaction.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx index f25a84ac01..b3e3b11bf0 100644 --- a/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx +++ b/packages/synapse-interface/components/Portfolio/Transaction/PendingTransaction.tsx @@ -95,7 +95,7 @@ export const PendingTransaction = ({ originChain.blockTime) / 1000 : null - }, [originChain, eventType, originToken]) + }, [originChain, eventType, originToken, bridgeModuleName, transactionHash]) const currentTime: number = Math.floor(Date.now() / 1000) @@ -115,6 +115,14 @@ export const PendingTransaction = ({ initialElapsedMinutes ) + // 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) @@ -131,13 +139,6 @@ export const PendingTransaction = ({ } }, [startedTimestamp, isSubmitted, transactionHash]) - // Ensures we reset elapsed time so unique transactions track elapsed time accurately - useEffect(() => { - if (!initialElapsedMinutes && updatedElapsedTime > initialElapsedMinutes) { - setUpdatedElapsedTime(0) - } - }, [initialElapsedMinutes, updatedElapsedTime]) - const estimatedCompletionInMinutes: number = Math.floor( estimatedCompletionInSeconds / 60 )