fix: never collapse warning container — always reserve space to prevent layout shift

Replace display:none with persistent visibility:hidden so the warning
area occupies the same vertical space regardless of API result.
This eliminates the layout shift that occurred when the container was
collapsed after the recipient history check returned.

src/popup/index.html

@@ -104,7 +104,6 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
-                <div id="add-wallet-error" class="text-xs mb-2 hidden"></div>
                 <button
                     id="btn-add-wallet-confirm"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -163,7 +162,6 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
-                <div id="import-key-error" class="text-xs mb-2 hidden"></div>
                 <button
                     id="btn-import-key-confirm"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -367,7 +365,7 @@
                     transfer all funds from this address. Never share it.
                 </p>
                 <div
-                    id="export-privkey-error"
+                    id="export-privkey-flash"
                     class="text-xs mb-2 hidden"
                 ></div>
                 <div id="export-privkey-password-section" class="mb-2">
@@ -579,15 +577,40 @@
                     <div id="confirm-fee-amount" class="text-xs"></div>
                 </div>
                 <div id="confirm-warnings" class="mb-2 hidden"></div>
+                <div
+                    id="confirm-recipient-warning"
+                    class="mb-2"
+                    style="visibility: hidden"
+                >
+                    <div
+                        class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
+                    >
+                        WARNING: The recipient address has ZERO transaction
+                        history. This may indicate a fresh or unused address.
+                        Double-check the address before sending.
+                    </div>
+                </div>
                 <div
                     id="confirm-errors"
                     class="mb-2 border border-border border-dashed p-2 hidden"
                 ></div>
+                <div class="mb-2">
+                    <label class="block mb-1 text-xs">Password</label>
+                    <input
+                        type="password"
+                        id="confirm-tx-password"
+                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                    />
+                </div>
+                <div
+                    id="confirm-tx-password-error"
+                    class="text-xs mb-2 min-h-[1.25rem]"
+                ></div>
                 <button
                     id="btn-confirm-send"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
                 >
-                    Send
+                    Sign &amp; Send
                 </button>
             </div>
 
@@ -666,42 +689,6 @@
                 </button>
             </div>
 
-            <!-- ============ PASSWORD MODAL ============ -->
-            <div
-                id="password-modal"
-                class="hidden fixed inset-0 bg-bg flex items-center justify-center z-50"
-            >
-                <div class="border border-border p-4 bg-bg w-80">
-                    <h2 class="font-bold mb-2">Enter Password</h2>
-                    <p class="text-xs text-muted mb-2">
-                        Your password is needed to authorize this transaction.
-                    </p>
-                    <input
-                        type="password"
-                        id="modal-password"
-                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg mb-2"
-                    />
-                    <div
-                        id="modal-password-error"
-                        class="text-xs mb-2 border border-border border-dashed p-1 hidden"
-                    ></div>
-                    <div class="flex gap-2">
-                        <button
-                            id="btn-modal-confirm"
-                            class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
-                        >
-                            Confirm
-                        </button>
-                        <button
-                            id="btn-modal-cancel"
-                            class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-
             <!-- ============ RECEIVE ============ -->
             <div id="view-receive" class="view hidden">
                 <button
@@ -940,7 +927,10 @@
                     <strong id="delete-wallet-name"></strong> is permanent. Any
                     funds will be unrecoverable without your recovery phrase.
                 </p>
-                <div id="delete-wallet-error" class="text-xs mb-2 hidden"></div>
+                <div
+                    id="delete-wallet-flash"
+                    class="text-xs text-red-500 mb-2 hidden"
+                ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>
                     <input
@@ -1138,7 +1128,10 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
-                <div id="approve-tx-error" class="text-xs hidden mb-2"></div>
+                <div
+                    id="approve-tx-error"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                ></div>
                 <div class="flex justify-between">
                     <button
                         id="btn-approve-tx"
