fix: address all 3 violations from #59

1. Protocol name now has Etherscan link (was appearing clickable but wasn't)
2. Token contract addresses: symbol shown separately, then color dot +
   full address + Etherscan link (symbol no longer interposed)
3. Raw data section moved after transaction hash (no longer pushes
   useful info off screen)

.gitignore

@@ -25,4 +25,3 @@ dist/
 
 # Yarn
 .yarn-integrity
-package-lock.json

src/popup/views/approval.js

@@ -78,12 +78,10 @@ function decodeCalldata(data, toAddress) {
                     "0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
                 );
                 const isUnlimited = rawAmount === maxUint;
-                const amountRaw = isUnlimited
-                    ? "Unlimited"
-                    : formatTxValue(formatUnits(rawAmount, tokenDecimals));
                 const amountStr = isUnlimited
                     ? "Unlimited"
-                    : amountRaw + (tokenSymbol ? " " + tokenSymbol : "");
+                    : formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
+                      (tokenSymbol ? " " + tokenSymbol : "");
 
                 return {
                     name: "Token Approval",
@@ -102,11 +100,7 @@ function decodeCalldata(data, toAddress) {
                             value: spender,
                             address: spender,
                         },
-                        {
-                            label: "Amount",
-                            value: amountStr,
-                            rawValue: amountRaw,
-                        },
+                        { label: "Amount", value: amountStr },
                     ],
                 };
             }
@@ -114,11 +108,9 @@ function decodeCalldata(data, toAddress) {
             if (parsed.name === "transfer") {
                 const to = parsed.args[0];
                 const rawAmount = parsed.args[1];
-                const amountRaw = formatTxValue(
-                    formatUnits(rawAmount, tokenDecimals),
-                );
                 const amountStr =
-                    amountRaw + (tokenSymbol ? " " + tokenSymbol : "");
+                    formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
+                    (tokenSymbol ? " " + tokenSymbol : "");
 
                 return {
                     name: "Token Transfer",
@@ -133,11 +125,7 @@ function decodeCalldata(data, toAddress) {
                             isToken: true,
                         },
                         { label: "Recipient", value: to, address: to },
-                        {
-                            label: "Amount",
-                            value: amountStr,
-                            rawValue: amountRaw,
-                        },
+                        { label: "Amount", value: amountStr },
                     ],
                 };
             }
@@ -167,31 +155,20 @@ function showTxApproval(details) {
         tokenSymbol: token ? token.symbol : null,
     };
 
-    // If this is an ERC-20 call or a swap, extract the real recipient, amount, and token info
+    // 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 decodedTokenSymbol = null;
-        let decodedTokenAddress = null;
         for (const d of decoded.details) {
             if (d.label === "Recipient" && d.address) {
                 pendingTxDetails.to = d.address;
             }
             if (d.label === "Amount") {
-                pendingTxDetails.amount = d.rawValue || d.value;
-            }
-            if (d.label === "Token In" && !decodedTokenSymbol) {
-                // Extract token symbol and address from decoded details
-                decodedTokenSymbol = d.value;
-                if (d.address) decodedTokenAddress = d.address;
+                pendingTxDetails.amount = d.value;
             }
         }
         if (token) {
             pendingTxDetails.token = toAddr;
             pendingTxDetails.tokenSymbol = token.symbol;
-        } else if (decodedTokenAddress) {
-            // For swaps through routers: use the input token info
-            pendingTxDetails.token = decodedTokenAddress;
-            pendingTxDetails.tokenSymbol = decodedTokenSymbol;
         }
     }
 

src/popup/views/transactionDetail.js

@@ -40,7 +40,7 @@ function blockieHtml(address) {
 function etherscanLinkHtml(url) {
     return (
         `<a href="${url}" target="_blank" rel="noopener" ` +
-        `class="inline-flex items-center"` +
+        `class="inline-flex items-center border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"` +
         `>${EXT_ICON}</a>`
     );
 }

src/shared/uniswap.js

@@ -161,157 +161,6 @@ function decodeWrapEth(input) {
     }
 }
 
