From 670e85889b85ba344393ff42deb29d65e02656c5 Mon Sep 17 00:00:00 2001
From: Uncle Fatso <uncle.fatso@ghostchain.io>
Date: Mon, 2 Mar 2026 14:03:36 +0300
Subject: [PATCH] make parsed calldata adaptive

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
---
 package.json                                  |   2 +-
 src/containers/Governance/NewProposal.jsx     |  50 +++++---
 src/containers/Governance/ProposalDetails.jsx |  70 ++++++++----
 .../components/functions/AuditReserves.jsx    |   8 --
 .../components/functions/CreateBond.jsx       |   7 +-
 .../components/functions/SetAdjustment.jsx    |   6 +-
 .../Governance/components/functions/index.jsx | 108 ++++++++++++++----
 7 files changed, 172 insertions(+), 79 deletions(-)

diff --git a/package.json b/package.json
index df7de01..f345d6e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.5.33",
+  "version": "0.5.34",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/containers/Governance/NewProposal.jsx b/src/containers/Governance/NewProposal.jsx
index da2680b..ebafebe 100644
--- a/src/containers/Governance/NewProposal.jsx
+++ b/src/containers/Governance/NewProposal.jsx
@@ -200,21 +200,41 @@ const NewProposal = ({ config, address, connect, chainId }) => {
                                 </Box>
                             }
                         >
-                            <TableContainer>
-                                <Table aria-label="Available bonds" style={{ tableLayout: "fixed" }}>
-                                    <TableHead>
-                                        <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>
-                                    <TableBody>{proposalFunctions.map((metadata, index) => {
-                                        return parseFunctionCalldata(metadata, index, chainId, nativeCurrency, removeCalldata);
-                                    })}</TableBody>
-                                </Table>
-                            </TableContainer>
+                            {isSmallScreen
+                                ? <Box display="flex" flexDirection="column">
+                                    {proposalFunctions?.map((metadata, index) => {
+                                        return parseFunctionCalldata({
+                                            metadata,
+                                            index,
+                                            chainId,
+                                            removeCalldata,
+                                            nativeCoin: nativeCurrency,
+                                            isTable: false,
+                                         });
+                                    })}
+                                </Box>
+                                : <TableContainer>
+                                    <Table aria-label="Available bonds" style={{ tableLayout: "fixed" }}>
+                                        <TableHead>
+                                            <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>
+                                        <TableBody>{proposalFunctions?.map((metadata, index) => {
+                                            return parseFunctionCalldata({
+                                                metadata,
+                                                index,
+                                                chainId,
+                                                removeCalldata,
+                                                nativeCoin: nativeCurrency,
+                                             });
+                                        })}</TableBody>
+                                    </Table>
+                                </TableContainer>
+                            }
                         </Paper>}
                     </Box>
                 </Container>
diff --git a/src/containers/Governance/ProposalDetails.jsx b/src/containers/Governance/ProposalDetails.jsx
index 0b80804..dc3654e 100644
--- a/src/containers/Governance/ProposalDetails.jsx
+++ b/src/containers/Governance/ProposalDetails.jsx
@@ -216,15 +216,20 @@ const ProposalDetails = ({ chainId, address, connect, config }) => {
                 }}
             >
                 <Box sx={{ mt: "15px" }}>
