- {showVoteModal && (
-
- {' '}
-
- )}
- {showConfirmModal && (
-
-
-
- )}
- {winner ? (
-
- SNT holders have decided {winner == 1 ? voteConstants.against.verb : voteConstants.for.verb} this
- community to the directory!
-
- ) : hideModalFunction || window.innerWidth < 769 ? (
-
- ) : (
- {voteConstants.question}
- )}
-
-
-
- {winner ? (
- finalizeVoting.send(room.roomNumber)} disabled={!account}>
- Finalize the vote ✍️
-
- ) : (
-
- {
- setSelectedVoted(voteConstants.against)
- setShowVoteModal(true)
- }}
- >
- {voteConstants.against.text} {voteConstants.against.icon}
-
- {
- setSelectedVoted(voteConstants.for)
- setShowVoteModal(true)
- }}
- >
- {voteConstants.for.text} {voteConstants.for.icon}
-
-
- )}
-
- {vote && vote.timeLeft > 0 && }
-
-
- )
-}
-
export const Card = styled.div`
display: flex;
align-items: stretch;
@@ -275,6 +147,13 @@ export const CardVoteWrap = styled.div`
}
`
+export const CardVoteBlock = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+`
+
const Community = styled.div`
display: flex;
margin-bottom: 16px;
@@ -296,11 +175,6 @@ const CardLogo = styled.img`
height: 64px !important;
border-radius: 50%;
`
-const CardVoteBottom = styled.div`
- display: flex;
- justify-content: flex-end;
- align-items: center;
-`
export const CardHeading = styled.h2`
font-weight: bold;
@@ -324,19 +198,6 @@ const RemoveBtn = styled.button`
background-size: cover;
`
-const CardHeadingEndedVote = styled.p`
- max-width: 290px;
- align-self: center;
- font-weight: normal;
- font-size: 15px;
- line-height: 22px;
- margin-bottom: 18px;
- text-align: center;
-
- @media (max-width: 768px) {
- display: none;
- }
-`
const CardText = styled.p`
line-height: 22px;
margin-bottom: 8px;
@@ -370,37 +231,6 @@ export const CardLinks = styled.div`
}
`
-export const CardVoteBlock = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 100%;
-`
-
-export const VotesBtns = styled.div`
- display: flex;
- justify-content: space-between;
- width: 100%;
-`
-export const VoteBtn = styled(ButtonSecondary)`
- width: 187px;
- padding: 11px 46px;
- font-weight: 500;
- font-size: 15px;
- line-height: 22px;
-
- & > span {
- font-size: 20px;
- }
-
- @media (max-width: 768px) {
- width: 305px;
- }
-`
-const VoteBtnFinal = styled(VoteBtn)`
- width: 100%;
-`
-
const VoteHistoryTable = styled.table`
width: 100%;
`
diff --git a/packages/DApp/src/components/card/CardFeature.tsx b/packages/DApp/src/components/card/CardFeature.tsx
index e27d84f..e5709c7 100644
--- a/packages/DApp/src/components/card/CardFeature.tsx
+++ b/packages/DApp/src/components/card/CardFeature.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
import styled from 'styled-components'
import { Colors, ColumnFlexDiv } from '../../constants/styles'
import { addCommas } from '../../helpers/addCommas'
-import { CardHeading, CardVoteBlock, VoteBtn } from '../Card'
+import { CardHeading, CardVoteBlock } from '../Card'
import { CommunityDetail } from '../../models/community'
import { Modal } from '../Modal'
import { FeatureModal } from './FeatureModal'
@@ -13,7 +13,8 @@ import { useContracts } from '../../hooks/useContracts'
import { useContractCall } from '@usedapp/core'
import { votingFromRoom } from '../../helpers/voting'
import { VoteSubmitButton } from './VoteSubmitButton'
-import { VoteSendingBtn } from '../Button'
+import { VoteSendingBtn, VoteBtn } from '../Button'
+
interface CardFeatureProps {
community: CommunityDetail
heading: string
diff --git a/packages/DApp/src/components/card/CardVote/CardVote.tsx b/packages/DApp/src/components/card/CardVote/CardVote.tsx
new file mode 100644
index 0000000..fe5eb41
--- /dev/null
+++ b/packages/DApp/src/components/card/CardVote/CardVote.tsx
@@ -0,0 +1,156 @@
+import React, { useState } from 'react'
+import { VoteModal } from './../VoteModal'
+import { VoteChart } from './../../votes/VoteChart'
+import { voteTypes } from './../../../constants/voteTypes'
+import { useEthers } from '@usedapp/core'
+import { useContractFunction } from '@usedapp/core'
+import { useContracts } from '../../../hooks/useContracts'
+import { getVotingWinner } from '../../../helpers/voting'
+import { VoteAnimatedModal } from './../VoteAnimatedModal'
+import voting from '../../../helpers/voting'
+import { DetailedVotingRoom } from '../../../models/smartContract'
+import { VoteSubmitButton } from './../VoteSubmitButton'
+import { useRoomAggregateVotes } from '../../../hooks/useRoomAggregateVotes'
+import styled from 'styled-components'
+import { Modal } from './../../Modal'
+import { VoteBtn, VotesBtns } from '../../Button'
+import { CardHeading, CardVoteBlock } from '../../Card'
+
+interface CardVoteProps {
+ room: DetailedVotingRoom
+ hideModalFunction?: (val: boolean) => void
+}
+
+export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
+ const { account } = useEthers()
+ const [showVoteModal, setShowVoteModal] = useState(false)
+ const [showConfirmModal, setShowConfirmModal] = useState(false)
+
+ const [selectedVoted, setSelectedVoted] = useState(voteTypes['Add'].for)
+
+ const { votingContract } = useContracts()
+
+ room = useRoomAggregateVotes(room, showConfirmModal)
+
+ const finalizeVoting = useContractFunction(votingContract, 'finalizeVotingRoom')
+
+ const setNext = (val: boolean) => {
+ setShowConfirmModal(val)
+ setShowVoteModal(false)
+ }
+
+ const hideConfirm = (val: boolean) => {
+ if (hideModalFunction) {
+ hideModalFunction(false)
+ }
+ setShowConfirmModal(val)
+ }
+
+ const vote = voting.fromRoom(room)
+
+ const voteConstants = voteTypes[vote.type]
+
+ const winner = getVotingWinner(vote)
+ const availableAmount = 65800076
+
+ const initialProposing = vote?.type === 'Remove' && availableAmount > 2000000 ? 2000000 : 0
+ const [proposingAmount, setProposingAmount] = useState(initialProposing)
+
+ if (!vote) {
+ return