Dev

packages/hardhat/contracts/ExpenseSplitter.sol

@@ -2,31 +2,66 @@
 pragma solidity ^0.8.19;
 
 contract ExpenseSplitter {
+    struct Expense {
+        uint256 id;
+        uint256 amount;
+        bool isWithdrawn;
+    }
+
     address public owner;
-    mapping(address => uint256) public balances;
-    address[] public participants;
+    mapping(address => Expense[]) public userExpenses;
+    uint256 public nextExpenseId;
 
-    event ExpenseAdded(address indexed payer, uint256 amount);
-    event FundsWithdrawn(address indexed user, uint256 amount);
+    event ExpenseAdded(address indexed payer, uint256 expenseId, uint256 amount);
+    event FundsWithdrawn(address indexed user, uint256 expenseId, uint256 amount);
 
     constructor() {
         owner = msg.sender;
+        nextExpenseId = 1;
     }
 
     function addExpense(address[] memory _participants) public payable {
         require(msg.value > 0, "Must send ETH");
+        require(_participants.length > 0, "No participants provided");
+
         uint256 share = msg.value / _participants.length;
         for (uint256 i = 0; i < _participants.length; i++) {
-            balances[_participants[i]] += share;
+            userExpenses[_participants[i]].push(Expense(nextExpenseId, share, false));
+        }
+
+        emit ExpenseAdded(msg.sender, nextExpenseId, msg.value);
+        nextExpenseId++;
+    }
+
+    function withdrawFunds(uint256 expenseId) public {
+        Expense[] storage expenses = userExpenses[msg.sender];
+        for (uint256 i = 0; i < expenses.length; i++) {
+            if (expenses[i].id == expenseId && !expenses[i].isWithdrawn) {
+                uint256 amount = expenses[i].amount;
+                expenses[i].isWithdrawn = true;
+                payable(msg.sender).transfer(amount);
+
+                emit FundsWithdrawn(msg.sender, expenseId, amount);
+                return;
+            }
         }
-        emit ExpenseAdded(msg.sender, msg.value);
+        revert("No withdrawable funds found for this expenseId");
     }
 
-    function withdrawFunds() public {
-        uint256 amount = balances[msg.sender];
-        require(amount > 0, "No funds to withdraw");
-        balances[msg.sender] = 0;
-        payable(msg.sender).transfer(amount);
-        emit FundsWithdrawn(msg.sender, amount);
+    function getMyExpenses() public view returns (uint256[] memory, uint256[] memory, bool[] memory) {
+        Expense[] storage expenses = userExpenses[msg.sender];
+        uint256 length = expenses.length;
+
+        uint256[] memory ids = new uint256[](length);
+        uint256[] memory amounts = new uint256[](length);
+        bool[] memory statuses = new bool[](length);
+
+        for (uint256 i = 0; i < length; i++) {
+            ids[i] = expenses[i].id;
+            amounts[i] = expenses[i].amount;
+            statuses[i] = expenses[i].isWithdrawn;
+        }
+
+        return (ids, amounts, statuses);
     }
-}
+}

packages/nextjs/app/expensesplitter/page.tsx

