Peg components

README.md

@@ -91,6 +91,7 @@ All options are optional.
 - `API_URL` - URL for HTTP REST API (defaults to `/api`, change if the API is available elsewhere)
 - `CANONICAL_URL` - absolute base url for user interface (optional, only required for opensearch and canonical link tags)
 - `NATIVE_ASSET_LABEL` - the name of the network native asset (defaults to `BTC`)
+- `TARGET_BLOCK_INTERVAL_SECONDS` - expected time between blocks, used for confirmation ETAs (defaults to `60` for Elements chains and `600` otherwise)
 - `SITE_TITLE` - website title for `<title>` (defaults to `Block Explorer`)
 - `SITE_DESC` - meta description (defaults to `Esplora Block Explorer`)
 - `HOME_TITLE` - text for homepage title (defaults to `SITE_TITLE`)
@@ -107,7 +108,8 @@ Note that `API_URL` should be set to the publicly-reachable URL where the user's
 
 Elements-only configuration:
 
-- `IS_ELEMENTS` - set to `1` to indicate this is an Elements-based chain (enables asset issuance and peg features)
+- `IS_ELEMENTS` - set to `1` to indicate this is an Elements-based chain (enables asset issuance and Elements-specific features)
+- `SHOW_PEG_DATA` - set to `1` to show dashboard peg data and fetch its API resources (enabled by the Liquid mainnet and regtest flavors; custom pegged chains must opt in)
 - `NATIVE_ASSET_ID` - the ID of the native asset used to pay fees (defaults to `6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`, the asset id for BTC)
 - `BLIND_PREFIX` - the base58 address prefix byte used for confidential addresses (defaults to `12`)
 - `PARENT_CHAIN_EXPLORER_TXOUT` - URL format for linking to transaction outputs on the parent chain, with `{txid}` and `{vout}` as placeholders. Example: `https://blockstream.info/tx/{txid}#output:{vout}`

client/src/app.js

@@ -5,7 +5,7 @@ import {setAdapt} from '@cycle/run/lib/adapt';
 import { getMempoolDepth, getConfEstimate, calcSegwitFeeGains } from './lib/fees'
 import { isBitcoinNetwork } from './lib/network'
 import getPrivacyAnalysis from './lib/privacy-analysis'
