From 84fda533269256d9c287102c0b0b03cfd8aad86c Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Sat, 25 Nov 2023 11:48:07 +0100 Subject: [PATCH] new cards --- .../pages/DAOList/components/DAOItem.tsx | 76 +++++-------------- src/modules/explorer/pages/DAOList/index.tsx | 25 +++--- src/modules/lite/creator/index.tsx | 1 - 3 files changed, 31 insertions(+), 71 deletions(-) diff --git a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx index 98462c6d..d566d6a2 100644 --- a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx +++ b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx @@ -1,24 +1,11 @@ import { styled, Grid, Theme, Typography, Link, useTheme, useMediaQuery } from "@material-ui/core" -import { createTheme } from "@material-ui/core/styles" -import hexToRgba from "hex-to-rgba" -import { startCase } from "lodash" import React from "react" import { EnvKey, getEnv } from "services/config" import ReactHtmlParser from "react-html-parser" import { useProposals } from "services/services/dao/hooks/useProposals" import { ProposalStatus } from "services/services/dao/mappers/proposal/types" - -const SectionNames = styled(Grid)(({ theme }: { theme: Theme }) => ({ - width: "55%", - - ["@media (max-width:1030px)"]: { - width: "50%" - }, - - ["@media (max-width:960px)"]: { - width: "99%" - } -})) +import { usePolls } from "modules/lite/explorer/hooks/usePolls" +import dayjs from "dayjs" const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({ "background": theme.palette.primary.main, @@ -35,7 +22,9 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({ "maxHeight": 282, ["@media (max-width:760px)"]: { - maxWidth: "86vw" + maxWidth: "86vw", + padding: "17px 24px", + minWidth: "inherit" }, "&:hover": { @@ -90,44 +79,6 @@ const DescriptionText = styled(Typography)({ "maxHeight": 60 }) -const NumberText = styled(Typography)({ - fontSize: "28px", - fontWeight: 300, - - ["@media (max-width:1335px)"]: { - fontSize: "26px", - lineHeight: 1.2, - borderBottom: "7px solid transparent" - }, - - ["@media (max-width:1155px)"]: { - fontSize: "23px", - borderBottom: "9.5px solid transparent" - }, - - ["@media (max-width:960px)"]: { - fontSize: "26px", - borderBottom: "6px solid transparent" - } -}) - -const VotingAddressesText = styled(Typography)({ - fontSize: "19px", - fontWeight: 300, - - ["@media (max-width:1335px)"]: { - fontSize: "17px" - }, - - ["@media (max-width:1155px)"]: { - fontSize: "15.7px" - }, - - ["@media (max-width:960px)"]: { - fontSize: "17px" - } -}) - const ItemText = styled(Typography)({ fontWeight: 600, fontSize: 16, @@ -173,11 +124,21 @@ export const DAOItem: React.FC<{ : `lite/dao/${dao.id}` const { data: activeProposals } = useProposals(dao.id, ProposalStatus.ACTIVE) + const { data: polls } = usePolls(dao.id) + const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf()) + + const getTotalActiveProposals = () => { + if (daoType === "lite") { + return activeLiteProposals?.length + } else { + return (activeProposals ? activeProposals?.length : 0) + (activeLiteProposals ? activeLiteProposals?.length : 0) + } + } return ( - - + + {dao.name} @@ -200,7 +161,8 @@ export const DAOItem: React.FC<{ {dao.votingAddressesCount} - Active {"\n"}Proposals {"-"} + Active {"\n"}Proposals + {getTotalActiveProposals()} diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx index ab476cd9..4dc63824 100644 --- a/src/modules/explorer/pages/DAOList/index.tsx +++ b/src/modules/explorer/pages/DAOList/index.tsx @@ -76,18 +76,19 @@ const Search = styled(Grid)({ const DAOItemGrid = styled(Grid)({ gap: "30px", + minHeight: "50vh", justifyContent: "space-between", ["@media (max-width: 1155px)"]: { gap: "32px" }, ["@media (max-width:960px)"]: { - gap: "14px" + gap: "20px" }, ["@media (max-width:830px)"]: { width: "86vw", - gap: "12px" + gap: "20px" } }) @@ -116,8 +117,6 @@ export const DAOList: React.FC = () => { const { network, account, tezos } = useTezos() const { data: daos, isLoading } = useAllDAOs(network) - console.log(daos) - const theme = useTheme() const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) const isMobileSmall = useMediaQuery(theme.breakpoints.down("mobile")) @@ -188,11 +187,11 @@ export const DAOList: React.FC = () => { (formattedDao.symbol && formattedDao.symbol.toLowerCase().includes(searchText.toLowerCase())) ) } - return formattedDAOs + return formattedDAOs.filter(dao => dao.votingAddresses.includes(account)) } return [] - }, [daos, searchText]) + }, [daos, searchText, account]) const filterDAOs = (filter: string) => { setSearchText(filter.trim()) @@ -314,14 +313,14 @@ export const DAOList: React.FC = () => { {!account ? ( + ) : myDAOs.length > 0 ? ( + myDAOs.map((dao, i) => ( + + + + )) ) : ( - myDAOs - .filter(dao => dao.votingAddresses.includes(account)) - .map((dao, i) => ( - - - - )) + You have not joined any DAO )} diff --git a/src/modules/lite/creator/index.tsx b/src/modules/lite/creator/index.tsx index 91662714..e43eebe5 100644 --- a/src/modules/lite/creator/index.tsx +++ b/src/modules/lite/creator/index.tsx @@ -313,7 +313,6 @@ const CommunityForm = ({ submitForm, values, setFieldValue, errors, touched, set padding={10} value={getIn(values, "description")} onValueChange={(newValue: string) => { - console.log(newValue) setFieldValue("description", newValue) }} highlight={code => highlight(code, grammar, "javascript")}