Skip to content

Commit

Permalink
Merge branch 'master' into polls-loading-state
Browse files Browse the repository at this point in the history
  • Loading branch information
@leolower
leolower authored Apr 23, 2020
2 parents 6efde8a + 188ce23 commit 3d4bf7f
Show file tree
Hide file tree
Showing 12 changed files with 377 additions and 216 deletions.
203 changes: 115 additions & 88 deletions src/components/Home/HomeDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import {
getRecentPolls,
} from './helpers'
import styled from 'styled-components'
import LinkableComponent from '../common/LinkableComponent'

const CardStyled = styled(Card)`
height: ${props => props.theme.defaultCardHeight};
Expand Down Expand Up @@ -547,20 +548,28 @@ function HomeDetail(props: Props) {
<>
<PageTitle>System Statistics</PageTitle>
<TwoRowGrid style={{ marginBottom: '20px' }}>
<CardStyled>
{stakedMkr.length === 0 ? <Loading /> : <StakedMkr content="Staked MKR" component="stakedMkr" />}
</CardStyled>
<CardStyled>
<VotersVsMkr content="Number of Voters" versus="Total MKR Staked" component="votersVsMkr" />
</CardStyled>
<LinkableComponent id="STAKED_MKR">
<CardStyled>
{stakedMkr.length === 0 ? <Loading /> : <StakedMkr content="Staked MKR" component="stakedMkr" />}
</CardStyled>
</LinkableComponent>
<LinkableComponent id="NUMBER_OF_VOTERS">
<CardStyled>
<VotersVsMkr content="Number of Voters" versus="Total MKR Staked" component="votersVsMkr" />
</CardStyled>
</LinkableComponent>
</TwoRowGrid>
<TwoRowGrid style={{ marginBottom: '20px' }}>
<CardStyled>
{polls.length === 0 ? <Loading /> : <VotesVsPolls content="Total Votes" component="votesVsPolls" />}
</CardStyled>
<CardStyled>
<Gini content="Voting MKR Gini Coefficient" component="gini" />
</CardStyled>
<LinkableComponent id="TOTAL_VOTES">
<CardStyled>
{polls.length === 0 ? <Loading /> : <VotesVsPolls content="Total Votes" component="votesVsPolls" />}
</CardStyled>
</LinkableComponent>
<LinkableComponent id="VOTING_MKR_GINI">
<CardStyled>
<Gini content="Voting MKR Gini Coefficient" component="gini" />
</CardStyled>
</LinkableComponent>
</TwoRowGrid>
<PageSubTitle>Voter Behaviour</PageSubTitle>
{/*
Expand All @@ -582,94 +591,112 @@ function HomeDetail(props: Props) {
</TableCardStyled>
</TwoRowGrid>
*/}
<CardStyled style={{ marginBottom: '20px' }}>
{executivesResponsiveness.length === 0 ? (
<Loading />
) : (
<ExecutivesResponsiveness content="Votes - MKR Responsiveness" component="executivesResponsiveness" />
)}
</CardStyled>
<TwoRowGrid style={{ marginBottom: '20px' }}>
<CardStyled>
{pollsResponsiveness.length === 0 ? (
<LinkableComponent id="VOTES_MKR_RESPONSIVENESS">
<CardStyled style={{ marginBottom: '20px' }}>
{executivesResponsiveness.length === 0 ? (
<Loading />
) : (
<PollsResponsiveness content="Polls - MKR Responsiveness" component="pollsResponsiveness" />
<ExecutivesResponsiveness content="Votes - MKR Responsiveness" component="executivesResponsiveness" />
)}
</CardStyled>
<TableCardStyled style={{ padding: 0 }}>
{topVoters.length === 0 ? (
<Loading />
) : (
<HomeTable
info={homeMap.table.topVoters.info}
links={homeMap.table.topVoters.links}
content="Top Voters"
component="topVoters"
/>
)}
</TableCardStyled>
</LinkableComponent>
<TwoRowGrid style={{ marginBottom: '20px' }}>
<LinkableComponent id="POLLS_MKR_RESPONSIVENESS">
<CardStyled>
{pollsResponsiveness.length === 0 ? (
<Loading />
) : (
<PollsResponsiveness content="Polls - MKR Responsiveness" component="pollsResponsiveness" />
)}
</CardStyled>
</LinkableComponent>
<LinkableComponent id="TOP_VOTERS">
<TableCardStyled style={{ padding: 0 }}>
{topVoters.length === 0 ? (
<Loading />
) : (
<HomeTable
info={homeMap.table.topVoters.info}
links={homeMap.table.topVoters.links}
content="Top Voters"
component="topVoters"
/>
)}
</TableCardStyled>
</LinkableComponent>
</TwoRowGrid>
<PageSubTitle>Executives</PageSubTitle>
<TwoRowGrid style={{ marginBottom: '20px' }}>
<TableCardStyled style={{ padding: 0 }}>
<HomeTable
info={homeMap.table.executives.info}
links={homeMap.table.executives.links}
handleRow={getVote}
content="Top Executives"
component="executives"
/>
</TableCardStyled>
<TableCardStyled style={{ padding: 0 }}>
<HomeTable
info={homeMap.table.uncastedExecutives.info}
links={homeMap.table.uncastedExecutives.links}
handleRow={getVote}
content="Uncast Executives"
component="uncastedExecutives"
/>
</TableCardStyled>
<LinkableComponent id="TOP_EXECUTIVES">
<TableCardStyled style={{ padding: 0 }}>
<HomeTable
info={homeMap.table.executives.info}
links={homeMap.table.executives.links}
handleRow={getVote}
content="Top Executives"
component="executives"
/>
</TableCardStyled>
</LinkableComponent>
<LinkableComponent id="UNCAST_EXECUTIVES">
<TableCardStyled style={{ padding: 0 }}>
<HomeTable
info={homeMap.table.uncastedExecutives.info}
links={homeMap.table.uncastedExecutives.links}
handleRow={getVote}
content="Uncast Executives"
component="uncastedExecutives"
/>
</TableCardStyled>
</LinkableComponent>
</TwoRowGrid>
<TwoRowGrid style={{ marginBottom: '20px' }}>
<CardStyled>
<TimeTakenForExecutives content="Executive Time to Pass" component="timeTakenForExecutives" />
</CardStyled>
<CardStyled>
<MkrDistributionPerExecutive
content="MKR Distribution By Executive"
component="mkrDistributionPerExecutive"
/>
</CardStyled>
<LinkableComponent id="EXECUTIVE_TIME_TO_PASS">
<CardStyled>
<TimeTakenForExecutives content="Executive Time to Pass" component="timeTakenForExecutives" />
</CardStyled>
</LinkableComponent>
<LinkableComponent id="MKR_DISTRIBUTION_BY_EXECUTIVE">
<CardStyled>
<MkrDistributionPerExecutive
content="MKR Distribution By Executive"
component="mkrDistributionPerExecutive"
/>
</CardStyled>
</LinkableComponent>
</TwoRowGrid>
<PageSubTitle>Polls</PageSubTitle>
<TwoRowGrid style={{ marginBottom: '20px' }}>
<TableCardStyled style={{ padding: 0 }}>
{polls.length === 0 || !polls[0].participation ? (
<Loading />
) : (
<HomeTable
info={homeMap.table.votedPolls.info}
links={homeMap.table.votedPolls.links}
handleRow={getPoll}
content="Most Voted Polls"
component="votedPolls"
/>
)}
</TableCardStyled>
<TableCardStyled style={{ padding: 0 }}>
{polls.length === 0 ? (
<Loading />
) : (
<HomeTable
info={homeMap.table.polls.info}
links={homeMap.table.polls.links}
handleRow={getPoll}
content="Recent Polls"
component="polls"
/>
)}
</TableCardStyled>
<LinkableComponent id="MOST_VOTED_POLLS">
<TableCardStyled style={{ padding: 0 }}>
{polls.length === 0 || !polls[0].participation ? (
<Loading />
) : (
<HomeTable
info={homeMap.table.votedPolls.info}
links={homeMap.table.votedPolls.links}
handleRow={getPoll}
content="Most Voted Polls"
component="votedPolls"
/>
)}
</TableCardStyled>
</LinkableComponent>
<LinkableComponent id="RECENT_POLLS">
<TableCardStyled style={{ padding: 0 }}>
{polls.length === 0 ? (
<Loading />
) : (
<HomeTable
info={homeMap.table.polls.info}
links={homeMap.table.polls.links}
handleRow={getPoll}
content="Recent Polls"
component="polls"
/>
)}
</TableCardStyled>
</LinkableComponent>
</TwoRowGrid>
{isModalOpen && (
<Modal isChart={isModalChart} isOpen={isModalOpen} closeModal={() => setModalOpen(false)}>
Expand Down
125 changes: 69 additions & 56 deletions src/components/PollDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
getTopVotersTableData,
} from './helpers'
import styled from 'styled-components'
import LinkableComponent from '../common/LinkableComponent'

const CardStyled = styled(Card)`
height: ${props => props.theme.defaultCardHeight};
Expand Down Expand Up @@ -131,6 +132,8 @@ function PollDetails(props: Props) {
}

