Added fee market components.

client/src/const.js

@@ -4,10 +4,15 @@ export const blocksPerPage = 10
 export const difficultyPeriod = 2016
 export const maxMempoolTxs = 50
 export const satoshisPerBitcoin = 100000000
-export const averageNativeSegwitTransactionSize = 140
+export const averageNativeSegwitTransactionVsize = 140
 export const maxBlockWeight = 4000000
 export const blockGridLoadingDelayMs = 100
 export const blockGridTransactionSelectEvent = 'block-grid-transaction-select'
+export const feeEstimateTargets = {
+  low: 12,
+  average: 3,
+  high: 1,
+}
 
 const configuredTargetBlockIntervalSeconds = Number(process.env.TARGET_BLOCK_INTERVAL_SECONDS)
 export const targetBlockIntervalSeconds = configuredTargetBlockIntervalSeconds > 0

client/src/lib/fees.js

@@ -1,8 +1,14 @@
+import {
+  averageNativeSegwitTransactionVsize,
+  feeEstimateTargets,
+  satoshisPerBitcoin,
+} from '../const'
+
 const MAX_BLOCK_VSIZE = 1000000
 
 export const getFeeTierBoundaries = feeEst => {
-  const low = feeEst && feeEst[12]
-    , high = feeEst && feeEst[3]
+  const low = feeEst && feeEst[feeEstimateTargets.low]
+    , high = feeEst && feeEst[feeEstimateTargets.average]
 
   return Number.isFinite(low) && Number.isFinite(high) && low >= 0 && high >= 0
     ? { low, high: Math.max(low, high) }
@@ -38,6 +44,16 @@ export function getConfEstimate(fee_estimates, feerate) {
   return target_est ? target_est[0] : -1
 }
 
+// Estimate the USD cost of a typical native SegWit transaction at a given fee-rate.
+export function estimateNativeSegwitTransactionFeeUsd(bitcoinPrice, feerate) {
+  return Number.isFinite(bitcoinPrice) && bitcoinPrice >= 0
+      && Number.isFinite(feerate) && feerate >= 0
+    ? (bitcoinPrice / satoshisPerBitcoin) *
+        feerate *
+        averageNativeSegwitTransactionVsize
+    : null
+}
+
 // Squash the fee histogram into fixed feerate ranges
 export function squashFeeHistogram(histogram) {
   let i = 0

client/src/lib/market.js

@@ -0,0 +1,9 @@
+export const getBitcoinPrices = marketChart =>
+  ((marketChart && marketChart.prices) || [])
+    .map(price => price && price[1])
+    .filter(Number.isFinite)
+
+export const getLatestBitcoinPrice = marketChart => {
+  const prices = getBitcoinPrices(marketChart)
+  return prices.length ? prices[prices.length - 1] : null
+}

client/src/lib/pending-block-details.js

@@ -47,9 +47,6 @@ const formatTrimmedDecimal = (value) =>
 export const formatPanelPercentage = (value, fallback = "N/A") =>
   Number.isFinite(value) ? `${formatTrimmedDecimal(value)}%` : fallback;
 
-export const formatFeeRate = (value, fallback = "N/A") =>
-  Number.isFinite(value) ? `${value.toFixed(2)} sat/vB` : fallback;
-
 export const formatFeeBoundary = (value, fallback = "N/A") =>
   Number.isFinite(value) ? value.toFixed(2) : fallback;
 
@@ -66,22 +63,6 @@ export const formatMegabytes = (value, fallback = "N/A") =>
 export const formatCount = (value, fallback = "N/A") =>
   Number.isFinite(value) ? value.toLocaleString() : fallback;
 
-export const getLatestBitcoinPrice = (marketChart) => {
-  const prices = ((marketChart && marketChart.prices) || [])
-    .map((price) => price && price[1])
-    .filter(Number.isFinite);
-
-  return prices.length ? prices[prices.length - 1] : null;
-};
-
-export const formatUsd = (value, fallback = "N/A") =>
-  Number.isFinite(value)
-    ? `$${value.toLocaleString("en-US", {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      })} USD`
-    : fallback;
-
 export const formatTransactionDelta = (delta) =>
   delta > 0
     ? `+ ${formatCount(delta)}`

client/src/views/fee-market.js

@@ -0,0 +1,53 @@
+import { InfoCard } from "../components/info-card";
+import { feeEstimateTargets } from "../const";
+import { estimateNativeSegwitTransactionFeeUsd } from "../lib/fees";
+import { getLatestBitcoinPrice } from "../lib/market";
+import { formatFeeRate, formatUsd } from "./util";
+
+const getFeeMarketLevels = (t) => [
+  {
+    key: "low",
+    title: t`Low`,
+    tooltip: t`A lower-priority fee rate estimated to confirm within ${feeEstimateTargets.low} blocks.`,
+  },
+  {
+    key: "average",
+    title: t`Average`,
+    tooltip: t`A balanced fee rate estimated to confirm within ${feeEstimateTargets.average} blocks.`,
+  },
+  {
+    key: "high",
+    title: t`High`,
+    tooltip: t`A higher-priority fee rate estimated to confirm in the next block.`,
+  },
+];
+
+export const feeMarket = ({ feeEst, bitcoinMarketChart, t } = {}) => {
+  const bitcoinPrice = getLatestBitcoinPrice(bitcoinMarketChart);
+  const unavailable = t`N/A`;
+
+  return (
+    <div className="fee-market">
+      <p className="section-title">{t`Fee Market`}</p>
+      <div className="fee-market-body">
+        {getFeeMarketLevels(t).map(({ key, title, tooltip }) => {
+          const feerate = feeEst && feeEst[feeEstimateTargets[key]];
+          const feeUsd = estimateNativeSegwitTransactionFeeUsd(
+            bitcoinPrice,
+            feerate,
+          );
+
+          return (
+            <InfoCard
+              className={`fee-market-${key}`}
+              title={title}
+              tooltip={tooltip}
+              value={formatFeeRate(feerate, unavailable)}
+              footer={formatUsd(feeUsd, unavailable)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

client/src/views/home.js

@@ -3,6 +3,7 @@ import { blks } from "./blocks";
 import { transactions } from "./transactions";
 import { pegInfo } from "./peg-info";
 import { overview } from "./overview";
+import { feeMarket } from "./fee-market";
 import difficultyAdjustment from "./difficulty-adjustment";
 import { isBitcoinNetwork } from "../lib/network";
 import { showPegData } from "../const";
@@ -19,12 +20,14 @@ export const dashBoard = ({ t, blocks, dashboardState, loading, ...S }) => {
     <div className="home-page" key="dashBoard">
       {overview({ blocks: dashblocks, t, ...S })}
       {blks(dashblocks, true, { t, ...S })}
+      {isBitcoinNetwork ? feeMarket({ 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 ? feeMarket({ t, ...S }) : ""}
       {isBitcoinNetwork
         ? difficultyAdjustment({ blocks: dashblocks, ...S })
         : ""}

client/src/views/overview.js

@@ -1,47 +1,20 @@
-import {
-  averageNativeSegwitTransactionSize,
-  satoshisPerBitcoin,
-} from "../const";
+import { feeEstimateTargets } from "../const";
 import { ElapsedTime } from "../components/elapsed-time";
 import { InfoCard } from "../components/info-card";
 import { MempoolCongestion } from "../components/mempool-congestion";
 import { ReferenceLineChart } from "../components/reference-line-chart";
+import { estimateNativeSegwitTransactionFeeUsd } from "../lib/fees";
+import {
+  getBitcoinPrices,
+  getLatestBitcoinPrice,
+} from "../lib/market";
+import { formatFeeRate, formatUsd } from "./util";
 
 const staticRoot = process.env.STATIC_ROOT || "";
 
-const getBitcoinPrices = (marketChart) =>
-  ((marketChart && marketChart.prices) || [])
-    .map((price) => price && price[1])
-    .filter(Number.isFinite);
-
 const getChartPrices = (marketChart) =>
   getBitcoinPrices(marketChart).slice(-24);
 
-const formatUsd = (value) =>
-  Number.isFinite(value)
-    ? `$${value.toLocaleString("en-US", {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      })} USD`
-    : "";
-
-const formatRecommendedFee = (feeEst) =>
-  feeEst && Number.isFinite(feeEst[3]) ? `${feeEst[3].toFixed(1)} sat/vB` : "";
-
-const estimateNativeSegwitFeeUsd = (bitcoinPrice, feeEst) =>
-  Number.isFinite(bitcoinPrice) && feeEst && Number.isFinite(feeEst[3])
-    ? formatUsd(
-        (bitcoinPrice / satoshisPerBitcoin) *
-          feeEst[3] *
-          averageNativeSegwitTransactionSize,
-      )
-    : "";
-
-const getLatestPrice = (marketChart) => {
-  const prices = getBitcoinPrices(marketChart);
-  return prices.length ? prices[prices.length - 1] : null;
-};
-
 export const overview = ({
   blocks,
   feeEst,
@@ -51,10 +24,12 @@ export const overview = ({
 } = {}) => {
   const latestBlock = blocks && blocks[0];
   const chartPrices = getChartPrices(bitcoinMarketChart);
-  const currentBitcoinPrice = getLatestPrice(bitcoinMarketChart);
-  const recommendedFeeUsd = estimateNativeSegwitFeeUsd(
+  const currentBitcoinPrice = getLatestBitcoinPrice(bitcoinMarketChart);
+  const recommendedFeerate =
+    feeEst && feeEst[feeEstimateTargets.average];
+  const recommendedFeeUsd = estimateNativeSegwitTransactionFeeUsd(
     currentBitcoinPrice,
-    feeEst,
+    recommendedFeerate,
   );
   return (
     <div className="overview">
@@ -78,8 +53,8 @@ export const overview = ({
         <InfoCard
           title={t`Recommended Fee`}
           tooltip={t`Suggested rate (sat/vB) to confirm in the next block or two.`}
-          value={formatRecommendedFee(feeEst)}
-          footer={recommendedFeeUsd}
+          value={formatFeeRate(recommendedFeerate, t`N/A`)}
+          footer={formatUsd(recommendedFeeUsd, t`N/A`)}
         />
 
         <InfoCard
@@ -96,7 +71,7 @@ export const overview = ({
         <InfoCard
           title={t`Bitcoin`}
           iconSrc={`${staticRoot}img/icons/Bitcoin-menu-logo.svg`}
-          headerValue={formatUsd(currentBitcoinPrice)}
+          headerValue={formatUsd(currentBitcoinPrice, t`N/A`)}
           body={
             <ReferenceLineChart
               className="overview-bitcoin-price-chart"

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

@@ -19,16 +19,14 @@ import { getFeeTierBoundaries } from "../lib/fees";
 import {
   formatCount,
   formatFeeBoundary,
-  formatFeeRate,
   formatMegabytes,
   formatPanelPercentage,
   formatPercentage,
   formatTransactionDelta,
-  formatUsd,
   formatWeight,
-  getLatestBitcoinPrice,
 } from "../lib/pending-block-details";
-import { formatSat, formatVMB } from "./util";
+import { getLatestBitcoinPrice } from "../lib/market";
+import { formatFeeRate, formatSat, formatUsd, formatVMB } from "./util";
 
 // Fee estimates are inclusive upper bounds, while the grid expects inclusive
 // lower thresholds. Move just beyond a boundary so an equal rate stays in the

client/src/views/util.js

@@ -24,6 +24,20 @@ export const formatTime = (unix, with_tz = true) => {
 
 export const formatSat = (sats, label=nativeAssetLabel) => `${formatNumber(sat2btc(sats), NATIVE_PRECISION)} ${label}`
 
+const formatTrimmedDecimal = value =>
+  value.toFixed(2).replace(/\.?0+$/, '')
+
+export const formatFeeRate = (feerate, fallback='N/A') =>
+  Number.isFinite(feerate) ? `${formatTrimmedDecimal(feerate)} sat/vB` : fallback
+
+export const formatUsd = (value, fallback='N/A') =>
+  Number.isFinite(value)
+    ? `$${value.toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })} USD`
+    : fallback
+
 export const formatAssetAmount = (value, precision=0, t) =>
   <span>
     {formatNumber(precision > 0 ? moveDec(value, -precision) : value, precision)}

lang/strings.txt

@@ -1,3 +1,6 @@
+A balanced fee rate estimated to confirm within %s blocks.
+A higher-priority fee rate estimated to confirm in the next block.
+A lower-priority fee rate estimated to confirm within %s blocks.
 Address
 Address reuse
 Address: %s
@@ -10,6 +13,7 @@ Asset ID
 Asset name
 Asset: %s
 Assets vs Liabilities
+Average
 Bits
 BLOCK
 Block Challenge
@@ -55,9 +59,11 @@ Esplora is currently unavailable, please try again later.
 ETA
 Estimated time until the peg transaction is confirmed.
 Fee
+Fee Market
 Federation BTC Holdings
 Go
 Height
+High
 How full the block is.
 In block
 In best chain
@@ -81,6 +87,7 @@ Linked domain
 Loading block...
 Loading...
 Load more
+Low
 Lock time
 ltr
 Mempool