fix: show wallet/address titles in send, txStatus, and home tx list (closes #26, closes #27, closes #28)

- send.js: show addressTitle() above ENS name and address in From field
- txStatus.js: show addressTitle() in To address when it's a local wallet
- home.js: show addressTitle() for counterparties in tx list when they
  are local wallet addresses

src/popup/views/home.js

@@ -6,6 +6,7 @@ const {
     isoDate,
     timeAgo,
     addressDotHtml,
+    addressTitle,
     escapeHtml,
     truncateMiddle,
 } = require("./helpers");
@@ -110,8 +111,9 @@ function renderHomeTxList(ctx) {
         const amountStr = tx.value
             ? escapeHtml(tx.value + " " + tx.symbol)
             : escapeHtml(tx.symbol);
+        const title = addressTitle(counterparty, state.wallets);
         const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
-        const displayAddr = truncateMiddle(counterparty, maxAddr);
+        const displayAddr = title || truncateMiddle(counterparty, maxAddr);
         const addrStr = escapeHtml(displayAddr);
         const dot = addressDotHtml(counterparty);
         const err = tx.isError ? " (failed)" : "";

src/popup/views/send.js

@@ -1,6 +1,12 @@
 // Send view: collect To, Amount, Token. Then go to confirmation.
 
-const { $, showFlash, addressDotHtml, escapeHtml } = require("./helpers");
+const {
+    $,
+    showFlash,
+    addressDotHtml,
+    addressTitle,
+    escapeHtml,
+} = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
@@ -44,8 +50,15 @@ function updateSendBalance() {
     const dot = addressDotHtml(addr.address);
     const link = `https://etherscan.io/address/${addr.address}`;
     const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    const title = addressTitle(addr.address, state.wallets);
     let fromHtml = "";
-    if (addr.ensName) {
+    if (title) {
+        fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        if (addr.ensName) {
+            fromHtml += `<div>${escapeHtml(addr.ensName)}</div>`;
+        }
+        fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
+    } else if (addr.ensName) {
         fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(addr.ensName)}</div>`;
         fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
     } else {

src/popup/views/txStatus.js

@@ -5,6 +5,7 @@ const {
     showView,
     showFlash,
     addressDotHtml,
+    addressTitle,
     escapeHtml,
 } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
@@ -37,6 +38,13 @@ function toAddressHtml(address) {
     const dot = addressDotHtml(address);
     const link = `https://etherscan.io/address/${address}`;
     const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    const title = addressTitle(address, state.wallets);
+    if (title) {
+        return (
+            `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
+            `<div class="break-all">${escapeHtml(address)}${extLink}</div>`
+        );
+    }
     return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
 }