view parsed calldata as modal window

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

package.json

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

src/containers/Bond/components/BondInputArea.jsx

@@ -86,6 +86,8 @@ const BondInputArea = ({
         : bond.capacity.inBaseToken
     );
 
+    console.log(bond.quoteToken.icons)
+
     return (
         <Box minHeight="calc(100vh - 210px)" display="flex" flexDirection="column" justifyContent="center">
             <Box display="flex" flexDirection="row" width="100%" justifyContent="center" mt="10px">

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

@@ -2,9 +2,12 @@ import { useRef, useMemo, useState, useEffect } from "react";
 import { encodeFunctionData } from 'viem';
 import { Box, Typography, TableRow, TableCell, useTheme } from "@mui/material";
 
+import Modal from "../../../../components/Modal/Modal";
 import Select from "../../../../components/Select/Select";
 import { PrimaryButton, TertiaryButton } from "../../../../components/Button";
 import { shorten } from "../../../../helpers";
+import { useTokenSymbol } from "../../../../hooks/tokens";
+
 import { BooleanTrigger, ArgumentInput, ParsedCell } from "./index";
 
 import {
@@ -29,9 +32,26 @@ export const prepareCreateBondCalldata = (chainId, markets, terms, quoteToken, i
 export const prepareCreateBondDescription = "Create Bond function creates a new bond market by processing pricing, capacity, and term inputs. It initializes and stores the new bond market's complete configuration in the protocol.";
 
 export const CreateBondParsed = (props) => {
+    const [isOpened, setIsOpened] = useState(false);
+    const { symbol: ftsoSymbol } = useTokenSymbol(props.chainId, "FTSO");
     return (
         <>
-            {props.isTable && <CreateBondParsedCell {...props} />}
+            <Modal
+                headerContent={
+                    <Box display="flex" justifyContent="center" alignItems="center" gap="15px">
+                        <Typography variant="h4">View Create Bond</Typography>
+                    </Box>
+                }
+                open={isOpened}
+                onClose={() => setIsOpened(false)}
+                maxWidth="460px"
+                minHeight="200px"
+            >
+                <Box minHeight="220px" display="flex" alignItems="start" justifyContent="space-between" flexDirection="column">
+                    <CreateBondSteps args={props.args} ftsoSymbol={ftsoSymbol} nativeCurrency={props.nativeCoin} {...props} />
+                </Box>
+            </Modal>
+            {props.isTable && <CreateBondParsedCell isOpened={isOpened} setIsOpened={setIsOpened} {...props}/>}
         </>
     )
 }
@@ -40,23 +60,25 @@ const CreateBondParsedCell = (props) => {
     return <ParsedCell {...props} />
 }
 
-export const CreateBondSteps = ({ nativeCurrency, ftsoSymbol, chainId, toInitialStep, addCalldata }) => {
+export const CreateBondSteps = ({ nativeCurrency, ftsoSymbol, chainId, toInitialStep, addCalldata, args }) => {
+    const createMode = args === undefined;
+
     const [step, setStep] = useState(1);
     const [nextDisabled, setNextDisabled] = useState(false);
 
-    const [capacity, setCapacity] = useState();
+    const [capacity, setCapacity] = useState(args?.at(0)?.at(0));
-    const [initialPrice, setInitialPrice] = useState();
+    const [initialPrice, setInitialPrice] = useState(args?.at(0)?.at(1));
-    const [debtBuffer, setDebtBuffer] = useState();
+    const [debtBuffer, setDebtBuffer] = useState(args?.at(0)?.at(2));
 
-    const [depositInterval, setDepositInterval] = useState();
+    const [depositInterval, setDepositInterval] = useState(args?.at(3)?.at(0));
-    const [tuneInterval, setTuneInterval] = useState();
+    const [tuneInterval, setTuneInterval] = useState(args?.at(3)?.at(1));
 
-    const [tokenAddress, setTokenAddress] = useState();
+    const [tokenAddress, setTokenAddress] = useState(args?.at(2));
-    const [capacityInQuote, setCapacityInQuote] = useState(true);
+    const [capacityInQuote, setCapacityInQuote] = useState(args?.at(4)?.at(0) ?? true);
-    const [fixedTerm, setFixedTerm] = useState(false);
+    const [fixedTerm, setFixedTerm] = useState(args?.at(4)?.at(1) ?? false);
 
-    const [vestingLength, setVestingLength] = useState();
+    const [vestingLength, setVestingLength] = useState(args?.at(1)?.at(0));
-    const [conclusionTimestamp, setConclusionTimestamp] = useState();
+    const [conclusionTimestamp, setConclusionTimestamp] = useState(args?.at(1)?.at(1));
 
     const handleProceed = () => {
         const markets = [capacity, initialPrice, debtBuffer];
@@ -67,6 +89,8 @@ export const CreateBondSteps = ({ nativeCurrency, ftsoSymbol, chainId, toInitial
         addCalldata(prepareCreateBondCalldata(chainId, markets, terms, tokenAddress, intervals, booleans))
     }
 
+    const empty = () => {};
+
     const incrementStep = () => {
         setStep(prev => prev + 1);
     }
@@ -99,45 +123,47 @@ export const CreateBondSteps = ({ nativeCurrency, ftsoSymbol, chainId, toInitial
     return (
         <Box height="100%" width="100%" display="flex" flexDirection="column" justifyContent="space-between">
             {step === 1 && <TokenAndBooleansArguments
+                tokenAddress={tokenAddress}
+                createMode={createMode}
                 possibleTokens={possibleTokens}
-                setTokenAddress={setTokenAddress}
+                setTokenAddress={createMode ? setTokenAddress : empty}
                 nativeCurrency={nativeCurrency}
                 ftsoSymbol={ftsoSymbol}
                 capacityInQuote={capacityInQuote}
-                setCapacityInQuote={setCapacityInQuote}
+                setCapacityInQuote={createMode ? setCapacityInQuote : empty}
                 fixedTerm={fixedTerm}
-                setFixedTerm={setFixedTerm}
+                setFixedTerm={createMode ? setFixedTerm : empty}
             />}
             {step === 2 && <MarketArguments
                 capacityInQuote={capacityInQuote}
                 nativeCurrency={nativeCurrency}
                 ftsoSymbol={ftsoSymbol}
                 capacity={capacity}
-                setCapacity={setCapacity}
+                setCapacity={createMode ? setCapacity : empty}
                 initialPrice={initialPrice}
-                setInitialPrice={setInitialPrice}
+                setInitialPrice={createMode ? setInitialPrice : empty}
                 debtBuffer={debtBuffer}
-                setDebtBuffer={setDebtBuffer}
+                setDebtBuffer={createMode ? setDebtBuffer : empty}
             />}
             {step === 3 && <IntervalsArguments
                 depositInterval={depositInterval}
-                setDepositInterval={setDepositInterval}
+                setDepositInterval={createMode ? setDepositInterval : empty}
                 tuneInterval={tuneInterval}
-                setTuneInterval={setTuneInterval}
+                setTuneInterval={createMode ? setTuneInterval : empty}
             />}
             {step === 4 && <TermsAgruments
                 fixedTerm={fixedTerm}
                 vestingLength={vestingLength}
-                setVestingLength={setVestingLength}
+                setVestingLength={createMode ? setVestingLength : empty}
                 conclusionTimestamp={conclusionTimestamp}
-                setConclusionTimestamp={setConclusionTimestamp}
+                setConclusionTimestamp={createMode ? setConclusionTimestamp : empty}
             />}
             <Box width="100%" sx={{ marginTop: "20px" }} display="flex" flexDirection="column" gap="5px">
                 <Box display="flex" gap="10px">
                     <TertiaryButton onClick={() => decrementStep()} fullWidth>Back</TertiaryButton>
                     <TertiaryButton disabled={isNextDisabled} onClick={() => incrementStep()} fullWidth>Next</TertiaryButton>
                 </Box>
-                {step === 4 && <PrimaryButton onClick={() => handleProceed()} fullWidth>Create Function</PrimaryButton>}
+                {(step === 4 && createMode) && <PrimaryButton onClick={() => handleProceed()} fullWidth>Create Function</PrimaryButton>}
             </Box>
         </Box>
     );
@@ -237,6 +263,8 @@ const TermsAgruments = ({
 }
 
 const TokenAndBooleansArguments = ({
+    createMode,
+    tokenAddress,
     possibleTokens,
     nativeCurrency,
     ftsoSymbol,
@@ -247,11 +275,13 @@ const TokenAndBooleansArguments = ({
     setFixedTerm,
 }) => {
     const theme = useTheme();
-    const [selectedOption, setSelectedOption] = useState();
+    const [selectedOption, setSelectedOption] = useState(tokenAddress);
 
     const handleChange = (event) => {
-        setSelectedOption(event.target.value);
+        if (createMode) {
-        setTokenAddress(event.target.value);
+            setSelectedOption(event.target.value);
+            setTokenAddress(event.target.value);
+        }
     };
 
     return (

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

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { encodeFunctionData } from 'viem';
 import { Box, Typography, TableRow, TableCell, useTheme } from "@mui/material";
 
+import Modal from "../../../../components/Modal/Modal";
 import { PrimaryButton, TertiaryButton } from "../../../../components/Button";
 
 import {
@@ -26,9 +27,25 @@ export const prepareSetAdjustmentCalldata = (chainId, rateChange, targetRate, in
 export const prepareSetAdjustmentDescription = "Set Adjustment function schedules a gradual change to the staking APY. It increases or decreases the staking APY by a specified rate per epoch until a target rate reached.";
 
 export const SetAdjustmentParsed = (props) => {
+    const [isOpened, setIsOpened] = useState(false);
     return (
         <>
-            {props.isTable && <SetAdjustmentParsedCell {...props} />}
+            <Modal
+                headerContent={
+                    <Box display="flex" justifyContent="center" alignItems="center" gap="15px">
+                        <Typography variant="h4">View Set Adjustment</Typography>
+                    </Box>
+                }
+                open={isOpened}
+                onClose={() => setIsOpened(false)}
+                maxWidth="460px"
+                minHeight="200px"
+            >
+                <Box minHeight="220px" display="flex" alignItems="start" justifyContent="space-between" flexDirection="column">
+                    <SetAdjustmentSteps {...props} />
+                </Box>
+            </Modal>
+            {props.isTable && <SetAdjustmentParsedCell isOpened={isOpened} setIsOpened={setIsOpened} {...props} />}
         </>
     )
 }
@@ -37,10 +54,12 @@ const SetAdjustmentParsedCell = (props) => {
     return <ParsedCell {...props} />
 }
 
-export const SetAdjustmentSteps = ({ chainId, toInitialStep, addCalldata }) => {
+export const SetAdjustmentSteps = ({ chainId, toInitialStep, addCalldata, args }) => {
-    const [rate, setRate] = useState();
+    const createMode = args === undefined;
-    const [target, setTarget] = useState();
+
-    const [increase, setIncrease] = useState(false);
+    const [rate, setRate] = useState(args?.at(0));
+    const [target, setTarget] = useState(args?.at(1));
+    const [increase, setIncrease] = useState(args?.at(1) ?? true);
 
     const handleProceed = () => {
         addCalldata(prepareSetAdjustmentCalldata(chainId, rate, target, increase));
@@ -53,27 +72,29 @@ export const SetAdjustmentSteps = ({ chainId, toInitialStep, addCalldata }) => {
                     value={increase}
                     leftText="Add"
                     rightText="Sub"
-                    setLeftValue={() => setIncrease(true)}
+                    setLeftValue={() => createMode ? setIncrease(true) : {}}
-                    setRightValue={() => setIncrease(false)}
+                    setRightValue={() => createMode ? setIncrease(false) : {}}
                     label="Direction"
                     tooltip="Determines the direction of the adjustment. When Add the parameter value will gradually increase; when Sub, it will decrease toward the target rate"
                 />
                 <ArgumentInput
+                    disabled={!createMode}
                     endString="%"
                     label="Change Rate"
                     value={rate ?? ""}
-                    setValue={setRate}
+                    setValue={createMode ? setRate : () => {}}
                     tooltip="Each epoch, the current staking reward rate changes by this amount until the target rate is reached"
                 />
                 <ArgumentInput
+                    disabled={!createMode}
                     endString="%"
                     label="Target Rate"
                     value={target ?? ""}
-                    setValue={setTarget}
+                    setValue={createMode ? setTarget : () => {}}
                     tooltip="The final desired value for the reward rate, the adjustment process will continue automatically until this specific level is reached"
                 />
             </Box>
-            <Box width="100%" sx={{ marginTop: "20px" }} display="flex" flexDirection="column" gap="5px">
+            {createMode && <Box width="100%" sx={{ marginTop: "20px" }} display="flex" flexDirection="column" gap="5px">
                 <Box display="flex" gap="10px">
                     <TertiaryButton onClick={toInitialStep} fullWidth>Back</TertiaryButton>
                     <TertiaryButton disabled fullWidth>Next</TertiaryButton>
@@ -85,7 +106,7 @@ export const SetAdjustmentSteps = ({ chainId, toInitialStep, addCalldata }) => {
                 >
                     Create Function
                 </PrimaryButton>
-            </Box>
+            </Box>}
         </Box>
     );
 }

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

@@ -67,8 +67,10 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
         case "setAdjustment":
             return <SetAdjustmentParsed
                 isTable
+                args={args}
                 key={index}
                 label={label}
+                chainId={chainId}
                 remove={remove}
                 nativeCoin={nativeCoin}
                 value={value}
@@ -78,8 +80,10 @@ export const parseFunctionCalldata = (metadata, index, chainId, nativeCoin, remo
         case "create":
             return <CreateBondParsed
                 isTable
+                args={args}
                 key={index}
                 label={label}
+                chainId={chainId}
                 remove={remove}
                 nativeCoin={nativeCoin}
                 value={value}
@@ -196,6 +200,7 @@ export const ArgumentInput = ({
     tooltip,
     value,
     setValue,
+    disabled,
     inputType = "number",
     placeholder = "0",
     maxWidth = "100%"
@@ -222,6 +227,7 @@ export const ArgumentInput = ({
             >
                 <Box width="100%" display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
                     <StyledInputBase
+                        disabled={disabled}
                         placeholder={placeholder}
                         type={inputType}
                         fontSize="20px"
@@ -266,12 +272,12 @@ export const ParsedCell = (props) => {
                 <Typography>{formatCurrency(props.value, 2, props.nativeCoin)}</Typography>
             </TableCell>
 
-            {props.remove && <TableCell>
+            <TableCell>
                 <div style={{ display: 'flex', gap: '8px' }}>
-                    <TertiaryButton fullWidth onClick={() => alert("Do we need it????")}>Edit</TertiaryButton>
+                    {props.args && <TertiaryButton fullWidth onClick={() => props.setIsOpened(!props.isOpened)}>View</TertiaryButton>}
-                    <TertiaryButton fullWidth onClick={() => props.remove()}>Delete</TertiaryButton>
+                    {props.remove && <TertiaryButton fullWidth onClick={() => props.remove()}>Delete</TertiaryButton>}
                 </div>
-            </TableCell>}
+            </TableCell>
         </TableRow>
     )
 }