diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx index 0d1093fde..52d8700f2 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx +++ b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx @@ -106,7 +106,7 @@ const GasSlider = (props: { useEffect(() => { dispatch(setToNativeToken(debouncedPercentage / 100)); - }, [debouncedPercentage]); + }, [debouncedPercentage, dispatch]); const nativeGasPrice = useMemo(() => { if (!destChain || !nativeGasToken) { diff --git a/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx b/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx index 1801048d5..317ecb142 100644 --- a/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx +++ b/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx @@ -108,6 +108,7 @@ const WidgetItem = (props: Props) => { toChain, token: tokenTuple, } = txDetails || {}; + const token = config.tokens.get(tokenTuple); // Initialize the countdown @@ -162,6 +163,9 @@ const WidgetItem = (props: Props) => { } return eta - timePassed; + // totalSeconds is not used in this hook but we still need it here + // to update the remaining eta every second. + // eslint-disable-next-line react-hooks/exhaustive-deps }, [eta, timestamp, totalSeconds]); // Displays the countdown @@ -208,7 +212,7 @@ const WidgetItem = (props: Props) => { } return ((eta - etaRemaining) / eta) * 100; - }, [eta, etaRemaining, isCompleted]); + }, [eta, etaExpired, etaRemaining]); // Start the countdown timer useEffect(() => { @@ -219,7 +223,7 @@ const WidgetItem = (props: Props) => { // 3- we have the remaining eta restart(new Date(Date.now() + etaRemaining), true); } - }, [etaRemaining, isCompleted, isRunning]); + }, [etaRemaining, isCompleted, isRunning, restart]); // Action handler to navigate user to the Redeem view of this transaction const resumeTransaction = useCallback(async () => { @@ -257,7 +261,8 @@ const WidgetItem = (props: Props) => { } }, [dispatch, receipt, route, routeContext, timestamp, txDetails]); - if (!transaction) { + // Do not render this widget if we don't have the transaction or the token + if (!transaction || !token) { return <>; } @@ -286,7 +291,7 @@ const WidgetItem = (props: Props) => { {`${sdkAmount.display(sdkAmount.truncate(amount, 4))} ${ - token?.symbol || '' + token.symbol }`} diff --git a/wormhole-connect/src/views/v2/TxHistory/Widget/index.tsx b/wormhole-connect/src/views/v2/TxHistory/Widget/index.tsx index 267c55327..b7951b74d 100644 --- a/wormhole-connect/src/views/v2/TxHistory/Widget/index.tsx +++ b/wormhole-connect/src/views/v2/TxHistory/Widget/index.tsx @@ -3,6 +3,7 @@ import { useTheme } from '@mui/material'; import Typography from '@mui/material/Typography'; import { makeStyles } from 'tss-react/mui'; +import config from 'config'; import { TransactionLocal } from 'config/types'; import WidgetItem from 'views/v2/TxHistory/Widget/Item'; import { getTxsFromLocalStorage } from 'utils/inProgressTxCache'; @@ -43,7 +44,25 @@ const TxHistoryWidget = () => { useEffect(() => { // Get all in-progress transactions from localStorage - setTransactions(getTxsFromLocalStorage()); + const txs = getTxsFromLocalStorage(); + + // Filter out the ones with unknown tokens + const verifiedTxs = txs?.filter((tx) => { + if (!tx?.txDetails?.token) { + return false; + } + try { + return !!config.tokens.get(tx?.txDetails?.token); + } catch (e: unknown) { + console.log( + `Error while parsing token from local storage (in-progress widget):`, + e, + ); + return false; + } + }); + + setTransactions(verifiedTxs); }, []); if (!transactions || transactions.length === 0) {