-// V4 inner action IDs
-const V4_SWAP_EXACT_IN_SINGLE = 0x06;
-const V4_SWAP_EXACT_IN = 0x07;
-const V4_SWAP_EXACT_OUT_SINGLE = 0x08;
-const V4_SWAP_EXACT_OUT = 0x09;
-const V4_SETTLE = 0x0b;
-const V4_TAKE = 0x0e;
-
-// Decode V4_SWAP (command 0x10) input bytes.
-// The input is ABI-encoded as (bytes actions, bytes[] params).
-// We extract token addresses from SETTLE (input) and TAKE (output) sub-actions,
-// and swap amounts from the swap sub-actions.
-function decodeV4Swap(input) {
-    try {
-        const d = coder.decode(["bytes", "bytes[]"], input);
-        const actions = getBytes(d[0]);
-        const params = d[1];
-
-        let settleToken = null;
-        let takeToken = null;
-        let amountIn = null;
-        let amountOutMin = null;
-
-        for (let i = 0; i < actions.length; i++) {
-            const actionId = actions[i];
-            try {
-                if (actionId === V4_SETTLE) {
-                    // SETTLE: (address currency, uint256 maxAmount, bool payerIsUser)
-                    const s = coder.decode(
-                        ["address", "uint256", "bool"],
-                        params[i],
-                    );
-                    settleToken = s[0];
-                } else if (actionId === V4_TAKE) {
-                    // TAKE: (address currency, address recipient, uint256 amount)
-                    const t = coder.decode(
-                        ["address", "address", "uint256"],
-                        params[i],
-                    );
-                    takeToken = t[0];
-                } else if (
-                    actionId === V4_SWAP_EXACT_IN ||
-                    actionId === V4_SWAP_EXACT_IN_SINGLE
-                ) {
-                    // Extract amounts from exact-in swap actions
-                    if (actionId === V4_SWAP_EXACT_IN) {
-                        // ExactInputParams: (address currencyIn,
-                        //   tuple(address,uint24,int24,address,bytes)[] path,
-                        //   uint128 amountIn, uint128 amountOutMin)
-                        try {
-                            const s = coder.decode(
-                                [
-                                    "tuple(address,tuple(address,uint24,int24,address,bytes)[],uint128,uint128)",
-                                ],
-                                params[i],
-                            );
-                            if (!settleToken) settleToken = s[0][0];
-                            const path = s[0][1];
-                            if (path.length > 0 && !takeToken) {
-                                takeToken = path[path.length - 1][0];
-                            }
-                            if (!amountIn) amountIn = s[0][2];
-                            if (!amountOutMin) amountOutMin = s[0][3];
-                        } catch {
-                            // Fall through — SETTLE/TAKE will provide tokens
-                        }
-                    } else {
-                        // ExactInputSingleParams: (tuple(address,address,uint24,int24,address) poolKey,
-                        //   bool zeroForOne, uint128 amountIn, uint128 amountOutMin, bytes hookData)
-                        try {
-                            const s = coder.decode(
-                                [
-                                    "tuple(tuple(address,address,uint24,int24,address),bool,uint128,uint128,bytes)",
-                                ],
-                                params[i],
-                            );
-                            const poolKey = s[0][0];
-                            const zeroForOne = s[0][1];
-                            if (!settleToken)
-                                settleToken = zeroForOne
-                                    ? poolKey[0]
-                                    : poolKey[1];
-                            if (!takeToken)
-                                takeToken = zeroForOne
-                                    ? poolKey[1]
-                                    : poolKey[0];
-                            if (!amountIn) amountIn = s[0][2];
-                            if (!amountOutMin) amountOutMin = s[0][3];
-                        } catch {
-                            // Fall through
-                        }
-                    }
-                } else if (
-                    actionId === V4_SWAP_EXACT_OUT ||
-                    actionId === V4_SWAP_EXACT_OUT_SINGLE
-                ) {
-                    if (actionId === V4_SWAP_EXACT_OUT) {
-                        try {
-                            const s = coder.decode(
-                                [
-                                    "tuple(address,tuple(address,uint24,int24,address,bytes)[],uint128,uint128)",
-                                ],
-                                params[i],
-                            );
-                            if (!takeToken) takeToken = s[0][0];
-                            const path = s[0][1];
-                            if (path.length > 0 && !settleToken) {
-                                settleToken = path[path.length - 1][0];
-                            }
-                        } catch {
-                            // Fall through
-                        }
-                    } else {
-                        try {
-                            const s = coder.decode(
-                                [
-                                    "tuple(tuple(address,address,uint24,int24,address),bool,uint128,uint128,bytes)",
-                                ],
-                                params[i],
-                            );
-                            const poolKey = s[0][0];
-                            const zeroForOne = s[0][1];
-                            if (!settleToken)
-                                settleToken = zeroForOne
-                                    ? poolKey[0]
-                                    : poolKey[1];
-                            if (!takeToken)
-                                takeToken = zeroForOne
-                                    ? poolKey[1]
-                                    : poolKey[0];
-                        } catch {
-                            // Fall through
-                        }
-                    }
-                }
-            } catch {
-                // Skip sub-actions we can't decode
-            }
-        }
-
-        return {
-            tokenIn: settleToken,
-            tokenOut: takeToken,
-            amountIn,
-            amountOutMin,
-        };
-    } catch {
-        return null;
-    }
-}
-
 // Try to decode a Universal Router execute() call.
 // Returns { name, description, details } matching the format used by
 // the approval UI, or null if the calldata is not a recognised execute().
