Feat/add export signature button

src/app/components/downloadFiles.tsx

@@ -0,0 +1,40 @@
+import { Button } from '@mui/material';
+import React from 'react';
+
+const downloadFile = (data : any, filename : string , fileExtension = "json") => {
+    const jsonString = JSON.stringify(data, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const href = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = href;
+    link.download = `${filename}.${fileExtension}`;  
+    document.body.appendChild(link);
+    link.click();
+
+     // Cleanup
+    document.body.removeChild(link);
+    URL.revokeObjectURL(data);
+};
+
+const downloadSigniture = (govActionID : string, signature : string) => {   
+    const data = {
+        type: "Unwitnessed Tx ConwayEra",
+        description: "Ledger Cddl Format",
+        govActionID,
+        cborHex: signature
+    };
+    downloadFile(data, "vote", "signature");
+}
+
+interface DownloadButtonProps {
+    govActionID: string;
+    signature: string;
+  }
+
+export default function DownloadButton({ govActionID, signature }: DownloadButtonProps) {
+    return <Button variant="contained"
+    color="success"
+    sx={{ whiteSpace: "nowrap", px: 3 }} 
+    onClick={() => downloadSigniture(govActionID, signature)}>Download Signature</Button>;
+  }
+

src/app/components/transaction.tsx

@@ -5,11 +5,12 @@ import { useWallet } from "@meshsdk/react";
 import { deserializeAddress } from "@meshsdk/core";
 import { Button, TextField, Box, Typography, Container } from "@mui/material";
 import * as CSL from "@emurgo/cardano-serialization-lib-browser";
-import ReactJsonPretty from 'react-json-pretty';
+import ReactJsonPretty from "react-json-pretty";
 import * as txValidationUtils from "../utils/txValidationUtils";
 import { TransactionChecks } from "./validationChecks";
-import { decodeHextoTx,convertGAToBech, getCardanoScanURL } from "../utils/txUtils";
+import {decodeHextoTx,convertGAToBech,getCardanoScanURL} from "../utils/txUtils";
 import { VotingDetails } from "./votingDetails";
+import DownloadButton from "./downloadFiles";
 
 export const TransactionButton = () => {
   const [message, setMessage] = useState("");
@@ -298,6 +299,9 @@ export const TransactionButton = () => {
           >
             <Typography component="pre">{signature}</Typography>
           </Box>
+          <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}>
+            <DownloadButton signature={signature} govActionID={govActionID} />
+          </Box>
         </Box>
       )}