[Redesign] Move localStorage item retrieval to a utility function

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

wormhole-connect/src/config/constants.ts

@@ -41,5 +41,5 @@ export const getAttestUrl = (network: Network): string => {
   }
 };
 
-export const LOCAL_STORAGE_TXS = 'wormhole-connect:transactions:';
-export const LOCAL_STORAGE_TXS_MAX = 3;
+export const LOCAL_STORAGE_TX = 'wormhole-connect:transactions:';
+export const LOCAL_STORAGE_TX_MAX = 3;

wormhole-connect/src/utils/localStorage.ts

@@ -1,4 +1,6 @@
-// Adds a stringified object to localStorage
+import { TransactionLocal } from 'config/types';
+
+// Adds an object to localStorage
 export const addItemToLocalStorage = (
   id: string, // Key for the item
   data: object, // Item data
@@ -16,7 +18,7 @@ export const addItemToLocalStorage = (
     }
   }
 
-  // Remove the oldest items that puts it at or over the limit
+  // Remove the oldest items that puts the length at or over the limit
   if (max && items.length >= max) {
     for (let i = 0; i < items.length - max + 1; i++) {
       ls.removeItem(items[i]);
@@ -27,3 +29,28 @@ export const addItemToLocalStorage = (
   const lsItemId = `${prefix}${id}`;
   ls.setItem(lsItemId, JSON.stringify(data));
 };
+
+// Retrieves all items with a key prefix from localStorage
+export const getItemsFromLocalStorage = (
+  prefix: string, // Prefix to use for the item key
+): Array<TransactionLocal> => {
+  const ls = window.localStorage;
+  const items: Array<TransactionLocal> = [];
+
+  // Iterate all items in localStorage and collect those with the specified key prefix
+  for (let i = 0; i < ls.length; i++) {
+    const itemKey = ls.key(i);
+    if (itemKey?.toLowerCase().startsWith(prefix)) {
+      const item = ls.getItem(itemKey);
+      if (item) {
+        try {
+          items.push(JSON.parse(item));
+        } catch (e: any) {
+          console.log(`Error parsing transaction from localStorage: ${e}`);
+        }
+      }
+    }
+  }
+
+  return items;
+};

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx

@@ -13,7 +13,7 @@ import { Context } from 'sdklegacy';
 
 import Button from 'components/v2/Button';
 import config from 'config';
-import { LOCAL_STORAGE_TXS, LOCAL_STORAGE_TXS_MAX } from 'config/constants';
+import { LOCAL_STORAGE_TX, LOCAL_STORAGE_TX_MAX } from 'config/constants';
 import { addItemToLocalStorage } from 'utils/localStorage';
 import { RoutesConfig } from 'config/routes';
 import { RouteContext } from 'contexts/RouteContext';
@@ -287,8 +287,8 @@ const ReviewTransaction = (props: Props) => {
           eta: quote.eta || 0,
           explorerInfo: getExplorerInfo(sdkRoute, txId),
         },
-        LOCAL_STORAGE_TXS,
-        LOCAL_STORAGE_TXS_MAX,
+        LOCAL_STORAGE_TX,
+        LOCAL_STORAGE_TX_MAX,
       );
 
       // Reset the amount for a successful transaction

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

@@ -12,7 +12,7 @@ import { makeStyles } from 'tss-react/mui';
 import { poll } from 'poll';
 
 import config from 'config';
-import { LOCAL_STORAGE_TXS } from 'config/constants';
+import { LOCAL_STORAGE_TX } from 'config/constants';
 import ArrowRight from 'icons/ArrowRight';
 import TokenIcon from 'icons/TokenIcons';
 import TxCompleteIcon from 'icons/TxComplete';
@@ -141,7 +141,7 @@ const WidgetItem = (props: Props) => {
   useEffect(() => {
     if (!inProgress && txHash) {
       // Remove local storage item
-      const lsItemId = `${LOCAL_STORAGE_TXS}${txHash}`;
+      const lsItemId = `${LOCAL_STORAGE_TX}${txHash}`;
       window.localStorage.removeItem(lsItemId);
     }
   }, [inProgress, txHash]);

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

@@ -3,10 +3,11 @@ import { useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from 'tss-react/mui';
 
-import { LOCAL_STORAGE_TXS } from 'config/constants';
+import { LOCAL_STORAGE_TX } from 'config/constants';
 
 import { TransactionLocal } from 'config/types';
 import WidgetItem from 'views/v2/TxHistory/Widget/Item';
+import { getItemsFromLocalStorage } from 'utils/localStorage';
 
 const useStyles = makeStyles()((theme) => ({
   container: {
@@ -42,23 +43,8 @@ const TxHistoryWidget = () => {
   const [transactions, setTransactions] = useState<Array<TransactionLocal>>();
 
   useEffect(() => {
-    const txs: Array<TransactionLocal> = [];
-
-    for (let i = 0; i < localStorage.length; i++) {
-      const itemKey = localStorage.key(i);
-      if (itemKey?.toLowerCase().startsWith(LOCAL_STORAGE_TXS)) {
-        const item = localStorage.getItem(itemKey);
-        if (item) {
-          try {
-            txs.push(JSON.parse(item));
-          } catch (e: any) {
-            console.log(`Error parsing local transaction: ${e}`);
-          }
-        }
-      }
-    }
-
-    setTransactions(txs);
+    // Get all items in localStorage with the transaction prefix
+    setTransactions(getItemsFromLocalStorage(LOCAL_STORAGE_TX));
   }, []);
 
   if (!transactions || transactions.length === 0) {