From 39c4b3c05d6d6c4c0f7f903b0694963b97ee52df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Santana=20Gon=C3=A7alves?= Date: Mon, 22 Jul 2024 11:12:00 -0300 Subject: [PATCH] DAO-533: Implement Popover for Sentiment component (#64) * show popover in sentiment component * custom popover position, size and background * place popover at the bottom depending of the index * votes amount position * add caret * remove unused prop --- src/app/proposals/LatestProposalsTable.tsx | 93 +++++++++++++------ .../proposals/hooks/useGetProposalVotes.ts | 2 +- .../ComparativeProgressBar.tsx | 2 +- src/components/Popover/Popover.tsx | 57 ++++++++++-- 4 files changed, 117 insertions(+), 37 deletions(-) diff --git a/src/app/proposals/LatestProposalsTable.tsx b/src/app/proposals/LatestProposalsTable.tsx index 6201287b..c594230d 100644 --- a/src/app/proposals/LatestProposalsTable.tsx +++ b/src/app/proposals/LatestProposalsTable.tsx @@ -1,12 +1,13 @@ -import { getEventArguments } from '@/app/proposals/shared/utils' -import { Header } from '@/components/Typography' -import { Table } from '@/components/Table' import { useFetchLatestProposals } from '@/app/proposals/hooks/useFetchLatestProposals' -import { Link } from '@/components/Link' import { useGetProposalVotes } from '@/app/proposals/hooks/useGetProposalVotes' -import { useMemo } from 'react' +import { getEventArguments } from '@/app/proposals/shared/utils' import { ComparativeProgressBar } from '@/components/ComparativeProgressBar/ComparativeProgressBar' import { StatusColumn } from '@/app/proposals/StatusColumn' +import { Link } from '@/components/Link' +import { Popover } from '@/components/Popover' +import { Table } from '@/components/Table' +import { Header, Paragraph } from '@/components/Typography' +import { useMemo } from 'react' interface ProposalNameColumnProps { name: string @@ -19,33 +20,73 @@ const ProposalNameColumn = ({ name, proposalId }: ProposalNameColumnProps) => ( const VotesColumn = ({ proposalId }: Omit) => { const data = useGetProposalVotes(proposalId) - - const votes = useMemo(() => { - if (data?.length === 3) { - return data.reduce((prev, next) => Number(next) + prev, 0) - } - return 0n - }, [data]) - + const votes = data.reduce((prev, next) => Number(next) + prev, 0) return

{votes.toString()}

} -const SentimentColumn = ({ proposalId }: Omit) => { +const PopoverSentiment = ({ votes }: { votes: string[] }) => { + const [againstVotes, forVotes, abstainVotes] = votes + return ( +
+ + Votes for + +
+ + For + + + {forVotes} + +
+
+ + Against + + + {againstVotes} + +
+
+ + Abstain + + + {abstainVotes} + +
+
+ ) +} + +const SentimentColumn = ({ + proposalId, + index, +}: Omit & { index: number }) => { const data = useGetProposalVotes(proposalId) const sentimentValues = useMemo(() => { - if (data?.length === 3) { - const [againstVotes, forVotes, abstainVotes] = data - return [ - { value: Number(forVotes), color: 'var(--st-success)' }, - { value: Number(againstVotes), color: 'var(--st-error)' }, - { value: Number(abstainVotes), color: 'var(--st-info)' }, - ] - } - return [{ value: 0, color: 'var(--st-info)' }] + const [againstVotes, forVotes, abstainVotes] = data + return [ + { value: Number(forVotes), color: 'var(--st-success)' }, + { value: Number(againstVotes), color: 'var(--st-error)' }, + { value: Number(abstainVotes), color: 'var(--st-info)' }, + ] }, [data]) - return + const position = index === 0 ? 'bottom' : 'top' + return ( + } + trigger="hover" + background="light" + position={position} + size="small" + hasCaret={true} + > + + + ) } interface LatestProposalsTableProps { @@ -53,11 +94,11 @@ interface LatestProposalsTableProps { } const latestProposalsTransformer = (proposals: ReturnType[]) => - proposals.map(proposal => ({ + proposals.map((proposal, i) => ({ 'Proposal Name': , 'Current Votes': , Starts: proposal.Starts, - Sentiment: , + Sentiment: , Status: , })) diff --git a/src/app/proposals/hooks/useGetProposalVotes.ts b/src/app/proposals/hooks/useGetProposalVotes.ts index aeb44278..021f4eca 100644 --- a/src/app/proposals/hooks/useGetProposalVotes.ts +++ b/src/app/proposals/hooks/useGetProposalVotes.ts @@ -17,5 +17,5 @@ export const useGetProposalVotes = (proposalId: string, shouldRefetch = false) = if (data) { return [formatUnits(data[0], 18), formatUnits(data[1], 18), formatUnits(data[2], 18)] } - return [0n, 0n, 0n] + return ['0', '0', '0'] } diff --git a/src/components/ComparativeProgressBar/ComparativeProgressBar.tsx b/src/components/ComparativeProgressBar/ComparativeProgressBar.tsx index 213a6f64..13c9a7b0 100644 --- a/src/components/ComparativeProgressBar/ComparativeProgressBar.tsx +++ b/src/components/ComparativeProgressBar/ComparativeProgressBar.tsx @@ -1,5 +1,5 @@ import { JSX, FC } from 'react' -const DEFAULT_CLASSES = 'w-100 rounded-[6px] bg-white h-[6px] rounded-[20px] relative flex overflow-hidden' +const DEFAULT_CLASSES = 'rounded-[6px] bg-white h-[6px] rounded-[20px] relative flex overflow-hidden' type Value = { value: number diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx index 6b70bb3a..e56da7f0 100644 --- a/src/components/Popover/Popover.tsx +++ b/src/components/Popover/Popover.tsx @@ -1,13 +1,26 @@ 'use client' +import { cn } from '@/lib/utils' import { ReactNode, useEffect, useRef, useState } from 'react' interface Props { children: ReactNode content: ReactNode trigger?: 'click' | 'hover' + background?: 'dark' | 'light' + position?: 'top' | 'bottom' + size?: 'small' | 'medium' + hasCaret?: boolean } -export const Popover = ({ children, content, trigger = 'click' }: Props) => { +export const Popover = ({ + children, + content, + trigger = 'click', + background = 'dark', + position = 'bottom', + size = 'medium', + hasCaret = false, +}: Props) => { const [show, setShow] = useState(false) const wrapperRef = useRef(null) @@ -39,18 +52,44 @@ export const Popover = ({ children, content, trigger = 'click' }: Props) => { }, [show, wrapperRef]) return ( -
+
setShow(!show)}>{children}
-