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:
Jeffrey Paul 2026-02-26 16:27:47 +07:00
parent 7dd688f571
commit b1b8807060
5 changed files with 32 additions and 5 deletions

View File

@ -356,11 +356,12 @@ services. Users who want maximum privacy can point the RPC at their own node
AutistMask uses two runtime libraries. All cryptographic operations are AutistMask uses two runtime libraries. All cryptographic operations are
delegated to these libraries — see the Crypto Policy section below. delegated to these libraries — see the Crypto Policy section below.
| Package | Version | License | Purpose | | Package | Version | License | Purpose |
| ------------------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -------------------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ethers` | 6.16.0 | MIT | All Ethereum operations: BIP-39 mnemonic generation/validation, BIP-32/BIP-44 HD key derivation (`m/44'/60'/0'/0/n`), secp256k1 signing, transaction construction, ERC-20 contract interaction, JSON-RPC communication, address derivation (keccak256). | | `ethers` | 6.16.0 | MIT | All Ethereum operations: BIP-39 mnemonic generation/validation, BIP-32/BIP-44 HD key derivation (`m/44'/60'/0'/0/n`), secp256k1 signing, transaction construction, ERC-20 contract interaction, JSON-RPC communication, address derivation (keccak256). |
| `libsodium-wrappers-sumo` | 0.8.2 | ISC | Password-based encryption of secrets at rest: Argon2id key derivation (`crypto_pwhash`), authenticated encryption (`crypto_secretbox` / XSalsa20-Poly1305). | | `libsodium-wrappers-sumo` | 0.8.2 | ISC | Password-based encryption of secrets at rest: Argon2id key derivation (`crypto_pwhash`), authenticated encryption (`crypto_secretbox` / XSalsa20-Poly1305). |
| `qrcode` | 1.5.4 | MIT | QR code generation for the Receive screen (renders address as scannable QR on canvas). | | `qrcode` | 1.5.4 | MIT | QR code generation for the Receive screen (renders address as scannable QR on canvas). |
| `ethereum-blockies-base64` | 1.0.2 | ISC | Deterministic pixelated identicon generation from Ethereum addresses (same style used by Etherscan). |
Dev dependencies (not shipped in extension): Dev dependencies (not shipped in extension):

View File

@ -20,6 +20,7 @@
"tailwindcss": "^4.2.1" "tailwindcss": "^4.2.1"
}, },
"dependencies": { "dependencies": {
"ethereum-blockies-base64": "^1.0.2",
"ethers": "^6.16.0", "ethers": "^6.16.0",
"libsodium-wrappers-sumo": "^0.8.2", "libsodium-wrappers-sumo": "^0.8.2",
"qrcode": "^1.5.4" "qrcode": "^1.5.4"

View File

@ -234,6 +234,10 @@
> >
< Back < Back
</button> </button>
<div
id="address-jazzicon"
class="flex justify-center mb-2"
></div>
<div <div
class="flex justify-between items-center border-b border-border pb-1 mb-2" 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 { updateSendBalance, renderSendTokenSelect } = require("./send");
const { log } = require("../../shared/log"); const { log } = require("../../shared/log");
const QRCode = require("qrcode"); const QRCode = require("qrcode");
const makeBlockie = require("ethereum-blockies-base64");
const EXT_ICON = const EXT_ICON =
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` + `<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; const ai = state.selectedAddress;
$("address-title").textContent = $("address-title").textContent =
wallet.name + " \u2014 Address " + (wi + 1) + "." + (ai + 1); 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-dot").innerHTML = addressDotHtml(addr.address);
$("address-full").dataset.full = addr.address; $("address-full").dataset.full = addr.address;
$("address-full").textContent = addr.address; $("address-full").textContent = addr.address;

View File

@ -1560,6 +1560,13 @@ esprima@^4.0.0:
resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
ethereum-blockies-base64@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/ethereum-blockies-base64/-/ethereum-blockies-base64-1.0.2.tgz#4aebca52142bf4d16a3144e6e2b59303e39ed2b3"
integrity sha512-Vg2HTm7slcWNKaRhCUl/L3b4KrB8ohQXdd5Pu3OI897EcR6tVRvUqdTwAyx+dnmoDzj8e2bwBLDQ50ByFmcz6w==
dependencies:
pnglib "0.0.1"
ethers@^6.16.0: ethers@^6.16.0:
version "6.16.0" version "6.16.0"
resolved "https://registry.yarnpkg.com/ethers/-/ethers-6.16.0.tgz#fff9b4f05d7a359c774ad6e91085a800f7fccf65" resolved "https://registry.yarnpkg.com/ethers/-/ethers-6.16.0.tgz#fff9b4f05d7a359c774ad6e91085a800f7fccf65"
@ -2552,6 +2559,11 @@ pngjs@^5.0.0:
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb" resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw== integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
pnglib@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/pnglib/-/pnglib-0.0.1.tgz#f9ab6f9c688f4a9d579ad8be28878a716e30c096"
integrity sha512-95ChzOoYLOPIyVmL+Y6X+abKGXUJlvOVLkB1QQkyXl7Uczc6FElUy/x01NS7r2GX6GRezloO/ecCX9h4U9KadA==
prettier@^3.8.1: prettier@^3.8.1:
version "3.8.1" version "3.8.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.8.1.tgz#edf48977cf991558f4fcbd8a3ba6015ba2a3a173" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.8.1.tgz#edf48977cf991558f4fcbd8a3ba6015ba2a3a173"