RanchiMall/btcwallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX change

Browse Source 
-- by default transactions only show 2 transacting addresses with a button to see all
This commit is contained in:
sairaj mote 2023-04-04 01:44:14 +05:30
parent 0eaa74647e
commit 4e546b248f
4 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/main.css
View File

@ -316,8 +316,6 @@ ol li::before {
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
} }
.full-bleed { .full-bleed {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
css/main.scss
View File

@ -292,7 +292,6 @@ ol {
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
hyphens: auto;
} }
.full-bleed { .full-bleed {

21
index.html
View File

@ -1115,12 +1115,15 @@
let { address, amount, time, txid, sender, receiver, type, block } = transactionDetails; let { address, amount, time, txid, sender, receiver, type, block } = transactionDetails;
let transactionReceiver let transactionReceiver
let icon let icon
const transactingAddresses = (receiver || sender || [])
const transactingAddressesLinks = transactingAddresses
.slice(0, 2).map(address => html`<a href="${`#/check_details?query=${address}`}" class="tx-participant wrap-around">${address}</a>`)
// block = null // block = null
if (type === 'out') { if (type === 'out') {
transactionReceiver = html`Sent to ${receiver.map(address => html`<a href="${`#/check_details?query=${address}`}" class="tx-participant wrap-around">${address}</a>`)}`; transactionReceiver = html`Sent to ${transactingAddressesLinks}`;
icon = svg`<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`; icon = svg`<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
} else if (type === 'in') { } else if (type === 'in') {
transactionReceiver = html`Received from ${sender.map(address => html`<a href="${`#/check_details?query=${address}`}" class="tx-participant wrap-around">${address}</a>`)}`; transactionReceiver = html`Received from ${transactingAddressesLinks}`;
icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`; icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
} else if (type === 'self') { } else if (type === 'self') {
transactionReceiver = `Sent to self`; transactionReceiver = `Sent to self`;
@ -1131,11 +1134,14 @@
} }
const className = `transaction grid ${type} ${block === null ? 'unconfirmed-tx' : ''}` const className = `transaction grid ${type} ${block === null ? 'unconfirmed-tx' : ''}`
return html.node` return html.node`
<li class="${className}" data-txid="${txid}"> <li class="${className}" data-txid="${txid}" data-transacting-addresses=${transactingAddresses.slice(2)}>
<div class="transaction__icon">${icon}</div> <div class="transaction__icon">${icon}</div>
<time class="transaction__time">${getFormattedTime(time)}</time> <time class="transaction__time">${getFormattedTime(time)}</time>
<div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(getConvertedAmount(amount))}</div> <div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(getConvertedAmount(amount))}</div>
<div class="transaction__receiver">${transactionReceiver}</div> <div class="transaction__receiver">
${transactionReceiver}
${transactingAddresses.length > 2 ? html`, <button onclick=${showAllAddresses} class="button button--small show-more" title="See all addresses"> +${transactingAddresses.length - 2} more</button>` : ''}
</div>
<div class="transaction__id wrap-around">TXID: <a href="${`#/check_details?query=${txid}`}">${txid}</a></div> <div class="transaction__id wrap-around">TXID: <a href="${`#/check_details?query=${txid}`}">${txid}</a></div>
${!block ? html`<p class="pending-badge">Confirmation pending: amount will be deducted after transaction is confirmed</p>` : ''} ${!block ? html`<p class="pending-badge">Confirmation pending: amount will be deducted after transaction is confirmed</p>` : ''}
</li> </li>
@ -1673,6 +1679,13 @@
} }
}) })
function showAllAddresses(e) {
const addresses = e.target.closest('li').dataset.transactingAddresses
const addressesList = addresses.split(',').map(address => html.node`<a href="${`#/check_details?query=${address}`}" class="tx-participant wrap-around">${address}</a>`)
e.target.closest('button').before(...addressesList)
e.target.closest('button').remove()
}
</script> </script>
</body> </body>