feat(voting): adjust voting UI

.editorconfig

@@ -3,4 +3,4 @@ root = true
 [*]
 indent_style = space
 indent_size = 2
-insert_final_newline = true
+insert_final_newline = true

assets/fail.filled.com.svg.react

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM3.77447 3.77338C4.06736 3.48049 4.54224 3.48049 4.83513 3.77338L6.00109 4.93934L7.16858 3.77185C7.46148 3.47895 7.93635 3.47895 8.22924 3.77185C8.52214 4.06474 8.52214 4.53961 8.22924 4.83251L7.06175 6L8.22924 7.16749C8.52214 7.46039 8.52214 7.93526 8.22924 8.22815C7.93635 8.52105 7.46148 8.52105 7.16858 8.22815L6.00109 7.06066L4.83513 8.22662C4.54224 8.51951 4.06736 8.51951 3.77447 8.22662C3.48158 7.93373 3.48158 7.45885 3.77447 7.16596L4.94043 6L3.77447 4.83404C3.48158 4.54115 3.48158 4.06627 3.77447 3.77338Z" fill="#E14D4D"/>
+</svg>

assets/info.com.svg.react

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+<g clipPath="url(#clip0_2864_2623)">
+<path d="M6.99984 12.8334C10.2215 12.8334 12.8332 10.2217 12.8332 7.00008C12.8332 3.77842 10.2215 1.16675 6.99984 1.16675C3.77818 1.16675 1.1665 3.77842 1.1665 7.00008C1.1665 10.2217 3.77818 12.8334 6.99984 12.8334Z" stroke="currentColor" strokeWidth="1.5"  strokeLinecap="round"  strokeLinejoin="round" />
+<path d="M7 9.33333V7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M7 4.66675H7.00583" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</g>
+<defs>
+  <clipPath id="clip0_2864_2623">
+    <rect width="24" height="24" fill="none" />
+  </clipPath>
+</defs>
+</svg>

assets/union.com.svg.react

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="none">
+  <path fillRule="evenodd" clipRule="evenodd" d="M0.225098 6.00001C0.225098 2.9948 2.6613 0.558594 5.66651 0.558594C6.93174 0.558594 8.09595 0.99032 9.02001 1.71449C9.93568 1.00565 11.0852 0.583364 12.3331 0.583364C15.3247 0.583364 17.7498 3.00849 17.7498 6.00003C17.7498 8.99157 15.3247 11.4167 12.3331 11.4167C11.0851 11.4167 9.93566 10.9944 9.01998 10.2855C8.09592 11.0097 6.93172 11.4414 5.66651 11.4414C2.6613 11.4414 0.225098 9.00522 0.225098 6.00001ZM11.0335 6.90196C10.8537 7.97875 10.3579 8.9485 9.64468 9.71255C10.4 10.2606 11.3288 10.5834 12.3331 10.5834C14.8644 10.5834 16.9164 8.53134 16.9164 6.00003C16.9164 3.46873 14.8644 1.4167 12.3331 1.4167C11.3288 1.4167 10.4001 1.73948 9.6447 2.28749C10.358 3.05155 10.8537 4.02131 11.0335 5.0981L11.1005 5.50005H13.6042C13.6117 5.50005 13.6191 5.50021 13.6265 5.50054L12.3962 4.27027C12.201 4.07501 12.201 3.75843 12.3962 3.56316C12.5915 3.3679 12.9081 3.3679 13.1033 3.56316L15.5402 6.00005L13.1033 8.43694C12.9081 8.6322 12.5915 8.6322 12.3962 8.43694C12.201 8.24168 12.201 7.92509 12.3962 7.72983L13.6265 6.49957C13.6191 6.49989 13.6117 6.50005 13.6042 6.50005H11.1005L11.0335 6.90196ZM11.0896 6.4167C11.0993 6.27907 11.1042 6.14013 11.1042 6.00003C11.1042 5.85993 11.0993 5.72099 11.0896 5.58336H5.6118C5.43803 5.58336 5.24978 5.74284 5.24978 6.00003C5.24978 6.25722 5.43803 6.4167 5.6118 6.4167H11.0896ZM14.1038 6.0223L14.126 6.00005L14.1038 5.9778C14.1041 5.98518 14.1042 5.9926 14.1042 6.00005C14.1042 6.00751 14.1041 6.01493 14.1038 6.0223Z" fill="var(--lido-color-text)"/>
+</svg>

