fix: rework contract info well per review feedback

- Remove border, add rounded corners and horizontal margin
- Each attribute on its own line (key: value format)
- Move well below send/receive buttons
- Add project/token URL from tokenlist when available
- Import TOKEN_BY_ADDRESS for URL lookup

src/popup/index.html

@@ -358,12 +358,6 @@
                     </div>
                 </div>
 
-                <!-- token contract details (ERC-20 only) -->
-                <div
-                    id="address-token-contract-info"
-                    class="bg-hover border border-border border-dashed p-3 mb-3 text-xs hidden"
-                ></div>
-
                 <!-- actions -->
                 <div class="flex gap-2 mb-3">
                     <button
@@ -380,6 +374,12 @@
                     </button>
                 </div>
 
+                <!-- token contract details (ERC-20 only) -->
+                <div
+                    id="address-token-contract-info"
+                    class="bg-hover rounded-md mx-1 p-3 mb-3 text-xs hidden"
+                ></div>
+
                 <!-- token-filtered transactions -->
                 <div class="mt-3">
                     <div class="border-b border-border pb-1 mb-1">

src/popup/views/addressToken.js

@@ -142,30 +142,24 @@ function show() {
         const tokenHolders = tb && tb.holders != null ? tb.holders : null;
         const dot = addressDotHtml(tokenId);
         const tokenLink = `https://etherscan.io/token/${escapeHtml(tokenId)}`;
-        let infoHtml =
+        const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
-            `<div class="font-bold mb-1">Contract Address</div>` +
+        const projectUrl = knownToken && knownToken.url ? knownToken.url : null;
-            `<div class="flex items-center mb-1">${dot}` +
+        let infoHtml = `<div class="font-bold mb-2">Contract Address</div>`;
+        infoHtml +=
+            `<div class="flex items-center mb-2">${dot}` +
             `<span class="break-all underline decoration-dashed cursor-pointer" id="address-token-contract-copy" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
             `<a href="${tokenLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
             `</div>`;
-        const details = [];
         if (tokenName)
-            details.push(`<span class="text-muted">Name:</span> ${tokenName}`);
+            infoHtml += `<div class="mb-1"><span class="text-muted">Name:</span> ${tokenName}</div>`;
         if (tokenSymbol)
-            details.push(
+            infoHtml += `<div class="mb-1"><span class="text-muted">Symbol:</span> ${tokenSymbol}</div>`;
-                `<span class="text-muted">Symbol:</span> ${tokenSymbol}`,
-            );
         if (tokenDecimals != null)
-            details.push(
+            infoHtml += `<div class="mb-1"><span class="text-muted">Decimals:</span> ${tokenDecimals}</div>`;
-                `<span class="text-muted">Decimals:</span> ${tokenDecimals}`,
-            );
         if (tokenHolders != null)
-            details.push(
+            infoHtml += `<div class="mb-1"><span class="text-muted">Holders:</span> ${Number(tokenHolders).toLocaleString()}</div>`;
-                `<span class="text-muted">Holders:</span> ${Number(tokenHolders).toLocaleString()}`,
+        if (projectUrl)
-            );
+            infoHtml += `<div class="mb-1"><span class="text-muted">Website:</span> <a href="${escapeHtml(projectUrl)}" target="_blank" rel="noopener" class="underline decoration-dashed">${escapeHtml(projectUrl)}</a></div>`;
-        if (details.length > 0) {
-            infoHtml += `<div class="flex flex-wrap gap-x-3 gap-y-1">${details.join("")}</div>`;
-        }
         contractInfo.innerHTML = infoHtml;
         contractInfo.classList.remove("hidden");
     } else {