Move USD total to its own line and add etherscan link on address page

The address now sits on its own line with no other elements beside it,
followed by an etherscan external link icon. The USD total value moves
to a separate line below.

src/popup/index.html

@@ -230,19 +230,18 @@
                     class="font-bold mb-1 hidden flex items-center"
                 ></div>
                 <div
-                    class="flex text-xs mb-3 cursor-pointer items-center"
+                    class="text-xs mb-1 cursor-pointer break-all"
                     title="Click to copy"
+                    id="address-line"
                 >
                     <span id="address-dot"></span>
-                    <span
+                    <span id="address-full"></span>
-                        id="address-full"
+                    <span id="address-etherscan-link"></span>
-                        style="width: 40ch; max-width: 100%"
-                    ></span>
-                    <span
-                        id="address-usd-total"
-                        class="text-right text-muted flex-1"
-                    ></span>
                 </div>
+                <div
+                    id="address-usd-total"
+                    class="text-xs text-muted mb-3"
+                ></div>
                 <!-- balances -->
                 <div class="border-b border-border-light pb-2 mb-2">
                     <div id="address-balances"></div>

src/popup/views/addressDetail.js

@@ -19,6 +19,21 @@ const { updateSendBalance, renderSendTokenSelect } = require("./send");
 const { log } = require("../../shared/log");
 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 etherscanAddressLink(address) {
+    return `https://etherscan.io/address/${address}`;
+}
+
+function etherscanTxLink(hash) {
+    return `https://etherscan.io/tx/${hash}`;
+}
+
 function show() {
     const wallet = state.wallets[state.selectedWallet];
     const addr = wallet.addresses[state.selectedAddress];
@@ -29,6 +44,9 @@ function show() {
     $("address-dot").innerHTML = addressDotHtml(addr.address);
     $("address-full").dataset.full = addr.address;
     $("address-full").textContent = addr.address;
+    const addrLink = etherscanAddressLink(addr.address);
+    $("address-etherscan-link").innerHTML =
+        `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
     $("address-usd-total").textContent = formatUsd(getAddressValueUsd(addr));
     const ensEl = $("address-ens");
     if (addr.ensName) {
@@ -178,21 +196,6 @@ function renderTransactions(txs) {
     });
 }
 
-function etherscanAddressLink(address) {
-    return `https://etherscan.io/address/${address}`;
-}
-
-function etherscanTxLink(hash) {
-    return `https://etherscan.io/tx/${hash}`;
-}
-
-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 copyableHtml(text, extraClass) {
     const cls =
         "underline decoration-dashed cursor-pointer" +