Allow editing max spend limit

In the case where the initial spend limit for the `approve` function
was set to the maximum amount, editing this value would result in the
new limit being silently ignored. The transaction would be submitted
with the original max spend limit.

This occurred because function to generate the new custom data would
look for the expected spend limit in the existing data, then bail if
it was not found (and in these cases, it was never found).

The reason the value was not found is that it was erroneously being
converted to a `Number`. A JavaScript `Number` is not precise enough to
represent larger spend limits, so it would give the wrong hex value
(after rounding had taken place in the conversion to a floating-point
number).

The data string is now updated without relying upon the original token
value; the new value is inserted after the `spender` argument instead,
as the remainder of the `data` string is guaranteed to be the original
limit. Additionally, the conversion to a `Number` is now omitted so
that the custom spend limit is encoded correctly.

Fixes #7915

ui/app/pages/confirm-approve/confirm-approve.component.js

@@ -76,7 +76,7 @@ export default class ConfirmApprove extends Component {
       : ''
 
     const customData = customPermissionAmount
-      ? getCustomTxParamsData(data, { customPermissionAmount, tokenAmount, decimals })
+      ? getCustomTxParamsData(data, { customPermissionAmount, decimals })
       : null
 
     return (

ui/app/pages/confirm-approve/confirm-approve.util.js

@@ -1,28 +1,27 @@
 import { decimalToHex } from '../../helpers/utils/conversions.util'
 import { calcTokenValue } from '../../helpers/utils/token-util.js'
+import { getTokenData } from '../../helpers/utils/transactions.util'
 
-export function getCustomTxParamsData (data, { customPermissionAmount, tokenAmount, decimals }) {
-  if (customPermissionAmount) {
-    const tokenValue = decimalToHex(calcTokenValue(tokenAmount, decimals))
+export function getCustomTxParamsData (data, { customPermissionAmount, decimals }) {
+  const tokenData = getTokenData(data)
 
-    const re = new RegExp('(^.+)' + tokenValue + '$')
-    const matches = re.exec(data)
-
-    if (!matches || !matches[1]) {
-      return data
-    }
-    let dataWithoutCurrentAmount = matches[1]
-    const customPermissionValue = decimalToHex(calcTokenValue(Number(customPermissionAmount), decimals))
-
-    const differenceInLengths = customPermissionValue.length - tokenValue.length
-    const zeroModifier = dataWithoutCurrentAmount.length - differenceInLengths
-    if (differenceInLengths > 0) {
-      dataWithoutCurrentAmount = dataWithoutCurrentAmount.slice(0, zeroModifier)
-    } else if (differenceInLengths < 0) {
-      dataWithoutCurrentAmount = dataWithoutCurrentAmount.padEnd(zeroModifier, 0)
-    }
+  if (!tokenData) {
+    throw new Error(`Invalid data`)
+  } else if (tokenData.name !== 'approve') {
+    throw new Error(`Invalid data; should be 'approve' method, but instead is '${tokenData.name}'`)
+  }
+  let spender = tokenData.params[0].value
+  if (spender.startsWith('0x')) {
+    spender = spender.substring(2)
+  }
+  const [signature, tokenValue] = data.split(spender)
 
-    const customTxParamsData = dataWithoutCurrentAmount + customPermissionValue
-    return customTxParamsData
+  let customPermissionValue = decimalToHex(calcTokenValue(customPermissionAmount, decimals))
+  if (customPermissionValue.length > tokenValue.length) {
+    throw new Error('Custom value too large')
   }
+
+  customPermissionValue = customPermissionValue.padStart(tokenValue.length, '0')
+  const customTxParamsData = signature + spender + customPermissionValue
+  return customTxParamsData
 }