Filter out invalid txs

Signed-off-by: Emre Bogazliyanlioglu <[email protected]>

wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx

@@ -97,7 +97,6 @@ const WidgetItem = (props: Props) => {
     txHash,
   } = transaction;
   const { amount, eta, fromChain, toChain, tokenKey } = txDetails || {};
-  const tokenConfig = config.tokens[tokenKey];
 
   // Initialize the countdown
   const { seconds, minutes, totalSeconds, isRunning, restart } = useTimer({
@@ -116,18 +115,18 @@ const WidgetItem = (props: Props) => {
     route,
   });
 
-  // We have the initial receipt from local storage,
-  // but the receipt from useTrackTransfer is more up-to-date,
-  // so we need to use that one first.
-  const receipt = trackingReceipt || initialReceipt;
-
   useEffect(() => {
     if (isCompleted && txHash) {
       // Remove this transaction from local storage
       removeTxFromLocalStorage(txHash);
     }
   }, [isCompleted, txHash]);
 
+  // We have the initial receipt from local storage,
+  // but the receipt from useTrackTransfer is more up-to-date,
+  // so we need to use that one first.
+  const receipt = trackingReceipt || initialReceipt;
+
   // Remaining from the original ETA since the creation of this transaction
   const etaRemaining = useMemo(() => {
     if (!eta || !timestamp) {
@@ -241,8 +240,8 @@ const WidgetItem = (props: Props) => {
     }
   }, [dispatch, receipt, route, routeContext, timestamp, txDetails]);
 
-  // Do not render this widget if we don't have the transaction or the token config
-  if (!transaction || !tokenConfig) {
+  // Do not render this widget if we don't have the transaction
+  if (!transaction) {
     return <></>;
   }
 
@@ -271,7 +270,7 @@ const WidgetItem = (props: Props) => {
               <Stack direction="row" alignItems="center">
                 <Typography fontSize={14} marginRight="8px">
                   {`${sdkAmount.display(sdkAmount.truncate(amount, 4))} ${
-                    tokenConfig.symbol
+                    config.tokens[tokenKey].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,14 @@ const TxHistoryWidget = () => {
 
   useEffect(() => {
     // Get all in-progress transactions from localStorage
-    setTransactions(getTxsFromLocalStorage());
+    const txs = getTxsFromLocalStorage();
+
+    // Filter out the ones with unknown token configs
+    const verifiedTxs = txs?.filter(
+      (tx) => tx?.txDetails?.tokenKey && config.tokens[tx?.txDetails?.tokenKey],
+    );
+
+    setTransactions(verifiedTxs);
   }, []);
 
   if (!transactions || transactions.length === 0) {