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/addr.js

@@ -41,8 +41,8 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
     <div>
       <div className="addr-page">
         <div className="container">
-          <div className="row">
-            <div className="col-sm-8">
+          <div className="addr-header-layout">
+            <div className="addr-header-main">
               <h1 className="font-h2">{t`Address`}</h1>
               <div className="block-hash font-p1">
                 <span className="text-gray">{display_addr}</span>
@@ -51,8 +51,8 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
                 </div> }
               </div>
             </div>
-            {show_qr && <div className="col-sm-4">
-              <img className="float-sm-right address-qr-code" src={ addrQR } />
+            {show_qr && <div className="addr-header-qr">
+              <img className="address-qr-code" src={ addrQR } />
             </div>}
           </div>
         </div>
@@ -161,4 +161,3 @@ const pagingNav = (addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_
       </a>
   ]
 
-

client/src/views/block.js

@@ -166,9 +166,9 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) =>
 
 const btnDetails = (blockhash, isOpen, query, t) => process.browser
   // dynamic button in browser env
-  ? <div className="details-btn font-btn-2 font-h5 float-right mb-2" data-toggleBlock={blockhash}>{btnDetailsContent(isOpen, t)}</div>
+  ? <div className="details-btn block-details-btn font-btn-2 font-h5 float-right" data-toggleBlock={blockhash}>{btnDetailsContent(isOpen, t)}</div>
   // or a plain link in server-side rendered env
-  :  <a className="details-btn font-btn-2 font-h5 float-right mb-2" href={`block/${blockhash}${updateQuery(query, { expand: !isOpen })}`}>{btnDetailsContent(isOpen, t)}</a>
+  :  <a className="details-btn block-details-btn font-btn-2 font-h5 float-right" href={`block/${blockhash}${updateQuery(query, { expand: !isOpen })}`}>{btnDetailsContent(isOpen, t)}</a>
 
 const btnDetailsContent = (isOpen, t) =>
   <div role="button" tabindex="0">

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/lander.js

@@ -27,8 +27,8 @@ const logoSources = {
 const LandingPage = ({ t, theme, ...S }) => {
     const logos = logoSources[theme || 'dark']
     return  layout(
-    <div className="landing-page">   
-        <script src={`${staticRoot}/js/infinite-scroll.js`} async></script>   
+    <div className="landing-page">
+        <script src={`${staticRoot}/js/infinite-scroll.js`} async></script>
         <div className="blur-orange"></div>
         <div className="blur-green"></div>
         <div className="laser-lines"></div>
@@ -80,8 +80,8 @@ Faster, always available, and easy to integrate<br/> into wallets, exchanges, an
             </div>
         <div className="info-section">
             <div className="badge">WHY EXPLORER API</div>
-            <h2 className="font-h2 text-center">High performance service - optimized for scaling and uptime</h2>
-            <p className="font-p3 text-gray text-center">Proven in production, and trusted by some of the biggest names in the industry,<br/> our API is built to handle demanding workloads so your team can focus on growth.</p>
+            <h2 className="font-h2">High performance service - optimized for scaling and uptime</h2>
+            <p className="font-p3 text-gray">Proven in production, and trusted by some of the biggest names in the industry,<br/> our API is built to handle demanding workloads so your team can focus on growth.</p>
 
             <div className="info-cards">
                 <div className="info-card">
@@ -103,7 +103,7 @@ Faster, always available, and easy to integrate<br/> into wallets, exchanges, an
         </div>
         <div className="features-section">
             <div className="badge">FEATURES</div>
-            <h2 className="font-h2 text-center">Explorer handles millions of requests on globally distributed infrastructure so your services are always online</h2>
+            <h2 className="font-h2">Explorer handles millions of requests on globally distributed infrastructure so your services are always online</h2>
             <div className="features">
                 <div className="feature">
                     <img src={`${staticRoot}img/icons/issuance.svg`} alt="icon" />
@@ -134,6 +134,7 @@ Faster, always available, and easy to integrate<br/> into wallets, exchanges, an
         </div>
 
         <div className="cta-section">
+            <div className="landing-section-background"></div>
             <div className="container">
                 <div className="cta-card">
                     <div className="cta-left">
@@ -150,9 +151,10 @@ Faster, always available, and easy to integrate<br/> into wallets, exchanges, an
         </div>
 
         <div className="pricing-section">
+            <div className="landing-section-background"></div>
             <div className="container">
                 <div className="badge">OUR OFFER</div>
-                <h2 className="font-h2 text-center">Pricing</h2>
+                <h2 className="title font-h2">Pricing</h2>
                 <div className="pricing">
                     <div className="pricing-card">
                         <div className="pricing-card-title">
@@ -212,4 +214,4 @@ Faster, always available, and easy to integrate<br/> into wallets, exchanges, an
     , { t, activeTab: 'apiLanding', ...S })
 }
 
-export default LandingPage
+export default LandingPage

client/src/views/layout.js

@@ -5,10 +5,10 @@ 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)}
+    { navbar(opt) }
+    {subnav(opt.t, opt.isTouch, opt.activeTab, opt.theme, opt.page)}
+    <main className="explorer-main">
       { body }
-    </div>
+    </main>
     { footer(opt) }
   </div>

client/src/views/mempool.js

@@ -30,10 +30,10 @@ export default ({ t, mempool, feeEst, ...S }) => mempool && feeEst && layout(
       </div>
     </div>
     <div className="container">
-      <div className="row">
+      <div className="mempool-layout">
         { mempool.fee_histogram.length > 0 &&
-          <dl className="mempool-histogram col-md-8 col-sm-6">
-            <h4 className="text-center mb-3">Fee rate distribution</h4>
+          <dl className="mempool-histogram">
+            <h4 className="mempool-section-heading mb-3">Fee rate distribution</h4>
             { squashed = squashFeeHistogram(mempool.fee_histogram), squashed.map(([ rangeStart, binSize ], i) => binSize > 0 &&
               <dd>
                 <span className="text">{`${rangeStart.toFixed(1)}${i == 0 ? '+' : ' - '+squashed[i-1][0].toFixed(1)}`}</span>
@@ -45,9 +45,9 @@ export default ({ t, mempool, feeEst, ...S }) => mempool && feeEst && layout(
         }
 
         { !!Object.keys(feeEst).length &&
-          <div className="fee-estimates col-md-4 col-sm-6 text-center">
+          <div className="fee-estimates">
             <h4 className="mb-3">Fee rate estimates</h4>
-            <table className="table table-sm">
+            <table className="table">
                 <thead><tr><th>Target</th><th>sat/vB</th><th>Mempool depth</th></tr></thead>
                 { sortEst(feeEst).map(([ target, feerate ]) =>
                   <tr><td>{t`${target} blocks`}</td><td>{feerate.toFixed(2)}</td><td>{t`${formatVMB(getMempoolDepth(mempool.fee_histogram, feerate))} from tip`}</td></tr>

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' })
-

client/src/views/tx.js

@@ -43,7 +43,7 @@ export default ({ t, tx, tipHeight, spends, openTx, page, unblinded, ...S }) =>
     </div>
     <div className="container">
       {txHeader(tx, { t, tipHeight, ...S })}
-      {(unblinded && unblinded.error) ? <div className="text-center text-danger mt-3">{t`Warning:`} {unblinded.error.toString()}</div> : <div></div>}
+      {(unblinded && unblinded.error) ? <div className="transaction-warning text-danger mt-3">{t`Warning:`} {unblinded.error.toString()}</div> : <div></div>}
       {txBox(tx, { openTx, tipHeight, t, spends, query: page.query, ...S })}
     </div>
   </div>