feat: Public Delegate List

assets/lido.social.com.svg.react

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 16C12.6683 16 16.25 12.4183 16.25 8C16.25 3.58172 12.6683 0 8.25 0C3.83172 0 0.25 3.58172 0.25 8C0.25 12.4183 3.83172 16 8.25 16ZM10.6101 6.94893L8.25313 3.33333L5.89622 6.94889L8.25301 8.29511L10.6101 6.94893ZM8.25313 4.26917L6.61772 6.77792L8.25303 7.71202L9.88855 6.77793L8.25313 4.26917ZM5.51552 7.52807L8.24965 9.08982L8.24976 9.08989L10.9845 7.52804L11.0591 7.6426C11.9012 8.93441 11.7132 10.6262 10.607 11.7101C9.30525 12.9855 7.19475 12.9855 5.89302 11.7101C4.78683 10.6262 4.59876 8.93441 5.44086 7.6426L5.51552 7.52807Z" fill="#7A8AA0"/>
+</svg>

assets/x.social.com.svg.react

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.25 8C0.25 3.58172 3.83172 0 8.25 0C12.6683 0 16.25 3.58172 16.25 8C16.25 12.4183 12.6683 16 8.25 16C3.83172 16 0.25 12.4183 0.25 8ZM12.3692 4H11.046L8.8656 6.4924L6.9804 4H4.25L7.5124 8.266L4.4204 11.8H5.7444L8.1308 9.0732L10.2164 11.8H12.8792L9.4784 7.304L12.3692 4ZM11.3148 11.008H10.5816L5.7952 4.7504H6.582L11.3148 11.008Z" fill="#7A8AA0"/>
+</svg>

modules/blockChain/utils/formatBalance.ts

@@ -5,6 +5,7 @@ const formatter = Intl.NumberFormat('en', {
  notation: 'compact',
  maximumSignificantDigits: 3,
 })
+
 export const formatBalance = (amount: BigNumberish) => {
  return formatter.format(weiToNum(amount))
 }

modules/delegation/constants.ts

@@ -1,9 +1,6 @@
-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 VP_MIN_TO_SHOW = BigNumber.from(10).pow(16)

modules/delegation/hooks/useDelegators.ts

@@ -2,41 +2,53 @@ import { CHAINS } from '@lido-sdk/constants'
 import { useLidoSWR } from '@lido-sdk/react'
 import { ContractVoting } from 'modules/blockChain/contracts'
 import { useWeb3 } from 'modules/blockChain/hooks/useWeb3'
-import {
- DELEGATORS_FETCH_SIZE,
- DELEGATORS_FETCH_TOTAL,
- VP_MIN_TO_SHOW,
-} from '../constants'
+import { DELEGATORS_FETCH_SIZE, DELEGATORS_FETCH_TOTAL } from '../constants'
 import { BigNumber } from 'ethers'
+import { useEnsResolvers } from 'modules/shared/hooks/useEnsResolvers'
 
