Total Votes per candidate #4312

packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx

@@ -1,3 +1,4 @@
+import BN from 'bn.js'
 import React, { useCallback } from 'react'
 import styled from 'styled-components'
 
@@ -31,11 +32,13 @@ export interface CandidateCardProps {
  loses?: number
  canVote?: boolean
  isPreview?: boolean
+ myStake?: BN
 }
 
 export const CandidateCard = ({
  candidate: { id, member, info, stake },
  voted,
+ myStake,
  withdrawable,
  canVote,
  isPreview,
@@ -97,9 +100,9 @@ export const CandidateCard = ({
  {stake && (
  <CandidateCardStake>
  <StatsValue>
- <TokenValue value={stake} />
+ <TokenValue value={myStake || stake} />
  </StatsValue>
- <Subscription>Staked</Subscription>
+ <Subscription>{voted && myStake ? 'My Stake' : 'Staked'}</Subscription>
  </CandidateCardStake>
  )}
  {withdrawable && (

packages/ui/src/council/components/election/CandidateCard/CandidateCardList.tsx

@@ -1,3 +1,4 @@
+import BN from 'bn.js'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -10,6 +11,7 @@ import { CandidateCardProps, CandidateCard, CandidateCardCandidate } from './Can
 interface CandidateCardListCandidate extends CandidateCardCandidate {
  isMyCandidate?: boolean
  voted?: boolean
+ myStake?: BN
 }
 
 interface CandidatesListProps extends Pick<CandidateCardProps, 'canVote' | 'isPreview'> {
@@ -34,8 +36,15 @@ export const CandidateCardList = ({ candidates = [], isLoading, canVote }: Candi
 
  return (
  <CandidatesListStyles>
- {candidates.map(({ voted, isMyCandidate, ...candidate }, index) => (
- <CandidateCard key={index} candidate={candidate} voted={voted} withdrawable={isMyCandidate} canVote={canVote} />
+ {candidates.map(({ voted, isMyCandidate, myStake, ...candidate }, index) => (
+ <CandidateCard
+ key={index}
+ candidate={candidate}
+ voted={voted}
+ withdrawable={isMyCandidate}
+ canVote={canVote}
+ myStake={myStake}
+ />
  ))}
  </CandidatesListStyles>
  )

packages/ui/src/council/components/election/voting/VotingStage.tsx

@@ -2,9 +2,11 @@ import React, { useMemo, useState } from 'react'
 
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import { NoData } from '@/common/components/NoData'
+import { BN_ZERO } from '@/common/constants'
 import { isDefined } from '@/common/utils'
 import { CandidateCardList } from '@/council/components/election/CandidateCard/CandidateCardList'
 import { CurrentElectionTabs, VotingStageTab } from '@/council/components/election/CurrentElectionTabs'
+import { useMyCastVotes } from '@/council/hooks/useMyCastVotes'
 import { useMyCurrentVotesCount } from '@/council/hooks/useMyCurrentVotesCount'
 import { useVerifiedVotingAttempts } from '@/council/hooks/useVerifiedVotingAttempts'
 import { CandidacyStatus } from '@/council/types'
@@ -18,6 +20,7 @@ interface VotingStageProps {
 export const VotingStage = ({ election, isLoading }: VotingStageProps) => {
  const [tab, setTab] = useState<VotingStageTab>('candidates')
  const { votesTotal } = useMyCurrentVotesCount(election?.cycleId)
+ const { votes } = useMyCastVotes(election?.cycleId)
 
  const { allAccounts } = useMyAccounts()
  const myVotes = useVerifiedVotingAttempts(election?.cycleId)
@@ -31,7 +34,17 @@ export const VotingStage = ({ election, isLoading }: VotingStageProps) => {
  ...candidate,
  voted: optionIds?.has(candidate.member.id),
  }))
- const votedForCandidates = allCandidates?.filter(({ voted }) => voted)
+ const votedForCandidates = allCandidates
+ ?.filter(({ voted }) => voted)
+ .map((candidate) => {
+ const myVotesForCandidate = votes?.filter((vote) => vote.optionId === candidate.member.id) ?? []
+
+ return {
+ ...candidate,
+ myVotes: myVotesForCandidate,
+ myStake: myVotesForCandidate.reduce((prev, next) => prev.add(next.stake), BN_ZERO),
+ }
+ })
 
  return [allCandidates, votedForCandidates]
  }, [optionIds?.size, election?.candidates])