From 619629b583b421142798ba6dc7465b8da5566ec6 Mon Sep 17 00:00:00 2001 From: Ashutosh Kumar Date: Wed, 18 Dec 2024 13:12:20 +0530 Subject: [PATCH] WIP: DAO onChain Creator --- src/components/ui/InputText.tsx | 36 +++ src/components/ui/StyledSlider.tsx | 83 ++++++ src/modules/creator/steps/Governance.tsx | 27 +- .../etherlink/components/EvmDaoBasics.tsx | 153 +++------- .../etherlink/components/EvmDaoDeployment.tsx | 14 - .../etherlink/components/EvmDaoMembership.tsx | 122 ++++++++ .../etherlink/components/EvmDaoQuorum.tsx | 72 ++++- .../etherlink/components/EvmDaoSummary.tsx | 9 +- .../etherlink/components/EvmDaoVoting.tsx | 264 +++++++++++++++++- src/modules/etherlink/config.ts | 6 +- src/modules/etherlink/layout.tsx | 24 +- .../hooks/useEvmDaoCreateStore.tsx | 109 ++++++++ src/services/wagmi/context.tsx | 6 +- 13 files changed, 742 insertions(+), 183 deletions(-) create mode 100644 src/components/ui/InputText.tsx create mode 100644 src/components/ui/StyledSlider.tsx delete mode 100644 src/modules/etherlink/components/EvmDaoDeployment.tsx create mode 100644 src/modules/etherlink/components/EvmDaoMembership.tsx create mode 100644 src/services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore.tsx diff --git a/src/components/ui/InputText.tsx b/src/components/ui/InputText.tsx new file mode 100644 index 00000000..291df0ad --- /dev/null +++ b/src/components/ui/InputText.tsx @@ -0,0 +1,36 @@ +import { withStyles } from "@material-ui/core" +import { TextField } from "@mui/material" + +const InputText = withStyles(theme => ({ + root: { + "& .MuiInputBase-root": { + height: 54, + boxSizing: "border-box", + background: "#333333", + borderRadius: 8, + padding: "13px 23px", + fontWeight: 300, + color: "#ffffff", + fontSize: 18, + fontFamily: "Roboto Flex" + }, + "& .MuiInputBase-input": { + "padding": 0, + "&::placeholder": { + fontWeight: 300, + opacity: 1 + } + }, + "& .MuiInput-underline:before": { + borderBottom: "none" + }, + "& .MuiInput-underline:hover:before": { + borderBottom: "none" + }, + "& .MuiInput-underline:after": { + borderBottom: "none" + } + } +}))(TextField) + +export default InputText diff --git a/src/components/ui/StyledSlider.tsx b/src/components/ui/StyledSlider.tsx new file mode 100644 index 00000000..9e414992 --- /dev/null +++ b/src/components/ui/StyledSlider.tsx @@ -0,0 +1,83 @@ +import { Grid, Paper, Slider, styled, Typography, withStyles, withTheme } from "@material-ui/core" +import { useRef } from "react" + +const StyledSlider = withStyles({ + root: { + textAlign: "center", + width: "100%", + height: 4.5 + }, + valueLabel: { + textAlign: "center" + }, + thumb: { + height: 20, + width: 20, + top: "36.5%", + backgroundColor: "#fff", + border: "3px solid #fff" + }, + track: { + backgroundColor: "#4BCF93", + borderRadius: "4px", + height: 4.5 + }, + rail: { + height: 4.5 + } +})(Slider) + +export const CustomSliderValue = styled(withTheme(Paper))(props => ({ + boxShadow: "none", + height: 54, + display: "flex", + alignItems: "center", + justifyContent: "center", + background: "#2F3438", + borderRadius: 8, + width: "100%" +})) + +export const StyledSliderWithValue = ({ + defaultValue, + onChange +}: { + defaultValue: number + onChange: (newValue: any) => void +}) => { + const sliderValueRef = useRef(null) + const debounceTimeout = useRef() + return ( + + + { + if (sliderValueRef.current) { + sliderValueRef.current.innerHTML = `${newValue}%` + } + clearTimeout(debounceTimeout.current) + debounceTimeout.current = setTimeout(() => { + onChange(newValue) + }, 100) + }} + /> + + + + + {defaultValue}% + + + + + ) +} + +export default StyledSlider diff --git a/src/modules/creator/steps/Governance.tsx b/src/modules/creator/steps/Governance.tsx index 88d0cc87..37137003 100644 --- a/src/modules/creator/steps/Governance.tsx +++ b/src/modules/creator/steps/Governance.tsx @@ -15,6 +15,7 @@ import BigNumber from "bignumber.js" import { mutezToXtz, parseUnits } from "services/contracts/utils" import { FieldChange, handleChange } from "../utils" import { useBlockchainInfo } from "services/contracts/baseDAO/hooks/useBlockchainInfo" +import StyledSlider from "components/ui/StyledSlider" const TimeBox = styled(Grid)(({ theme }) => ({ background: theme.palette.primary.dark, @@ -116,32 +117,6 @@ const ValueText = styled(Typography)(({ theme }) => ({ fontWeight: 200 })) -const StyledSlider = withStyles({ - root: { - textAlign: "center", - width: "100%", - height: 4.5 - }, - valueLabel: { - textAlign: "center" - }, - thumb: { - height: 20, - width: 20, - top: "36.5%", - backgroundColor: "#fff", - border: "3px solid #fff" - }, - track: { - backgroundColor: "#4BCF93", - borderRadius: "4px", - height: 4.5 - }, - rail: { - height: 4.5 - } -})(Slider) - const CustomSliderValue = styled(withTheme(Paper))(props => ({ boxShadow: "none", height: 54, diff --git a/src/modules/etherlink/components/EvmDaoBasics.tsx b/src/modules/etherlink/components/EvmDaoBasics.tsx index 1c1e178d..3ba80ac1 100644 --- a/src/modules/etherlink/components/EvmDaoBasics.tsx +++ b/src/modules/etherlink/components/EvmDaoBasics.tsx @@ -14,30 +14,32 @@ import { } from "components/ui/DaoCreator" import React from "react" import { Link } from "@material-ui/core" -import { - Grid, - styled, - Typography, - withStyles, - TextareaAutosize, - withTheme, - useMediaQuery, - useTheme, - InputAdornment, - Tooltip -} from "@material-ui/core" +import { Grid, Typography, useMediaQuery, useTheme, InputAdornment, Tooltip } from "@material-ui/core" import { ErrorText } from "modules/creator/token/ui" -import { OrgSettings } from "modules/creator/state/types" -import { isInvalidEvmAddress, validateEvmTokenAddress } from "../utils" +import { validateEvmTokenAddress } from "../utils" import { InfoIcon } from "modules/explorer/components/styled/InfoIcon" interface EvmDaoBasicsProps { // Add props as needed } -const validateForm = (values: OrgSettings) => { - const errors: FormikErrors = {} +type EvmDaoSettings = { + name: string + symbol: string + description: string + administrator: string + guardian: string + governanceToken: { + address?: string + symbol: string + tokenSymbol: string + tokenDecimals: number + } +} + +const validateForm = (values: EvmDaoSettings) => { + const errors: FormikErrors = {} if (!values.name) { errors.name = "Required" @@ -51,14 +53,6 @@ const validateForm = (values: OrgSettings) => { errors.description = "Required" } - if (!values.guardian) { - errors.guardian = "Required" - } - - if (values.guardian && isInvalidEvmAddress(values.guardian)) { - errors.guardian = "Invalid address" - } - if (!values.governanceToken.address) { errors.governanceToken = { ...errors.governanceToken, @@ -66,31 +60,20 @@ const validateForm = (values: OrgSettings) => { } } - if (values.governanceToken.address && validateEvmTokenAddress(values.governanceToken.address)) { - errors.governanceToken = { - ...errors.governanceToken, - address: "Invalid address" - } - } - - if (!values.governanceToken.tokenId) { - errors.governanceToken = { - ...errors.governanceToken, - tokenId: "Required" - } - } - - if (!values.governanceToken.tokenMetadata) { + if ( + values.governanceToken.symbol && + (values.governanceToken.symbol.length > 4 || values.governanceToken.symbol.length < 2) + ) { errors.governanceToken = { ...errors.governanceToken, - address: "Could not find token" + address: "Invalid Symbol" } } - if (values.governanceToken.tokenMetadata?.standard === "fa1.2") { + if (!values.governanceToken.tokenDecimals) { errors.governanceToken = { ...errors.governanceToken, - address: "FA1.2 Tokens Not Supported" + tokenDecimals: "Required" } } @@ -101,8 +84,8 @@ export const EvmDaoBasics: React.FC = () => { const theme = useTheme() const isMobile = useMediaQuery(theme.breakpoints.down("sm")) - const saveStepInfo = (values: OrgSettings, { setSubmitting }: { setSubmitting: (b: boolean) => void }) => { - const newValues: OrgSettings = { ...values } + const saveStepInfo = (values: EvmDaoSettings, { setSubmitting }: { setSubmitting: (b: boolean) => void }) => { + const newValues: EvmDaoSettings = { ...values } // const newState = { // ...state?.data, // orgSettings: newValues @@ -113,19 +96,13 @@ export const EvmDaoBasics: React.FC = () => { // history.push(`voting`) } - const tokenMetadata = { - name: "Test", - symbol: "TEST" - } - const loading = false - - const orgSettings: OrgSettings = { + const orgSettings: EvmDaoSettings = { name: "", symbol: "", description: "", administrator: "", guardian: "", - governanceToken: { address: "", tokenId: "" } + governanceToken: { address: "", symbol: "", tokenDecimals: 0, tokenSymbol: "" } } return ( @@ -134,12 +111,8 @@ export const EvmDaoBasics: React.FC = () => { title="DAO Basics" description={ - These settings will define the name, symbol, and initial distribution of your token. You will need a - pre-existing ERC20 token to use as governance token. To deploy your own governance token you can go{" "} - - here - {" "} - and then come back. + These settings will define the name, symbol, and initial distribution of your DAO along with the ERC20 + token. } > @@ -176,41 +149,41 @@ export const EvmDaoBasics: React.FC = () => { {" "} - Token Address{" "} + Ticker Symbol{" "} setFieldTouched("governanceToken.address")} + onClick={() => setFieldTouched("governanceToken.symbol")} inputProps={{ maxLength: 36 }} /> - {errors.governanceToken?.address && touched.governanceToken?.address ? ( - {errors.governanceToken?.address} + {errors.governanceToken?.symbol && touched.governanceToken?.symbol ? ( + {errors.governanceToken?.symbol} ) : null} {" "} - Token ID{" "} + Token Decimals{" "} @@ -219,52 +192,10 @@ export const EvmDaoBasics: React.FC = () => { }} /> - {errors.governanceToken?.tokenId && touched.governanceToken?.tokenId ? ( - {errors.governanceToken?.tokenId} + {errors.governanceToken?.tokenDecimals && touched.governanceToken?.tokenDecimals ? ( + {errors.governanceToken?.tokenDecimals} ) : null} - {tokenMetadata && !loading && ( - - - {tokenMetadata.name} ({tokenMetadata.symbol}) - - - )} - - - - - {" "} - Guardian Address{" "} - - - - - setFieldTouched("guardian")} - inputProps={{ - maxLength: 36 - }} - InputProps={{ - endAdornment: ( - - - - - - ) - }} - > - - {errors.guardian && touched.guardian ? {errors.guardian} : null} - diff --git a/src/modules/etherlink/components/EvmDaoDeployment.tsx b/src/modules/etherlink/components/EvmDaoDeployment.tsx deleted file mode 100644 index a14d41c5..00000000 --- a/src/modules/etherlink/components/EvmDaoDeployment.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react" - -interface EvmDaoDeploymentProps { - // Add props as needed -} - -export const EvmDaoDeployment: React.FC = () => { - return ( -
-

Deploy Your DAO

-
-
- ) -} diff --git a/src/modules/etherlink/components/EvmDaoMembership.tsx b/src/modules/etherlink/components/EvmDaoMembership.tsx new file mode 100644 index 00000000..360304d3 --- /dev/null +++ b/src/modules/etherlink/components/EvmDaoMembership.tsx @@ -0,0 +1,122 @@ +import { useState } from "react" +import { TextField } from "@mui/material" +import { IconButton, styled } from "@material-ui/core" +import { Button } from "components/ui/Button" +import { Add, RemoveCircleOutline } from "@material-ui/icons" +import { Box } from "@material-ui/core" +import { DescriptionText } from "components/ui/DaoCreator" +import { TitleBlock } from "modules/common/TitleBlock" +import useEvmDaoCreateStore from "services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore" + +interface Member { + address: string + amountOfTokens: number +} +const StyledTextField = styled(TextField)({ + "& .MuiInput-root": { + color: "#fff", + paddingBottom: "4px" + }, + "& label": { + color: "#fff" + }, + "& label.Mui-focused": { + color: "#fff" + }, + "& .MuiInput-underline:before": { + borderBottomColor: "#ccc" + }, + "& .MuiInput-underline:after": { + borderBottomColor: "#fff" + }, + "& .MuiOutlinedInput-root": { + "& fieldset": { + borderColor: "#fff" + }, + "&:hover fieldset": { + borderColor: "#fff" + }, + "&.Mui-focused fieldset": { + borderColor: "#fff" + } + } +}) + +export const EvmDaoMembership = () => { + const { data, setFieldValue } = useEvmDaoCreateStore() + const members = data.members as Member[] + const setMembers = (members: Member[]) => { + setFieldValue("members", members) + } + + const handleMemberChange = (index: number, field: keyof Member, value: string) => { + const newMembers = [...members] + newMembers[index] = { ...newMembers[index], [field]: value } + setMembers(newMembers) + } + + const handleAddMember = () => { + setMembers([...members, { address: "", amountOfTokens: 0 }]) + } + + const handleRemoveMember = (index: number) => { + setMembers(members.filter((_, i) => i !== index)) + } + + return ( + + + Specify the address and their voting power of your associated. Voting power is represented by their amount + of tokens + + } + /> + + {members.map((member, index) => ( + + + handleMemberChange(index, "address", e.target.value)} + /> + + + handleMemberChange(index, "amountOfTokens", e.target.value)} + /> + + {index >= 1 && ( + handleRemoveMember(index)} size="small"> + + + )} + {index === 0 && } + + ))} + + + + + ) +} diff --git a/src/modules/etherlink/components/EvmDaoQuorum.tsx b/src/modules/etherlink/components/EvmDaoQuorum.tsx index d824a1af..48616bc0 100644 --- a/src/modules/etherlink/components/EvmDaoQuorum.tsx +++ b/src/modules/etherlink/components/EvmDaoQuorum.tsx @@ -1,14 +1,80 @@ -import React from "react" +import { Grid, Typography, useMediaQuery, useTheme, Tooltip, InputAdornment } from "@material-ui/core" +import { CustomFormikTextField, CustomInputContainer, DescriptionText, InfoIconInput } from "components/ui/DaoCreator" +import InputText from "components/ui/InputText" +import { StyledSliderWithValue } from "components/ui/StyledSlider" +import { Field } from "formik" +import { TitleBlock } from "modules/common/TitleBlock" +import React, { useRef } from "react" +import useEvmDaoCreateStore from "services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore" interface EvmDaoQuorumProps { // Add props as needed } export const EvmDaoQuorum: React.FC = () => { + const theme = useTheme() + const isMobile = useMediaQuery(theme.breakpoints.down("sm")) + const { data, getIn, setFieldValue } = useEvmDaoCreateStore() return (
-

Quorum Settings

-
+ + These settings will define the quorum settings for your DAO. + + } + /> + { + setFieldValue("quorum.returnedTokenPercentage", newValue || 0) + }} + /> + + + + Proposal Threshold ({data?.governanceToken?.symbol} Amount) + + + Minimum voting power to submit a proposal + + + + + +
) } + +{ + /* + + + + + + ) + }} + /> + */ +} diff --git a/src/modules/etherlink/components/EvmDaoSummary.tsx b/src/modules/etherlink/components/EvmDaoSummary.tsx index b3bb0a99..49f62bdf 100644 --- a/src/modules/etherlink/components/EvmDaoSummary.tsx +++ b/src/modules/etherlink/components/EvmDaoSummary.tsx @@ -1,3 +1,5 @@ +import { DescriptionText } from "components/ui/DaoCreator" +import { TitleBlock } from "modules/common/TitleBlock" import React from "react" interface EvmDaoSummaryProps { @@ -7,7 +9,12 @@ interface EvmDaoSummaryProps { export const EvmDaoSummary: React.FC = () => { return (
-

DAO Summary

+ These settings will define the summary for your DAO. + } + />
) diff --git a/src/modules/etherlink/components/EvmDaoVoting.tsx b/src/modules/etherlink/components/EvmDaoVoting.tsx index 441b7dce..bd4e9c08 100644 --- a/src/modules/etherlink/components/EvmDaoVoting.tsx +++ b/src/modules/etherlink/components/EvmDaoVoting.tsx @@ -1,14 +1,270 @@ +import { Grid, styled, Tooltip, Typography, withStyles } from "@material-ui/core" +import { InfoRounded } from "@material-ui/icons" +import { DescriptionText } from "components/ui/DaoCreator" +import { TitleBlock } from "modules/common/TitleBlock" import React from "react" +import { Field, Formik, Form } from "formik" +import { TextField } from "formik-material-ui" + +const TimeBox = styled(Grid)(({ theme }) => ({ + background: theme.palette.primary.dark, + borderRadius: 8, + width: 72, + minHeight: 59, + marginBottom: 16, + display: "grid", + [theme.breakpoints.down("sm")]: { + width: 160 + } +})) + +const TimeText = styled(Typography)({ + marginTop: -20, + marginLeft: 16, + fontWeight: 300 +}) + +const CustomTooltip = styled(Tooltip)({ + marginLeft: 8 +}) + +const InfoIconInput = styled(InfoRounded)(({ theme }) => ({ + cursor: "default", + color: theme.palette.secondary.light, + height: 16, + width: 16, + marginLeft: 8 +})) + +const InputContainer = styled(Grid)({ + paddingRight: 15, + ["@media (max-width:1167px)"]: { + paddingRight: 0 + } +}) + +const CustomFormikTextField = withStyles({ + root: { + "& input": { + textAlign: "center" + } + } +})(TextField) + +const styles = { + voting: { + marginTop: 6, + marginBottom: 16, + fontWeight: 400, + fontSize: 18, + width: "75%" + } +} interface EvmDaoVotingProps { - // Add props as needed + onSubmit?: (values: any) => void + initialValues?: any } -export const EvmDaoVoting: React.FC = () => { +const initialFormValues = { + votingBlocksDay: 0, + votingBlocksHours: 0, + votingBlocksMinutes: 0, + proposalFlushBlocksDay: 0, + proposalFlushBlocksHours: 0, + proposalFlushBlocksMinutes: 0, + proposalExpiryBlocksDay: 0, + proposalExpiryBlocksHours: 0, + proposalExpiryBlocksMinutes: 0 +} + +export const EvmDaoVoting: React.FC = ({ onSubmit, initialValues = initialFormValues }) => { + const handleSubmit = (values: any) => { + if (onSubmit) { + onSubmit(values) + } + } + return (
-

Voting Configuration

-
+ + These settings will define the voting configuration for your DAO. + + } + /> + + + {({ isSubmitting }) => ( +
+ + + + + Voting Delay + + + + + + + + + + + + days + + + + + + hours + + + + + + minutes + + + + + + + + Voting Duration + + + + + + + + + + + + days + + + + + + hours + + + + + + minutes + + + + + + + + Execution Delay + + + + + + + + + + + + days + + + + + + hours + + + + + + minutes + + + + +
+ )} +
) } diff --git a/src/modules/etherlink/config.ts b/src/modules/etherlink/config.ts index c763f126..f4685058 100644 --- a/src/modules/etherlink/config.ts +++ b/src/modules/etherlink/config.ts @@ -1,5 +1,5 @@ import { EvmDaoBasics } from "./components/EvmDaoBasics" -import { EvmDaoDeployment } from "./components/EvmDaoDeployment" +import { EvmDaoMembership } from "./components/EvmDaoMembership" import { EvmDaoQuorum } from "./components/EvmDaoQuorum" import { EvmDaoSummary } from "./components/EvmDaoSummary" import { EvmDaoVoting } from "./components/EvmDaoVoting" @@ -9,8 +9,8 @@ export const STEPS = [ { title: "DAO Basics", index: 1, path: "dao", component: EvmDaoBasics }, { title: "Proposals & Voting", index: 2, path: "voting", component: EvmDaoVoting }, { title: "Quorum", index: 3, path: "quorum", component: EvmDaoQuorum }, - { title: "Review Information", index: 4, path: "summary", component: EvmDaoSummary }, - { title: "Deployment Type", index: 5, path: "type", component: EvmDaoDeployment } + { title: "Membership", index: 4, path: "membership", component: EvmDaoMembership }, + { title: "Review & Deploy", index: 5, path: "summary", component: EvmDaoSummary } ] export const urlToStepMap: Record = { diff --git a/src/modules/etherlink/layout.tsx b/src/modules/etherlink/layout.tsx index 22fe1c57..5604ebf8 100644 --- a/src/modules/etherlink/layout.tsx +++ b/src/modules/etherlink/layout.tsx @@ -3,9 +3,8 @@ import { Box, Grid, Step, StepLabel, useMediaQuery, useTheme, Link } from "@mate import ProgressBar from "react-customizable-progressbar" import { useHistory } from "react-router" -import { CreatorContext, StepInfo } from "modules/creator/state" -import { StepRouter, STEPS, useStepNumber } from "modules/creator/steps" -import { NavigationBar } from "modules/creator/components/NavigationBar" +import { StepInfo } from "modules/creator/state" +import { STEPS } from "modules/etherlink/config" import { Navbar } from "modules/common/Toolbar" import { PageContainer, @@ -17,28 +16,17 @@ import { StyledStepper, PageContent } from "components/ui/DaoCreator" -import mixpanel from "mixpanel-browser" import { urlToStepMap } from "./config" +import { NavigationBar } from "modules/creator/components/NavigationBar" +import useEvmDaoCreateStore from "services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore" export const EvmDaoCreatorLayout: React.FC = ({ children }) => { - // const creator = useContext(CreatorContext) - - // const { back, next } = creator.state - const back = () => {} - const next = () => {} - const step = useStepNumber() + const { currentStep: step, next, prev: back } = useEvmDaoCreateStore() const history = useHistory() const theme = useTheme() const isMobile = useMediaQuery(theme.breakpoints.down("sm")) - useEffect(() => { - mixpanel.unregister("daoAddress") - mixpanel.unregister("daoType") - - mixpanel.track("Visited Creator") - }, []) - return ( @@ -86,7 +74,7 @@ export const EvmDaoCreatorLayout: React.FC = ({ children }) => { - {/* {step < 6 && } */} + {step < 6 && } diff --git a/src/services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore.tsx b/src/services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore.tsx new file mode 100644 index 00000000..4336105b --- /dev/null +++ b/src/services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore.tsx @@ -0,0 +1,109 @@ +import { create } from "zustand" +import { STEPS } from "modules/etherlink/config" +import { useHistory } from "react-router-dom" + +interface EvmDaoCreateStore { + currentStep: number + data: Record + loading: Record + error: Record + getIn: (field: string) => any + setFieldValue: (field: string, value: any) => void + next: { + text: string + handler: () => string | undefined + } + prev: { + text: string + handler: () => string | undefined + } +} + +const useEvmDaoCreateZustantStore = create((set, get) => ({ + currentStep: 0, + data: { + name: "", + symbol: "", + description: "", + administrator: "", + governanceToken: { + address: "", + symbol: "", + tokenDecimals: 0 + }, + quorum: { + returnedTokenPercentage: 0 + }, + members: [{ address: "", amountOfTokens: 0 }], + voting: { + votingBlocksDay: 0, + votingBlocksWeek: 0 + }, + registry: {} + }, + getIn: (field: string) => { + if (field.includes(".")) { + const [parent, child] = field.split(".") + return get().data[parent][child] + } + return get().data[field] + }, + setFieldValue: (field: string, value: any) => { + if (field.includes(".")) { + const [parent, child] = field.split(".") + set({ data: { ...get().data, [parent]: { ...get().data[parent], [child]: value } } }) + } else { + set({ data: { ...get().data, [field]: value } }) + } + }, + next: { + text: "Next", + handler: () => { + const { currentStep } = get() + if (currentStep === STEPS.length - 1) return + console.log("Moving to Next Step", currentStep) + set({ currentStep: currentStep + 1 }) + return STEPS[currentStep + 1]?.path + } + }, + prev: { + text: "Back", + handler: () => { + const { currentStep } = get() + if (currentStep === 0) return + console.log("Moving to Previous Step", currentStep) + set({ currentStep: currentStep - 1 }) + return STEPS[currentStep - 1]?.path + } + }, + loading: {}, + error: {} +})) + +const useEvmDaoCreateStore = () => { + const data = useEvmDaoCreateZustantStore() + const history = useHistory() + return { + ...data, + next: { + text: "Next", + handler: () => { + const nextStep = data.next.handler() + if (nextStep) { + history.push(nextStep) + } + } + }, + prev: { + text: "Back", + handler: () => { + const prevStep = data.prev.handler() + if (prevStep) { + history.push(prevStep) + } + } + } + } +} + +export default useEvmDaoCreateStore diff --git a/src/services/wagmi/context.tsx b/src/services/wagmi/context.tsx index da330713..7f812607 100644 --- a/src/services/wagmi/context.tsx +++ b/src/services/wagmi/context.tsx @@ -73,9 +73,9 @@ const useEtherlinkDao = ({ network }: { network: string }) => { console.log("Firestore Data", firestoreData) if (!firebaseRootCollection) return if (firestoreData?.[firebaseRootCollection]) { - firestoreData[firebaseRootCollection]?.forEach((dao: any) => { - console.log("DAOTreasury", dao.id, Object.values(dao.treasury)) - }) + // firestoreData[firebaseRootCollection]?.forEach((dao: any) => { + // console.log("DAOTreasury", dao.id, Object.values(dao.treasury)) + // }) setDaoData(firestoreData[firebaseRootCollection]) setIsLoadingDaos(false)