Feat/indexeddb storage

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@aossie-org/idb-backup": "^1.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^6.4.6",
@@ -30,6 +31,7 @@
     "ethers": "^6.13.5",
     "framer-motion": "^12.23.12",
     "html2canvas": "^1.4.1",
+    "idb": "^8.0.3",
     "idb-keyval": "^6.2.1",
     "jspdf": "^3.0.0",
     "lucide-react": "^0.471.1",
@@ -41,7 +43,6 @@
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.1.1",
-    "react-toastify": "^11.0.5",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^2.22.9",

frontend/src/hooks/useInvoiceExport.js

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { toast } from "react-toastify";
+import toast from "react-hot-toast";
 import { downloadInvoiceCSV } from "@/utils/generateInvoiceCSV";
 import { downloadInvoiceJSON } from "@/utils/generateInvoiceJSON";
 

frontend/src/hooks/useInvoiceStorage.js

@@ -0,0 +1,53 @@
+import { useState, useCallback } from 'react';
+import {
+  storeInvoice,
+  getSentInvoices,
+  getReceivedInvoices,
+  getAllInvoices,
+  getInvoiceById,
+  updateInvoiceStatus,
+} from '../services/invoiceStorage/invoiceDB.js';
+import {
+  exportInvoiceBackup,
+  importInvoiceBackup,
+} from '../services/invoiceStorage/invoiceBackup.js';
+
+/**
+ * React hook for interacting with local IndexedDB invoice storage.
+ * Provides CRUD operations and backup/restore functionality.
+ */
+export function useInvoiceStorage() {
+  const [isExporting, setIsExporting] = useState(false);
+  const [isImporting, setIsImporting] = useState(false);
+
+  const handleExport = useCallback(async () => {
+    setIsExporting(true);
+    try {
+      await exportInvoiceBackup();
+    } finally {
+      setIsExporting(false);
+    }
+  }, []);
+
+  const handleImport = useCallback(async (file) => {
+    setIsImporting(true);
+    try {
+      await importInvoiceBackup(file);
+    } finally {
+      setIsImporting(false);
+    }
+  }, []);
+
+  return {
+    storeInvoice,
+    getSentInvoices,
+    getReceivedInvoices,
+    getAllInvoices,
+    getInvoiceById,
+    updateInvoiceStatus,
+    exportBackup: handleExport,
+    importBackup: handleImport,
+    isExporting,
+    isImporting,
+  };
+}

frontend/src/page/BatchPayment.jsx

@@ -7,8 +7,7 @@
 import html2canvas from "html2canvas";
 
 import { ERC20_ABI } from "../contractsABI/ERC20_ABI";
-import { toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+import toast from "react-hot-toast";
 import {
   CheckCircle2,
   Loader2,
@@ -228,7 +227,7 @@
     }
 
     setSelectedInvoices(new Set(batchInvoices.map((inv) => inv.id)));
-    toast.info(
+    toast(
       `Selected ${batchInvoices.length} invoices from batch #${batchId}`
     );
 
@@ -434,7 +433,7 @@
     };
 
     fetchReceivedInvoices();
   }, [walletClient, address, tokens]);
 
   // ENHANCED Batch payment function with pre-checks
   const handleBatchPayment = async () => {
@@ -459,7 +458,7 @@
       const grouped = getGroupedInvoices();
 
       // PRE-CHECK ALL BALANCES BEFORE ANY TRANSACTIONS
-      toast.info("Checking balances...");
+      toast("Checking balances...");
       const errors = [];
 
       for (const [tokenKey, group] of grouped.entries()) {
@@ -525,7 +524,7 @@
           );
 
           if (currentAllowance < totalAmount) {
-            toast.info(`Approving ${symbol} for spending...`);
+            toast(`Approving ${symbol} for spending...`);
             const approveTx = await tokenContract.approve(
               contractAddress,
               totalAmount

frontend/src/page/CreateInvoice.jsx

@@ -42,6 +42,7 @@
 import CountryPicker from "@/components/CountryPicker";
 import { useTokenList } from "@/hooks/useTokenList";
 import toast from "react-hot-toast";
+import { storeInvoice } from "../services/invoiceStorage/invoiceDB.js";
 
 import ProductCatalogImport from "@/components/ProductCatalogImport";
 import ProductAutocompleteInput from "@/components/ProductAutocompleteInput";
@@ -301,7 +302,7 @@
           }
           return updatedItem;
         }
         return item;
       })
     );
   };
