fixup! feat(voting): adjust voting UI

modules/delegation/providers/DelegationFormContext.tsx

@@ -23,8 +23,9 @@ import { ToastSuccess } from '@lidofinance/lido-ui'
 //
 // Data context
 //
-const DelegationFormDataContext =
- createContext<DelegationFormDataContextValue | null>(null)
+const DelegationFormDataContext = createContext<
+ DelegationFormDataContextValue | undefined
+>(undefined)
 
 export const useDelegationFormData = () => {
  const value = useContext(DelegationFormDataContext)

modules/delegation/ui/DelegationAddressPop/DelegationAddressPop.tsx

@@ -17,8 +17,11 @@ import {
 
 import { calcPopoverPosition } from './calcPopoverPosition'
 
-type Props = React.ComponentProps<typeof IdenticonBadge> & {
+type IdenticonBadgeProps = React.ComponentProps<typeof IdenticonBadge>
+
+type Props = IdenticonBadgeProps & {
  delegateAddress: string | null
+ children: React.ReactNode
 }
 
 export function DelegationAddressPop({ children, ...badgeProps }: Props) {

modules/delegation/ui/DelegationAddressPop/PopStyle.tsx

@@ -18,6 +18,8 @@ const popIn = keyframes`
 `
 
 type PopProps = { isVisible: boolean }
+type IdenticonBadgeProps = React.ComponentProps<typeof IdenticonBadge>
+
 export const Pop = styled.div<PopProps>`
  cursor: default;
  padding: ${({ theme }) => theme.spaceMap.sm}px;
@@ -60,7 +62,7 @@ export const VotedBy = styled.div`
  margin-top: 24px;
 `
 
-export const IdenticonBadgeWrap = styled(IdenticonBadge)`
+export const IdenticonBadgeWrap = styled(IdenticonBadge)<IdenticonBadgeProps>`
  margin: 0;
  width: 100%;
  display: flex;

modules/modal/ModalProvider.tsx

@@ -15,7 +15,6 @@ export type Data = Record<string, any>
 type ModalContextValue = {
  openModal: (modal: Modal, initialData?: Data) => void
  closeModal: () => void
- updateModal: (newData?: Partial<Data>) => void
 }
 
 // https://github.com/CharlesStover/use-force-update
@@ -53,15 +52,10 @@ function ModalProviderRaw({ children }: Props) {
  }, 0)
  }, [setData])
 
- // const updateModal = useCallback((newData: Partial<Data>) => {
- // setData(prevData => ({ ...prevData, ...newData }))
- // }, [])
-
  const context = useMemo(
  () => ({
  openModal,
  closeModal,
- // updateModal,
  }),
  [openModal, closeModal],
  )

modules/votes/hooks/useVoteActionsModals.ts

@@ -3,15 +3,15 @@ import { useVoteActionModal } from 'modules/votes/hooks/useVoteActionModal'
 import { VoteSubmitModal } from 'modules/votes/ui/VoteActionsModals/SubmitModal/VoteSubmitModal'
 import { VoteSuccessModal } from 'modules/votes/ui/VoteActionsModals/SuccessModal/VoteSuccessModal'
 import { useVoteFormActionsContext } from 'modules/votes/providers/VoteFormActions/VoteFormActionsContext'
-import { PopulatedTransaction } from '@ethersproject/contracts'
 
 import { VoteMode } from 'modules/votes/types'
+import { ResultTx } from 'modules/blockChain/types'
 
 type ModalKey = 'submit' | 'success'
 
 type ModalData = {
  mode?: VoteMode
- successTx?: PopulatedTransaction
+ successTx?: ResultTx
 }
 
 export function useVoteActionsModals() {

modules/votes/providers/VoteFormActions/VoteFormActionsContext.tsx

@@ -6,7 +6,6 @@ import React, {
  useState,
 } from 'react'
 import {
- EligibleDelegator,
  EligibleDelegatorsData,
  useEligibleDelegators,
 } from 'modules/delegation/hooks/useEligibleDelegators'
@@ -15,54 +14,68 @@ import { useFormVoteInfo } from 'modules/votes/ui/VoteForm/useFormVoteInfo'
 import { formatBalance } from 'modules/blockChain/utils/formatBalance'
 import { useGovernanceSymbol } from 'modules/tokens/hooks/useGovernanceSymbol'
 
-import { PopulatedTransaction } from '@ethersproject/contracts'
+import { ResultTx } from 'modules/blockChain/types'
 import { VoteMode } from 'modules/votes/types'
-import { BigNumber } from '@ethersproject/bignumber'
+
+import invariant from 'tiny-invariant'
+
 import {
  AttemptCastVoteAsDelegateEventObject,
  CastVoteEventObject,
 } from 'generated/AragonVotingAbi'
+import { BigNumber } from '@ethersproject/bignumber'
+import {
+ FinishHandler,
+ TransactionSender,
+} from 'modules/blockChain/hooks/useTransactionSender'
 
-interface VoteFormActionsContextType {
+export enum VotedAs {
+ delegate = 'delegate',
+ owner = 'owner',
+}
+
+export type VoteFormActionsContextValue = {
  voteId: string
- successTx: PopulatedTransaction | null
- ownVotePower: BigNumber
+ successTx: ResultTx | null
+ setSuccessTx: React.Dispatch<React.SetStateAction<ResultTx | null>>
+ formVoteSubmitData: ReturnType<typeof useFormVoteSubmit>
+ setVoteId: React.Dispatch<React.SetStateAction<string>>
+ ownVotePower: Number
  handleVote: (mode: VoteMode) => Promise<void>
  handleDelegatesVote: (
  mode: VoteMode,
  selectedAddresses: string[],
  ) => Promise<void>
  votedAs: VotedAs | null
  mode: VoteMode | null
- txVote: PopulatedTransaction | null
- txDelegatesVote: PopulatedTransaction | null
- eventsVoted: CastVoteEventObject[]
- eventsDelegatesVoted: AttemptCastVoteAsDelegateEventObject[]
+ txVote: TransactionSender
+ txDelegatesVote: TransactionSender
+ eventsVoted: CastVoteEventObject[] | undefined
+ eventsDelegatesVoted: AttemptCastVoteAsDelegateEventObject[] | undefined
  eligibleDelegatedVotingPower: BigNumber
  delegatedVotersAddresses: string[]
  eligibleDelegatedVoters: EligibleDelegatorsData['eligibleDelegatedVoters']
  eligibleDelegatedVotersAddresses: string[]
- delegatorsVotedThemselves: EligibleDelegator[]
+ delegatorsVotedThemselves: CastVoteEventObject[] | undefined
  governanceSymbol: string | undefined
  votedByDelegate: EligibleDelegatorsData['eligibleDelegatedVoters']
 }
 
-export enum VotedAs {
- delegate = 'delegate',
- owner = 'owner',
-}
-
-const VoteFormActionsContext = createContext<
- VoteFormActionsContextType | undefined
->(undefined)
+const VoteFormActionsContext =
+ createContext<VoteFormActionsContextValue | null>(null)
 
 export const useVoteFormActionsContext = () => {
- return useContext(VoteFormActionsContext)
+ const value = useContext(VoteFormActionsContext)
+ invariant(
+ value,
+ 'useVoteFormActionsContext was used outside the VoteFormActionsContext provider',
+ )
+ return value
 }
 
 export const VoteFormActionsProvider: React.FC = ({ children }) => {
  const [voteId, setVoteId] = useState<string>('')
- const [successTx, setSuccessTx] = useState<PopulatedTransaction | null>(null)
+ const [successTx, setSuccessTx] = useState<ResultTx | null>(null)
  const [votedAs, setVotedAs] = useState<VotedAs | null>(null)
  const [mode, setMode] = useState<VoteMode | null>(null)
 
@@ -75,9 +88,9 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
 
  const { eventsVoted, eventsDelegatesVoted } = formVoteInfoData
 
- const handleFinish = async ({ tx }) => {
+ const handleFinish: FinishHandler = async ({ tx }) => {
  await mutate()
- setSuccessTx(tx)
+ setSuccessTx(tx as unknown as ResultTx)
  }
 
  const formVoteSubmitData = useFormVoteSubmit({
@@ -106,7 +119,7 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
  )
 
  const delegatedVotersAddresses = useMemo(
- () => eligibleDelegatorsData.eligibleDelegatedVoters,
+ () => eligibleDelegatorsData.delegatedVotersAddresses,
  [eligibleDelegatorsData],
  )
 
@@ -124,7 +137,7 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
  )
  }, [delegatedVotersAddresses, eventsVoted, eventsDelegatesVoted])
 
- const ownVotePower = formatBalance(formVoteInfoData.votePowerWei || 0)
+ const ownVotePower = Number(formatBalance(formVoteInfoData.votePowerWei || 0))
 
  const eligibleDelegatedVoters = useMemo(
  () => eligibleDelegatorsData.eligibleDelegatedVoters,
@@ -159,7 +172,7 @@ export const VoteFormActionsProvider: React.FC = ({ children }) => {
  delegatedVotersAddresses,
  eligibleDelegatedVoters,
  eligibleDelegatedVotersAddresses:
- eligibleDelegatorsData.eligibleDelegatedVoters,
+ eligibleDelegatorsData.eligibleDelegatedVotersAddresses,
  delegatorsVotedThemselves,
  governanceSymbol,
  votedByDelegate,

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

@@ -14,6 +14,17 @@ import { AddressPop } from 'modules/shared/ui/Common/AddressPop'
 import { formatBalance } from 'modules/blockChain/utils/formatBalance'
 import { useSimpleReducer } from 'modules/shared/hooks/useSimpleReducer'
 import { BigNumber } from 'ethers'
+import { EligibleDelegator } from 'modules/delegation/hooks/useEligibleDelegators'
+import { CastVoteEventObject } from 'generated/AragonVotingAbi'
+
+interface Props {
+ delegatorsVotedThemselves: CastVoteEventObject[] | undefined
+ governanceSymbol: string | undefined
+ onSelectedAddressesChange: (address: string[]) => void
+ eventsVoted: CastVoteEventObject[] | undefined
+ eligibleDelegatedVoters: EligibleDelegator[]
+ eligibleDelegatedVotingPower: BigNumber
+}
 
 const pluralize = (count: number, noun: string, suffix = 's') =>
  `${count} ${noun}${count !== 1 ? suffix : ''}`
@@ -25,7 +36,7 @@ export function DelegatorsList({
  eligibleDelegatedVotingPower,
  onSelectedAddressesChange,
  eventsVoted,
-}) {
+}: Props) {
  const initialCheckedItems = Object.fromEntries(
  eligibleDelegatedVoters
  .filter(delegator => !delegator.votedByDelegate)
@@ -40,7 +51,7 @@ export function DelegatorsList({
  )
 
  const _eventsVoted = useMemo(() => {
- return eventsVoted?.reduce((acc, event) => {
+ return eventsVoted?.reduce<Record<string, boolean>>((acc, event) => {
  acc[event.voter] = event.supports
  return acc
  }, {})
@@ -119,15 +130,15 @@ export function DelegatorsList({
  </DelegatorsListItem>
  ))}
  </ListWrap>
- {delegatorsVotedThemselves?.length > 0 && (
+ {delegatorsVotedThemselves && delegatorsVotedThemselves.length > 0 && (
  <>
  <VotedByHolderWrap>
  <Text size="xxs" color="secondary">
  Voted by holder
  </Text>
  </VotedByHolderWrap>
  <ListWrap>
- {delegatorsVotedThemselves?.map(voteEvent => (
+ {delegatorsVotedThemselves.map(voteEvent => (
  <DelegatorsListItem key={voteEvent.voter}>
  <AddressPop address={voteEvent.voter}>
  <AddressBadgeWrap>

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

@@ -22,9 +22,9 @@ export function VoteSubmitModal({ data: { mode }, ...modalProps }: ModalProps) {
  governanceSymbol,
  } = useVoteFormActionsContext()
 
- const [selectedDelegatedAddresses, setSelectedDelegatedAddresses] = useState(
- [],
- )
+ const [selectedDelegatedAddresses, setSelectedDelegatedAddresses] = useState<
+ string[]
+ >([])
 
  const handleSelectedAddressesChange = useCallback(addresses => {
  setSelectedDelegatedAddresses(addresses)
@@ -68,7 +68,7 @@ export function VoteSubmitModal({ data: { mode }, ...modalProps }: ModalProps) {
  <TxRow label="Vote transaction" tx={txVote} />
  </>
  )}
- {txDelegatesVote && !txDelegatesVote.isEmpty && (
+ {!txDelegatesVote.isEmpty && (
  <>
  <br />
  <TxRow label="Vote transaction" tx={txDelegatesVote} />

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

@@ -40,9 +40,9 @@ export function VoteSuccessModal({
  ownVotePower,
  } = useVoteFormActionsContext()
 
- const [selectedDelegatedAddresses, setSelectedDelegatedAddresses] = useState(
- [],
- )
+ const [selectedDelegatedAddresses, setSelectedDelegatedAddresses] = useState<
+ string[]
+ >([])
 
  const handleSelectedAddressesChange = useCallback(addresses => {
  setSelectedDelegatedAddresses(addresses)
@@ -64,6 +64,7 @@ export function VoteSuccessModal({
 
  const handleVoteClick = useCallback(
  power => {
+ if (!mode) return
  if (power === 'own') {
  return handleVote(mode)
  }

modules/votes/ui/VoteDetails/VoteDetails.tsx

@@ -33,8 +33,8 @@ type Props = {
  metadata?: string
  isEnded: boolean
  eventsVoted: CastVoteEventObject[] | undefined
- eventsDelegatesVoted: AttemptCastVoteAsDelegateEventObject[]
- votePhase: VotePhase
+ eventsDelegatesVoted: AttemptCastVoteAsDelegateEventObject[] | undefined
+ votePhase: VotePhase | undefined
 }
 
 export function VoteDetails({

modules/votes/ui/VoteForm/useFormVoteInfo.ts

@@ -28,7 +28,7 @@ export function useFormVoteInfo({ voteId }: Args) {
  const rpcUrl = getRpcUrl(chainId)
  const contractVoting = ContractVoting.useRpc()
 
- const { delegatorsData, loading: isDelegatorsLoading } = useDelegators()
+ const { data: delegatorsData, loading: isDelegatorsLoading } = useDelegators()
 
  const delegatorsAddresses = useMemo(
  () => delegatorsData?.list.map(d => d.address) || [],

modules/votes/ui/VoteFormActions/VoteFormActions.tsx

@@ -16,11 +16,11 @@ import { BigNumber } from '@ethersproject/bignumber'
 type Props = {
  canEnact: boolean
  voterState: VoterState
- votePhase: VotePhase
+ votePhase: VotePhase | undefined
  isSubmitting: false | VoteMode
  onEnact: () => void
  voteId: string
- votePowerWei: BigNumber | undefined
+ votePowerWei: BigNumber | null | undefined
 }
 
 export function VoteFormActions({