Extract reusable Tooltip component and improve mobile responsiveness.

client/src/app.js

@@ -547,6 +547,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     })
 
     on('.table-copy-button', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation())
+    on('.tooltip', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation())
 
     on('.toggle-container', 'click').subscribe(({ ownerTarget: burgerMenu }) => {
       burgerMenu.classList.toggle('open-menu');
@@ -569,12 +570,19 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     })
 
     document.addEventListener('click', e => {
+      const activeTooltip = document.activeElement
+      if (activeTooltip && activeTooltip.classList.contains('tooltip') && !e.target.closest('.tooltip')) {
+        activeTooltip.blur()
+      }
       if (e.target.closest('.main-nav-container')) return
       closeNetworkMenus()
     })
 
     document.addEventListener('keydown', e => {
-      if (e.key == 'Escape') closeNetworkMenus()
+      if (e.key == 'Escape') {
+        closeNetworkMenus()
+        document.activeElement && document.activeElement.classList.contains('tooltip') && document.activeElement.blur()
+      }
 
       const hasModifier = e.metaKey || e.ctrlKey
       , noExtraModifiers = !e.altKey && !e.shiftKey

client/src/components/info-card.js

@@ -1,3 +1,5 @@
+import { Tooltip } from "./tooltip";
+
 export const InfoCard = ({
   title,
   tooltip,
@@ -16,12 +18,7 @@ export const InfoCard = ({
     <div className="info-card-header">
       {iconSrc ? <img className="menu-logo" alt="" src={iconSrc} /> : null}
       <p className="info-card-title">{title}</p>
-      {tooltip ? (
-        <div className="tooltip">
-          <img alt="" src={tooltip.iconSrc} />
-          <div className="tooltip-dialogue">{tooltip.text}</div>
-        </div>
-      ) : null}
+      {tooltip ? <Tooltip iconSrc={tooltip.iconSrc} text={tooltip.text} /> : null}
       {headerValue !== undefined ? (
         <p className="info-card-header-value">{headerValue}</p>
       ) : null}

client/src/components/status-badge.js

@@ -0,0 +1,14 @@
+export const StatusBadge = (
+  { variant, className } = {},
+  children,
+) => (
+  <span
+    className={["status-badge", variant, className].filter(Boolean).join(" ")}
+  >
+    {children}
+  </span>
+);
+
+export const ConfidentialBadge = ({ t }) => (
+  <StatusBadge variant="success">{t`Confidential`}</StatusBadge>
+);

client/src/components/tooltip.js

@@ -0,0 +1,10 @@
+export const Tooltip = ({ iconSrc, text }) => (
+  <button
+    type="button"
+    className="tooltip"
+    aria-label={`More information: ${text}`}
+  >
+    <img alt="" src={iconSrc} />
+    <span className="tooltip-dialogue" role="tooltip">{text}</span>
+  </button>
+);

client/src/lib/elements.js

@@ -1,4 +1,5 @@
 import {formatAssetAmount} from "../views/util";
+import { ConfidentialBadge } from "../components/status-badge";
 
 export const getSupply = (asset, t) => {
     let { chain_stats = {}, mempool_stats = {} } = asset
@@ -19,7 +20,7 @@ export const getSupply = (asset, t) => {
             chain_stats.burned_amount -
             mempool_stats.burned_amount;
 
-    let totalSupply = circulating == null ? t`Confidential`
+    let totalSupply = circulating == null ? <ConfidentialBadge t={t} />
         : formatAssetAmount(circulating, asset.precision, t)
     return totalSupply
 }

client/src/views/asset.js

@@ -5,6 +5,7 @@ import search from './search'
 import { txBox } from './tx'
 import { maxMempoolTxs, assetTxsPerPage as perPage, nativeAssetLabel, nativeAssetName } from '../const'
 import loader from '../components/loading'
+import { ConfidentialBadge } from '../components/status-badge'
 
 const staticRoot = process.env.STATIC_ROOT || ''
 
@@ -172,7 +173,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
 
               , <div>
                   <div>{t`Issued amount`}</div>
-                  <div>{chain_stats.has_blinded_issuances ? t`Confidential`
+                  <div>{chain_stats.has_blinded_issuances ? <ConfidentialBadge t={t} />
                        : formatAssetAmount(chain_stats.issued_amount, asset.precision, t) }</div>
                 </div>
 
@@ -193,7 +194,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
 
               , <div>
                   <div>{t`Reissuance tokens created`}</div>
-                  <div>{chain_stats.reissuance_tokens == null ? t`Confidential`
+                  <div>{chain_stats.reissuance_tokens == null ? <ConfidentialBadge t={t} />
                       : chain_stats.reissuance_tokens === 0 ? t`None`
                       : formatNumber(chain_stats.reissuance_tokens) }</div>
                 </div>
@@ -210,7 +211,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin
 
               , <div>
                   <div>{t`Circulating amount`}</div>
-                  <div className="mono">{ circulating == null ? t`Confidential`
+                  <div className="mono">{ circulating == null ? <ConfidentialBadge t={t} />
                       : formatAssetAmount(circulating, asset.precision, t) }</div>
                 </div>
 
@@ -284,4 +285,3 @@ const pagingNav = (asset, last_seen_txid, est_curr_chain_seen_count, prev_paging
         <div><img alt="" src={`${staticRoot}img/icons/arrow_right_blu.png`} /></div>
       </a>
   ]
-

client/src/views/block-details-card.js

@@ -1,5 +1,6 @@
 import { BlockGrid } from "../components/block-grid";
 import { InfoStat } from "../components/info-stat";
+import { StatusBadge } from "../components/status-badge";
 import { ElapsedTime } from "../components/elapsed-time";
 import {
   formatTime,
@@ -46,9 +47,7 @@ const BlockDetailsCard = ({ className, block, confirmed }) => {
             </p>
 
             {confirmed ? (
-              <div className="confirmation-status-badge success">
-                <p>Confirmed</p>
-              </div>
+              <StatusBadge variant="success">Confirmed</StatusBadge>
             ) : null}
           </div>
 

client/src/views/block.js

@@ -138,7 +138,7 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
 
       <div className="load-more-container">
         <div>
-          { loading ? <div className="load-more g-btn font-btn-2 disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
+          { loading ? <div className="load-more load-more-loading g-btn primary-btn font-btn-2 disabled"><span>{t`Loading...`}</span><div>{loader("small")}</div></div>
                     : pagingNav(b, { ...S, t }) }
         </div>
       </div>
@@ -176,5 +176,5 @@ const btnDetails = (blockhash, isOpen, query, t) => process.browser
 const btnDetailsContent = (isOpen, t) =>
   <div role="button" tabindex="0">
     <p>{t`Details`}</p>
-    <div>{isOpen ? <MinusIcon /> : <PlusIcon />}</div>
+    {isOpen ? <MinusIcon /> : <PlusIcon />}
   </div>

client/src/views/blocks.js

@@ -7,6 +7,7 @@ import {
 import loader from "../components/loading";
 import { BlockIcon, ClockIcon, CopyIcon } from "../components/icons";
 import { InfoStat } from "../components/info-stat";
+import { Tooltip } from "../components/tooltip";
 
 const staticRoot = process.env.STATIC_ROOT || "";
 
@@ -80,12 +81,10 @@ export const blks = (blocks, viewMore, { t, ...S }) => (
                         <p className="usage-number">
                           {getBlockPercentageUsed(b.weight)}%
                         </p>
-                        <div className="tooltip">
-                          <img src={`${staticRoot}img/icons/tooltip.svg`} />
-                          <div className="tooltip-dialogue">
-                            How full this block is.
-                          </div>
-                        </div>
+                        <Tooltip
+                          iconSrc={`${staticRoot}img/icons/tooltip.svg`}
+                          text="How full this block is."
+                        />
                       </div>
                       <div className="usage-bar">
                         <div

client/src/views/difficulty-adjustment.js

@@ -1,5 +1,6 @@
 import { ArrowsInSimpleIcon } from "../components/icons";
 import { InfoCard } from "../components/info-card";
+import { Tooltip } from "../components/tooltip";
 import { difficultyPeriod } from "../const";
 
 const staticRoot = process.env.STATIC_ROOT || "";
@@ -198,8 +199,8 @@ const adjustmentStat = (title, value, className = "") => (
   </div>
 );
 
-const statDivider = () => (
-  <div className="difficulty-adjustment-stat-divider"></div>
+const statDivider = (className) => (
+  <div className={["difficulty-adjustment-stat-divider", className || ""].join(" ")}></div>
 );
 
 export default ({
@@ -236,10 +237,10 @@ export default ({
             <ArrowsInSimpleIcon />
           </div>
           <h1 className="table-header-title">Difficulty Adjustment</h1>
-          <div className="tooltip">
-            <img alt="" src={`${staticRoot}img/icons/tooltip.svg`} />
-            <div className="tooltip-dialogue">How hard it is to mine new blocks. Bitcoin retargets mining difficulty every 2,016 blocks to keep blocks near 10 minutes. Current is the projected next change; Previous was the last change.</div>
-          </div>
+          <Tooltip
+            iconSrc={`${staticRoot}img/icons/tooltip.svg`}
+            text="How hard it is to mine new blocks. Bitcoin retargets mining difficulty every 2,016 blocks to keep blocks near 10 minutes. Current is the projected next change; Previous was the last change."
+          />
         </div>
         <div className="difficulty-adjustment-stats">
           {adjustmentStat("AVERAGE BLOCK TIME", averageBlockTime)}
@@ -251,7 +252,7 @@ export default ({
             adjustmentClass(expected),
           )}
 
-          {statDivider()}
+          {statDivider("difficulty-adjustment-stat-divider-middle")}
           {adjustmentStat(
             "PREVIOUS ADJ",
             formatAdjustment(previous),

client/src/views/transactions.js

@@ -1,6 +1,7 @@
 import { formatSat, formatNumber, truncateTxid } from "./util";
 import loader from "../components/loading";
 import { CopyIcon, TxArrowsIcon } from "../components/icons";
+import { ConfidentialBadge } from "../components/status-badge";
 
 const staticRoot = process.env.STATIC_ROOT || "";
 
@@ -45,24 +46,36 @@ export const transactions = (txs, viewMore, { t, ...S }) => (
             return (
               <a href={`tx/${txOverview.txid}`}>
               <div className={`transaction-table-row ${S.newTxEntries && S.newTxEntries[txOverview.txid] ? "new-table-entry" : ""}`}>
-                <div className="transaction-table-transaction-id">
-                  <p>{truncateTxid(txOverview.txid)}</p>
-                  <div
-                    className="table-copy-button code-button-btn"
-                    role="button"
-                    tabindex="0"
-                    data-clipboardCopy={txOverview.txid}
-                    aria-label={`Copy transaction id ${txOverview.txid}`}
-                  >
-                    <CopyIcon />
+                <div className="transaction-table-field transaction-table-transaction-id">
+                  <div className="transaction-table-field-label">{t`TX ID`}</div>
+                  <div className="transaction-table-field-value">
+                    <p>{truncateTxid(txOverview.txid)}</p>
+                    <div
+                      className="table-copy-button code-button-btn"
+                      role="button"
+                      tabindex="0"
+                      data-clipboardCopy={txOverview.txid}
+                      aria-label={`Copy transaction id ${txOverview.txid}`}
+                    >
+                      <CopyIcon />
+                    </div>
                   </div>
                 </div>
-                <div className="transaction-table-transaction-value">
-                  {txOverview.value ?
-                    formatSat(txOverview.value) : "Confidential"}
+                <div className="transaction-table-field transaction-table-transaction-value">
+                  <div className="transaction-table-field-label">{t`VALUE`}</div>
+                  <div className="transaction-table-field-value">
+                    {txOverview.value != null ?
+                      formatSat(txOverview.value) : <ConfidentialBadge t={t} />}
+                  </div>
+                </div>
+                <div className="transaction-table-field transaction-table-transaction-size">
+                  <div className="transaction-table-field-label">{t`SIZE`}</div>
+                  <div className="transaction-table-field-value">{`${formatNumber(txOverview.vsize)} vB`}</div>
+                </div>
+                <div className={`transaction-table-field transaction-table-transaction-fee ${feeClass}`}>
+                  <div className="transaction-table-field-label">{t`FEE`}</div>
+                  <div className="transaction-table-field-value">{`${feerate.toFixed(2)} sat/vB`}</div>
                 </div>
-                <div className="transaction-table-transaction-size">{`${formatNumber(txOverview.vsize)} vB`}</div>
-                <div className={`transaction-table-transaction-fee ${feeClass}`}>{`${feerate.toFixed(2)} sat/vB`}</div>
               </div>
               </a>
             );

client/src/views/tx.js

@@ -20,6 +20,7 @@ import {
   TxArrowsIcon,
 } from "../components/icons";
 import { InfoStat } from "../components/info-stat";
+import { StatusBadge } from "../components/status-badge";
 import BlockDetailsCard from "./block-details-card";
 
 // Require behind env conditional so it gets removed by `envify` on non-elements builds
@@ -208,7 +209,7 @@ const btnDetails = (txid, isOpen, query, t) =>
 const btnDetailsContent = (isOpen, t) => (
   <div role="button" tabindex="0">
     <p>{t`Details`}</p>
-    <div>{isOpen ? <MinusIcon /> : <PlusIcon />}</div>
+    {isOpen ? <MinusIcon /> : <PlusIcon />}
   </div>
 );
 
@@ -263,18 +264,16 @@ const txHeader = (
             >
               <CopyIcon />
             </div>
-            <div
-              className={`confirmation-status-badge ${isConfirmed ? "success" : "warning"}`}
-            >
+            <StatusBadge variant={isConfirmed ? "success" : "warning"}>
               {!isConfirmed ? (
-                <div className="confirmation-status-dot" aria-hidden="true">
-                  <div className="confirmation-status-dot-back"></div>
-                  <div className="confirmation-status-dot-middle"></div>
-                  <div className="confirmation-status-dot-front"></div>
-                </div>
+                <span className="confirmation-status-dot" aria-hidden="true">
+                  <span className="confirmation-status-dot-back"></span>
+                  <span className="confirmation-status-dot-middle"></span>
+                  <span className="confirmation-status-dot-front"></span>
+                </span>
               ) : null}
-              <p>{confirmationText(tx.status, tipHeight, t)}</p>
-            </div>
+              <span>{confirmationText(tx.status, tipHeight, t)}</span>
+            </StatusBadge>
           </div>
           <div className="info-stats-row">
             <InfoStat title="SIZE" value={`${formatNumber(tx.size)} B`} />

client/src/views/util.js

@@ -2,6 +2,7 @@ import moveDec from 'move-decimal-point'
 import { sat2btc } from 'fmtbtc'
 import { maxBlockWeight, nativeAssetLabel } from '../const'
 import { isNativeOut } from '../util'
+import { ConfidentialBadge } from '../components/status-badge'
 
 const DEFAULT_ISSUED_PRECISION = 0
     , NATIVE_PRECISION = 8
@@ -29,7 +30,7 @@ export const formatAssetAmount = (value, precision=0, t) =>
   </span>
 
 export const formatOutAmount = (vout, { t, assetMap }, shortDisplay=false) => {
-  if (vout.value == null) return t`Confidential`
+  if (vout.value == null) return <ConfidentialBadge t={t} />
 
   if (isNativeOut(vout)) {
     return <span>