WIP - Improved DAO Creator and explore UX

src/modules/creator/components/NavigationBar.tsx

@@ -58,7 +58,11 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({ back, next }) => {
         </Grid>
         <Grid item xs={6}>
           {next && (
-            <NextButton onClick={next.handler}>
+            <NextButton
+              disabled={next.disabled}
+              onClick={next.handler}
+              style={{ cursor: next.disabled ? "not-allowed" : "pointer", opacity: next.disabled ? 0.5 : 1 }}
+            >
               <Typography style={{ fontWeight: 500 }} color="primary">
                 {next.text}
               </Typography>

src/modules/creator/state/types.ts

@@ -62,6 +62,7 @@ export interface NavigationBarProps {
   }
   next?: {
     text: string
+    disabled?: boolean
     handler: () => void
   }
 }

src/modules/etherlink/creator/EvmDaoSummary.tsx

@@ -1,6 +1,7 @@
 import { DescriptionText } from "components/ui/DaoCreator"
 import { TitleBlock } from "modules/common/TitleBlock"
 import React from "react"
+import useEvmDaoCreateStore from "services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore"
 
 interface EvmDaoSummaryProps {
   // Add props as needed

src/modules/etherlink/explorer/EtherlinkDAO/EvmProposalsPage.tsx

@@ -12,7 +12,7 @@ import Select, { SelectChangeEvent } from "@mui/material/Select"
 import { useQueryParam } from "modules/home/hooks/useQueryParam"
 
 export const EvmProposalsPage = () => {
-  const daoId = useEtherlinkDAOID()
+  // const daoId = useEtherlinkDAOID()
   const [proposalType, setProposalType] = useQueryParam("type")
   const [proposalStatus, setProposalStatus] = useQueryParam("status")
 

src/modules/explorer/pages/DAOList/components/Searchbar.tsx

@@ -42,12 +42,13 @@ const StyledInput = withStyles((theme: Theme) => ({
   }
 }))(TextField)
 
-export const SearchInput: React.FC<{ search: any }> = ({ search }) => {
+export const SearchInput: React.FC<{ search: any; defaultValue?: string }> = ({ search, defaultValue }) => {
   return (
     <StyledInput
       id="standard-search"
       label="Search field"
       type="search"
+      defaultValue={defaultValue || ""}
       placeholder="Search"
       onChange={e => search(e.target.value)}
       InputProps={{

src/modules/explorer/pages/DAOList/index.tsx

@@ -26,6 +26,7 @@ import { ReactComponent as MyDAOsSelectedIcon } from "assets/img/my-daos-selecte
 import ReactPaginate from "react-paginate"
 import "./styles.css"
 import { LoadingLine } from "components/ui/LoadingLine"
+import { useQueryParam } from "modules/home/hooks/useQueryParam"
 
 const PageContainer = styled("div")(({ theme }) => ({
   width: "1000px",
@@ -123,7 +124,7 @@ export const DAOList: React.FC = () => {
   const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs"))
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("mobile"))
 
-  const [searchText, setSearchText] = useState("")
+  const [searchText, setSearchText] = useQueryParam("q")
   const [selectedTab, setSelectedTab] = React.useState(0)
   const [currentPage, setCurrentPage] = useState(0)
 
@@ -169,6 +170,7 @@ export const DAOList: React.FC = () => {
 
   const myDAOs = useMemo(() => {
     if (daos) {
+      console.log("Raw DAOs", daos)
       const formattedDAOs = daos
         .map(dao => ({
           id: dao.address,
@@ -193,6 +195,7 @@ export const DAOList: React.FC = () => {
         )
       }
       const accountAddress = account || etherlink?.account?.address
+      console.log("formattedDaos", formattedDAOs)
       return formattedDAOs.filter(dao => dao.votingAddresses.includes(accountAddress))
     }
 
@@ -229,7 +232,7 @@ export const DAOList: React.FC = () => {
               style={isMobileExtraSmall ? { gap: 24 } : { gap: 42 }}
             >
               <Search>
-                <SearchInput search={filterDAOs} />
+                <SearchInput defaultValue={searchText || ""} search={filterDAOs} />
               </Search>
               <Grid item>
                 <Grid container style={{ gap: 22 }} justifyContent="center">

src/services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore.tsx

@@ -10,6 +10,7 @@ import HbWrapperAbi from "assets/abis/hb_wrapper.json"
 import { useCallback, useContext, useState } from "react"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { EtherlinkContext } from "services/wagmi/context"
+import { useNotification } from "modules/common/hooks/useNotification"
 
 interface EvmDaoCreateStore {
   currentStep: number
@@ -158,11 +159,11 @@ const useEvmDaoCreateStore = () => {
   const { contractData } = useContext(EtherlinkContext)
   const wrapperAddress = contractData?.wrapper
   const { etherlink } = useTezos()
+  const notify = useNotification()
 
   const deployDaoWithWrapper = useCallback(async () => {
     const daoData = data.data
-    // console.log({ daoData })
-    // return
+
     try {
       // Get wrapper factory
       const samplePayload = [
@@ -183,7 +184,7 @@ const useEvmDaoCreateStore = () => {
         ["Founder", "Mission"], // Registry Keys
         ["Alice", "Promote Decentralization"] // Registry Values
       ]
-      setIsDeploying(true)
+
       const totalTokenSupply = daoData.members.reduce((acc: number, member: any) => acc + member.amountOfTokens, 0)
       const proposalThreshhold = daoData.quorum.proposalThreshold
       const quorumThreshold = daoData.quorum.returnedTokenPercentage
@@ -225,17 +226,23 @@ const useEvmDaoCreateStore = () => {
       const daoCreatePayload = Object.values(daoCreateObject)
       console.log({ daoCreatePayload, samplePayload })
       const wrapperFactory: ethers.Contract = new ethers.Contract(wrapperAddress, HbWrapperAbi.abi, etherlink.signer)
+
+      setIsDeploying(true)
       const wrapper: ethers.Contract = await wrapperFactory.deployDAOwithToken(daoCreatePayload)
 
+      // 0xa42621d950bf85d88e35e26b48eb69edd1d0c35b59ee282e3672b0e164ee9aba
       console.log("Transaction sent:", wrapper.hash)
 
       const receipt = await wrapper.wait()
+      // .hash "0xa42621d950bf85d88e35e26b48eb69edd1d0c35b59ee282e3672b0e164ee9aba"
       console.log("Transaction confirmed:", receipt)
-      history.push("/explorer/daos")
+      history.push(`/explorer/daos?q=${daoData.name}`)
+      // history.push("/explorer/etherlink/dao/0x287915D27CC4FC967Ca10AA20242d80d99caCe5e/overview")
     } catch (error) {
       console.error("Error deploying DAO", error)
       return null
     }
+    setIsDeploying(false)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.data, etherlink.signer, wrapperAddress])
   const isFinalStep = data.currentStep === STEPS.length - 1
@@ -244,9 +251,36 @@ const useEvmDaoCreateStore = () => {
     ...data,
     isDeploying,
     next: {
-      text: isFinalStep ? "Deploy" : "Next",
+      text: isDeploying ? "Deploying..." : isFinalStep ? "Deploy" : "Next",
+      disabled: isDeploying,
       handler: () => {
         if (data.data.template === "lite") return history.push("/lite")
+
+        // Validation for 1. DAO Basics
+        if (
+          data.currentStep == 1 &&
+          (data.data.name === "" ||
+            data.data.governanceToken.symbol === "" ||
+            data.data.description === "" ||
+            data.data.governanceToken.tokenDecimals < 1)
+        ) {
+          return notify({
+            message: "Please fill in all fields",
+            variant: "error"
+          })
+        }
+
+        // Validation for 2. Proposal & Voting
+        if (
+          data.currentStep == 2 &&
+          Object.values(data.data.voting).reduce((acc: number, curr: any): number => acc + (Number(curr) || 0), 0) < 1
+        ) {
+          return notify({
+            message: "Please add valid values for Voting Delay, Voting Duration, and Execution Delay",
+            variant: "error"
+          })
+        }
+
         if (isFinalStep) {
           deployDaoWithWrapper()
         } else {