fixup! feat(voting): adjust voting UI

modules/dashboard/ui/DashboardVote/DashboardVote.tsx

@@ -44,11 +44,13 @@ export function DashboardVote({
  const {
  nayPct,
  yeaPct,
+ yeaNum,
  yeaPctOfTotalSupply,
  nayPctOfTotalSupplyFormatted,
  yeaPctOfTotalSupplyFormatted,
  startDate,
  endDate,
+ totalSupply,
  } = getVoteDetailsFormatted({ vote, voteTime })
 
  const handlePass = useCallback(() => {
@@ -89,7 +91,10 @@ export function DashboardVote({
  objectionPhaseTime={objectionPhaseTime}
  status={status}
  isEnded={isEnded}
+ yeaNum={yeaNum}
+ totalSupply={totalSupply}
  fontSize="xxs"
+ minAcceptQuorum={weiToNum(vote.minAcceptQuorum)}
  />
  <VoteBody>
  <VoteTitle>Vote #{voteId}</VoteTitle>
@@ -99,6 +104,12 @@ export function DashboardVote({
  </VoteBody>
  <Footer>
  <VotesBarWrap>
+ <InfoRowFull title="Needed to quorum">
+ {neededToQuorum > 0 && !isEnded
+ ? `${neededToQuorumFormatted}%`
+ : '-'}
+ </InfoRowFull>
+
  <VoteYesNoBar
  yeaPct={yeaPct}
  nayPct={nayPct}
@@ -107,12 +118,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/hooks/useEligibleDelegators.ts

@@ -130,7 +130,7 @@ export function useEligibleDelegators({ voteId }: Args) {
  data: {
  delegatedVotersAddresses: swrResult.data?.delegatedVotersAddresses || [],
  eligibleDelegatedVotingPower:
- swrResult.data?.eligibleDelegatedVotingPower || 0,
+ swrResult.data?.eligibleDelegatedVotingPower || BigNumber.from(0),
  delegatedVotersState: swrResult.data?.delegatedVotersState || [],
  eligibleDelegatedVoters: swrResult.data?.eligibleDelegatedVoters || [],
  eligibleDelegatedVotersAddresses:

modules/shared/ui/Common/Chip/ChipStyle.tsx

@@ -20,7 +20,7 @@ const ChipStatusStyle = {
  `,
  default: css`
  background: #7a8aa01a;
- color: #7a8aa0;
+ color: var(--lido-color-textSecondary); ;
  `,
 }
 

modules/votes/hooks/useVoteTimeCountdown.ts

@@ -18,8 +18,8 @@ export function useVoteTimeCountdown(startDate: number, duration: number) {
  diffFormatted: moment
  .duration(Math.abs(diff), 'seconds')
  // \xa0 is non-breaking space
- .format('HH:mm:ss', {
- trim: 'all',
+ .format('HH: mm : ss', {
+ trim: 'final',
  minValue: 1,
  }),
  }

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

@@ -100,7 +100,6 @@ export function DelegatorsList({
  <DelegatorsListItem key={delegator.address}>
  <AddressWrap>
  <Checkbox
- defaultChecked={checkedItems[delegator.address]}
  checked={checkedItems[delegator.address]}
  onChange={e =>
  dispatch({

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

@@ -11,7 +11,6 @@ import { useEtherscanOpen } from '@lido-sdk/react'
 import type { EtherscanEntities } from '@lido-sdk/helpers'
 
 import { DelegatorsList } from 'modules/votes/ui/VoteActionsModals/DelegatorsList/VoteActionsDelegatorsList'
-import { VoteAsDelegateWrap } from 'modules/votes/ui/VoteActionsModals/SuccessModal/VoteSuccessModalStyle'
 
 import {
  useVoteFormActionsContext,
@@ -123,7 +122,7 @@ export function VoteSuccessModal({
  </ButtonGroup>
 
  {canVoteWithDelegatedPower && (
- <VoteAsDelegateWrap>
+ <>
  <br />
 
  <Text size="xxs">
@@ -138,7 +137,7 @@ export function VoteSuccessModal({
  onSelectedAddressesChange={handleSelectedAddressesChange}
  eventsVoted={eventsVoted}
  />
- </VoteAsDelegateWrap>
+ </>
  )}
  </Modal>
  )

modules/votes/ui/VoteDetails/VoteDetails.tsx

@@ -1,10 +1,10 @@
+import { useMemo } from 'react'
 import { Text } from '@lidofinance/lido-ui'
 import type {
  AttemptCastVoteAsDelegateEventObject,
  CastVoteEventObject,
 } from 'generated/AragonVotingAbi'
 import { VoteScript } from '../VoteScript'
-import { VoteStatusBanner as VoteStatusBannerNew } from 'modules/votes/ui/VoteStatusBannerNew'
 import { VoteYesNoBar } from '../VoteYesNoBar'
 import {
  BlockWrap,
@@ -22,7 +22,7 @@ import { weiToNum } from 'modules/blockChain/utils/parseWei'
 import { getVoteDetailsFormatted } from 'modules/votes/utils/getVoteDetailsFormatted'
 import { VoteQuorumStatus } from '../VoteQuorumStatus'
 import { VoteVotersList } from '../VoteVotersList'
-import { useMemo } from 'react'
+import { VoteProgressBar } from 'modules/votes/ui/VoteProgressBar'
 
 type Props = {
  vote: Vote
@@ -55,7 +55,6 @@ export function VoteDetails({
  yeaNum,
  nayPct,
  yeaPct,
- // yeaPctOfTotalSupply,
  nayPctOfTotalSupplyFormatted,
  yeaPctOfTotalSupplyFormatted,
  startDate,
@@ -102,14 +101,14 @@ export function VoteDetails({
  />
  </BoxVotes>
  </DetailsBoxWrap>
- {votePhase !== VotePhase.Closed && (
- <VoteStatusBannerNew
+ {(votePhase === VotePhase.Main || votePhase === VotePhase.Objection) && (
+ <VoteProgressBar
  startDate={startDate}
  endDate={endDate}
  voteTime={voteTime}
  objectionPhaseTime={objectionPhaseTime}
- votePhase={votePhase}
  isEnded={isEnded}
+ votePhase={votePhase}
  />
  )}
  {eventsVoted && eventsVoted.length > 0 && (

modules/votes/ui/VoteProgressBar/VoteProgressBar.tsx

@@ -110,13 +110,15 @@ export function VoteProgressBar({
  >
  {`Objection ${votePhase === VotePhase.Objection ? 'ends in ' : ''}`}
 
- <b>
- <VoteDetailsCountdown
- startDate={startDate}
- voteTime={voteTime}
- isEndedBeforeTime={isEnded}
- />
- </b>
+ {votePhase === VotePhase.Objection && (
+ <b>
+ <VoteDetailsCountdown
+ startDate={startDate}
+ voteTime={voteTime}
+ isEndedBeforeTime={isEnded}
+ />
+ </b>
+ )}
  </Text>
  <ProgressBar
  progress={objectionPhaseProgress}

modules/votes/ui/VoteStatusBanner/VoteStatusBanner.tsx

@@ -1,9 +1,11 @@
+import { useMemo } from 'react'
 import {
  Wrap,
  BannerText,
  InfoText,
  BadgePassed,
  BadgeFailed,
+ BadgeNoQuorum,
  BadgeOngoing,
 } from './VoteStatusBannerStyle'
 import { FormattedDate } from 'modules/shared/ui/Utils/FormattedDate'
@@ -22,6 +24,10 @@ type Props = {
  isEnded: boolean
  fontSize: VoteStatusFontSize
  status: VoteStatus
+ yeaNum: number
+ nayNum: number
+ totalSupply: number
+ minAcceptQuorum: number
 }
 
 export function VoteStatusBanner({
@@ -32,9 +38,24 @@ export function VoteStatusBanner({
  isEnded,
  fontSize,
  status,
+ yeaNum,
+ nayNum,
+ totalSupply,
+ minAcceptQuorum,
 }: Props) {
  const variant = convertStatusToStyledVariant(status)
 
+ const quorumIsReached = useMemo(() => {
+ if (totalSupply === 0) {
+ return false
+ }
+
+ const yeaQuorum = yeaNum / totalSupply
+ const nayQuorum = nayNum / totalSupply
+
+ return yeaQuorum > minAcceptQuorum || nayQuorum > minAcceptQuorum
+ }, [totalSupply, yeaNum, nayNum, minAcceptQuorum])
+
  const endDateEl = (
  <InfoText variant={variant}>
  <FormattedDate date={endDate} format="DD MMM YYYY, HH:mm" />
@@ -101,7 +122,7 @@ export function VoteStatusBanner({
  </>
  )}
 
- {status === VoteStatus.Rejected && (
+ {status === VoteStatus.Rejected && quorumIsReached && (
  <>
  <BadgeFailed>
  <ClearIconSVG />
@@ -110,6 +131,16 @@ export function VoteStatusBanner({
  {endDateEl}
  </>
  )}
+
+ {status === VoteStatus.Rejected && !quorumIsReached && (
+ <>
+ <BadgeNoQuorum>
+ <ClearIconSVG />
+ </BadgeNoQuorum>
+ <BannerText variant={variant}>No quorum</BannerText>
+ {endDateEl}
+ </>
+ )}
  </Wrap>
  )
 }

modules/votes/ui/VoteStatusBanner/VoteStatusBannerStyle.ts

@@ -48,6 +48,14 @@ export const BadgeFailed = styled(Badge)`
  }
 `
 
+export const BadgeNoQuorum = styled(Badge)`
+ & svg {
+ width: 16px;
+ height: 16px;
+ fill: var(--lido-color-warning);
+ }
+`
+
 export const BadgeOngoing = styled(Badge)`
  color: #fff;
  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;

modules/votes/ui/VoteYesNoBar/VoteYesNoBarStyle.ts

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const VotesTitleWrap = styled.div`
+ margin-top: ${({ theme }) => theme.spaceMap.lg}px;
  margin-bottom: ${({ theme }) => theme.spaceMap.sm}px;
  display: flex;
  justify-content: space-between;

next.config.mjs

@@ -104,20 +104,6 @@ export default {
  },
  ]
  },
- // devServer(configFunction) {
- // return function (proxy, allowedHost) {
- // const config = configFunction(proxy, allowedHost)
- //
- // config.headers = {
- // 'Access-Control-Allow-Origin': '*',
- // 'Access-Control-Allow-Methods': 'GET',
- // 'Access-Control-Allow-Headers':
- // 'X-Requested-With, content-type, Authorization',
- // }
- //
- // return config
- // }
- // },
  serverRuntimeConfig: {
  basePath,
  rpcUrls_1,

package.json

@@ -31,7 +31,6 @@
  "@walletconnect/ethereum-provider": "^2.8.3"
  },
  "dependencies": {
- "tiny-invariant": "^1.1.0",
  "@lido-sdk/constants": "^3.2.1",
  "@lido-sdk/contracts": "^3.0.4",
  "@lido-sdk/fetch": "^2.1.12",
@@ -72,7 +71,9 @@
  "remove-markdown": "^0.5.0",
  "styled-components": "5.3.5",
  "swr": "1.2.2",
+ "tiny-invariant": "^1.1.0",
  "typechain": "8.0.0",
+ "uuid": "^8.3.2",
  "wagmi": "0.12.19"
  },
  "devDependencies": {
@@ -88,6 +89,7 @@
  "@types/react": "17.0.43",
  "@types/react-dom": "17.0.14",
  "@types/styled-components": "5.1.24",
+ "@types/uuid": "^10.0.0",
  "@typescript-eslint/eslint-plugin": "^5.59.11",
  "@typescript-eslint/parser": "^5.59.11",
  "cross-env": "^7.0.3",

yarn.lock

@@ -3332,6 +3332,11 @@
  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
  integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
 
+"@types/uuid@^10.0.0":
+ version "10.0.0"
+ resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-10.0.0.tgz#e9c07fe50da0f53dc24970cca94d619ff03f6f6d"
+ integrity sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==
+
 "@types/ws@^7.4.4":
  version "7.4.7"
  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.7.tgz#f7c390a36f7a0679aa69de2d501319f4f8d9b702"