add calldata as part of the row details

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.5.12",
+  "version": "0.5.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/containers/Governance/NewProposal.jsx

@@ -137,6 +137,7 @@ const NewProposal = ({ config, address, connect, chainId }) => {
                                         <TableRow>
                                             <TableCell align="center" style={{ padding: "8px 0" }}>Function</TableCell>
                                             <TableCell align="center" style={{ padding: "8px 0" }}>Target</TableCell>
+                                            <TableCell align="center" style={{ padding: "8px 0" }}>Calldata</TableCell>
                                             <TableCell align="center" style={{ padding: "8px 0" }}>Value</TableCell>
                                         </TableRow>
                                     </TableHead>

src/containers/Governance/components/functions/index.jsx

@@ -1,6 +1,7 @@
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, useState } from "react";
 import { Box, Typography, Link, TableCell, TableRow, useTheme } from "@mui/material";
 import { decodeFunctionData } from 'viem';
+import toast from "react-hot-toast";
 
 import { StyledInputBase } from "../../../../components/Swap/SwapCard";
 import { TertiaryButton } from "../../../../components/Button";
@@ -56,6 +57,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
             return <AuditReservesParsed
                 isTable
                 key={index}
+                calldata={calldata}
                 label={label}
                 chainId={chainId}
                 remove={remove}
@@ -69,6 +71,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
                 isTable
                 args={args}
                 key={index}
+                calldata={calldata}
                 label={label}
                 chainId={chainId}
                 remove={remove}
@@ -82,6 +85,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
                 isTable
                 args={args}
                 key={index}
+                calldata={calldata}
                 label={label}
                 chainId={chainId}
                 remove={remove}
@@ -94,6 +98,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
             return <ParsedCell
                 isTable
                 key={index}
+                calldata={calldata}
                 label={label}
                 remove={remove}
                 nativeCoin={nativeCoin}
@@ -247,6 +252,8 @@ export const ArgumentInput = ({
 }
 
 export const ParsedCell = (props) => {
+    const [isCopied, setIsCopied] = useState(false);
+
     const etherscanLink = useMemo(() => {
         const client = config.getClient();
         let url = client?.chain?.blockExplorers?.default?.url;
@@ -256,6 +263,19 @@ export const ParsedCell = (props) => {
         return url;
     }, [props]);
 
+    const handleCalldataCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(props.calldata);
+            setIsCopied(true);
+            toast.success("Calldata successfully copied to your clipboard.", { duration: 2000 });
+
+            setTimeout(() => setIsCopied(false), 2000);
+        } catch (err) {
+            toast.error("Could not copy calldata to clipboard, check logs for error details.", { duration: 5000 });
+            console.error(err);
+        }
+    };
+
     return (
         <TableRow id={props.id + `--proposalFunction`} data-testid={props.id + `--proposalFunction`}>
             <TableCell align="center" style={{ padding: "8px 0" }}>
@@ -268,6 +288,12 @@ export const ParsedCell = (props) => {
                 </Link>
             </TableCell>
 
+            <TableCell align="center" style={{ padding: "8px 0" }}>
+                <Link onClick={handleCalldataCopy} target="_blank" rel="noopener noreferrer">
+                    <Typography>{shorten(props.calldata)}</Typography>
+                </Link>
+            </TableCell>
+
             <TableCell align="center" style={{ padding: "8px 0" }}>
                 <Typography>{formatCurrency(props.value, 2, props.nativeCoin)}</Typography>
             </TableCell>