4330 create validator profile

packages/ui/.storybook/preview.tsx

@@ -16,6 +16,7 @@ import { TransactionStatusProvider } from '../src/common/providers/transactionSt
 import { MockProvidersDecorator, MockRouterDecorator } from '../src/mocks/providers'
 import { i18next } from '../src/services/i18n'
 import { KeyringContext } from '../src/common/providers/keyring/context'
+import { ValidatorContextProvider } from '../src/validators/providers/provider'
 import { Keyring } from '@polkadot/ui-keyring'
 
 configure({ testIdAttribute: 'id' })
@@ -56,11 +57,13 @@ const ModalDecorator: Decorator = (Story) => (
   <TransactionStatusProvider>
     <ModalContextProvider>
       <OnBoardingProvider>
-        <Story />
-        <GlobalModals />
-        <NotificationsHolder>
-          <TransactionStatus />
-        </NotificationsHolder>
+        <ValidatorContextProvider>
+          <Story />
+          <GlobalModals />
+          <NotificationsHolder>
+            <TransactionStatus />
+          </NotificationsHolder>
+        </ValidatorContextProvider>
       </OnBoardingProvider>
     </ModalContextProvider>
   </TransactionStatusProvider>

packages/ui/src/app/Providers.tsx

@@ -13,6 +13,7 @@ import { OnBoardingProvider } from '@/common/providers/onboarding/provider'
 import { ResponsiveProvider } from '@/common/providers/responsive/provider'
 import { TransactionStatusProvider } from '@/common/providers/transactionStatus/provider'
 import { MembershipContextProvider } from '@/memberships/providers/membership/provider'
+import { ValidatorContextProvider } from '@/validators/providers/provider'
 
 import { BackendProvider } from './providers/backend/provider'
 import { GlobalStyle } from './providers/GlobalStyle'
@@ -31,22 +32,24 @@ export const Providers = ({ children }: Props) => (
             <TransactionStatusProvider>
               <BalancesContextProvider>
                 <MembershipContextProvider>
-                  <HashRouter>
-                    <RouteActions>
-                      <ModalContextProvider>
-                        <BackendProvider>
-                          <OnBoardingProvider>
-                            <ImageReportProvider>
-                              <ResponsiveProvider>
-                                <GlobalStyle />
-                                {children}
-                              </ResponsiveProvider>
-                            </ImageReportProvider>
-                          </OnBoardingProvider>
-                        </BackendProvider>
-                      </ModalContextProvider>
-                    </RouteActions>
-                  </HashRouter>
+                  <ValidatorContextProvider>
+                    <HashRouter>
+                      <RouteActions>
+                        <ModalContextProvider>
+                          <BackendProvider>
+                            <OnBoardingProvider>
+                              <ImageReportProvider>
+                                <ResponsiveProvider>
+                                  <GlobalStyle />
+                                  {children}
+                                </ResponsiveProvider>
+                              </ImageReportProvider>
+                            </OnBoardingProvider>
+                          </BackendProvider>
+                        </ModalContextProvider>
+                      </RouteActions>
+                    </HashRouter>
+                  </ValidatorContextProvider>
                 </MembershipContextProvider>
               </BalancesContextProvider>
             </TransactionStatusProvider>

packages/ui/src/common/components/Modal/Modals.tsx

@@ -17,6 +17,16 @@ export const Row = styled.div`
   height: auto;
 `
 
+export const RowInline = styled.div<{ gap?: number; top?: number }>`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: auto;
+  align-items: center;
+  gap: ${({ gap }) => gap ?? 16}px;
+  margin-top: ${({ top }) => top ?? 0}px;
+`
+
 export const AccountRow = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;

packages/ui/src/common/components/forms/Label.tsx

@@ -4,6 +4,7 @@ import { Colors } from '../../constants'
 import { TooltipContainer } from '../Tooltip'
 
 interface LabelProps {
+  noMargin?: boolean
   isRequired?: boolean
   className?: string
 }
@@ -13,7 +14,7 @@ export const Label = styled.label<LabelProps>`
   align-items: center;
   align-content: center;
   width: fit-content;
-  margin-bottom: 4px;
+  margin-bottom: ${({ noMargin }) => (noMargin ? '0px' : '4px')};
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;

packages/ui/src/common/components/icons/index.ts

@@ -33,3 +33,4 @@ export * from './ApplicationIcon'
 export * from './CouncilMemberIcon'
 export * from './VerifiedMemberIcon'
 export * from './MenuIcon'
+export * from './PlusIcon'

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

@@ -0,0 +1,34 @@
+import { SubmittableExtrinsic } from '@polkadot/api/types'
+import { ISubmittableResult } from '@polkadot/types/types'
+import React from 'react'
+import { ActorRef } from 'xstate'
+
+import { Account } from '@/accounts/types'
+import { TextMedium } from '@/common/components/typography'
+import { SignTransactionModal } from '@/common/modals/SignTransactionModal/SignTransactionModal'
+
+interface SignProps {
+  transaction: SubmittableExtrinsic<'rxjs', ISubmittableResult> | undefined
+  signer: Account
+  service: ActorRef<any>
+}
+
+export const AddStakingAccCandidateModal = ({ transaction, signer, service }: SignProps) => (
+  <SignTransactionModal
+    buttonText="Sign and Bond"
+    transaction={transaction}
+    signer={signer.address}
+    skipQueryNode
+    service={service}
+    useMultiTransaction={{
+      steps: [
+        { title: 'Create Membership' },
+        { title: 'Bind Validator Account' },
+        { title: 'Confirm Validator Account' },
+      ],
+      active: 1,
+    }}
+  >
+    <TextMedium>You are intending to bond your validator account with your membership.</TextMedium>
+  </SignTransactionModal>
+)

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

@@ -1,12 +1,14 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { BalanceOf } from '@polkadot/types/interfaces/runtime'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
+import styled from 'styled-components'
 import * as Yup from 'yup'
 
-import { SelectAccount } from '@/accounts/components/SelectAccount'
+import { SelectAccount, SelectedAccount } from '@/accounts/components/SelectAccount'
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import { accountOrNamed } from '@/accounts/model/accountOrNamed'
+import { encodeAddress } from '@/accounts/model/encodeAddress'
 import { Account } from '@/accounts/types'
 import { TermsRoutes } from '@/app/constants/routes'
 import { ButtonGhost, ButtonPrimary } from '@/common/components/buttons'
@@ -20,27 +22,30 @@ import {
   LabelLink,
   ToggleCheckbox,
 } from '@/common/components/forms'
-import { Arrow } from '@/common/components/icons'
+import { Arrow, CrossIcon, PlusIcon } from '@/common/components/icons'
+import { AlertSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
   ModalFooterGroup,
   ModalHeader,
   Row,
+  RowInline,
   ScrolledModal,
   ScrolledModalBody,
   ScrolledModalContainer,
   TransactionInfoContainer,
 } from '@/common/components/Modal'
 import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
 import { TransactionInfo } from '@/common/components/TransactionInfo'
-import { TextMedium } from '@/common/components/typography'
+import { TextMedium, TextSmall } from '@/common/components/typography'
 import { definedValues } from '@/common/utils'
 import { useYupValidationResolver } from '@/common/utils/validation'
 import { AvatarInput } from '@/memberships/components/AvatarInput'
 import { SocialMediaSelector } from '@/memberships/components/SocialMediaSelector/SocialMediaSelector'
 import { useUploadAvatarAndSubmit } from '@/memberships/hooks/useUploadAvatarAndSubmit'
 import { useGetMembersCountQuery } from '@/memberships/queries'
+import { useValidators } from '@/validators/hooks/useValidators'
 
 import { SelectMember } from '../../components/SelectMember'
 import {
@@ -76,6 +81,7 @@ const CreateMemberSchema = Yup.object().shape({
   ),
   hasTerms: Yup.boolean().required().oneOf([true]),
   isReferred: Yup.boolean(),
+  isValidator: Yup.boolean(),
   referrer: ReferrerSchema,
   externalResources: ExternalResourcesSchema,
 })
@@ -88,6 +94,9 @@ export interface MemberFormFields {
   about: string
   avatarUri: File | string | null
   isReferred?: boolean
+  isValidator?: boolean
+  validatorAccountCandidate?: Account
+  validatorAccounts?: Account[]
   referrer?: Member
   hasTerms?: boolean
   invitor?: Member
@@ -101,6 +110,7 @@ const formDefaultValues = {
   about: '',
   avatarUri: null,
   isReferred: false,
+  isValidator: false,
   referrer: undefined,
   hasTerms: false,
   externalResources: {},
@@ -135,7 +145,30 @@ export const BuyMembershipForm = ({
     },
   })
 
-  const [handle, isReferred, referrer, captchaToken] = form.watch(['handle', 'isReferred', 'referrer', 'captchaToken'])
+  const [handle, isReferred, isValidator, referrer, captchaToken, validatorAccountCandidate] = form.watch([
+    'handle',
+    'isReferred',
+    'isValidator',
+    'referrer',
+    'captchaToken',
+    'validatorAccountCandidate',
+  ])
+
+  const { allValidators, allValidatorsWithCtrlAcc } = useValidators({ skip: isValidator ?? true })
+  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 && validatorAddresses?.includes(encodeAddress(validatorAccountCandidate.address)),
+    [allValidators, allValidatorsWithCtrlAcc, validatorAddresses, validatorAccountCandidate]
+  )
 
   useEffect(() => {
     if (handle) {
@@ -149,10 +182,21 @@ export const BuyMembershipForm = ({
     }
   }, [data?.membershipsConnection.totalCount])
 
-  const isFormValid = !isUploading && form.formState.isValid
+  const isFormValid = !isUploading && form.formState.isValid && (!isValidator || validatorAccounts?.length)
   const isDisabled =
     type === 'onBoarding' && process.env.REACT_APP_CAPTCHA_SITE_KEY ? !captchaToken || !isFormValid : !isFormValid
 
+  const addValidatorAccount = () => {
+    if (validatorAccountCandidate && isValidValidatorAccount) {
+      setValidatorAccounts([...new Set([...validatorAccounts, validatorAccountCandidate])])
+      form?.setValue('validatorAccountCandidate' as keyof MemberFormFields, undefined)
+    }
+  }
+
+  const removeValidatorAccount = (index: number) => {
+    setValidatorAccounts([...validatorAccounts.slice(0, index), ...validatorAccounts.slice(index + 1)])
+  }
+
   return (
     <>
       <ScrolledModalBody>
@@ -234,6 +278,79 @@ export const BuyMembershipForm = ({
 
             <SocialMediaSelector />
 
+            {type === 'general' && (
+              <>
+                <RowInline top={16}>
+                  <Label>I am a validator: </Label>
+                  <ToggleCheckbox trueLabel="Yes" falseLabel="No" name="isValidator" />
+                </RowInline>
+                {isValidator && (
+                  <>
+                    <SelectValidatorAccountWrapper>
+                      <RowInline gap={4}>
+                        <Label noMargin>Add validator controller account or validator stash account</Label>
+                        <Tooltip tooltipText="This is the status which indicates the selected account is actually a validator account.">
+                          <TooltipDefault />
+                        </Tooltip>
+                        <TextSmall dark>*</TextSmall>
+                      </RowInline>
+                      <TextMedium dark>
+                        If your validator account is not in your signer wallet, paste the account address to the field
+                        below:
+                      </TextMedium>
+                      <RowInline>
+                        <InputComponent id="select-validatorAccount" inputSize="l">
+                          <SelectAccount
+                            id="select-validatorAccount"
+                            name="validatorAccountCandidate"
+                            filter={(account) => !!validatorAddresses?.includes(encodeAddress(account.address))}
+                          />
+                        </InputComponent>
+                        <ButtonPrimary
+                          square
+                          size="large"
+                          onClick={addValidatorAccount}
+                          disabled={!isValidValidatorAccount}
+                          className="add-button"
+                        >
+                          <PlusIcon />
+                        </ButtonPrimary>
+                      </RowInline>
+                      {validatorAccountCandidate && !isValidValidatorAccount && (
+                        <RowInline gap={2}>
+                          <TextSmall error>
+                            <InputNotificationIcon>
+                              <AlertSymbol />
+                            </InputNotificationIcon>
+                          </TextSmall>
+                          <TextSmall error>
+                            This account is neither a validator controller account nor a validator stash account.
+                          </TextSmall>
+                        </RowInline>
+                      )}
+                    </SelectValidatorAccountWrapper>
+
+                    {validatorAccounts.map((account, index) => (
+                      <Row>
+                        <RowInline>
+                          <SelectedAccount account={account as Account} key={'selected' + index} />
+                          <ButtonGhost
+                            square
+                            size="large"
+                            onClick={() => {
+                              removeValidatorAccount(index)
+                            }}
+                          >
+                            <CrossIcon />
+                          </ButtonGhost>
+                        </RowInline>
+                      </Row>
+                    ))}
+                  </>
+                )}
+              </>
+            )}
+
             {process.env.REACT_APP_CAPTCHA_SITE_KEY && type === 'onBoarding' && (
               <Row>
                 <HCaptcha
@@ -287,6 +404,10 @@ export const BuyMembershipForm = ({
           <ButtonPrimary
             size="medium"
             onClick={() => {
+              validatorAccounts?.map((account, index) => {
+                form?.register(('validatorAccounts[' + index + ']') as keyof MemberFormFields)
+                form?.setValue(('validatorAccounts[' + index + ']') as keyof MemberFormFields, account)
+              })
               const values = form.getValues()
               uploadAvatarAndSubmit({ ...values, externalResources: { ...definedValues(values.externalResources) } })
             }}
@@ -308,3 +429,25 @@ export const BuyMembershipFormModal = ({ onClose, onSubmit, membershipPrice }: B
     </ScrolledModal>
   )
 }
+
+const SelectValidatorAccountWrapper = styled.div`
+  margin-top: -4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+const InputNotificationIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 12px;
+  height: 12px;
+  color: inherit;
+  padding-right: 2px;
+
+  .blackPart,
+  .primaryPart {
+    fill: currentColor;
+  }
+`