Blockstream · Randy808 · Apr 1, 2026
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,4 @@ data_bitcoin_testnet/
 data_bitcoin_testnet4/
 data_bitcoin_signet/
 data_liquid_testnet/
+.DS_Store
diff --git a/client/npm-shrinkwrap.json b/client/npm-shrinkwrap.json
diff --git a/client/src/views/footer.js b/client/src/views/footer.js
@@ -9,7 +9,7 @@ export default ({ t, page }) =>
     <div className="container">
       <div className="footer_container_content">
         <div className="language">
-          <form method="get">
+          <form className="footer-form" method="get">
             { !process.browser && Object.entries(page.query).map(([k, v]) =>
               k != 'lang' && <input type="hidden" name={k} value={v} />
             ) }

diff --git a/client/src/views/layout.js b/client/src/views/layout.js
@@ -7,7 +7,7 @@ export default (body, opt) =>
   <div className="explorer-container">
     <div className="content-wrap">
       { navbar(opt) }
-      {subnav(opt.t, opt.isTouch, opt.activeTab)}
+      {subnav(opt.t, opt.isTouch, opt.activeTab, opt.theme, opt.page)}
       { body }
     </div>
     { footer(opt) }

diff --git a/client/src/views/navbar-menu.js b/client/src/views/navbar-menu.js
@@ -10,15 +10,5 @@ const staticRoot = process.env.STATIC_ROOT || ''
 export default ({ t, theme, page }) =>
 
 <div className="main-nav-container">
