ff4b5ee24d
All checks were successful
check / check (push) Successful in 9s
When a user clicks to copy text (addresses, tx hashes, etc.), the copied element now briefly flashes with inverted colors (bg/fg swap) and fades back over ~300ms. This provides localized visual feedback in addition to the existing flash message. Applied to all click-to-copy elements across all views. closes #100
92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
const {
|
|
$,
|
|
showView,
|
|
showFlash,
|
|
flashCopyFeedback,
|
|
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", (e) => {
|
|
const addr = $("receive-address-block").dataset.full;
|
|
if (addr) {
|
|
navigator.clipboard.writeText(addr);
|
|
showFlash("Copied!");
|
|
flashCopyFeedback(e.currentTarget);
|
|
}
|
|
});
|
|
|
|
$("btn-receive-copy").addEventListener("click", () => {
|
|
const addr = $("receive-address-block").dataset.full;
|
|
if (addr) {
|
|
navigator.clipboard.writeText(addr);
|
|
showFlash("Copied!");
|
|
flashCopyFeedback($("receive-address-block"));
|
|
}
|
|
});
|
|
|
|
$("btn-receive-back").addEventListener("click", () => {
|
|
if (state.selectedToken) {
|
|
ctx.showAddressToken();
|
|
} else {
|
|
ctx.showAddressDetail();
|
|
}
|
|
});
|
|
}
|
|
|
|
module.exports = { init, show };
|