Merge pull request #634 from dOrgTech/staging

Merge Staging to Develop

package.json

@@ -37,6 +37,7 @@
     "@types/mixpanel-browser": "^2.35.7",
     "@types/prismjs": "^1.26.0",
     "@types/react-router-hash-link": "^2.4.5",
+    "@types/valid-url": "^1.0.4",
     "assert": "^2.0.0",
     "bignumber.js": "^9.0.1",
     "blockies-ts": "^1.0.0",
@@ -77,6 +78,7 @@
     "stream-http": "^3.2.0",
     "url": "^0.11.0",
     "util": "^0.12.5",
+    "valid-url": "^1.0.9",
     "yup": "^0.32.9"
   },
   "devDependencies": {
@@ -131,4 +133,4 @@
       "yarn lint:check"
     ]
   }
-}
+}

src/models/Community.ts

@@ -14,6 +14,7 @@ export interface Community {
   allowPublicAccess: boolean
   decimals?: string
   network: string
+  votingAddressesCount: number
 }
 
 export interface CommunityToken {
@@ -23,4 +24,5 @@ export interface CommunityToken {
   symbol: string
   tokenAddress: string
   decimals: string
+  message?: string
 }

src/modules/explorer/components/DAOStatsRow.tsx

@@ -124,7 +124,7 @@ export const DAOStatsRow: React.FC = () => {
   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)
+  const { data: polls } = usePolls(data?.liteDAOData?._id)
   const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
 
   const amountLocked = useMemo(() => {
@@ -226,7 +226,9 @@ export const DAOStatsRow: React.FC = () => {
                 <Grid item>
                   <ProposalInfoTitle color="secondary">Active Proposals</ProposalInfoTitle>
                   <LargeNumber color="textPrimary">
-                    {Number(activeProposals?.length) + Number(activeLiteProposals.length)}
+                    {activeLiteProposals
+                      ? Number(activeProposals?.length) + Number(activeLiteProposals?.length)
+                      : Number(activeProposals?.length)}
                   </LargeNumber>
                 </Grid>
               </Grid>

src/modules/explorer/components/ProposalActionsDialog.tsx

@@ -16,6 +16,8 @@ import { ProposalAction, ProposalFormLambda } from "modules/explorer/components/
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { ProposalCreatorModal } from "modules/lite/explorer/pages/CreateProposal/ProposalCreatorModal"
 import { useIsProposalButtonDisabled } from "services/contracts/baseDAO/hooks/useCycleInfo"
+import { useIsMember } from "modules/lite/explorer/hooks/useIsMember"
+import { useTezos } from "services/beacon/hooks/useTezos"
 
 type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>
@@ -125,6 +127,8 @@ export const ProposalActionsDialog: React.FC<Props> = ({ open, handleClose }) =>
   const [openLiteProposal, setOpenLiteProposal] = useState(false)
   const liteDAOId = data?.liteDAOData?._id
   const shouldDisable = useIsProposalButtonDisabled(daoId)
+  const { network, account } = useTezos()
+  const isMember = useIsMember(network, data?.liteDAOData?.tokenAddress || "", account)
 
   const handleOpenCustomProposalModal = (key: ProposalAction) => {
     setProposalAction(key)
@@ -167,20 +171,36 @@ export const ProposalActionsDialog: React.FC<Props> = ({ open, handleClose }) =>
               <Grid key={index} item xs={isMobileSmall ? 12 : 4}>
                 <OptionContainer
                   onClick={() =>
-                    elem.id === "off-chain"
+                    elem.id === "off-chain" && isMember
                       ? handleLiteProposal()
+                      : elem.id === "off-chain" && !isMember
+                      ? null
                       : !shouldDisable
                       ? elem.isLambda
                         ? handleOpenCustomProposalModal(elem.id)
                         : handleOpenSupportedExecuteProposalModal(elem.id)
                       : null
                   }
                 >
-                  <ActionText color={shouldDisable && elem.id !== "off-chain" ? "textSecondary" : "textPrimary"}>
+                  <ActionText
+                    color={
+                      shouldDisable && elem.id !== "off-chain"
+                        ? "textSecondary"
+                        : elem.id === "off-chain" && !isMember
+                        ? "textSecondary"
+                        : "textPrimary"
+                    }
+                  >
                     {elem.name}
                   </ActionText>
                   <ActionDescriptionText
-                    color={shouldDisable && elem.id !== "off-chain" ? "textSecondary" : "textPrimary"}
+                    color={
+                      shouldDisable && elem.id !== "off-chain"
+                        ? "textSecondary"
+                        : elem.id === "off-chain" && !isMember
+                        ? "textSecondary"
+                        : "textPrimary"
+                    }
                   >
                     {elem.description}{" "}
                   </ActionDescriptionText>

src/modules/explorer/components/ProposalsList.tsx

@@ -31,7 +31,7 @@ interface Props {
   title: string
   showFooter?: boolean
   rightItem?: (proposal: Proposal) => React.ReactElement
-  liteProposals: Poll[]
+  liteProposals: Poll[] | undefined
 }
 
 export const ProposalsList: React.FC<Props> = ({

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

@@ -97,7 +97,7 @@ 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 { data: polls } = usePolls(data?.liteDAOData?._id)
   const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
 
   const [openDialog, setOpenDialog] = useState(false)

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

@@ -26,6 +26,7 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
   "padding": 32,
   "cursor": "pointer",
   "transition": "0.15s ease-out",
+  "maxWidth": 490,
 
   ["@media (max-width:1335px)"]: {
     minHeight: 130
@@ -71,6 +72,7 @@ const NameText = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.primary,
   overflow: "hidden",
   fontSize: "32px",
+  maxWidth: 245,
 
   ["@media (max-width:1335px)"]: {
     fontSize: "29px"
@@ -152,6 +154,7 @@ export const DAOItem: React.FC<{
     symbol: string
     votingAddresses: string[]
     dao_type: { name: string }
+    votingAddressesCount: number
   }
 }> = ({ dao }) => {
   const theme = useTheme()
@@ -179,7 +182,7 @@ export const DAOItem: React.FC<{
             {daoType === "registry" || daoType === "treasury" ? <Badge dao_type={daoType}>V2</Badge> : null}
             {daoType === "lite" ? <Badge dao_type={daoType}>Lite</Badge> : null}
 
-            <NumberText color="textPrimary">{dao.votingAddresses.length}</NumberText>
+            <NumberText color="textPrimary"> {dao.votingAddressesCount}</NumberText>
             <VotingAddressesText color="textPrimary">Voting Addresses</VotingAddressesText>
           </Grid>
         </Grid>

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

@@ -18,8 +18,6 @@ import { ConnectMessage } from "./components/ConnectMessage"
 import { DAOItem } from "./components/DAOItem"
 import { SearchInput } from "./components/Searchbar"
 import { MainButton } from "../../../common/MainButton"
-import { EnvKey, getEnv } from "services/config"
-import { LaunchOutlined } from "@material-ui/icons"
 
 const PageContainer = styled("div")(({ theme }) => ({
   width: "1000px",
@@ -134,9 +132,12 @@ export const DAOList: React.FC = () => {
           name: dao.name,
           symbol: dao.token.symbol,
           votingAddresses: dao.ledgers ? dao.ledgers.map(l => l.holder.address) : [],
+          votingAddressesCount:
+            dao.dao_type.name === "lite" ? dao.votingAddressesCount : dao.ledgers ? dao.ledgers?.length : 0,
           dao_type: {
             name: dao.dao_type.name
-          }
+          },
+          allowPublicAccess: dao.dao_type.name === "lite" ? dao.allowPublicAccess : true
         }))
         .sort((a, b) => b.votingAddresses.length - a.votingAddresses.length)
 
@@ -240,11 +241,13 @@ export const DAOList: React.FC = () => {
           <Grid item>
             <TabPanel value={selectedTab} index={0}>
               <DAOItemGrid container justifyContent={isMobileSmall ? "center" : "flex-start"}>
-                {currentDAOs.map((dao, i) => (
-                  <DAOItemCard key={`dao-${i}`} item>
-                    <DAOItem dao={dao} />
-                  </DAOItemCard>
-                ))}
+                {currentDAOs.map((dao, i) =>
+                  dao.allowPublicAccess ? (
+                    <DAOItemCard key={`dao-${i}`} item>
+                      <DAOItem dao={dao} />
+                    </DAOItemCard>
+                  ) : null
+                )}
 
                 {isLoading ? (
                   <Grid item>

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

@@ -213,7 +213,7 @@ export const Proposals: React.FC = () => {
     }
   }, [data, dropAllExpired, expiredProposals])
 
-  const polls = usePolls(data?.liteDAOData?._id)
+  const { data: polls } = usePolls(data?.liteDAOData?._id)
   const id = data?.liteDAOData?._id
 
   const activeLiteProposals = polls?.filter(p => Number(p.endTime) > dayjs().valueOf())
@@ -338,7 +338,7 @@ export const Proposals: React.FC = () => {
           <AllProposalsList title={"On-Chain"} currentLevel={cycleInfo.currentLevel} proposals={proposals} />
         )}
         <ProposalActionsDialog open={openDialog} handleClose={handleCloseModal} />
-        {polls.length > 0 ? <ProposalList polls={polls} id={id} /> : null}
+        {polls && polls.length > 0 ? <ProposalList polls={polls} id={id} daoId={daoId} /> : null}
 
         {proposals?.length === 0 && polls?.length === 0 ? (
           <Typography style={{ width: "inherit" }} color="textPrimary">

src/modules/explorer/pages/User/components/DelegationBanner.tsx

@@ -1,17 +1,19 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { Fragment, useEffect, useState } from "react"
-import { Grid, Theme, Typography, styled } from "@material-ui/core"
+import { Box, CircularProgress, Grid, Theme, Typography, styled, withStyles } from "@material-ui/core"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { Edit } from "@material-ui/icons"
 import { DelegationDialog } from "./DelegationModal"
 import { useDelegationStatus } from "services/contracts/token/hooks/useDelegationStatus"
 import { useTezos } from "services/beacon/hooks/useTezos"
-import { useDelegationVoteWeight } from "services/contracts/token/hooks/useDelegationVoteWeight"
+import { useTokenVoteWeight } from "services/contracts/token/hooks/useTokenVoteWeight"
 import BigNumber from "bignumber.js"
 import { parseUnits } from "services/contracts/utils"
+import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar"
+import { CopyButton } from "modules/common/CopyButton"
 
 export enum DelegationsType {
-  ACCEPTING_DELEGATION = "ACCEPTING_DELEGATION",
-  NOT_ACCEPTING_DELEGATION = "NOT_ACCEPTING_DELEGATION",
+  NOT_DELEGATING = "NOT_DELEGATING",
   DELEGATING = "DELEGATING"
 }
 
@@ -36,12 +38,19 @@ const Balance = styled(Typography)({
   fontWeight: 200
 })
 
+const CustomCopyButton = withStyles({
+  root: {
+    "& .MuiBox-root": {
+      padding: "0px !important"
+    }
+  },
+  disabled: {}
+})(Grid)
+
 export const matchTextToStatus = (value: DelegationsType | undefined) => {
   switch (value) {
-    case DelegationsType.ACCEPTING_DELEGATION:
-      return "Accepting delegations"
-    case DelegationsType.NOT_ACCEPTING_DELEGATION:
-      return "Not currently accepting delegations or delegating"
+    case DelegationsType.NOT_DELEGATING:
+      return "Not delegating"
     case DelegationsType.DELEGATING:
       return "Delegating to "
     default:
@@ -51,37 +60,41 @@ export const matchTextToStatus = (value: DelegationsType | undefined) => {
 
 export const Delegation: React.FC<{ daoId: string }> = ({ daoId }) => {
   const { data: dao } = useDAO(daoId)
-  const { network, tezos, account, connect } = useTezos()
+  const { account } = useTezos()
 
-  const { data: delegatedTo } = useDelegationStatus(dao?.data.token.contract)
-  const [delegationStatus, setDelegationStatus] = useState<DelegationsType>(DelegationsType.NOT_ACCEPTING_DELEGATION)
+  const { data: delegatedTo, isLoading, refetch } = useDelegationStatus(dao?.data.token.contract)
+  const [delegationStatus, setDelegationStatus] = useState<DelegationsType>(DelegationsType.NOT_DELEGATING)
   const [openModal, setOpenModal] = useState(false)
-  const { data: delegateVoteBalances } = useDelegationVoteWeight(dao?.data.token.contract)
-  const [voteWeight, setVoteWeight] = useState(new BigNumber(0))
-  console.log("voteWeight: ", voteWeight.toString())
+  const { data: voteWeight } = useTokenVoteWeight(dao?.data.token.contract)
+  const [loadingRes, setLoadingRes] = useState(true)
+  const [shouldRefetch, setShouldRefetch] = useState(true)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoadingRes(false)
+    }, 4000)
+  }, [])
+
+  setTimeout(() => {
+    if (shouldRefetch) {
+      refetch()
+    }
+  }, 60000)
 
   const onCloseAction = () => {
     setOpenModal(false)
   }
 
   useEffect(() => {
     if (delegatedTo === account) {
-      setDelegationStatus(DelegationsType.ACCEPTING_DELEGATION)
+      setDelegationStatus(DelegationsType.DELEGATING)
     } else if (delegatedTo && delegatedTo !== account) {
       setDelegationStatus(DelegationsType.DELEGATING)
     } else {
-      setDelegationStatus(DelegationsType.NOT_ACCEPTING_DELEGATION)
+      setDelegationStatus(DelegationsType.NOT_DELEGATING)
     }
-  }, [delegatedTo, account])
-
-  useEffect(() => {
-    let totalVoteWeight = new BigNumber(0)
-    delegateVoteBalances?.forEach(delegatedVote => {
-      const balance = new BigNumber(delegatedVote.balance)
-      totalVoteWeight = totalVoteWeight.plus(balance)
-    })
-    setVoteWeight(totalVoteWeight)
-  }, [delegateVoteBalances])
+    setShouldRefetch(false)
+  }, [delegatedTo])
 
   return (
     <DelegationBox container direction="column">
@@ -91,7 +104,7 @@ export const Delegation: React.FC<{ daoId: string }> = ({ daoId }) => {
         </Typography>
         <Subtitle variant="body1">These settings only affect your participation in off-chain polls</Subtitle>
       </Grid>
-      {dao && (
+      {dao && voteWeight && (
         <Grid container style={{ gap: 12 }} direction="column">
           <Typography color="textPrimary">Voting Weight</Typography>
           <Balance color="secondary">
@@ -124,8 +137,24 @@ export const Delegation: React.FC<{ daoId: string }> = ({ daoId }) => {
           </Grid>
         </Grid>
         <Subtitle variant="body1">
-          {matchTextToStatus(delegationStatus)}
-          {delegationStatus === DelegationsType.DELEGATING ? delegatedTo : null}
+          {isLoading || loadingRes ? (
+            <CircularProgress color="secondary" />
+          ) : (
+            <>
+              <Grid container direction="row" alignItems="center" style={{ gap: 8 }}>
+                {matchTextToStatus(delegationStatus)}
+                {delegationStatus === DelegationsType.NOT_DELEGATING ? null : (
+                  <ProfileAvatar size={22} address={delegatedTo ? delegatedTo : ""} />
+                )}
+                {delegationStatus === DelegationsType.DELEGATING ? delegatedTo : null}
+                {delegationStatus === DelegationsType.NOT_DELEGATING ? null : (
+                  <CustomCopyButton>
+                    <CopyButton text={delegatedTo ? delegatedTo : ""} />
+                  </CustomCopyButton>
+                )}
+              </Grid>
+            </>
+          )}
         </Subtitle>
       </Grid>
       <DelegationDialog
@@ -135,6 +164,7 @@ export const Delegation: React.FC<{ daoId: string }> = ({ daoId }) => {
         setDelegationStatus={setDelegationStatus}
         delegationStatus={delegationStatus}
         delegatedTo={delegatedTo}
+        setShouldRefetch={setShouldRefetch}
       />
     </DelegationBox>
   )