Linter autofix

pioneer/packages/apps-routing/src/joy-proposals.ts

@@ -10,7 +10,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
     },
     text: t<string>('nav.proposals', 'Proposals', { ns: 'apps-routing' }),
     icon: 'tasks',
-    name: 'proposals',
+    name: 'proposals'
     // TODO: useCounter with active proposals count? (could be a nice addition)
   };
 }

pioneer/packages/joy-proposals/src/Proposal/Body.tsx

@@ -54,6 +54,7 @@ function ProposedMember (props: { memberId?: MemberId | number | null }) {
   if (props.memberId === null || props.memberId === undefined) {
     return <>NONE</>;
   }
+
   const memberId: MemberId | number = props.memberId;
 
   const transport = useTransport();
@@ -63,7 +64,7 @@ function ProposedMember (props: { memberId?: MemberId | number | null }) {
   );
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching profile...">
+    <PromiseComponent error={error} loading={loading} message='Fetching profile...'>
       { (member && !member.isEmpty) ? (
         <ProfilePreview
           avatar_uri={ member.avatar_uri.toString() }
@@ -102,7 +103,7 @@ class ParsedParam {
 
 // The methods for parsing params by Proposal type.
 const paramParsers: { [k in ProposalType]: (params: SpecificProposalDetails<k>) => ParsedParam[]} = {
-  Text: content => [
+  Text: (content) => [
     new ParsedParam(
       'Content',
       <ReactMarkdown className='TextProposalContent' source={content.toString()} linkTarget='_blank' />,
@@ -113,7 +114,7 @@ const paramParsers: { [k in ProposalType]: (params: SpecificProposalDetails<k>)
     new ParsedParam('Blake2b256 hash of WASM code', hash, true),
     new ParsedParam('File size', filesize + ' bytes')
   ],
-  SetElectionParameters: params => [
+  SetElectionParameters: (params) => [
     new ParsedParam('Announcing period', params.announcing_period.toString() + ' blocks'),
     new ParsedParam('Voting period', params.voting_period.toString() + ' blocks'),
     new ParsedParam('Revealing period', params.revealing_period.toString() + ' blocks'),
@@ -127,20 +128,20 @@ const paramParsers: { [k in ProposalType]: (params: SpecificProposalDetails<k>)
     new ParsedParam('Amount', formatBalance(amount as Balance)),
     new ParsedParam('Account', <ProposedAddress accountId={account as AccountId} />)
   ],
-  SetLead: params => [
+  SetLead: (params) => [
     new ParsedParam('Member', <ProposedMember memberId={params.unwrapOr([])[0] as MemberId | undefined} />),
     new ParsedParam('Account id', <ProposedAddress accountId={params.unwrapOr([])[1] as AccountId | undefined} />)
   ],
-  SetContentWorkingGroupMintCapacity: capacity => [
+  SetContentWorkingGroupMintCapacity: (capacity) => [
     new ParsedParam('Mint capacity', formatBalance(capacity))
   ],
-  EvictStorageProvider: accountId => [
+  EvictStorageProvider: (accountId) => [
     new ParsedParam('Storage provider account', <ProposedAddress accountId={accountId} />)
   ],
-  SetValidatorCount: count => [
+  SetValidatorCount: (count) => [
     new ParsedParam('Validator count', count.toString())
   ],
-  SetStorageRoleParameters: params => [
+  SetStorageRoleParameters: (params) => [
     new ParsedParam('Min. stake', formatBalance(params.min_stake)),
     // "Min. actors": params.min_actors,
     new ParsedParam('Max. actors', params.max_actors.toString()),
@@ -165,13 +166,16 @@ const paramParsers: { [k in ProposalType]: (params: SpecificProposalDetails<k>)
       application_rationing_policy: rationingPolicy
     } = commitment;
     let HRT = bytesToString(humanReadableText);
+
     try { HRT = JSON.stringify(JSON.parse(HRT), undefined, 4); } catch (e) { /* Do nothing */ }
+
     const formatStake = (stake: Option<StakingPolicy>) => (
       stake.isSome ? stake.unwrap().amount_mode.type + `(${stake.unwrap().amount.toString()})` : 'NONE'
     );
     const formatPeriod = (unstakingPeriod: Option<BlockNumber>) => (
       `${unstakingPeriod.unwrapOr(new BN(0)).toString()} blocks`
-    )
+    );
+
     return [
       new ParsedParam('Working group', workingGroup.type),
       new ParsedParam('Activate at', `${activateAt.type}${activateAtBlock ? `(${activateAtBlock.toString()})` : ''}`),
@@ -331,6 +335,7 @@ const ParamsHeader = styled.h4`
   padding: 0.3rem;
   left: 0.5rem;
 `;
+
 type ProposalParamProps = { fullWidth?: boolean };
 const ProposalParam = ({ fullWidth, children }: React.PropsWithChildren<ProposalParamProps>) => (
   <div style={{ gridColumn: (fullWidth || undefined) && '1/3' }}>
@@ -370,11 +375,12 @@ export default function Body ({
       ? params as RuntimeUpgradeProposalDetails
       : (params as ProposalDetails).asType(type)
   );
+
   return (
     <Card fluid>
       <Card.Content>
         <Card.Header>
-          <Header as="h1">{title}</Header>
+          <Header as='h1'>{title}</Header>
         </Card.Header>
         <StyledProposalDescription>
           <ReactMarkdown source={description} linkTarget='_blank' />
@@ -402,17 +408,17 @@ export default function Body ({
               <SemanticTxButton
                 params={ [proposerId, proposalId] }
                 tx={ 'proposalsEngine.cancelProposal' }
-                onClick={ sendTx => { sendTx(); } }
+                onClick={ (sendTx) => { sendTx(); } }
                 icon
                 color={ 'red' }
                 labelPosition={ 'left' }
               >
-                <Icon name="cancel" inverted />
+                <Icon name='cancel' inverted />
                 Withdraw proposal
               </SemanticTxButton>
             </Message.Content>
           </Message>
-          </>) }
+        </>) }
       </Card.Content>
     </Card>
   );

pioneer/packages/joy-proposals/src/Proposal/ChooseProposalType.tsx

@@ -15,12 +15,12 @@ export default function ChooseProposalType (props: RouteComponentProps) {
   const [category, setCategory] = useState('');
 
   return (
-    <div className="ChooseProposalType">
+    <div className='ChooseProposalType'>
       <PromiseComponent error={error} loading={loading} message={'Fetching proposals\' parameters...'}>
-        <div className="filters">
+        <div className='filters'>
           <Dropdown
-            placeholder="Category"
-            options={Object.values(Categories).map(category => ({ value: category, text: category }))}
+            placeholder='Category'
+            options={Object.values(Categories).map((category) => ({ value: category, text: category }))}
             value={category}
             onChange={(e, data) => setCategory((data.value || '').toString())}
             clearable
@@ -29,7 +29,7 @@ export default function ChooseProposalType (props: RouteComponentProps) {
         </div>
         <Item.Group>
           {proposalTypes
-            .filter(typeInfo => (!category || typeInfo.category === category) && !typeInfo.outdated)
+            .filter((typeInfo) => (!category || typeInfo.category === category) && !typeInfo.outdated)
             .map((typeInfo, idx) => (
               <ProposalTypePreview key={`${typeInfo} - ${idx}`} typeInfo={typeInfo} history={props.history} />
             ))}

pioneer/packages/joy-proposals/src/Proposal/Details.tsx

@@ -57,7 +57,7 @@ const Detail: React.FunctionComponent<DetailProps> = ({ name, value, children })
   <Item>
     <Item.Content>
       <Item.Extra>{ name }:</Item.Extra>
-      { value && <Header as="h4">{value}</Header> }
+      { value && <Header as='h4'>{value}</Header> }
       { children }
     </Item.Content>
   </Item>
@@ -72,9 +72,10 @@ type DetailsProps = {
 export default function Details ({ proposal, extendedStatus, proposerLink = false }: DetailsProps) {
   const { type, createdAt, createdAtBlock, proposer } = proposal;
   const { displayStatus, periodStatus, expiresIn, finalizedAtBlock, executedAtBlock, executionFailReason } = extendedStatus;
+
   return (
     <DetailsContainer>
-      <Detail name="Proposed By">
+      <Detail name='Proposed By'>
         <ProfilePreview
           avatar_uri={proposer.avatar_uri}
           root_account={proposer.root_account}
@@ -83,10 +84,10 @@ export default function Details ({ proposal, extendedStatus, proposerLink = fals
         />
         <Item.Extra>{ `${createdAt.toLocaleString()}` }</Item.Extra>
       </Detail>
-      <Detail name="Proposal type" value={type}>
-        <Item.Extra>{ proposalConsts[type].outdated && <Label size="small">Outdated proposal type</Label> }</Item.Extra>
+      <Detail name='Proposal type' value={type}>
+        <Item.Extra>{ proposalConsts[type].outdated && <Label size='small'>Outdated proposal type</Label> }</Item.Extra>
       </Detail>
-      <Detail name="Stage" value={displayStatus}>
+      <Detail name='Stage' value={displayStatus}>
         <Item.Extra>
           { createdAtBlock && <BlockInfo>Created at block <b>#{ createdAtBlock }</b></BlockInfo> }
           { finalizedAtBlock && <BlockInfo>Finalized at block <b>#{ finalizedAtBlock }</b></BlockInfo> }
@@ -98,13 +99,13 @@ export default function Details ({ proposal, extendedStatus, proposerLink = fals
           ) }
         </Item.Extra>
       </Detail>
-      { (periodStatus !== null) && <Detail name="Substage" value={periodStatus} /> }
+      { (periodStatus !== null) && <Detail name='Substage' value={periodStatus} /> }
       {expiresIn !== null && (
         <Detail
           name={ periodStatus === 'Grace period' ? 'Executes in' : 'Expires in' }
           value={`${expiresIn.toLocaleString('en-US')} blocks`} />
       ) }
-      {executionFailReason && <Detail name="Execution error" value={ executionFailReason } /> }
+      {executionFailReason && <Detail name='Execution error' value={ executionFailReason } /> }
     </DetailsContainer>
   );
 }

pioneer/packages/joy-proposals/src/Proposal/ProposalDetails.tsx

@@ -79,20 +79,26 @@ export function getExtendedStatus (proposal: ParsedProposal, bestNumber: BlockNu
   if (basicStatus === 'Finalized') {
     const { finalizedAt, proposalStatus } = proposal.status.Finalized;
     const decisionStatus: ProposalDecisionStatuses = Object.keys(proposalStatus)[0] as ProposalDecisionStatuses;
+
     displayStatus = decisionStatus;
     finalizedAtBlock = finalizedAt as number;
+
     if (decisionStatus === 'Approved') {
       const approvedStatus: ApprovedProposalStatuses = Object.keys(proposalStatus.Approved)[0] as ApprovedProposalStatuses;
+
       if (approvedStatus === 'PendingExecution') {
         const finalizedAge = best - finalizedAt;
+
         periodStatus = 'Grace period';
         expiresIn = Math.max(gracePeriod - finalizedAge, 0) || null;
       } else {
         // Executed / ExecutionFailed
         displayStatus = approvedStatus;
         executedAtBlock = finalizedAtBlock + gracePeriod;
+
         if (approvedStatus === 'ExecutionFailed') {
           const executionFailedStatus = proposalStatus.Approved.ExecutionFailed as ExecutionFailedStatus;
+
           executionFailReason = Buffer.from(executionFailedStatus.error.toString().replace('0x', ''), 'hex').toString();
         }
       }
@@ -125,12 +131,13 @@ function ProposalDetails ({
   council,
   bestNumber
 }: ProposalDetailsProps) {
-  const iAmCouncilMember = Boolean(iAmMember && council && council.some(seat => seat.member.toString() === myAddress));
+  const iAmCouncilMember = Boolean(iAmMember && council && council.some((seat) => seat.member.toString() === myAddress));
   const iAmProposer = Boolean(iAmMember && myMemberId !== undefined && proposal.proposerId === myMemberId.toNumber());
   const extendedStatus = getExtendedStatus(proposal, bestNumber);
   const isVotingPeriod = extendedStatus.periodStatus === 'Voting period';
+
   return (
-    <div className="Proposal">
+    <div className='Proposal'>
       <Details proposal={proposal} extendedStatus={extendedStatus} proposerLink={ true }/>
       <ProposalDetailsMain>
         <Body

pioneer/packages/joy-proposals/src/Proposal/ProposalPreview.tsx

@@ -26,8 +26,10 @@ export type ProposalPreviewProps = {
   proposal: ParsedProposal;
   bestNumber?: BlockNumber;
 };
+
 export default function ProposalPreview ({ proposal, bestNumber }: ProposalPreviewProps) {
   const extendedStatus = getExtendedStatus(proposal, bestNumber);
+
   return (
     <Card
       fluid
@@ -35,7 +37,7 @@ export default function ProposalPreview ({ proposal, bestNumber }: ProposalPrevi
       <ProposalIdBox>{ `#${proposal.id.toString()}` }</ProposalIdBox>
       <Card.Content>
         <Card.Header>
-          <Header as="h1">{proposal.title}</Header>
+          <Header as='h1'>{proposal.title}</Header>
         </Card.Header>
         <Card.Description>
           <ProposalDesc>

pioneer/packages/joy-proposals/src/Proposal/ProposalPreviewList.tsx

@@ -41,7 +41,7 @@ function ProposalPreviewList ({ bestNumber }: ProposalPreviewListProps) {
     [activeFilter, currentPage]
   );
 
-  const filterOptions = proposalStatusFilters.map(filter => ({
+  const filterOptions = proposalStatusFilters.map((filter) => ({
     text: filter,
     value: filter
   }));
@@ -52,20 +52,20 @@ function ProposalPreviewList ({ bestNumber }: ProposalPreviewListProps) {
   };
 
   return (
-    <Container className="Proposal" fluid>
+    <Container className='Proposal' fluid>
       <FilterContainer>
         <Button primary as={Link} to={`${pathname}/new`}>
-          <Icon name="add" />
+          <Icon name='add' />
           New proposal
         </Button>
         <StyledDropdown
-          label="Proposal state"
+          label='Proposal state'
           options={filterOptions}
           value={activeFilter}
           onChange={_onChangePrefix}
         />
       </FilterContainer>
-      <PromiseComponent error={ error } loading={ loading } message="Fetching proposals...">
+      <PromiseComponent error={ error } loading={ loading } message='Fetching proposals...'>
         { proposalsBatch && (<>
           <PaginationBox>
             { proposalsBatch.totalBatches > 1 && (
@@ -81,16 +81,16 @@ function ProposalPreviewList ({ bestNumber }: ProposalPreviewListProps) {
               />
             ) }
           </PaginationBox>
-           { proposalsBatch.proposals.length
-             ? (
-               <Card.Group>
-                 {proposalsBatch.proposals.map((prop: ParsedProposal, idx: number) => (
-                   <ProposalPreview key={`${prop.title}-${idx}`} proposal={prop} bestNumber={bestNumber} />
-                 ))}
-               </Card.Group>
-             )
-             : `There are currently no ${activeFilter !== 'All' ? activeFilter.toLocaleLowerCase() : 'submitted'} proposals.`
-           }
+          { proposalsBatch.proposals.length
+            ? (
+              <Card.Group>
+                {proposalsBatch.proposals.map((prop: ParsedProposal, idx: number) => (
+                  <ProposalPreview key={`${prop.title}-${idx}`} proposal={prop} bestNumber={bestNumber} />
+                ))}
+              </Card.Group>
+            )
+            : `There are currently no ${activeFilter !== 'All' ? activeFilter.toLocaleLowerCase() : 'submitted'} proposals.`
+          }
         </>) }
       </PromiseComponent>
     </Container>

pioneer/packages/joy-proposals/src/Proposal/ProposalTypePreview.tsx

@@ -62,9 +62,9 @@ type ProposalTypePreviewProps = {
 };
 
 const ProposalTypeDetail = (props: { title: string; value: string }) => (
-  <div className="proposal-detail">
-    <div className="detail-title">{ `${props.title}:` }</div>
-    <div className="detail-value">{ props.value }</div>
+  <div className='proposal-detail'>
+    <div className='detail-title'>{ `${props.title}:` }</div>
+    <div className='detail-value'>{ props.value }</div>
   </div>
 );
 
@@ -90,7 +90,7 @@ export default function ProposalTypePreview (props: ProposalTypePreviewProps) {
   };
 
   return (
-    <Item className="ProposalType">
+    <Item className='ProposalType'>
       {/*
         TODO: We can add it once we have the actual assets
         <Item.Image size="tiny" src={image} />
@@ -98,18 +98,18 @@ export default function ProposalTypePreview (props: ProposalTypePreviewProps) {
       <Item.Content>
         <Item.Header>{_.startCase(type)}</Item.Header>
         <Item.Description>{description}</Item.Description>
-        <div className="proposal-details">
+        <div className='proposal-details'>
           <ProposalTypeDetail
-            title="Stake"
+            title='Stake'
             value={ formatBalance(stake) } />
           <ProposalTypeDetail
-            title="Cancellation fee"
+            title='Cancellation fee'
             value={ cancellationFee ? formatBalance(cancellationFee) : 'NONE' } />
           <ProposalTypeDetail
-            title="Grace period"
+            title='Grace period'
             value={ gracePeriod ? `${gracePeriod} block${gracePeriod > 1 ? 's' : ''}` : 'NONE' } />
           <ProposalTypeDetail
-            title="Voting period"
+            title='Voting period'
             value={ votingPeriod ? `${votingPeriod} block${votingPeriod > 1 ? 's' : ''}` : 'NONE' } />
         </div>
         <QuorumsAndThresholds>
@@ -139,10 +139,10 @@ export default function ProposalTypePreview (props: ProposalTypePreviewProps) {
           ) }
         </QuorumsAndThresholds>
       </Item.Content>
-      <div className="actions">
-        <CreateButton primary size="medium" onClick={handleClick}>
+      <div className='actions'>
+        <CreateButton primary size='medium' onClick={handleClick}>
           Create
-          <Icon name="chevron right" />
+          <Icon name='chevron right' />
         </CreateButton>
       </div>
     </Item>

pioneer/packages/joy-proposals/src/Proposal/Votes.tsx

@@ -24,20 +24,21 @@ export default function Votes ({ proposal: { id, votingResults } }: VotesProps)
     <PromiseComponent
       error={error}
       loading={loading}
-      message="Fetching the votes...">
+      message='Fetching the votes...'>
       { (votes && votes.votes.length > 0)
         ? (
           <>
-            <Header as="h3">
+            <Header as='h3'>
               All Votes: ({votes.votes.length}/{votes.councilMembersLength})
             </Header>
             <Divider />
-            <Table basic="very">
+            <Table basic='very'>
               <Table.Body>
                 {votes.votes.map((proposalVote, idx) => {
                   const { vote, member } = proposalVote;
                   const voteStr = (vote as VoteKind).type.toString() as VoteKindStr;
                   const { icon, textColor } = useVoteStyles(voteStr);
+
                   return (
                     <Table.Row key={`${member.handle}-${idx}`}>
                       <Table.Cell className={textColor}>
@@ -59,7 +60,7 @@ export default function Votes ({ proposal: { id, votingResults } }: VotesProps)
           </>
         )
         : (
-          <Header as="h4">No votes have been submitted!</Header>
+          <Header as='h4'>No votes have been submitted!</Header>
         )
       }
     </PromiseComponent>

pioneer/packages/joy-proposals/src/Proposal/VotingSection.tsx

@@ -32,8 +32,10 @@ type VoteButtonProps = {
   proposalId: ProposalId;
   onSuccess: () => void;
 }
+
 function VoteButton ({ voteKind, proposalId, memberId, onSuccess }: VoteButtonProps) {
   const { icon, color } = useVoteStyles(voteKind);
+
   return (
     <SemanticTxButton
       params={[
@@ -42,7 +44,7 @@ function VoteButton ({ voteKind, proposalId, memberId, onSuccess }: VoteButtonPr
         voteKind
       ]}
       tx={ 'proposalsEngine.vote' }
-      onClick={ sendTx => sendTx() }
+      onClick={ (sendTx) => sendTx() }
       txFailedCb={ () => null }
       txSuccessCb={ onSuccess }
       color={color}
@@ -87,7 +89,7 @@ export default function VotingSection ({
       <Message icon color={color}>
         <Icon name={icon} />
         <Message.Content>
-          You voted <span className="bold">{`"${voteStr}"`}</span>
+          You voted <span className='bold'>{`"${voteStr}"`}</span>
         </Message.Content>
       </Message>
     );
@@ -97,7 +99,7 @@ export default function VotingSection ({
 
   return (
     <>
-      <Header as="h3">Sumbit your vote</Header>
+      <Header as='h3'>Sumbit your vote</Header>
       <Divider />
       <VoteButtons>
         { VoteKinds.map((voteKind) =>

pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPost.tsx

@@ -61,6 +61,7 @@ export default function DiscussionPost ({
     authorId.toNumber() === memberId.toNumber() &&
     editsCount < constraints.maxPostEdits
   );
+
   const onEditSuccess = () => {
     setEditing(false);
     refreshDiscussion();
@@ -98,9 +99,9 @@ export default function DiscussionPost ({
               <CommentAction
                 onClick={() => setEditing(true)}
                 primary
-                size="tiny"
+                size='tiny'
                 icon>
-                <Icon name="pencil" />
+                <Icon name='pencil' />
               </CommentAction>
             </CommentActions>
           ) }

pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPostForm.tsx

@@ -76,7 +76,7 @@ const DiscussionPostFormInner = (props: InnerProps) => {
   };
 
   return (
-    <Form className="ui form JoyForm">
+    <Form className='ui form JoyForm'>
       <LabelledField name='text' {...props}>
         <Field
           component='textarea'
@@ -88,7 +88,7 @@ const DiscussionPostFormInner = (props: InnerProps) => {
       </LabelledField>
       <LabelledField invisibleLabel {...props}>
         <TxButton
-          type="submit"
+          type='submit'
           label={isEditForm ? 'Update' : 'Add Post'}
           isDisabled={isSubmitting || !isValid}
           params={buildTxParams()}
@@ -99,20 +99,20 @@ const DiscussionPostFormInner = (props: InnerProps) => {
         />
         { isEditForm ? (
           <Button
-            type="button"
-            size="large"
+            type='button'
+            size='large'
             disabled={isSubmitting}
-            color="red"
+            color='red'
             onClick={() => onSuccess()}
-            content="Cancel"
+            content='Cancel'
           />
         ) : (
           <Button
-            type="button"
-            size="large"
+            type='button'
+            size='large'
             disabled={isSubmitting}
             onClick={() => resetForm()}
-            content="Clear"
+            content='Clear'
           />
         ) }
       </LabelledField>
@@ -122,8 +122,9 @@ const DiscussionPostFormInner = (props: InnerProps) => {
 
 const DiscussionPostFormOuter = withFormik<OuterProps, FormValues>({
   // Transform outer props into form values
-  mapPropsToValues: props => {
+  mapPropsToValues: (props) => {
     const { post } = props;
+
     return { text: post && post.postId ? post.text : '' };
   },
   validationSchema: ({ constraints: c }: OuterProps) => (Yup.object().shape({
@@ -132,7 +133,7 @@ const DiscussionPostFormOuter = withFormik<OuterProps, FormValues>({
       .required('Post content is required')
       .max(c.maxPostLength, `The content cannot be longer than ${c.maxPostLength} characters`)
   })),
-  handleSubmit: values => {
+  handleSubmit: (values) => {
     // do submitting things
   }
 })(DiscussionPostFormInner);

pioneer/packages/joy-proposals/src/Proposal/discussion/ProposalDiscussion.tsx

@@ -28,7 +28,7 @@ export default function ProposalDiscussion ({
     <PromiseComponent error={error} loading={loading} message={'Fetching discussion posts...'}>
       { discussion && (
         <>
-          <Header as="h3">Discussion ({ discussion.posts.length})</Header>
+          <Header as='h3'>Discussion ({ discussion.posts.length})</Header>
           <Divider />
           { discussion.posts.length ? (
             discussion.posts.map((post, key) => (
@@ -40,7 +40,7 @@ export default function ProposalDiscussion ({
             ))
           )
             : (
-              <Header as="h4" style={{ margin: '1rem 0' }}>Nothing has been posted here yet!</Header>
+              <Header as='h4' style={{ margin: '1rem 0' }}>Nothing has been posted here yet!</Header>
             )
           }
           { memberId && (

pioneer/packages/joy-proposals/src/Proposal/useVoteStyles.tsx

@@ -14,18 +14,21 @@ export default function useVoteStyles (
       textColor = 'text-green';
       break;
     }
+
     case 'Abstain': {
       icon = 'meh';
       color = 'grey';
       textColor = 'text-grey';
       break;
     }
+
     case 'Reject': {
       icon = 'frown';
       color = 'orange';
       textColor = 'text-orange';
       break;
     }
+
     case 'Slash': {
       icon = 'times';
       color = 'red';

pioneer/packages/joy-proposals/src/forms/AddWorkingGroupOpeningForm.tsx

@@ -1,18 +1,14 @@
 import React, { useEffect } from 'react';
 import { getFormErrorLabelsProps, FormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { FormField, InputFormField, TextareaFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { ActivateOpeningAtKey, ActivateOpeningAtDef, StakingAmountLimitModeKeys, IApplicationRationingPolicy, IStakingPolicy } from '@joystream/types/hiring';
@@ -108,6 +104,7 @@ type StakeFieldsProps = Pick<FormInnerProps, 'values' | 'handleChange' | 'setFie
   errorLabelsProps: FormErrorLabelsProps<FormValues>;
   stakeType: 'role' | 'application';
 };
+
 const StakeFields: React.FunctionComponent<StakeFieldsProps> = ({
   values,
   errorLabelsProps,
@@ -116,35 +113,35 @@ const StakeFields: React.FunctionComponent<StakeFieldsProps> = ({
   setFieldValue
 }) => {
   return (
-  <>
-    <FormField label={`${_.startCase(stakeType)} stake` }>
-      <Checkbox
-        toggle
-        onChange={(e, data) => { setFieldValue(`${stakeType}StakeRequired`, data.checked); }}
-        label={ `Require ${stakeType} stake` }
-        checked={ stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired }/>
-    </FormField>
-    { (stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired) && (<>
-      <FormField label="Stake mode">
-        <Dropdown
+    <>
+      <FormField label={`${_.startCase(stakeType)} stake` }>
+        <Checkbox
+          toggle
+          onChange={(e, data) => { setFieldValue(`${stakeType}StakeRequired`, data.checked); }}
+          label={ `Require ${stakeType} stake` }
+          checked={ stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired }/>
+      </FormField>
+      { (stakeType === 'role' ? values.roleStakeRequired : values.applicationStakeRequired) && (<>
+        <FormField label='Stake mode'>
+          <Dropdown
+            onChange={handleChange}
+            name={ `${stakeType}StakeMode` }
+            selection
+            options={[StakingAmountLimitModeKeys.Exact, StakingAmountLimitModeKeys.AtLeast].map((mode) => ({ text: mode, value: mode }))}
+            value={ stakeType === 'role' ? values.roleStakeMode : values.applicationStakeMode }
+          />
+        </FormField>
+        <InputFormField
+          label='Stake value'
+          unit={formatBalance.getDefaults().unit}
           onChange={handleChange}
-          name={ `${stakeType}StakeMode` }
-          selection
-          options={[StakingAmountLimitModeKeys.Exact, StakingAmountLimitModeKeys.AtLeast].map(mode => ({ text: mode, value: mode }))}
-          value={ stakeType === 'role' ? values.roleStakeMode : values.applicationStakeMode }
+          name={ `${stakeType}StakeValue` }
+          error={ stakeType === 'role' ? errorLabelsProps.roleStakeValue : errorLabelsProps.applicationStakeValue}
+          value={ stakeType === 'role' ? values.roleStakeValue : values.applicationStakeValue}
+          placeholder={'ie. 100'}
         />
-      </FormField>
-      <InputFormField
-        label="Stake value"
-        unit={formatBalance.getDefaults().unit}
-        onChange={handleChange}
-        name={ `${stakeType}StakeValue` }
-        error={ stakeType === 'role' ? errorLabelsProps.roleStakeValue : errorLabelsProps.applicationStakeValue}
-        value={ stakeType === 'role' ? values.roleStakeValue : values.applicationStakeValue}
-        placeholder={'ie. 100'}
-      />
-    </>) }
-  </>
+      </>) }
+    </>
   );
 };
 
@@ -152,32 +149,41 @@ const valuesToAddOpeningParams = (values: FormValues): SimplifiedTypeInterface<I
   const commitment: SimplifiedTypeInterface<IWorkingGroupOpeningPolicyCommitment> = {
     max_review_period_length: parseInt(values.maxReviewPeriodLength)
   };
+
   if (parseInt(values.terminateRoleUnstakingPeriod) > 0) {
     commitment.terminate_role_stake_unstaking_period = parseInt(values.terminateRoleUnstakingPeriod);
   }
+
   if (parseInt(values.leaveRoleUnstakingPeriod) > 0) {
     commitment.exit_role_stake_unstaking_period = parseInt(values.leaveRoleUnstakingPeriod);
   }
+
   if (values.applicationsLimited) {
     const rationingPolicy: SimplifiedTypeInterface<IApplicationRationingPolicy> = {
       max_active_applicants: parseInt(values.maxApplications)
     };
+
     commitment.application_rationing_policy = rationingPolicy;
   }
+
   if (values.applicationStakeRequired) {
     const applicationStakingPolicy: SimplifiedTypeInterface<IStakingPolicy> = {
       amount: parseInt(values.applicationStakeValue),
       amount_mode: values.applicationStakeMode
     };
+
     commitment.application_staking_policy = applicationStakingPolicy;
   }
+
   if (values.roleStakeRequired) {
     const roleStakingPolicy: SimplifiedTypeInterface<IStakingPolicy> = {
       amount: parseInt(values.roleStakeValue),
       amount_mode: values.roleStakeMode
     };
+
     commitment.role_staking_policy = roleStakingPolicy;
   }
+
   return {
     activate_at: { [values.activateAt]: values.activateAt === 'ExactBlock' ? parseInt(values.activateAtBlock) : null },
     commitment: commitment,
@@ -186,8 +192,9 @@ const valuesToAddOpeningParams = (values: FormValues): SimplifiedTypeInterface<I
   };
 };
 
-const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = props => {
+const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, setFieldValue, myMemberId, myMembership } = props;
+
   useEffect(() => {
     if (myMembership && !touched.humanReadableText) {
       setFieldValue(
@@ -201,8 +208,8 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createAddWorkingGroupLeaderOpeningProposal"
-      proposalType="AddWorkingGroupLeaderOpening"
+      txMethod='createAddWorkingGroupLeaderOpeningProposal'
+      proposalType='AddWorkingGroupLeaderOpening'
       submitParams={[
         myMemberId,
         values.title,
@@ -211,15 +218,15 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
         valuesToAddOpeningParams(values)
       ]}
     >
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Row>
           <Grid.Column>
-            <FormField label="Activate opening at">
+            <FormField label='Activate opening at'>
               <Dropdown
                 onChange={handleChange}
-                name="activateAt"
+                name='activateAt'
                 selection
-                options={Object.keys(ActivateOpeningAtDef).map(wgKey => ({ text: wgKey, value: wgKey }))}
+                options={Object.keys(ActivateOpeningAtDef).map((wgKey) => ({ text: wgKey, value: wgKey }))}
                 value={values.activateAt}
               />
             </FormField>
@@ -228,7 +235,7 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
             { values.activateAt === 'ExactBlock' && (
               <InputFormField
                 onChange={handleChange}
-                name="activateAtBlock"
+                name='activateAtBlock'
                 error={errorLabelsProps.activateAtBlock}
                 value={values.activateAtBlock}
                 placeholder={'Provide the block number'}
@@ -243,35 +250,35 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
           but no applicants will be able to apply yet) until current block number will equal the specified number.
         </Message>
       ) }
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Row>
           <Grid.Column>
             <InputFormField
-              label="Max. review period"
+              label='Max. review period'
               onChange={handleChange}
-              name="maxReviewPeriodLength"
+              name='maxReviewPeriodLength'
               error={errorLabelsProps.maxReviewPeriodLength}
               value={values.maxReviewPeriodLength}
               placeholder={'ie. 72000'}
-              unit="blocks"
+              unit='blocks'
             />
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Row>
           <Grid.Column>
-            <FormField label="Applications limit">
+            <FormField label='Applications limit'>
               <Checkbox
                 toggle
                 onChange={(e, data) => { setFieldValue('applicationsLimited', data.checked); }}
-                label="Limit applications"
+                label='Limit applications'
                 checked={values.applicationsLimited}/>
             </FormField>
             { values.applicationsLimited && (
               <InputFormField
                 onChange={handleChange}
-                name="maxApplications"
+                name='maxApplications'
                 error={errorLabelsProps.maxApplications}
                 value={values.maxApplications}
                 placeholder={'Max. number of applications'}
@@ -280,27 +287,27 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <Grid columns="2" stackable style={{ marginBottom: 0 }}>
+      <Grid columns='2' stackable style={{ marginBottom: 0 }}>
         <Grid.Row>
           <Grid.Column>
-            <StakeFields stakeType="application" {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
+            <StakeFields stakeType='application' {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
           </Grid.Column>
           <Grid.Column>
-            <StakeFields stakeType="role" {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
+            <StakeFields stakeType='role' {...{ errorLabelsProps, values, handleChange, setFieldValue }}/>
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <Grid columns="2" stackable style={{ marginBottom: 0 }}>
+      <Grid columns='2' stackable style={{ marginBottom: 0 }}>
         <Grid.Row>
           <Grid.Column>
             <InputFormField
               onChange={handleChange}
-              name="terminateRoleUnstakingPeriod"
+              name='terminateRoleUnstakingPeriod'
               error={errorLabelsProps.terminateRoleUnstakingPeriod}
               value={values.terminateRoleUnstakingPeriod}
               label={'Terminate role unstaking period'}
               placeholder={'ie. 14400'}
-              unit="blocks"
+              unit='blocks'
               help={
                 'In case leader role or application is terminated - this will be the unstaking period for the role stake (in blocks).'
               }
@@ -309,12 +316,12 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
           <Grid.Column>
             <InputFormField
               onChange={handleChange}
-              name="leaveRoleUnstakingPeriod"
+              name='leaveRoleUnstakingPeriod'
               error={errorLabelsProps.leaveRoleUnstakingPeriod}
               value={values.leaveRoleUnstakingPeriod}
               label={'Leave role unstaking period'}
               placeholder={'ie. 14400'}
-              unit="blocks"
+              unit='blocks'
               help={
                 'In case leader leaves/exits his role - this will be the unstaking period for his role stake (in blocks). ' +
                 'It also applies when user is withdrawing an active leader application.'
@@ -324,11 +331,11 @@ const AddWorkingGroupOpeningForm: React.FunctionComponent<FormInnerProps> = prop
         </Grid.Row>
       </Grid>
       <TextareaFormField
-        label="Opening schema (human_readable_text)"
-        help="JSON schema that describes some characteristics of the opening presented in the UI (headers, content, application form etc.)"
+        label='Opening schema (human_readable_text)'
+        help='JSON schema that describes some characteristics of the opening presented in the UI (headers, content, application form etc.)'
         onChange={handleChange}
-        name="humanReadableText"
-        placeholder="Paste the JSON schema here..."
+        name='humanReadableText'
+        placeholder='Paste the JSON schema here...'
         error={errorLabelsProps.humanReadableText}
         value={values.humanReadableText}
         rows={20}

pioneer/packages/joy-proposals/src/forms/BeginReviewLeaderApplicationsForm.tsx

@@ -1,17 +1,13 @@
 import React from 'react';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import FormField from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { Dropdown, Message } from 'semantic-ui-react';
@@ -36,7 +32,7 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps> = props => {
+const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, values, myMemberId, errors, touched } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const transport = useTransport();
@@ -47,8 +43,9 @@ const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps>
   );
   const openingsOptions = openings
     // Map to options
-    .map(od => {
+    .map((od) => {
       const hrt = od.hiringOpening.parse_human_readable_text_with_fallback();
+
       return {
         text: `${od.id.toString()}: ${hrt.headline} (${hrt.job.title})`,
         value: od.id.toString()
@@ -58,8 +55,8 @@ const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps>
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createBeginReviewWorkingGroupLeaderApplicationsProposal"
-      proposalType="BeginReviewWorkingGroupLeaderApplication"
+      txMethod='createBeginReviewWorkingGroupLeaderApplicationsProposal'
+      proposalType='BeginReviewWorkingGroupLeaderApplication'
       disabled={!openingsOptions.length}
       submitParams={[
         myMemberId,
@@ -70,7 +67,7 @@ const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps>
         values.workingGroup
       ]}
     >
-      <PromiseComponent error={openingsError} loading={openingsLoading} message="Fetching openings...">
+      <PromiseComponent error={openingsError} loading={openingsLoading} message='Fetching openings...'>
         { !openingsOptions.length
           ? (
             <Message error visible>
@@ -83,7 +80,7 @@ const BeginReviewLeadeApplicationsForm: React.FunctionComponent<FormInnerProps>
           )
           : (
             <FormField
-              label="Working Group Opening"
+              label='Working Group Opening'
               error={errorLabelsProps.openingId}
               showErrorMsg>
               <Dropdown

pioneer/packages/joy-proposals/src/forms/DecreaseWorkingGroupLeadStakeForm.tsx

@@ -1,18 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { Grid } from 'semantic-ui-react';
@@ -35,7 +31,7 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const DecreaseWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = props => {
+const DecreaseWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, myMemberId, setFieldError } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
@@ -52,8 +48,8 @@ const DecreaseWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps>
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createDecreaseWorkingGroupLeaderStakeProposal"
-      proposalType="DecreaseWorkingGroupLeaderStake"
+      txMethod='createDecreaseWorkingGroupLeaderStakeProposal'
+      proposalType='DecreaseWorkingGroupLeaderStake'
       leadRequired={true}
       leadStakeRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
@@ -68,12 +64,12 @@ const DecreaseWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps>
       ]}
     >
       { (lead && lead.stake) && (
-        <Grid columns="4" doubling stackable verticalAlign="bottom">
+        <Grid columns='4' doubling stackable verticalAlign='bottom'>
           <Grid.Column>
             <InputFormField
-              label="Amount to decrease"
+              label='Amount to decrease'
               onChange={handleChange}
-              name="amount"
+              name='amount'
               error={errorLabelsProps.amount}
               value={values.amount}
               unit={formatBalance.getDefaults().unit}

pioneer/packages/joy-proposals/src/forms/FileDropdown.tsx

@@ -73,6 +73,7 @@ const innerSpanStyle = (): React.CSSProperties => {
 // https://developer.mozilla.org/en-US/docs/Web/API/Blob/text
 const parseFileAsUtf8 = async (file: any): Promise<string> => {
   const text = await file.text();
+
   return text;
 };
 
@@ -109,16 +110,19 @@ type FileDropdownProps<FormValuesT> = {
 export default function FileDropdown<ValuesT = {}> (props: FileDropdownProps<ValuesT>) {
   const [parsing, setParsing] = useState(false);
   const { error, name, setFieldValue, setFieldTouched, acceptedFormats, defaultText, interpretAs } = props;
+
   return (
     <Dropzone
-      onDropAccepted={async acceptedFiles => {
+      onDropAccepted={async (acceptedFiles) => {
         setParsing(true);
         let contents;
+
         if (interpretAs === 'utf-8') {
           contents = await parseFileAsUtf8(acceptedFiles[0]);
         } else {
           contents = await parseFileAsBinary(acceptedFiles[0]);
         }
+
         setFieldValue(name, contents, true);
         setFieldTouched(name, true);
         setParsing(false);
@@ -128,17 +132,18 @@ export default function FileDropdown<ValuesT = {}> (props: FileDropdownProps<Val
     >
       {({ getRootProps, getInputProps, acceptedFiles, rejectedFiles, isDragActive }) => {
         const status = determineStatus(acceptedFiles, rejectedFiles, error, isDragActive, parsing);
+
         return (
           <section>
             <div {...getRootProps({ style: dropdownDivStyle(status) })}>
               <input {...getInputProps()} />
               {
                 <span style={innerSpanStyle()}>
-                  <Icon name="cloud upload" size="huge" style={dropdownIconStyle()} />
+                  <Icon name='cloud upload' size='huge' style={dropdownIconStyle()} />
                   <p>
                     {status === Status.Parsing && (
                       <>
-                        <Loader style={{ marginRight: '0.5em' }} size="small" inline active /> Uploading...
+                        <Loader style={{ marginRight: '0.5em' }} size='small' inline active /> Uploading...
                       </>
                     )}
                     {status === Status.Rejected && (

pioneer/packages/joy-proposals/src/forms/FillWorkingGroupLeaderOpeningForm.tsx

@@ -1,17 +1,13 @@
 import React from 'react';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { FormField, RewardPolicyFields } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { Dropdown, DropdownItemProps, Header, Checkbox, Message } from 'semantic-ui-react';
@@ -72,7 +68,7 @@ const valuesToFillOpeningParams = (values: FormValues): SimplifiedTypeInterface<
   }
 );
 
-const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps> = props => {
+const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, setFieldValue, values, myMemberId, errors, touched } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const transport = useTransport();
@@ -83,8 +79,9 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
   );
   const openingsOptions: DropdownItemProps[] = openings
     // Map to options
-    .map(od => {
+    .map((od) => {
       const hrt = od.hiringOpening.parse_human_readable_text_with_fallback();
+
       return {
         text: `${od.id.toString()}: ${hrt.headline} (${hrt.job.title})`,
         value: od.id.toString()
@@ -98,7 +95,7 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
     [values.workingGroup, values.openingId]
   );
   const applicationsOptions = activeApplications
-    .map(a => {
+    .map((a) => {
       return {
         text: `${a.wgApplicationId}: ${a.member.handle}`,
         image: a.member.avatar_uri.toString() ? { avatar: true, src: a.member.avatar_uri.toString() } : undefined,
@@ -112,8 +109,8 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createFillWorkingGroupLeaderOpeningProposal"
-      proposalType="FillWorkingGroupLeaderOpening"
+      txMethod='createFillWorkingGroupLeaderOpeningProposal'
+      proposalType='FillWorkingGroupLeaderOpening'
       disabled={!openingsOptions.length || !applicationsOptions.length}
       submitParams={[
         myMemberId,
@@ -123,7 +120,7 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
         valuesToFillOpeningParams(values)
       ]}
     >
-      <PromiseComponent error={openingsError} loading={openingsLoading} message="Fetching openings...">
+      <PromiseComponent error={openingsError} loading={openingsLoading} message='Fetching openings...'>
         { !openingsOptions.length
           ? (
             <Message error visible>
@@ -136,11 +133,12 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
           )
           : (
             <FormField
-              label="Working Group Opening"
+              label='Working Group Opening'
               error={errorLabelsProps.openingId}>
               <Dropdown
                 onChange={(...args) => {
                   setFieldValue('successfulApplicants', []);
+
                   // "as any" assert is required due to some invalid typing of Formik's "handleChange" function (it takes 2 args, not 1)
                   return (handleChange as any)(...args);
                 }}
@@ -155,7 +153,7 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
         }
       </PromiseComponent>
       { values.openingId && (
-        <PromiseComponent error={applError} loading={applLoading} message="Fetching applications...">
+        <PromiseComponent error={applError} loading={applLoading} message='Fetching applications...'>
           { !applicationsOptions.length
             ? (
               <Message error visible>
@@ -169,23 +167,23 @@ const FillWorkingGroupLeaderOpeningForm: React.FunctionComponent<FormInnerProps>
             : (
               <>
                 <FormField
-                  label="Successful applicant"
+                  label='Successful applicant'
                   error={errorLabelsProps.successfulApplicant}>
                   <Dropdown
-                    placeholder="Select successful applicant"
+                    placeholder='Select successful applicant'
                     fluid
                     selection
                     options={applicationsOptions}
                     value={values.successfulApplicant}
                     onChange={handleChange}
-                    name="successfulApplicant"/>
+                    name='successfulApplicant'/>
                 </FormField>
                 {values.successfulApplicant && (<>
-                  <Header as="h3">Selected applicant:</Header>
+                  <Header as='h3'>Selected applicant:</Header>
                   <ApplicationsDetails applications={
-                    [activeApplications.find(a => a.wgApplicationId.toString() === values.successfulApplicant)!]
+                    [activeApplications.find((a) => a.wgApplicationId.toString() === values.successfulApplicant)!]
                   }/>
-                  <Header as="h3">Reward policy:</Header>
+                  <Header as='h3'>Reward policy:</Header>
                   <FormField>
                     <Checkbox
                       toggle

pioneer/packages/joy-proposals/src/forms/FormContainer.tsx

@@ -10,6 +10,7 @@ export function withFormContainer<MyFormProps, FormValues> (formikProps: any) {
           props.setFieldTouched(data.name);
         }
       };
+
       const handleChange = (e: React.ChangeEvent<HTMLInputElement>, data: any): void => {
         if (data && data.name) {
           props.setFieldValue(data.name, data.value);

pioneer/packages/joy-proposals/src/forms/FormFields.tsx

@@ -23,6 +23,7 @@ type InputFormFieldProps = Omit<FormInputProps, 'error'> & {
 export function InputFormField (props: InputFormFieldProps) {
   const { unit } = props;
   const fieldProps = { ...props, label: undefined, error: undefined };
+
   return (
     <FormField {...props} showErrorMsg={true}>
       <Form.Input
@@ -42,6 +43,7 @@ type TextareaFormFieldProps = Omit<FormTextAreaProps, 'error'> & {
 
 export function TextareaFormField (props: TextareaFormFieldProps) {
   const fieldProps = { ...props, label: undefined, error: undefined };
+
   return (
     <FormField {...props} showErrorMsg={true}>
       <Form.TextArea {...fieldProps}/>
@@ -62,6 +64,7 @@ const StyledFormField = styled(Form.Field)`
 
 export function FormField (props: React.PropsWithChildren<FormFieldProps>) {
   const { error, showErrorMsg = false, label, help, children } = props;
+
   return (
     <StyledFormField error={!!error}>
       { (label && help)
@@ -84,6 +87,7 @@ type RewardPolicyFieldsProps<ValuesT extends ReawrdPolicyFieldsType> =
   Pick<FormikProps<ValuesT>, 'values' | 'handleChange' | 'setFieldValue'> & {
     errorLabelsProps: FormErrorLabelsProps<ValuesT>;
   };
+
 export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
   values,
   errorLabelsProps,
@@ -93,7 +97,7 @@ export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
   return (
     <>
       <InputFormField
-        label="Amount per payout"
+        label='Amount per payout'
         unit={formatBalance.getDefaults().unit}
         onChange={handleChange}
         name={'rewardAmount'}
@@ -102,7 +106,7 @@ export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
         placeholder={'ie. 100'}
       />
       <InputFormField
-        label="Next payment at block"
+        label='Next payment at block'
         onChange={handleChange}
         name={'rewardNextBlock'}
         error={errorLabelsProps.rewardNextBlock}
@@ -117,7 +121,7 @@ export function RewardPolicyFields<ValuesT extends ReawrdPolicyFieldsType> ({
       </FormField>
       { values.rewardRecurring && (
         <InputFormField
-          label="Reward interval"
+          label='Reward interval'
           onChange={handleChange}
           name={'rewardInterval'}
           error={errorLabelsProps.rewardInterval}

pioneer/packages/joy-proposals/src/forms/GenericProposalForm.tsx

@@ -104,7 +104,7 @@ const StyledGenericProposalForm = styled.div`
 
 // Generic proposal form with basic structure, "Title" and "Rationale" fields
 // Other fields can be passed as children
-export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps> = props => {
+export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps> = (props) => {
   const {
     handleChange,
     handleSubmit,
@@ -139,6 +139,7 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
       if (isValid) {
         afterSubmit();
       }
+
       setAfterSubmit(null);
       setSubmitting(false);
     }
@@ -149,9 +150,11 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
   useEffect(() => {
     if (!isValidating && formContainerRef.current !== null) {
       const [errorField] = formContainerRef.current.getElementsByClassName('error field');
+
       if (errorField) {
         errorField.scrollIntoView({ behavior: 'smooth' });
         const [errorInput] = errorField.querySelectorAll('input,textarea');
+
         if (errorInput) {
           (errorInput as (HTMLInputElement | HTMLTextAreaElement)).focus();
         }
@@ -173,13 +176,16 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
     if (!history) return;
     // Determine proposal id
     let createdProposalId: number | null = null;
+
     for (const e of txResult.events) {
       const event = e.get('event') as Event | undefined;
+
       if (event !== undefined && event.method === 'ProposalCreated') {
         createdProposalId = (event.data[1] as ProposalId).toNumber();
         break;
       }
     }
+
     setSubmitting(false);
     history.push(`/proposals/${createdProposalId}`);
   };
@@ -192,57 +198,57 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
   return (
     <StyledGenericProposalForm ref={formContainerRef}>
       <Form
-        className="proposal-form"
+        className='proposal-form'
         onSubmit={txMethod
           ? () => { /* Do nothing. Tx button uses custom submit handler - "onTxButtonClick" */ }
           : handleSubmit
         }>
         <InputFormField
-          label="Title"
-          help="The title of your proposal"
+          label='Title'
+          help='The title of your proposal'
           onChange={handleChange}
-          name="title"
-          placeholder="Title for your awesome proposal..."
+          name='title'
+          placeholder='Title for your awesome proposal...'
           error={errorLabelsProps.title}
           value={values.title}
         />
         <TextareaFormField
-          label="Rationale"
-          help="The rationale behind your proposal"
+          label='Rationale'
+          help='The rationale behind your proposal'
           onChange={handleChange}
-          name="rationale"
-          placeholder="This proposal is awesome because..."
+          name='rationale'
+          placeholder='This proposal is awesome because...'
           error={errorLabelsProps.rationale}
           value={values.rationale}
         />
         {children}
         <Message warning visible>
           <Message.Content>
-            <Icon name="warning circle" />
+            <Icon name='warning circle' />
             Required stake: <b>{ formatBalance(requiredStake) }</b>
           </Message.Content>
         </Message>
-        <div className="form-buttons">
+        <div className='form-buttons'>
           {txMethod ? (
             <TxButton
-              type="button" // Tx button uses custom submit handler - "onTxButtonClick"
-              label="Submit proposal"
+              type='button' // Tx button uses custom submit handler - "onTxButtonClick"
+              label='Submit proposal'
               isDisabled={disabled || isSubmitting}
-              params={(submitParams || []).map(p => (p === '{STAKE}' ? requiredStake : p))}
+              params={(submitParams || []).map((p) => (p === '{STAKE}' ? requiredStake : p))}
               tx={`proposalsCodex.${txMethod}`}
               txFailedCb={onTxFailed}
               txSuccessCb={onTxSuccess}
               onClick={onTxButtonClick} // This replaces standard submit
             />
           ) : (
-            <Button type="submit" color="blue" loading={isSubmitting}>
-              <Icon name="paper plane" />
+            <Button type='submit' color='blue' loading={isSubmitting}>
+              <Icon name='paper plane' />
               Submit
             </Button>
           )}
 
-          <Button type="button" color="grey" onClick={handleReset}>
-            <Icon name="times" />
+          <Button type='button' color='grey' onClick={handleReset}>
+            <Icon name='times' />
             Clear
           </Button>
         </div>

pioneer/packages/joy-proposals/src/forms/GenericWorkingGroupProposalForm.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultValues,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import { FormField } from './FormFields';
 import { ProposalType } from '@polkadot/joy-utils/types/proposals';
 import { WorkingGroupKey, WorkingGroupDef } from '@joystream/types/common';
@@ -45,7 +43,7 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 export type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerProps> = props => {
+export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const {
     handleChange,
     errors,
@@ -72,17 +70,18 @@ export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerP
   const isDisabled = disabled || leadMissing || stakeMissing || rewardMissing || Boolean(leadRes.error);
 
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
+
   return (
     <GenericProposalForm {...props} disabled={isDisabled}>
       <FormField
         error={errorLabelsProps.workingGroup}
-        label="Working group"
+        label='Working group'
       >
         <Dropdown
-          name="workingGroup"
-          placeholder="Select the working group"
+          name='workingGroup'
+          placeholder='Select the working group'
           selection
-          options={Object.keys(WorkingGroupDef).map(wgKey => ({ text: wgKey + ' Working Group', value: wgKey }))}
+          options={Object.keys(WorkingGroupDef).map((wgKey) => ({ text: wgKey + ' Working Group', value: wgKey }))}
           value={values.workingGroup}
           onChange={ handleChange }
         />

pioneer/packages/joy-proposals/src/forms/LabelWithHelp.tsx

@@ -5,6 +5,7 @@ type LabelWithHelpProps = { text: string; help: string };
 
 export default function LabelWithHelp (props: LabelWithHelpProps) {
   const [open, setOpen] = useState(false);
+
   return (
     <label
       style={{ position: 'relative', cursor: 'pointer', padding: '0.25em 0' }}
@@ -15,10 +16,10 @@ export default function LabelWithHelp (props: LabelWithHelpProps) {
       <span style={{ position: 'absolute', display: 'inline-flex', flexWrap: 'wrap', marginTop: '-0.25em' }}>
         <Icon
           style={{ margin: '0.25em 0.1em 0.5em 0.25em' }}
-          name="help circle"
-          color="grey"/>
-        <Transition animation="fade" visible={open} duration={500}>
-          <Label basic style={{ minWidth: '150px' }} color="grey" content={props.help}/>
+          name='help circle'
+          color='grey'/>
+        <Transition animation='fade' visible={open} duration={500}>
+          <Label basic style={{ minWidth: '150px' }} color='grey' content={props.help}/>
         </Transition>
       </span>
     </label>

pioneer/packages/joy-proposals/src/forms/MintCapacityForm.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import * as Yup from 'yup';
 import { getFormErrorLabelsProps } from './errorHandling';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
@@ -38,9 +36,10 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const MintCapacityForm: React.FunctionComponent<FormInnerProps> = props => {
+const MintCapacityForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, mintCapacityGroup, values, txMethod, initialData, proposalType } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
+
   return (
     <GenericProposalForm
       {...props}
@@ -51,7 +50,7 @@ const MintCapacityForm: React.FunctionComponent<FormInnerProps> = props => {
       <InputFormField
         error={errorLabelsProps.capacity}
         onChange={handleChange}
-        name="capacity"
+        name='capacity'
         placeholder={ (initialData && initialData.capacity) }
         label={`${mintCapacityGroup} Mint Capacity`}
         help={`The new mint capacity you propse for ${mintCapacityGroup}`}

pioneer/packages/joy-proposals/src/forms/RuntimeUpgradeForm.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import { Form } from 'semantic-ui-react';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { withFormContainer } from './FormContainer';
 import FileDropdown from './FileDropdown';
@@ -30,22 +28,23 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const RuntimeUpgradeForm: React.FunctionComponent<FormInnerProps> = props => {
+const RuntimeUpgradeForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { errors, setFieldValue, setFieldTouched, values, touched } = props;
+
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createRuntimeUpgradeProposal"
-      proposalType="RuntimeUpgrade"
+      txMethod='createRuntimeUpgradeProposal'
+      proposalType='RuntimeUpgrade'
       submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', values.WASM]}
     >
       <Form.Field>
         <FileDropdown<FormValues>
           setFieldValue={setFieldValue}
           setFieldTouched={setFieldTouched}
-          defaultText="Drag-n-drop WASM bytecode of a runtime upgrade (*.wasm)"
-          acceptedFormats=".wasm"
-          name="WASM"
+          defaultText='Drag-n-drop WASM bytecode of a runtime upgrade (*.wasm)'
+          acceptedFormats='.wasm'
+          name='WASM'
           error={touched.WASM ? errors.WASM : undefined}
           interpretAs='binary'
         />

pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupLeadForm.tsx

@@ -2,16 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { Dropdown, Label, Loader, Message, Icon, DropdownItemProps, DropdownOnSearchChangeData, DropdownProps } from 'semantic-ui-react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { FormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
@@ -61,13 +59,15 @@ function filterMembers (options: DropdownItemProps[], query: string) {
   if (query.length < MEMBERS_QUERY_MIN_LENGTH) {
     return [MEMBERS_NONE_OPTION];
   }
+
   const regexp = new RegExp(_.escapeRegExp(query));
+
   return options.filter((opt) => regexp.test((opt.text || '').toString()));
 }
 
 type MemberWithId = { id: number; profile: Membership };
 
-const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   // State
@@ -84,6 +84,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
     () => transport.contentWorkingGroup.currentLead(),
     null
   );
+
   // Generate members options array on load
   useEffect(() => {
     if (members.length) {
@@ -96,11 +97,11 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
   }, [membersSearchQuery]);
 
   return (
-    <PromiseComponent error={clError} loading={clLoading} message="Fetching current lead...">
+    <PromiseComponent error={clError} loading={clLoading} message='Fetching current lead...'>
       <GenericProposalForm
         {...props}
-        txMethod="createSetLeadProposal"
-        proposalType="SetLead"
+        txMethod='createSetLeadProposal'
+        proposalType='SetLead'
         submitParams={[
           props.myMemberId,
           values.title,
@@ -116,7 +117,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
         ) : (<>
           <FormField
             error={errorLabelsProps.workingGroupLead}
-            label="New Content Working Group Lead"
+            label='New Content Working Group Lead'
             help={
               'The member you propose to set as a new Content Working Group Lead. ' +
               'Start typing handle or use "id:[ID]" query. ' +
@@ -140,7 +141,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
               onSearchChange={ (e: React.SyntheticEvent, data: DropdownOnSearchChangeData) => {
                 setMembersSearchQuery(data.searchQuery);
               } }
-              name="workingGroupLead"
+              name='workingGroupLead'
               placeholder={ 'Start typing member handle or "id:[ID]" query...' }
               fluid
               selection
@@ -149,7 +150,9 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
                 (e: React.ChangeEvent<any>, data: DropdownProps) => {
                   // Fix TypeScript issue
                   const originalHandler = handleChange as (e: React.ChangeEvent<any>, data: DropdownProps) => void;
+
                   originalHandler(e, data);
+
                   if (!data.value) {
                     setMembersSearchQuery('');
                   }
@@ -161,7 +164,7 @@ const SetContentWorkingGroupsLeadForm: React.FunctionComponent<FormInnerProps> =
           </FormField>
           <Message info active={1}>
             <Message.Content>
-              <Icon name="info circle"/>
+              <Icon name='info circle'/>
               Current Content Working Group lead: <b>{ (currentLead && currentLead.profile.handle) || 'NONE' }</b>
             </Message.Content>
           </Message>

pioneer/packages/joy-proposals/src/forms/SetContentWorkingGroupMintCapForm.tsx

@@ -9,11 +9,11 @@ const ContentWorkingGroupMintCapForm = (props: RouteComponentProps) => {
   const [mintCapacity, error, loading] = usePromise<number>(() => transport.contentWorkingGroup.currentMintCap(), 0);
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching current mint capacity...">
+    <PromiseComponent error={error} loading={loading} message='Fetching current mint capacity...'>
       <MintCapacityForm
-        mintCapacityGroup="Content Working Group"
-        txMethod="createSetContentWorkingGroupMintCapacityProposal"
-        proposalType="SetContentWorkingGroupMintCapacity"
+        mintCapacityGroup='Content Working Group'
+        txMethod='createSetContentWorkingGroupMintCapacityProposal'
+        proposalType='SetContentWorkingGroupMintCapacity'
         initialData={{ capacity: mintCapacity.toString() }}
         {...props} />
     </PromiseComponent>

pioneer/packages/joy-proposals/src/forms/SetCouncilParamsForm.tsx

@@ -2,16 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import { Divider, Form } from 'semantic-ui-react';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
@@ -62,13 +60,14 @@ function createElectionParameters (values: FormValues): SimplifiedTypeInterface<
   };
 }
 
-const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, setFieldValue, setFieldError } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [placeholders, setPlaceholders] = useState<{ [k in keyof FormValues]: string }>(defaultValues);
 
   const transport = useTransport();
   const [councilParams, error, loading] = usePromise<IElectionParameters | null>(() => transport.council.electionParameters(), null);
+
   useEffect(() => {
     if (councilParams) {
       const fetchedPlaceholders = { ...placeholders };
@@ -82,8 +81,10 @@ const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
         'candidacy_limit',
         'council_size'
       ] as const;
-      fieldsToPopulate.forEach(field => {
+
+      fieldsToPopulate.forEach((field) => {
         const camelCaseField = _.camelCase(field) as keyof FormValues;
+
         setFieldValue(camelCaseField, councilParams[field].toString());
         fetchedPlaceholders[camelCaseField] = councilParams[field].toString();
       });
@@ -97,49 +98,49 @@ const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
   }
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching current parameters...">
+    <PromiseComponent error={error} loading={loading} message='Fetching current parameters...'>
       <GenericProposalForm
         {...props}
-        txMethod="createSetElectionParametersProposal"
-        proposalType="SetElectionParameters"
+        txMethod='createSetElectionParametersProposal'
+        proposalType='SetElectionParameters'
         submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', createElectionParameters(values)]}
       >
         <Divider horizontal>Voting </Divider>
-        <Form.Group widths="equal" style={{ marginBottom: '8rem' }}>
+        <Form.Group widths='equal' style={{ marginBottom: '8rem' }}>
           <InputFormField
-            label="Announcing Period"
-            help="Announcing period in blocks"
+            label='Announcing Period'
+            help='Announcing period in blocks'
             onChange={handleChange}
-            name="announcingPeriod"
+            name='announcingPeriod'
             error={errorLabelsProps.announcingPeriod}
             value={values.announcingPeriod}
             placeholder={ placeholders.announcingPeriod }
           />
           <InputFormField
-            label="Voting Period"
-            help="Voting period in blocks"
+            label='Voting Period'
+            help='Voting period in blocks'
             onChange={handleChange}
-            name="votingPeriod"
+            name='votingPeriod'
             error={errorLabelsProps.votingPeriod}
             value={values.votingPeriod}
             placeholder={ placeholders.votingPeriod }
           />
           <InputFormField
-            label="Revealing Period"
-            help="Revealing period in blocks"
+            label='Revealing Period'
+            help='Revealing period in blocks'
             fluid
             onChange={handleChange}
-            name="revealingPeriod"
+            name='revealingPeriod'
             error={errorLabelsProps.revealingPeriod}
             value={values.revealingPeriod}
             placeholder={ placeholders.revealingPeriod }
           />
           <InputFormField
-            label="Minimum Voting Stake"
-            help="The minimum voting stake"
+            label='Minimum Voting Stake'
+            help='The minimum voting stake'
             fluid
             onChange={handleChange}
-            name="minVotingStake"
+            name='minVotingStake'
             error={errorLabelsProps.minVotingStake}
             value={values.minVotingStake}
             placeholder={ placeholders.minVotingStake }
@@ -147,44 +148,44 @@ const SetCouncilParamsForm: React.FunctionComponent<FormInnerProps> = props => {
           />
         </Form.Group>
         <Divider horizontal>Council</Divider>
-        <Form.Group widths="equal" style={{ marginBottom: '8rem' }}>
+        <Form.Group widths='equal' style={{ marginBottom: '8rem' }}>
           <InputFormField
-            label="Minimum Council Stake"
-            help="The minimum council stake"
+            label='Minimum Council Stake'
+            help='The minimum council stake'
             fluid
             onChange={handleChange}
-            name="minCouncilStake"
+            name='minCouncilStake'
             error={errorLabelsProps.minCouncilStake}
             value={values.minCouncilStake}
             placeholder={ placeholders.minCouncilStake }
             disabled
           />
           <InputFormField
-            label="New Term Duration"
-            help="Duration of the new term in blocks"
+            label='New Term Duration'
+            help='Duration of the new term in blocks'
             fluid
             onChange={handleChange}
-            name="newTermDuration"
+            name='newTermDuration'
             error={errorLabelsProps.newTermDuration}
             value={values.newTermDuration}
             placeholder={ placeholders.newTermDuration }
           />
           <InputFormField
-            label="Council Size"
-            help="The size of the council (number of seats)"
+            label='Council Size'
+            help='The size of the council (number of seats)'
             fluid
             onChange={handleChange}
-            name="councilSize"
+            name='councilSize'
             error={errorLabelsProps.councilSize}
             value={values.councilSize}
             placeholder={ placeholders.councilSize }
           />
           <InputFormField
-            label="Candidacy Limit"
-            help="How many candidates that will be allowed in to the voting stage"
+            label='Candidacy Limit'
+            help='How many candidates that will be allowed in to the voting stage'
             fluid
             onChange={handleChange}
-            name="candidacyLimit"
+            name='candidacyLimit'
             error={errorLabelsProps.candidacyLimit}
             value={values.candidacyLimit}
             placeholder={ placeholders.candidacyLimit }

pioneer/packages/joy-proposals/src/forms/SetMaxValidatorCountForm.tsx

@@ -1,16 +1,14 @@
 import React, { useEffect } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
@@ -30,7 +28,7 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SetMaxValidatorCountForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetMaxValidatorCountForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const transport = useTransport();
   const [validatorCount] = usePromise<number>(() => transport.validators.maxCount(), 20);
   const { handleChange, errors, touched, values, setFieldValue } = props;
@@ -41,19 +39,20 @@ const SetMaxValidatorCountForm: React.FunctionComponent<FormInnerProps> = props
       setFieldValue('maxValidatorCount', validatorCount);
     }
   }, [validatorCount]);
+
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createSetValidatorCountProposal"
-      proposalType="SetValidatorCount"
+      txMethod='createSetValidatorCountProposal'
+      proposalType='SetValidatorCount'
       submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', values.maxValidatorCount]}
     >
       <InputFormField
         error={errorLabelsProps.maxValidatorCount}
-        label="Max Validator Count"
-        help="The new value for maximum number of Validators that you propose"
+        label='Max Validator Count'
+        help='The new value for maximum number of Validators that you propose'
         onChange={handleChange}
-        name="maxValidatorCount"
+        name='maxValidatorCount'
         placeholder={validatorCount}
         value={values.maxValidatorCount}
       />

pioneer/packages/joy-proposals/src/forms/SetWorkingGroupLeadRewardForm.tsx

@@ -1,18 +1,14 @@
 import React, { useState } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { Grid } from 'semantic-ui-react';
@@ -35,7 +31,7 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SetWorkingGroupLeadRewardForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetWorkingGroupLeadRewardForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, myMemberId } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
@@ -43,8 +39,8 @@ const SetWorkingGroupLeadRewardForm: React.FunctionComponent<FormInnerProps> = p
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createSetWorkingGroupLeaderRewardProposal"
-      proposalType="SetWorkingGroupLeaderReward"
+      txMethod='createSetWorkingGroupLeaderRewardProposal'
+      proposalType='SetWorkingGroupLeaderReward'
       leadRequired={true}
       leadRewardRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
@@ -59,12 +55,12 @@ const SetWorkingGroupLeadRewardForm: React.FunctionComponent<FormInnerProps> = p
       ]}
     >
       { (lead && lead.reward) && (
-        <Grid columns="4" doubling stackable verticalAlign="bottom">
+        <Grid columns='4' doubling stackable verticalAlign='bottom'>
           <Grid.Column>
             <InputFormField
-              label="New reward amount"
+              label='New reward amount'
               onChange={handleChange}
-              name="amount"
+              name='amount'
               error={errorLabelsProps.amount}
               value={values.amount}
               unit={formatBalance.getDefaults().unit}

pioneer/packages/joy-proposals/src/forms/SetWorkingGroupMintCapacityForm.tsx

@@ -1,18 +1,14 @@
 import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { Grid } from 'semantic-ui-react';
@@ -34,15 +30,15 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SetWorkingGroupMintCapacityForm: React.FunctionComponent<FormInnerProps> = props => {
+const SetWorkingGroupMintCapacityForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, myMemberId } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
 
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createSetWorkingGroupMintCapacityProposal"
-      proposalType="SetWorkingGroupMintCapacity"
+      txMethod='createSetWorkingGroupMintCapacityProposal'
+      proposalType='SetWorkingGroupMintCapacity'
       submitParams={[
         myMemberId,
         values.title,
@@ -52,12 +48,12 @@ const SetWorkingGroupMintCapacityForm: React.FunctionComponent<FormInnerProps> =
         values.workingGroup
       ]}
     >
-      <Grid columns="4" doubling stackable verticalAlign="bottom">
+      <Grid columns='4' doubling stackable verticalAlign='bottom'>
         <Grid.Column>
           <InputFormField
-            label="Mint capacity"
+            label='Mint capacity'
             onChange={handleChange}
-            name="capacity"
+            name='capacity'
             error={errorLabelsProps.capacity}
             value={values.capacity}
             placeholder={'ie. 100000'}

pioneer/packages/joy-proposals/src/forms/SignalForm.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { TextareaFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
@@ -29,23 +27,23 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SignalForm: React.FunctionComponent<FormInnerProps> = props => {
+const SignalForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
 
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createTextProposal"
-      proposalType="Text"
+      txMethod='createTextProposal'
+      proposalType='Text'
       submitParams={[props.myMemberId, values.title, values.rationale, '{STAKE}', values.description]}
     >
       <TextareaFormField
-        label="Description"
-        help="The extensive description of your proposal"
+        label='Description'
+        help='The extensive description of your proposal'
         onChange={handleChange}
-        name="description"
-        placeholder="What I would like to propose is..."
+        name='description'
+        placeholder='What I would like to propose is...'
         error={errorLabelsProps.description}
         value={values.description}
       />

pioneer/packages/joy-proposals/src/forms/SlashWorkingGroupLeadStakeForm.tsx

@@ -1,18 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { InputFormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
 import { Grid } from 'semantic-ui-react';
@@ -35,10 +31,11 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SlashWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = props => {
+const SlashWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, myMemberId, setFieldError } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
+
   // Here we validate if stake <= current lead stake.
   // Because it depends on selected working group,
   // there's no easy way to do it using validationSchema
@@ -51,8 +48,8 @@ const SlashWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> =
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createSlashWorkingGroupLeaderStakeProposal"
-      proposalType="SlashWorkingGroupLeaderStake"
+      txMethod='createSlashWorkingGroupLeaderStakeProposal'
+      proposalType='SlashWorkingGroupLeaderStake'
       leadRequired={true}
       leadStakeRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
@@ -67,12 +64,12 @@ const SlashWorkingGroupLeadStakeForm: React.FunctionComponent<FormInnerProps> =
       ]}
     >
       { (lead && lead.stake) && (
-        <Grid columns="4" doubling stackable verticalAlign="bottom">
+        <Grid columns='4' doubling stackable verticalAlign='bottom'>
           <Grid.Column>
             <InputFormField
-              label="Amount to slash"
+              label='Amount to slash'
               onChange={handleChange}
-              name="amount"
+              name='amount'
               error={errorLabelsProps.amount}
               value={values.amount}
               unit={formatBalance.getDefaults().unit}

pioneer/packages/joy-proposals/src/forms/SpendingProposalForm.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 import { getFormErrorLabelsProps } from './errorHandling';
 import * as Yup from 'yup';
 import { Label } from 'semantic-ui-react';
-import {
-  GenericProposalForm,
+import { GenericProposalForm,
   GenericFormValues,
   genericFormDefaultOptions,
   genericFormDefaultValues,
   withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
-  ProposalFormInnerProps
-} from './GenericProposalForm';
+  ProposalFormInnerProps } from './GenericProposalForm';
 import Validation from '../validationSchema';
 import { InputFormField, FormField } from './FormFields';
 import { withFormContainer } from './FormContainer';
@@ -34,14 +32,15 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
-const SpendingProposalForm: React.FunctionComponent<FormInnerProps> = props => {
+const SpendingProposalForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, setFieldValue } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
+
   return (
     <GenericProposalForm
       {...props}
-      txMethod="createSpendingProposal"
-      proposalType="Spending"
+      txMethod='createSpendingProposal'
+      proposalType='Spending'
       submitParams={[
         props.myMemberId,
         values.title,
@@ -52,24 +51,24 @@ const SpendingProposalForm: React.FunctionComponent<FormInnerProps> = props => {
       ]}
     >
       <InputFormField
-        label="Amount of tokens"
-        help="The amount of tokens you propose to spend"
+        label='Amount of tokens'
+        help='The amount of tokens you propose to spend'
         onChange={handleChange}
-        name="tokens"
-        placeholder="100"
+        name='tokens'
+        placeholder='100'
         error={errorLabelsProps.tokens}
         unit={ formatBalance.getDefaults().unit }
         value={values.tokens}
       />
       <FormField
         error={errorLabelsProps.destinationAccount}
-        label="Destination account"
-        help="The account you propose to send the tokens into"
+        label='Destination account'
+        help='The account you propose to send the tokens into'
       >
         <InputAddress
-          onChange={address => setFieldValue('destinationAccount', address)}
-          type="all"
-          placeholder="Select Destination Account"
+          onChange={(address) => setFieldValue('destinationAccount', address)}
+          type='all'
+          placeholder='Select Destination Account'
           value={values.destinationAccount}
         />
         {errorLabelsProps.destinationAccount && <Label {...errorLabelsProps.destinationAccount} prompt />}

pioneer/packages/joy-proposals/src/forms/TerminateWorkingGroupLeaderForm.tsx

@@ -1,17 +1,13 @@
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import {
-  withProposalFormData,
+import { withProposalFormData,
   ProposalFormExportProps,
   ProposalFormContainerProps,
   ProposalFormInnerProps,
-  genericFormDefaultOptions
-} from './GenericProposalForm';
-import {
-  GenericWorkingGroupProposalForm,
+  genericFormDefaultOptions } from './GenericProposalForm';
+import { GenericWorkingGroupProposalForm,
   FormValues as WGFormValues,
-  defaultValues as wgFromDefaultValues
-} from './GenericWorkingGroupProposalForm';
+  defaultValues as wgFromDefaultValues } from './GenericWorkingGroupProposalForm';
 import { withFormContainer } from './FormContainer';
 import _ from 'lodash';
 import Validation from '../validationSchema';
@@ -52,7 +48,7 @@ const valuesToTerminateRoleParams = (values: FormValues, lead: WorkerData): Simp
   };
 };
 
-const TerminateWorkingGroupLeaderForm: React.FunctionComponent<FormInnerProps> = props => {
+const TerminateWorkingGroupLeaderForm: React.FunctionComponent<FormInnerProps> = (props) => {
   const { handleChange, errors, touched, values, myMemberId, setFieldValue } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
   const [lead, setLead] = useState<WorkerData | null>(null);
@@ -60,8 +56,8 @@ const TerminateWorkingGroupLeaderForm: React.FunctionComponent<FormInnerProps> =
   return (
     <GenericWorkingGroupProposalForm
       {...props}
-      txMethod="createTerminateWorkingGroupLeaderRoleProposal"
-      proposalType="TerminateWorkingGroupLeaderRole"
+      txMethod='createTerminateWorkingGroupLeaderRoleProposal'
+      proposalType='TerminateWorkingGroupLeaderRole'
       leadRequired={true}
       onLeadChange={(lead: WorkerData | null) => setLead(lead)}
       submitParams={[
@@ -74,15 +70,15 @@ const TerminateWorkingGroupLeaderForm: React.FunctionComponent<FormInnerProps> =
     >
       { lead && (<>
         <TextareaFormField
-          label="Termination rationale"
+          label='Termination rationale'
           help={
             'This rationale is an required argument of "terminateWorkerRole" extrinsic, ' +
             'it may differ from proposal rationale and has different length constraints. ' +
             'If the propsal gets executed, this rationale will become part of "TerminatedLeader" event.'
           }
           onChange={handleChange}
-          name="terminationRationale"
-          placeholder="Provide a clear rationale for terminating the leader role..."
+          name='terminationRationale'
+          placeholder='Provide a clear rationale for terminating the leader role...'
           error={errorLabelsProps.terminationRationale}
           value={values.terminationRationale}
         />

pioneer/packages/joy-proposals/src/forms/errorHandling.ts

@@ -27,6 +27,7 @@ export function getFormErrorLabelsProps<ValuesT> (
   touched: FormikTouched<ValuesT>
 ): FormErrorLabelsProps<ValuesT> {
   const errorStates: Partial<FormErrorLabelsProps<ValuesT>> = {};
+
   for (const fieldName in errors) {
     errorStates[fieldName] = getErrorLabelProps<ValuesT>(errors, touched, fieldName);
   }

pioneer/packages/joy-proposals/src/index.tsx

@@ -10,8 +10,7 @@ import _ from 'lodash';
 
 import translate from './translate';
 import NotDone from './NotDone';
-import {
-  SignalForm,
+import { SignalForm,
   SpendingProposalForm,
   SetContentWorkingGroupLeadForm,
   SetContentWorkingGroupMintCapForm,
@@ -25,8 +24,7 @@ import {
   DecreaseWorkingGroupLeadStakeFrom,
   SlashWorkingGroupLeadStakeForm,
   SetWorkingGroupLeadRewardForm,
-  TerminateWorkingGroupLeaderForm
-} from './forms';
+  TerminateWorkingGroupLeaderForm } from './forms';
 import { RouteProps as AppMainRouteProps } from '@polkadot/apps-routing/types';
 import style from './style';
 
@@ -47,22 +45,22 @@ function App (props: Props): React.ReactElement<Props> {
   const { basePath } = props;
 
   return (
-    <ProposalsMain className="proposal--App">
+    <ProposalsMain className='proposal--App'>
       <StyledHeader>
         <Breadcrumb>
           <Switch>
-            <Route path={`${basePath}/new/:type`} render={props => (
+            <Route path={`${basePath}/new/:type`} render={(props) => (
               <>
                 <Breadcrumb.Section link as={Link} to={basePath}>Proposals</Breadcrumb.Section>
-                <Breadcrumb.Divider icon="right angle" />
+                <Breadcrumb.Divider icon='right angle' />
                 <Breadcrumb.Section link as={Link} to={`${basePath}/new`}>New proposal</Breadcrumb.Section>
-                <Breadcrumb.Divider icon="right angle" />
+                <Breadcrumb.Divider icon='right angle' />
                 <Breadcrumb.Section active>{_.startCase(props.match.params.type)}</Breadcrumb.Section>
               </>
             )} />
             <Route path={`${basePath}/new`}>
               <Breadcrumb.Section link as={Link} to={basePath}>Proposals</Breadcrumb.Section>
-              <Breadcrumb.Divider icon="right angle" />
+              <Breadcrumb.Divider icon='right angle' />
               <Breadcrumb.Section active>New proposal</Breadcrumb.Section>
             </Route>
             <Route>

pioneer/packages/joy-proposals/src/stories/ProposalForms.stories.tsx

@@ -1,14 +1,12 @@
 import '../index.css';
-import {
-  SignalForm,
+import { SignalForm,
   SpendingProposalForm,
   SetCouncilParamsForm,
   SetContentWorkingGroupLeadForm,
   RuntimeUpgradeForm,
   SetContentWorkingGroupMintCapForm,
   SetCouncilMintCapForm,
-  SetMaxValidatorCountForm
-} from '../forms';
+  SetMaxValidatorCountForm } from '../forms';
 import withMock from './withMock';
 
 export default {

pioneer/packages/joy-proposals/src/stories/data/ProposalPreviewList.mock.ts

@@ -92,4 +92,5 @@ import mockedProposal from './ProposalDetails.mock';
 //   }
 // ];
 const MockProposalPreviewList = Array.from({ length: 5 }, (_, i) => mockedProposal);
+
 export default MockProposalPreviewList;

pioneer/packages/joy-proposals/src/validationSchema.ts

@@ -178,8 +178,9 @@ function minMaxInt (min: number, max: number, fieldName: string) {
     .max(max, errorMessage(fieldName, min, max));
 }
 
-function minMaxStrFromConstraint(constraint: InputValidationLengthConstraint | undefined, fieldName: string) {
+function minMaxStrFromConstraint (constraint: InputValidationLengthConstraint | undefined, fieldName: string) {
   const schema = Yup.string().required(`${fieldName} is required!`);
+
   return constraint
     ? (
       schema
@@ -211,9 +212,9 @@ const Validation: ValidationType = {
   }),
   RuntimeUpgrade: () => ({
     WASM: Yup.mixed()
-      .test('fileArrayBuffer', 'Unexpected data format, file cannot be processed.', value => typeof value.byteLength !== 'undefined')
-      .test('fileSizeMin', `Minimum file size is ${FILE_SIZE_BYTES_MIN} bytes.`, value => value.byteLength >= FILE_SIZE_BYTES_MIN)
-      .test('fileSizeMax', `Maximum file size is ${FILE_SIZE_BYTES_MAX} bytes.`, value => value.byteLength <= FILE_SIZE_BYTES_MAX)
+      .test('fileArrayBuffer', 'Unexpected data format, file cannot be processed.', (value) => typeof value.byteLength !== 'undefined')
+      .test('fileSizeMin', `Minimum file size is ${FILE_SIZE_BYTES_MIN} bytes.`, (value) => value.byteLength >= FILE_SIZE_BYTES_MIN)
+      .test('fileSizeMax', `Maximum file size is ${FILE_SIZE_BYTES_MAX} bytes.`, (value) => value.byteLength <= FILE_SIZE_BYTES_MAX)
   }),
   SetElectionParameters: () => ({
     announcingPeriod: Yup.number()
@@ -369,18 +370,22 @@ const Validation: ValidationType = {
         'Schema validation failed!',
         function (val) {
           let schemaObj: any;
+
           try {
             schemaObj = JSON.parse(val);
           } catch (e) {
             return this.createError({ message: 'Schema validation failed: Invalid JSON' });
           }
+
           const isValid = schemaValidator(schemaObj);
           const errors = schemaValidator.errors || [];
+
           if (!isValid) {
             return this.createError({
-              message: 'Schema validation failed: ' + errors.map(e => `${e.message}${e.dataPath && ` (${e.dataPath})`}`).join(', ')
+              message: 'Schema validation failed: ' + errors.map((e) => `${e.message}${e.dataPath && ` (${e.dataPath})`}`).join(', ')
             });
           }
+
           return true;
         }
       )

pioneer/packages/joy-utils/src/react/components/TxButton.tsx

@@ -33,13 +33,13 @@ const txButtonNotPassedProps: readonly (keyof TxButtonBaseProps)[] = [
   'txSuccessCb',
   'txStartCb',
   'txUpdateCb'
- ] as const;
+] as const;
 
 type SemanticButtonProps = SemanticButtonStrictProps & { style?: React.CSSProperties };
 
 type TxButtonProps<ButtonComponentProps extends Record<string, any>> = Omit<ButtonComponentProps, 'onClick'> & TxButtonBaseProps;
 
-function useTxButton(props: TxButtonBaseProps) {
+function useTxButton (props: TxButtonBaseProps) {
   const { queueExtrinsic } = useContext(QueueContext);
   const { api } = useApi();
   const { state: { address: myAddress } } = useMyAccount();
@@ -62,7 +62,7 @@ function useTxButton(props: TxButtonBaseProps) {
       txStartCb,
       txUpdateCb
     });
-  }
+  };
 
   return { origin, sendTx };
 }
@@ -86,7 +86,7 @@ export const DefaultTxButton = (props: DefaultTxButtonProps) => {
       }}
     />
   );
-}
+};
 
 type SemanticTxButtonProps = TxButtonProps<SemanticButtonProps>;
 
@@ -105,7 +105,7 @@ export const SemanticTxButton = (props: SemanticTxButtonProps) => {
       }}
     />
   );
-}
+};
 
 export default DefaultTxButton;
 

pioneer/packages/joy-utils/src/react/components/working-groups/ApplicationDetails.tsx

@@ -13,16 +13,19 @@ type ApplicationsDetailsProps = {
 }
 
 export const ApplicationsDetails = ({ applications, acceptedIds }: ApplicationsDetailsProps) => {
-  const rejectedApplications = acceptedIds !== undefined ? applications.filter(a => !acceptedIds.includes(a.wgApplicationId)) : [];
+  const rejectedApplications = acceptedIds !== undefined ? applications.filter((a) => !acceptedIds.includes(a.wgApplicationId)) : [];
   const [showAll, setShowAll] = useState(!rejectedApplications.length);
-  const shownApplications = applications.filter(a => showAll || acceptedIds?.includes(a.wgApplicationId));
+  const shownApplications = applications.filter((a) => showAll || acceptedIds?.includes(a.wgApplicationId));
+
   return (<>
     <Item.Group>
       {
         shownApplications.map(({ member, stakes, wgApplicationId, humanReadableText }) => {
           let HRT = humanReadableText.toString();
           const accepted = acceptedIds?.includes(wgApplicationId);
+
           try { HRT = JSON.stringify(JSON.parse(HRT), undefined, 4); } catch (e) { /* Do nothing */ }
+
           return (
             <Item key={wgApplicationId} style={{
               background: 'white',
@@ -51,7 +54,7 @@ export const ApplicationsDetails = ({ applications, acceptedIds }: ApplicationsD
       }
     </Item.Group>
     {rejectedApplications.length > 0 && (
-      <Button fluid onClick={() => setShowAll(current => !current)}>
+      <Button fluid onClick={() => setShowAll((current) => !current)}>
         { showAll ? 'Hide rejected applications' : 'Show rejected applications' }
       </Button>
     )}
@@ -67,13 +70,13 @@ type ApplicationsDetailsByIdsProps = {
 export const ApplicationsDetailsByIds = ({ group, ids, acceptedIds }: ApplicationsDetailsByIdsProps) => {
   const transport = useTransport();
   const [applications, error, loading] = usePromise<ParsedApplication[]>(
-    () => Promise.all(ids.map(id => transport.workingGroups.parsedApplicationById(group, id))),
+    () => Promise.all(ids.map((id) => transport.workingGroups.parsedApplicationById(group, id))),
     [],
     [ids]
   );
 
   return (
-    <PromiseComponent {...{ error, loading }} message="Fetching application(s)...">
+    <PromiseComponent {...{ error, loading }} message='Fetching application(s)...'>
       <ApplicationsDetails applications={applications} acceptedIds={acceptedIds}/>
     </PromiseComponent>
   );
@@ -95,7 +98,7 @@ export const ApplicationsDetailsByOpening = ({ group, openingId, acceptedIds }:
   );
 
   return (
-    <PromiseComponent {...{ error, loading }} message="Fetching applications...">
+    <PromiseComponent {...{ error, loading }} message='Fetching applications...'>
       <ApplicationsDetails applications={applications} acceptedIds={acceptedIds}/>
     </PromiseComponent>
   );

pioneer/packages/joy-utils/src/react/components/working-groups/LeadInfo.tsx

@@ -49,8 +49,8 @@ export const LeadInfoFromId = ({ leadId, group }: LeadInfoFromIdProps) => {
   );
 
   return (
-    <PromiseComponent error={error} loading={loading} message="Fetching current lead...">
-      <LeadInfo lead={lead} group={group} header={false} emptyMessage="Leader no longer active!"/>
+    <PromiseComponent error={error} loading={loading} message='Fetching current lead...'>
+      <LeadInfo lead={lead} group={group} header={false} emptyMessage='Leader no longer active!'/>
     </PromiseComponent>
   );
 };

pioneer/packages/joy-utils/src/react/hooks/proposals/useProposalSubscription.tsx

@@ -16,34 +16,38 @@ const useProposalSubscription = (id: ProposalId) => {
     // onMount...
     let unmounted = false;
     let unsubscribeProposal: (() => void) | undefined;
+
     const refreshProposalData = () => {
       transport.proposals.proposalById(id)
-        .then(newData => {
+        .then((newData) => {
           if (!unmounted) {
             setData(newData);
             setLoading(false);
           }
         })
-        .catch(error => {
+        .catch((error) => {
           if (!unmounted) {
             setError(error);
             setLoading(false);
           }
         });
     };
+
     // Create the subscription
     transport.proposals.subscribeProposal(id, refreshProposalData)
-      .then(unsubscribe => {
+      .then((unsubscribe) => {
         if (!unmounted) {
           unsubscribeProposal = unsubscribe;
         } else {
           unsubscribe(); // If already unmounted - unsubscribe immedietally!
         }
       });
+
     return () => {
       // onUnmount...
       // Clean the subscription
       unmounted = true;
+
       if (unsubscribeProposal) {
         unsubscribeProposal();
       }

pioneer/packages/joy-utils/src/transport/chain.ts

@@ -9,7 +9,7 @@ export default class ChainTransport extends BaseTransport {
   }
 
   async blockTimestamp (height: number): Promise<Date> {
-    const blockTime = (await this.api.query.timestamp.now.at(await this.blockHash(height))) as Moment;
+    const blockTime = (await this.api.query.timestamp.now.at(await this.blockHash(height)));
 
     return new Date(blockTime.toNumber());
   }

pioneer/packages/joy-utils/src/transport/contentWorkingGroup.ts

@@ -18,6 +18,7 @@ export default class ContentWorkingGroupTransport extends BaseTransport {
   async currentMintCap (): Promise<number> {
     const WGMintId = (await this.contentWorkingGroup.mint()) as MintId;
     const WGMint = (await this.minting.mints(WGMintId)) as Mint;
+
     return (WGMint.get('capacity') as u128).toNumber();
   }
 

pioneer/packages/joy-utils/src/transport/council.ts

@@ -22,7 +22,8 @@ export default class CouncilTransport extends BaseTransport {
   async councilMembersLength (atBlock?: number): Promise<number> {
     if (atBlock) {
       const blockHash = await this.chainT.blockHash(atBlock);
-      return ((await this.api.query.council.activeCouncil.at(blockHash)) as Seats).length;
+
+      return ((await this.api.query.council.activeCouncil.at(blockHash))).length;
     }
 
     return ((await this.council.activeCouncil()) as Seats).length;
@@ -30,10 +31,12 @@ export default class CouncilTransport extends BaseTransport {
 
   async councilMembers (): Promise<(ParsedMember & { memberId: MemberId })[]> {
     const council = (await this.council.activeCouncil()) as Seats;
+
     return Promise.all(
-      council.map(async seat => {
+      council.map(async (seat) => {
         const memberIds = (await this.members.memberIdsByControllerAccountId(seat.member)) as Vec<MemberId>;
         const member = (await this.membersT.expectedMembership(memberIds[0])).toJSON() as ParsedMember;
+
         return {
           ...member,
           memberId: memberIds[0]
@@ -50,7 +53,7 @@ export default class CouncilTransport extends BaseTransport {
       .filter(([memberId, member]) => (
         // Filter out council members
         !activeCouncil.some((seat) =>
-            seat.member.eq(member.controller_account) ||
+          seat.member.eq(member.controller_account) ||
             seat.member.eq(member.root_account)
         )
       ))
@@ -78,6 +81,6 @@ export default class CouncilTransport extends BaseTransport {
       min_voting_stake,
       candidacy_limit,
       council_size
-    }
+    };
   }
 }

pioneer/packages/joy-utils/src/transport/members.ts

@@ -39,7 +39,7 @@ export default class MembersTransport extends BaseTransport {
     };
   }
 
-  async allMembers(): Promise<[MemberId, Membership][]> {
+  async allMembers (): Promise<[MemberId, Membership][]> {
     return this.entriesByIds<MemberId, Membership>(this.api.query.members.membershipById);
   }
 }

pioneer/packages/joy-utils/src/transport/proposals.ts

@@ -1,5 +1,4 @@
-import {
-  ParsedProposal,
+import { ParsedProposal,
   ProposalType,
   ProposalTypes,
   ProposalVote,
@@ -9,14 +8,13 @@ import {
   DiscussionContraints,
   ProposalStatusFilter,
   ProposalsBatch,
-  ParsedProposalDetails
-} from '../types/proposals';
+  ParsedProposalDetails } from '../types/proposals';
 import { ParsedMember } from '../types/members';
 
 import BaseTransport from './base';
 
 import { ThreadId, PostId } from '@joystream/types/common';
-import { Proposal, ProposalId, VoteKind, DiscussionThread, DiscussionPost, ProposalDetails, Finalized, ProposalDecisionStatus } from '@joystream/types/proposals';
+import { Proposal, ProposalId, VoteKind, DiscussionThread, DiscussionPost, ProposalDetails } from '@joystream/types/proposals';
 import { MemberId } from '@joystream/types/members';
 import { u32, Bytes, Null } from '@polkadot/types/';
 import { BalanceOf } from '@polkadot/types/interfaces';
@@ -78,6 +76,7 @@ export default class ProposalsTransport extends BaseTransport {
 
   async typeAndDetails (id: ProposalId) {
     const cachedProposalDetails = this.proposalDetailsCache[id.toNumber()];
+
     // Avoid fetching runtime upgrade proposal details if we already have them cached
     if (cachedProposalDetails) {
       return cachedProposalDetails;
@@ -85,12 +84,15 @@ export default class ProposalsTransport extends BaseTransport {
       const rawDetails = await this.rawProposalDetails(id);
       const type = rawDetails.type;
       let details: ParsedProposalDetails = rawDetails;
+
       if (type === 'RuntimeUpgrade') {
         // In case of RuntimeUpgrade proposal we override details to just contain the hash and filesize
         // (instead of full WASM bytecode)
         const wasm = rawDetails.value as Bytes;
+
         details = [blake2AsHex(wasm, 256), wasm.length];
       }
+
       // Save entry in cache
       this.proposalDetailsCache[id.toNumber()] = { type, details };
 
@@ -100,9 +102,11 @@ export default class ProposalsTransport extends BaseTransport {
 
   async proposalById (id: ProposalId, rawProposal?: Proposal): Promise<ParsedProposal> {
     const { type, details } = await this.typeAndDetails(id);
+
     if (!rawProposal) {
       rawProposal = await this.rawProposalById(id);
     }
+
     const proposer = (await this.membersT.expectedMembership(rawProposal.proposerId)).toJSON() as ParsedMember;
     const proposal = rawProposal.toJSON() as {
       title: string;
@@ -130,13 +134,14 @@ export default class ProposalsTransport extends BaseTransport {
 
   async proposalsIds () {
     const total: number = (await this.proposalCount()).toNumber();
+
     return Array.from({ length: total }, (_, i) => this.api.createType('ProposalId', i + 1));
   }
 
   async activeProposalsIds () {
     const result = await this.entriesByIds<ProposalId, Null>(
       this.api.query.proposalsEngine.activeProposalIds
-    )
+    );
 
     return result.map(([proposalId]) => proposalId);
   }
@@ -144,7 +149,7 @@ export default class ProposalsTransport extends BaseTransport {
   async proposalsBatch (status: ProposalStatusFilter, batchNumber = 1, batchSize = 5): Promise<ProposalsBatch> {
     const ids = (status === 'Active' ? await this.activeProposalsIds() : await this.proposalsIds())
       .sort((id1, id2) => id2.cmp(id1)); // Sort by newest
-    let rawProposalsWithIds = (await Promise.all(ids.map(id => this.rawProposalById(id))))
+    let rawProposalsWithIds = (await Promise.all(ids.map((id) => this.rawProposalById(id))))
       .map((proposal, index) => ({ id: ids[index], proposal }));
 
     if (status !== 'All' && status !== 'Active') {
@@ -152,11 +157,13 @@ export default class ProposalsTransport extends BaseTransport {
         if (!proposal.status.isOfType('Finalized')) {
           return false;
         }
+
         return proposal.status.asType('Finalized').proposalStatus.type === status;
       });
     }
 
     const totalBatches = Math.ceil(rawProposalsWithIds.length / batchSize);
+
     rawProposalsWithIds = rawProposalsWithIds.slice((batchNumber - 1) * batchSize, batchNumber * batchSize);
     const proposals = await Promise.all(rawProposalsWithIds.map(({ proposal, id }) => this.proposalById(id, proposal)));
 
@@ -171,6 +178,7 @@ export default class ProposalsTransport extends BaseTransport {
   async voteByProposalAndMember (proposalId: ProposalId, voterId: MemberId): Promise<VoteKind | null> {
     const vote = (await this.proposalsEngine.voteExistsByProposalByVoter(proposalId, voterId)) as VoteKind;
     const hasVoted = (await this.api.query.proposalsEngine.voteExistsByProposalByVoter.size(proposalId, voterId)).toNumber();
+
     return hasVoted ? vote : null;
   }
 
@@ -181,8 +189,10 @@ export default class ProposalsTransport extends BaseTransport {
     );
 
     const votesWithMembers: ProposalVote[] = [];
+
     for (const [memberId, vote] of voteEntries) {
       const parsedMember = (await this.membersT.expectedMembership(memberId)).toJSON() as ParsedMember;
+
       votesWithMembers.push({
         vote,
         member: {
@@ -204,12 +214,15 @@ export default class ProposalsTransport extends BaseTransport {
     const methods = proposalsApiMethods[type];
     let votingPeriod = 0;
     let gracePeriod = 0;
+
     if (methods) {
       votingPeriod = ((await this.proposalsCodex[methods.votingPeriod]()) as u32).toNumber();
       gracePeriod = ((await this.proposalsCodex[methods.gracePeriod]()) as u32).toNumber();
     }
+
     // Currently it's same for all types, but this will change soon (?)
     const cancellationFee = this.cancellationFee();
+
     return {
       type,
       votingPeriod,
@@ -220,7 +233,7 @@ export default class ProposalsTransport extends BaseTransport {
   }
 
   async proposalsTypesParameters () {
-    return Promise.all(ProposalTypes.map(type => this.parametersFromProposalType(type)));
+    return Promise.all(ProposalTypes.map((type) => this.parametersFromProposalType(type)));
   }
 
   async subscribeProposal (id: number|ProposalId, callback: () => void) {
@@ -229,9 +242,11 @@ export default class ProposalsTransport extends BaseTransport {
 
   async discussion (id: number|ProposalId): Promise<ParsedDiscussion | null> {
     const threadId = (await this.proposalsCodex.threadIdByProposalId(id)) as ThreadId;
+
     if (!threadId.toNumber()) {
       return null;
     }
+
     const thread = (await this.proposalsDiscussion.threadById(threadId)) as DiscussionThread;
     const postEntries = await this.entriesByIds<PostId, DiscussionPost>(
       this.api.query.proposalsDiscussion.postThreadIdByPostId,
@@ -239,6 +254,7 @@ export default class ProposalsTransport extends BaseTransport {
     );
 
     const parsedPosts: ParsedPost[] = [];
+
     for (const [postId, post] of postEntries) {
       parsedPosts.push({
         postId: postId,

pioneer/packages/joy-utils/src/transport/validators.ts

@@ -3,7 +3,8 @@ import { u32 } from '@polkadot/types/';
 
 export default class ValidatorsTransport extends BaseTransport {
   async maxCount (): Promise<number> {
-    const count = ((await this.api.query.staking.validatorCount()) as u32).toNumber();
+    const count = ((await this.api.query.staking.validatorCount())).toNumber();
+
     return count;
   }
 }

pioneer/packages/joy-utils/src/transport/workingGroups.ts

@@ -20,13 +20,15 @@ export default class WorkingGroupsTransport extends BaseTransport {
     this.membersT = membersTransport;
   }
 
-  protected apiQueryByGroup(group: WorkingGroupKey) {
+  protected apiQueryByGroup (group: WorkingGroupKey) {
     const module = apiModuleByGroup[group];
+
     return this.api.query[module];
   }
 
   protected queryByGroup (group: WorkingGroupKey) {
     const module = apiModuleByGroup[group];
+
     return this.cacheApi.query[module];
   }
 
@@ -77,12 +79,12 @@ export default class WorkingGroupsTransport extends BaseTransport {
 
         return { id, opening, hiringOpening };
       })
-      .filter(openingData => !type || openingData.opening.opening_type.isOfType(type));
+      .filter((openingData) => !type || openingData.opening.opening_type.isOfType(type));
   }
 
   public async activeOpenings (group: WorkingGroupKey, substage?: ActiveOpeningStageKey, type?: OpeningTypeKey) {
     return (await this.allOpenings(group, type))
-      .filter(od =>
+      .filter((od) =>
         od.hiringOpening.stage.isOfType('Active') &&
         (!substage || od.hiringOpening.stage.asType('Active').stage.isOfType(substage))
       );
@@ -126,6 +128,7 @@ export default class WorkingGroupsTransport extends BaseTransport {
 
   async parsedApplicationById (group: WorkingGroupKey, wgApplicationId: number): Promise<ParsedApplication> {
     const wgApplication = await this.wgApplicationById(group, wgApplicationId);
+
     return this.parseApplication(wgApplicationId, wgApplication);
   }
 
@@ -148,6 +151,6 @@ export default class WorkingGroupsTransport extends BaseTransport {
 
   async openingActiveApplications (group: WorkingGroupKey, wgOpeningId: number): Promise<ParsedApplication[]> {
     return (await this.openingApplications(group, wgOpeningId))
-      .filter(a => a.stage.isOfType('Active'));
+      .filter((a) => a.stage.isOfType('Active'));
   }
 }

pioneer/packages/joy-utils/src/types/proposals.ts

@@ -39,7 +39,7 @@ export type ParsedProposalDetails = ProposalDetails | RuntimeUpgradeProposalDeta
 
 export type SpecificProposalDetails<T extends keyof ProposalDetails['typeDefinitions']> =
   T extends 'RuntimeUpgrade' ? RuntimeUpgradeProposalDetails :
-  InstanceType<ProposalDetails['typeDefinitions'][Exclude<T, 'RuntimeUpgrade'>]>;
+    InstanceType<ProposalDetails['typeDefinitions'][Exclude<T, 'RuntimeUpgrade'>]>;
 
 export type ParsedProposal = {
   id: ProposalId;