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 && (
-
- )}
)
}