@@ -1,12 +1,17 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ethers } from "ethers";
 import deployedContracts from "~~/contracts/deployedContracts";
 
 const ExpenseSplitter = () => {
   const [amount, setAmount] = useState("");
-  const [participants, setParticipants] = useState("");
+  const [participants, setParticipants] = useState<string[]>([]);
+  const [expenses, setExpenses] = useState<{ id: number; amount: string; status: string }[]>([]);
+
+  useEffect(() => {
+    fetchExpenses();
+  }, []);
 
   const addExpense = async () => {
     if (!window.ethereum) return alert("Install Metamask");
@@ -17,11 +22,34 @@ const ExpenseSplitter = () => {
       deployedContracts[31337].ExpenseSplitter.abi,
       signer,
     );
-    const addresses = participants.split(",").map(addr => addr.trim());
-    await contract.addExpense(addresses, { value: ethers.parseEther(amount) });
+
+    const addresses = participants.map(addr => addr.trim());
+    const tx = await contract.addExpense(addresses, { value: ethers.parseEther(amount) });
+    await tx.wait();
+    fetchExpenses();
+  };
+
+  const fetchExpenses = async () => {
+    if (!window.ethereum) return;
+    const provider = new ethers.BrowserProvider(window.ethereum);
+    const signer = await provider.getSigner();
+    const contract = new ethers.Contract(
+      deployedContracts[31337].ExpenseSplitter.address,
+      deployedContracts[31337].ExpenseSplitter.abi,
+      signer,
+    );
+
+    const [ids, amounts, statuses] = await contract.getMyExpenses();
+    const formattedExpenses = ids.map((id: bigint, index: number) => ({
+      id: Number(id),
+      amount: ethers.formatEther(amounts[index]),
+      status: statuses[index] ? "Withdrawn" : "Active",
+    }));
+
+    setExpenses(formattedExpenses);
   };
 
-  const withdrawFunds = async () => {
+  const withdrawFunds = async (expenseId: number) => {
     if (!window.ethereum) return alert("Install Metamask");
     const provider = new ethers.BrowserProvider(window.ethereum);
     const signer = await provider.getSigner();
@@ -30,18 +58,74 @@ const ExpenseSplitter = () => {
       deployedContracts[31337].ExpenseSplitter.abi,
       signer,
     );
-    await contract.withdrawFunds();
+
+    const tx = await contract.withdrawFunds(expenseId);
+    await tx.wait();
+    fetchExpenses();
   };
 
   return (
-    <div>
-      <h2>Decentralized Expense Splitter</h2>
-      <input type="text" placeholder="Amount in ETH" onChange={e => setAmount(e.target.value)} />
-      <input type="text" placeholder="Participants (comma-separated)" onChange={e => setParticipants(e.target.value)} />
-      <button onClick={addExpense}>Add Expense</button>
-
-      <h3>Withdraw Funds</h3>
-      <button onClick={withdrawFunds}>Withdraw</button>
+    <div className="flex flex-col items-center p-4 space-y-4 bg-gray-100 min-h-screen">
+      <h2 className="text-xl font-bold">Decentralized Expense Splitter</h2>
+      <input
+        className="p-2 border rounded"
+        type="text"
+        placeholder="Amount in ETH"
+        value={amount}
+        onChange={e => setAmount(e.target.value)}
+      />
+      {participants.map((participant, index) => (
+        <input
+          key={index}
+          className="p-2 border rounded"
+          type="text"
+          placeholder="Participant Address"
+          value={participant}
+          onChange={e =>
+            setParticipants([...participants.slice(0, index), e.target.value, ...participants.slice(index + 1)])
+          }
+        />
+      ))}
+      <button
+        className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
+        onClick={() => setParticipants([...participants, ""])}
+      >
+        Add Participant
+      </button>
+      <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" onClick={addExpense}>
+        Add Expense
+      </button>
+      <button className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600" onClick={fetchExpenses}>
+        Refresh Expenses
+      </button>
+      <div className="w-full bg-white p-6 rounded shadow">
+        <h3 className="text-lg font-semibold">My Expense Splitters</h3>
+        {expenses.length > 0 ? (
+          expenses.map((expense, index) => (
+            <div key={index} className="p-4 border-b flex justify-between items-center">
+              <span className="w-1/3">ID: {expense.id}</span>
+              <span className="font-bold">{expense.amount} ETH</span>
+              <span
+                className={
+                  expense.status === "Withdrawn" ? "text-green-600 font-semibold" : "text-red-600 font-semibold"
+                }
+              >
+                {expense.status}
+              </span>
+              {!expense.status.includes("Withdrawn") && (
+                <button
+                  className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+                  onClick={() => withdrawFunds(expense.id)}
+                >
+                  Withdraw
+                </button>
+              )}
+            </div>
+          ))
+        ) : (
+          <p className="text-gray-500">No expenses found</p>
+        )}
+      </div>
     </div>
   );
 };

packages/nextjs/contracts/deployedContracts.ts

@@ -23,6 +23,12 @@ const deployedContracts = {
               name: "payer",
               type: "address",
             },
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "expenseId",
+              type: "uint256",
+            },
             {
               indexed: false,
               internalType: "uint256",
@@ -42,6 +48,12 @@ const deployedContracts = {
               name: "user",
               type: "address",
             },
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "expenseId",
+              type: "uint256",
+            },
             {
               indexed: false,
               internalType: "uint256",
@@ -66,14 +78,31 @@ const deployedContracts = {
           type: "function",
         },
         {
-          inputs: [
+          inputs: [],
+          name: "getMyExpenses",
+          outputs: [
             {
-              internalType: "address",
+              internalType: "uint256[]",
               name: "",
-              type: "address",
+              type: "uint256[]",
+            },
+            {
+              internalType: "uint256[]",
+              name: "",
+              type: "uint256[]",
+            },
+            {
+              internalType: "bool[]",
+              name: "",
+              type: "bool[]",
             },
           ],
-          name: "balances",
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "nextExpenseId",
           outputs: [
             {
               internalType: "uint256",
@@ -99,25 +128,46 @@ const deployedContracts = {
         },
         {
           inputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
             {
               internalType: "uint256",
               name: "",
               type: "uint256",
             },
           ],
-          name: "participants",
+          name: "userExpenses",
           outputs: [
             {
-              internalType: "address",
-              name: "",
-              type: "address",
+              internalType: "uint256",
+              name: "id",
+              type: "uint256",
+            },
+            {
+              internalType: "uint256",
+              name: "amount",
+              type: "uint256",
+            },
+            {
+              internalType: "bool",
+              name: "isWithdrawn",
+              type: "bool",
             },
           ],
           stateMutability: "view",
           type: "function",
         },
         {
-          inputs: [],
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "expenseId",
+              type: "uint256",
+            },
+          ],
           name: "withdrawFunds",
           outputs: [],
           stateMutability: "nonpayable",