dev(logs): show log button and add hint in dev mode

joinmarket-webui · Oct 18, 2023 · 8e7e511 · 8e7e511
1 parent 49e78a3
commit 8e7e511
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/components/LogOverlay.tsx b/src/components/LogOverlay.tsx
@@ -7,6 +7,7 @@ import { useSettings } from '../context/SettingsContext'
 import { CurrentWallet } from '../context/WalletContext'
 import Sprite from './Sprite'
 import styles from './LogOverlay.module.css'
+import { isDevMode } from '../constants/debugFeatures'
 
 const JMWALLETD_LOG_FILE_NAME = 'jmwalletd_stdout.log'
 
@@ -74,7 +75,7 @@ export function LogOverlay({ currentWallet, show, onHide }: LogOverlayProps) {
   const [alert, setAlert] = useState<SimpleAlert>()
   const [isInitialized, setIsInitialized] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
-  const [content, setContent] = useState<string | null>(null)
+  const [content, setContent] = useState<string>()
 
   const refresh = useCallback(
     (signal: AbortSignal) => {
@@ -85,9 +86,14 @@ export function LogOverlay({ currentWallet, show, onHide }: LogOverlayProps) {
           setAlert(undefined)
           setContent(data)
         })
-        .catch((err) => {
+        .catch((e) => {
           if (signal.aborted) return
-          setAlert({ variant: 'danger', message: t('logs.error_loading_logs_failed') })
+          setAlert({
+            variant: 'danger',
+            message: t('logs.error_loading_logs_failed', {
+              reason: e.message || t('global.errors.reason_unknown'),
+            }),
+          })
         })
         .finally(() => {
           if (signal.aborted) return
@@ -149,6 +155,13 @@ export function LogOverlay({ currentWallet, show, onHide }: LogOverlayProps) {
               })
           ) : (
             <>
+              {alert && !content && isDevMode() && (
+                <div className="my-4">
+                  <span className="badge rounded-pill bg-warning me-2">dev</span>
+                  In order to test the log file feature, start the application with
+                  <code className="mx-2">npm run dev:start:secondary</code>.
+                </div>
+              )}
               {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
               {content && (
                 <rb.Row>

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -16,7 +16,7 @@ import languages from '../i18n/languages'
 import styles from './Settings.module.css'
 import SeedModal from './settings/SeedModal'
 import FeeConfigModal from './settings/FeeConfigModal'
-import { isDebugFeatureEnabled } from '../constants/debugFeatures'
+import { isDebugFeatureEnabled, isDevMode } from '../constants/debugFeatures'
 import { isFeatureEnabled } from '../constants/features'
 import { CurrentWallet } from '../context/WalletContext'
 
@@ -93,7 +93,7 @@ export default function Settings({ wallet, stopWallet }: SettingsProps) {
       })
       .catch((_) => {
         if (abortCtrl.signal.aborted) return
-        setShowLogsEnabled(false)
+        setShowLogsEnabled(isDevMode())
       })
 
     return () => {