Offchain Proposal Working for onchain DAOs on Etherlink

src/components/ui/Containers.tsx

@@ -0,0 +1,13 @@
+import { Grid, Typography, styled } from "@material-ui/core"
+
+const LoaderContainer = styled(Grid)({
+  paddingTop: 40,
+  paddingBottom: 40
+})
+
+const ContainerTitle = styled(Typography)({
+  fontSize: 24,
+  fontWeight: 600
+})
+
+export { LoaderContainer, ContainerTitle }

src/components/ui/Table.tsx

@@ -16,3 +16,7 @@ export const TableHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
 export const TableContainer = styled(ContentContainer)({
   width: "100%"
 })
+
+export const TableContainerGrid = styled(Grid)({
+  width: "100%"
+})

src/components/ui/icons/CopyIcon.tsx

@@ -0,0 +1,7 @@
+import { FileCopyOutlined } from "@material-ui/icons"
+import { styled } from "@material-ui/core"
+
+export const CopyIcon = styled(FileCopyOutlined)({
+  marginRight: 8,
+  cursor: "pointer"
+})

src/modules/etherlink/components/EvmDaoProposalList.tsx

@@ -8,48 +8,33 @@ import { ProposalTableRow } from "modules/lite/explorer/components/ProposalTable
 import { Poll } from "models/Polls"
 import ReactPaginate from "react-paginate"
 import { EvmProposalItem } from "./EvmProposalItem"
-
-const TableContainer = styled(Grid)({
-  width: "100%"
-})
+import { IEvmProposal } from "../types"
+import { TableContainerGrid } from "components/ui/Table"
+import { LoaderContainer } from "components/ui/Containers"
 
 const CustomGrid = styled(Grid)({
   "&:not(:last-child)": {
     marginBottom: 16
   }
 })
 
-const LoaderContainer = styled(Grid)({
-  paddingTop: 40,
-  paddingBottom: 40
-})
-
-interface Props {
-  proposals: Proposal[] | undefined
-  showFooter?: boolean
-  rightItem?: (proposal: Proposal) => React.ReactElement
-  showFullList?: boolean
-}
-
 interface ProposalObj {
   type: string
-  proposal: Proposal | Poll
+  proposal: IEvmProposal | Poll
 }
 
