Fix the prop types

src/components/AccountModule/AccountModule.js

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
 import {
   Button,
   EthIdenticon,
@@ -26,6 +27,10 @@ function AccountModule({ compact }) {
   return connected ? <ConnectedMode /> : <NonConnectedMode compact={compact} />
 }
 
+AccountModule.propTypes = {
+  compact: PropTypes.bool,
+}
+
 function NonConnectedMode({ compact }) {
   const { enable } = useAccount()
   return (
@@ -48,6 +53,10 @@ function NonConnectedMode({ compact }) {
   )
 }
 
+NonConnectedMode.propTypes = {
+  compact: PropTypes.bool,
+}
+
 function ConnectedMode() {
   const { address, label, networkId } = useAccount()
   const theme = useTheme()

src/components/DomainField/DomainField.js

@@ -1,10 +1,11 @@
 import React, { useCallback, useImperativeHandle, useRef } from 'react'
+import PropTypes from 'prop-types'
 import { Field, GU, TextInput, LoadingRing, useTheme } from '@aragon/ui'
 import CheckDisc from '../CheckDisc/CheckDisc'
 import {
   DOMAIN_CHECK,
-  DOMAIN_LOADING,
   DOMAIN_ERROR,
+  DOMAIN_LOADING,
   DOMAIN_NONE,
 } from '../../check-domain'
 
@@ -18,14 +19,14 @@ function filterSubdomain(subdomain, detectFullDomains) {
 
 const DomainField = React.forwardRef(function DomainField(
   {
-    domainEnd = '.aragonid.eth',
-    label = 'Name of the organization',
+    detectFullDomains,
+    domainEnd,
+    focusRef,
+    label,
     onChange,
-    placeholder = 'Type an organization name',
-    status = DOMAIN_CHECK,
+    placeholder,
+    status,
     value,
-    detectFullDomains = false,
-    focusRef,
     ...props
   },
   ref
@@ -119,4 +120,28 @@ const DomainField = React.forwardRef(function DomainField(
   )
 })
 
+DomainField.propTypes = {
+  detectFullDomains: PropTypes.bool,
+  domainEnd: PropTypes.string,
+  focusRef: PropTypes.array,
+  label: PropTypes.node,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  status: PropTypes.oneOf([
+    DOMAIN_CHECK,
+    DOMAIN_ERROR,
+    DOMAIN_LOADING,
+    DOMAIN_NONE,
+  ]),
+  value: PropTypes.string.isRequired,
+}
+
+DomainField.defaultProps = {
+  detectFullDomains: false,
+  domainEnd: '.aragonid.eth',
+  label: 'Name of the organization',
+  placeholder: 'Type an organization name',
+  status: DOMAIN_CHECK,
+}
+
 export default DomainField

src/onboarding2/Configure/Configure.js

@@ -1,8 +1,14 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { useViewport, GU } from '@aragon/ui'
 import Templates from '../Templates/Templates'
 import ConfigureStepsPanel from './ConfigureStepsPanel'
 import ConfigureTemplateScreens from './ConfigureTemplateScreens'
+import * as CreateStatuses from '../Create/create-statuses'
+import { OrgTemplateType } from '../../prop-types'
+
+export const CONFIGURE_MODE_SELECT = Symbol('CONFIGURE_MODE_SELECT')
+export const CONFIGURE_MODE_CONFIGURE = Symbol('CONFIGURE_MODE_CONFIGURE')
 
 function Configure({
   TemplateScreen,
@@ -13,13 +19,12 @@ function Configure({
   status,
   stepIndex,
   steps,
-  template,
   templateData,
   templateScreenIndex,
+  screens,
   templates,
 }) {
   const { above } = useViewport()
-  const screens = (template && template.screens) || []
   return (
     <React.Fragment>
       {above('large') && (
@@ -51,10 +56,10 @@ function Configure({
             overflow: hidden;
           `}
         >
-          {mode === 'select' && (
+          {mode === CONFIGURE_MODE_SELECT && (
             <Templates onUse={onUseTemplate} templates={templates} />
           )}
-          {mode === 'configure' && (
+          {mode === CONFIGURE_MODE_CONFIGURE && (
             <ConfigureTemplateScreens
               TemplateScreen={TemplateScreen}
               onNext={onNextTemplateScreen}
@@ -70,4 +75,20 @@ function Configure({
   )
 }
 
+Configure.propTypes = {
+  TemplateScreen: PropTypes.func.isRequired,
+  mode: PropTypes.oneOf([CONFIGURE_MODE_SELECT, CONFIGURE_MODE_CONFIGURE])
+    .isRequired,
+  onNextTemplateScreen: PropTypes.func.isRequired,
+  onPrevTemplateScreen: PropTypes.func.isRequired,
+  onUseTemplate: PropTypes.func.isRequired,
+  status: PropTypes.oneOf(Object.values(CreateStatuses)).isRequired,
+  stepIndex: PropTypes.number.isRequired,
+  steps: PropTypes.arrayOf(PropTypes.string).isRequired,
+  screens: PropTypes.array.isRequired,
+  templateData: PropTypes.object.isRequired,
+  templateScreenIndex: PropTypes.number.isRequired,
+  templates: PropTypes.arrayOf(OrgTemplateType).isRequired,
+}
+
 export default Configure

src/onboarding2/Configure/ConfigureStepsItem.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { GU, IconCheck, useTheme } from '@aragon/ui'
 
-function ConfigureStepsItem({ stepNumber, step, label, currentStep, status }) {
+function ConfigureStepsItem({ stepNumber, step, label, currentStep }) {
   const theme = useTheme()
 
   const stepStyles = useMemo(() => {
@@ -70,9 +70,10 @@ function ConfigureStepsItem({ stepNumber, step, label, currentStep, status }) {
 }
 
 ConfigureStepsItem.propTypes = {
-  step: PropTypes.number.isRequired,
-  label: PropTypes.string.isRequired,
   currentStep: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  step: PropTypes.number.isRequired,
+  stepNumber: PropTypes.number.isRequired,
 }
 
 export default ConfigureStepsItem

src/onboarding2/Configure/ConfigureTemplateScreens.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import { GU, springs, useViewport } from '@aragon/ui'
 import { Transition, animated } from 'react-spring'
 
@@ -45,42 +46,55 @@ function ConfigureTemplateScreens({
       }}
       config={springs.smooth}
     >
-      {({ screenIndex, Screen }) => ({ opacity, transform, position }) => (
-        <AnimatedDiv
-          style={{ opacity, transform, position }}
-          css={`
-            display: grid;
-            align-items: center;
-            justify-content: center;
-            top: 0;
-            left: 0;
-            right: 0;
-          `}
-        >
-          <div
+      {({ screenIndex, Screen }) =>
+        /* eslint-disable react/prop-types */
+        ({ opacity, transform, position }) => (
+          <AnimatedDiv
+            style={{ opacity, transform, position }}
             css={`
-              max-width: ${82 * GU}px;
-              padding: 0 ${3 * GU}px ${(below('medium') ? 9 : 3) * GU}px
-                ${3 * GU}px;
+              display: grid;
+              align-items: center;
+              justify-content: center;
+              top: 0;
+              left: 0;
+              right: 0;
             `}
           >
-            <Screen
-              back={onPrev}
-              data={templateData}
-              fields={
-                {
-                  /* TODO: pass the fields from the template contract */
+            <div
+              css={`
+                max-width: ${82 * GU}px;
+                padding: 0 ${3 * GU}px ${(below('medium') ? 9 : 3) * GU}px
+                  ${3 * GU}px;
+              `}
+            >
+              <Screen
+                data={templateData}
+                fields={
+                  {
+                    /* TODO: pass the fields from the template contract */
+                  }
                 }
-              }
-              next={onNext}
-              screenIndex={screenIndex}
-              screens={screens}
-            />
-          </div>
-        </AnimatedDiv>
-      )}
+                next={onNext}
+                back={onPrev}
+                screens={screens}
+                screenIndex={screenIndex}
+              />
+            </div>
+          </AnimatedDiv>
+        )
+      /* eslint-enable react/prop-types */
+      }
     </Transition>
   )
 }
 
+ConfigureTemplateScreens.propTypes = {
+  TemplateScreen: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
+  onPrev: PropTypes.func.isRequired,
+  screenIndex: PropTypes.number.isRequired,
+  screens: PropTypes.array.isRequired,
+  templateData: PropTypes.object.isRequired,
+}
+
 export default ConfigureTemplateScreens

src/onboarding2/Create/Create.js

@@ -6,19 +6,29 @@ import {
   getRecommendedGasLimit,
 } from '../../aragonjs-wrapper'
 import { EthereumAddressType } from '../../prop-types'
+import {
+  TRANSACTION_STATUS_ERROR,
+  TRANSACTION_STATUS_PENDING,
+  TRANSACTION_STATUS_SUCCESS,
+  TRANSACTION_STATUS_UPCOMING,
+} from '../../symbols'
 import { log } from '../../utils'
 import {
   loadTemplateState,
   saveTemplateState,
   prepareTransactionCreatorFromAbi,
 } from '../create-utils'
-import Configure from '../Configure/Configure'
+import Configure, {
+  CONFIGURE_MODE_SELECT,
+  CONFIGURE_MODE_CONFIGURE,
+} from '../Configure/Configure'
 import Deployment from '../Deployment/Deployment'
 import ErrorModal from '../../components/ErrorModal/ErrorModal'
-
-const STATUS_SELECT_TEMPLATE = Symbol('STATUS_TEMPLATE')
-const STATUS_TEMPLATE_SCREENS = Symbol('STATUS_TEMPLATE_SCREENS')
-const STATUS_DEPLOYMENT = Symbol('STATUS_DEPLOYMENT')
+import {
+  STATUS_SELECT_TEMPLATE,
+  STATUS_TEMPLATE_SCREENS,
+  STATUS_DEPLOYMENT,
+} from './create-statuses'
 
 // Used during the template selection phase, since we don’t know yet what are
 // going to be the configuration steps.
@@ -304,15 +314,15 @@ function useDeploymentState(
     const { signed, errored } = transactionProgress
     const status = index => {
       if (errored !== -1 && index >= errored) {
-        return 'error'
+        return TRANSACTION_STATUS_ERROR
       }
       if (index === signed) {
-        return 'pending'
+        return TRANSACTION_STATUS_PENDING
       }
       if (index < signed) {
-        return 'success'
+        return TRANSACTION_STATUS_SUCCESS
       }
-      return 'upcoming'
+      return TRANSACTION_STATUS_UPCOMING
     }
 
     return deployTransactions.map(({ name }, index) => ({
@@ -361,6 +371,7 @@ const Create = React.memo(function Create({
   } = useConfigureState(templates, onScreenUpdate)
 
   const configureSteps = getConfigureSteps(status, template, templateData)
+  const templateScreens = (template && template.screens) || []
 
   // The current create step (includes the template selection
   // and “launch organization”).
@@ -453,15 +464,19 @@ const Create = React.memo(function Create({
         />
       ) : (
         <Configure
-          mode={status === STATUS_SELECT_TEMPLATE ? 'select' : 'configure'}
+          mode={
+            status === STATUS_SELECT_TEMPLATE
+              ? CONFIGURE_MODE_SELECT
+              : CONFIGURE_MODE_CONFIGURE
+          }
           TemplateScreen={TemplateScreen}
           onNextTemplateScreen={handleTemplateNext}
           onPrevTemplateScreen={handleTemplatePrev}
           onUseTemplate={handleUseTemplate}
+          screens={templateScreens}
           status={status}
           stepIndex={configureStepIndex}
           steps={configureSteps}
-          template={template}
           templateData={templateData}
           templateScreenIndex={templateScreenIndex}
           templates={templates}

src/onboarding2/Create/create-statuses.js

@@ -0,0 +1,3 @@
+export const STATUS_SELECT_TEMPLATE = Symbol('STATUS_TEMPLATE')
+export const STATUS_TEMPLATE_SCREENS = Symbol('STATUS_TEMPLATE_SCREENS')
+export const STATUS_DEPLOYMENT = Symbol('STATUS_DEPLOYMENT')