Better tx details UI
This commit is contained in:
sairaj mote
parent
8aabf8389e
commit
e9efb9b176
42
css/main.css
42
css/main.css
@ -20,7 +20,7 @@ body {
|
|||||||
--text-color: 20, 20, 20;
|
--text-color: 20, 20, 20;
|
||||||
--foreground-color: 252, 253, 255;
|
--foreground-color: 252, 253, 255;
|
||||||
--background-color: 241, 243, 248;
|
--background-color: 241, 243, 248;
|
||||||
--danger-color: rgb(255, 75, 75);
|
--danger-color: rgb(225, 58, 58);
|
||||||
--green: #1cad59;
|
--green: #1cad59;
|
||||||
--yellow: rgb(255, 207, 65);
|
--yellow: rgb(255, 207, 65);
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
@ -946,15 +946,41 @@ ol li::before {
|
|||||||
content: ",";
|
content: ",";
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr {
|
#tx_status {
|
||||||
text-align: left;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.6rem 0.8rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
|
color: var(--danger-color);
|
||||||
}
|
}
|
||||||
table tr td,
|
#tx_status .icon {
|
||||||
table tr th {
|
fill: var(--danger-color);
|
||||||
padding: 0.8rem 0.5rem;
|
|
||||||
}
|
}
|
||||||
table tr:nth-child(even) {
|
|
||||||
background-color: rgba(var(--text-color), 0.05);
|
#tx_technicals {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#tx_technicals .tx-detail {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-content: flex-start;
|
||||||
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
#tx_technicals .tx-detail div:first-of-type {
|
||||||
|
color: rgba(var(--text-color), 0.8);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
#tx_technicals .tx-detail div:last-of-type {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: rgba(var(--text-color), 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
#in_out_wrapper {
|
#in_out_wrapper {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -19,7 +19,7 @@ body {
|
|||||||
--text-color: 20, 20, 20;
|
--text-color: 20, 20, 20;
|
||||||
--foreground-color: 252, 253, 255;
|
--foreground-color: 252, 253, 255;
|
||||||
--background-color: 241, 243, 248;
|
--background-color: 241, 243, 248;
|
||||||
--danger-color: rgb(255, 75, 75);
|
--danger-color: rgb(225, 58, 58);
|
||||||
--green: #1cad59;
|
--green: #1cad59;
|
||||||
--yellow: rgb(255, 207, 65);
|
--yellow: rgb(255, 207, 65);
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
@ -887,15 +887,38 @@ ol {
|
|||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
table {
|
#tx_status {
|
||||||
tr {
|
display: flex;
|
||||||
text-align: left;
|
align-items: center;
|
||||||
td,
|
gap: 0.5rem;
|
||||||
th {
|
padding: 0.6rem 0.8rem;
|
||||||
padding: 0.8rem 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
|
color: var(--danger-color);
|
||||||
|
.icon {
|
||||||
|
fill: var(--danger-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#tx_technicals {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
.tx-detail {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-content: flex-start;
|
||||||
|
background-color: rgba(var(--text-color), 0.03);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
div:first-of-type {
|
||||||
|
color: rgba(var(--text-color), 0.8);
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
&:nth-child(even) {
|
div:last-of-type {
|
||||||
background-color: rgba(var(--text-color), 0.05);
|
font-weight: 700;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: rgba(var(--text-color), 0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
75
index.html
75
index.html
@ -1357,45 +1357,46 @@
|
|||||||
}
|
}
|
||||||
txDetailsAbortController = new AbortController();
|
txDetailsAbortController = new AbortController();
|
||||||
btcOperator.getTx(txid).then(result => {
|
btcOperator.getTx(txid).then(result => {
|
||||||
const { block, time, size, fee, inputs, outputs, confirmations, total_input_value, total_output_value } = result;
|
let { block, time, size, fee, inputs, outputs, confirmations, total_input_value, total_output_value } = result;
|
||||||
console.debug('tx', result);
|
console.debug('tx', result);
|
||||||
|
block = undefined
|
||||||
renderElem(getRef('tx_details'), html`
|
renderElem(getRef('tx_details'), html`
|
||||||
<table class="margin-bottom-1-5 justify-self-center">
|
<h3>Transaction Details</h3>
|
||||||
<tbody>
|
<div class="flex align-center gap-1 space-between flex-wrap">
|
||||||
<tr>
|
<time>${getFormattedTime(time)}</time>
|
||||||
<td>Hash</td>
|
${!block ? html` <h4 id="tx_status">
|
||||||
<td class="wrap-around">${txid}</td>
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
|
||||||
</tr>
|
Unconfirmed
|
||||||
<tr>
|
</h4> ` : ''}
|
||||||
<td>Block</td>
|
</div>
|
||||||
<td>${block} ${!block ? html`<strong>Unconfirmed transaction</strong>` : ''}</td>
|
<div id="tx_technicals" class="margin-bottom-1-5 justify-self-center">
|
||||||
</tr>
|
<div class="tx-detail">
|
||||||
<tr>
|
<div>Total Inputs</div>
|
||||||
<td>Confirmations</td>
|
<div class="amount-shown" data-btc-amount="${total_input_value}">${formatAmount(getConvertedAmount(total_input_value))}</div>
|
||||||
<td>${confirmations}</td>
|
</div>
|
||||||
</tr>
|
<div class="tx-detail">
|
||||||
<tr>
|
<div>Total Outputs</div>
|
||||||
<td>Size</td>
|
<div class="amount-shown" data-btc-amount="${total_output_value}">${formatAmount(getConvertedAmount(total_output_value))}</div>
|
||||||
<td>${size} bytes</td>
|
</div>
|
||||||
</tr>
|
<div class="tx-detail">
|
||||||
<tr>
|
<div>Fee</div>
|
||||||
<td>Time</td>
|
<div class="amount-shown" data-btc-amount="${fee}">${formatAmount(getConvertedAmount(fee))}</div>
|
||||||
<td>${getFormattedTime(time)}</td>
|
</div>
|
||||||
</tr>
|
${block ? html`
|
||||||
<tr>
|
<div class="tx-detail">
|
||||||
<td>Total Inputs</td>
|
<div>Block</div>
|
||||||
<td class="amount-shown" data-btc-amount="${total_input_value}">${formatAmount(getConvertedAmount(total_input_value))}</td>
|
<div>${block}</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
` : ''}
|
||||||
<td>Total Outputs</td>
|
<div class="tx-detail">
|
||||||
<td class="amount-shown" data-btc-amount="${total_output_value}">${formatAmount(getConvertedAmount(total_output_value))}</td>
|
<div>Confirmations</div>
|
||||||
</tr>
|
<div>${confirmations}</div>
|
||||||
<tr>
|
</div>
|
||||||
<td>Fee</td>
|
<div class="tx-detail">
|
||||||
<td class="amount-shown" data-btc-amount="${fee}">${formatAmount(getConvertedAmount(fee))}</td>
|
<div>Size</div>
|
||||||
</tr>
|
<div>${size} bytes</div>
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
</div>
|
||||||
<div id="in_out_wrapper" class="flex flex-wrap">
|
<div id="in_out_wrapper" class="flex flex-wrap">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex align-center space-between margin-bottom-1" style="padding: 0.5rem 1rem;">
|
<div class="flex align-center space-between margin-bottom-1" style="padding: 0.5rem 1rem;">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user