Removed bootstrap as a dependency.

client/index.pug

@@ -25,7 +25,6 @@ head
 
   meta(name='viewport', content='width=device-width, initial-scale=1')
   link(rel='shortcut icon', type='image/png', href=staticRoot+'img/favicon.png')
-  link(rel='stylesheet', href=staticRoot+'bootstrap.min.css')
   link(rel='stylesheet', href=staticRoot+cssPath)
 
   if process.env.CANONICAL_URL

client/package.json

@@ -18,7 +18,6 @@
     "@cycle/storage": "^5.1.2",
     "babelify": "^10.0.0",
     "basic-l10n": "^2.0.0",
-    "bootstrap": "^4.4.1",
     "browserify-package-json": "^1.0.1",
     "bs58check": "^2.1.2",
     "bundle-collapser": "^1.4.0",

client/src/app.js

@@ -26,10 +26,6 @@ import {
 import l10n, { defaultLang } from './l10n'
 import * as views from './views'
 
-if (process.browser) {
-  require('bootstrap/js/dist/collapse')
-}
-
 const apiBase = (process.env.API_URL || '/api').replace(/\/+$/, '')
     , setBase = ({ path, ...r }) => ({ ...r, url: path.includes('://') || path.startsWith('./') ? path : apiBase + path })
 
@@ -70,7 +66,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     , last_txids: parseHashes(loc.query.txids)
     , est_chain_seen_count: +loc.query.c || 0
     }))