-export const EvmDaoProposalList: React.FC<Props> = ({ proposals, showFullList = true }) => {
+export const EvmDaoProposalList: React.FC<{
+  proposals: IEvmProposal[] | undefined
+  showFooter?: boolean
+  rightItem?: (proposal: Proposal) => React.ReactElement
+  showFullList?: boolean
+}> = ({ proposals, showFullList = true }) => {
   const [currentPage, setCurrentPage] = useState(0)
   const [offset, setOffset] = useState(0)
   const offsetLimit = 50
   const [filteredProposals, setFilteredProposals] = useState<ProposalObj[]>([])
-
   const [isLoading, setIsLoading] = useState(false)
 
-  console.log("EvmDaoProposalList", proposals)
-  console.log(
-    "EvmDaoProposalListX",
-    proposals?.filter((p: any) => p.proposalData?.length > 0).map((p: any) => p.type)
-  )
-
   const pageCount = Math.ceil(proposals ? proposals.length / offsetLimit : 0)
 
   // Invoke when user click to request another page.
@@ -67,14 +52,14 @@ export const EvmDaoProposalList: React.FC<Props> = ({ proposals, showFullList =
         id: proposal?.id,
         title: proposal?.title,
         proposer: proposal?.proposer || (proposal?.author as string),
-        type: "lambda",
+        type: proposal?.type,
         proposal: proposal
       })) ?? []
     )
   }, [proposals])
 
   return (
-    <TableContainer item>
+    <TableContainerGrid item>
       {isLoading ? (
         <LoaderContainer container direction="row" justifyContent="center">
           <CircularProgress color="secondary" />
@@ -84,13 +69,17 @@ export const EvmDaoProposalList: React.FC<Props> = ({ proposals, showFullList =
           <Grid container direction="column" wrap={"nowrap"} style={{ gap: 16 }}>
             {filteredProposals && filteredProposals.length && filteredProposals.length > 0 ? (
               <Grid item container wrap={"nowrap"} direction="column">
-                {filteredProposals.slice(offset, offset + offsetLimit).map((p, i) => (
-                  <CustomGrid item key={`proposal-${i}`} style={{ width: "100%" }}>
-                    <Link to={`proposal/${p.proposal.id}`}>
-                      <EvmProposalItem proposal={p.proposal}></EvmProposalItem>
-                    </Link>
-                  </CustomGrid>
-                ))}
+                {filteredProposals.slice(offset, offset + offsetLimit).map((p, i) => {
+                  const proposalLink =
+                    p.type == "offchain" ? `offchain-proposal/${p.proposal.id}` : `proposal/${p.proposal.id}`
+                  return (
+                    <CustomGrid item key={`proposal-${i}`} style={{ width: "100%" }}>
+                      <Link to={proposalLink}>
+                        <EvmProposalItem proposal={p.proposal}></EvmProposalItem>
+                      </Link>
+                    </CustomGrid>
+                  )
+                })}
               </Grid>
             ) : (
               <Typography color="textPrimary">No proposals found</Typography>
@@ -114,6 +103,6 @@ export const EvmDaoProposalList: React.FC<Props> = ({ proposals, showFullList =
           ) : null}
         </>
       )}
-    </TableContainer>
+    </TableContainerGrid>
   )
 }

src/modules/etherlink/components/EvmProposalDetailCard.tsx

@@ -7,13 +7,14 @@ import { FileCopyOutlined } from "@material-ui/icons"
 import Share from "assets/img/share.svg"
 import { CommunityBadge } from "modules/lite/explorer/components/CommunityBadge"
 import LinkIcon from "assets/img/link.svg"
-import { Poll } from "models/Polls"
 
 import { useNotification } from "modules/common/hooks/useNotification"
 import ReactHtmlParser from "react-html-parser"
 import { EtherlinkContext } from "services/wagmi/context"
 import { Badge } from "components/ui/Badge"
 import { StatusBadge } from "modules/explorer/components/StatusBadge"
+import { CopyIcon } from "components/ui/icons/CopyIcon"
+import { IEvmProposal } from "../types"
 
 const LogoItem = styled("img")(({ theme }) => ({
   cursor: "pointer",
@@ -67,11 +68,6 @@ const StyledLink = styled(Link)(({ theme }) => ({
   }
 }))
 
-const CopyIcon = styled(FileCopyOutlined)({
-  marginRight: 8,
-  cursor: "pointer"
-})
-
 const CustomPopover = withStyles({
   paper: {
     "marginTop": 10,
@@ -84,10 +80,11 @@ const CustomPopover = withStyles({
   }
 })(Popover)
 
-export const EvmProposalDetailCard: React.FC<{ poll: Poll | undefined }> = ({ poll }) => {
+export const EvmProposalDetailCard: React.FC<{ poll: IEvmProposal | undefined }> = ({ poll }) => {
   const theme = useTheme()
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
-  const { daoProposalSelected } = useContext(EtherlinkContext)
+  // const { daoProposalSelected } = useContext(EtherlinkContext)
+  const daoProposalSelected = poll
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
   const openNotification = useNotification()
 
@@ -165,31 +162,34 @@ export const EvmProposalDetailCard: React.FC<{ poll: Poll | undefined }> = ({ po
             </Grid>
           </Grid>
 
-          <Grid container justifyContent={isMobileSmall ? "center" : "space-between"} alignItems={"center"}>
-            <Grid item>
-              <Grid
-                container
-                style={{ gap: 23 }}
-                alignItems="center"
-                justifyContent={isMobileSmall ? "center" : "flex-start"}
-              >
-                <Grid item>
-                  <StatusBadge status={daoProposalSelected?.status || ""} />
-                  {/* <TableStatusBadge status={poll?.isActive || ProposalStatus.ACTIVE} /> */}
-                </Grid>
-                <Grid item>
-                  <Badge status={daoProposalSelected?.type} />
-                </Grid>
-                <Grid item>{/* <CommunityBadge id={"DAOID"} /> */}</Grid>
-                <Grid item direction="row" style={{ gap: 10 }}>
-                  <TextContainer color="textPrimary" variant="body2" style={{ fontSize: 14, marginBottom: 4 }}>
-                    Posted by:
-                  </TextContainer>
-                  <CreatorBadge address={daoProposalSelected?.author} />
+          {daoProposalSelected?.status ? (
+            <Grid container justifyContent={isMobileSmall ? "center" : "space-between"} alignItems={"center"}>
+              <Grid item>
+                <Grid
+                  container
+                  style={{ gap: 23 }}
+                  alignItems="center"
+                  justifyContent={isMobileSmall ? "center" : "flex-start"}
+                >
+                  <Grid item>
+                    <StatusBadge status={daoProposalSelected?.status} />
+                    {/* <TableStatusBadge status={poll?.isActive || ProposalStatus.ACTIVE} /> */}
+                  </Grid>
+                  <Grid item>
+                    <Badge status={daoProposalSelected.type} />
+                  </Grid>
+                  <Grid item>{/* <CommunityBadge id={"DAOID"} /> */}</Grid>
+                  <Grid item direction="row" style={{ gap: 10 }}>
+                    <TextContainer color="textPrimary" variant="body2" style={{ fontSize: 14, marginBottom: 4 }}>
+                      Posted by:
+                    </TextContainer>
+                    <CreatorBadge address={daoProposalSelected?.author} />
+                  </Grid>
                 </Grid>
               </Grid>
             </Grid>
-          </Grid>
+          ) : null}
+
           <Grid container direction="row">
             <Grid item container direction="row" alignItems="center">
               <TextContainer color="textPrimary" variant="body2">

src/modules/etherlink/components/EvmProposalItem.tsx

@@ -23,7 +23,7 @@ const CreatedText = styled(Typography)({
 export const EvmProposalItem: React.FC<{
   proposal: Proposal | any
 }> = ({ proposal, children }) => {
-  const formattedDate = dayjs(proposal.startDate).format("LLL")
+  const formattedDate = proposal.createdAt.format("LLL")
 
   return (
     <ContentBlockItem container justifyContent="space-between" alignItems="center">