{txs.map((txOverview) => {
const feerate = txOverview.fee / txOverview.vsize;
const feeClass = feeRateClass(feerate, S.feeEst);
diff --git a/client/src/views/tx-privacy-analysis.js b/client/src/views/tx-privacy-analysis.js
index bbfdd805..dbcd8930 100644
--- a/client/src/views/tx-privacy-analysis.js
+++ b/client/src/views/tx-privacy-analysis.js
@@ -3,6 +3,8 @@
// the issues marked as "danger" (displayed in red) are the ones where it is relatively trivial
// to avoid the issue by changing habits and/or changing wallet software. the ones marked as "warning"
// (displayed in orange) are more difficult to do something about.
+import { PrivacyAnalysisArrowIcon } from '../components/icons'
+
const messages = {
'internal-address-reuse': [
'danger'
@@ -56,15 +58,23 @@ const messages = {
const msgOrdering = Object.values(messages)
+const privacyAnalysisLink = (className, label, url) =>
+
+ {label}
+
+
+
export default (analysis, t) =>
analysis.length ?
{analysis.map(msg => messages[msg])
.sort((a, b) => msgOrdering.indexOf(a) - msgOrdering.indexOf(b))
.map(([ type, title, desc, url ]) =>
- - {t(title) + '➚'}
)
+ - {privacyAnalysisLink(`text-${type}`, t(title), url)}
)
}
- :
- {t`This transaction doesn't violate any of the privacy gotchas we cover. Read on other potential ways it might leak privacy.`}➚
-
+ : privacyAnalysisLink(
+ 'text-success privacy-analysis-no-issues',
+ t`This transaction doesn't violate any of the privacy gotchas we cover. Read on other potential ways it might leak privacy.`,
+ 'https://en.bitcoin.it/wiki/Privacy#Blockchain_attacks_on_privacy'
+ )
diff --git a/client/src/views/tx.js b/client/src/views/tx.js
index b706aca3..403deca7 100644
--- a/client/src/views/tx.js
+++ b/client/src/views/tx.js
@@ -1,195 +1,414 @@
-import layout from './layout'
-import search from './search'
-import vinView from './tx-vin'
-import voutView from './tx-vout'
-import privacyAnalysisView from './tx-privacy-analysis'
-import segwitGainsView from './tx-segwit-gains'
-import { formatSat, formatTime, formatVMB, formatNumber } from './util'
-import { isAllUnconfidential, isAllNative, isRbf, outTotal, updateQuery } from '../util'
+import layout from "./layout";
+import search from "./search";
+import vinView from "./tx-vin";
+import voutView from "./tx-vout";
+import privacyAnalysisView from "./tx-privacy-analysis";
+import segwitGainsView from "./tx-segwit-gains";
+import { formatSat, formatTime, formatVMB, formatNumber } from "./util";
+import {
+ isAllUnconfidential,
+ isAllNative,
+ isRbf,
+ outTotal,
+ updateQuery,
+} from "../util";
+import {
+ BlockIcon,
+ CopyIcon,
+ MinusIcon,
+ PlusIcon,
+ TxArrowsIcon,
+} from "../components/icons";
+import { InfoStat } from "../components/info-stat";
+import BlockDetailsCard from "./block-details-card";
// Require behind env conditional so it gets removed by `envify` on non-elements builds
-const deduceBlinded = process.env.IS_ELEMENTS && require('../lib/deduce-blinded').deduceBlinded
+const deduceBlinded =
+ process.env.IS_ELEMENTS && require("../lib/deduce-blinded").deduceBlinded;
// show a warning for payments paying more than 1.2x the recommended amount for 2 blocks confirmation
-const OVERPAYMENT_WARN = 1.2
+const OVERPAYMENT_WARN = 1.2;
-const findSpend = (spends, txid, vout) => spends[txid] && spends[txid][vout]
+const findSpend = (spends, txid, vout) => spends[txid] && spends[txid][vout];
-export default ({ t, tx, tipHeight, spends, openTx, page, unblinded, ...S }) => {
+export default ({
+ t,
+ tx,
+ tipHeight,
+ spends,
+ openTx,
+ page,
+ unblinded,
+ txBlock,
+ ...S
+}) => {
if (!tx || !S.txAnalysis) return;
+ const block =
+ tx.status && txBlock && txBlock.id === tx.status.block_hash
+ ? txBlock
+ : null;
+
// Amount/asset unblinding (Elements only)
if (unblinded && !unblinded.error) {
- const { matched, total } = unblinded.tryUnblindTx(tx)
- if (matched == 0) unblinded.error = t`None of the given blinders matches this transaction.`
- else if (matched < total) unblinded.error = t`${total-matched} of the given blinders did not match this transaction.`
+ const { matched, total } = unblinded.tryUnblindTx(tx);
+ if (matched == 0)
+ unblinded.error = t`None of the given blinders matches this transaction.`;
+ else if (matched < total)
+ unblinded.error = t`${total - matched} of the given blinders did not match this transaction.`;
}
return layout(
- [
-
+ [
-
-
{t`Transaction`}
-
-
{tx.txid}
- { process.browser &&
}
+ {txHeader(tx, { t, tipHeight, ...S })}
+ {unblinded && unblinded.error ? (
+
+ {t`Warning:`} {unblinded.error.toString()}
-
-
-
,
-
- {txHeader(tx, { t, tipHeight, ...S })}
- {(unblinded && unblinded.error) ?
{t`Warning:`} {unblinded.error.toString()}
:
}
- {txBox(tx, { openTx, tipHeight, t, spends, query: page.query, ...S })}
-
- ]
- , { t, page, activeTab: 'recentTxs', ...S })
-}
+ ) : (
+
+ )}
+ {txBox(tx, {
+ openTx,
+ tipHeight,
+ t,
+ spends,
+ query: page.query,
+ ...S,
+ showTxId: false,
+ showFooter: false,
+ })}
+ {tx.status && tx.status.confirmed ? (
+
+
+
+
+
+
Transaction Block
+
+
+
+ ) : null}
+
,
+ ],
+ { t, page, activeTab: "recentTxs", ...S },
+ );
+};
const confirmationText = (status, tipHeight, t) =>
- !status.confirmed ? t`Unconfirmed` : tipHeight ? t`${tipHeight - status.block_height + 1} Confirmations` : t`Confirmed`
+ !status.confirmed
+ ? t`Unconfirmed`
+ : tipHeight
+ ? t`${tipHeight - status.block_height + 1} Confirmations`
+ : t`Confirmed`;
-export const txBox = (tx, { t, openTx, tipHeight, spends, query, unblinded, ...S }) => {
- const vopt = { isOpen: (openTx == tx.txid), query, t, ...S }
+export const txBox = (
+ tx,
+ {
+ t,
+ openTx,
+ tipHeight,
+ spends,
+ query,
+ unblinded,
+ listingIndex,
+ listingTotal,
+ showTxId = true,
+ showFooter = true,
+ ...S
+ },
+) => {
+ const vopt = { isOpen: openTx == tx.txid, query, t, ...S };
+ const hasListingHeader =
+ Number.isFinite(listingIndex) && Number.isFinite(listingTotal);
// Try deducing unknown blinded ins/outs (elements only)
- if (process.env.IS_ELEMENTS) deduceBlinded(tx)
+ if (process.env.IS_ELEMENTS) deduceBlinded(tx);
- return
-
-
- {btnDetails(tx.txid, vopt.isOpen, query, t)}
-
-
-
{tx.vin.map((vin, index) => vinView(vin, { ...vopt, index }))}
-
-
-
-
-
+ return (
+
+ {hasListingHeader ? (
+
+
+
+
+
+ {t`${listingIndex} of ${listingTotal} Transactions`}
+
+ ) : null}
+
+ {showTxId ? (
+
+ ) : (
+ ""
+ )}
+ {btnDetails(tx.txid, vopt.isOpen, query, t)}
+
+
+ {tx.vin.map((vin, index) => vinView(vin, { ...vopt, index }))}
+
+
-
{tx.vout.map((out, index) =>
- voutView(out, { ...vopt, index, spend: findSpend(spends, tx.txid, index) }))}
-
-
-
-
-
-
- {tx.status &&
{confirmationText(tx.status, tipHeight, t)} {!tx.status.confirmed && isRbf(tx) ? t`(RBF)` : ''}}
-
{
- !isAllUnconfidential(tx) ? t`Confidential`
- : isAllNative(tx) ? formatSat(outTotal(tx))
- : ''}
+
+ {tx.vout.map((out, index) =>
+ voutView(out, {
+ ...vopt,
+ index,
+ spend: findSpend(spends, tx.txid, index),
+ }),
+ )}
+
+ {showFooter ? transactionFooter(tx, tipHeight, t) : null}
-
-}
+ );
+};
-const btnDetails = (txid, isOpen, query, t) => process.browser
- // dynamic button in browser env
- ?
{btnDetailsContent(isOpen, t)}
- // or a plain link in server-side rendered env
- :
{btnDetailsContent(isOpen, t)}
+const btnDetails = (txid, isOpen, query, t) =>
+ process.browser ? (
+ // dynamic button in browser env
+
+ {btnDetailsContent(isOpen, t)}
+
+ ) : (
+ // or a plain link in server-side rendered env
+
+ {btnDetailsContent(isOpen, t)}
+
+ );
-const btnDetailsContent = (isOpen, t) =>
+const btnDetailsContent = (isOpen, t) => (
-
{t`Details`}
-
+
{t`Details`}
+
+);
-const txHeader = (tx, { tipHeight, mempool, feeEst, t
- , txAnalysis: { feerate, mempoolDepth, confEstimate, overpaying, privacyAnalysis, segwitGains } }) => {
+const txHeader = (
+ tx,
+ {
+ tipHeight,
+ feeEst,
+ t,
+ txAnalysis: {
+ feerate,
+ mempoolDepth,
+ confEstimate,
+ overpaying,
+ privacyAnalysis,
+ segwitGains,
+ },
+ },
+) => {
+ const isConfirmed = tx.status && tx.status.confirmed;
+ const isLoadingEta = confEstimate == null || mempoolDepth == null;
+ const etaMultiplier = process.env.IS_ELEMENTS ? 1 : 10;
+ const etaLabel = isLoadingEta
+ ? t`Loading...`
+ : confEstimate == -1
+ ? t`Unknown`
+ : `~${confEstimate * etaMultiplier} min`;
+ const confirmationTime =
+ isConfirmed && Number.isFinite(tx.status.block_time)
+ ? formatTime(tx.status.block_time)
+ : "N/A";
+ const segwitSavings = segwitGainsView(segwitGains, t);
return (
-
-
-
{t`Status`}
-
{confirmationText(tx.status, tipHeight, t)}
-
- {tx.status.confirmed && [
-
-
{t`Included in Block`}
-
-
- ,
-
{t`Block height`}
-
{tx.status.block_height}
-
- ,
-
{t`Block timestamp`}
-
{formatTime(tx.status.block_time)}
-
- ]}
+
+
+
+
+
+
+
Transaction Details
+
+
+
+
{tx.txid}
+
+
+
+
+ {!isConfirmed ? (
+
+ ) : null}
+
{confirmationText(tx.status, tipHeight, t)}
+
+
+
+
+
+
+
+
- { !tx.status.confirmed && feerate != null &&
-
{t`ETA`}
-
{confEstimate == null || mempoolDepth == null ? {t`Loading...`}
- : confEstimate == -1 ? t`unknown (${formatVMB(mempoolDepth)} from tip)`
- : t`in ${confEstimate} blocks (${formatVMB(mempoolDepth)} from tip)` }
-
-
}
-
- { feerate != null &&
-
{t`Transaction fees`}
-
-
{t`${formatSat(tx.fee)} (${feerate.toFixed(2)} sat/vB)`}
- { overpaying > OVERPAYMENT_WARN &&
-
OVERPAYMENT_WARN*1.5 ? 'danger' : 'warning' } mb-0`} title={t`compared to the suggested fee of ${feeEst[2].toFixed(1)} sat/vB for confirmation within 2 blocks`}>
- ⓘ {t`overpaying by ${Math.round((overpaying-1)*100)}%`}
-
- }
+ {isRbf(tx) ? (
+
+ ) : null}
+
+
+
+ {isConfirmed ? (
+
+ ) : (
+
+
ETA
+
+
+ {!isLoadingEta ? (
+
+ {confEstimate != -1 ? (
+
+ {confEstimate == 1
+ ? t`1 Block`
+ : t`${confEstimate} Blocks`}
+
+ ) : null}
+
+ {t`${formatVMB(mempoolDepth)} from tip`}
+
+
+ ) : null}
+
+
+ )}
+
+
+
TRANSACTION FEES
+
+ {feerate != null ? (
+
+
+
+ {formatSat(tx.fee)}
+
+
+ {`(${feerate.toFixed(2)} sat/vB)`}
+
+
+ {overpaying > OVERPAYMENT_WARN ? (
+
OVERPAYMENT_WARN * 1.5
+ ? "danger"
+ : "warning"
+ }`}
+ title={t`compared to the suggested fee of ${feeEst[2].toFixed(1)} sat/vB for confirmation within 2 blocks`}
+ >
+ {t`Overpaying by ${Math.round((overpaying - 1) * 100)}%`}
+
+ ) : null}
+
+ ) : (
+
N/A
+ )}
+
+
+
+
+
+
+
PRIVACY ANALYSIS
+
+
{privacyAnalysisView(privacyAnalysis, t)}
+
+
+
+
+
SEGWIT FEE SAVINGS
+
+
{segwitSavings || "N/A"}
+
+
+
+
+
+
+ {transactionFooter(tx, tipHeight, t)}
-
}
+
+ );
+};
-
-
{t`Size`}
-
{`${formatNumber(tx.size)} B`}
-
-
-
{t`Virtual size`}
-
{`${formatNumber(Math.ceil(tx.weight/4))} vB`}
-
-
-
{t`Weight units`}
-
{`${formatNumber(tx.weight)} WU`}
-
- { tx.discount_vsize != null &&
-
{t`Discount virtual size`}
-
{`${formatNumber(tx.discount_vsize)} vB`}
-
}
- { tx.discount_weight != null &&
-
{t`Discount weight units`}
-
{`${formatNumber(tx.discount_weight)} WU`}
-
}
-
-
{t`Version`}
-
{tx.version}
-
-
-
{t`Lock time`}
-
{tx.locktime}
-
- { isRbf(tx) &&
-
{t`Replace by fee`}
-
{t`Opted in`}
-
}
-
- { !!(segwitGains.realizedGains || segwitGains.potentialBech32Gains) &&
-
{t`SegWit fee savings`}
-
{segwitGainsView(segwitGains, t)}
-
}
-
-
-
{t`Privacy analysis`}
-
{privacyAnalysisView(privacyAnalysis, t)}
-
+const transactionFooter = (tx, tipHeight, t) => {
+ const isConfirmed = tx.status && tx.status.confirmed;
-
+
+ {tx.status && (
+
+ {confirmationText(tx.status, tipHeight, t)}{" "}
+ {!tx.status.confirmed && isRbf(tx) ? t`(RBF)` : ""}
+
+ )}
+
+ {!isAllUnconfidential(tx)
+ ? t`Confidential`
+ : isAllNative(tx)
+ ? formatSat(outTotal(tx))
+ : ""}
+
+
+