Add proposal form and proposal list to Full DAO

Signed-off-by: Manank Patni <[email protected]>
dOrgTech · May 13, 2023 · da5f479 · da5f479
1 parent eb89a7e
commit da5f479
Show file tree

Hide file tree

Showing 31 changed files with 288 additions and 268 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,7 +35,7 @@ const queryClient = new QueryClient({
       refetchOnMount: false,
       refetchOnWindowFocus: true,
       staleTime: 5000,
-      cacheTime: 30000
+      cacheTime: 300000
     }
   }
 })

diff --git a/src/models/Community.ts b/src/models/Community.ts
@@ -1,5 +1,5 @@
 export interface Community {
-  _id?: string
+  _id: string
   name: string
   description: string
   linkToTerms: string

diff --git a/src/models/Polls.ts b/src/models/Polls.ts
@@ -4,7 +4,7 @@ export enum ProposalStatus {
 }
 export interface Poll {
   _id?: string
-  daoID: string
+  daoID: string | undefined
   description: string
   name: string
   referenceBlock?: string

diff --git a/src/modules/explorer/components/ConfigProposalForm.tsx b/src/modules/explorer/components/ConfigProposalForm.tsx
@@ -35,6 +35,7 @@ interface Props {
 export const ConfigProposalForm: React.FC<Props> = ({ open, handleClose }) => {
   const daoId = useDAOID()
   const { data: dao } = useDAO(daoId)
+  console.log("dao: ", dao)
 
   const methods = useForm<Values>()
 

diff --git a/src/modules/explorer/components/ConfigProposalFormLambda.tsx b/src/modules/explorer/components/ConfigProposalFormLambda.tsx
@@ -143,6 +143,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
 
   const daoId = useDAOID()
   const { data: dao } = useDAO(daoId)
+  console.log("dao: ", dao)
   const daoLambdas = useDAOLambdas(daoId)
 
   const { mutate: lambdaAdd } = useLambdaAddPropose()

diff --git a/src/modules/explorer/components/CycleDescription.tsx b/src/modules/explorer/components/CycleDescription.tsx
@@ -13,6 +13,7 @@ const ProposalsStatus = styled(Typography)(({ theme }: { theme: Theme }) => ({
 
 export const CycleDescription: React.FC<{ daoAddress: string }> = ({ daoAddress }) => {
   const { cycleInfo } = useDAO(daoAddress)
+  console.log("cycleInfo: ", cycleInfo)
   const isVotingPeriod = cycleInfo && cycleInfo.type
   const theme = useTheme()
 

diff --git a/src/modules/explorer/components/DAOStatsRow.tsx b/src/modules/explorer/components/DAOStatsRow.tsx
@@ -10,6 +10,7 @@ import BigNumber from "bignumber.js"
 import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
 import { useDAOID } from "../pages/DAO/router"
 import { useTimeLeftInCycle } from "../hooks/useTimeLeftInCycle"
+import { usePolls } from "modules/lite/explorer/hooks/usePolls"
 
 const StatsContainer = styled(ContentContainer)(({ theme }) => ({
   padding: "38px 38px",
@@ -115,13 +116,18 @@ const CycleTime = styled(Typography)(({ theme }) => ({
 export const DAOStatsRow: React.FC = () => {
   const daoId = useDAOID()
   const { data, cycleInfo, ledger } = useDAO(daoId)
+  console.log("data: ", data)
 
   const symbol = data && data.data.token.symbol.toUpperCase()
   const blocksLeft = cycleInfo && cycleInfo.blocksLeft
   const theme = useTheme()
   const isExtraSmall = useMediaQuery(theme.breakpoints.down("xs"))
   const { data: activeProposals } = useProposals(daoId, ProposalStatus.ACTIVE)
   const { hours, minutes, days } = useTimeLeftInCycle()
+  const polls = usePolls(data?.liteDAOData?._id)
+  console.log("polls: ", polls)
+  const activeLiteProposals = polls?.filter(p => Number(p.endTime) < Math.floor(new Date().valueOf() / 1000))
+  console.log("activeLiteProposals: ", activeLiteProposals)
 
   const amountLocked = useMemo(() => {
     if (!ledger) {
@@ -221,7 +227,9 @@ export const DAOStatsRow: React.FC = () => {
                 </Grid>
                 <Grid item>
                   <ProposalInfoTitle color="secondary">Active Proposals</ProposalInfoTitle>
-                  <LargeNumber color="textPrimary">{activeProposals?.length}</LargeNumber>
+                  <LargeNumber color="textPrimary">
+                    {Number(activeProposals?.length) + Number(activeLiteProposals.length)}
+                  </LargeNumber>
                 </Grid>
               </Grid>
             </Grid>

diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
@@ -6,6 +6,9 @@ import { Proposal } from "services/services/dao/mappers/proposal/types"
 import { ContentContainer } from "./ContentContainer"
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"
+import { ProposalTableRow } from "modules/lite/explorer/components/ProposalTableRow"
+import { StyledDivider } from "modules/lite/explorer/components/ProposalList"
+import { Poll } from "models/Polls"
 
 const TableContainer = styled(ContentContainer)({
   width: "100%"
@@ -28,9 +31,17 @@ interface Props {
   title: string
   showFooter?: boolean
   rightItem?: (proposal: Proposal) => React.ReactElement
+  liteProposals: Poll[]
 }
 
-export const ProposalsList: React.FC<Props> = ({ currentLevel, proposals, title, showFooter, rightItem }) => {
+export const ProposalsList: React.FC<Props> = ({
+  currentLevel,
+  proposals,
+  title,
+  showFooter,
+  rightItem,
+  liteProposals
+}) => {
   const [open, setopen] = useState(true)
 
   return (
@@ -42,15 +53,15 @@ export const ProposalsList: React.FC<Props> = ({ currentLevel, proposals, title,
               {title}
             </Typography>
           </Grid>
-          {proposals.length ? (
+          {proposals.length && proposals.length > 0 ? (
             <Grid item>
               <IconButton aria-label="expand row" size="small" onClick={() => setopen(!open)}>
                 {open ? <KeyboardArrowUpIcon htmlColor="#FFF" /> : <KeyboardArrowDownIcon htmlColor="#FFF" />}
               </IconButton>
             </Grid>
           ) : null}
         </TableHeader>
-        {proposals.length ? (
+        {proposals.length && proposals.length > 0 ? (
           <Grid
             item
             container
@@ -71,15 +82,27 @@ export const ProposalsList: React.FC<Props> = ({ currentLevel, proposals, title,
               </Grid>
             ))}
           </Grid>
-        ) : (
+        ) : null}
+        {liteProposals && liteProposals.length > 0
+          ? liteProposals.map((poll, i) => {
+              return (
+                <div key={`poll-${i}`}>
+                  <ProposalTableRow poll={poll} />
+                  {liteProposals.length - 1 !== i ? <StyledDivider key={`divider-${i}`} /> : null}
+                </div>
+              )
+            })
+          : null}
+
+        {!(proposals.length && proposals.length > 0) && !(liteProposals && liteProposals.length > 0) ? (
           <ProposalsFooter item container direction="column" justifyContent="center">
             <Grid item>
               <Typography color="textPrimary" align="center">
                 No items
               </Typography>
             </Grid>
           </ProposalsFooter>
-        )}
+        ) : null}
         {showFooter && (
           <ProposalsFooter item container direction="column" justifyContent="center">
             <Grid item>

diff --git a/src/modules/explorer/pages/Config/index.tsx b/src/modules/explorer/pages/Config/index.tsx
@@ -19,6 +19,8 @@ import { SupportedLambdaProposalKey } from "services/bakingBad/lambdas"
 import { DelegationChangeProposalForm } from "modules/explorer/components/DelegationChangeProposalForm"
 import { DaoInfoTables } from "./components/DAOInfoTable"
 import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
+import { ProposalCreator } from "modules/lite/explorer/pages/CreateProposal"
+import { ProposalCreatorModal } from "modules/lite/explorer/pages/CreateProposal/ProposalCreatorModal"
 
 interface Action {
   id: any
@@ -28,6 +30,12 @@ interface Action {
 }
 
 const getActions = (): Action[] => [
+  {
+    name: "Off Chain Poll",
+    description: "Create an inconsequential poll for your community",
+    id: "off-chain",
+    isLambda: true
+  },
   {
     name: "Add Lambda",
     description: "Write Michelson code to add Lambda",
@@ -127,6 +135,7 @@ export const Config: React.FC = () => {
   const name = data && data.data.name
   const [proposalAction, setProposalAction] = useState<ProposalAction>(ProposalAction.none)
   const [openProposalFormLambda, setOpenProposalFormLambda] = useState(false)
+  const [openLiteProposal, setOpenLiteProposal] = useState(false)
 
   const handleOpenCustomProposalModal = (key: ProposalAction) => {
     setProposalAction(key)
@@ -143,9 +152,14 @@ export const Config: React.FC = () => {
   }
 
   const handleCloseSupportedExecuteProposalModal = () => {
+    setOpenLiteProposal(false)
     setOpenSupportedExecuteProposalModal(defaultOpenSupportedExecuteProposalModal)
   }
 
+  const handleLiteProposal = () => {
+    setOpenLiteProposal(true)
+  }
+
   const [openSupportedExecuteProposalModalKey, setOpenSupportedExecuteProposalModal] = useState<string>(
     defaultOpenSupportedExecuteProposalModal
   )
@@ -242,7 +256,9 @@ export const Config: React.FC = () => {
           <Grid key={index} item xs={isMobileSmall ? 12 : 4}>
             <OptionContainer
               onClick={() =>
-                elem.isLambda
+                elem.id === "off-chain"
+                  ? handleLiteProposal()
+                  : elem.isLambda
                   ? handleOpenCustomProposalModal(elem.id)
                   : handleOpenSupportedExecuteProposalModal(elem.id)
               }
@@ -256,24 +272,38 @@ export const Config: React.FC = () => {
 
       <DaoInfoTables />
 
-      <ProposalFormLambda
-        action={proposalAction}
-        open={openProposalFormLambda}
-        handleClose={handleCloseCustomProposalModal}
-      />
-      <ConfigProposalForm
-        open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.ConfigurationProposal}
-        handleClose={handleCloseSupportedExecuteProposalModal}
-      />
-      <GuardianChangeProposalForm
-        open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateGuardianProposal}
-        handleClose={handleCloseSupportedExecuteProposalModal}
-      />
+      {openProposalFormLambda ? (
+        <ProposalFormLambda
+          action={proposalAction}
+          open={openProposalFormLambda}
+          handleClose={handleCloseCustomProposalModal}
+        />
+      ) : null}
+
+      {openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.ConfigurationProposal ? (
+        <ConfigProposalForm
+          open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.ConfigurationProposal}
+          handleClose={handleCloseSupportedExecuteProposalModal}
+        />
+      ) : null}
+
+      {openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateGuardianProposal ? (
+        <GuardianChangeProposalForm
+          open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateGuardianProposal}
+          handleClose={handleCloseSupportedExecuteProposalModal}
+        />
+      ) : null}
+
+      {openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateContractDelegateProposal ? (
+        <DelegationChangeProposalForm
+          open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateContractDelegateProposal}
+          handleClose={handleCloseSupportedExecuteProposalModal}
+        />
+      ) : null}
 
-      <DelegationChangeProposalForm
-        open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateContractDelegateProposal}
-        handleClose={handleCloseSupportedExecuteProposalModal}
-      />
+      {openLiteProposal ? (
+        <ProposalCreatorModal open={openLiteProposal} handleClose={handleCloseSupportedExecuteProposalModal} />
+      ) : null}
     </>
   )
 }
diff --git a/src/modules/explorer/pages/DAO/index.tsx b/src/modules/explorer/pages/DAO/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react"
-import { Grid, styled, Typography, Button, useTheme, useMediaQuery, Tooltip } from "@material-ui/core"
+import { Grid, styled, Typography, Button, useTheme, useMediaQuery, Tooltip, Avatar } from "@material-ui/core"
 
 import { useFlush } from "services/contracts/baseDAO/hooks/useFlush"
 import { useDAO } from "services/services/dao/hooks/useDAO"
@@ -15,6 +15,12 @@ import { UsersTable } from "../../components/UsersTable"
 import BigNumber from "bignumber.js"
 import { InfoIcon } from "../../components/styled/InfoIcon"
 import { SmallButton } from "../../../common/SmallButton"
+import { usePolls } from "modules/lite/explorer/hooks/usePolls"
+
+export const StyledAvatar = styled(Avatar)({
+  height: 50,
+  width: 50
+})
 
 const HeroContainer = styled(ContentContainer)(({ theme }) => ({
   padding: "38px 38px"
@@ -81,6 +87,8 @@ export const DAO: React.FC = () => {
   const { data: activeProposals } = useProposals(daoId, ProposalStatus.ACTIVE)
   const { data: executableProposals } = useProposals(daoId, ProposalStatus.EXECUTABLE)
   const { data: expiredProposals } = useProposals(daoId, ProposalStatus.EXPIRED)
+  const polls = usePolls(data?.liteDAOData?._id)
+  const activeLiteProposals = polls?.filter(p => Number(p.endTime) < Math.floor(new Date().valueOf() / 1000))
 
   const onFlush = useCallback(async () => {
     if (executableProposals && expiredProposals && executableProposals.length && data) {
@@ -115,6 +123,7 @@ export const DAO: React.FC = () => {
         <Grid container direction="column" style={{ gap: 36 }}>
           <Grid item>
             <Grid container style={{ gap: 20 }} alignItems="center">
+              {/* <StyledAvatar src={data?.liteDAOData?.picUri}></StyledAvatar> */}
               <Grid item>
                 <TitleText color="textPrimary">{name}</TitleText>
               </Grid>
@@ -142,12 +151,15 @@ export const DAO: React.FC = () => {
       <DAOStatsRow />
 
       {data && cycleInfo && activeProposals && (
-        <ProposalsList
-          showFooter
-          title="Active Proposals"
-          currentLevel={cycleInfo.currentLevel}
-          proposals={activeProposals}
-        />
+        <>
+          <ProposalsList
+            showFooter
+            title="Active Proposals"
+            currentLevel={cycleInfo.currentLevel}
+            proposals={activeProposals}
+            liteProposals={activeLiteProposals}
+          />
+        </>
       )}
       <TableContainer item>
         <UsersTable data={usersTableData} />

diff --git a/src/modules/explorer/pages/Proposals/index.tsx b/src/modules/explorer/pages/Proposals/index.tsx
@@ -17,6 +17,8 @@ import { SmallButton } from "../../../common/SmallButton"
 
 import { ContentContainer } from "../../components/ContentContainer"
 import { AllProposalsList } from "modules/explorer/components/AllProposalsList"
+import { ProposalList } from "modules/lite/explorer/components/ProposalList"
+import { usePolls } from "modules/lite/explorer/hooks/usePolls"
 
 const ProposalInfoTitle = styled(Typography)({
   fontSize: "18px",
@@ -82,6 +84,11 @@ export const Proposals: React.FC = () => {
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("xs"))
 
+  const polls = usePolls(data?.liteDAOData?._id)
+  const id = data?.liteDAOData?._id
+
+  const activeLiteProposals = polls?.filter(p => Number(p.endTime) < Math.floor(new Date().valueOf() / 1000))
+
   return (
     <>
       <Grid container direction="column" style={{ gap: 42 }}>
@@ -106,7 +113,9 @@ export const Proposals: React.FC = () => {
                 <Grid item xs={isMobileSmall ? undefined : true}>
                   <Grid item container direction="column">
                     <ProposalInfoTitle color="secondary">Active Proposals</ProposalInfoTitle>
-                    <LargeNumber color="textPrimary">{activeProposals?.length}</LargeNumber>
+                    <LargeNumber color="textPrimary">
+                      {Number(activeLiteProposals?.length) + Number(activeProposals?.length)}
+                    </LargeNumber>
                   </Grid>
                 </Grid>
               </Grid>
@@ -115,7 +124,14 @@ export const Proposals: React.FC = () => {
         </HeroContainer>
 
         {data && cycleInfo && proposals && (
-          <AllProposalsList title={"Proposals"} currentLevel={cycleInfo.currentLevel} proposals={proposals} />
+          <AllProposalsList title={"On-Chain"} currentLevel={cycleInfo.currentLevel} proposals={proposals} />
+        )}
+        {polls.length > 0 ? (
+          <ProposalList polls={polls} id={id} />
+        ) : (
+          <Typography style={{ width: "inherit" }} color="textPrimary">
+            0 proposals found
+          </Typography>
         )}
       </Grid>
     </>