diff --git a/wormhole-connect/src/config/constants.ts b/wormhole-connect/src/config/constants.ts index 13df12e96..e67e736ff 100644 --- a/wormhole-connect/src/config/constants.ts +++ b/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; diff --git a/wormhole-connect/src/utils/localStorage.ts b/wormhole-connect/src/utils/localStorage.ts index 1335d43ab..d2fdfa228 100644 --- a/wormhole-connect/src/utils/localStorage.ts +++ b/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 => { + const ls = window.localStorage; + const items: Array = []; + + // 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; +}; diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx index 89f5deb65..6a4bb5775 100644 --- a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx +++ b/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 diff --git a/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx b/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx index 22b7bd526..71aaf8e49 100644 --- a/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx +++ b/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]); diff --git a/wormhole-connect/src/views/v2/TxHistory/Widget/index.tsx b/wormhole-connect/src/views/v2/TxHistory/Widget/index.tsx index 1a4e9abde..80c620b9f 100644 --- a/wormhole-connect/src/views/v2/TxHistory/Widget/index.tsx +++ b/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>(); useEffect(() => { - const txs: Array = []; - - 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) {