diff --git a/packages/DApp/src/components/Card.tsx b/packages/DApp/src/components/Card.tsx index 5a49f35..6b6f3e9 100644 --- a/packages/DApp/src/components/Card.tsx +++ b/packages/DApp/src/components/Card.tsx @@ -15,6 +15,8 @@ import { useEthers } from '@usedapp/core' import { useContractFunction } from '@usedapp/core' import { useContracts } from '../hooks/useContracts' import { getVotingWinner } from '../helpers/voting' +import { useVotesAggregate } from '../hooks/useVotesAggregate' +import rightIcon from '../assets/images/arrowRight.svg' interface CardCommunityProps { community: CommunityDetail @@ -114,6 +116,9 @@ export const CardVote = ({ community, room, hideModalFunction }: CardVoteProps) const [selectedVoted, setSelectedVoted] = useState(voteTypes['Add'].for) const { votingContract } = useContracts() + const { votes } = useVotesAggregate(room) + const { send } = useContractFunction(votingContract, 'castVotes') + const finalizeVoting = useContractFunction(votingContract, 'finalizeVotingRoom') const setNext = (val: boolean) => { @@ -167,7 +172,12 @@ export const CardVote = ({ community, room, hideModalFunction }: CardVoteProps) ) : hideModalFunction ? ( ) : ( - {voteConstants.question} + + {voteConstants.question} + {votes.length > 0 && community.currentVoting && community?.currentVoting.timeLeft > 0 && ( + send(votes)}> {votes.length} votes need saving + )} + )}
@@ -245,6 +255,11 @@ const CardLogo = styled.img` height: 64px !important; border-radius: 50%; ` +const CardVoteTop = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +` export const CardHeading = styled.h2` font-weight: bold; @@ -258,6 +273,35 @@ const CardTop = styled.div` line-height: 24px; ` +const VoteSendingBtn = styled.button` + padding-right: 28px; + font-size: 12px; + font-weight: 500; + line-height: 20px; + position: relative; + color: ${Colors.VioletDark}; + + &:hover { + color: ${Colors.Violet}; + } + + &:active { + color: ${Colors.VioletDark}; + } + + &::after { + content: ''; + width: 24px; + height: 24px; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + background-image: url(${rightIcon}); + background-size: cover; + } +` + const RemoveBtn = styled.button` width: 16px; height: 16px; diff --git a/packages/DApp/src/components/votes/VotingCard.tsx b/packages/DApp/src/components/votes/VotingCard.tsx index e3af5c9..0819c11 100644 --- a/packages/DApp/src/components/votes/VotingCard.tsx +++ b/packages/DApp/src/components/votes/VotingCard.tsx @@ -1,9 +1,6 @@ -import { useContractFunction } from '@usedapp/core' import React from 'react' import { Card, CardCommunity, CardCommunityWrap, CardVote, CardVoteWrap } from '../Card' import { useCommunity } from '../../hooks/useCommunity' -import { useContracts } from '../../hooks/useContracts' -import { useVotesAggregate } from '../../hooks/useVotesAggregate' import { VotingCardSkeleton } from './VotingCardSkeleton' interface VotingCardProps { @@ -12,9 +9,6 @@ interface VotingCardProps { export function VotingCard({ room }: VotingCardProps) { const { community } = useCommunity(room) - const { votes } = useVotesAggregate(room) - const { votingContract } = useContracts() - const { send } = useContractFunction(votingContract, 'castVotes') if (community) { return ( @@ -27,12 +21,6 @@ export function VotingCard({ room }: VotingCardProps) { {' '} - {votes.length > 0 && community.currentVoting && community?.currentVoting.timeLeft > 0 && ( - - )} ) }