Merge pull request #511 from DeXter-on-Radix/fork-SiegfriedBz--add-ex…

…port-csv-btn

Add Export Orders as CSV Feature

package.json

@@ -33,6 +33,7 @@
     "js-cookie": "^3.0.5",
     "lightweight-charts": "^4.1.3",
     "next": "^14.1.1",
+    "papaparse": "^5.4.1",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
@@ -49,6 +50,7 @@
     "@testing-library/react": "^14.2.2",
     "@types/big.js": "^6.2.2",
     "@types/js-cookie": "^3.0.6",
+    "@types/papaparse": "^5.3.14",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-react": "^4.2.1",

src/app/components/AccountHistory.tsx

@@ -27,6 +27,7 @@ import {
   calculateAvgFilled,
   calculateTotalFees,
 } from "../utils";
+import Papa from "papaparse";
 
 function createOrderReceiptAddressLookup(
   pairsList: PairInfo[]
@@ -237,7 +238,22 @@ function DisplayTable() {
             ))}
           </tr>
         </thead>
-        <tbody>{tableToShow.rows}</tbody>
+        <tbody>
+          {tableToShow.rows}
+          {selectedTable === Tables.ORDER_HISTORY && (
+            <tr className="!bg-transparent">
+              <td className="lg:hidden">
+                <ExportCsvButton />
+              </td>
+              {headers[Tables.ORDER_HISTORY].slice(1).map((_, index) => (
+                <td key={index}></td>
+              ))}
+              <td className="max-lg:hidden">
+                <ExportCsvButton />
+              </td>
+            </tr>
+          )}
+        </tbody>
       </table>
     </div>
   );
@@ -540,3 +556,58 @@ const OrderHistoryRow = ({ order }: { order: any }) => {
     </tr>
   );
 };
+
+const ExportCsvButton = () => {
+  const { orderHistory } = useAppSelector((state) => state.accountHistory);
+
+  const handleExport = () => {
+    try {
+      const formatedOrderHistory = orderHistory.map((order) => {
+        return {
+          ...order,
+          specifiedToken: order.specifiedToken.symbol,
+          unclaimedToken: order.unclaimedToken.symbol,
+        };
+      });
+
+      // Convert orderHistory array to CSV format
+      const csv = Papa.unparse(formatedOrderHistory);
+
+      // Create a blob from the CSV data
+      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+
+      // Create a link element and trigger the download
+      const link = document.createElement("a");
+      if (link.download !== undefined) {
+        const url = URL.createObjectURL(blob);
+        link.setAttribute("href", url);
+        const filename = `dexter-order-history-${
+          new Date().toISOString().split("T")[0]
+        }.csv`;
+        link.setAttribute("download", filename);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    } catch (error) {
+      // TODO: add toast notification ?
+      console.error("Error exporting CSV:", error);
+    }
+  };
+
+  // do not display the button if orderHistory is empty
+  if (!orderHistory || orderHistory.length === 0) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={handleExport}
+      className="whitespace-nowrap text-sm font-bold hover:text-dexter-gradient-green"
+    >
+      export as csv
+    </button>
+  );
+};
+
+export default ExportCsvButton;