Skip to content

Commit

Permalink
Merge pull request #679 from dOrgTech/master
Browse files Browse the repository at this point in the history 
Sync Develop with Master
  • Loading branch information
@Man-Jain
Man-Jain authored Sep 30, 2023
2 parents 15cd816 + c535061 commit 7a3d057
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 197 deletions.
1 change: 1 addition & 0 deletions src/models/Community.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface Community {
decimals?: string
network: string
votingAddressesCount: number
daoContract?: string
}

export interface CommunityToken {
Expand Down
214 changes: 108 additions & 106 deletions src/modules/lite/explorer/components/ProposalDetailCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,22 @@ import { Poll } from "models/Polls"
import dayjs from "dayjs"
import { useNotification } from "modules/common/hooks/useNotification"

const LogoItem = styled("img")({
height: 18,
cursor: "pointer"
})
const LogoItem = styled("img")(({ theme }) => ({
cursor: "pointer",
[theme.breakpoints.down("sm")]: {
height: 10
}
}))

const TextContainer = styled(Typography)({
const TextContainer = styled(Typography)(({ theme }) => ({
display: "flex",
alignItems: "center",
gap: 10,
marginRight: 8
})
marginRight: 8,
[theme.breakpoints.down("sm")]: {
marginTop: 20
}
}))

const EndTextContainer = styled(Typography)(({ theme }) => ({
display: "flex",
Expand All @@ -47,12 +52,16 @@ const Divider = styled(Typography)(({ theme }) => ({
}
}))

const StyledLink = styled(Link)({
const StyledLink = styled(Link)(({ theme }) => ({
fontFamily: "Roboto Mono",
fontWeight: 300,
fontSize: 16,
marginLeft: 8
})
marginLeft: 8,
[theme.breakpoints.down("sm")]: {
fontWeight: 100,
fontSize: 10
}
}))

const CopyIcon = styled(FileCopyOutlined)({
marginRight: 8,
Expand All @@ -64,6 +73,7 @@ const CustomPopover = withStyles({
"marginTop": 10,
"padding": 8,
"cursor": "pointer",
"background": "#1c1f23 !important",
"&:hover": {
background: "#81feb76b !important"
}
Expand Down Expand Up @@ -100,114 +110,106 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin

return (
<>
{poll && poll !== undefined ? (
<GridContainer container style={{ gap: 50 }}>
<Grid container style={{ gap: 25 }}>
<Grid
item
container
alignItems="flex-end"
direction="row"
style={{ gap: isMobileSmall ? 25 : 0 }}
justifyContent="space-between"
>
<Grid item>
<Typography variant="h1" color="textPrimary">
{poll?.name}
</Typography>
</Grid>
<Grid item>
<Grid container style={{ gap: 18 }} direction="row">
<Grid item>
<Grid
container
style={{ gap: 12, cursor: "pointer" }}
alignItems="center"
aria-describedby={id}
onClick={handleClick}
>
<LogoItem src={Share} />
<Typography color="secondary" variant="body2">
Share
</Typography>
</Grid>
<CustomPopover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
>
<Grid container direction="row" onClick={handleCopy}>
<CopyIcon />
<Typography variant="subtitle2">Copy link</Typography>
</Grid>
</CustomPopover>
<GridContainer container style={{ gap: 50 }}>
<Grid container style={{ gap: 25 }}>
<Grid
item
container
alignItems="flex-end"
direction="row"
style={{ gap: isMobileSmall ? 25 : 0 }}
justifyContent={isMobileSmall ? "center" : "space-between"}
>
<Grid item>
<Typography variant="h1" color="textPrimary">
{poll?.name}
</Typography>
</Grid>
<Grid item>
<Grid container style={{ gap: 18 }} direction="row">
<Grid item>
<Grid
container
style={{ gap: 12, cursor: "pointer" }}
alignItems="center"
aria-describedby={id}
onClick={handleClick}
>
<LogoItem src={Share} />
<Typography color="secondary" variant="body2">
Share
</Typography>
</Grid>
<CustomPopover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
>
<Grid container direction="row" onClick={handleCopy}>
<CopyIcon />
<Typography variant="subtitle2">Copy link</Typography>
</Grid>
</CustomPopover>
</Grid>
</Grid>
</Grid>
</Grid>

<Grid container justifyContent={"space-between"} alignItems={"center"}>
<Grid item>
<Grid container justifyContent={isMobileSmall ? "space-evenly" : "flex-start"} style={{ gap: 23 }}>
<Grid item>
<TableStatusBadge status={poll?.isActive || ProposalStatus.ACTIVE} />
</Grid>
<Grid item>
<CommunityBadge id={daoId} />
</Grid>
<Grid item>
<CreatorBadge address={poll?.author} />
</Grid>
<Grid container justifyContent={isMobileSmall ? "center" : "space-between"} alignItems={"center"}>
<Grid item>
<Grid container style={{ gap: 23 }} justifyContent={isMobileSmall ? "center" : "flex-start"}>
<Grid item>
<TableStatusBadge status={poll?.isActive || ProposalStatus.ACTIVE} />
</Grid>
<Grid item>
<CommunityBadge id={daoId} />
</Grid>
<Grid item>
<CreatorBadge address={poll?.author} />
</Grid>
</Grid>
</Grid>
<Grid container direction="row">
<Grid item container direction="row" spacing={2} alignItems="center">
<TextContainer color="textPrimary" variant="body1">
Start date:{" "}
</TextContainer>
<EndText variant="body2" color="textPrimary">
{" "}
{dayjs(Number(poll?.startTime)).format("lll")}
</EndText>
<Divider color="textPrimary">-</Divider>
<EndTextContainer color="textPrimary" variant="body1">
{" "}
End date:{" "}
</EndTextContainer>
<EndText variant="body2" color="textPrimary">
{" "}
{dayjs(Number(poll?.endTime)).format("lll")}
</EndText>
</Grid>
</Grid>

<Grid container>
<Typography variant="body2" color="textPrimary">
{poll?.description}
</Typography>
</Grid>
<Grid container direction="row">
<Grid item container direction="row" spacing={2} alignItems="center">
<TextContainer color="textPrimary" variant="body2">
Start date:{" "}
</TextContainer>
<EndText variant="body2" color="textPrimary">
{dayjs(Number(poll?.startTime)).format("lll")}
</EndText>
<Divider color="textPrimary">-</Divider>
<EndTextContainer color="textPrimary" variant="body2">
End date:{" "}
</EndTextContainer>
<EndText variant="body2" color="textPrimary">
{dayjs(Number(poll?.endTime)).format("lll")}
</EndText>
</Grid>
</Grid>

{poll?.externalLink ? (
<Grid container alignItems="center">
<LogoItem src={LinkIcon} />
<StyledLink color="secondary" href="#">
{poll?.externalLink}
</StyledLink>
</Grid>
) : null}
<Grid container>
<Typography variant="body2" color="textPrimary">
{poll?.description}
</Typography>
</Grid>
</GridContainer>
) : (
<Grid container direction="row">
<Typography color="textPrimary">Could not load the requested proposal</Typography>

{poll?.externalLink ? (
<Grid style={{ display: isMobileSmall ? "block" : "flex" }} container alignItems="center">
<LogoItem src={LinkIcon} />
<StyledLink color="secondary" href={poll?.externalLink} target="_">
{poll?.externalLink}
</StyledLink>
</Grid>
) : null}
</Grid>
)}
</GridContainer>
)
</>
)
}
32 changes: 22 additions & 10 deletions src/modules/lite/explorer/components/VoteDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ import {
calculateWeight,
getTotalVoters,
getTreasuryPercentage,
getTurnoutValue,
nFormatter
} from "services/lite/utils"
import { useTezos } from "services/beacon/hooks/useTezos"
import { useCommunityToken } from "../hooks/useCommunityToken"
import { getTurnoutValue } from "services/utils/utils"
import { useTokenDelegationSupported } from "services/contracts/token/hooks/useTokenDelegationSupported"

const Container = styled(Grid)(({ theme }) => ({
background: theme.palette.primary.main,
Expand Down Expand Up @@ -59,9 +60,10 @@ export const VoteDetails: React.FC<{ poll: Poll | undefined; choices: Choice[];
const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
const [open, setOpen] = React.useState(false)
const { network } = useTezos()
const [turnout, setTurnout] = useState(0)
const [turnout, setTurnout] = useState<number | null>()
const [votes, setVotes] = useState<Choice[]>([])
const tokenData = useCommunityToken(communityId)
const { data: isTokenDelegationSupported } = useTokenDelegationSupported(tokenData?.tokenAddress)

const handleClickOpen = () => {
setVotes(choices.filter(elem => elem.walletAddresses.length > 0))
Expand All @@ -76,11 +78,19 @@ export const VoteDetails: React.FC<{ poll: Poll | undefined; choices: Choice[];
}

useMemo(async () => {
if (token && token !== undefined) {
const value = await getTurnoutValue(network, token, Number(poll?.referenceBlock), getTotalVoters(choices))
setTurnout(value)
if (token && tokenData) {
const value = await getTurnoutValue(
network,
tokenData?.tokenAddress,
tokenData.tokenID,
Number(poll?.referenceBlock),
getTotalVoters(choices)
)
if (value) {
setTurnout(value)
}
}
}, [poll, choices, network, token])
}, [poll, choices, network, token, tokenData])

return (
<Container container direction="column">
Expand Down Expand Up @@ -148,9 +158,11 @@ export const VoteDetails: React.FC<{ poll: Poll | undefined; choices: Choice[];
<Typography color="textPrimary" variant="body1">
Votes
</Typography>
<Typography color="textPrimary" variant="body2">
({turnout.toFixed(2)} % Turnout)
</Typography>
{isTokenDelegationSupported && turnout ? (
<Typography color="textPrimary" variant="body1">
({turnout.toFixed(2)} % Turnout)
</Typography>
) : null}
</Grid>

<Grid
Expand All @@ -170,7 +182,7 @@ export const VoteDetails: React.FC<{ poll: Poll | undefined; choices: Choice[];
<Typography color="textPrimary" variant="body1">
{poll?.tokenSymbol}
</Typography>
<Typography color="textPrimary" variant="body2">
<Typography color="textPrimary" variant="body1">
(
{getTreasuryPercentage(
calculateProposalTotal(choices, tokenData?.decimals),
Expand Down
13 changes: 12 additions & 1 deletion src/modules/lite/explorer/pages/CommunityDetails/router.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
import React from "react"
import React, { useEffect } from "react"
import { Switch, Route, Redirect, useRouteMatch } from "react-router"
import { CommunityDetails } from "./index"
import { ProposalCreator } from "../CreateProposal"
import { ProposalDetails } from "../ProposalDetails"
import { useCommunity } from "../../hooks/useCommunity"
import { useTezos } from "services/beacon/hooks/useTezos"
import { Network } from "services/beacon"

export const CommunityDetailsRouter: React.FC<{ id: any }> = ({ id }): JSX.Element => {
const match = useRouteMatch()
const community = useCommunity(id)
const { network, changeNetwork } = useTezos()

useEffect(() => {
if (community && community.network.toLowerCase() !== network.toLowerCase()) {
changeNetwork(community.network.toLowerCase() as Network)
}
}, [community, changeNetwork, network])

return (
<Switch>
Expand Down
2 changes: 1 addition & 1 deletion src/modules/lite/explorer/pages/ProposalDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => {
const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
const { state } = useLocation<{ poll: Poll; choices: Choice[]; daoId: string }>()

const { data: dao } = useDAO(state.daoId)
const { data: dao } = useDAO(state?.daoId)
const { account, wallet } = useTezos()
const openNotification = useNotification()
const [refresh, setRefresh] = useState<number>()
Expand Down
Loading

0 comments on commit 7a3d057

Please sign in to comment.