starting to write logic for clearing failed transactions

public/locales/en/translation.json

@@ -228,6 +228,7 @@
     "activeTransactions": "Active transactions",
     "approve": "Approve {{symbol}}",
     "completedTransactions": "Completed transactions",
+    "clearFailedTransactions": "Clear failed transactions",
     "connectWallet": "Connect Wallet",
     "copyAddress": "Copy address",
     "dayAgo_one": "{{count}} day ago",

src/components/TransactionsTab/TransactionsTab.styles.tsx

@@ -267,3 +267,11 @@ export const BackdropFilter = styled.button`
     display: block;
   }
 `;
+
+export const ClearFailedTxButton = styled(Button)`
+  margin-top: 1rem;
+  ${InputOrButtonBorderStyleType2};
+  @media ${breakPoints.phoneOnly} {
+    display: none;
+  }
+`;

src/components/TransactionsTab/TransactionsTab.tsx

@@ -12,7 +12,7 @@ import { AnimatePresence, useReducedMotion } from "framer-motion";
 
 import { nativeCurrencyAddress } from "../../constants/nativeCurrency";
 import { BalancesState } from "../../features/balances/balancesSlice";
-import { SubmittedTransaction } from "../../features/transactions/transactionsSlice";
+import { setTransactions, SubmittedTransaction } from "../../features/transactions/transactionsSlice";
 import useAddressOrEnsName from "../../hooks/useAddressOrEnsName";
 import { useKeyPress } from "../../hooks/useKeyPress";
 import useMediaQuery from "../../hooks/useMediaQuery";
@@ -40,8 +40,11 @@ import {
   MobileWalletInfoButton,
   StyledWalletMobileMenu,
   BackdropFilter,
+  ClearFailedTxButton
 } from "./TransactionsTab.styles";
+import { clearLocalStorage } from "./helpers/clearLocalStorage";
 import AnimatedWalletTransaction from "./subcomponents/AnimatedWalletTransaction/AnimatedWalletTransaction";
+import { useDispatch } from "react-redux";
 
 type TransactionsTabType = {
   address: string;
@@ -83,13 +86,15 @@ const TransactionsTab = ({
   const transactionsScrollRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLDivElement>(null);
 
+  const dispatch = useDispatch();
+
   const addressOrName = useAddressOrEnsName(address);
   const walletInfoText = useMemo(() => {
     return isUnsupportedNetwork
       ? t("wallet.unsupported")
       : addressOrName
-      ? addressOrName
-      : t("wallet.notConnected");
+        ? addressOrName
+        : t("wallet.notConnected");
   }, [addressOrName, isUnsupportedNetwork, t]);
   const walletUrl = useMemo(
     () => getAccountUrl(chainId, address),
@@ -150,6 +155,11 @@ const TransactionsTab = ({
 
   const balance = balances.values[nativeCurrencyAddress] || "0";
 
+  const handleClearTransactions = () => {
+    // dispatch(setTransactions(null));
+    clearLocalStorage();
+  };
+
   return (
     <AnimatePresence initial={false}>
       {open && (
@@ -249,6 +259,14 @@ const TransactionsTab = ({
                   {t("wallet.noCompletedTransactions")}
                 </NoTransactions>
               )}
+              {transactions.length > 0 && (
+                <ClearFailedTxButton
+                  aria-label={t("wallet.clearFailedTransactions")}
+                  onClick={handleClearTransactions}
+                >
+                  {t("wallet.clearFailedTransactions")}
+                </ClearFailedTxButton>
+              )}
             </TransactionContainer>
           </TransactionsContainer>
           <BottomButtonContainer ref={buttonRef}>

src/components/TransactionsTab/helpers/clearLocalStorage.ts

@@ -0,0 +1,11 @@
+// TODO: filter for transactions
+export const clearLocalStorage = () => {
+  const filteredTransactions = {};
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key?.startsWith("airswap/transactions")) {
+      console.log(key)
+      // localStorage.removeItem(key);
+    }
+  }
+};