feat: Public Delegate List

assets/avatar.com.svg.react

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26" cy="26" r="26" fill="black" fill-opacity="0.1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.8818 19.8789C32.8818 23.697 29.8204 26.7585 25.9996 26.7585C22.1801 26.7585 19.1174 23.697 19.1174 19.8789C19.1174 16.0607 22.1801 13.0005 25.9996 13.0005C29.8204 13.0005 32.8818 16.0607 32.8818 19.8789ZM25.9996 39.0005C20.3607 39.0005 15.5996 38.084 15.5996 34.5479C15.5996 31.0106 20.3906 30.1266 25.9996 30.1266C31.6398 30.1266 36.3996 31.0431 36.3996 34.5791C36.3996 38.1165 31.6086 39.0005 25.9996 39.0005Z" fill="#3C4254" fill-opacity="0.28"/>
+</svg>

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/DelegateFromPublicListContext.tsx

@@ -0,0 +1,50 @@
+import { createContext, FC, useCallback, useContext, useState } from 'react'
+import invariant from 'tiny-invariant'
+
+//
+// Data context
+//
+
+type Value = {
+ selectedPublicDelegate: string | undefined
+ onPublicDelegateSelect: (address: string) => () => void
+ onPublicDelegateReset: () => void
+}
+
+const DelegateFromPublicListContext = createContext<Value | null>(null)
+
+export const useDelegateFromPublicList = () => {
+ const value = useContext(DelegateFromPublicListContext)
+ invariant(
+ value,
+ 'useDelegateFromPublicList was used outside the DelegateFromPublicListContext provider',
+ )
+ return value
+}
+
+export const DelegateFromPublicListProvider: FC = ({ children }) => {
+ const [selectedPublicDelegate, setSelectedPublicDelegate] = useState<string>()
+
+ const handleDelegatePick = useCallback(
+ (address: string) => () => {
+ setSelectedPublicDelegate(address)
+ },
+ [],
+ )
+
+ const handleDelegateReset = useCallback(() => {
+ setSelectedPublicDelegate(undefined)
+ }, [])
+
+ return (
+ <DelegateFromPublicListContext.Provider
+ value={{
+ selectedPublicDelegate,
+ onPublicDelegateSelect: handleDelegatePick,
+ onPublicDelegateReset: handleDelegateReset,
+ }}
+ >
+ {children}
+ </DelegateFromPublicListContext.Provider>
+ )
+}

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,8 @@ import {
 import { useDelegationFormSubmit } from '../hooks/useDelegationFormSubmit'
 import { useDelegationRevoke } from '../hooks/useDelegationRevoke'
 import { ToastSuccess } from '@lidofinance/lido-ui'
+import { isValidAddress } from 'modules/shared/utils/addressValidation'
+import { useDelegateFromPublicList } from './DelegateFromPublicListContext'
 
 //
 // Data context
@@ -116,17 +119,39 @@ const useDelegationFormActions = (
 //
 // Data provider
 //
-export const DelegationFormProvider: FC<{ mode: DelegationFormMode }> = ({
+export type DelegationFormProviderProps = {
+ mode: DelegationFormMode
+}
+
+export const DelegationFormProvider: FC<DelegationFormProviderProps> = ({
  children,
  mode,
 }) => {
  const networkData = useDelegationFormNetworkData()
+ const { selectedPublicDelegate, onPublicDelegateReset } =
+ useDelegateFromPublicList()
 
  const formObject = useForm<DelegationFormInput>({
- defaultValues: { delegateAddress: null },
+ defaultValues: { delegateAddress: '' },
  mode: 'onChange',
  })
 
+ useEffect(() => {
+ const currentValue = formObject.getValues('delegateAddress')
+ if (
+ selectedPublicDelegate &&
+ isValidAddress(selectedPublicDelegate) &&
+ currentValue?.toLowerCase() !== selectedPublicDelegate.toLowerCase()
+ ) {
+ formObject.setValue('delegateAddress', selectedPublicDelegate, {
+ shouldValidate: true,
+ })
+ formObject.setFocus('delegateAddress')
+ onPublicDelegateReset()
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedPublicDelegate])
+
  const {
  isSubmitting,
  txAragonDelegate,