Funding Request Proposal for Multiple Recipients #2365

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

@@ -54,9 +54,20 @@ interface ModalProps {
  children: ReactNode
  isDark?: boolean
  className?: any
+ customModalSize?: any
+ marginRight?: any
 }
 
-export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, className }: ModalProps) => {
+export const Modal = ({
+ onClose,
+ modalHeight = 'm',
+ children,
+ modalSize,
+ isDark,
+ className,
+ customModalSize,
+ marginRight,
+}: ModalProps) => {
  function onBackgroundClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
  if (e.target === e.currentTarget) {
  onClose()
@@ -68,7 +79,14 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark,
  return (
  <>
  <ModalGlass onClick={onBackgroundClick} />
- <ModalWrap modalMaxSize={modalSize} modalHeight={modalHeight} isDark={isDark} role="modal" className={className}>
+ <ModalWrap
+ modalMaxSize={customModalSize || modalSize}
+ modalHeight={modalHeight}
+ isDark={isDark}
+ role="modal"
+ className={className}
+ marginRight={marginRight}
+ >
  {children}
  </ModalWrap>
  </>
@@ -203,13 +221,15 @@ interface ModalWrapProps {
  modalMaxSize: string
  isDark?: boolean
  modalHeight?: ModalHeight
+ marginRight?: string
 }
 
 export const ModalWrap = styled.section<ModalWrapProps>`
  z-index: ${ZIndex.modal};
  position: absolute;
  inset: 0;
  margin: auto auto;
+ margin-right: ${({ marginRight }) => (marginRight ? `${marginRight}px` : 'auto')};
  display: grid;
  @media only screen and (max-height: 700px) {
  max-height: 100%;
@@ -233,6 +253,8 @@ export const ModalWrap = styled.section<ModalWrapProps>`
  return '904px'
  case 'l':
  return '1240px'
+ default:
+ return `${modalMaxSize}px`
  }
  }};
  height: ${({ modalHeight }) => (modalHeight === 'xl' ? '90vh' : 'min-content')};

packages/ui/src/proposals/constants/regExp.ts

@@ -0,0 +1 @@
+export const CSV_PATTERN = /^([^,:;]+),([^,:;]+)(;\n[^,:;]+,[^,:;]+)*(;\n)?$/

packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx

@@ -24,6 +24,7 @@ import { TextMedium, TokenValue } from '@/common/components/typography'
 import { BN_ZERO } from '@/common/constants'
 import { camelCaseToText } from '@/common/helpers'
 import { useCurrentBlockNumber } from '@/common/hooks/useCurrentBlockNumber'
+import { useKeyring } from '@/common/hooks/useKeyring'
 import { useLocalStorage } from '@/common/hooks/useLocalStorage'
 import { useMachine } from '@/common/hooks/useMachine'
 import { useModal } from '@/common/hooks/useModal'
@@ -87,6 +88,9 @@ export const AddNewProposalModal = () => {
  const schema = useMemo(() => schemaFactory(api), [!api])
 
  const path = useMemo(() => machineStateConverter(state.value), [state.value])
+
+ const keyring = useKeyring()
+
  const form = useForm<AddNewProposalForm>({
  resolver: useYupValidationResolver<AddNewProposalForm>(schema, path),
  mode: 'onChange',
@@ -105,6 +109,7 @@ export const AddNewProposalModal = () => {
  minTriggerBlock: currentBlock
  ? currentBlock.addn(constants?.votingPeriod ?? 0).addn(constants?.gracePeriod ?? 0)
  : BN_ZERO,
+ keyring,
  } as IStakingAccountSchema,
  defaultValues: defaultProposalValues,
  })

packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/FundingRequest.tsx

@@ -1,13 +1,47 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import styled from 'styled-components'
 
 import { SelectAccount } from '@/accounts/components/SelectAccount'
 import { CurrencyName } from '@/app/constants/currency'
-import { InputComponent, TokenInput } from '@/common/components/forms'
+import { ButtonPrimary } from '@/common/components/buttons'
+import {
+ InlineToggleWrap,
+ InputComponent,
+ Label,
+ ToggleCheckbox,
+ TokenInput,
+ InputTextarea,
+} from '@/common/components/forms'
+import { Arrow } from '@/common/components/icons'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TextMedium } from '@/common/components/typography'
+import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
+import { TextMedium, TextSmall, TextInlineSmall } from '@/common/components/typography'
+import { CSV_PATTERN } from '@/proposals/constants/regExp'
+
+import { PreviewAndValidateModal } from './modals/PreviewAndValidate'
+import { ErrorPrompt, Prompt } from './Prompt'
 
 export const FundingRequest = () => {
+ const { watch, setValue, getValues } = useFormContext()
+ const [isPreviewModalShown, setIsPreviewModalShown] = useState(false)
+ const [previewModalData, setPreviewModalData] = useState<string[]>([])
+ const [payMultiple] = watch(['fundingRequest.payMultiple'])
+ const [hasPreviewedInput] = watch(['fundingRequest.hasPreviewedInput'], { 'fundingRequest.hasPreviewedInput': true })
+ const verifyInput = useCallback((input: string) => {
+ setValue('fundingRequest.hasPreviewedInput', false, { shouldValidate: true })
+ setValue('fundingRequest.accountsAndAmounts', input, { shouldValidate: true })
+ }, [])
+ const previewInput = useCallback(() => {
+ const input = getValues('fundingRequest.accountsAndAmounts')
+ if (CSV_PATTERN.test(input)) {
+ const inputSplit = input.split(';\n')
+ setValue('fundingRequest.hasPreviewedInput', true, { shouldValidate: true })
+ setIsPreviewModalShown(true)
+ setPreviewModalData(inputSplit)
+ }
+ }, [])
  return (
  <RowGapBlock gap={24}>
  <Row>
@@ -17,22 +51,96 @@ export const FundingRequest = () => {
  </RowGapBlock>
  </Row>
  <Row>
- <RowGapBlock gap={20}>
- <InputComponent
- label="Amount"
- tight
- units={CurrencyName.integerValue}
- required
- message="Amount must be greater than zero"
- name="fundingRequest.amount"
- >
- <TokenInput id="amount-input" placeholder="0" name="fundingRequest.amount" />
- </InputComponent>
- <InputComponent label="Recipient account" required inputSize="l">
- <SelectAccount name="fundingRequest.account" />
- </InputComponent>
+ <RowGapBlock gap={payMultiple ? 6 : 24}>
+ <Row>
+ <InlineToggleWrap>
+ <Label>Pay multiple</Label>
+ <Tooltip
+ tooltipTitle="Pay multiple"
+ tooltipText="For multiple accounts and amounts, follow this CSV pattern:<br/> 
+ account1, amount1<br/> 
+ account2, amount2<br/> 
+ ...<br/> 
+ account20, amount20"
+ >
+ <TooltipDefault />
+ </Tooltip>
+ </InlineToggleWrap>
+ <ToggleCheckbox falseLabel="No" trueLabel="Yes" name="fundingRequest.payMultiple" />
+ </Row>
+ {payMultiple && (
+ <Row>
+ <Prompt>
+ <TextSmall>
+ For <TextInlineSmall bold>multiple accounts and amounts</TextInlineSmall>, follow this CSV pattern:
+ <br />
+ account1, amount1;
+ <br />
+ account2, amount2;
+ <br />
+ ...
+ <br />
+ account20, amount20
+ </TextSmall>
+ </Prompt>
+ </Row>
+ )}
  </RowGapBlock>
  </Row>
+ <Row>
+ {payMultiple ? (
+ <RowGapBlock gap={12}>
+ <InputComponent
+ label="Destination accounts and transfer amounts"
+ required
+ message={'You can select up to 20 recipients'}
+ name="fundingRequest.accountsAndAmounts"
+ id="accounts-amounts"
+ inputSize="xl"
+ >
+ <InputTextarea
+ id="accounts-amounts"
+ name="fundingRequest.accountsAndAmounts"
+ placeholder="Destination account address and amount"
+ onInput={(event) => verifyInput(event.currentTarget.value)}
+ />
+ </InputComponent>
+ <HiddenCheckBox name="fundingRequest.hasPreviewedInput" checked={hasPreviewedInput} />
+ {!hasPreviewedInput && <ErrorPrompt>Please preview and validate the inputs to proceed</ErrorPrompt>}
+ <ButtonPrimary size="medium" onClick={() => previewInput()}>
+ Preview and Validate <Arrow direction="right" />
+ </ButtonPrimary>
+ </RowGapBlock>
+ ) : (
+ <RowGapBlock gap={20}>
+ <InputComponent
+ label="Amount"
+ tight
+ units={CurrencyName.integerValue}
+ required
+ message="Amount must be greater than zero"
+ name="fundingRequest.amount"
+ >
+ <TokenInput id="amount-input" placeholder="0" name="fundingRequest.amount" />
+ </InputComponent>
+ <InputComponent label="Recipient account" required inputSize="l">
+ <SelectAccount name="fundingRequest.account" />
+ </InputComponent>
+ </RowGapBlock>
+ )}
+ </Row>
+ {isPreviewModalShown && (
+ <PreviewAndValidateModal
+ previewModalData={previewModalData}
+ setIsPreviewModalShown={setIsPreviewModalShown}
+ setValue={setValue}
+ />
+ )}
  </RowGapBlock>
  )
 }
+const HiddenCheckBox = styled.input.attrs({ type: 'checkbox' })`
+ margin-top: -12px;
+ height: 0px;
+ visibility: hidden;
+`

packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/Prompt.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { QuestionIcon } from '@/common/components/icons'
+import { BorderRad, Colors } from '@/common/constants'
+
+export interface PromptProps {
+ children: React.ReactNode
+}
+
+export const Prompt = ({ children }: PromptProps) => {
+ return (
+ <PromptContainer>
+ <IconSection>
+ <PromptQuestion>
+ <QuestionIcon />
+ </PromptQuestion>
+ </IconSection>
+ {children}
+ </PromptContainer>
+ )
+}
+const PromptContainer = styled.div`
+ display: grid;
+ grid-template-columns: 48px 1fr;
+ border-left: 4px solid ${Colors.Blue[200]};
+ color: ${Colors.Black[500]};
+`
+const IconSection = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+`
+const PromptQuestion = styled.div`
+ display: flex;
+ position: relative;
+ justify-content: center;
+ align-items: center;
+ width: 16px;
+ height: 16px;
+ border-radius: ${BorderRad.full};
+ border: 1px solid ${Colors.Black[900]};
+`
+export const ErrorPrompt = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ border-left: 4px solid ${Colors.Red[200]};
+ padding-left: 10.78px;
+ background-color: ${Colors.Red[50]};
+ color: ${Colors.Red[400]};
+ width: 504px;
+ height: 56px;
+ border-radius: 2px;
+ font-weight: 400;
+`