Merge pull request #173 from MinaFoundation/ranked_vote_casted_votes_…

…table_friday casted votes table for ranked vote table with data - need more styling
MinaFoundation · Feb 24, 2025 · 05f96f8 · 05f96f8
2 parents 885d087 + 5aa7b03
commit 05f96f8
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 0 deletions.
diff --git a/src/components/phase-summary/BasePhaseSummary.tsx b/src/components/phase-summary/BasePhaseSummary.tsx
@@ -11,6 +11,7 @@ interface Props {
 	leftColumn: ReactNode
 	rightColumn: ReactNode
 	proposalList: ReactNode
+	votesList: ReactNode
 	stats?: ReactNode
 }
 
@@ -21,6 +22,7 @@ export const BasePhaseSummary: FC<Props> = ({
 	leftColumn,
 	rightColumn,
 	proposalList,
+	votesList,
 	stats,
 }) => {
 	return (
@@ -53,6 +55,7 @@ export const BasePhaseSummary: FC<Props> = ({
 			</div>
 
 			{proposalList}
+			{votesList}
 		</div>
 	)
 }
diff --git a/src/components/phase-summary/VotesTable.tsx b/src/components/phase-summary/VotesTable.tsx
@@ -0,0 +1,127 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import {
+	CheckCircledIcon,
+	CheckIcon,
+	CountdownTimerIcon,
+	Cross2Icon,
+	CrossCircledIcon,
+} from '@radix-ui/react-icons'
+import type { IconProps } from '@radix-ui/react-icons/dist/types'
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '../ui/table'
+import { Vote, VoteStatus } from '@/types/phase-summary'
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
+
+interface Props {
+	votes: Vote[]
+	title: string
+}
+
+interface VotesTableStatus {
+	value: VoteStatus
+	icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>
+}
+
+interface VotesTableDirection {
+	value: 'FOR' | 'AGAINST'
+	icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>
+}
+
+export const votesTableStatuses = [
+	{
+		value: 'Pending',
+		icon: CountdownTimerIcon,
+	},
+	{
+		value: 'Orphaned',
+		icon: CrossCircledIcon,
+	},
+	{
+		value: 'Canonical',
+		icon: CheckCircledIcon,
+	},
+] satisfies VotesTableStatus[]
+
+export const votesTableDirections = [
+	{
+		value: 'FOR',
+		icon: CheckIcon,
+	},
+	{
+		value: 'AGAINST',
+		icon: Cross2Icon,
+	},
+] satisfies VotesTableDirection[]
+
+export const VotesTable = ({ votes, title }: Props) => {
+	return (
+		<Card>
+			<CardHeader className="py-3">
+				<CardTitle className="text-sm font-medium">{title}</CardTitle>
+			</CardHeader>
+			<CardContent className="p-3">
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead className="w-[300px]">Height</TableHead>
+							<TableHead>Timestap</TableHead>
+							<TableHead>Account</TableHead>
+							<TableHead>Hash</TableHead>
+							<TableHead>Status</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{votes.map(vote => (
+							<TableRow key={vote.hash}>
+								<TableCell className="font-medium">
+									<div className="flex items-center gap-2">
+										<span>{vote.height}</span>
+									</div>
+								</TableCell>
+								<TableCell className="font-medium">
+									<div className="flex items-center gap-2">
+										<span>{vote.timestamp}</span>
+									</div>
+									{/* {topic.reviewerGroups.map(rg => (
+										<Badge key={rg.reviewerGroup.id} variant="outline">
+											{rg.reviewerGroup.name}
+										</Badge>
+									))} */}
+								</TableCell>
+								<TableCell className="font-medium">
+									<div className="flex flex-wrap gap-1">
+										<span>
+											{vote.account.slice(0, 12) +
+												'...' +
+												vote.account.slice(-6)}
+										</span>
+									</div>
+								</TableCell>
+								<TableCell className="font-medium">
+									<div className="flex flex-wrap gap-1">
+										<span>
+											{vote.hash.slice(0, 12) + '...' + vote.hash.slice(-6)}
+										</span>
+									</div>
+								</TableCell>
+								<TableCell className="font-medium">
+									<div className="flex flex-wrap gap-1">
+										<span>{vote.status}</span>
+									</div>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</CardContent>
+		</Card>
+	)
+}
diff --git a/src/components/phase-summary/VotingPhaseRankedSummary.tsx b/src/components/phase-summary/VotingPhaseRankedSummary.tsx
@@ -12,6 +12,7 @@ import { PhaseTimeCard } from './PhaseTimeCard'
 import { StatsCard } from './StatsCard'
 import { ProposalList } from './ProposalList'
 import { BudgetDistributionChart } from '../funding-rounds/BudgetDistributionChart'
+import { VotesTable } from './VotesTable'
 
 interface Props {
 	summary: VotingPhaseRankedSummaryType
@@ -92,6 +93,7 @@ export const VotingPhaseRankedSummary: FC<Props> = ({
 						showCommunityVotes={false}
 					/>
 				}
+				votesList={<VotesTable title="Casted Votes" votes={summary.votes} />}
 			/>
 		</TooltipProvider>
 	)

diff --git a/src/services/VotingService.ts b/src/services/VotingService.ts
@@ -1,6 +1,7 @@
 import { PrismaClient } from '@prisma/client'
 import { OCVApiService } from './OCVApiService'
 import {
+	VoteStatus,
 	type VotingPhaseFundsDistributionSummary,
 	type VotingPhaseRankedSummary,
 } from '@/types/phase-summary'
@@ -132,6 +133,15 @@ export class VotingService {
 			remainingBudget,
 			budgetBreakdown,
 			proposalVotes,
+			votes: voteData.votes.map(ocvVote => ({
+				account: ocvVote.account,
+				hash: ocvVote.hash,
+				memo: ocvVote.memo,
+				height: ocvVote.height,
+				status: ocvVote.status as VoteStatus, // if necessary, cast status to VoteStatus type
+				timestamp: ocvVote.timestamp,
+				nonce: ocvVote.nonce,
+			})),
 		}
 	}
 
@@ -165,6 +175,7 @@ export class VotingService {
 
 		// Get ranked votes from OCV API
 		const voteData = await this.ocvService.getRankedVotes(fundingRound.mefId)
+		console.log('votes', voteData.votes, fundingRound.mefId)
 
 		// Calculate budget breakdown
 		const budgetBreakdown = fundingRound.proposals.reduce(
@@ -247,6 +258,15 @@ export class VotingService {
 			totalVotes: voteData.total_votes,
 			budgetBreakdown,
 			proposalVotes,
+			votes: voteData.votes.map(ocvVote => ({
+				account: ocvVote.account,
+				hash: ocvVote.hash,
+				memo: ocvVote.memo,
+				height: ocvVote.height,
+				status: ocvVote.status as VoteStatus,
+				timestamp: ocvVote.timestamp,
+				nonce: ocvVote.nonce,
+			})),
 		}
 	}
 

diff --git a/src/types/phase-summary.ts b/src/types/phase-summary.ts
@@ -89,6 +89,7 @@ export interface VotingPhaseFundsDistributionSummary extends BasePhaseSummary {
 	notFundedProposals: number
 	totalBudget: number
 	remainingBudget: number
+	votes: Vote[]
 }
 
 export type RankedVotingProposalVote = ProposalVoteBase & {
@@ -101,6 +102,17 @@ export type RankedVotingProposalVote = ProposalVoteBase & {
 	}
 	hasVotes: boolean
 }
+export type VoteStatus = 'Pending' | 'Canonical' | 'Orphaned'
+
+export interface Vote {
+	account: string
+	hash: string
+	memo: string
+	height: number
+	status: VoteStatus
+	timestamp: number
+	nonce: number
+}
 
 export interface VotingPhaseRankedSummary {
 	fundingRoundName: string
@@ -113,6 +125,7 @@ export interface VotingPhaseRankedSummary {
 		large: number
 	}
 	proposalVotes: RankedVotingProposalVote[]
+	votes: Vote[]
 }
 
 export type PhaseStatus = 'not-started' | 'ongoing' | 'ended'