@@ -384,19 +233,6 @@ function decode(data, toAddress) {
                     }
                 }
 
-                if (cmdId === 0x10) {
-                    const v4 = decodeV4Swap(inputs[i]);
-                    if (v4) {
-                        if (!inputToken && v4.tokenIn) inputToken = v4.tokenIn;
-                        if (!outputToken && v4.tokenOut)
-                            outputToken = v4.tokenOut;
-                        if (!inputAmount && v4.amountIn)
-                            inputAmount = v4.amountIn;
-                        if (!minOutput && v4.amountOutMin)
-                            minOutput = v4.amountOutMin;
-                    }
-                }
-
                 if (cmdId === 0x0c) {
                     hasUnwrapWeth = true;
                 }
@@ -445,19 +281,12 @@ function decode(data, toAddress) {
             const maxUint160 = BigInt(
                 "0xffffffffffffffffffffffffffffffffffffffff",
             );
-            const rawAmount =
-                inputAmount >= maxUint160
-                    ? "Unlimited"
-                    : formatAmount(inputAmount, inInfo.decimals);
             const amountStr =
                 inputAmount >= maxUint160
                     ? "Unlimited"
-                    : rawAmount + (inSymbol ? " " + inSymbol : "");
-            details.push({
-                label: "Amount",
-                value: amountStr,
-                rawValue: rawAmount,
-            });
+                    : formatAmount(inputAmount, inInfo.decimals) +
+                      (inSymbol ? " " + inSymbol : "");
+            details.push({ label: "Amount", value: amountStr });
         }
 
         if (outSymbol) {

tests/uniswap.test.js

@@ -1,10 +1,9 @@
-const { AbiCoder, Interface, solidityPacked, getBytes } = require("ethers");
+const { AbiCoder, Interface, solidityPacked } = require("ethers");
 const uniswap = require("../src/shared/uniswap");
 
 const ROUTER_ADDR = "0x66a9893cc07d91d95644aedd05d03f95e1dba8af";
 const USDT_ADDR = "0xdAC17F958D2ee523a2206206994597C13D831ec7";
 const WETH_ADDR = "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
-const USDC_ADDR = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
 const USER_ADDR = "0x66133E8ea0f5D1d612D2502a968757D1048c214a";
 
 // AutistMask's first-ever swap, 2026-02-27.
@@ -257,87 +256,6 @@ describe("uniswap decoder", () => {
         expect(amount.value).toBe("5.0000 USDT");
     });
 
-    // This test validates the decodeV4Swap() fix: a V4 ERC20→ERC20 swap
-    // (USDT→USDC) where the token addresses are ONLY discoverable inside
-    // the V4_SWAP sub-actions (SETTLE/TAKE). Before decodeV4Swap() was added,
-    // command 0x10 was opaque and this would decode as "Uniswap Swap" with
-    // no token info (or "ETH → ETH"). Now it correctly shows "USDT → USDC".
-    test("decodes V4_SWAP ERC20→ERC20 tokens via SETTLE/TAKE (regression: #59)", () => {
-        // Build a V4_SWAP input with SETTLE(USDT) + SWAP_EXACT_IN_SINGLE + TAKE(USDC)
-        const V4_SETTLE = 0x0b;
-        const V4_SWAP_EXACT_IN_SINGLE = 0x06;
-        const V4_TAKE = 0x0e;
-
-        // actions: SETTLE, SWAP_EXACT_IN_SINGLE, TAKE
-        const actions = new Uint8Array([
-            V4_SETTLE,
-            V4_SWAP_EXACT_IN_SINGLE,
-            V4_TAKE,
-        ]);
-
-        // SETTLE params: (address currency, uint256 maxAmount, bool payerIsUser)
-        const settleParam = coder.encode(
-            ["address", "uint256", "bool"],
-            [USDT_ADDR, 5000000n, true],
-        );
-
-        // SWAP_EXACT_IN_SINGLE params:
-        // (tuple(address,address,uint24,int24,address) poolKey, bool zeroForOne, uint128 amountIn, uint128 amountOutMin, bytes hookData)
-        const swapParam = coder.encode(
-            [
-                "tuple(tuple(address,address,uint24,int24,address),bool,uint128,uint128,bytes)",
-            ],
-            [
-                [
-                    [
-                        USDT_ADDR,
-                        USDC_ADDR,
-                        100, // fee
-                        1, // tickSpacing
-                        "0x0000000000000000000000000000000000000000", // hooks
-                    ],
-                    true, // zeroForOne
-                    5000000n, // amountIn (5 USDT)
-                    4900000n, // amountOutMin (4.9 USDC)
-                    "0x", // hookData
-                ],
-            ],
-        );
-
-        // TAKE params: (address currency, address recipient, uint256 amount)
-        const takeParam = coder.encode(
-            ["address", "address", "uint256"],
-            [USDC_ADDR, USER_ADDR, 0n],
-        );
-
-        // Encode the V4_SWAP input: (bytes actions, bytes[] params)
-        const v4Input = coder.encode(
-            ["bytes", "bytes[]"],
-            [actions, [settleParam, swapParam, takeParam]],
-        );
-
-        // Build execute() with PERMIT2_PERMIT (0x0a) + V4_SWAP (0x10)
-        // The permit provides the input token, but V4_SWAP must provide
-        // the OUTPUT token — without decodeV4Swap, output would be unknown.
-        const data = buildExecute(
-            solidityPacked(["uint8", "uint8"], [0x0a, 0x10]),
-            [encodePermit2(USDT_ADDR, 5000000n, ROUTER_ADDR), v4Input],
-            9999999999n,
-        );
-
-        const result = uniswap.decode(data, ROUTER_ADDR);
-        expect(result).not.toBeNull();
-        // Before decodeV4Swap fix: name would be "Swap USDT → ETH" or "Uniswap Swap"
-        // After fix: correctly identifies both tokens from V4 sub-actions
-        expect(result.name).toBe("Swap USDT \u2192 USDC");
-
-        const tokenIn = result.details.find((d) => d.label === "Token In");
-        expect(tokenIn.value).toContain("USDT");
-
-        const steps = result.details.find((d) => d.label === "Steps");
-        expect(steps.value).toContain("V4 Swap");
-    });
-
     test("handles unknown tokens gracefully", () => {
         const fakeToken = "0x1111111111111111111111111111111111111111";
         const data = buildExecute(