clawbot
a2fbb0e30d
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
89 lines
3.0 KiB
JavaScript
89 lines
3.0 KiB
JavaScript
const {
|
|
$,
|
|
showView,
|
|
showFlash,
|
|
formatAddressHtml,
|
|
addressTitle,
|
|
} = require("./helpers");
|
|
const { state, currentAddress } = require("../../shared/state");
|
|
const QRCode = require("qrcode");
|
|
|
|
const EXT_ICON =
|
|
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
|
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
|
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
|
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
|
`</svg></span>`;
|
|
|
|
function show() {
|
|
const addr = currentAddress();
|
|
const address = addr ? addr.address : "";
|
|
const title = address ? addressTitle(address, state.wallets) : null;
|
|
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}` : "";
|
|
$("receive-etherscan-link").innerHTML = link
|
|
? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
|
|
: "";
|
|
if (address) {
|
|
QRCode.toCanvas($("receive-qr"), address, {
|
|
width: 200,
|
|
margin: 2,
|
|
color: { dark: "#000000", light: "#ffffff" },
|
|
});
|
|
}
|
|
const warningEl = $("receive-erc20-warning");
|
|
if (state.selectedToken && state.selectedToken !== "ETH") {
|
|
// Look up symbol from address token balances
|
|
const addrObj = currentAddress();
|
|
let symbol = state.selectedToken;
|
|
if (addrObj) {
|
|
const tb = (addrObj.tokenBalances || []).find(
|
|
(t) =>
|
|
t.address.toLowerCase() ===
|
|
state.selectedToken.toLowerCase(),
|
|
);
|
|
if (tb) symbol = tb.symbol;
|
|
}
|
|
warningEl.textContent =
|
|
"This is an ERC-20 token. Only send " +
|
|
symbol +
|
|
" on the Ethereum network to this address. Sending tokens on other networks will result in permanent loss.";
|
|
warningEl.classList.remove("hidden");
|
|
} else {
|
|
warningEl.classList.add("hidden");
|
|
}
|
|
showView("receive");
|
|
}
|
|
|
|
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", () => {
|
|
const addr = $("receive-address-block").dataset.full;
|
|
if (addr) {
|
|
navigator.clipboard.writeText(addr);
|
|
showFlash("Copied!");
|
|
}
|
|
});
|
|
|
|
$("btn-receive-back").addEventListener("click", () => {
|
|
if (state.selectedToken) {
|
|
ctx.showAddressToken();
|
|
} else {
|
|
ctx.showAddressDetail();
|
|
}
|
|
});
|
|
}
|
|
|
|
module.exports = { init, show };
|