Compare commits

..

1 Commits

Author SHA1 Message Date
clawbot
c1e48f3825 feat: add blockie identicon to Identity block in TransactionDetail
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.
2026-03-01 07:44:50 -08:00
3 changed files with 33 additions and 15 deletions

View File

@@ -439,14 +439,11 @@ 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
- Status: "Success" or "Failed" - Status: "Success" or "Failed"
- From: blockie + color dot + full address (tap to copy) + etherscan
link; ENS name if available
- To: blockie + color dot + full address (tap to copy) + etherscan link;
ENS name if available
- **Timing block**: - **Timing block**:
- Time: ISO datetime + relative age in parentheses - Time: ISO datetime + relative age in parentheses
- Block: block number (tap to copy) + etherscan block link - Block: block number (tap to copy) + etherscan block link
@@ -455,6 +452,10 @@ transitions.
- Native quantity: raw integer + unit (shown when available) - Native quantity: raw integer + unit (shown when available)
- Token contract: shown for ERC-20 transfers — color dot + full contract - Token contract: shown for ERC-20 transfers — color dot + full contract
address (tap to copy) + etherscan token link address (tap to copy) + etherscan token link
- From: blockie + color dot + full address (tap to copy) + etherscan
link; ENS name if available
- To: blockie + color dot + full address (tap to copy) + etherscan link;
ENS name if available
- **Decoded details** (shown for contract calls): - **Decoded details** (shown for contract calls):
- Action name, decoded parameters, token details, swap steps - Action name, decoded parameters, token details, swap steps
- **Network details** (shown when on-chain data is available): - **Network details** (shown when on-chain data is available):

View File

@@ -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
@@ -1088,17 +1092,6 @@
<div class="text-xs text-muted mb-1">Status</div> <div class="text-xs text-muted mb-1">Status</div>
<div id="tx-detail-status" class="text-xs"></div> <div id="tx-detail-status" class="text-xs"></div>
</div> </div>
<div class="mb-2">
<div class="text-xs text-muted mb-1">From</div>
<div
id="tx-detail-from"
class="text-xs break-all"
></div>
</div>
<div class="mb-2">
<div class="text-xs text-muted mb-1">To</div>
<div id="tx-detail-to" class="text-xs break-all"></div>
</div>
</div> </div>
<!-- ── Timing ── --> <!-- ── Timing ── -->
@@ -1139,6 +1132,17 @@
class="text-xs break-all" class="text-xs break-all"
></div> ></div>
</div> </div>
<div class="mb-2">
<div class="text-xs text-muted mb-1">From</div>
<div
id="tx-detail-from"
class="text-xs break-all"
></div>
</div>
<div class="mb-2">
<div class="text-xs text-muted mb-1">To</div>
<div id="tx-detail-to" class="text-xs break-all"></div>
</div>
</div> </div>
<!-- ── Decoded details ── --> <!-- ── Decoded details ── -->

View File

@@ -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(