feat: add blockie identicon to Identity block in TransactionDetail
All checks were successful
check / check (push) Successful in 22s
All checks were successful
check / check (push) Successful in 22s
Generate a blockie from the transaction hash and display it centered at the top of the Identity block, matching the pattern used in AddressDetail and AddressToken views. Updates README to document the new element.
This commit is contained in:
@@ -439,6 +439,7 @@ transitions.
|
|||||||
matching the Settings view pattern):
|
matching the Settings view pattern):
|
||||||
- "Transaction" heading, "Back" button
|
- "Transaction" heading, "Back" button
|
||||||
- **Identity block**:
|
- **Identity block**:
|
||||||
|
- Blockie identicon (48px, centered, derived from transaction hash)
|
||||||
- Transaction hash: full hash (tap to copy) + etherscan link
|
- Transaction hash: full hash (tap to copy) + etherscan link
|
||||||
- Type: transaction classification — one of: Native ETH Transfer, ERC-20
|
- Type: transaction classification — one of: Native ETH Transfer, ERC-20
|
||||||
Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
|
Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
|
||||||
|
|||||||
@@ -1068,6 +1068,10 @@
|
|||||||
<!-- ── Identity ── -->
|
<!-- ── Identity ── -->
|
||||||
<div class="bg-well p-3 mx-1 mb-3">
|
<div class="bg-well p-3 mx-1 mb-3">
|
||||||
<h3 class="font-bold mb-1">Identity</h3>
|
<h3 class="font-bold mb-1">Identity</h3>
|
||||||
|
<div
|
||||||
|
id="tx-detail-blockie"
|
||||||
|
class="flex justify-center mt-1 mb-3"
|
||||||
|
></div>
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<div class="text-xs text-muted mb-1">
|
<div class="text-xs text-muted mb-1">
|
||||||
Transaction hash
|
Transaction hash
|
||||||
|
|||||||
@@ -130,6 +130,19 @@ function render() {
|
|||||||
if (!tx) return;
|
if (!tx) return;
|
||||||
$("tx-detail-hash").innerHTML = txHashHtml(tx.hash);
|
$("tx-detail-hash").innerHTML = txHashHtml(tx.hash);
|
||||||
|
|
||||||
|
// Blockie identicon for the transaction hash
|
||||||
|
const blockieEl = $("tx-detail-blockie");
|
||||||
|
if (blockieEl) {
|
||||||
|
blockieEl.innerHTML = "";
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = makeBlockie(tx.hash);
|
||||||
|
img.width = 48;
|
||||||
|
img.height = 48;
|
||||||
|
img.style.imageRendering = "pixelated";
|
||||||
|
img.style.borderRadius = "50%";
|
||||||
|
blockieEl.appendChild(img);
|
||||||
|
}
|
||||||
|
|
||||||
const fromTitle = addressTitle(tx.from, state.wallets);
|
const fromTitle = addressTitle(tx.from, state.wallets);
|
||||||
const toTitle = addressTitle(tx.to, state.wallets);
|
const toTitle = addressTitle(tx.to, state.wallets);
|
||||||
$("tx-detail-from").innerHTML = txAddressHtml(
|
$("tx-detail-from").innerHTML = txAddressHtml(
|
||||||
|
|||||||
Reference in New Issue
Block a user