fix: do not enable debug features on npm start (#549)

* dev(flags): add distinct dev mode for local development

* docs(dev): npm start -> npm run dev:start

* chore(features): move skipWalletBackupConfirmation flag to debugFeatures.ts

CONTRIBUTING.md

@@ -44,7 +44,7 @@ This creates and funds a wallet `Satoshi` with password `test`.
 Start the UI on port 3000:
 
 ```sh
-npm start
+npm run dev:start
 ```
 
 Make your changes and be sure to manually test them before submitting them to us.
@@ -100,7 +100,7 @@ This creates and funds a wallet `Satoshi` with password `test`.
 Start the UI on port 3000:
 
 ```sh
-npm start
+npm run dev:start
 ```
 
 Enjoy the test drive!

docker/regtest/readme.md

@@ -22,7 +22,7 @@ npm run regtest:init
 npm run regtest:mine
 
 # start jam in development mode
-npm start
+npm run dev:start
 
 [...]
 
@@ -49,7 +49,7 @@ npm run regtest:init
 Once the regtest environment is up and running you can start Jam with:
 
 ```sh
-npm start
+npm run dev:start
 ```
 
 ### Stop

docs/developing.md

@@ -11,7 +11,7 @@ For a complete development environment you need a local JoinMarket instance that
 ## Linting
 
 We use Create React App's [default ESLint integration](https://create-react-app.dev/docs/setting-up-your-editor/#displaying-lint-output-in-the-editor).
-You'll see linting issues in the console when running the app with `npm start`.
+You'll see linting issues in the console when running the app with `npm run dev:start`.
 Pull request builds will fail if ESLint is not happy with the code.
 
 ## Code Formatting
@@ -118,5 +118,5 @@ In short:
 ```bash
 git clone https://github.com/joinmarket-webui/jam.git
 cd jam/
-npm install && npm start
+npm install && npm run dev:start
 ```

package.json

@@ -48,14 +48,15 @@
     "serve": "14.0.1"
   },
   "scripts": {
+    "dev:start": "REACT_APP_JAM_DEV_MODE=true npm start",
+    "dev:start:secondary": "PORT=3001 JAM_BACKEND=jam-standalone JAM_API_PORT=29080 npm run dev:start",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "postinstall": "husky install",
     "lint": "prettier --check --no-error-on-unmatched-pattern 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
     "format": "prettier --write --no-error-on-unmatched-pattern 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
-    "start:regtest:secondary": "PORT=3001 JAM_BACKEND=jam-standalone JAM_API_PORT=29080 npm start",
     "version": "node scripts/changelog.mjs && git checkout -b \"prepare-v${npm_package_version}-$(date +%s)\" && git add --all && git commit --message \"chore(release): v${npm_package_version}\" && git push --set-upstream origin $(git branch --show-current)",
     "postversion": "which gh && gh pr create --title \"chore(release): v${npm_package_version}\" --body \"Prepares the v${npm_package_version} release.\" --assignee @me --label release --repo joinmarket-webui/jam --draft",
     "regtest:build": "npm run regtest:clear && docker-compose --env-file docker/regtest/.env.example --file docker/regtest/docker-compose.yml build --pull",

src/components/CreateWallet.jsx

@@ -10,7 +10,7 @@ import { walletDisplayName } from '../utils'
 import { useServiceInfo } from '../context/ServiceInfoContext'
 import * as Api from '../libs/JmWalletApi'
 import { routes } from '../constants/routes'
-import { isFeatureEnabled } from '../constants/features'
+import { isDebugFeatureEnabled } from '../constants/debugFeatures'
 import styles from './CreateWallet.module.css'
 
 const PreventLeavingPageByMistake = () => {
@@ -192,7 +192,7 @@ const BackupConfirmation = ({ createdWallet, walletConfirmed, parentStepSetter }
   const { t } = useTranslation()
   const [seedBackup, setSeedBackup] = useState(false)
   const [seedWordConfirmations, setSeedWordConfirmations] = useState(new Array(seedphrase.length).fill(false))
-  const [showSkipButton] = useState(isFeatureEnabled('skipWalletBackupConfirmation'))
+  const [showSkipButton] = useState(isDebugFeatureEnabled('skipWalletBackupConfirmation'))
 
   useEffect(() => {
     setSeedBackup(seedWordConfirmations.every((wordConfirmed) => wordConfirmed))

src/components/CreateWallet.test.jsx

@@ -2,7 +2,7 @@ import { BrowserRouter } from 'react-router-dom'
 import user from '@testing-library/user-event'
 import { render, screen, waitFor } from '../testUtils'
 import { act } from 'react-dom/test-utils'
-import { __testSetFeatureEnabled } from '../constants/features'
+import { __testSetDebugFeatureEnabled } from '../constants/debugFeatures'
 
 import * as apiMock from '../libs/JmWalletApi'
 
@@ -159,7 +159,7 @@ describe('<CreateWallet />', () => {
   })
 
   it('should verify that "skip" button IS visible when feature is enabled', async () => {
-    __testSetFeatureEnabled('skipWalletBackupConfirmation', true)
+    __testSetDebugFeatureEnabled('skipWalletBackupConfirmation', true)
 
     apiMock.postWalletCreate.mockResolvedValueOnce({
       ok: true,

src/constants/debugFeatures.ts

@@ -1,22 +1,20 @@
 interface DebugFeatures {
   insecureScheduleTesting: boolean
   allowCreatingExpiredFidelityBond: boolean
+  skipWalletBackupConfirmation: boolean
 }
 
-const devMode = process.env.NODE_ENV === 'development'
+const devMode = process.env.NODE_ENV === 'development' && process.env.REACT_APP_JAM_DEV_MODE === 'true'
 
 const debugFeatures: DebugFeatures = {
-  insecureScheduleTesting: true,
-  allowCreatingExpiredFidelityBond: true,
+  allowCreatingExpiredFidelityBond: devMode,
+  insecureScheduleTesting: devMode,
+  skipWalletBackupConfirmation: devMode,
 }
 
 type DebugFeature = keyof DebugFeatures
 
 export const isDebugFeatureEnabled = (name: DebugFeature): boolean => {
-  if (!devMode) {
-    return false
-  }
-
   return debugFeatures[name] || false
 }