@@ -432,6 +433,48 @@
       );
 
       const receipt = await tx.wait();
+
+      const iface = new ethers.Interface(ChainvoiceABI);
+      let invoiceId = null;
+      for (const log of receipt.logs) {
+        try {
+          const parsed = iface.parseLog(log);
+          if (parsed?.name === 'InvoiceCreated') {
+            invoiceId = parsed.args[0].toString();
+            break;
+          }
+        } catch (e) {
+          // ignore
+        }
+      }
+
+      if (invoiceId) {
+        try {
+          await storeInvoice({
+            invoiceId,
+            chainId: account.chainId,
+            from: account.address.toLowerCase(),
+            to: data.clientAddress.toLowerCase(),
+            isPaid: false,
+            isCancelled: false,
+            wakuDelivered: false,
+            invoiceDataHash: dataToEncryptHash,
+            data: invoicePayload,
+          });
+        } catch (storageErr) {
+          console.error("Invoice created, but local persistence failed:", storageErr);
+          toast.error(
+            "Invoice was created on-chain, but could not be saved locally. Please do not leave this page until you back up the invoice details."
+          );
+          return;
+        }
+      } else {
+        console.warn("InvoiceCreated event not found in transaction logs");
+        toast.error(
+          "Invoice was created on-chain, but could not be detected in the transaction. Please check your Sent Invoices page."
+        );
+      }
+
       setTimeout(() => navigate("/dashboard/sent"), 4000);
     } catch (err) {
       console.error("Encryption or transaction failed:", err);

frontend/src/page/CreateInvoicesBatch.jsx

@@ -37,6 +37,7 @@
 import { Label } from "@/components/ui/label";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
+import { storeInvoice } from "../services/invoiceStorage/invoiceDB.js";
 
 
 
@@ -147,7 +148,7 @@
         itemData: [createEmptyInvoiceItem()],
         totalAmountDue: 0,
       },
     ]);
     setExpandedInvoice(newIndex);
     toast.success("New invoice added to batch");
   };
@@ -337,6 +338,8 @@
 
       toast(`Processing ${validInvoices.length} invoices...`);
 
+      const invoicePayloads = [];
+
       // Process each invoice
       for (const [index, row] of validInvoices.entries()) {
         toast(
@@ -381,6 +384,7 @@
         };
 
         const invoiceString = JSON.stringify(invoicePayload);
+        invoicePayloads.push(invoicePayload);
 
         const encryptedStringBase64 = btoa(invoiceString);
         const dataToEncryptHash = "";
@@ -422,6 +426,44 @@
       toast("Transaction submitted! Waiting for confirmation...");
       const receipt = await tx.wait();
 
+      const iface = new ethers.Interface(ChainvoiceABI);
+      const invoiceIds = [];
+      for (const log of receipt.logs) {
+        try {
+          const parsed = iface.parseLog(log);
+          if (parsed?.name === 'InvoiceCreated') {
+            invoiceIds.push(parsed.args[0].toString());
+          }
+        } catch (e) {
+          // ignore
+        }
+      }
+
+      if (invoiceIds.length !== invoicePayloads.length) {
+        console.warn(`Expected ${invoicePayloads.length} InvoiceCreated events, got ${invoiceIds.length}`);
+      }
+
+      for (const [eventIndex, invoiceId] of invoiceIds.entries()) {
+        const payload = invoicePayloads[eventIndex];
+        if (!payload) continue;
+
+        try {
+          await storeInvoice({
+            invoiceId,
+            chainId: account.chainId,
+            from: account.address.toLowerCase(),
+            to: payload.client.address.toLowerCase(),
+            isPaid: false,
+            isCancelled: false,
+            wakuDelivered: false,
+            invoiceDataHash: "",
+            data: payload,
+          });
+        } catch (err) {
+          console.error(`Failed to store invoice ${invoiceId} locally:`, err);
+        }
+      }
+
       toast.success(
         `Successfully created ${validInvoices.length} invoices in batch!`
       );