@@ -1201,7 +1194,10 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
-                <div id="approve-sign-error" class="text-xs hidden mb-2"></div>
+                <div
+                    id="approve-sign-error"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                ></div>
                 <div class="flex justify-between">
                     <button
                         id="btn-approve-sign"

src/popup/index.js

@@ -74,6 +74,7 @@ const RESTORABLE_VIEWS = new Set([
     "receive",
     "settings",
     "settings-addtoken",
+    "confirm-tx",
     "transaction",
     "success-tx",
     "error-tx",
@@ -127,6 +128,13 @@ function restoreView() {
         case "settings-addtoken":
             settingsAddToken.show();
             break;
+        case "confirm-tx":
+            if (state.viewData && state.viewData.pendingTx) {
+                confirmTx.restore();
+            } else {
+                fallbackView();
+            }
+            break;
         case "transaction":
             if (state.viewData && state.viewData.tx) {
                 transactionDetail.render();

src/popup/views/addWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const {
     generateMnemonic,
     hdWalletFromMnemonic,
@@ -13,7 +13,6 @@ function show() {
     $("add-wallet-password").value = "";
     $("add-wallet-password-confirm").value = "";
     $("add-wallet-phrase-warning").classList.add("hidden");
-    hideError("add-wallet-error");
     showView("add-wallet");
 }
 
@@ -26,16 +25,14 @@ function init(ctx) {
     $("btn-add-wallet-confirm").addEventListener("click", async () => {
         const mnemonic = $("wallet-mnemonic").value.trim();
         if (!mnemonic) {
-            showError(
-                "add-wallet-error",
+            showFlash(
                 "Enter a recovery phrase or press the die to generate one.",
             );
             return;
         }
         const words = mnemonic.split(/\s+/);
         if (words.length !== 12 && words.length !== 24) {
-            showError(
-                "add-wallet-error",
+            showFlash(
                 "Recovery phrase must be 12 or 24 words. You entered " +
                     words.length +
                     ".",
@@ -43,27 +40,21 @@ function init(ctx) {
             return;
         }
         if (!isValidMnemonic(mnemonic)) {
-            showError(
-                "add-wallet-error",
-                "Invalid recovery phrase. Check for typos.",
-            );
+            showFlash("Invalid recovery phrase. Check for typos.");
             return;
         }
         const pw = $("add-wallet-password").value;
         const pw2 = $("add-wallet-password-confirm").value;
         if (!pw) {
-            showError("add-wallet-error", "Please choose a password.");
+            showFlash("Please choose a password.");
             return;
         }
         if (pw.length < 12) {
-            showError(
-                "add-wallet-error",
-                "Password must be at least 12 characters.",
-            );
+            showFlash("Password must be at least 12 characters.");
             return;
         }
         if (pw !== pw2) {
-            showError("add-wallet-error", "Passwords do not match.");
+            showFlash("Passwords do not match.");
             return;
         }
         const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
@@ -75,8 +66,7 @@ function init(ctx) {
                     firstAddress.toLowerCase(),
         );
         if (duplicate) {
-            showError(
-                "add-wallet-error",
+            showFlash(
                 "This recovery phrase is already added (" +
                     duplicate.name +
                     ").",
@@ -99,7 +89,6 @@ function init(ctx) {
         state.hasWallet = true;
         await saveState();
         ctx.renderWalletList();
-        hideError("add-wallet-error");
         showView("main");
 
         // Scan for used HD addresses beyond index 0.

src/popup/views/addressDetail.js

@@ -2,8 +2,6 @@ const {
     $,
     showView,
     showFlash,
-    showError,
-    hideError,
     balanceLinesForAddress,
     addressDotHtml,
     addressTitle,
@@ -312,7 +310,8 @@ function init(_ctx) {
         $("export-privkey-address").textContent = addr.address;
         $("export-privkey-address").dataset.full = addr.address;
         $("export-privkey-password").value = "";
-        hideError("export-privkey-error");
+        $("export-privkey-flash").classList.add("hidden");
+        $("export-privkey-flash").textContent = "";
         $("export-privkey-password-section").classList.remove("hidden");
         $("export-privkey-result").classList.add("hidden");
         $("export-privkey-value").textContent = "";
@@ -322,9 +321,13 @@ function init(_ctx) {
     $("btn-export-privkey-confirm").addEventListener("click", async () => {
         const password = $("export-privkey-password").value;
         if (!password) {
-            showError("export-privkey-error", "Password is required.");
+            $("export-privkey-flash").textContent = "Password is required.";
+            $("export-privkey-flash").classList.remove("hidden");
             return;
         }
+        const btn = $("btn-export-privkey-confirm");
+        btn.disabled = true;
+        btn.classList.add("text-muted");
         const wallet = state.wallets[state.selectedWallet];
         try {
             const secret = await decryptWithPassword(
@@ -340,9 +343,13 @@ function init(_ctx) {
             $("export-privkey-password-section").classList.add("hidden");
             $("export-privkey-value").textContent = privateKey;
             $("export-privkey-result").classList.remove("hidden");
-            hideError("export-privkey-error");
+            $("export-privkey-flash").classList.add("hidden");
         } catch {
-            showError("export-privkey-error", "Wrong password.");
+            $("export-privkey-flash").textContent = "Wrong password.";
+            $("export-privkey-flash").classList.remove("hidden");
+        } finally {
+            btn.disabled = false;
+            btn.classList.remove("text-muted");
         }
     });
 

src/popup/views/approval.js

@@ -172,6 +172,8 @@ function showTxApproval(details) {
     // If this is an ERC-20 call, try to extract the real recipient and amount
     const decoded = decodeCalldata(details.txParams.data, toAddr || "");
     if (decoded && decoded.details) {
+        let decodedTokenAddr = null;
+        let decodedTokenSymbol = null;
         for (const d of decoded.details) {
             if (d.label === "Recipient" && d.address) {
                 pendingTxDetails.to = d.address;
@@ -179,10 +181,20 @@ function showTxApproval(details) {
             if (d.label === "Amount") {
                 pendingTxDetails.amount = d.rawValue || d.value;
             }
+            if (d.label === "Token In" && d.isToken && d.address) {
+                const t = TOKEN_BY_ADDRESS.get(d.address.toLowerCase());
+                if (t) {
+                    decodedTokenAddr = d.address;
+                    decodedTokenSymbol = t.symbol;
+                }
+            }
         }
         if (token) {
             pendingTxDetails.token = toAddr;
             pendingTxDetails.tokenSymbol = token.symbol;
+        } else if (decodedTokenAddr) {
+            pendingTxDetails.token = decodedTokenAddr;
+            pendingTxDetails.tokenSymbol = decodedTokenSymbol;
         }
     }
 
@@ -256,6 +268,9 @@ function showTxApproval(details) {
         $("approve-tx-data-section").classList.add("hidden");
     }
 
+    $("approve-tx-password").value = "";
+    $("approve-tx-error").classList.add("hidden");
+
     showView("approve-tx");
 }
 

src/popup/views/confirmTx.js

@@ -1,6 +1,6 @@
-// Transaction confirmation view + password modal.
-// Shows transaction details, warnings, errors. On proceed, opens
-// password modal, decrypts secret, signs and broadcasts.
+// Transaction confirmation view with inline password.
+// Shows transaction details, warnings, errors. On Sign & Send,
+// reads inline password, decrypts secret, signs and broadcasts.
 
 const {
     parseEther,
@@ -39,6 +39,13 @@ const EXT_ICON =
 
 let pendingTx = null;
 
+function restore() {
+    const d = state.viewData;
+    if (d && d.pendingTx) {
+        show(d.pendingTx);
+    }
+}
+
 function etherscanTokenLink(address) {
     return `https://etherscan.io/token/${address}`;
 }
@@ -226,12 +233,23 @@ function show(txInfo) {
         sendBtn.classList.remove("text-muted");
     }
 
+    // Reset password field and error
+    $("confirm-tx-password").value = "";
+    hideError("confirm-tx-password-error");
+
     // Gas estimate — show placeholder then fetch async
     $("confirm-fee").classList.remove("hidden");
     $("confirm-fee-amount").textContent = "Estimating...";
+    state.viewData = { pendingTx: txInfo };
     showView("confirm-tx");
 
+    // Reset recipient warning: reserve space (visibility:hidden) while
+    // the async check runs, preventing layout shift per README policy.
+    const recipientWarning = $("confirm-recipient-warning");
+    recipientWarning.style.visibility = "hidden";
+
     estimateGas(txInfo);
+    checkRecipientHistory(txInfo);
 }
 
 async function estimateGas(txInfo) {
@@ -274,39 +292,44 @@ async function estimateGas(txInfo) {
     }
 }
 
-function showPasswordModal() {
-    $("modal-password").value = "";
-    hideError("modal-password-error");
-    $("password-modal").classList.remove("hidden");
+async function checkRecipientHistory(txInfo) {
+    const el = $("confirm-recipient-warning");
+    try {
+        const provider = getProvider(state.rpcUrl);
+        // Skip warning for contract addresses — they may legitimately
+        // have zero outgoing transactions (getTransactionCount returns
+        // the nonce, i.e. sent-tx count only).
+        const code = await provider.getCode(txInfo.to);
+        if (code && code !== "0x") {
+            // Contract address — no warning needed, keep space reserved
+            // but invisible to prevent layout shift
+            return;
+        }
+        const txCount = await provider.getTransactionCount(txInfo.to);
+        if (txCount === 0) {
+            el.style.visibility = "visible";
+        }
+        // If txCount > 0, leave visibility:hidden — space stays reserved
+    } catch (e) {
+        log.errorf("recipient history check failed:", e.message);
+        // On error, leave visibility:hidden — no layout shift, no false warning
     }
-
-function hidePasswordModal() {
-    $("password-modal").classList.add("hidden");
 }
 
 function init(ctx) {
-    $("btn-confirm-send").addEventListener("click", () => {
-        showPasswordModal();
-    });
-
-    $("btn-confirm-back").addEventListener("click", () => {
-        showView("send");
-    });
-
-    $("btn-modal-cancel").addEventListener("click", () => {
-        hidePasswordModal();
-    });
-
-    $("btn-modal-confirm").addEventListener("click", async () => {
-        const password = $("modal-password").value;
+    $("btn-confirm-send").addEventListener("click", async () => {
+        const password = $("confirm-tx-password").value;
         if (!password) {
-            showError("modal-password-error", "Please enter your password.");
+            showError(
+                "confirm-tx-password-error",
+                "Please enter your password.",
+            );
             return;
         }
 
         const wallet = state.wallets[state.selectedWallet];
         let decryptedSecret;
-        hideError("modal-password-error");
+        hideError("confirm-tx-password-error");
 
         try {
             decryptedSecret = await decryptWithPassword(
@@ -314,11 +337,12 @@ function init(ctx) {
                 password,
             );
         } catch (e) {
-            showError("modal-password-error", "Wrong password.");
+            showError("confirm-tx-password-error", "Wrong password.");
             return;
         }
 
-        hidePasswordModal();
+        $("btn-confirm-send").disabled = true;
+        $("btn-confirm-send").classList.add("text-muted");
 
         let tx;
         try {
@@ -355,8 +379,15 @@ function init(ctx) {
             decryptedSecret = null;
             const hash = tx ? tx.hash : null;
             txStatus.showError(pendingTx, hash, e.shortMessage || e.message);
+        } finally {
+            $("btn-confirm-send").disabled = false;
+            $("btn-confirm-send").classList.remove("text-muted");
         }
     });
+
+    $("btn-confirm-back").addEventListener("click", () => {
+        showView("send");
+    });
 }
 
-module.exports = { init, show };
+module.exports = { init, show, restore };

src/popup/views/deleteWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { decryptWithPassword } = require("../../shared/vault");
 
@@ -11,7 +11,8 @@ function show(walletIdx) {
     $("delete-wallet-name").textContent =
         wallet.name || "Wallet " + (walletIdx + 1);
     $("delete-wallet-password").value = "";
-    hideError("delete-wallet-error");
+    $("delete-wallet-flash").textContent = "";
+    $("delete-wallet-flash").classList.add("hidden");
     showView("delete-wallet-confirm");
 }
 
@@ -26,18 +27,23 @@ function init(_ctx) {
     $("btn-delete-wallet-confirm").addEventListener("click", async () => {
         const pw = $("delete-wallet-password").value;
         if (!pw) {
-            showError("delete-wallet-error", "Please enter your password.");
+            $("delete-wallet-flash").textContent =
+                "Please enter your password.";
+            $("delete-wallet-flash").classList.remove("hidden");
             return;
         }
 
         if (deleteWalletIndex === null) {
-            showError(
-                "delete-wallet-error",
-                "No wallet selected for deletion.",
-            );
+            $("delete-wallet-flash").textContent =
+                "No wallet selected for deletion.";
+            $("delete-wallet-flash").classList.remove("hidden");
             return;
         }
 
+        const btn = $("btn-delete-wallet-confirm");
+        btn.disabled = true;
+        btn.classList.add("text-muted");
+
         const walletIdx = deleteWalletIndex;
         const wallet = state.wallets[walletIdx];
 
@@ -45,7 +51,10 @@ function init(_ctx) {
         try {
             await decryptWithPassword(wallet.encryptedSecret, pw);
         } catch (_e) {
-            showError("delete-wallet-error", "Wrong password.");
+            $("delete-wallet-flash").textContent = "Wrong password.";
+            $("delete-wallet-flash").classList.remove("hidden");
+            btn.disabled = false;
+            btn.classList.remove("text-muted");
             return;
         }
 

src/popup/views/importKey.js

@@ -1,4 +1,4 @@
-const { $, showView, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { addressFromPrivateKey } = require("../../shared/wallet");
 const { encryptWithPassword } = require("../../shared/vault");
 const { state, saveState } = require("../../shared/state");
@@ -7,7 +7,6 @@ function show() {
     $("import-private-key").value = "";
     $("import-key-password").value = "";
     $("import-key-password-confirm").value = "";
-    hideError("import-key-error");
     showView("import-key");
 }
 
@@ -15,31 +14,28 @@ function init(ctx) {
     $("btn-import-key-confirm").addEventListener("click", async () => {
         const key = $("import-private-key").value.trim();
         if (!key) {
-            showError("import-key-error", "Please enter your private key.");
+            showFlash("Please enter your private key.");
             return;
         }
         let addr;
         try {
             addr = addressFromPrivateKey(key);
         } catch (e) {
-            showError("import-key-error", "Invalid private key.");
+            showFlash("Invalid private key.");
             return;
         }
         const pw = $("import-key-password").value;
         const pw2 = $("import-key-password-confirm").value;
         if (!pw) {
-            showError("import-key-error", "Please choose a password.");
+            showFlash("Please choose a password.");
             return;
         }
         if (pw.length < 12) {
-            showError(
-                "import-key-error",
-                "Password must be at least 12 characters.",
-            );
+            showFlash("Password must be at least 12 characters.");
             return;
         }
         if (pw !== pw2) {
-            showError("import-key-error", "Passwords do not match.");
+            showFlash("Passwords do not match.");
             return;
         }
         const encrypted = await encryptWithPassword(key, pw);

src/popup/views/transactionDetail.js

@@ -158,8 +158,9 @@ function render() {
         loadCalldata(tx.hash, tx.to);
     }
 
-    $("tx-detail-time").textContent =
-        isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
+    const isoStr = isoDate(tx.timestamp);
+    $("tx-detail-time").innerHTML =
+        copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
     $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
     showView("transaction");
 

src/popup/views/txStatus.js

@@ -43,10 +43,11 @@ function toAddressHtml(address) {
     if (title) {
         return (
             `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
-            `<div class="break-all">${escapeHtml(address)}${extLink}</div>`
+            `<div class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</div>` +
+            extLink
         );
     }
-    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+    return `<div class="flex items-center">${dot}<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`;
 }
 
 function txHashHtml(hash) {
@@ -58,6 +59,16 @@ function txHashHtml(hash) {
     );
 }
 
+function blockNumberHtml(blockNumber) {
+    const num = String(blockNumber);
+    const link = `https://etherscan.io/block/${num}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    return (
+        `<span class="underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(num)}">${escapeHtml(num)}</span>` +
+        extLink
+    );
+}
+
 function attachCopyHandlers(viewId) {
     document
         .getElementById(viewId)
@@ -139,7 +150,7 @@ function etherscanTokenLink(address) {
 
 function decodedDetailsHtml(decoded) {
     if (!decoded || !decoded.details) return "";
-    let html = "";
+    let html = `<div class="border border-border border-dashed p-2 mb-3">`;
     if (decoded.name) {
         html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Action</div>`;
         html += `<div class="font-bold">${escapeHtml(decoded.name)}</div></div>`;
@@ -164,20 +175,36 @@ function decodedDetailsHtml(decoded) {
         }
         html += `</div>`;
     }
+    html += `</div>`;
     return html;
 }
 
 function renderSuccess() {
     const d = state.viewData;
     if (!d || !d.hash) return;
+
+    const hasDecoded = d.decoded && d.decoded.details;
+
+    // When decoded details are present, the Amount and To are already
+    // shown inside the decoded well — hide the top-level duplicates.
+    const summarySection = $("success-tx-summary").parentElement;
+    const toSection = $("success-tx-to").parentElement;
+    if (hasDecoded) {
+        summarySection.classList.add("hidden");
+        toSection.classList.add("hidden");
+    } else {
+        summarySection.classList.remove("hidden");
+        toSection.classList.remove("hidden");
         $("success-tx-summary").textContent = d.amount + " " + d.symbol;
         $("success-tx-to").innerHTML = toAddressHtml(d.to);
-    $("success-tx-block").textContent = String(d.blockNumber);
+    }
+
+    $("success-tx-block").innerHTML = blockNumberHtml(d.blockNumber);
     $("success-tx-hash").innerHTML = txHashHtml(d.hash);
 
     // Show decoded calldata details if present
     const decodedEl = $("success-tx-decoded");
-    if (decodedEl && d.decoded) {
+    if (decodedEl && hasDecoded) {
         decodedEl.innerHTML = decodedDetailsHtml(d.decoded);
         decodedEl.classList.remove("hidden");
     } else if (decodedEl) {

src/shared/uniswap.js

@@ -445,12 +445,18 @@ function decode(data, toAddress) {
             const maxUint160 = BigInt(
                 "0xffffffffffffffffffffffffffffffffffffffff",
             );
-            const amountStr =
-                inputAmount >= maxUint160
+            const isUnlimited = inputAmount >= maxUint160;
+            const amountRaw = isUnlimited
                 ? "Unlimited"
-                    : formatAmount(inputAmount, inInfo.decimals) +
-                      (inSymbol ? " " + inSymbol : "");
-            details.push({ label: "Amount", value: amountStr });
+                : formatAmount(inputAmount, inInfo.decimals);
+            const amountStr = isUnlimited
+                ? "Unlimited"
+                : amountRaw + (inSymbol ? " " + inSymbol : "");
+            details.push({
+                label: "Amount",
+                value: amountStr,
+                rawValue: amountRaw,
+            });
         }
 
         if (outSymbol) {