fix(voting): adjust voting UI

modules/dashboard/ui/DashboardVote/DashboardVote.tsx

@@ -2,9 +2,9 @@ import { useCallback } from 'react'
 import { useVotePassedCallback } from 'modules/votes/hooks/useVotePassedCallback'
 
 import Link from 'next/link'
+import { Text } from '@lidofinance/lido-ui'
 import { VoteStatusBanner } from 'modules/votes/ui/VoteStatusBanner'
 import { VoteYesNoBar } from 'modules/votes/ui/VoteYesNoBar'
-import { InfoRowFull } from 'modules/shared/ui/Common/InfoRow'
 import { VoteDescription } from 'modules/votes/ui/VoteDescription'
 
 import {
@@ -14,9 +14,10 @@ import {
   VoteDescriptionWrap,
   VotesBarWrap,
   Footer,
+  NeededToQuorum,
 } from './DashboardVoteStyle'
 import type { StartVoteEventObject } from 'generated/AragonVotingAbi'
-import { Vote, VoteStatus } from 'modules/votes/types'
+import { Vote, VotePhase, VoteStatus } from 'modules/votes/types'
 import { weiToNum } from 'modules/blockChain/utils/parseWei'
 import { getVoteDetailsFormatted } from 'modules/votes/utils/getVoteDetailsFormatted'
 import { formatFloatPct } from 'modules/shared/utils/formatFloatPct'
@@ -106,15 +107,24 @@ export function DashboardVote({
         </VoteBody>
         <Footer>
           <VotesBarWrap>
-            <InfoRowFull title="Needed to quorum">
-              {neededToQuorum > 0 && !isEnded
-                ? `${neededToQuorumFormatted}%`
-                : '-'}
-            </InfoRowFull>
+            {vote.phase !== VotePhase.Closed && (
+              <NeededToQuorum>
+                <Text size="xxs" color="secondary">
+                  Needed to quorum
+                </Text>
+                <Text size="xxs">
+                  {neededToQuorum > 0 && !isEnded
+                    ? `${neededToQuorumFormatted}%`
+                    : '-'}
+                </Text>
+              </NeededToQuorum>
+            )}
 
             <VoteYesNoBar
               yeaPct={yeaPct}
               nayPct={nayPct}
+              yeaNum={yeaNum}
+              nayNum={nayNum}
               yeaPctOfTotalSupply={yeaPctOfTotalSupplyFormatted}
               nayPctOfTotalSupply={nayPctOfTotalSupplyFormatted}
               showOnForeground

modules/dashboard/ui/DashboardVote/DashboardVoteStyle.ts

@@ -44,3 +44,8 @@ export const Footer = styled.div`
   margin-top: auto;
   margin-bottom: 0;
 `
+
+export const NeededToQuorum = styled.div`
+  display: flex;
+  justify-content: space-between;
+`

modules/shared/ui/Common/AddressPop/AddressPop.tsx

@@ -24,9 +24,14 @@ export function AddressPop({ children, ...badgeProps }: Props) {
     position: undefined,
   })
 
-  const handleOpen = useCallback(() => {
-    setState({ isOpened: true })
-  }, [setState])
+  const handleOpen = useCallback(
+    (event: React.MouseEvent) => {
+      // To avoid opening a vote when clicking on the pop from the dashboard
+      event.preventDefault()
+      setState({ isOpened: true })
+    },
+    [setState],
+  )
 
   useEffect(() => {
     const wrapEl = wrapRef.current

modules/shared/ui/Common/AddressPop/calcPopoverPosition.ts

@@ -4,11 +4,24 @@ export function calcPopoverPosition(wrapEl: HTMLElement, popEl: HTMLElement) {
   const wrapBox = wrapEl.getBoundingClientRect()
   const popBox = popEl.getBoundingClientRect()
 
-  const left = wrapBox.left + wrapBox.width / 2 - popBox.width / 2
-  const top = wrapBox.top + wrapBox.height / 2 - popBox.height / 2
+  let offsetParent = wrapEl.offsetParent as HTMLElement | null
+  let offsetX = 0
+  let offsetY = 0
+
+  while (offsetParent) {
+    offsetX += offsetParent.offsetLeft - offsetParent.scrollLeft
+    offsetY += offsetParent.offsetTop - offsetParent.scrollTop
+    offsetParent = offsetParent.offsetParent as HTMLElement | null
+  }
+
+  const left = wrapBox.left + wrapBox.width / 2 - popBox.width / 2 - offsetX
+  const top = wrapBox.top + wrapBox.height / 2 - popBox.height / 2 - offsetY
+
+  const modalWidth = wrapEl.offsetParent?.clientWidth ?? window.innerWidth
+  const modalHeight = wrapEl.offsetParent?.clientHeight ?? window.innerHeight
 
   return {
-    left: minmax(10, left, window.innerWidth - popBox.width - 10),
-    top: minmax(10, top, window.innerHeight - popBox.height - 10),
+    left: minmax(10, left, modalWidth - popBox.width - 10),
+    top: minmax(10, top, modalHeight - popBox.height - 10),
   }
 }

modules/votes/providers/VoteFormActions/VoteFormActionsContext.tsx

@@ -11,7 +11,6 @@ import {
 } from 'modules/delegation/hooks/useEligibleDelegators'
 import { useFormVoteSubmit } from 'modules/votes/ui/VoteForm/useFormVoteSubmit'
 import { useFormVoteInfo } from 'modules/votes/ui/VoteForm/useFormVoteInfo'
-import { formatBalance } from 'modules/blockChain/utils/formatBalance'
 import { useGovernanceSymbol } from 'modules/tokens/hooks/useGovernanceSymbol'
 
 import { ResultTx } from 'modules/blockChain/types'
@@ -41,7 +40,7 @@ export type VoteFormActionsContextValue = {
   setSuccessTx: React.Dispatch<React.SetStateAction<ResultTx | null>>
   formVoteSubmitData: ReturnType<typeof useFormVoteSubmit>
   setVoteId: React.Dispatch<React.SetStateAction<string>>
-  ownVotePower: Number
+  votePower: Number | undefined
   handleVote: (mode: VoteMode | null) => Promise<void>
   handleDelegatesVote: (
     mode: VoteMode | null,
@@ -99,6 +98,7 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
     eventsDelegatesVoted,
     voterState,
     votePhase,
+    votePower,
     mutate: doRevalidate,
   } = formVoteInfoData
 
@@ -152,8 +152,6 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
     )
   }, [delegatedVotersAddresses, eventsVoted, eventsDelegatesVoted])
 
-  const ownVotePower = Number(formatBalance(formVoteInfoData.votePowerWei || 0))
-
   const eligibleDelegatedVoters = useMemo(
     () => eligibleDelegatorsData.eligibleDelegatedVoters,
     [eligibleDelegatorsData],
@@ -173,7 +171,7 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
       formVoteInfoData,
       successTx,
       setSuccessTx,
-      ownVotePower,
+      votePower,
       handleVote,
       handleDelegatesVote,
       votedAs,
@@ -203,7 +201,7 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
       formVoteInfoData,
       successTx,
       setSuccessTx,
-      ownVotePower,
+      votePower,
       handleVote,
       handleDelegatesVote,
       votedAs,

modules/votes/ui/VoteActionsModals/DelegatorsList/VoteActionsDelegatorsList.tsx

@@ -115,7 +115,7 @@ export function DelegatorsList({
           </Text>
         </SummaryAmount>
         <Text size="xxs">
-          from {pluralize(eligibleDelegatedVoters.length, 'delegate')}
+          from {pluralize(eligibleDelegatedVoters.length, 'delegator')}
         </Text>
       </SummaryWrap>
     )

modules/votes/ui/VoteActionsModals/DelegatorsList/VoteActionsDelegatorsListStyle.tsx

@@ -4,6 +4,7 @@ import { Accordion, Text } from '@lidofinance/lido-ui'
 export const SummaryWrap = styled.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 `
 
@@ -37,7 +38,7 @@ export const DelegatorsListItem = styled.div`
 `
 
 export const DelegatorsVotingPower = styled(Text).attrs({ size: 'xs' })`
-  min-width: 100px;
+  min-width: 82px;
   text-align: right;
 `
 

modules/votes/ui/VoteActionsModals/SubmitModal/VoteSubmitModal.tsx

@@ -57,9 +57,7 @@ export function VoteSubmitModal({ data: { mode }, ...modalProps }: ModalProps) {
 
   const canVoteWithDelegatedPower = eligibleDelegatedVoters.length > 0
 
-  const title = `Vote ${
-    mode === 'yay' ? '“Yes”' : '“No”'
-  } with Delegated ${governanceSymbol}`
+  const title = `Vote ${mode === 'yay' ? '“Yes”' : '“No”'} with Delegated VP`
 
   return (
     <Modal title={title} center {...modalProps}>

modules/votes/ui/VoteActionsModals/SuccessModal/VoteSuccessModal.tsx

@@ -43,7 +43,7 @@ interface SnapshotData {
   eligibleDelegatedVotingPower: BigNumber
   votePhase: VotePhase | undefined
   votedByDelegate: EligibleDelegator[]
-  ownVotePower: Number
+  votePower: Number | undefined
   delegationInfo: Record<string, string | null> | undefined
   delegatedVotersAddresses: string[]
   eligibleDelegatedVoters: EligibleDelegator[]
@@ -70,7 +70,7 @@ export function VoteSuccessModal({
     votedByDelegate,
     handleVote,
     handleDelegatesVote,
-    ownVotePower,
+    votePower,
     voterState,
     delegationInfo,
     votePhase,
@@ -93,7 +93,7 @@ export function VoteSuccessModal({
       eligibleDelegatedVotingPower,
       votePhase,
       votedByDelegate,
-      ownVotePower,
+      votePower,
       delegationInfo,
       delegatedVotersAddresses,
       eligibleDelegatedVoters,
@@ -104,7 +104,7 @@ export function VoteSuccessModal({
       eligibleDelegatedVotingPower,
       votePhase,
       votedByDelegate,
-      ownVotePower,
+      votePower,
       delegationInfo,
       delegatedVotersAddresses,
       eligibleDelegatedVoters,
@@ -182,7 +182,9 @@ export function VoteSuccessModal({
     0
 
   const canVoteWithOwnPower =
-    currentSnapshot.ownVotePower > 0 && !hasVotedWithOwnVP
+    currentSnapshot.votePower !== undefined &&
+    currentSnapshot.votePower > 0 &&
+    !hasVotedWithOwnVP
 
   const handleEtherscan = useEtherscanOpen(
     successTx.hash,
@@ -199,7 +201,7 @@ export function VoteSuccessModal({
   )
 
   const voteOption = useMemo(() => {
-    return currentSnapshot.mode === 'yay' ? '"Yes"' : '"No"'
+    return currentSnapshot.mode === 'yay' ? '“Yes”' : '“No”'
   }, [currentSnapshot.mode])
 
   const title = useRef(
@@ -287,7 +289,7 @@ export function VoteSuccessModal({
                     loading={txVote.isPending}
                     disabled={!txVote.isEmpty && txVote.tx?.type === 'safe'}
                   >
-                    My own ({currentSnapshot.ownVotePower} {governanceSymbol})
+                    My own ({currentSnapshot.votePower} {governanceSymbol})
                   </Button>
                 )}
                 {!txVote.isEmpty && canVoteWithOwnPower && (

modules/votes/ui/VoteDetails/VoteDetails.tsx

@@ -112,6 +112,8 @@ export function VoteDetails({
           <VoteYesNoBar
             yeaPct={yeaPct}
             nayPct={nayPct}
+            yeaNum={yeaNum}
+            nayNum={nayNum}
             yeaPctOfTotalSupply={yeaPctOfTotalSupplyFormatted}
             nayPctOfTotalSupply={nayPctOfTotalSupplyFormatted}
             showOnForeground

modules/votes/ui/VoteDetails/VoteDetailsStyle.ts

@@ -54,6 +54,7 @@ export const VoteHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  flex-wrap: wrap;
   gap: 8px;
   margin-bottom: ${({ theme }) => theme.spaceMap.sm}px;
 `

modules/votes/ui/VoteForm/VoteForm.tsx

@@ -14,7 +14,7 @@ import { FetchErrorBanner } from 'modules/shared/ui/Common/FetchErrorBanner'
 import { VoteInfoDelegated } from 'modules/votes/ui/VoteInfoDelegated'
 import { VotePowerInfo } from '../VotePowerInfo'
 
-import { VoteStatus } from 'modules/votes/types'
+import { VotePhase, VoteStatus } from 'modules/votes/types'
 
 type Props = {
   voteId?: string
@@ -27,6 +27,7 @@ export function VoteForm({ voteId }: Props) {
     startDate,
     voteTime,
     votePowerWei,
+    votePower,
     canExecute,
     objectionPhaseTime,
     isLoading,
@@ -131,14 +132,17 @@ export function VoteForm({ voteId }: Props) {
                 eventsDelegatesVoted={eventsDelegatesVoted}
                 walletAddress={walletAddress}
               />
-              <VotePowerInfo ownVotePower={votePowerWei} />
+              {votePhase !== VotePhase.Closed && (
+                <VotePowerInfo votePowerWei={votePowerWei} />
+              )}
               <VoteFormActions
                 canEnact={canEnact}
                 voterState={voterState!}
                 isSubmitting={isSubmitting}
                 onEnact={handleEnact}
                 votePhase={votePhase}
                 votePowerWei={votePowerWei}
+                votePower={votePower}
                 voteId={voteId}
               />
             </>

modules/votes/ui/VoteFormActions/VoteFormActions.tsx

@@ -1,5 +1,5 @@
-import { Button, PopupMenu, PopupMenuItem } from '@lidofinance/lido-ui'
-import { Actions } from './VoteFormActionsStyle'
+import { Button, PopupMenu, PopupMenuItem, Text } from '@lidofinance/lido-ui'
+import { Actions, TxStatusWrapper } from './VoteFormActionsStyle'
 import CheckSVG from 'assets/check.com.svg.react'
 import CrossSVG from 'assets/cross.com.svg.react'
 
@@ -28,6 +28,7 @@ type Props = {
   onEnact: () => void
   voteId: string
   votePowerWei: BigNumber | null | undefined
+  votePower: Number | undefined
 }
 
 type ModalData = {
@@ -46,6 +47,7 @@ export function VoteFormActions({
   onEnact,
   voteId,
   votePowerWei,
+  votePower,
 }: Props) {
   const {
     data: { eligibleDelegatedVoters, eligibleDelegatedVotingPower },
@@ -56,7 +58,6 @@ export function VoteFormActions({
     handleDelegatesVote,
     txVote,
     txDelegatesVote,
-    ownVotePower,
     setVoteId: setVoteFormActionsModalsVoteId,
     isSubmitting: isVoteSubmitting,
     eventsVoted,
@@ -103,14 +104,15 @@ export function VoteFormActions({
   const nayButtonRef = useRef(null)
   const yayButtonRef = useRef(null)
 
-  const canVoteWithOwnPower = ownVotePower > 0
+  const canVoteWithOwnPower = votePower !== undefined && votePower > 0
   const canVoteWithDelegatedPower = eligibleDelegatedVoters.length > 0
 
   const canVote = useMemo(
     () =>
       isValidPhaseToVote &&
-      (eligibleDelegatedVoters.length > 0 || Number(ownVotePower) > 0),
-    [isValidPhaseToVote, ownVotePower, eligibleDelegatedVoters],
+      (eligibleDelegatedVoters.length > 0 ||
+        (votePower !== undefined && votePower > 0)),
+    [isValidPhaseToVote, votePower, eligibleDelegatedVoters],
   )
 
   const preparedOwnVP = useMemo(
@@ -313,15 +315,21 @@ export function VoteFormActions({
         )}
       </Actions>
       {!txVote.isEmpty && (
-        <>
+        <TxStatusWrapper>
+          <Text size="xxs" color="secondary">
+            Transaction using own VP
+          </Text>
           <TxRow tx={txVote} onClick={txVote.open} />
-        </>
+        </TxStatusWrapper>
       )}
       <br />
       {!txDelegatesVote.isEmpty && (
-        <>
+        <TxStatusWrapper>
+          <Text size="xxs" color="secondary">
+            Transaction using delegated VP
+          </Text>
           <TxRow tx={txDelegatesVote} onClick={txDelegatesVote.open} />
-        </>
+        </TxStatusWrapper>
       )}
     </>
   )