-  , goAssetList$ = !process.env.IS_ELEMENTS ? O.empty() : route('/assets').map(loc => ({ 
+  , goAssetList$ = !process.env.IS_ELEMENTS ? O.empty() : route('/assets').map(loc => ({
       start_index: +loc.query.start_index || 0
     , sort_field: loc.query.sort_field != null ? loc.query.sort_field : 'name'
     , sort_dir: loc.query.sort_dir != null ? loc.query.sort_dir : 'asc'
@@ -150,7 +146,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
 
   , prevBlocks$ = process.browser ? O.empty()
       : goBlocks$.combineLatest(tipHeight$, (d, tipHeight) => d.start_height != null && d.start_height < tipHeight ? Math.min(tipHeight, d.start_height+blocksPerPage) : null)
-  
+
   // Single block and associated txs
   , block$ = reply('block').merge(goBlock$.mapTo(null))
   , blockStatus$ = reply('block-stat').merge(goBlock$.mapTo(null))
@@ -200,7 +196,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   , mempoolRecent$ = reply('recent')
 
   // dashboard
-  , dashboardState$ = O.combineLatest(blocks$, mempoolRecent$, (blks, txs) => 
+  , dashboardState$ = O.combineLatest(blocks$, mempoolRecent$, (blks, txs) =>
         ({ dashblocks: blks.slice(0, 5), dashTxs: txs.slice(0, 5)}))
 
   // Fee estimates

client/src/driver/instascan.js

@@ -15,7 +15,7 @@ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     document.body.appendChild(script)
   }
 
-  const Instascan$ = O.fromEvent(document.body, 'load', true).filter(e => e.target.src.endsWith('/instascan.min.js')).map(_ => window.Instascan).share()
+  const Instascan$ = O.fromEvent(document.body, 'load', true).filter(e => e.target?.src?.endsWith('/instascan.min.js')).map(_ => window.Instascan).share()
       , Scanner$   = Instascan$.map(Instascan => Instascan.Scanner)
       , Camera$    = Instascan$.map(Instascan => Instascan.Camera)
 

client/src/views/error.js

@@ -8,9 +8,10 @@ const formatError = err =>
 ? 'Esplora is currently unavailable, please try again later.'
 : (err.message || err.toString())
 
-export const error = ({ t, error, ...S }) => layout(<div>
-    <div className="container text-center"><h1>{ t(formatError(error)) }</h1></div>
-  </div>
+export const error = ({ t, error, ...S }) => layout(
+    <div>
+      <div className="error-text-center"><h1>{ t(formatError(error)) }</h1></div>
+    </div>
 , { t, ...S })
 
 export const notFound = S => error({ ...S, error: 'Page Not Found' })

client/src/views/home.js

@@ -6,19 +6,16 @@ import { transactions } from './transactions'
 const isTouch = process.browser && ('ontouchstart' in window)
 
 const homeLayout = (body, { t, activeTab, ...S }) => layout(
- <div>
-    { body }
-  </div>
+  body
 , { t, isTouch, activeTab, ...S })
 
 export const dashBoard = ({ t, blocks, dashboardState, loading, ...S }) => {
   const { dashblocks, dashTxs } = dashboardState || {}
 
 return (homeLayout(
-  <div className="container dash-container">
-      { blks( dashblocks, true, false, { t, ...S }) }
-      {transactions( dashTxs, true, { t } )}
-
-  </div>
+  [
+      blks( dashblocks, true, false, { t, ...S }),
+      transactions( dashTxs, true, { t } )
+  ]
   , { ...S, t, activeTab: 'dashBoard' })
 )}

client/src/views/layout.js

@@ -5,10 +5,8 @@ import subnav from './sub-navbar'
 
 export default (body, opt) =>
   <div className="explorer-container">
-    <div className="content-wrap">
       { navbar(opt) }
       {subnav(opt.t, opt.isTouch, opt.activeTab, opt.theme, opt.page)}
       { body }
-    </div>
     { footer(opt) }
   </div>

client/src/views/pushtx.js

@@ -7,7 +7,7 @@ export default ({ t, ...S }) => layout(
       <div className="container">
         <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>
+            <label className="rawtx-label" for="rawtx"><h1>{t`Broadcast raw transaction (hex)`}</h1></label>
             <textarea className="form-control" id="rawtx" name="tx" rows="5"></textarea>
           </div>
           <input type="submit" value={t`Broadcast transaction`} className="btn btn-primary btn-xl" />

client/src/views/sub-navbar.js

@@ -4,17 +4,15 @@ import menu from './navbar-menu'
 import networkSelection from './network-selection'
 
 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>
-        <a href="tx/recent" class={{ active: activeTab == 'recentTxs' }}>Transactions</a>
-        { process.env.IS_ELEMENTS ? <a href="assets" class={{ active: activeTab == 'assets' }}>Assets<sup className="highlight"></sup></a> : "" }
-        <a href="/explorer-api" class={{ active: activeTab == 'apiLanding' }}>Explorer API</a>
-      </div>
-
-      { search({ t, autofocus: !isTouch }) }
+  <div className="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>
+      <a href="tx/recent" class={{ active: activeTab == 'recentTxs' }}>Transactions</a>
+      { process.env.IS_ELEMENTS ? <a href="assets" class={{ active: activeTab == 'assets' }}>Assets<sup className="highlight"></sup></a> : "" }
+      <a href="/explorer-api" class={{ active: activeTab == 'apiLanding' }}>Explorer API</a>
     </div>
+
+    { search({ t, autofocus: !isTouch }) }
   </div>

client/src/views/transactions-all.js

@@ -11,8 +11,5 @@ const homeLayout = (body, { t, activeTab, ...S }) => layout(
    , { t, isTouch, activeTab, ...S })
 
 export const recentTxs = ({ mempoolRecent, t, ...S }) => homeLayout(
-    <div className="container">
-      {transactions( mempoolRecent, false, { t, ...S })}
-    </div>
+    transactions( mempoolRecent, false, { t, ...S })
   , { ...S, t, activeTab: 'recentTxs' })
-

www/light-theme_style.css

@@ -204,7 +204,7 @@ body.theme-light {
     color: #22242c;
 }
 
-.theme-light .dash-container .view-more img{
+.theme-light .view-more img{
    filter: brightness(0) saturate(100%) invert(40%) sepia(89%) saturate(604%) hue-rotate(159deg) brightness(91%) contrast(96%);
 }