-                    <Box display="flex" justifyContent="space-between" gap="20px">
+                    <Box
+                        gap="20px"
+                        display="flex"
+                        justifyContent={"space-between"}
+                        flexDirection={isSmallScreen ? "column" : "row"}
+                    >
                         <Paper
                             fullWidth
                             enableBackground
                             headerContent={
                                 <Box display="flex" alignItems="center" flexDirection="row" gap="10px">
-                                    <Typography variant="h6">
+                                    {!isSmallScreen &&<Typography variant="h6">
                                         Progress
-                                    </Typography>
+                                    </Typography>}
                                     <Chip
                                         sx={{ marginTop: "4px", width: "88px" }}
                                         label={convertStatusToLabel(proposalState)}
@@ -306,14 +311,14 @@ const ProposalDetails = ({ chainId, address, connect, config }) => {
                                                     disabled={proposalState !== 1 || pastVotes?._value === 0n || isPending}
                                                     onClick={() => handleVote(1)}
                                                 >
-                                                    For
+                                                    {isPending ? "Voting..." : "For"}
                                                 </SecondaryButton>
                                                 <SecondaryButton
                                                     fullWidth
                                                     disabled={proposalState !== 1 || pastVotes?._value === 0n || isPending}
                                                     onClick={() => handleVote(0)}
                                                 >
-                                                    Against
+                                                    {isPending ? "Voting..." : "Against"}
                                                 </SecondaryButton>
                                             </>
                                         : <SecondaryButton
@@ -365,21 +370,39 @@ const ProposalDetails = ({ chainId, address, connect, config }) => {
                         </Box>
                     }
                 >
-                    <TableContainer>
-                        <Table aria-label="Available bonds" style={{ tableLayout: "fixed" }}>
-                            <TableHead>
-                                <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>
-                            <TableBody>{proposalDetails?.map((metadata, index) => {
-                                return parseFunctionCalldata(metadata, index, chainId, nativeCurrency);
-                            })}</TableBody>
-                        </Table>
-                    </TableContainer>
+                    {isSmallScreen
+                        ? <Box display="flex" flexDirection="column">
+                            {proposalDetails?.map((metadata, index) => {
+                                return parseFunctionCalldata({
+                                    metadata,
+                                    index,
+                                    chainId,
+                                    nativeCoin: nativeCurrency,
+                                    isTable: false,
+                                 });
+                            })}
+                        </Box>
+                        : <TableContainer>
+                            <Table aria-label="Available bonds" style={{ tableLayout: "fixed" }}>
+                                <TableHead>
+                                    <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>
+                                <TableBody>{proposalDetails?.map((metadata, index) => {
+                                    return parseFunctionCalldata({
+                                        metadata,
+                                        index,
+                                        chainId,
+                                        nativeCoin: nativeCurrency,
+                                     });
+                                })}</TableBody>
+                            </Table>
+                        </TableContainer>
+                    }
                 </Paper>
             </Container>
         </Box>
@@ -418,7 +441,12 @@ const VotingTimeline = ({ connect, handleExecute, handleRelease, proposalLocked,
                     disabled={isPending || state !== 4}
                     onClick={() => address === "" ? connect() : handleExecute()}
                 >
-                    {address === "" ? "Connect" : state === 4 ? "Execute" : convertStatusToLabel(state)}
+                    {address === ""
+                        ? "Connect"
+                        : state !== 4
+                            ? convertStatusToLabel(state)
+                            : isPending ? "Executing..." : "Execute"
+                        }
                 </SecondaryButton>
             </Box>
         </Box>
diff --git a/src/containers/Governance/components/functions/AuditReserves.jsx b/src/containers/Governance/components/functions/AuditReserves.jsx
index f7655f8..1c09d46 100644
--- a/src/containers/Governance/components/functions/AuditReserves.jsx
+++ b/src/containers/Governance/components/functions/AuditReserves.jsx
@@ -27,13 +27,5 @@ export const AuditReservesSteps = () => {
 }
 
 export const AuditReservesParsed = (props) => {
-    return (
-        <>
-            {props.isTable && <AuditReservesParsedCell {...props} />}
-        </>
-    )
-}
-
-const AuditReservesParsedCell = (props) => {
     return <ParsedCell {...props} />
 }
diff --git a/src/containers/Governance/components/functions/CreateBond.jsx b/src/containers/Governance/components/functions/CreateBond.jsx
index 5ebbd95..7a67b35 100644
--- a/src/containers/Governance/components/functions/CreateBond.jsx
+++ b/src/containers/Governance/components/functions/CreateBond.jsx
@@ -34,6 +34,7 @@ export const prepareCreateBondDescription = "function creates a new bond market
 export const CreateBondParsed = (props) => {
     const [isOpened, setIsOpened] = useState(false);
     const { symbol: ftsoSymbol } = useTokenSymbol(props.chainId, "FTSO");
+    console.log(props)
     return (
         <>
             <Modal
@@ -51,15 +52,11 @@ export const CreateBondParsed = (props) => {
                     <CreateBondSteps args={props.args} ftsoSymbol={ftsoSymbol} nativeCurrency={props.nativeCoin} {...props} />
                 </Box>
             </Modal>
-            {props.isTable && <CreateBondParsedCell isOpened={isOpened} setIsOpened={setIsOpened} {...props}/>}
+            <ParsedCell isOpened={isOpened} setIsOpened={setIsOpened} {...props} />
         </>
     )
 }
 
-const CreateBondParsedCell = (props) => {
-    return <ParsedCell {...props} />
-}
-
 export const CreateBondSteps = ({ nativeCurrency, ftsoSymbol, chainId, toInitialStep, addCalldata, args }) => {
     const createMode = args === undefined;
 
diff --git a/src/containers/Governance/components/functions/SetAdjustment.jsx b/src/containers/Governance/components/functions/SetAdjustment.jsx
index 4a02f87..af2411d 100644
--- a/src/containers/Governance/components/functions/SetAdjustment.jsx
+++ b/src/containers/Governance/components/functions/SetAdjustment.jsx
@@ -45,15 +45,11 @@ export const SetAdjustmentParsed = (props) => {
                     <SetAdjustmentSteps {...props} />
                 </Box>
             </Modal>
-            {props.isTable && <SetAdjustmentParsedCell isOpened={isOpened} setIsOpened={setIsOpened} {...props} />}
+            <ParsedCell isOpened={isOpened} setIsOpened={setIsOpened} {...props} />
         </>
     )
 }
 
-const SetAdjustmentParsedCell = (props) => {
-    return <ParsedCell {...props} />
-}
-
 export const SetAdjustmentSteps = ({ chainId, toInitialStep, addCalldata, args }) => {
     const createMode = args === undefined;
 
diff --git a/src/containers/Governance/components/functions/index.jsx b/src/containers/Governance/components/functions/index.jsx
index ca7e58f..7caf7a1 100644
--- a/src/containers/Governance/components/functions/index.jsx
+++ b/src/containers/Governance/components/functions/index.jsx
@@ -44,7 +44,14 @@ const identifyAction = (calldata) => {
     return decoded;
 }
 
-export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, removeCalldata) => {
+export const parseFunctionCalldata = ({
+    metadata,
+    index,
+    chainId,
+    nativeCoin,
+    removeCalldata,
+    isTable = true,
+}) => {
     const { label, calldata, target, value } = metadata;
     const { functionName, args } = identifyAction(calldata);
     const labelOrName = label ?? (functionName ?? "Unknown");
@@ -54,7 +61,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
     switch (functionName) {
         case "auditReserves":
             return <AuditReservesParsed
-                isTable
+                isTable={isTable}
                 key={index}
                 calldata={calldata}
                 label={labelOrName}
@@ -67,7 +74,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
             />;
         case "setAdjustment":
             return <SetAdjustmentParsed
-                isTable
+                isTable={isTable}
                 args={args}
                 key={index}
                 calldata={calldata}
@@ -81,7 +88,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
             />;
         case "create":
             return <CreateBondParsed
-                isTable
+                isTable={isTable}
                 args={args}
                 key={index}
                 calldata={calldata}
@@ -95,7 +102,7 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
             />;
         default:
             return <ParsedCell
-                isTable
+                isTable={isTable}
                 key={index}
                 calldata={calldata}
                 label="Unknown"
@@ -250,6 +257,7 @@ export const ArgumentInput = ({
     )
 }
 
+// TODO: rename
 export const ParsedCell = (props) => {
     const [isCopied, setIsCopied] = useState(false);
 
@@ -275,34 +283,86 @@ export const ParsedCell = (props) => {
         }
     };
 
-    return (
-        <TableRow id={props.id + `--proposalFunction`} data-testid={props.id + `--proposalFunction`}>
-            <TableCell align="center" style={{ padding: "8px 0" }}>
-                <Typography>{props.label}</Typography>
-            </TableCell>
+    if (props.isTable) {
+        return (
+            <TableRow id={props.id + `--proposalFunction`} data-testid={props.id + `--proposalFunction`}>
+                <TableCell align="center" style={{ padding: "8px 0" }}>
+                    <Typography>{props.label}</Typography>
+                </TableCell>
 
-            <TableCell align="center" style={{ padding: "8px 0" }}>
+                <TableCell align="center" style={{ padding: "8px 0" }}>
+                    <Link href={etherscanLink} target="_blank" rel="noopener noreferrer">
+                        <Typography>{shorten(props.target)}</Typography>
+                    </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, 4, props.nativeCoin)}</Typography>
+                </TableCell>
+
+                <TableCell>
+                    <div style={{ display: 'flex', gap: '8px' }}>
+                        {props.args && <TertiaryButton fullWidth onClick={() => props.setIsOpened(!props.isOpened)}>View</TertiaryButton>}
+                        {props.remove && <TertiaryButton fullWidth onClick={() => props.remove()}>Delete</TertiaryButton>}
+                    </div>
+                </TableCell>
+            </TableRow>
+        )
+    }
+
+    return (
+        <Box
+            id={props.id + `--proposalFunction`}
+            data-testid={props.id + `--proposalFunction`}
+            display="flex"
+            flexDirection="column"
+        >
+            <Box display="flex" justifyContent="space-between">
+                <Typography>{`Function ${props.id + 1}`}</Typography>
+                <Typography>{props.label}</Typography>
+            </Box>
+
+            <Box display="flex" justifyContent="space-between">
+                <Typography>Target</Typography>
                 <Link href={etherscanLink} target="_blank" rel="noopener noreferrer">
                     <Typography>{shorten(props.target)}</Typography>
                 </Link>
-            </TableCell>
+            </Box>
 
-            <TableCell align="center" style={{ padding: "8px 0" }}>
+            <Box display="flex" justifyContent="space-between">
+                <Typography>Calldata</Typography>
                 <Link onClick={handleCalldataCopy} target="_blank" rel="noopener noreferrer">
                     <Typography>{shorten(props.calldata)}</Typography>
                 </Link>
-            </TableCell>
+            </Box>
 
-            <TableCell align="center" style={{ padding: "8px 0" }}>
-                <Typography>{formatCurrency(props.value, 4, props.nativeCoin)}</Typography>
-            </TableCell>
+            <Box display="flex" justifyContent="space-between">
+                <Typography>Value</Typography>
+                <Link onClick={handleCalldataCopy} target="_blank" rel="noopener noreferrer">
+                    <Typography>{formatCurrency(props.value, 4, props.nativeCoin)}</Typography>
+                </Link>
+            </Box>
 
-            <TableCell>
-                <div style={{ display: 'flex', gap: '8px' }}>
-                    {props.args && <TertiaryButton fullWidth onClick={() => props.setIsOpened(!props.isOpened)}>View</TertiaryButton>}
-                    {props.remove && <TertiaryButton fullWidth onClick={() => props.remove()}>Delete</TertiaryButton>}
-                </div>
-            </TableCell>
-        </TableRow>
+            {(props.args || props.remove) && <Box
+                display="flex"
+                flexDirection="row"
+                justifyContent="space-between"
+                gap="10px"
+                marginTop="10px"
+            >
+                {props.args && <TertiaryButton fullWidth onClick={() => props.setIsOpened(!props.isOpened)}>View</TertiaryButton>}
+                {props.remove && <TertiaryButton fullWidth onClick={() => props.remove()}>Delete</TertiaryButton>}
+            </Box>}
+
+            <hr width="100%" style={{ margin: "20px 0" }} />
+
+        </Box>
     )
+
 }