differentiate time on proposals list

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
make parsed calldata adaptive
2026-03-03 13:33:58 +03:00 · 2026-03-02 14:03:36 +03:00
8 changed files with 179 additions and 82 deletions
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ghost-dao-interface",
  "private": true,
-  "version": "0.5.33",
+  "version": "0.5.35",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- 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>
--- 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>
--- a/src/containers/Governance/components/ProposalsList.jsx
+++ b/src/containers/Governance/components/ProposalsList.jsx
@ -349,10 +349,11 @@ const ProposalFilterTrigger = ({ trigger, setTrigger }) => {
 }

 const convertDeadline = (deadline, blockNumber, chainId) => {
-    const diff = blockNumber > deadline ? blockNumber - deadline : deadline - blockNumber;
+    const alreadyHappened = blockNumber > deadline;
+    const diff = alreadyHappened ? blockNumber - deadline : deadline - blockNumber;
    const voteSeconds = Number(diff * networkAvgBlockSpeed(chainId));

-    const result = prettifySeconds(voteSeconds, "mins");
+    const result = prettifySeconds(voteSeconds, "min");
    if (result === "now") {
        return new Date(Date.now()).toLocaleDateString('en-US', {
            year: 'numeric',
@ -361,7 +362,10 @@ const convertDeadline = (deadline, blockNumber, chainId) => {
        });
    }

-    return `in ${result}`;
+    const prefix = alreadyHappened ? "" : "in ";
+    const postfix = alreadyHappened ? " ago" : "";
+
+    return `${prefix}${result}${postfix}`;
 }

 export default ProposalsList;
--- 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} />
 }
--- 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;

--- 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;

--- 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>
    )
+
 }
Author	SHA1	Message	Date
Uncle Fatso	43620736cf	differentiate time on proposals list Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2026-03-03 13:33:58 +03:00
Uncle Fatso	670e85889b	make parsed calldata adaptive Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2026-03-02 14:03:36 +03:00