Merge pull request 'fix: show wallet name for own addresses on approve-tx view (closes #21)' (#23) from fix/approval-address-title into main

Reviewed-on: #23

src/popup/views/approval.js

@@ -1,4 +1,10 @@
-const { $, addressDotHtml, escapeHtml, showView } = require("./helpers");
+const {
+    $,
+    addressDotHtml,
+    addressTitle,
+    escapeHtml,
+    showView,
+} = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
 const { ERC20_ABI } = require("../../shared/constants");
@@ -22,7 +28,15 @@ function approvalAddressHtml(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>`;
-    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+    const title = addressTitle(address, state.wallets);
+    let html = "";
+    if (title) {
+        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        html += `<div class="break-all">${escapeHtml(address)}${extLink}</div>`;
+    } else {
+        html += `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+    }
+    return html;
 }
 
 function formatTxValue(val) {