fix: default for collaborators set to 1 and added dev tag

src/components/Send/CollaboratorsSelector.tsx

@@ -6,6 +6,7 @@ import * as rb from 'react-bootstrap'
 import classNames from 'classnames'
 import styles from './CollaboratorsSelector.module.css'
 import { isValidNumCollaborators } from './helpers'
+import { isDevMode } from '../../constants/debugFeatures'
 
 type CollaboratorsSelectorProps = {
   name: string
@@ -24,8 +25,9 @@ const CollaboratorsSelector = ({
 
   const [field] = useField<number>(name)
   const form = useFormikContext<any>()
+  const initialNumCollaboratorsInput = isDevMode() ? '1' : ''
 
-  const [customNumCollaboratorsInput, setCustomNumCollaboratorsInput] = useState<string>()
+  const [customNumCollaboratorsInput, setCustomNumCollaboratorsInput] = useState<string>(initialNumCollaboratorsInput)
 
   const defaultCollaboratorsSelection = useMemo(() => {
     const start = Math.max(minNumCollaborators, 8)
@@ -49,19 +51,20 @@ const CollaboratorsSelector = ({
     <rb.Form.Group className={styles.collaboratorsSelector}>
       <rb.Form.Label className="mb-0">
         {t('send.label_num_collaborators', { numCollaborators: field.value })}
+        {isDevMode() && <span className="badge ms-2 rounded-pill bg-warning">dev</span>}
       </rb.Form.Label>
       <div className="mb-2">
         <rb.Form.Text className="text-secondary">{t('send.description_num_collaborators')}</rb.Form.Text>
       </div>
       <div className="d-flex flex-row flex-wrap gap-2">
         {defaultCollaboratorsSelection.map((number) => {
-          const isSelected = !usesCustomNumCollaborators && field.value === number
+          const currentlySelected = !usesCustomNumCollaborators && field.value === number
           return (
             <rb.Button
               key={number}
               variant={settings.theme === 'light' ? 'white' : 'dark'}
               className={classNames(styles.collaboratorsSelectorElement, 'border', 'border-1', {
-                [styles.selected]: isSelected,
+                [styles.selected]: currentlySelected,
               })}
               onClick={() => {
                 validateAndSetCustomNumCollaborators(String(number))
@@ -78,7 +81,7 @@ const CollaboratorsSelector = ({
           max={maxNumCollaborators}
           isInvalid={usesCustomNumCollaborators && !isValidNumCollaborators(field.value, minNumCollaborators)}
           placeholder={t('send.input_num_collaborators_placeholder')}
-          value={customNumCollaboratorsInput || ''}
+          value={customNumCollaboratorsInput}
           className={classNames(styles.collaboratorsSelectorElement, 'border', 'border-1', {
             [styles.selected]: usesCustomNumCollaborators,
           })}

src/components/Send/helpers.ts

@@ -1,12 +1,14 @@
+import { isDevMode } from '../../constants/debugFeatures'
 import { isValidNumber } from '../../utils'
 
 export const MAX_NUM_COLLABORATORS = 99
 
-export const initialNumCollaborators = (minValue: number) => {
+export const initialNumCollaborators = (minValue: number): number => {
   if (minValue > 8) {
     return minValue + pseudoRandomNumber(0, 2)
   }
-  return pseudoRandomNumber(8, 10)
+
+  return isDevMode() ? 1 : pseudoRandomNumber(8, 10)
 }
 
 // not cryptographically random. returned number is in range [min, max] (both inclusive).