make parsed calldata adaptive

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

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",

src/containers/Governance/NewProposal.jsx

@@ -200,7 +200,20 @@ const NewProposal = ({ config, address, connect, chainId }) => {
                                 </Box>
                             }
                         >
-                            <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>
@@ -210,11 +223,18 @@ const NewProposal = ({ config, address, connect, chainId }) => {
                                                 <TableCell align="center" style={{ padding: "8px 0" }}>Value</TableCell>
                                             </TableRow>
                                         </TableHead>
-                                    <TableBody>{proposalFunctions.map((metadata, index) => {
+                                        <TableBody>{proposalFunctions?.map((metadata, index) => {
-                                        return parseFunctionCalldata(metadata, index, chainId, nativeCurrency, removeCalldata);
+                                            return parseFunctionCalldata({
+                                                metadata,
+                                                index,
+                                                chainId,
+                                                removeCalldata,
+                                                nativeCoin: nativeCurrency,
+                                             });
                                         })}</TableBody>
                                     </Table>
                                 </TableContainer>
+                            }
                         </Paper>}
                     </Box>
                 </Container>

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,7 +370,19 @@ const ProposalDetails = ({ chainId, address, connect, config }) => {
                         </Box>
                     }
                 >
-                    <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>
@@ -376,10 +393,16 @@ const ProposalDetails = ({ chainId, address, connect, config }) => {
                                     </TableRow>
                                 </TableHead>
                                 <TableBody>{proposalDetails?.map((metadata, index) => {
-                                return parseFunctionCalldata(metadata, index, chainId, nativeCurrency);
+                                    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>

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} />
 }

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;
 

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;
 

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,6 +283,7 @@ export const ParsedCell = (props) => {
         }
     };
 
+    if (props.isTable) {
         return (
             <TableRow id={props.id + `--proposalFunction`} data-testid={props.id + `--proposalFunction`}>
                 <TableCell align="center" style={{ padding: "8px 0" }}>
@@ -305,4 +314,55 @@ export const ParsedCell = (props) => {
                 </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>
+            </Box>
+
+            <Box display="flex" justifyContent="space-between">
+                <Typography>Calldata</Typography>
+                <Link onClick={handleCalldataCopy} target="_blank" rel="noopener noreferrer">
+                    <Typography>{shorten(props.calldata)}</Typography>
+                </Link>
+            </Box>
+
+            <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>
+
+            {(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>
+    )
+
 }