fix: use formatAddressHtml in receive view for display consistency
All checks were successful
check / check (push) Successful in 22s
All checks were successful
check / check (push) Successful in 22s
The receive view was using raw textContent and a manually constructed
color dot instead of the shared formatAddressHtml helper used by other
views. This violated the display consistency policy ('Same data
formatted identically across all screens').
Changes:
- Use formatAddressHtml() to render address with color dot, title
(e.g. 'Wallet 1 — Address 1'), and ENS name — matching addressDetail
- Make the address block itself click-to-copy (matching policy:
'Clicking any address copies the full untruncated value')
- Replace separate receive-dot/receive-address spans with a single
receive-address-block element
- Address is still shown in full (no truncation) as appropriate for
the receive view
Closes #58
This commit is contained in:
@@ -637,9 +637,10 @@
|
|||||||
<div class="flex justify-center mb-3">
|
<div class="flex justify-center mb-3">
|
||||||
<canvas id="receive-qr"></canvas>
|
<canvas id="receive-qr"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="border border-border p-2 break-all mb-3 text-xs">
|
<div
|
||||||
<span id="receive-dot"></span>
|
class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
|
||||||
<span id="receive-address" class="select-all"></span>
|
>
|
||||||
|
<span id="receive-address-block" class="select-all"></span>
|
||||||
<span id="receive-etherscan-link"></span>
|
<span id="receive-etherscan-link"></span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -1,4 +1,10 @@
|
|||||||
const { $, showView, showFlash, addressDotHtml } = require("./helpers");
|
const {
|
||||||
|
$,
|
||||||
|
showView,
|
||||||
|
showFlash,
|
||||||
|
formatAddressHtml,
|
||||||
|
addressTitle,
|
||||||
|
} = require("./helpers");
|
||||||
const { state, currentAddress } = require("../../shared/state");
|
const { state, currentAddress } = require("../../shared/state");
|
||||||
const QRCode = require("qrcode");
|
const QRCode = require("qrcode");
|
||||||
|
|
||||||
@@ -12,8 +18,12 @@ const EXT_ICON =
|
|||||||
function show() {
|
function show() {
|
||||||
const addr = currentAddress();
|
const addr = currentAddress();
|
||||||
const address = addr ? addr.address : "";
|
const address = addr ? addr.address : "";
|
||||||
$("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
|
const title = address ? addressTitle(address, state.wallets) : null;
|
||||||
$("receive-address").textContent = address;
|
const ensName = addr ? addr.ensName || null : null;
|
||||||
|
$("receive-address-block").innerHTML = address
|
||||||
|
? formatAddressHtml(address, ensName, null, title)
|
||||||
|
: "";
|
||||||
|
$("receive-address-block").dataset.full = address;
|
||||||
const link = address ? `https://etherscan.io/address/${address}` : "";
|
const link = address ? `https://etherscan.io/address/${address}` : "";
|
||||||
$("receive-etherscan-link").innerHTML = link
|
$("receive-etherscan-link").innerHTML = link
|
||||||
? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
|
? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
|
||||||
@@ -50,8 +60,16 @@ function show() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function init(ctx) {
|
function init(ctx) {
|
||||||
|
$("receive-address-block").addEventListener("click", () => {
|
||||||
|
const addr = $("receive-address-block").dataset.full;
|
||||||
|
if (addr) {
|
||||||
|
navigator.clipboard.writeText(addr);
|
||||||
|
showFlash("Copied!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$("btn-receive-copy").addEventListener("click", () => {
|
$("btn-receive-copy").addEventListener("click", () => {
|
||||||
const addr = $("receive-address").textContent;
|
const addr = $("receive-address-block").dataset.full;
|
||||||
if (addr) {
|
if (addr) {
|
||||||
navigator.clipboard.writeText(addr);
|
navigator.clipboard.writeText(addr);
|
||||||
showFlash("Copied!");
|
showFlash("Copied!");
|
||||||
|
|||||||
Reference in New Issue
Block a user