-import { nativeAssetId, blockTxsPerPage, blocksPerPage, difficultyPeriod } from './const'
+import { nativeAssetId, blockTxsPerPage, blocksPerPage, difficultyPeriod, showPegData } from './const'
 import {
     dbg,
     combine,
@@ -76,6 +76,14 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   const
 
     reply = (cat, raw) => dropErrors(HTTP.select(cat)).map(r => raw ? r : (r.body || r.text))
+  , recoverableReply = cat => O.merge(
+        reply(cat).map(value => ({ value, succeeded: true }))
+      , extractErrors(HTTP.select(cat)).mapTo({ succeeded: false }))
+      .scan((state, result) => result.succeeded
+          ? { value: result.value, error: false }
+          : { ...state, error: true }
+        , { value: null, error: false })
+      .startWith({ value: null, error: false })
   , on    = (sel, ev, opt={}) => DOM.select(sel).events(ev, opt)
   , click = sel => on(sel, 'click').map(e => e.ownerTarget.dataset)
 
@@ -245,8 +253,28 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
   , newTxEntries$ = trackNewEntries(mempoolRecent$, tx => tx.txid)
 
   // dashboard
-  , dashboardState$ = O.combineLatest(blocks$, mempoolRecent$, (blks, txs) =>
-        ({ dashblocks: blks.slice(0, 5), dashTxs: txs.slice(0, 5)}))
+  , dashboardPegAsset$ = !showPegData
+      ? O.of({ value: null, error: false })
+      : recoverableReply('dashboard-peg-asset')
+  , dashboardPegChainTxs$ = !showPegData
+      ? O.of({ value: null, error: false })
+      : recoverableReply('dashboard-peg-chain-txs')
+  , dashboardPegMempoolTxs$ = !showPegData
+      ? O.of({ value: null, error: false })
+      : recoverableReply('dashboard-peg-mempool-txs')
+  , dashboardPegState$ = O.combineLatest(
+      dashboardPegAsset$
+    , dashboardPegChainTxs$
+    , dashboardPegMempoolTxs$
+    , (asset, chainTxs, mempoolTxs) => ({
+        asset: asset.value
+      , txs: chainTxs.value != null && mempoolTxs.value != null
+          ? [ ...mempoolTxs.value, ...chainTxs.value ]
+          : null
+      , error: asset.error || chainTxs.error || mempoolTxs.error
+      }))
+  , dashboardState$ = O.combineLatest(blocks$, mempoolRecent$, dashboardPegState$, (blks, txs, peg) =>
+        ({ dashblocks: blks.slice(0, 5), dashTxs: txs.slice(0, 11), peg }))
 
   , dashboardEpochStartBlock$ = reply('dashboard-epoch-start-block', true)
       .map(r => ({ ...r.body, requestedHeight: r.request.height }))
@@ -455,13 +483,23 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     , tickWhileViewing(60000, 'dashBoard', view$)
         .flatMap(_ =>          [{ category: 'fee-est',    method: 'GET', path: '/fee-estimates', bg: true }
                               , { category: 'mempool',    method: 'GET', path: '/mempool', bg: true }
-                              , { category: 'bitcoin-market-chart', method: 'GET', path: bitcoinMarketChartUrl, bg: true }])
+                              , { category: 'bitcoin-market-chart', method: 'GET', path: bitcoinMarketChartUrl, bg: true }]
+          .concat(!showPegData ? [] :
+                              [{ category: 'dashboard-peg-asset', method: 'GET', path: `/asset/${nativeAssetId}`, bg: true }
+                              , { category: 'dashboard-peg-chain-txs', method: 'GET', path: `/asset/${nativeAssetId}/txs/chain`, bg: true }
+                              , { category: 'dashboard-peg-mempool-txs', method: 'GET', path: `/asset/${nativeAssetId}/txs/mempool`, bg: true }]))
 
     , goHome$.flatMap(_ =>  [{ category: 'blocks',    method: 'GET', path: '/blocks' }
                               , { category: 'recent',    method: 'GET', path: '/mempool/recent' }
                               , { category: 'fee-est',    method: 'GET', path: '/fee-estimates' }
                               , { category: 'mempool',    method: 'GET', path: '/mempool' }
                               , { category: 'bitcoin-market-chart', method: 'GET', path: bitcoinMarketChartUrl, bg: true }])
+
+    // fetch peg data only when opening an Elements dashboard
+    , !showPegData ? O.empty() :
+        goHome$.flatMap(_ =>  [{ category: 'dashboard-peg-asset', method: 'GET', path: `/asset/${nativeAssetId}`, bg: true }
+                              , { category: 'dashboard-peg-chain-txs', method: 'GET', path: `/asset/${nativeAssetId}/txs/chain`, bg: true }
+                              , { category: 'dashboard-peg-mempool-txs', method: 'GET', path: `/asset/${nativeAssetId}/txs/mempool`, bg: true }])
     //
     // elements/liquid only
     //
@@ -549,6 +587,17 @@ 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())
 
+    const keepTooltipInViewport = ({ ownerTarget: tooltip }) => {
+      const dialogue = tooltip.querySelector('.tooltip-dialogue')
+      if (!dialogue) return
+
+      tooltip.classList.remove('tooltip-flipped')
+      const bounds = dialogue.getBoundingClientRect()
+          , viewportWidth = document.documentElement.clientWidth
+      tooltip.classList.toggle('tooltip-flipped', bounds.left < 0 || bounds.right > viewportWidth)
+    }
+    O.merge(on('.tooltip', 'mouseenter'), on('.tooltip', 'focus')).subscribe(keepTooltipInViewport)
+
     on('.toggle-container', 'click').subscribe(({ ownerTarget: burgerMenu }) => {
       burgerMenu.classList.toggle('open-menu');
     })

client/src/const.js

@@ -7,9 +7,15 @@ export const satoshisPerBitcoin = 100000000
 export const averageNativeSegwitTransactionSize = 140
 export const maxBlockWeight = 4000000
 