modules/blockChain/hooks/useCheckWalletConnect.ts

@@ -4,13 +4,13 @@ import { useConnectWalletModal } from 'modules/wallet/ui/ConnectWalletModal'
 
 export function useCheckWalletConnect() {
   const { isWalletConnected } = useWeb3()
-  const openConnectWalletModal = useConnectWalletModal()
+  const connectWalletModal = useConnectWalletModal()
   const checkWalletConnect = useCallback(() => {
     if (!isWalletConnected) {
-      openConnectWalletModal()
+      connectWalletModal.openModal()
       return false
     }
     return true
-  }, [isWalletConnected, openConnectWalletModal])
+  }, [isWalletConnected, connectWalletModal])
   return checkWalletConnect
 }

modules/blockChain/ui/TxRow/TxRow.tsx

@@ -1,15 +1,17 @@
 import { TransactionSender } from 'modules/blockChain/hooks/useTransactionSender'
-import { TxHint, TxStatus } from './TxRowStyle'
+import { TxStatusBadge } from 'modules/delegation/ui/TxStatusBadge'
+import { TxStatus } from 'modules/blockChain/ui/TxRow/TxRowStyle'
 
-export function TxRow({ label, tx }: { label: string; tx: TransactionSender }) {
+export function TxRow({
+  tx,
+  onClick,
+}: {
+  tx: TransactionSender
+  onClick?: () => void
+}) {
   return (
-    <TxHint>
-      {label}
-      <TxStatus status={tx.status} onClick={tx.open}>
-        {tx.isPending && 'Pending...'}
-        {tx.isSuccess && 'Confirmed (click to open)'}
-        {tx.isFailed && 'Failed (click to see why)'}
-      </TxStatus>
-    </TxHint>
+    <TxStatus>
+      <TxStatusBadge onClick={onClick} status={tx.status} type={tx.tx?.type} />
+    </TxStatus>
   )
 }

modules/blockChain/ui/TxRow/TxRowStyle.ts

@@ -1,31 +1,8 @@
 import styled from 'styled-components'
-import { Text } from '@lidofinance/lido-ui'
-import { TxStatus as TxStatusType } from 'modules/blockChain/types'
 
-export const Hint = styled(Text).attrs({
-  size: 'xxs',
-  weight: 500,
-})`
-  margin-bottom: 10px;
-  opacity: 0.8;
-`
-
-export const TxHint = styled(Hint)`
+export const TxStatus = styled.div`
   display: flex;
-  align-items: flex-end;
-`
-
-type TxStatusProps = {
-  status: TxStatusType
-}
-export const TxStatus = styled.span<TxStatusProps>`
-  margin-left: ${({ theme }) => theme.spaceMap.xs}px;
+  gap: 4px;
+  justify-content: flex-end;
   font-weight: 800;
-  cursor: pointer;
-  color: ${({ status }) =>
-    status === 'pending'
-      ? 'var(--lido-color-primary)'
-      : status === 'success'
-      ? 'var(--lido-color-success)'
-      : 'var(--lido-color-error)'};
 `

modules/blockChain/utils/sendTransactionGnosisWorkaround.ts

@@ -14,7 +14,9 @@ export async function sendTransactionGnosisWorkaround(
 ): Promise<ResultTx> {
   if (!signer) throw Error('signer is required')
 
-  const pendingToastId = ToastInfo(`Confirm transaction in your wallet`, {})
+  const pendingToastId = isMultisig
+    ? ToastInfo(`Confirm transaction in your safe`, {})
+    : ToastInfo(`Confirm transaction in your wallet`, {})
 
   if (isMultisig) {
     const hash: string = await (signer as any).sendUncheckedTransaction(

modules/dashboard/ui/DashboardVote/DashboardVote.tsx

@@ -44,11 +44,14 @@ export function DashboardVote({
   const {
     nayPct,
     yeaPct,
+    yeaNum,
+    nayNum,
     yeaPctOfTotalSupply,
     nayPctOfTotalSupplyFormatted,
     yeaPctOfTotalSupplyFormatted,
     startDate,
     endDate,
+    totalSupply,
   } = getVoteDetailsFormatted({ vote, voteTime })
 
   const handlePass = useCallback(() => {
@@ -89,18 +92,26 @@ export function DashboardVote({
           objectionPhaseTime={objectionPhaseTime}
           status={status}
           isEnded={isEnded}
+          yeaNum={yeaNum}
+          nayNum={nayNum}
+          totalSupply={totalSupply}
           fontSize="xxs"
+          minAcceptQuorum={weiToNum(vote.minAcceptQuorum)}
         />
-
         <VoteBody>
           <VoteTitle>Vote #{voteId}</VoteTitle>
           <VoteDescriptionWrap>
             <VoteDescription metadata={eventStart?.metadata} />
           </VoteDescriptionWrap>
         </VoteBody>
-
         <Footer>
           <VotesBarWrap>
+            <InfoRowFull title="Needed to quorum">
+              {neededToQuorum > 0 && !isEnded
+                ? `${neededToQuorumFormatted}%`
+                : '-'}
+            </InfoRowFull>
+
             <VoteYesNoBar
               yeaPct={yeaPct}
               nayPct={nayPct}
@@ -109,12 +120,6 @@ export function DashboardVote({
               showOnForeground
             />
           </VotesBarWrap>
-
-          <InfoRowFull title="Needed to quorum">
-            {neededToQuorum > 0 && !isEnded
-              ? `${neededToQuorumFormatted}%`
-              : '-'}
-          </InfoRowFull>
         </Footer>
       </Wrap>
     </Link>

modules/dashboard/ui/DashboardVote/DashboardVoteStyle.ts

@@ -32,7 +32,7 @@ export const VoteDescriptionWrap = styled(Text).attrs({
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 `
 

modules/delegation/constants.ts

@@ -1,6 +1,10 @@
+import { BigNumber } from 'ethers'
+
 export const SNAPSHOT_LIDO_SPACE_NAME =
   '0x6c69646f2d736e617073686f742e657468000000000000000000000000000000' // lido-snapshot.eth
 
 export const DELEGATORS_PAGE_SIZE = 10
 export const DELEGATORS_FETCH_SIZE = 50
 export const DELEGATORS_FETCH_TOTAL = 200
+export const DELEGATED_VOTERS_ADDRESSES_LIMIT = 100
+export const ZERO_BN = BigNumber.from(0)

modules/delegation/hooks/useDelegateVoteInfo.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import type {
+  AttemptCastVoteAsDelegateEventObject,
+  CastVoteEventObject,
+} from 'generated/AragonVotingAbi'
+
+interface Props {
+  walletAddress: string | null | undefined
+  eventsVoted: CastVoteEventObject[] | undefined
+  eventsDelegatesVoted: AttemptCastVoteAsDelegateEventObject[] | undefined
+}
+
+type DelegateVoteResult = {
+  delegate: string
+  supports: boolean
+  stake: string
+} | null
+
+export function useDelegateVoteInfo({
+  walletAddress,
+  eventsVoted,
+  eventsDelegatesVoted,
+}: Props): DelegateVoteResult {
+  return useMemo(() => {
+    if (!walletAddress || !eventsVoted || !eventsDelegatesVoted) return null
+
+    const delegateVote = eventsDelegatesVoted.find(event =>
+      event.voters.includes(walletAddress),
+    )
+
+    if (!delegateVote) {
+      return null
+    }
+
+    const vote = eventsVoted.find(
+      event => event.voter.toLowerCase() === walletAddress.toLowerCase(),
+    )
+
+    if (!vote) {
+      return null
+    }
+
+    return {
+      delegate: delegateVote.delegate,
+      supports: vote.supports,
+      stake: vote.stake.toString(),
+    }
+  }, [walletAddress, eventsDelegatesVoted, eventsVoted])
+}

modules/delegation/hooks/useEligibleDelegators.ts

@@ -0,0 +1,141 @@
+import { useWeb3 } from 'modules/blockChain/hooks/useWeb3'
+import { BigNumber } from 'ethers'
+import { ContractVoting } from 'modules/blockChain/contracts'
+import { useLidoSWR } from '@lido-sdk/react'
+import { CHAINS } from '@lido-sdk/constants'
+import { VoterState } from 'modules/votes/types'
+import {
+  DELEGATED_VOTERS_ADDRESSES_LIMIT,
+  ZERO_BN,
+} from 'modules/delegation/constants'
+
+type Args = {
+  voteId: string
+}
+
+export interface EligibleDelegator {
+  address: string
+  votingPower: BigNumber
+  votedByDelegate: boolean
+}
+
+export interface EligibleDelegatorsData {
+  delegatedVotersAddresses: string[]
+  eligibleDelegatedVotingPower: BigNumber
+  delegatedVotersState: VoterState[]
+  eligibleDelegatedVoters: EligibleDelegator[]
+  eligibleDelegatedVotersAddresses: string[]
+}
+
+type ChainId = CHAINS
+
+function processEligibleDelegators(
+  addresses: string[],
+  votingPowers: BigNumber[],
+  voterStates: VoterState[],
+): {
+  eligibleDelegatedVoters: EligibleDelegator[]
+  eligibleDelegatedVotingPower: BigNumber
+} {
+  return addresses.reduce(
+    (acc, address, index) => {
+      const votingPower = votingPowers[index]
+      const voterState = voterStates[index]
+
+      if (
+        votingPower.gt(ZERO_BN) &&
+        voterState !== VoterState.Yea &&
+        voterState !== VoterState.Nay
+      ) {
+        const delegator: EligibleDelegator = {
+          address,
+          votingPower,
+          votedByDelegate:
+            voterState === VoterState.DelegateNay ||
+            voterState === VoterState.DelegateYea,
+        }
+
+        acc.eligibleDelegatedVoters.push(delegator)
+        acc.eligibleDelegatedVotingPower =
+          acc.eligibleDelegatedVotingPower.add(votingPower)
+      }
+
+      return acc
+    },
+    {
+      eligibleDelegatedVoters: [] as EligibleDelegator[],
+      eligibleDelegatedVotingPower: BigNumber.from(0),
+    },
+  )
+}
+
+export function useEligibleDelegators({ voteId }: Args) {
+  const { walletAddress, chainId } = useWeb3()
+  const voting = ContractVoting.useRpc()
+
+  const swrResult = useLidoSWR(
+    walletAddress && voteId
+      ? ['swr:useEligibleDelegators', voteId, chainId, walletAddress]
+      : null,
+    async (
+      _key: string,
+      _voteId: string,
+      _chainId: ChainId,
+      _walletAddress: string,
+    ) => {
+      try {
+        const delegatedVotersAddresses = await voting.getDelegatedVoters(
+          _walletAddress,
+          0,
+          DELEGATED_VOTERS_ADDRESSES_LIMIT,
+        )
+
+        const delegatedVotersVotingPower =
+          await voting.getVotingPowerMultipleAtVote(
+            _voteId,
+            delegatedVotersAddresses,
+          )
+
+        const delegatedVotersState = await voting.getVoterStateMultipleAtVote(
+          _voteId,
+          delegatedVotersAddresses,
+        )
+
+        const { eligibleDelegatedVoters, eligibleDelegatedVotingPower } =
+          processEligibleDelegators(
+            delegatedVotersAddresses,
+            delegatedVotersVotingPower,
+            delegatedVotersState,
+          )
+
+        const eligibleDelegatedVotersAddresses = eligibleDelegatedVoters.map(
+          ({ address }) => address,
+        )
+
+        return {
+          delegatedVotersAddresses,
+          eligibleDelegatedVotingPower,
+          delegatedVotersState,
+          eligibleDelegatedVoters,
+          eligibleDelegatedVotersAddresses,
+        }
+      } catch (error) {
+        console.error('Error in useEligibleDelegators:', error)
+        throw error
+      }
+    },
+  )
+
+  return {
+    data: {
+      delegatedVotersAddresses: swrResult.data?.delegatedVotersAddresses || [],
+      eligibleDelegatedVotingPower:
+        swrResult.data?.eligibleDelegatedVotingPower || BigNumber.from(0),
+      delegatedVotersState: swrResult.data?.delegatedVotersState || [],
+      eligibleDelegatedVoters: swrResult.data?.eligibleDelegatedVoters || [],
+      eligibleDelegatedVotersAddresses:
+        swrResult.data?.eligibleDelegatedVotersAddresses || [],
+    },
+    mutate: swrResult.mutate,
+  }
+}