const setModal = (data: any, isChart: boolean = false): void => {
if (isModalOpen) return

setModalOpen(true)
setModalChart(isChart)
setModalData(data)
Expand Down Expand Up @@ -250,64 +253,74 @@ function PollDetails(props: Props) {
<NoData>Cannot fetch poll description.</NoData>
)}
</CardStyled>
<CardStyled style={{ gridArea: 'col4' }}>
<VotersDistribution content="Vote Count By Option" component="votersDistribution" />
</CardStyled>
<CardStyled style={{ gridArea: 'col5' }}>
{pollPerOptionData.length === 0 ? (
<Loading />
) : (
<PollPerOption content="Voters Per Option" isVoter component="pollPerOptionVoters" />
)}
</CardStyled>
<CardStyled style={{ gridArea: 'col6' }}>
{pollPerOptionData.length === 0 ? (
<Loading />
) : (
<PollPerOption content="MKR Votes Per Option" component="pollPerOptionMkr" />
)}
</CardStyled>
<LinkableComponent id="VOTE_COUNT">
<CardStyled style={{ gridArea: 'col4' }}>
<VotersDistribution content="Vote Count By Option" component="votersDistribution" />
</CardStyled>
</LinkableComponent>
<LinkableComponent id="VOTERS_PER_OPTION">
<CardStyled style={{ gridArea: 'col5' }}>
{pollPerOptionData.length === 0 ? (
<Loading />
) : (
<PollPerOption content="Voters Per Option" isVoter component="pollPerOptionVoters" />
)}
</CardStyled>
</LinkableComponent>
<LinkableComponent id="VOTES_PER_OPTION">
<CardStyled style={{ gridArea: 'col6' }}>
{pollPerOptionData.length === 0 ? (
<Loading />
) : (
<PollPerOption content="MKR Votes Per Option" component="pollPerOptionMkr" />
)}
</CardStyled>
</LinkableComponent>
</PollDetailContainer>
<CenteredRowGrid>
<CardStyled>
{mkrDistributionData.length === 0 ? (
<Loading />
) : (
<MakerDistribution content="MKR Count By Option" component="makerDistribution" />
)}
</CardStyled>
<CardStyled style={{ padding: 0 }}>
<StrippedTableWrapper
markdown
info={`This tile shows a leaderboard for the largest MKR holders that have voted in this poll. This is primarily a navigational tool that provides access to each address’s voting history and etherscan address. <br><br> This metric is generated using the Voted event emitted by the PollingEmitter governance contract. The total MKR held by each address voting in this poll is counted and added to this list. This MKR value is then converted into a percentage of the total MKR voting in this poll. This list is then sorted large to small and displayed.`}
links={[
{
title: 'MakerDAO Governance Graph',
uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
},
{
title: 'MKR Registry Graph',
uri: 'https://thegraph.com/explorer/subgraph/protofire/mkr-registry?query=Account%20balances',
},
]}
content="Top Voters"
>
<StrippedRowsContainer>
{Object.keys(topVoters).length === 0 ? (
<Loading />
) : (
getTopVotersTableData(topVoters)
.slice(0, 8)
.map(el => (
<StrippedTableRow key={el.key}>
<StrippedTableCell>{el.supports}%</StrippedTableCell>
<StrippedTableCell>{el.sender}</StrippedTableCell>
</StrippedTableRow>
))
)}
</StrippedRowsContainer>
</StrippedTableWrapper>
</CardStyled>
<LinkableComponent id="MKR_COUNT">
<CardStyled>
{mkrDistributionData.length === 0 ? (
<Loading />
) : (
<MakerDistribution content="MKR Count By Option" component="makerDistribution" />
)}
</CardStyled>
</LinkableComponent>
<LinkableComponent id="TOP_VOTERS">
<CardStyled style={{ padding: 0 }}>
<StrippedTableWrapper
markdown
info={`This tile shows a leaderboard for the largest MKR holders that have voted in this poll. This is primarily a navigational tool that provides access to each address’s voting history and etherscan address. <br><br> This metric is generated using the Voted event emitted by the PollingEmitter governance contract. The total MKR held by each address voting in this poll is counted and added to this list. This MKR value is then converted into a percentage of the total MKR voting in this poll. This list is then sorted large to small and displayed.`}
links={[
{
title: 'MakerDAO Governance Graph',
uri: 'https://thegraph.com/explorer/subgraph/protofire/makerdao-governance?query=Polls',
},
{
title: 'MKR Registry Graph',
uri: 'https://thegraph.com/explorer/subgraph/protofire/mkr-registry?query=Account%20balances',
},
]}
content="Top Voters"
>
<StrippedRowsContainer>
{Object.keys(topVoters).length === 0 ? (
<Loading />
) : (
getTopVotersTableData(topVoters)
.slice(0, 8)
.map(el => (
<StrippedTableRow key={el.key}>
<StrippedTableCell>{el.supports}%</StrippedTableCell>
<StrippedTableCell>{el.sender}</StrippedTableCell>
</StrippedTableRow>
))
)}
</StrippedRowsContainer>
</StrippedTableWrapper>
</CardStyled>
</LinkableComponent>
</CenteredRowGrid>

{isModalOpen && (
Expand Down
Loading

0 comments on commit 3d4bf7f

Please sign in to comment.