Do not render widget when no token config found

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) {

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) => {
               <Stack direction="row" alignItems="center">
                 <Typography fontSize={14} marginRight="8px">
                   {`${sdkAmount.display(sdkAmount.truncate(amount, 4))} ${
-                    token?.symbol || ''
+                    token.symbol
                   }`}
                 </Typography>
                 <Box className={classes.chainIcon}>

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) {