Description

The custom token approval utility function in ui/pages/confirmations/confirm-approve/confirm-approve.util.js parses ERC20 approve calldata and reconstructs it with an optional custom value.

This utility validates that the length of the parsed value amount is exactly 64 hex digits, assuming all calldata bytes after the spender are the value and the value is a uint256. However, this validation is too strict: it's possible for the calldata to include extra bytes following the value, which the contract will ignore in the call to approve. These are valid transactions.

Including a "calldata tag" for onchain attribution or analytics is an increasingly popular pattern. For example, Seaport uses calldata tags for order attribution, Viem provides a dataSuffix option, and Farcaster clients append an attribution suffix to transactions from Farcaster frames.

This utility should instead parse the first 64 bytes of the value and preserve any extra calldata.

Screenshots

Error screenshot:

Related issues

Previous issue in seaport-js: ProjectOpenSea/seaport-js#215

Manual testing steps

1. Create an ERC20 approve with a calldata suffix. For example, using Viem:

await walletClient.writeContract({
  address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
  abi: erc20Abi,
  functionName: 'approve',
  args: ['0x0000000000000000000000000000000000000001', 69420],
  dataSuffix: '0xdeadbeef'
});

2. Execute the transaction in Metamask.

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.