From d069041c1d7b8033418d728ecbc86692178a1154 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Wed, 21 Dec 2022 12:30:35 +0100 Subject: [PATCH 1/8] Squashed commit of the following: commit b4bb2cce33b518ffc1c51571cd4eba1e3d3809e6 Author: fabiolalombardim Date: Wed Dec 21 12:16:17 2022 +0100 internal link to Lite --- src/modules/explorer/pages/DAOList/index.tsx | 55 ++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx index 41f3d7cb..e9e7e229 100644 --- a/src/modules/explorer/pages/DAOList/index.tsx +++ b/src/modules/explorer/pages/DAOList/index.tsx @@ -19,6 +19,7 @@ import { DAOItem } from "./components/DAOItem" import { SearchInput } from "./components/Searchbar" import { MainButton } from "../../../common/MainButton" import { EnvKey, getEnv } from "services/config" +import { LaunchOutlined } from "@material-ui/icons" const PageContainer = styled("div")(({ theme }) => ({ width: "1000px", @@ -82,6 +83,43 @@ const DAOItemCard = styled(Grid)({ } }) +const BannerContainer = styled(Grid)(({ theme }) => ({ + background: theme.palette.primary.main, + padding: "30px 48px", + borderRadius: 8, + display: "inline-block", + [theme.breakpoints.down("md")]: { + padding: "28px 38px" + } +})) + +const LinkText = styled(Typography)(({ theme }) => ({ + fontSize: 18, + fontWeight: 200, + lineHeight: "146.3%", + cursor: "default", + [theme.breakpoints.down("sm")]: { + fontSize: 16 + }, + [theme.breakpoints.down("xs")]: { + fontSize: 13 + } +})) + +const ExternalLink = styled(Typography)({ + "display": "inline", + "cursor": "pointer", + "fontWeight": 200, + "&:hover": { + textDecoration: "underline" + } +}) + +const ExternalLinkIcon = styled(LaunchOutlined)({ + fontSize: 14, + marginBottom: 2 +}) + export const DAOList: React.FC = () => { const { network, account, tezos } = useTezos() const { data: daos, isLoading } = useAllDAOs(network) @@ -129,11 +167,28 @@ export const DAOList: React.FC = () => { setSelectedTab(newValue) } + const goToHomebaseLite = () => { + window.open("https://lite.tezos-homebase.io/") + } + return ( <> + + + + For off-chain token-weighted polls, try{" "} + {" "} + + {" "} + Homebase Lite + {" "} + + + + Date: Sun, 29 Jan 2023 15:41:44 +0100 Subject: [PATCH 2/8] added tooltip for token id --- src/modules/creator/steps/DaoSettings.tsx | 68 ++++------------------- 1 file changed, 12 insertions(+), 56 deletions(-) diff --git a/src/modules/creator/steps/DaoSettings.tsx b/src/modules/creator/steps/DaoSettings.tsx index 0df9f21d..7c067340 100644 --- a/src/modules/creator/steps/DaoSettings.tsx +++ b/src/modules/creator/steps/DaoSettings.tsx @@ -169,15 +169,6 @@ const DaoSettingsForm = withRouter(({ submitForm, values, setFieldValue, errors, inputProps={{ maxLength: 36 }} - // InputProps={{ - // endAdornment: ( - // - // - // - // - // - // ) - // }} /> {errors.governanceToken?.address && touched.governanceToken?.address ? ( @@ -195,15 +186,18 @@ const DaoSettingsForm = withRouter(({ submitForm, values, setFieldValue, errors, placeholder="0" name="governanceToken.tokenId" component={CustomFormikTextField} - // InputProps={{ - // endAdornment: ( - // - // - // - // - // - // ) - // }} + InputProps={{ + endAdornment: ( + + + + + + ) + }} /> {errors.governanceToken?.tokenId && touched.governanceToken?.tokenId ? ( @@ -230,48 +224,10 @@ const DaoSettingsForm = withRouter(({ submitForm, values, setFieldValue, errors, type="text" placeholder="My Group’s Token" component={CustomFormikTextField} - // InputProps={{ - // endAdornment: ( - // - // - // - // - // - // ) - // }} > {errors.name && touched.name ? {errors.name} : null} - - {/* - - {" "} - Token Symbol{" "} - - - - - - - - ) - }} - > - - {errors.symbol && touched.symbol ? {errors.symbol} : null} - */} From f7ae43977c560f046173d3d185656a5e3d67e8fe Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Tue, 31 Jan 2023 11:25:12 +0100 Subject: [PATCH 3/8] fixed conditional votting settings depending on network --- src/modules/creator/state/types.ts | 12 + src/modules/creator/steps/Governance.tsx | 328 +++++++++++++++++++---- src/theme/legacy.ts | 3 +- 3 files changed, 285 insertions(+), 58 deletions(-) diff --git a/src/modules/creator/state/types.ts b/src/modules/creator/state/types.ts index a3b8613e..912bfa6e 100644 --- a/src/modules/creator/state/types.ts +++ b/src/modules/creator/state/types.ts @@ -30,6 +30,18 @@ export type VotingSettings = { votingBlocks: number proposalFlushBlocks: number proposalExpiryBlocks: number + + votingBlocksDay?: number + votingBlocksHours?: number + votingBlocksMinutes?: number + + proposalFlushBlocksDay?: number + proposalFlushBlocksHours?: number + proposalFlushBlocksMinutes?: number + + proposalExpiryBlocksDay?: number + proposalExpiryBlocksHours?: number + proposalExpiryBlocksMinutes?: number } export interface MigrationParams { diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx index 730c65a1..b2ee539d 100644 --- a/src/modules/creator/steps/Governance.tsx +++ b/src/modules/creator/steps/Governance.tsx @@ -1,15 +1,4 @@ -import { - Grid, - Paper, - styled, - Typography, - Slider, - withStyles, - withTheme, - Box, - Tooltip, - InputAdornment -} from "@material-ui/core" +import { Grid, Paper, styled, Typography, Slider, withStyles, withTheme, Box, Tooltip } from "@material-ui/core" import { TextField } from "formik-material-ui" import React, { useContext, useEffect, useState } from "react" import { Field, Form, Formik, FormikErrors, getIn } from "formik" @@ -21,9 +10,23 @@ import { InfoOutlined, InfoRounded } from "@material-ui/icons" import { getNetworkStats } from "services/bakingBad/stats" import { useTezos } from "services/beacon/hooks/useTezos" import { EstimatedTime } from "modules/explorer/components/EstimatedTime" -import { theme } from "../../../theme" import dayjs from "dayjs" import { TitleBlock } from "modules/common/TitleBlock" +import { networkNameMap } from "services/bakingBad" + +const TimeBox = styled(Grid)(({ theme }) => ({ + background: theme.palette.primary.dark, + borderRadius: 8, + width: 72, + minHeight: 59, + marginBottom: 16, + display: "grid" +})) + +const TimeText = styled(Typography)({ + marginTop: -20, + marginLeft: 16 +}) const CustomTooltip = styled(Tooltip)({ marginLeft: 8 @@ -150,7 +153,8 @@ const Value = styled(Typography)({ const styles = { voting: { - marginTop: 6 + marginTop: 6, + marginBottom: 16 } } @@ -161,6 +165,14 @@ const InputContainer = styled(Grid)({ } }) +const CustomFormikTextField = withStyles({ + root: { + "& input": { + textAlign: "center" + } + } +})(TextField) + const GridNoPadding = styled(Grid)({ paddingLeft: "8px !important" }) @@ -172,6 +184,20 @@ const InfoBox = styled(Paper)({ marginTop: 20 }) +const getNetworkVotingSettings = (network: string, values: VotingSettings) => { + values.votingBlocksDay = network === networkNameMap.ghostnet ? 0 : 3 + values.votingBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + values.votingBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + values.proposalFlushBlocksDay = network === networkNameMap.ghostnet ? 0 : 1 + values.proposalFlushBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + values.proposalFlushBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + values.proposalExpiryBlocksDay = network === networkNameMap.ghostnet ? 0 : 6 + values.proposalExpiryBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + values.proposalExpiryBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + + return values +} + const validateForm = (values: VotingSettings) => { const errors: FormikErrors = {} @@ -193,22 +219,6 @@ const validateForm = (values: VotingSettings) => { errors.proposalFlushBlocks = "Must be greater than 0" } - // if ( - // values.proposalFlushBlocks && - // values.votingBlocks && - // Number(values.votingBlocks) * 2 >= Number(values.proposalFlushBlocks) - // ) { - // errors.proposalFlushBlocks = "Must be greater than more than twice the voting cycle duration" - // } - - // if ( - // values.proposalExpiryBlocks && - // values.proposalFlushBlocks && - // Number(values.proposalExpiryBlocks) <= Number(values.proposalFlushBlocks) - // ) { - // errors.proposalExpiryBlocks = "Must be greater than Proposal Execution Delay" - // } - if (!values.proposalExpiryBlocks || Number(values.proposalExpiryBlocks) <= 0) { errors.proposalExpiryBlocks = "Must be greater than 0" } @@ -311,7 +321,9 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se ;(async () => { const blockchainInfo = await getNetworkStats(network) if (blockchainInfo) { + console.log(blockchainInfo) setBlockTimeAverage(blockchainInfo.constants.timeBetweenBlocks) + console.log(blockchainInfo.constants.timeBetweenBlocks) } })() }, [network]) @@ -357,6 +369,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se return ( <> + {console.log(values)} @@ -365,10 +378,76 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se - + + + + { + if (getIn(values, "votingBlocksDay") === 0) { + setFieldValue("votingBlocksDay", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("votingBlocksDay", newValue.target.value) + }} + /> + + days + + + + { + if (getIn(values, "votingBlocksHours") === 0) { + setFieldValue("votingBlocksHours", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("votingBlocksHours", newValue.target.value) + }} + /> + + hours + + + + { + if (getIn(values, "votingBlocksMinutes") === 0) { + setFieldValue("votingBlocksMinutes", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("votingBlocksMinutes", newValue.target.value) + }} + /> + + minutes + + + {/* - - + */} + + {/* blocks - - + */} + {/* - + */} {errors.votingBlocks && touched.votingBlocks ? {errors.votingBlocks} : null} - + @@ -404,10 +483,82 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se Proposal Execution Delay + + {errors.proposalFlushBlocks ? : } + - + + + + { + if (getIn(values, "proposalFlushBlocksDay") === 0) { + setFieldValue("proposalFlushBlocksDay", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("proposalFlushBlocksDay", newValue.target.value) + }} + /> + + days + + + + { + if (getIn(values, "proposalFlushBlocksHours") === 0) { + setFieldValue("proposalFlushBlocksHours", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("proposalFlushBlocksHours", newValue.target.value) + }} + /> + + hours + + + + { + if (getIn(values, "proposalFlushBlocksMinutes") === 0) { + setFieldValue("proposalFlushBlocksMinutes", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("proposalFlushBlocksMinutes", newValue.target.value) + }} + /> + + minutes + + + + {/* @@ -429,16 +580,10 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se blocks - - {errors.proposalFlushBlocks ? : } - - + */} {errors.proposalFlushBlocks && touched.proposalFlushBlocks ? ( @@ -446,7 +591,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se ) : null} - + @@ -455,10 +600,82 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se Proposal Expiry Threshold + + {errors.proposalExpiryBlocks ? : } + - + + + + { + if (getIn(values, "proposalExpiryBlocksDay") === 0) { + setFieldValue("proposalExpiryBlocksDay", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("proposalExpiryBlocksDay", newValue.target.value) + }} + /> + + days + + + + { + if (getIn(values, "proposalExpiryBlocksHours") === 0) { + setFieldValue("proposalExpiryBlocksHours", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("proposalExpiryBlocksHours", newValue.target.value) + }} + /> + + hours + + + + { + if (getIn(values, "proposalExpiryBlocksMinutes") === 0) { + setFieldValue("proposalExpiryBlocksMinutes", "") + } + }} + onChange={(newValue: any) => { + setFieldValue("proposalExpiryBlocksMinutes", newValue.target.value) + }} + /> + + minutes + + + + {/* @@ -480,16 +697,10 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se blocks - - {errors.proposalExpiryBlocks ? : } - - + */} {errors.proposalExpiryBlocks && touched.proposalExpiryBlocks ? ( @@ -497,7 +708,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se ) : null} - + @@ -651,8 +862,11 @@ export const Governance: React.FC = () => { const { dispatch, state, updateCache } = useContext(CreatorContext) const { votingSettings } = state.data const history = useHistory() + const { network } = useTezos() + + const customVotingSettings = getNetworkVotingSettings(network, votingSettings) - const saveStepInfo = (values: VotingSettings, { setSubmitting }: { setSubmitting: (b: boolean) => void }) => { + const saveStepInfo = (values: VotingSettings, { setSubmitting }: any) => { values.proposalExpiryBlocks = Number(values.proposalExpiryBlocks) values.proposalFlushBlocks = Number(values.proposalFlushBlocks) values.votingBlocks = Number(values.votingBlocks) @@ -681,7 +895,7 @@ export const Governance: React.FC = () => { validateOnBlur={false} validate={validateForm} onSubmit={saveStepInfo} - initialValues={votingSettings} + initialValues={customVotingSettings} > {({ submitForm, isSubmitting, setFieldValue, values, errors, touched, setFieldTouched }) => { return ( diff --git a/src/theme/legacy.ts b/src/theme/legacy.ts index 0ba0b8a9..7cad17ad 100644 --- a/src/theme/legacy.ts +++ b/src/theme/legacy.ts @@ -3,7 +3,8 @@ export const legacyTheme = createMuiTheme({ palette: { primary: { main: "#1C1F23", - light: "#3D3D3D" + light: "#3D3D3D", + dark: "#2F3438" }, secondary: { main: "#4BCF93", From c4d73a4ba9daf43b4a8510fd61b97aeb37642ea9 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Tue, 31 Jan 2023 12:15:18 +0100 Subject: [PATCH 4/8] estimated blocks --- src/modules/creator/steps/Governance.tsx | 67 ++++++++++++++++++++++-- 1 file changed, 63 insertions(+), 4 deletions(-) diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx index b2ee539d..0daf6ae6 100644 --- a/src/modules/creator/steps/Governance.tsx +++ b/src/modules/creator/steps/Governance.tsx @@ -288,6 +288,50 @@ const useEstimatedBlockTimes = ({ } } +const useEstimatedBlocks = ({ + proposalFlushBlocksDay, + proposalFlushBlocksHours, + proposalFlushBlocksMinutes, + proposalExpiryBlocksDay, + proposalExpiryBlocksHours, + proposalExpiryBlocksMinutes, + blockTimeAverage +}: { + proposalFlushBlocksDay: number + proposalFlushBlocksHours: number + proposalFlushBlocksMinutes: number + proposalExpiryBlocksDay: number + proposalExpiryBlocksHours: number + proposalExpiryBlocksMinutes: number + blockTimeAverage: number +}) => { + const now = dayjs() + + let periodSeconds = (proposalFlushBlocksDay * 86400) / blockTimeAverage + periodSeconds += (proposalFlushBlocksHours * 3600) / blockTimeAverage + periodSeconds += (proposalFlushBlocksMinutes * 60) / blockTimeAverage + const flushDelaySeconds = proposalFlushBlocksDay * blockTimeAverage + const expiryDelaySeconds = proposalFlushBlocksDay * blockTimeAverage + + const creationMoment = now.add(periodSeconds, "s") + const activeMoment = creationMoment.add(periodSeconds, "s") + const closeMoment = activeMoment.add(periodSeconds, "s") + const flushMoment = closeMoment.add(flushDelaySeconds, "s") + const expiryMoment = flushMoment.add(expiryDelaySeconds, "s") + + return { + creationMoment, + activeMoment, + closeMoment, + flushMoment, + expiryMoment, + votingTime: secondsToTime(periodSeconds), + flushDelayTime: secondsToTime(flushDelaySeconds), + expiryDelayTime: secondsToTime(expiryDelaySeconds), + periodSeconds + } +} + const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, setFieldTouched }: any) => { const { network } = useTezos() const { @@ -300,6 +344,18 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se const history = useHistory() const [blockTimeAverage, setBlockTimeAverage] = useState(0) const { votingBlocks, proposalFlushBlocks, proposalExpiryBlocks } = values + const { + votingBlocksDays, + votingBlocksMinutes, + votingBlocksHours, + proposalFlushBlocksDay, + proposalFlushBlocksHours, + proposalFlushBlocksMinutes, + proposalExpiryBlocksDay, + proposalExpiryBlocksHours, + proposalExpiryBlocksMinutes + } = values + const { creationMoment, closeMoment, @@ -310,10 +366,13 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se activeMoment, expiryDelayTime, periodSeconds - } = useEstimatedBlockTimes({ - votingBlocks, - proposalFlushBlocks, - proposalExpiryBlocks, + } = useEstimatedBlocks({ + proposalFlushBlocksDay, + proposalFlushBlocksHours, + proposalFlushBlocksMinutes, + proposalExpiryBlocksDay, + proposalExpiryBlocksHours, + proposalExpiryBlocksMinutes, blockTimeAverage }) From 29551692286e3603059188fa5a7261a0af04cbfd Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Mon, 6 Feb 2023 16:53:28 +0100 Subject: [PATCH 5/8] update initialization of values --- src/modules/creator/state/context.tsx | 22 ++++++++++++++++++- src/modules/creator/steps/DaoSettings.tsx | 1 - src/modules/creator/steps/Governance.tsx | 19 +++------------- .../explorer/components/NetworkSheet.tsx | 7 +++++- 4 files changed, 30 insertions(+), 19 deletions(-) diff --git a/src/modules/creator/state/context.tsx b/src/modules/creator/state/context.tsx index 4f02d140..40952317 100644 --- a/src/modules/creator/state/context.tsx +++ b/src/modules/creator/state/context.tsx @@ -2,6 +2,8 @@ import React, { createContext, useReducer, Dispatch, useMemo } from "react" import useLocalStorage from "modules/common/hooks/useLocalStorage" import { CreatorAction, CreatorState, ActionTypes, MigrationParams } from "modules/creator/state/types" +import { useTezos } from "services/beacon/hooks/useTezos" +import { networkNameMap } from "services/bakingBad" const deploymentStatus = { deploying: false, @@ -125,12 +127,30 @@ export const reducer = (state: CreatorState, action: CreatorAction): CreatorStat } } +const updateInitialState = (network: string, values: MigrationParams) => { + values.votingSettings.votingBlocksDay = network === networkNameMap.ghostnet ? 0 : 3 + values.votingSettings.votingBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + values.votingSettings.votingBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + values.votingSettings.proposalFlushBlocksDay = network === networkNameMap.ghostnet ? 0 : 1 + values.votingSettings.proposalFlushBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + values.votingSettings.proposalFlushBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + values.votingSettings.proposalExpiryBlocksDay = network === networkNameMap.ghostnet ? 0 : 6 + values.votingSettings.proposalExpiryBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + values.votingSettings.proposalExpiryBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + + return values +} + const CreatorProvider: React.FC = ({ children }) => { const [data, updateCache] = useLocalStorage(LOCAL_STORAGE_KEY, INITIAL_STATE.data) + const { network } = useTezos() + + const updatedData = updateInitialState(network, data) + const stateWithCache = { ...INITIAL_STATE, - data + updatedData } const [state, dispatch] = useReducer(reducer, stateWithCache) diff --git a/src/modules/creator/steps/DaoSettings.tsx b/src/modules/creator/steps/DaoSettings.tsx index 7c067340..da30747b 100644 --- a/src/modules/creator/steps/DaoSettings.tsx +++ b/src/modules/creator/steps/DaoSettings.tsx @@ -355,7 +355,6 @@ const validateForm = (values: OrgSettings) => { } } - console.log(errors) return errors } diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx index 0daf6ae6..6a6dd5d6 100644 --- a/src/modules/creator/steps/Governance.tsx +++ b/src/modules/creator/steps/Governance.tsx @@ -184,20 +184,6 @@ const InfoBox = styled(Paper)({ marginTop: 20 }) -const getNetworkVotingSettings = (network: string, values: VotingSettings) => { - values.votingBlocksDay = network === networkNameMap.ghostnet ? 0 : 3 - values.votingBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 - values.votingBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 - values.proposalFlushBlocksDay = network === networkNameMap.ghostnet ? 0 : 1 - values.proposalFlushBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 - values.proposalFlushBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 - values.proposalExpiryBlocksDay = network === networkNameMap.ghostnet ? 0 : 6 - values.proposalExpiryBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 - values.proposalExpiryBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 - - return values -} - const validateForm = (values: VotingSettings) => { const errors: FormikErrors = {} @@ -923,7 +909,8 @@ export const Governance: React.FC = () => { const history = useHistory() const { network } = useTezos() - const customVotingSettings = getNetworkVotingSettings(network, votingSettings) + console.log(state) + // const customVotingSettings = getNetworkVotingSettings(network, votingSettings) const saveStepInfo = (values: VotingSettings, { setSubmitting }: any) => { values.proposalExpiryBlocks = Number(values.proposalExpiryBlocks) @@ -954,7 +941,7 @@ export const Governance: React.FC = () => { validateOnBlur={false} validate={validateForm} onSubmit={saveStepInfo} - initialValues={customVotingSettings} + initialValues={votingSettings} > {({ submitForm, isSubmitting, setFieldValue, values, errors, touched, setFieldTouched }) => { return ( diff --git a/src/modules/explorer/components/NetworkSheet.tsx b/src/modules/explorer/components/NetworkSheet.tsx index 322eeab9..551a1ec1 100644 --- a/src/modules/explorer/components/NetworkSheet.tsx +++ b/src/modules/explorer/components/NetworkSheet.tsx @@ -1,11 +1,12 @@ import { styled, Grid, Typography, capitalize } from "@material-ui/core" -import React, { useMemo } from "react" +import React, { useContext, useMemo } from "react" import { useTezos } from "services/beacon/hooks/useTezos" import { Network } from "services/beacon" import { ResponsiveDialog } from "./ResponsiveDialog" import { ColorDot, networkDotColorMap } from "./ChangeNetworkButton" import { ContentContainer } from "./ContentContainer" import { EnvKey, getEnv } from "services/config" +import { ActionTypes, CreatorContext } from "modules/creator/state" const SheetItem = styled(ContentContainer)({ "height": 50, @@ -24,6 +25,7 @@ const SUPPORTED_NETWORKS: Network[] = ["mainnet", "ghostnet"] export const NetworkSheet: React.FC = props => { const { network, changeNetwork } = useTezos() + const { dispatch } = useContext(CreatorContext) const options = useMemo(() => SUPPORTED_NETWORKS.filter(n => n !== network), [network]) @@ -37,6 +39,9 @@ export const NetworkSheet: React.FC = props => { onClick={() => { props.onClose() changeNetwork(networkOption) + dispatch({ + type: ActionTypes.CLEAR_CACHE + }) window.location.href = `/explorer` }} > From f0796b7953d57ae6d92740a88f38976f85116530 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Tue, 7 Feb 2023 18:39:55 +0100 Subject: [PATCH 6/8] useBlocks --- src/assets/logos/config.svg | 8 + src/modules/creator/steps/Governance.tsx | 48 ++++-- .../explorer/components/AllProposalsList.tsx | 140 ++++++++++++++++++ src/modules/explorer/components/Dropdown.tsx | 66 +++++++++ 4 files changed, 253 insertions(+), 9 deletions(-) create mode 100644 src/assets/logos/config.svg create mode 100644 src/modules/explorer/components/AllProposalsList.tsx create mode 100644 src/modules/explorer/components/Dropdown.tsx diff --git a/src/assets/logos/config.svg b/src/assets/logos/config.svg new file mode 100644 index 00000000..f3c75190 --- /dev/null +++ b/src/assets/logos/config.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx index 6a6dd5d6..edc986ae 100644 --- a/src/modules/creator/steps/Governance.tsx +++ b/src/modules/creator/steps/Governance.tsx @@ -275,6 +275,9 @@ const useEstimatedBlockTimes = ({ } const useEstimatedBlocks = ({ + votingBlocksDays, + votingBlocksMinutes, + votingBlocksHours, proposalFlushBlocksDay, proposalFlushBlocksHours, proposalFlushBlocksMinutes, @@ -283,6 +286,9 @@ const useEstimatedBlocks = ({ proposalExpiryBlocksMinutes, blockTimeAverage }: { + votingBlocksDays: number + votingBlocksHours: number + votingBlocksMinutes: number proposalFlushBlocksDay: number proposalFlushBlocksHours: number proposalFlushBlocksMinutes: number @@ -293,11 +299,27 @@ const useEstimatedBlocks = ({ }) => { const now = dayjs() - let periodSeconds = (proposalFlushBlocksDay * 86400) / blockTimeAverage - periodSeconds += (proposalFlushBlocksHours * 3600) / blockTimeAverage - periodSeconds += (proposalFlushBlocksMinutes * 60) / blockTimeAverage - const flushDelaySeconds = proposalFlushBlocksDay * blockTimeAverage - const expiryDelaySeconds = proposalFlushBlocksDay * blockTimeAverage + console.log(votingBlocksDays) + + let periodSeconds = votingBlocksDays * 86400 + periodSeconds += votingBlocksHours * 3600 + periodSeconds += votingBlocksMinutes * 60 + + console.log(periodSeconds) + + const periodBlocks = periodSeconds / blockTimeAverage + + let flushDelaySeconds = proposalFlushBlocksDay * 86400 + flushDelaySeconds += proposalFlushBlocksHours * 3600 + flushDelaySeconds += proposalFlushBlocksMinutes * 60 + + const flushBlocks = flushDelaySeconds / blockTimeAverage + + let expiryDelaySeconds = proposalExpiryBlocksDay * 86400 + expiryDelaySeconds += proposalExpiryBlocksHours * 3600 + expiryDelaySeconds += proposalExpiryBlocksMinutes * 60 + + const expiryBlocks = expiryDelaySeconds / blockTimeAverage const creationMoment = now.add(periodSeconds, "s") const activeMoment = creationMoment.add(periodSeconds, "s") @@ -306,6 +328,9 @@ const useEstimatedBlocks = ({ const expiryMoment = flushMoment.add(expiryDelaySeconds, "s") return { + periodBlocks, + flushBlocks, + expiryBlocks, creationMoment, activeMoment, closeMoment, @@ -351,8 +376,14 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se flushDelayTime, activeMoment, expiryDelayTime, - periodSeconds + periodSeconds, + periodBlocks, + flushBlocks, + expiryBlocks } = useEstimatedBlocks({ + votingBlocksDays, + votingBlocksMinutes, + votingBlocksHours, proposalFlushBlocksDay, proposalFlushBlocksHours, proposalFlushBlocksMinutes, @@ -414,7 +445,6 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se return ( <> - {console.log(values)} @@ -521,7 +551,8 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se - + {periodBlocks} + {/* */} @@ -909,7 +940,6 @@ export const Governance: React.FC = () => { const history = useHistory() const { network } = useTezos() - console.log(state) // const customVotingSettings = getNetworkVotingSettings(network, votingSettings) const saveStepInfo = (values: VotingSettings, { setSubmitting }: any) => { diff --git a/src/modules/explorer/components/AllProposalsList.tsx b/src/modules/explorer/components/AllProposalsList.tsx new file mode 100644 index 00000000..abcd0643 --- /dev/null +++ b/src/modules/explorer/components/AllProposalsList.tsx @@ -0,0 +1,140 @@ +import { Collapse, Grid, IconButton, Typography } from "@material-ui/core" +import { styled } from "@material-ui/styles" +import { ProposalItem } from "modules/explorer/pages/User" +import React, { useCallback, useEffect, useMemo, useState } from "react" +import { Link } from "react-router-dom" +import { Proposal, ProposalStatus } from "services/indexer/dao/mappers/proposal/types" +import { ContentContainer } from "./ContentContainer" +import { Dropdown } from "./Dropdown" + +const TableContainer = styled(ContentContainer)({ + width: "100%" +}) + +const TableHeader = styled(Grid)({ + padding: "16px 46px", + minHeight: 34 +}) + +const ProposalsFooter = styled(Grid)({ + padding: "16px 46px", + borderTop: ".6px solid rgba(125,140,139, 0.2)", + minHeight: 34 +}) + +interface Props { + currentLevel: number + proposals: Proposal[] + title: string + showFooter?: boolean + rightItem?: (proposal: Proposal) => React.ReactElement +} + +export const AllProposalsList: React.FC = ({ currentLevel, proposals, title, showFooter, rightItem }) => { + const [filteredProposal, setFilteredProposals] = useState(proposals) + const [filter, setFilter] = useState("All") + + const filterProposals = useCallback( + (status?: any) => { + if (status === "All") { + return setFilteredProposals(proposals) + } else if (status !== "All" && status !== undefined) { + const filtered = proposals.filter(proposal => proposal["cachedStatus"]?.status === status) + setFilteredProposals(filtered) + } else { + return setFilteredProposals(proposals) + } + }, + [proposals] + ) + + useEffect(() => { + filterProposals(filter) + }, [filter, filterProposals]) + + useEffect(() => { + setFilteredProposals(proposals) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + const filterProposalByStatus = (status: any) => { + setFilter(status) + } + + return ( + + + + + + {title} + + + {proposals.length ? ( + + + {" "} + + + ) : null} + + {filteredProposal.length ? ( + + {filteredProposal.map((p, i) => ( + + + + {rightItem ? rightItem(p) : null} + + + + ))} + + ) : ( + + + + No items + + + + )} + {showFooter && ( + + + + + View All Proposals + + + + + )} + + + ) +} diff --git a/src/modules/explorer/components/Dropdown.tsx b/src/modules/explorer/components/Dropdown.tsx new file mode 100644 index 00000000..fcf67ced --- /dev/null +++ b/src/modules/explorer/components/Dropdown.tsx @@ -0,0 +1,66 @@ +import React, { useEffect, useState } from "react" +import { Select, SelectProps, MenuItem, makeStyles, Theme } from "@material-ui/core" +interface DropdownProps extends SelectProps { + options: { name: string; value: string | undefined }[] + value?: string | undefined + onSelected?: (item: string | undefined) => void + isFirst?: boolean +} + +const useStyles = makeStyles((theme: Theme) => ({ + icon: { + left: 0 + }, + iconOpen: { + transform: "none" + }, + selectSelect: { + [theme.breakpoints.down("sm")]: { + fontSize: 16 + }, + paddingLeft: 10, + paddingTop: 0, + paddingBottom: 0, + minHeight: 24 + }, + option: { + "padding": 8, + "fontFamily": "Roboto Mono", + "cursor": "pointer", + "text-transform": "capitalize", + "&:hover": { + background: "rgba(129, 254, 183, .4)" + } + } +})) + +export const Dropdown: React.FC = ({ options, value, onSelected }) => { + const classes = useStyles() + const [selected, setSelected] = useState(value) + + useEffect(() => { + setSelected(value) + }, [value]) + + const handleSelected = (event: any) => { + setSelected(event.target.value) + if (onSelected) onSelected(event.target.value) + } + + return ( + + ) +} From 9d78ca9ee80b4fe7f435e2adc074e88a14a66b60 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Sat, 11 Feb 2023 11:33:29 +0100 Subject: [PATCH 7/8] useBlocks updated --- src/modules/creator/state/context.tsx | 30 +++- src/modules/creator/steps/Governance.tsx | 161 ++++++------------ .../explorer/components/EstimatedTime.tsx | 19 +-- 3 files changed, 82 insertions(+), 128 deletions(-) diff --git a/src/modules/creator/state/context.tsx b/src/modules/creator/state/context.tsx index 40952317..1138f5f9 100644 --- a/src/modules/creator/state/context.tsx +++ b/src/modules/creator/state/context.tsx @@ -4,6 +4,7 @@ import useLocalStorage from "modules/common/hooks/useLocalStorage" import { CreatorAction, CreatorState, ActionTypes, MigrationParams } from "modules/creator/state/types" import { useTezos } from "services/beacon/hooks/useTezos" import { networkNameMap } from "services/bakingBad" +import { getTezosNetwork } from "services/beacon/utils" const deploymentStatus = { deploying: false, @@ -32,7 +33,16 @@ export const INITIAL_MIGRATION_STATE: MigrationParams = { minXtzAmount: 0, maxXtzAmount: 0, proposalFlushBlocks: 0, - proposalExpiryBlocks: 0 + proposalExpiryBlocks: 0, + votingBlocksDay: 0, + votingBlocksHours: 0, + votingBlocksMinutes: 5, + proposalFlushBlocksDay: 0, + proposalFlushBlocksHours: 0, + proposalFlushBlocksMinutes: 5, + proposalExpiryBlocksDay: 0, + proposalExpiryBlocksHours: 0, + proposalExpiryBlocksMinutes: 5 }, quorumSettings: { quorumThreshold: 2, @@ -43,8 +53,24 @@ export const INITIAL_MIGRATION_STATE: MigrationParams = { } } +const getInitialState = (data: MigrationParams) => { + const network = getTezosNetwork() + + data.votingSettings.votingBlocksDay = network === networkNameMap.ghostnet ? 0 : 3 + data.votingSettings.votingBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + data.votingSettings.votingBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + data.votingSettings.proposalFlushBlocksDay = network === networkNameMap.ghostnet ? 0 : 1 + data.votingSettings.proposalFlushBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + data.votingSettings.proposalFlushBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + data.votingSettings.proposalExpiryBlocksDay = network === networkNameMap.ghostnet ? 0 : 6 + data.votingSettings.proposalExpiryBlocksHours = network === networkNameMap.ghostnet ? 0 : 0 + data.votingSettings.proposalExpiryBlocksMinutes = network === networkNameMap.ghostnet ? 5 : 0 + + return data +} + export const INITIAL_STATE: CreatorState = { - data: INITIAL_MIGRATION_STATE, + data: getInitialState(INITIAL_MIGRATION_STATE), deploymentStatus } diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx index edc986ae..aea85383 100644 --- a/src/modules/creator/steps/Governance.tsx +++ b/src/modules/creator/steps/Governance.tsx @@ -6,13 +6,12 @@ import { useHistory } from "react-router" import { useRouteMatch } from "react-router-dom" import { CreatorContext, ActionTypes, VotingSettings } from "modules/creator/state" -import { InfoOutlined, InfoRounded } from "@material-ui/icons" +import { InfoRounded } from "@material-ui/icons" import { getNetworkStats } from "services/bakingBad/stats" import { useTezos } from "services/beacon/hooks/useTezos" -import { EstimatedTime } from "modules/explorer/components/EstimatedTime" +import { EstimatedBlocks } from "modules/explorer/components/EstimatedTime" import dayjs from "dayjs" import { TitleBlock } from "modules/common/TitleBlock" -import { networkNameMap } from "services/bakingBad" const TimeBox = styled(Grid)(({ theme }) => ({ background: theme.palette.primary.dark, @@ -72,14 +71,6 @@ const StakeContainer = styled(Grid)({ display: "block" }) -const CustomInputContainer = styled(Grid)(({ theme }) => ({ - border: "none", - height: 54, - marginTop: 14, - background: "#2F3438", - borderRadius: 8 -})) - const AdditionContainer = styled(Grid)(({ theme }) => ({ marginTop: 14, border: "none", @@ -104,11 +95,6 @@ const ItemContainer = styled(Grid)(({ theme }) => ({ padding: "12px 25px" })) -const GridItemContainer = styled(Grid)(() => ({ - display: "flex", - alignItems: "center" -})) - const ValueText = styled(Typography)({ fontSize: 14 }) @@ -186,6 +172,7 @@ const InfoBox = styled(Paper)({ const validateForm = (values: VotingSettings) => { const errors: FormikErrors = {} + console.log(values) Object.keys(values).forEach(key => { if ((values[key as keyof VotingSettings] as number | string) === "") { @@ -216,6 +203,13 @@ const validateForm = (values: VotingSettings) => { if (values.maxXtzAmount <= 0) { errors.maxXtzAmount = "Must be greater than 0" } + if ( + values.proposalFlushBlocks && + values.votingBlocks && + Number(values.votingBlocks) * 2 >= Number(values.proposalFlushBlocks) + ) { + errors.proposalFlushBlocks = "Must be greater than more than twice the voting cycle duration" + } if (values.minXtzAmount && String(values.maxXtzAmount).length > 255) { errors.maxXtzAmount = "Too big, number must be smaller" @@ -238,44 +232,8 @@ const secondsToTime = (seconds: number) => ({ minutes: Math.floor((seconds % 3600) / 60) }) -const useEstimatedBlockTimes = ({ - votingBlocks, - proposalFlushBlocks, - proposalExpiryBlocks, - blockTimeAverage -}: { - votingBlocks: number - proposalFlushBlocks: number - proposalExpiryBlocks: number - blockTimeAverage: number -}) => { - const now = dayjs() - - const periodSeconds = votingBlocks * blockTimeAverage - const flushDelaySeconds = proposalFlushBlocks * blockTimeAverage - const expiryDelaySeconds = proposalExpiryBlocks * blockTimeAverage - - const creationMoment = now.add(periodSeconds, "s") - const activeMoment = creationMoment.add(periodSeconds, "s") - const closeMoment = activeMoment.add(periodSeconds, "s") - const flushMoment = closeMoment.add(flushDelaySeconds, "s") - const expiryMoment = flushMoment.add(expiryDelaySeconds, "s") - - return { - creationMoment, - activeMoment, - closeMoment, - flushMoment, - expiryMoment, - votingTime: secondsToTime(periodSeconds), - flushDelayTime: secondsToTime(flushDelaySeconds), - expiryDelayTime: secondsToTime(expiryDelaySeconds), - periodSeconds - } -} - const useEstimatedBlocks = ({ - votingBlocksDays, + votingBlocksDay, votingBlocksMinutes, votingBlocksHours, proposalFlushBlocksDay, @@ -286,7 +244,7 @@ const useEstimatedBlocks = ({ proposalExpiryBlocksMinutes, blockTimeAverage }: { - votingBlocksDays: number + votingBlocksDay: number votingBlocksHours: number votingBlocksMinutes: number proposalFlushBlocksDay: number @@ -299,14 +257,10 @@ const useEstimatedBlocks = ({ }) => { const now = dayjs() - console.log(votingBlocksDays) - - let periodSeconds = votingBlocksDays * 86400 + let periodSeconds = votingBlocksDay * 86400 periodSeconds += votingBlocksHours * 3600 periodSeconds += votingBlocksMinutes * 60 - console.log(periodSeconds) - const periodBlocks = periodSeconds / blockTimeAverage let flushDelaySeconds = proposalFlushBlocksDay * 86400 @@ -354,24 +308,22 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se const match = useRouteMatch() const history = useHistory() const [blockTimeAverage, setBlockTimeAverage] = useState(0) - const { votingBlocks, proposalFlushBlocks, proposalExpiryBlocks } = values const { - votingBlocksDays, + votingBlocks, + votingBlocksDay, votingBlocksMinutes, votingBlocksHours, + proposalFlushBlocks, proposalFlushBlocksDay, proposalFlushBlocksHours, proposalFlushBlocksMinutes, + proposalExpiryBlocks, proposalExpiryBlocksDay, proposalExpiryBlocksHours, proposalExpiryBlocksMinutes } = values const { - creationMoment, - closeMoment, - flushMoment, - expiryMoment, votingTime, flushDelayTime, activeMoment, @@ -381,7 +333,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se flushBlocks, expiryBlocks } = useEstimatedBlocks({ - votingBlocksDays, + votingBlocksDay, votingBlocksMinutes, votingBlocksHours, proposalFlushBlocksDay, @@ -393,13 +345,20 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se blockTimeAverage }) + useEffect(() => { + console.log(periodBlocks, flushBlocks) + values.votingBlocks = periodBlocks + values.proposalFlushBlocks = flushBlocks + values.proposalExpiryBlocks = expiryBlocks + console.log(values) + return + }, [values, periodBlocks, flushBlocks, expiryBlocks]) + useEffect(() => { ;(async () => { const blockchainInfo = await getNetworkStats(network) if (blockchainInfo) { - console.log(blockchainInfo) setBlockTimeAverage(blockchainInfo.constants.timeBetweenBlocks) - console.log(blockchainInfo.constants.timeBetweenBlocks) } })() }, [network]) @@ -461,6 +420,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se id="outlined-basic" name="votingBlocksDay" type="number" + placeholder="0" component={CustomFormikTextField} inputProps={{ min: 0 }} onClick={() => { @@ -469,7 +429,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("votingBlocksDay", newValue.target.value) + setFieldValue("votingBlocksDay", Number(newValue.target.value)) }} /> @@ -490,7 +450,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("votingBlocksHours", newValue.target.value) + setFieldValue("votingBlocksHours", Number(newValue.target.value)) }} /> @@ -511,48 +471,30 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("votingBlocksMinutes", newValue.target.value) + console.log(newValue.target.value) + if (newValue.target.value === "") { + setFieldValue("votingBlocksMinutes", 0) + } else { + console.log(getIn(values, "votingBlocksMinutes")) + if (getIn(values, "votingBlocksMinutes") === 0) { + setFieldValue("votingBlocksMinutes", "") + } + setFieldValue("votingBlocksMinutes", parseInt(newValue.target.value, 10)) + } }} /> minutes - {/* - - */} - - {/* - { - if (getIn(values, "votingBlocks") === 0) { - setFieldValue("votingBlocks", "") - } - }} - onChange={(newValue: any) => { - setFieldValue("votingBlocks", newValue.target.value) - }} - /> - - - blocks - */} - {/* - - */} {errors.votingBlocks && touched.votingBlocks ? {errors.votingBlocks} : null} - {periodBlocks} - {/* */} + {/* {periodBlocks} */} + @@ -584,7 +526,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalFlushBlocksDay", newValue.target.value) + setFieldValue("proposalFlushBlocksDay", Number(newValue.target.value)) }} /> @@ -605,7 +547,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalFlushBlocksHours", newValue.target.value) + setFieldValue("proposalFlushBlocksHours", Number(newValue.target.value)) }} /> @@ -626,7 +568,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalFlushBlocksMinutes", newValue.target.value) + setFieldValue("proposalFlushBlocksMinutes", Number(newValue.target.value)) }} /> @@ -668,7 +610,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se - + @@ -701,7 +643,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalExpiryBlocksDay", newValue.target.value) + setFieldValue("proposalExpiryBlocksDay", Number(newValue.target.value)) }} /> @@ -722,7 +664,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalExpiryBlocksHours", newValue.target.value) + setFieldValue("proposalExpiryBlocksHours", Number(newValue.target.value)) }} /> @@ -743,7 +685,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalExpiryBlocksMinutes", newValue.target.value) + setFieldValue("proposalExpiryBlocksMinutes", Number(newValue.target.value)) }} /> @@ -785,7 +727,7 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se - + @@ -938,9 +880,6 @@ export const Governance: React.FC = () => { const { dispatch, state, updateCache } = useContext(CreatorContext) const { votingSettings } = state.data const history = useHistory() - const { network } = useTezos() - - // const customVotingSettings = getNetworkVotingSettings(network, votingSettings) const saveStepInfo = (values: VotingSettings, { setSubmitting }: any) => { values.proposalExpiryBlocks = Number(values.proposalExpiryBlocks) diff --git a/src/modules/explorer/components/EstimatedTime.tsx b/src/modules/explorer/components/EstimatedTime.tsx index 0c4aafc6..bd0e8b5a 100644 --- a/src/modules/explorer/components/EstimatedTime.tsx +++ b/src/modules/explorer/components/EstimatedTime.tsx @@ -2,27 +2,16 @@ import { Grid, Typography } from "@material-ui/core" import React from "react" interface Props { - days: number | string - hours: number | string - minutes: number | string + blocks: number } -export const EstimatedTime: React.FC = ({ hours, days, minutes }) => { +export const EstimatedBlocks: React.FC = ({ blocks }) => { return ( - - Estimated time - - - {days}d - - - {hours}h - - - {minutes}m + + {blocks} blocks From 859b21741644148689c633988b9ebc8a4e7960c6 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Sat, 11 Feb 2023 12:29:32 +0100 Subject: [PATCH 8/8] values updated --- src/modules/creator/steps/Governance.tsx | 182 ++++++++++------------- 1 file changed, 80 insertions(+), 102 deletions(-) diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx index aea85383..a23b920c 100644 --- a/src/modules/creator/steps/Governance.tsx +++ b/src/modules/creator/steps/Governance.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { Grid, Paper, styled, Typography, Slider, withStyles, withTheme, Box, Tooltip } from "@material-ui/core" import { TextField } from "formik-material-ui" import React, { useContext, useEffect, useState } from "react" @@ -59,6 +60,13 @@ const ErrorText = styled(Typography)({ color: "red" }) +const ErrorTextTime = styled(Typography)({ + display: "block", + fontSize: 14, + color: "red", + marginTop: -14 +}) + const SecondContainer = styled(Grid)({ marginTop: 10 }) @@ -172,7 +180,6 @@ const InfoBox = styled(Paper)({ const validateForm = (values: VotingSettings) => { const errors: FormikErrors = {} - console.log(values) Object.keys(values).forEach(key => { if ((values[key as keyof VotingSettings] as number | string) === "") { @@ -184,7 +191,7 @@ const validateForm = (values: VotingSettings) => { } }) - if (!values.votingBlocks || Number(values.votingBlocks) <= 0) { + if (!values.votingBlocks || values.votingBlocks <= 0) { errors.votingBlocks = "Must be greater than 0" } @@ -203,13 +210,6 @@ const validateForm = (values: VotingSettings) => { if (values.maxXtzAmount <= 0) { errors.maxXtzAmount = "Must be greater than 0" } - if ( - values.proposalFlushBlocks && - values.votingBlocks && - Number(values.votingBlocks) * 2 >= Number(values.proposalFlushBlocks) - ) { - errors.proposalFlushBlocks = "Must be greater than more than twice the voting cycle duration" - } if (values.minXtzAmount && String(values.maxXtzAmount).length > 255) { errors.maxXtzAmount = "Too big, number must be smaller" @@ -222,7 +222,6 @@ const validateForm = (values: VotingSettings) => { if (values.minXtzAmount > values.maxXtzAmount) { errors.maxXtzAmount = "Must be greater than Min. XTZ amount" } - return errors } @@ -309,15 +308,12 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se const history = useHistory() const [blockTimeAverage, setBlockTimeAverage] = useState(0) const { - votingBlocks, votingBlocksDay, votingBlocksMinutes, votingBlocksHours, - proposalFlushBlocks, proposalFlushBlocksDay, proposalFlushBlocksHours, proposalFlushBlocksMinutes, - proposalExpiryBlocks, proposalExpiryBlocksDay, proposalExpiryBlocksHours, proposalExpiryBlocksMinutes @@ -346,13 +342,14 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se }) useEffect(() => { - console.log(periodBlocks, flushBlocks) values.votingBlocks = periodBlocks values.proposalFlushBlocks = flushBlocks values.proposalExpiryBlocks = expiryBlocks - console.log(values) - return - }, [values, periodBlocks, flushBlocks, expiryBlocks]) + + // setTimeout(() => { + // validateForm(values) + // }, 1000) + }, [periodBlocks, flushBlocks, expiryBlocks]) useEffect(() => { ;(async () => { @@ -426,10 +423,15 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se onClick={() => { if (getIn(values, "votingBlocksDay") === 0) { setFieldValue("votingBlocksDay", "") + setFieldTouched("votingBlocksDay") } }} onChange={(newValue: any) => { - setFieldValue("votingBlocksDay", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("votingBlocksDay", "") + } else { + setFieldValue("votingBlocksDay", parseInt(newValue.target.value, 10)) + } }} /> @@ -450,7 +452,11 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("votingBlocksHours", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("votingBlocksHours", "") + } else { + setFieldValue("votingBlocksHours", parseInt(newValue.target.value, 10)) + } }} /> @@ -471,14 +477,9 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - console.log(newValue.target.value) if (newValue.target.value === "") { - setFieldValue("votingBlocksMinutes", 0) + setFieldValue("votingBlocksMinutes", "") } else { - console.log(getIn(values, "votingBlocksMinutes")) - if (getIn(values, "votingBlocksMinutes") === 0) { - setFieldValue("votingBlocksMinutes", "") - } setFieldValue("votingBlocksMinutes", parseInt(newValue.target.value, 10)) } }} @@ -488,13 +489,15 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se - - {errors.votingBlocks && touched.votingBlocks ? {errors.votingBlocks} : null} + + - - {/* {periodBlocks} */} - + + {errors.votingBlocks && + (touched.votingBlocksDay || touched.votingBlocksMinutes || touched.votingBlocksHours) ? ( + {errors.votingBlocks} + ) : null} @@ -526,7 +529,11 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalFlushBlocksDay", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("proposalFlushBlocksDay", "") + } else { + setFieldValue("proposalFlushBlocksDay", parseInt(newValue.target.value, 10)) + } }} /> @@ -547,7 +554,11 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalFlushBlocksHours", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("proposalFlushBlocksHours", "") + } else { + setFieldValue("proposalFlushBlocksHours", parseInt(newValue.target.value, 10)) + } }} /> @@ -568,7 +579,11 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalFlushBlocksMinutes", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("proposalFlushBlocksMinutes", "") + } else { + setFieldValue("proposalFlushBlocksMinutes", parseInt(newValue.target.value, 10)) + } }} /> @@ -576,42 +591,18 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se - {/* - - - - { - if (getIn(values, "proposalFlushBlocks") === 0) { - setFieldValue("proposalFlushBlocks", "") - } - }} - onChange={(newValue: any) => { - setFieldValue("proposalFlushBlocks", newValue.target.value) - }} - /> - - - blocks - - - - */} + + + - {errors.proposalFlushBlocks && touched.proposalFlushBlocks ? ( - {errors.proposalFlushBlocks} + {errors.proposalFlushBlocks && + (touched.proposalFlushBlocksDay || + touched.proposalFlushBlocksMinutes || + touched.proposalFlushBlocksHours) ? ( + {errors.proposalFlushBlocks} ) : null} - - - - @@ -643,7 +634,11 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalExpiryBlocksDay", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("proposalExpiryBlocksDay", "") + } else { + setFieldValue("proposalExpiryBlocksDay", parseInt(newValue.target.value, 10)) + } }} /> @@ -664,7 +659,11 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalExpiryBlocksHours", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("proposalExpiryBlocksHours", "") + } else { + setFieldValue("proposalExpiryBlocksHours", parseInt(newValue.target.value, 10)) + } }} /> @@ -685,7 +684,11 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se } }} onChange={(newValue: any) => { - setFieldValue("proposalExpiryBlocksMinutes", Number(newValue.target.value)) + if (newValue.target.value === "") { + setFieldValue("proposalExpiryBlocksMinutes", "") + } else { + setFieldValue("proposalExpiryBlocksMinutes", parseInt(newValue.target.value, 10)) + } }} /> @@ -693,42 +696,17 @@ const GovernanceForm = ({ submitForm, values, setFieldValue, errors, touched, se - {/* - - - - { - if (getIn(values, "proposalExpiryBlocks") === 0) { - setFieldValue("proposalExpiryBlocks", "") - } - }} - onChange={(newValue: any) => { - setFieldValue("proposalExpiryBlocks", newValue.target.value) - }} - /> - - - blocks - - - - */} - + + + - {errors.proposalExpiryBlocks && touched.proposalExpiryBlocks ? ( - {errors.proposalExpiryBlocks} + {errors.proposalExpiryBlocks && + (touched.proposalExpiryBlocksDay || + touched.proposalExpiryBlocksHours || + touched.proposalExpiryBlocksMinutes) ? ( + {errors.proposalExpiryBlocks} ) : null} - - - - @@ -907,7 +885,7 @@ export const Governance: React.FC = () => {