chore(dev): dev setup info page (#686)

joinmarket-webui · Oct 31, 2023 · 26bb17b · 26bb17b
1 parent adfac29
commit 26bb17b
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 22 deletions.
diff --git a/docker/regtest/docker-compose.yml b/docker/regtest/docker-compose.yml
@@ -175,6 +175,10 @@ services:
       BTCEXP_BITCOIND_PORT: 43782
       BTCEXP_BITCOIND_USER: regtest
       BTCEXP_BITCOIND_PASS: regtest
+      BTCEXP_BASIC_AUTH_PASSWORD: joinmarket
+      BTCEXP_PRIVACY_MODE: 'true'
+      BTCEXP_NO_RATES: 'true'
+      BTCEXP_RPC_ALLOWALL: 'true'
     ports:
       - "3002:3002"
     depends_on:

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import {
@@ -27,7 +27,7 @@ import { isDebugFeatureEnabled } from '../constants/debugFeatures'
 import CreateWallet from './CreateWallet'
 import ImportWallet from './ImportWallet'
 import Earn from './Earn'
-import ErrorPage, { ErrorThrowingComponent } from './ErrorPage'
+import ErrorPage from './ErrorPage'
 import Footer from './Footer'
 import Jam from './Jam'
 import Layout from './Layout'
@@ -39,6 +39,7 @@ import Send from './Send'
 import RescanChain from './RescanChain'
 import Settings from './Settings'
 import Wallets from './Wallets'
+const DevSetupPage = lazy(() => import('./DevSetupPage'))
 
 export default function App() {
   const { t } = useTranslation()
@@ -168,6 +169,17 @@ export default function App() {
               {isDebugFeatureEnabled('errorExamplePage') && (
                 <Route id="error-example" path={routes.__errorExample} element={<ErrorThrowingComponent />} />
               )}
+              {isDebugFeatureEnabled('devSetupPage') && (
+                <Route
+                  id="dev-env"
+                  path={routes.__devSetup}
+                  element={
+                    <Suspense fallback={<Loading />}>
+                      <DevSetupPage />
+                    </Suspense>
+                  }
+                />
+              )}
               <Route id="404" path="*" element={<Navigate to={routes.home} replace={true} />} />
             </>
           )}
@@ -208,6 +220,23 @@ export default function App() {
   )
 }
 
+const Loading = () => {
+  const { t } = useTranslation()
+  return (
+    <div className="text-center">
+      <rb.Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" className="me-2" />
+      {t('global.loading')}
+    </div>
+  )
+}
+
+const ErrorThrowingComponent = () => {
+  useEffect(() => {
+    throw new Error('This error is thrown on purpose. Only to be used for testing.')
+  }, [])
+  return <></>
+}
+
 const RELOAD_WALLET_INFO_DELAY: {
   AFTER_RESCAN: Milliseconds
   AFTER_UNLOCK: Milliseconds

diff --git a/src/components/DevSetupPage.tsx b/src/components/DevSetupPage.tsx
@@ -0,0 +1,111 @@
+import { Link } from 'react-router-dom'
+import Sprite from './Sprite'
+import PageTitle from './PageTitle'
+import { routes } from '../constants/routes'
+
+const DEFAULT_BASIC_AUTH = {
+  user: 'joinmarket',
+  password: 'joinmarket',
+}
+
+const LINK_JM_REGTEST_JOINMARKET2 = 'http://localhost:29080'
+const LINK_JM_REGTEST_JOINMARKET2_AUTH = DEFAULT_BASIC_AUTH
+const LINK_JM_REGTEST_JOINMARKET3 = 'http://localhost:30080'
+const LINK_JM_REGTEST_EXPLORER = 'http://localhost:3002'
+const LINK_JM_REGTEST_EXPLORER_AUTH = DEFAULT_BASIC_AUTH
+const LINK_JM_REGTEST_RPC_TERMINAL = `${LINK_JM_REGTEST_EXPLORER}/rpc-terminal`
+
+export default function DevSetupPage() {
+  return (
+    <div>
+      <PageTitle title="Development setup" subtitle="" />
+      <div className="d-flex flex-column gap-3">
+        <div className="mb-4">
+          <h5>Test Wallet</h5>
+          <div className="ms-3 my-2">
+            Name: <span className="font-monospace">Satoshi</span>
+            <br />
+            Password: <span className="font-monospace">test</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="d-flex flex-column gap-3">
+        <div className="mb-4">
+          <h5>Links</h5>
+          <div className="my-2">
+            <Link className="link-dark" to={routes.__errorExample}>
+              Error Example Page
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <h5>Jam Instances</h5>
+        <div>
+          <div className="d-flex align-items-center">
+            <Sprite symbol="logo" width="24" height="24" className="me-2" />
+            <a href={LINK_JM_REGTEST_JOINMARKET2} target="_blank" rel="noopener noreferrer" className="link-dark">
+              jm_regtest_joinmarket2 ({LINK_JM_REGTEST_JOINMARKET2})
+            </a>
+            <span className="badge rounded-pill bg-primary ms-2">secondary</span>
+          </div>
+
+          <div className="ms-5 my-2">
+            Basic Authentication
+            <br />
+            <small>
+              User: <span className="font-monospace">{LINK_JM_REGTEST_JOINMARKET2_AUTH.user}</span>
+              <br />
+              Password: <span className="font-monospace">{LINK_JM_REGTEST_JOINMARKET2_AUTH.password}</span>
+            </small>
+          </div>
+          <div className="d-flex align-items-center">
+            <Sprite symbol="logo" width="24" height="24" className="me-2" />
+            <a href={LINK_JM_REGTEST_JOINMARKET3} target="_blank" rel="noopener noreferrer" className="link-dark">
+              jm_regtest_joinmarket3 ({LINK_JM_REGTEST_JOINMARKET3})
+            </a>
+            <span className="badge rounded-pill bg-success ms-2">tertiary</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <h5>Block Explorer</h5>
+        <div>
+          {' '}
+          <div className="d-flex align-items-center">
+            <Sprite symbol="block" width="24" height="24" className="me-2" />
+
+            <a href={LINK_JM_REGTEST_EXPLORER} target="_blank" rel="noopener noreferrer" className="link-dark">
+              jm_regtest_explorer ({LINK_JM_REGTEST_EXPLORER})
+            </a>
+          </div>
+          <div className="ms-5 my-2">
+            Basic Authentication
+            <br />
+            <small>
+              User: <span className="font-monospace">{LINK_JM_REGTEST_EXPLORER_AUTH.user}</span>
+              <br />
+              Password: <span className="font-monospace">{LINK_JM_REGTEST_EXPLORER_AUTH.password}</span>
+            </small>
+          </div>
+        </div>
+        <div>
+          <div className="d-flex align-items-center">
+            <Sprite symbol="console" width="24" height="24" className="me-2" />
+
+            <a href={LINK_JM_REGTEST_RPC_TERMINAL} target="_blank" rel="noopener noreferrer" className="link-dark">
+              Regtest RPC Terminal ({LINK_JM_REGTEST_RPC_TERMINAL})
+            </a>
+          </div>
+          <div className="ms-5 my-2">
+            Mine a block, e.g.:
+            <pre>generatetoaddress 1 bcrt1qrnz0thqslhxu86th069r9j6y7ldkgs2tzgf5wx</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
@@ -3,14 +3,6 @@ import * as rb from 'react-bootstrap'
 import { useRouteError } from 'react-router-dom'
 import PageTitle from './PageTitle'
 import { t } from 'i18next'
-import { useEffect } from 'react'
-
-export function ErrorThrowingComponent() {
-  useEffect(() => {
-    throw new Error('This error is thrown on purpose. Only to be used for testing.')
-  }, [])
-  return <></>
-}
 
 interface ErrorViewProps {
   title: string

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -8,8 +8,10 @@ import { useCurrentWallet } from '../context/WalletContext'
 import Sprite from './Sprite'
 import Cheatsheet from './Cheatsheet'
 import packageInfo from '../../package.json'
-import { isDevMode } from '../constants/debugFeatures'
+import { isDebugFeatureEnabled, isDevMode } from '../constants/debugFeatures'
 import { toSemVer } from '../utils'
+import { Link } from 'react-router-dom'
+import { routes } from '../constants/routes'
 
 const APP_DISPLAY_VERSION = (() => {
   const version = toSemVer(packageInfo.version)
@@ -52,7 +54,7 @@ export default function Footer() {
               <rb.Card.Title className="text-center mb-3">{t('footer.warning_alert_title')}</rb.Card.Title>
               <p>{t('footer.warning_alert_text')}</p>
               <p className="text-secondary">
-                JoinMarket: v{serviceInfo?.server?.version?.raw || 'unknown'}
+                JoinMarket: v{serviceInfo?.server?.version?.raw || '_unknown'}
                 <br />
                 Jam: v{APP_DISPLAY_VERSION}
               </p>
@@ -68,13 +70,13 @@ export default function Footer() {
 
       <rb.Nav as="footer" className="border-top py-2">
         <rb.Container fluid="xl" className="d-flex justify-content-center py-2 px-4">
-          <div className="d-none d-md-flex flex-1 order-0 justify-content-start align-items-center">
-            <div className="warning-hint text-start text-secondary">
+          <div className="flex-1 order-0 justify-content-start align-items-center">
+            <div className="text-small text-start text-secondary">
               <Trans i18nKey="footer.warning">
                 This is pre-alpha software.
                 <rb.Button
                   variant="link"
-                  className="warning-hint text-start border-0 p-0 text-secondary"
+                  className="text-small text-start border-0 p-0 text-secondary"
                   onClick={() => setShowBetaWarning(true)}
                 >
                   Read this before using.
@@ -102,7 +104,14 @@ export default function Footer() {
             )}
           </div>
           <div className="d-flex flex-1 order-2 justify-content-end align-items-center gap-1">
-            <div className="warning-hint text-start text-secondary d-none d-md-block pe-1">
+            {isDebugFeatureEnabled('devSetupPage') && (
+              <div className="d-none d-md-block text-small text-start mx-1">
+                <Link className="text-warning" to={routes.__devSetup}>
+                  Dev Setup
+                </Link>
+              </div>
+            )}
+            <div className="text-small text-start text-secondary mx-1">
               <a
                 href="https://github.com/joinmarket-webui/jam/tags"
                 target="_blank"
@@ -112,7 +121,7 @@ export default function Footer() {
                 v{APP_DISPLAY_VERSION}
               </a>
             </div>
-            <div className="d-flex gap-2 pe-2">
+            <div className="d-flex gap-2 me-2">
               <a
                 href="https://github.com/joinmarket-webui/jam"
                 target="_blank"
@@ -130,7 +139,7 @@ export default function Footer() {
                 <Sprite symbol="telegram" width="18px" height="18px" />
               </a>
             </div>
-            <div className="d-flex text-secondary">|</div>
+            <div className="text-secondary">|</div>
             <div className="d-flex">
               <rb.OverlayTrigger
                 delay={{ hide: 300, show: 200 }}

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -299,6 +299,11 @@ export default function Navbar() {
                     <span>{t('navbar.menu')}</span>
                   </rb.Navbar.Toggle>
                 </div>
+                {isDebugFeatureEnabled('fastThemeToggle') && (
+                  <rb.Nav.Item className="d-none d-md-flex align-items-center pe-2">
+                    <FastThemeToggle />
+                  </rb.Nav.Item>
+                )}
                 <rb.Navbar.Offcanvas className={`navbar-offcanvas navbar-${settings.theme}`} placement="end">
                   <rb.Offcanvas.Header>
                     <rb.Offcanvas.Title>{t('navbar.title')}</rb.Offcanvas.Title>
@@ -314,6 +319,15 @@ export default function Navbar() {
                           {t('navbar.button_create_wallet')}
                         </Link>
                       </rb.Nav.Item>
+                      <rb.Nav.Item>
+                        <Link
+                          to={routes.importWallet}
+                          onClick={() => isExpanded && setIsExpanded(false)}
+                          className="nav-link"
+                        >
+                          {t('navbar.button_import_wallet')}
+                        </Link>
+                      </rb.Nav.Item>
                     </rb.Nav>
                   </rb.Offcanvas.Body>
                 </rb.Navbar.Offcanvas>

diff --git a/src/constants/debugFeatures.ts b/src/constants/debugFeatures.ts
@@ -3,6 +3,7 @@ interface DebugFeatures {
   allowCreatingExpiredFidelityBond: boolean
   skipWalletBackupConfirmation: boolean
   errorExamplePage: boolean
+  devSetupPage: boolean
   importDummyMnemonicPhrase: boolean
   rescanChainPage: boolean
   fastThemeToggle: boolean
@@ -15,6 +16,7 @@ const debugFeatures: DebugFeatures = {
   insecureScheduleTesting: devMode,
   skipWalletBackupConfirmation: devMode,
   errorExamplePage: devMode,
+  devSetupPage: devMode,
   importDummyMnemonicPhrase: devMode,
   rescanChainPage: devMode,
   fastThemeToggle: devMode,

diff --git a/src/constants/routes.ts b/src/constants/routes.ts
@@ -11,6 +11,7 @@ export const routes = {
   importWallet: '/import-wallet',
   rescanChain: '/rescan',
   __errorExample: '/error-example',
+  __devSetup: '/dev-setup',
 }
 
 export type Route = keyof typeof routes
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -37,6 +37,7 @@
     "title": "Jam",
     "text_rescan_in_progress": "Rescanning...",
     "button_create_wallet": "Create Wallet",
+    "button_import_wallet": "Import Wallet",
     "tab_send": "Send",
     "tab_receive": "Receive",
     "tab_earn": "Earn",

diff --git a/src/index.css b/src/index.css
@@ -573,10 +573,6 @@ h2 {
 }
 /* Alpha Warning */
 
-.warning-hint {
-  font-size: 0.8rem;
-}
-
 .warning-card-wrapper {
   position: fixed;
   height: 100%;
@@ -726,6 +722,7 @@ h2 {
 
 :root[data-theme='dark'] .link-dark {
   color: var(--bs-white) !important;
+  text-decoration-color: RGBA(var(--bs-white), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 :root[data-theme='dark'] .toast {