+type DelegatorData = {
+ address: string
+ balance: BigNumber
+ ensName?: string | null
+}
+
+type DelegatorsData = {
+ nonZeroDelegators: DelegatorData[]
+ totalVotingPower: BigNumber
+ notFetchedDelegatorsCount: number
+}
+
+/*
+ SWR data hook to fetch first N delegators of the current wallet address.
+ Returns up to DELEGATORS_FETCH_TOTAL delegators with their voting power.
+ The list contains only delegators with voting power greater than 0.
+*/
 export function useDelegators() {
  const { walletAddress, chainId } = useWeb3()
  const voting = ContractVoting.useRpc()
- return useLidoSWR(
- walletAddress
-  ? [`swr:useDelegatorsPaginatedList`, chainId, walletAddress]
-   : null,
+ const { lookupAddress } = useEnsResolvers()
+
+ const { data, initialLoading, loading, error } = useLidoSWR<DelegatorsData>(
+ walletAddress ? [`swr:useDelegators`, chainId, walletAddress] : null,
  async (_key: string, _chainId: CHAINS, _walletAddress: string) => {
- const delegatorsCount = (
+ const totalDelegatorsCount = (
  await voting.getDelegatedVotersCount(_walletAddress)
  ).toNumber()
 
- if (delegatorsCount === 0) {
+ if (totalDelegatorsCount === 0) {
  return {
- totalCount: 0,
- fetchedCount: 0,
- wealthyCount: 0,
- list: [] as { address: string; balance: BigNumber }[],
- fetchedValue: 0,
+ nonZeroDelegators: [] as DelegatorData[],
+ totalVotingPower: BigNumber.from(0),
+ notFetchedDelegatorsCount: 0,
  }
  }
 
- const fetchLimit = Math.min(delegatorsCount, DELEGATORS_FETCH_TOTAL)
+ const fetchLimit = Math.min(totalDelegatorsCount, DELEGATORS_FETCH_TOTAL)
  const fetchCount = Math.ceil(fetchLimit / DELEGATORS_FETCH_SIZE)
  const fetchNumbers = Array(fetchCount).fill(0)
 
- const delegators: { address: string; balance: BigNumber }[] = []
- let fetchedValue = BigNumber.from(0)
+ const delegators: DelegatorData[] = []
+ let totalVotingPower = BigNumber.from(0)
 
  await Promise.all(
  fetchNumbers.map(async (_, fetchIndex) => {
@@ -59,23 +71,48 @@ export function useDelegators() {
  address: delegator,
  balance: delegatorsAtPageBalances[index],
  })
- fetchedValue = fetchedValue.add(delegatorsAtPageBalances[index])
+ totalVotingPower = totalVotingPower.add(
+ delegatorsAtPageBalances[index],
+ )
  })
  }),
  )
 
- const fetchedCount = delegators.length
+ const nonZeroDelegators = delegators.filter(delegator =>
+ delegator.balance.gt(0),
+ )
 
- const wealthyDelegators = delegators.filter(delegator =>
- delegator.balance.gt(VP_MIN_TO_SHOW),
+ const nonZeroDelegatorsWithEns = await Promise.all(
+ nonZeroDelegators.map(async delegator => {
+ try {
+ const ensName = await lookupAddress(delegator.address)
+
+ return {
+ ...delegator,
+ ensName,
+ }
+ } catch (err) {
+ return delegator
+ }
+ }),
  )
+
  return {
- totalCount: delegatorsCount,
- fetchedCount,
- wealthyCount: wealthyDelegators.length,
- list: wealthyDelegators,
- fetchedValue,
+ nonZeroDelegators: nonZeroDelegatorsWithEns,
+ totalVotingPower,
+ notFetchedDelegatorsCount: totalDelegatorsCount - delegators.length,
  }
  },
  )
+
+ return {
+ data: {
+ nonZeroDelegators: data?.nonZeroDelegators ?? [],
+ totalVotingPower: data?.totalVotingPower ?? BigNumber.from(0),
+ notFetchedDelegatorsCount: data?.notFetchedDelegatorsCount ?? 0,
+ } as DelegatorsData,
+ initialLoading,
+ loading,
+ error,
+ }
 }

modules/delegation/providers/DelegationFormContext.tsx

@@ -5,6 +5,7 @@ import {
  useContext,
  useCallback,
  useState,
+ useEffect,
 } from 'react'
 import { useGovernanceBalance } from 'modules/tokens/hooks/useGovernanceBalance'
 import { useDelegationInfo } from '../hooks/useDelegationInfo'
@@ -19,6 +20,7 @@ import {
 import { useDelegationFormSubmit } from '../hooks/useDelegationFormSubmit'
 import { useDelegationRevoke } from '../hooks/useDelegationRevoke'
 import { ToastSuccess } from '@lidofinance/lido-ui'
+import { isValidAddress } from 'modules/shared/utils/addressValidation'
 
 //
 // Data context
@@ -116,17 +118,36 @@ const useDelegationFormActions = (
 //
 // Data provider
 //
-export const DelegationFormProvider: FC<{ mode: DelegationFormMode }> = ({
+export type DelegationFormProviderProps = {
+ mode: DelegationFormMode
+ presetDelegateAddress?: string
+}
+
+export const DelegationFormProvider: FC<DelegationFormProviderProps> = ({
  children,
  mode,
+ presetDelegateAddress,
 }) => {
  const networkData = useDelegationFormNetworkData()
 
  const formObject = useForm<DelegationFormInput>({
- defaultValues: { delegateAddress: null },
+ defaultValues: { delegateAddress: '' },
  mode: 'onChange',
  })
 
+ useEffect(() => {
+ const currentValue = formObject.getValues('delegateAddress')
+ if (
+ presetDelegateAddress &&
+ isValidAddress(presetDelegateAddress) &&
+ currentValue?.toLowerCase() !== presetDelegateAddress.toLowerCase()
+ ) {
+ console.log('setting default address', presetDelegateAddress)
+ formObject.setValue('delegateAddress', presetDelegateAddress)
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [presetDelegateAddress])
+
  const {
  isSubmitting,
  txAragonDelegate,