-  <ul className="main-nav">
-    { items && Object.entries(items).map(([ name, url ]) =>
-        <li id={name.replace(/ /g, '')} className={`nav-item ${name == active ? 'active' : ''}`}>
-          <a className="nav-link font-h4" href={url} rel="external">
-            <span><img className="menu-logo" alt="" src={`${staticRoot}img/icons/${name.replace(/ /g, '')}-menu-logo.svg`} /></span>
-            <span>{t(name)}</span>
-          </a>
-        </li>
-    ) }
-  </ul>
-    { process.env.NAVBAR_HTML ? navToggle(t, theme, page) : "" }
-  </div>
+  { process.env.NAVBAR_HTML ? navToggle(t, theme, page) : "" }
+</div>
diff --git a/client/src/views/network-selection.js b/client/src/views/network-selection.js
@@ -0,0 +1,66 @@
+import Snabbdom from "snabbdom-pragma";
+import navToggle from "./nav-toggle";
+
+const items = process.env.MENU_ITEMS && JSON.parse(process.env.MENU_ITEMS),
+  active = process.env.MENU_ACTIVE;
+
+const staticRoot = process.env.STATIC_ROOT || "";
+
+export default ({ t, theme, page }) => (
+  <div className="main-nav-container">
+    {items && (
+      <ul className="main-nav">
+        <li id={active.replace(/ /g, "")} className={`nav-item active`}>
+          <a className="nav-link font-h4" rel="external">
+            <span>
+              <img
+                className="menu-logo"
+                alt=""
+                src={`${staticRoot}img/icons/${active.replace(/ /g, "")}-menu-logo.svg`}
+              />
+            </span>
+            <span>{t(active)}</span>
+            <svg
+              className="network-angle-down"
+              width="17"
+              height="9"
+              viewBox="0 0 17 9"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M0.219933 0.220005C0.289589 0.150273 0.372307 0.0949535 0.463356 0.05721C0.554403 0.0194674 0.651998 4.1008e-05 0.750559 4.1008e-05C0.84912 4.1008e-05 0.946717 0.0194674 1.03777 0.05721C1.12881 0.0949535 1.21153 0.150273 1.28118 0.220005L8.25056 7.19032L15.2199 0.220005C15.3607 0.0792751 15.5515 0.000212669 15.7506 0.000212669C15.9496 0.000212669 16.1405 0.0792751 16.2812 0.220005C16.4219 0.360736 16.501 0.551608 16.501 0.75063C16.501 0.949654 16.4219 1.14053 16.2812 1.28126L8.78119 8.78126C8.71153 8.85099 8.62881 8.90631 8.53776 8.94405C8.44672 8.98179 8.34912 9.00122 8.25056 9.00122C8.152 9.00122 8.0544 8.98179 7.96335 8.94405C7.87231 8.90631 7.78959 8.85099 7.71993 8.78126L0.219933 1.28126C0.150202 1.2116 0.0948811 1.12888 0.0571384 1.03784C0.0193958 0.946787 -3.05176e-05 0.849193 -3.05176e-05 0.75063C-3.05176e-05 0.652069 0.0193958 0.554474 0.0571384 0.463426C0.0948811 0.372376 0.150202 0.28966 0.219933 0.220005Z" />
+            </svg>
+          </a>
+
+          <div className="network-hover-menu-container">
+            <div className="network-hover-menu">
+              {items &&
+                Object.entries(items).map(([name, url]) => {
+                  return (
+                    <a
+                      id={name.replace(/ /g, "")}
+                      href={url}
+                      className={`network-hover-menu-option-container ${name.replace(/ /g, "").toLowerCase()} ${name === active ? "active" : ""}`}
+                    >
+                      <div
+                        id={name.replace(/ /g, "")}
+                        className={`network-hover-menu-option`}
+                      >
+                        <span>
+                          <img
+                            className="menu-logo"
+                            src={`${staticRoot}img/icons/${name.replace(/ /g, "")}-menu-logo.svg`}
+                          />
+                        </span>
+                        {t(name)}
+                      </div>
+                    </a>
+                  );
+                })}
+            </div>
+          </div>
+        </li>
+      </ul>
+    )}
+  </div>
+);
diff --git a/client/src/views/pushtx.js b/client/src/views/pushtx.js
@@ -5,7 +5,7 @@ export default ({ t, ...S }) => layout(
   <div>
     <div className="block-page">
       <div className="container">
-        <form data-do="pushtx" method="post" action="tx/push">
+        <form className="push-tx-form" data-do="pushtx" method="post" action="tx/push">
           <div className="form-group">
             <label className="col-form-label col-form-label-lg" for="rawtx"><h1>{t`Broadcast raw transaction (hex)`}</h1></label>
             <textarea className="form-control" id="rawtx" name="tx" rows="5"></textarea>

diff --git a/client/src/views/search.js b/client/src/views/search.js
@@ -6,6 +6,7 @@ const hasCam = process.browser && navigator.mediaDevices && navigator.mediaDevic
 export default ({ t, klass, autofocus }) =>
   <form className="search" action={process.browser?undefined:"search"}>
     <div className={`search-bar${klass?` ${klass}` : ''}`}>
+      <img src={`${staticRoot}img/icons/magnifying-glass.svg`}/>
       <input
         className="form-control search-bar-input"
         type="search"
@@ -17,6 +18,5 @@ export default ({ t, klass, autofocus }) =>
         autocomplete="off"
       />
       { hasCam ? <a className="qrcode-link" href="scan-qr"><img src={`${staticRoot}img/icons/qrcode.svg`}/></a>: "" }
-      <button className="search-bar-submit" type="image"></button>
     </div>
   </form>
diff --git a/client/src/views/sub-navbar.js b/client/src/views/sub-navbar.js
@@ -1,9 +1,12 @@
 import Snabbdom from 'snabbdom-pragma'
 import search from './search'
+import menu from './navbar-menu'
+import networkSelection from './network-selection'
 
-export default ( t, isTouch, activeTab) =>
+export default ( t, isTouch, activeTab, theme, page) =>
   <div className="sub-navbar">
     <div className="container sub-nav-container">
+      { networkSelection({t, theme, page}) }
       <div className="sub-nav font-h5">
         <a href="." class={{ active: activeTab == 'dashBoard' }}>Dashboard</a>
         <a href="blocks/recent" class={{ active: activeTab == 'recentBlocks' }}>Blocks</a>

diff --git a/dev-server.js b/dev-server.js
@@ -9,6 +9,10 @@ import cssjanus from 'cssjanus'
 const rpath = p => pathu.join(__dirname, p)
 
 const app = express()
+const router = express.Router()
+const baseHref = process.env.BASE_HREF || '/'
+const basePath = baseHref === '/' ? '/' : `/${baseHref.replace(/^\/+|\/+$/g, '')}`
+const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 
 app.engine('pug', pug.__express)
 
@@ -33,19 +37,31 @@ const custom_assets = (process.env.CUSTOM_ASSETS||'').split(/ +/).filter(Boolean
 
 const p = fn => (req, res, next) => fn(req, res).catch(next)
 
-app.get('/', (req, res) => res.render(rpath('client/index.pug')))
-app.get('/app.js', browserify(rpath('client/src/run-browser.js')))
+if (basePath !== '/') {
+  app.get('/', (req, res) => {
+    const query = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : ''
+    res.redirect(302, `${basePath}/${query}`)
+  })
+
+  app.get(new RegExp(`^${escapeRegExp(basePath)}$`), (req, res) => {
+    const query = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : ''
+    res.redirect(302, `${basePath}/${query}`)
+  })
+}
+
+router.get('/', (req, res) => res.render(rpath('client/index.pug')))
+router.get('/app.js', browserify(rpath('client/src/run-browser.js')))
 
 // Merges the main stylesheet from www/style.css with the custom css files
-app.get('/style.css', p(async (req, res) =>
+router.get('/style.css', p(async (req, res) =>
   res.type('css').send(await prepCss())))
 
 const prepCss = async _ =>
   (await Promise.all([ rpath('www/style.css'), ...custom_css ].map(path => fsp.readFile(path))))
     .join('\n')
 
 // Automatically adjust CSS for RTL using cssjanus
-app.get('/style-rtl.css', p(async (req, res) =>
+router.get('/style-rtl.css', p(async (req, res) =>
   res.type('css').send(cssjanus.transform(await prepCss()))))
 
 // Add handlers for custom asset overrides
@@ -58,15 +74,17 @@ custom_assets.forEach(pattern => {
         , stat = fs.statSync(path)
 
     stat.isDirectory()
-      ? app.use('/'+name, express.static(path))
-      : app.get('/'+name, (req, res) => res.sendFile(path))
+      ? router.use(`/${name}`, express.static(path))
+      : router.get(`/${name}`, (req, res) => res.sendFile(path))
   })
 })
 
 // And finally the default fallback assets from www/
-app.use('/', express.static(rpath('www')))
+router.use(express.static(rpath('www')))
+
+router.use((req, res) => res.render(rpath('client/index.pug')))
 
-app.use((req, res) => res.render(rpath('client/index.pug')))
+app.use(basePath, router)
 
 app.listen(process.env.PORT || 5000, function(){
   console.log(`HTTP server running on ${this.address().address}:${this.address().port}`)

diff --git a/flavors/bitcoin-mainnet/config.env b/flavors/bitcoin-mainnet/config.env
@@ -5,3 +5,4 @@ export HOME_TITLE='Bitcoin Explorer'
 export NATIVE_ASSET_LABEL=BTC
 export NATIVE_ASSET_NAME=Bitcoin
 export MENU_ACTIVE='Bitcoin'
+export BASE_HREF=${BASE_HREF:-'/'}
diff --git a/flavors/bitcoin-regtest/www/img/icons/menu-logo.png b/flavors/bitcoin-regtest/www/img/icons/menu-logo.png
diff --git a/flavors/bitcoin-testnet/extras.css b/flavors/bitcoin-testnet/extras.css
@@ -1,20 +1,8 @@
-#BitcoinTestnet, #LiquidTestnet{
-    display: block;
+.sub-nav .active:after {
+  background: #8C8C8C;
 }
 
-#Bitcoin, #Liquid{
-    display: none;
-}
-
-.main-nav li.active a{
-    border: 1px solid rgba(168, 184, 201, 1);
-}
-
-.sub-nav .active {
-    border-bottom: solid 2px rgba(168, 184, 201, 1);
-}
-
-.details-btn > div { 
+.details-btn > div {
     color: rgba(168, 184, 201, 1);
     border: 1px solid rgba(168, 184, 201, 1);
 }
@@ -31,10 +19,6 @@
     display: none;
 }
 
-.main-nav li a{
-    color: #78838e;
-}
-
 .nav-link:hover{
     color: white !important;
 }

diff --git a/flavors/bitcoin-testnet/www/img/favicon.png b/flavors/bitcoin-testnet/www/img/favicon.png
diff --git a/flavors/bitcoin-testnet4/extras.css b/flavors/bitcoin-testnet4/extras.css
@@ -1,20 +1,8 @@
-#BitcoinTestnet, #LiquidTestnet{
-    display: block;
+.sub-nav .active:after {
+  background: #8C8C8C;
 }
 
-#Bitcoin, #Liquid{
-    display: none;
-}
-
-.main-nav li.active a{
-    border: 1px solid rgba(168, 184, 201, 1);
-}
-
-.sub-nav .active {
-    border-bottom: solid 2px rgba(168, 184, 201, 1);
-}
-
-.details-btn > div { 
+.details-btn > div {
     color: rgba(168, 184, 201, 1);
     border: 1px solid rgba(168, 184, 201, 1);
 }
@@ -31,10 +19,6 @@
     display: none;
 }
 
-.main-nav li a{
-    color: #78838e;
-}
-
 .nav-link:hover{
     color: white !important;
 }

diff --git a/flavors/liquid-mainnet/extras.css b/flavors/liquid-mainnet/extras.css
@@ -1,9 +1,16 @@
 
-.sub-nav .active{
-  border-bottom: solid 2px #46beae;
+.sub-nav .active:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #46beae;
+    height: 3px;
+    border-radius: 10px;
 }
 
-.details-btn > div { 
+.details-btn > div {
     color: #46beae;
     border: 1px solid #46beae;
     background: none;
@@ -15,8 +22,4 @@
 
 .navbar {
     background-image: linear-gradient(-90deg, rgba(13, 141, 119, 1) 0%, rgba(17, 103, 97, 1) 16%, rgba(25, 68, 74, 1) 35%, rgba(29, 42, 48, 1) 57%, rgba(14, 16, 17, 1) 100%);
-}
-
-.main-nav li.active a{
-  border: 1px solid #46beae;
 }
diff --git a/flavors/liquid-mainnet/www/img/favicon.png b/flavors/liquid-mainnet/www/img/favicon.png
diff --git a/flavors/liquid-testnet/extras.css b/flavors/liquid-testnet/extras.css
@@ -1,21 +1,8 @@
-
-#BitcoinTestnet, #LiquidTestnet{
-    display: block;
-}
-
-#Bitcoin, #Liquid{
-    display: none;
+.sub-nav .active:after {
+  background: #8C8C8C;
 }
 
-.main-nav li.active a{
-    border: 1px solid rgba(168, 184, 201, 1);
-}
-
-.sub-nav .active {
-    border-bottom: solid 2px rgba(168, 184, 201, 1);
-}
-
-.details-btn > div { 
+.details-btn > div {
     color: rgba(168, 184, 201, 1);
     border: 1px solid rgba(168, 184, 201, 1);
 }
@@ -36,10 +23,6 @@
     display: flex;
 }
 
-.main-nav li a{
-    color: #78838e;
-}
-
 .nav-link:hover{
     color: white !important;
 }