feat: add transaction json download to ui (#815)

Description --- Add transaction json download. The json is the result of `transaction.get` jrpc function. The filaname is `tx-<id>.json` or `tx-unknown_id.json` (I don't know if this can happen, probably not. Motivation and Context --- How Has This Been Tested? --- I started the dan-testing. And then I tried to download some accepted and some rejected transactions. What process can a PR reviewer use to test or verify this change? --- Same as above. Breaking Changes --- - [x] None - [ ] Requires data directory to be deleted - [ ] Other - Please specify
tari-project · Dec 7, 2023 · 50c0ff5 · 50c0ff5
1 parent 064c540
commit 50c0ff5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/applications/tari_dan_wallet_web_ui/package-lock.json b/applications/tari_dan_wallet_web_ui/package-lock.json
diff --git a/applications/tari_dan_wallet_web_ui/package.json b/applications/tari_dan_wallet_web_ui/package.json
@@ -17,6 +17,7 @@
     "@tanstack/react-query": "^4.33.0",
     "@tanstack/react-query-devtools": "^4.33.0",
     "async-mutex": "^0.4.0",
+    "file-saver": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",
@@ -26,6 +27,7 @@
     "zustand-persist": "^0.1.6"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.0.0",

diff --git a/applications/tari_dan_wallet_web_ui/src/routes/Transactions/Substates.tsx b/applications/tari_dan_wallet_web_ui/src/routes/Transactions/Substates.tsx
@@ -41,7 +41,6 @@ function RowData({ info, state }: any, index: number) {
   const theme = useTheme();
   const itemKey = Object.keys(info[0])[0];
   const itemValue = Object.values(info[0])[0];
-  console.log(info);
   return (
     <>
       <TableRow key={`${index}-1`}>

diff --git a/applications/tari_dan_wallet_web_ui/src/routes/Transactions/TransactionDetails.tsx b/applications/tari_dan_wallet_web_ui/src/routes/Transactions/TransactionDetails.tsx
@@ -26,6 +26,7 @@ import { useTransactionDetails } from "../../api/hooks/useTransactions";
 import { Accordion, AccordionDetails, AccordionSummary } from "../../Components/Accordion";
 import { Grid, Table, TableContainer, TableBody, TableRow, TableCell, Button, Fade, Alert } from "@mui/material";
 import Typography from "@mui/material/Typography";
+import { saveAs } from 'file-saver';
 import { DataTableCell, StyledPaper } from "../../Components/StyledComponents";
 import PageHeading from "../../Components/PageHeading";
 import Events from "./Events";
@@ -66,21 +67,21 @@ export default function TransactionDetails() {
     if (result) {
       if (result.result.Accept) {
         return (
-            <span>Accepted</span>);
+          <span>Accepted</span>);
       }
       if (result.result.AcceptFeeRejectRest) {
         return (
-            <span>{result.result.AcceptFeeRejectRest[1].ExecutionFailure}</span>
+          <span>{result.result.AcceptFeeRejectRest[1].ExecutionFailure}</span>
         );
       }
       if (result.result.Reject) {
         return (
-            <span>{Object.keys(result.result.Reject)[0]} - {result.result.Reject[Object.keys(result.result.Reject)[0]]}</span>
+          <span>{Object.keys(result.result.Reject)[0]} - {result.result.Reject[Object.keys(result.result.Reject)[0]]}</span>
         )
       }
     } else {
       return (
-          <span>In progress</span>
+        <span>In progress</span>
       );
     }
   }
@@ -107,6 +108,14 @@ export default function TransactionDetails() {
         </>
       );
     }
+    console.log(data);
+    const handleDownload = () => {
+      const json = JSON.stringify(data, null, 2);
+      const blob = new Blob([json], { type: 'application/json' });
+      const filename = `tx-${data?.transaction?.id}.json` || 'tx-unknown_id.json';
+      saveAs(blob, filename);
+    }
+
 
     if (data.status === "Rejected" || data.status === "InvalidTransaction") {
       return (
@@ -128,6 +137,10 @@ export default function TransactionDetails() {
                     <StatusChip status={data.status} />
                   </DataTableCell>
                 </TableRow>
+                <TableRow>
+                  <TableCell>JSON</TableCell>
+                  <DataTableCell><Button variant="outlined" onClick={handleDownload}>Download</Button></DataTableCell>
+                </TableRow>
                 <TableRow>
                   <TableCell>Reason</TableCell>
                   <DataTableCell>
@@ -172,6 +185,10 @@ export default function TransactionDetails() {
                     <TableCell>Result</TableCell>
                     <DataTableCell>{renderResult(data?.result)}</DataTableCell>
                   </TableRow>
+                  <TableRow>
+                    <TableCell>JSON</TableCell>
+                    <DataTableCell><Button variant="outlined" onClick={handleDownload}>Download</Button></DataTableCell>
+                  </TableRow>
                   {data?.transaction_failure ? (
                     <TableRow>
                       <TableCell>Reason</TableCell>
@@ -190,7 +207,7 @@ export default function TransactionDetails() {
                 alignItems: "center",
                 padding: "2rem 1rem 0.5rem 1rem",
               }}
-              // className="flex-container"
+            // className="flex-container"
             >
               <Typography variant="h5">More Info</Typography>
               <div