Add Etherscan-style blockie identicon to address detail page
All checks were successful
check / check (push) Successful in 27s

Show a 48px pixelated blockie (same style as Etherscan) centered
above the wallet title on the address detail page. Uses
ethereum-blockies-base64 which generates a base64 PNG from the
address. Replaces the previously added @metamask/jazzicon.
This commit is contained in:
2026-02-26 16:27:47 +07:00
parent 7dd688f571
commit b1b8807060
5 changed files with 32 additions and 5 deletions

View File

@@ -234,6 +234,10 @@
>
< Back
</button>
<div
id="address-jazzicon"
class="flex justify-center mb-2"
></div>
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
>

View File

@@ -18,6 +18,7 @@ const { resolveEnsNames } = require("../../shared/ens");
const { updateSendBalance, renderSendTokenSelect } = require("./send");
const { log } = require("../../shared/log");
const QRCode = require("qrcode");
const makeBlockie = require("ethereum-blockies-base64");
const EXT_ICON =
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -41,6 +42,14 @@ function show() {
const ai = state.selectedAddress;
$("address-title").textContent =
wallet.name + " \u2014 Address " + (wi + 1) + "." + (ai + 1);
const blockieEl = $("address-jazzicon");
blockieEl.innerHTML = "";
const img = document.createElement("img");
img.src = makeBlockie(addr.address);
img.width = 48;
img.height = 48;
img.style.imageRendering = "pixelated";
blockieEl.appendChild(img);
$("address-dot").innerHTML = addressDotHtml(addr.address);
$("address-full").dataset.full = addr.address;
$("address-full").textContent = addr.address;