+const configuredTargetBlockIntervalSeconds = Number(process.env.TARGET_BLOCK_INTERVAL_SECONDS)
+export const targetBlockIntervalSeconds = configuredTargetBlockIntervalSeconds > 0
+  ? configuredTargetBlockIntervalSeconds
+  : process.env.IS_ELEMENTS ? 60 : 600
+
 export const nativeAssetId    = process.env.NATIVE_ASSET_ID    || '6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'
 export const nativeAssetLabel = process.env.NATIVE_ASSET_LABEL || 'BTC'
 export const nativeAssetName  = process.env.NATIVE_ASSET_NAME  || 'Bitcoin'
+export const showPegData      = !!process.env.IS_ELEMENTS && process.env.SHOW_PEG_DATA == '1'
 
 // Elements only
 export const assetTxsPerPage = 25

client/src/lib/peg.js

@@ -0,0 +1,27 @@
+const isNonNegativeNumber = value => Number.isFinite(value) && value >= 0
+
+export const getPegAccounting = (chainStats = {}) => {
+  const pegInAmount = chainStats.peg_in_amount
+      , pegOutAmount = chainStats.peg_out_amount
+      , burnedAmount = chainStats.burned_amount
+      , federationAssets = isNonNegativeNumber(pegInAmount) &&
+          isNonNegativeNumber(pegOutAmount) && pegInAmount >= pegOutAmount
+          ? pegInAmount - pegOutAmount
+          : null
+      , circulatingLiabilities = isNonNegativeNumber(federationAssets) &&
+          isNonNegativeNumber(burnedAmount) && federationAssets >= burnedAmount
+          ? federationAssets - burnedAmount
+          : null
+      , assetsVsLiabilitiesRatio = isNonNegativeNumber(federationAssets) && circulatingLiabilities > 0
+          ? federationAssets / circulatingLiabilities * 100
+          : null
+
+  return {
+    pegInAmount
+  , pegOutAmount
+  , burnedAmount
+  , federationAssets
+  , circulatingLiabilities
+  , assetsVsLiabilitiesRatio
+  }
+}

client/src/views/blocks.js

@@ -12,7 +12,7 @@ import { Tooltip } from "../components/tooltip";
 const staticRoot = process.env.STATIC_ROOT || "";
 
 export const blks = (blocks, viewMore, { t, ...S }) => (
-  <div className="block-container">
+  <div className="blocks-page">
     {!blocks ? (
       loader()
     ) : !blocks.length ? (

client/src/views/home.js

@@ -1,23 +1,30 @@
 import layout from "./layout";
 import { blks } from "./blocks";
 import { transactions } from "./transactions";
+import { pegInfo } from "./peg-info";
 import { overview } from "./overview";
 import difficultyAdjustment from "./difficulty-adjustment";
 import { isBitcoinNetwork } from "../lib/network";
+import { showPegData } from "../const";
 
 const isTouch = process.browser && "ontouchstart" in window;
 
 const homeLayout = (body, { t, activeTab, ...S }) =>
   layout(body, { t, isTouch, activeTab, ...S });
 
 export const dashBoard = ({ t, blocks, dashboardState, loading, ...S }) => {
-  const { dashblocks, dashTxs } = dashboardState || {};
+  const { dashblocks, dashTxs, peg = {} } = dashboardState || {};
 
   return homeLayout(
-    <div key="dashBoard">
+    <div className="home-page" key="dashBoard">
       {overview({ blocks: dashblocks, ...S })}
       {blks(dashblocks, true, { t, ...S })}
-      {transactions(dashTxs, true, { t, ...S })}
+      <div className="dashboard-transaction-section">
+        {transactions(dashTxs, true, { t, ...S })}
+        {showPegData
+          ? pegInfo(peg.asset, peg.txs, { t, ...S, error: peg.error })
+          : ""}
+      </div>
       {isBitcoinNetwork
         ? difficultyAdjustment({ blocks: dashblocks, ...S })
         : ""}

client/src/views/overview.js

@@ -98,7 +98,7 @@ export const overview = ({
 
   return (
     <div className="overview">
-      <p className="overview-title">Overview</p>
+      <p className="section-title">Overview</p>
       <div className="overview-body">
         <InfoCard
           title="Time since last block"