Add Etherscan-style blockie identicon to address detail page
All checks were successful
check / check (push) Successful in 27s
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:
11
README.md
11
README.md
@@ -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):
|
||||||
|
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
12
yarn.lock
12
yarn.lock
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user