diff --git a/packages/ui/src/mocks/data/proposals.ts b/packages/ui/src/mocks/data/proposals.ts index af545621a3..764a99ae04 100644 --- a/packages/ui/src/mocks/data/proposals.ts +++ b/packages/ui/src/mocks/data/proposals.ts @@ -212,6 +212,10 @@ export const proposalsPagesChain = ( titleMaxLength: 40, }, + proposalsDiscussion: { + maxWhiteListSize: 20, + }, + proposalsCodex: { fundingRequestProposalMaxTotalAmount: joy(166_666), fundingRequestProposalMaxAccounts: 2, diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/TriggerAndDiscussionStep.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/TriggerAndDiscussionStep.tsx index 9140dc9761..d85cb49f5c 100644 --- a/packages/ui/src/proposals/modals/AddNewProposal/components/TriggerAndDiscussionStep.tsx +++ b/packages/ui/src/proposals/modals/AddNewProposal/components/TriggerAndDiscussionStep.tsx @@ -2,6 +2,7 @@ import React from 'react' import { useFormContext } from 'react-hook-form' import styled from 'styled-components' +import { useApi } from '@/api/hooks/useApi' import { CloseButton } from '@/common/components/buttons' import { InlineToggleWrap, InputComponent, Label, ToggleCheckbox, InputNumber } from '@/common/components/forms' import { Row } from '@/common/components/Modal' @@ -15,7 +16,9 @@ import { SelectMember } from '@/memberships/components/SelectMember' import { Member } from '@/memberships/types' export const TriggerAndDiscussionStep = () => { + const { api } = useApi() const { watch, setValue } = useFormContext() + const [discussionWhitelist, isDiscussionClosed, trigger, triggerBlock] = watch([ 'triggerAndDiscussion.discussionWhitelist', 'triggerAndDiscussion.isDiscussionClosed', @@ -23,16 +26,15 @@ export const TriggerAndDiscussionStep = () => { 'triggerAndDiscussion.triggerBlock', ]) - const addMemberToWhitelist = (member: Member) => { - setValue('triggerAndDiscussion.discussionWhitelist', [...discussionWhitelist, member], { shouldValidate: true }) - } - const removeMemberFromWhitelist = (member: Member) => { - setValue( - 'triggerAndDiscussion.discussionWhitelist', - discussionWhitelist.filter((whitelistMember: Member) => whitelistMember.id !== member.id), - { shouldValidate: true } - ) - } + const maxWhiteList = api?.consts.proposalsDiscussion.maxWhiteListSize.toNumber() ?? 1 + + const addMemberToWhitelist = (member: Member) => updateWhitelist([...discussionWhitelist, member]) + + const removeMemberFromWhitelist = (member: Member) => + updateWhitelist(discussionWhitelist.filter((m: Member) => m.id !== member.id)) + + const updateWhitelist = (members: Member[]) => + setValue('triggerAndDiscussion.discussionWhitelist', members, { shouldValidate: true }) return ( @@ -93,14 +95,19 @@ export const TriggerAndDiscussionStep = () => { label="Add member to whitelist" required inputSize="l" + disabled={discussionWhitelist.length < maxWhiteList ? false : true} > addMemberToWhitelist(member)} filter={(member) => !discussionWhitelist.find((whitelistMember: Member) => whitelistMember.id === member.id) } + disabled={discussionWhitelist.length < maxWhiteList ? false : true} /> + {discussionWhitelist.length >= maxWhiteList && ( + Maximum whitelist size of {maxWhiteList} members is reached + )} {discussionWhitelist.map((member: Member) => ( @@ -144,3 +151,9 @@ const WhitelistRemoveMember = styled(CloseButton)` height: 16px; color: ${Colors.Black[900]}; ` +const WhitelistMaxinum = styled.div` + background-color: ${Colors.Blue[400]}; + padding: 10px 15px; + border-radius: 3px; + color: white; +`