Don't encode the addresses

packages/ui/src/validators/providers/useValidatorsWithDetails.ts

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react'
 import { combineLatest, map, Observable, of, ReplaySubject, share, switchMap, take } from 'rxjs'
 
-import { encodeAddress } from '@/accounts/model/encodeAddress'
 import { useApi } from '@/api/hooks/useApi'
 import { BN_ZERO } from '@/common/constants'
 import { useObservable } from '@/common/hooks/useObservable'
@@ -86,7 +85,6 @@ export const useValidatorsWithDetails = (allValidatorsWithCtrlAcc: Validator[] |
     const eraPayouts$ = api.query.staking.erasValidatorReward.entries()
 
     return combineLatest([eraPoints$, eraPayouts$]).pipe(
-      take(1),
       map(([points, payouts]) => {
         const payoutsMap = new Map(payouts.map(([era, amount]) => [era.args[0].toNumber(), amount.value.toBn()]))
 
@@ -101,18 +99,14 @@ export const useValidatorsWithDetails = (allValidatorsWithCtrlAcc: Validator[] |
           .sort((a, b) => b.era - a.era)
           .slice(1) // Remove the current period
       }),
-      freezeObservable
+      keepFirst
     )
   }, [api?.isConnected, !validatorDetailsOptions])
 
   const activeValidators$ = useMemo(() => {
     if (!validatorDetailsOptions) return
 
-    return api?.query.session.validators().pipe(
-      take(1),
-      map((activeAccs) => activeAccs.map(encodeAddress)),
-      freezeObservable
-    )
+    return api?.query.session.validators().pipe(keepFirst)
   }, [api?.isConnected, !validatorDetailsOptions])
 
   const aggregated = useObservable<AggregateResult>(() => {
@@ -179,9 +173,13 @@ export const useValidatorsWithDetails = (allValidatorsWithCtrlAcc: Validator[] |
 
 const validatorsWithDetailsCache = new Map<string, Observable<ValidatorWithDetails>>()
 
-const freezeObservable: <T>(o: Observable<T>) => Observable<T> = share({
-  connector: () => new ReplaySubject(1),
-  resetOnComplete: false,
-  resetOnError: false,
-  resetOnRefCountZero: false,
-})
+const keepFirst = <T>(o: Observable<T>): Observable<T> =>
+  o.pipe(
+    take(1),
+    share({
+      connector: () => new ReplaySubject(1),
+      resetOnComplete: false,
+      resetOnError: false,
+      resetOnRefCountZero: false,
+    })
+  )

packages/ui/src/validators/providers/utils.ts

@@ -1,3 +1,5 @@
+import { Vec } from '@polkadot/types'
+import { AccountId } from '@polkadot/types/interfaces'
 import BN from 'bn.js'
 import { map, merge, Observable, of, ReplaySubject, scan, share, switchMap, take } from 'rxjs'
 
@@ -23,7 +25,7 @@ export const getValidatorsFilters = ({ isVerified, search = '' }: ValidatorDetai
 }
 
 export const filterValidatorsByIsActive = (validators: ValidatorWithDetails[], isActive: boolean) =>
-  map((activeValidators: string[]) =>
+  map((activeValidators: Vec<AccountId>) =>
     validators.filter(({ stashAccount }) => activeValidators.includes(stashAccount) === isActive)
   )
 
@@ -61,7 +63,7 @@ type EraRewards = {
 
 export const getValidatorInfo = (
   validator: ValidatorWithDetails,
-  activeValidators$: Observable<string[]>,
+  activeValidators$: Observable<Vec<AccountId>>,
   validatorsRewards$: Observable<EraRewards[]>,
   api: Api
 ): Observable<ValidatorWithDetails> => {