chore(dev): new default for collaborators in dev mode (#820)

src/components/Send/CollaboratorsSelector.tsx

@@ -1,11 +1,11 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useField, useFormikContext } from 'formik'
 import { useSettings } from '../../context/SettingsContext'
 import * as rb from 'react-bootstrap'
 import classNames from 'classnames'
-import styles from './CollaboratorsSelector.module.css'
 import { isValidNumCollaborators } from './helpers'
+import styles from './CollaboratorsSelector.module.css'
 
 type CollaboratorsSelectorProps = {
   name: string
@@ -36,14 +36,23 @@ const CollaboratorsSelector = ({
     return field.value === undefined || String(field.value) === customNumCollaboratorsInput
   }, [field.value, customNumCollaboratorsInput])
 
-  const validateAndSetCustomNumCollaborators = (candidate: string) => {
-    const parsed = parseInt(candidate, 10)
-    if (isValidNumCollaborators(parsed, minNumCollaborators)) {
-      form.setFieldValue(field.name, parsed, true)
-    } else {
-      form.setFieldValue(field.name, undefined, true)
+  const validateAndSetCustomNumCollaborators = useCallback(
+    (candidate: string) => {
+      const parsed = parseInt(candidate, 10)
+      if (isValidNumCollaborators(parsed, minNumCollaborators)) {
+        form.setFieldValue(field.name, parsed, true)
+      } else {
+        form.setFieldValue(field.name, undefined, true)
+      }
+    },
+    [form, field.name, minNumCollaborators],
+  )
+
+  useEffect(() => {
+    if (!defaultCollaboratorsSelection.includes(field.value)) {
+      setCustomNumCollaboratorsInput(String(field.value))
     }
-  }
+  }, [validateAndSetCustomNumCollaborators, field.value, defaultCollaboratorsSelection, setCustomNumCollaboratorsInput])
 
   return (
     <rb.Form.Group className={styles.collaboratorsSelector}>
@@ -55,13 +64,13 @@ const CollaboratorsSelector = ({
       </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))

src/components/Send/helpers.ts

@@ -2,10 +2,11 @@ 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)
 }
 

src/components/Send/index.tsx

@@ -4,6 +4,7 @@ import { FormikProps } from 'formik'
 import { useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
 import * as Api from '../../libs/JmWalletApi'
+import { isDevMode } from '../../constants/debugFeatures'
 import PageTitle from '../PageTitle'
 import Sprite from '../Sprite'
 import { SendForm, SendFormValues } from './SendForm'
@@ -25,6 +26,9 @@ const INITIAL_SOURCE_JAR_INDEX = null
 const INITIAL_AMOUNT = null
 const INITIAL_IS_COINJOIN = true
 
+// set the default to one collaborat
+const DEV_INITIAL_NUM_COLLABORATORS_INPUT = 1
+
 type MaxFeeConfigMissingAlertProps = {
   onSuccess: () => void
 }
@@ -97,7 +101,10 @@ export default function Send({ wallet }: SendProps) {
   const [alert, setAlert] = useState<SimpleAlert>()
   const [isSending, setIsSending] = useState(false)
   const [minNumCollaborators, setMinNumCollaborators] = useState(JM_MINIMUM_MAKERS_DEFAULT)
-  const initNumCollaborators = useMemo(() => initialNumCollaborators(minNumCollaborators), [minNumCollaborators])
+  const initNumCollaborators = useMemo(
+    () => (isDevMode() ? DEV_INITIAL_NUM_COLLABORATORS_INPUT : initialNumCollaborators(minNumCollaborators)),
+    [minNumCollaborators],
+  )
 
   const [feeConfigValues, reloadFeeConfigValues] = useFeeConfigValues()
   const maxFeesConfigMissing = useMemo(