dev: always show logs button in dev mode (#681)

joinmarket-webui · Nov 2, 2023 · b6a568e · b6a568e
1 parent 8e40239
commit b6a568e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 19 deletions.
diff --git a/src/components/LogOverlay.module.css b/src/components/LogOverlay.module.css
@@ -1,5 +1,5 @@
 .logContentPlaceholder {
-  height: 1rem;
+  height: 2.625rem;
   margin: 1px 0;
 }
 

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
@@ -138,7 +144,7 @@ export function LogOverlay({ currentWallet, show, onHide }: LogOverlayProps) {
       <rb.Offcanvas.Body>
         <rb.Container fluid="lg" className="py-3">
           {!isInitialized && isLoading ? (
-            Array(12)
+            Array(5)
               .fill('')
               .map((_, index) => {
                 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/Orderbook.module.css b/src/components/Orderbook.module.css
@@ -1,4 +1,4 @@
-.orderbook-line-placeholder {
+.orderbookContentPlaceholder {
   height: 2.625rem;
   margin: 1px 0;
 }

diff --git a/src/components/Orderbook.tsx b/src/components/Orderbook.tsx
@@ -461,7 +461,7 @@ export function OrderbookOverlay({ nickname, show, onHide }: OrderbookOverlayPro
               .map((_, index) => {
                 return (
                   <rb.Placeholder key={index} as="div" animation="wave">
-                    <rb.Placeholder xs={12} className={styles['orderbook-line-placeholder']} />
+                    <rb.Placeholder xs={12} className={styles.orderbookContentPlaceholder} />
                   </rb.Placeholder>
                 )
               })

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'
 
@@ -86,11 +86,14 @@ export default function Settings({ wallet, stopWallet }: SettingsProps) {
       .then((data) => data && data.features)
       .then((features) => {
         if (abortCtrl.signal.aborted) return
-        setShowLogsEnabled(features && features.logs === true)
+        const hasLogsFeatureOld = features && features.logs === true
+        const hasLogsFeature =
+          features && Array.isArray(features) && features.some((it) => it.name === 'logs' && it.enabled === true)
+        setShowLogsEnabled(hasLogsFeatureOld || hasLogsFeature)
       })
       .catch((_) => {
         if (abortCtrl.signal.aborted) return
-        setShowLogsEnabled(false)
+        setShowLogsEnabled(isDevMode())
       })
 
     return () => {
@@ -179,15 +182,6 @@ export default function Settings({ wallet, stopWallet }: SettingsProps) {
         </rb.Button>
         {showingFeeConfig && <FeeConfigModal show={showingFeeConfig} onHide={() => setShowingFeeConfig(false)} />}
 
-        {showLogsEnabled && (
-          <>
-            <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={() => setShowingLogs(true)}>
-              <Sprite symbol="console" width="24" height="24" />
-              {t('settings.show_logs')}
-            </rb.Button>
-            <LogOverlay currentWallet={wallet} show={showingLogs} onHide={() => setShowingLogs(false)} />
-          </>
-        )}
         <div className={styles['section-title']}>{t('settings.section_title_wallet')}</div>
         <div className={styles['settings-group-container']}>
           <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={(e) => setShowingSeed(true)}>
@@ -230,6 +224,16 @@ export default function Settings({ wallet, stopWallet }: SettingsProps) {
               </span>
             </Link>
           )}
+
+          {showLogsEnabled && (
+            <>
+              <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={() => setShowingLogs(true)}>
+                <Sprite symbol="console" width="24" height="24" />
+                {t('settings.show_logs')}
+              </rb.Button>
+              <LogOverlay currentWallet={wallet} show={showingLogs} onHide={() => setShowingLogs(false)} />
+            </>
+          )}
         </div>
 
         <div className={styles['section-title']}>{t('settings.section_title_community')}</div>