fix

packages/ui/src/app/App.stories.tsx

@@ -629,8 +629,8 @@ export const BuyMembershipTxFailure: Story = {
 
 const fillMembershipFormValidatorAccounts = async (modal: Container, accounts: string[]) => {
   await fillMembershipForm(modal)
-  const validatorChechButton = modal.getAllByText('Yes')[1]
-  await userEvent.click(validatorChechButton)
+  const validatorCheckButton = modal.getAllByText('Yes')[1]
+  await userEvent.click(validatorCheckButton)
   expect(await modal.findByText(/^If your validator account/))
   for (const account of accounts) {
     await selectFromDropdown(modal, /^If your validator account/, account)
@@ -811,8 +811,15 @@ export const InvalidValidatorAccountInput: Story = {
     const modal = withinModal(canvasElement)
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
-
-    await fillMembershipFormValidatorAccounts(modal, ['alice'])
+    await fillMembershipForm(modal)
+    const validatorCheckButton = modal.getAllByText('Yes')[1]
+    await userEvent.click(validatorCheckButton)
+    const validatorAddressInputElement = document.getElementById('select-validatorAccount-input')
+    expect(validatorAddressInputElement).not.toBeNull()
+    await userEvent.paste(
+      validatorAddressInputElement as HTMLElement,
+      '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'
+    )
 
     expect(modal.getByText('This account is neither a validator controller account nor a validator stash account.'))
     const addButton = document.getElementsByClassName('add-button')[0]

packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx

@@ -1,21 +1,20 @@
 import { expect } from '@storybook/jest'
 import { Meta, StoryObj } from '@storybook/react'
 import { userEvent, waitFor, within } from '@storybook/testing-library'
-import React from 'react'
 
 import { Address } from '@/common/types'
 import { GetMembersWithDetailsDocument } from '@/memberships/queries'
 import { member } from '@/mocks/data/members'
 import { joy, selectFromDropdown } from '@/mocks/helpers'
 import { MocksParameters } from '@/mocks/providers'
-import { ValidatorContextProvider } from '@/validators/providers/provider'
 
 import { ValidatorList } from './ValidatorList'
 
 type Args = object
 
 export default {
   title: 'Pages/Validators/ValidatorList',
+  component: ValidatorList,
 
   parameters: {
     mocks: (): MocksParameters => {
@@ -439,12 +438,6 @@ export default {
       }
     },
   },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: (args) => (
-    <ValidatorContextProvider>
-      <ValidatorList />
-    </ValidatorContextProvider>
-  ),
 } satisfies Meta<Args>
 
 type Story = StoryObj<typeof ValidatorList>

packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx

@@ -133,11 +133,7 @@ export const BuyMembershipForm = ({
   const [formHandleMap, setFormHandleMap] = useState('')
   const { isUploading, uploadAvatarAndSubmit } = useUploadAvatarAndSubmit(onSubmit)
   const { data } = useGetMembersCountQuery({ variables: { where: { handle_eq: formHandleMap } } })
-  const { fetchValidators, allValidators, allValidatorsWithCtrlAcc } = useValidators()
-
-  useEffect(() => {
-    fetchValidators(true)
-  }, [])
+  const { allValidators, allValidatorsWithCtrlAcc } = useValidators()
 
   const form = useForm<MemberFormFields>({
     resolver: useYupValidationResolver(CreateMemberSchema),
@@ -160,17 +156,18 @@ export const BuyMembershipForm = ({
   ])
 
   const [validatorAccounts, setValidatorAccounts] = useState<Account[]>([])
+  const validatorAddresses = useMemo(() => {
+    if (!allValidatorsWithCtrlAcc || !allValidators) return
+    return (
+      [...allValidatorsWithCtrlAcc, ...allValidators.map(({ address }) => address)].filter(
+        (element) => !!element
+      ) as string[]
+    ).map(encodeAddress)
+  }, [allValidators, allValidatorsWithCtrlAcc])
+
   const isValidValidatorAccount = useMemo(
-    () =>
-      validatorAccountCandidate &&
-      (
-        allValidatorsWithCtrlAcc
-          ?.concat(allValidators?.map(({ address }) => address))
-          .filter((element) => !!element) as string[]
-      )
-        .map(encodeAddress)
-        .includes(encodeAddress(validatorAccountCandidate.address)),
-    [allValidators, allValidatorsWithCtrlAcc, validatorAccountCandidate]
+    () => validatorAccountCandidate && validatorAddresses?.includes(encodeAddress(validatorAccountCandidate.address)),
+    [allValidators, allValidatorsWithCtrlAcc, validatorAddresses, validatorAccountCandidate]
   )
 
   useEffect(() => {
@@ -303,7 +300,11 @@ export const BuyMembershipForm = ({
                       </TextMedium>
                       <RowInline>
                         <InputComponent id="select-validatorAccount" inputSize="l">
-                          <SelectAccount id="select-validatorAccount" name="validatorAccountCandidate" />
+                          <SelectAccount
+                            id="select-validatorAccount"
+                            name="validatorAccountCandidate"
+                            filter={(account) => !!validatorAddresses?.includes(encodeAddress(account.address))}
+                          />
                         </InputComponent>
                         <ButtonPrimary
                           square

packages/ui/src/validators/hooks/useValidators.ts

@@ -1,5 +1,14 @@
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 
 import { ValidatorsContext } from '../providers/context'
 
-export const useValidators = () => useContext(ValidatorsContext)
+export const useValidators = () => {
+  const { setShouldFetchValidators, allValidators, allValidatorsWithCtrlAcc, validatorsWithMembership } =
+    useContext(ValidatorsContext)
+
+  useEffect(() => {
+    setShouldFetchValidators(true)
+  }, [])
+
+  return { allValidators, allValidatorsWithCtrlAcc, validatorsWithMembership }
+}

packages/ui/src/validators/hooks/useValidatorsList.tsx

@@ -20,11 +20,7 @@ export const useValidatorsList = () => {
   const [isVerified, setIsVerified] = useState<Verification>(null)
   const [isActive, setIsActive] = useState<State>(null)
   const [visibleValidators, setVisibleValidators] = useState<ValidatorWithDetails[]>([])
-  const { fetchValidators, validatorsWithMembership: validators } = useValidators()
-
-  useEffect(() => {
-    fetchValidators(true)
-  }, [])
+  const { validatorsWithMembership: validators } = useValidators()
 
   const validatorRewardPointsHistory = useFirstObservableValue(
     () => api?.query.staking.erasRewardPoints.entries(),

packages/ui/src/validators/providers/context.tsx

@@ -2,4 +2,4 @@ import { createContext } from 'react'
 
 import { UseValidators } from './provider'
 
-export const ValidatorsContext = createContext<UseValidators>({ fetchValidators: () => {} })
+export const ValidatorsContext = createContext<UseValidators>({ setShouldFetchValidators: () => {} })

packages/ui/src/validators/providers/provider.tsx

@@ -17,7 +17,7 @@ interface Props {
 }
 
 export interface UseValidators {
-  fetchValidators: (fetchValidators: boolean) => void
+  setShouldFetchValidators: (fetchValidators: boolean) => void
   allValidators?: {
     address: Address
     commission: number
@@ -28,10 +28,11 @@ export interface UseValidators {
 
 export const ValidatorContextProvider = (props: Props) => {
   const { api } = useApi()
-  const [validatorRelatedPage, fetchValidators] = useState(false)
+
+  const [shouldFetchValidators, setShouldFetchValidators] = useState(false)
 
   const allValidators = useFirstObservableValue(() => {
-    if (!validatorRelatedPage) return undefined
+    if (!shouldFetchValidators) return undefined
     return api?.query.staking.validators.entries().pipe(
       map((entries) =>
         entries.map((entry) => ({
@@ -40,7 +41,7 @@ export const ValidatorContextProvider = (props: Props) => {
         }))
       )
     )
-  }, [api?.isConnected, validatorRelatedPage])
+  }, [api?.isConnected, shouldFetchValidators])
 
   const allValidatorsWithCtrlAcc = useFirstObservableValue(
     () =>
@@ -110,7 +111,7 @@ export const ValidatorContextProvider = (props: Props) => {
   }, [data, allValidators, allValidatorsWithCtrlAcc])
 
   const value = {
-    fetchValidators,
+    setShouldFetchValidators,
     allValidators,
     allValidatorsWithCtrlAcc,
     validatorsWithMembership,