Use eth-method-registry to get method data

app/_locales/en/messages.json

@@ -286,6 +286,9 @@
   "enterPasswordContinue": {
     "message": "Enter password to continue"
   },
+  "parameters": {
+    "message": "Parameters"
+  },
   "passwordNotLongEnough": {
     "message": "Password not long enough"
   },

app/scripts/controllers/transactions/index.js

@@ -157,6 +157,7 @@ class TransactionController extends EventEmitter {
     // construct txMeta
     let txMeta = this.txStateManager.generateTxMeta({ txParams: normalizedTxParams })
     this.addTx(txMeta)
+    this.emit('newUnapprovedTx', txMeta)
 
     try {
       // check whether recipient account is blacklisted
@@ -171,7 +172,6 @@ class TransactionController extends EventEmitter {
     txMeta.loadingDefaults = false
     // save txMeta
     this.txStateManager.updateTx(txMeta)
-    this.emit('newUnapprovedTx', txMeta)
 
     return txMeta
   }

package.json

@@ -97,6 +97,7 @@
     "eth-hd-keyring": "^1.2.1",
     "eth-json-rpc-filters": "^1.2.6",
     "eth-json-rpc-infura": "^3.0.0",
+    "eth-method-registry": "^1.0.0",
     "eth-phishing-detect": "^1.1.4",
     "eth-query": "^2.1.2",
     "eth-sig-util": "^1.4.2",

ui/app/components/input-number.js

@@ -2,8 +2,10 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const {
+  addCurrencies,
   conversionGTE,
   conversionLTE,
+  subtractCurrencies,
 } = require('../conversion-util')
 
 module.exports = InputNumber
@@ -49,11 +51,7 @@ InputNumber.prototype.setValue = function (newValue) {
 }
 
 InputNumber.prototype.render = function () {
-<<<<<<< HEAD
   const { unitLabel, step = 1, placeholder, value } = this.props
-=======
-  const { unitLabel, step = 1, placeholder, value = 0, min = -1, max = Infinity } = this.props
->>>>>>> Refactor and redesign confirm transaction views
 
   return h('div.customize-gas-input-wrapper', {}, [
     h('input', {
@@ -69,19 +67,11 @@ InputNumber.prototype.render = function () {
     h('span.gas-tooltip-input-detail', {}, [unitLabel]),
     h('div.gas-tooltip-input-arrows', {}, [
       h('i.fa.fa-angle-up', {
-<<<<<<< HEAD
         onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })),
       }),
       h('i.fa.fa-angle-down', {
         style: { cursor: 'pointer' },
         onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })),
-=======
-        onClick: () => this.setValue(Math.min(+value + step, max)),
-      }),
-      h('i.fa.fa-angle-down', {
-        style: { cursor: 'pointer' },
-        onClick: () => this.setValue(Math.max(+value - step, min)),
->>>>>>> Refactor and redesign confirm transaction views
       }),
     ]),
   ])

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -18,6 +18,7 @@ export default class ConfirmTransactionBase extends Component {
     // Redux props
     txData: PropTypes.object,
     tokenData: PropTypes.object,
+    methodData: PropTypes.object,
     tokenProps: PropTypes.object,
     isTxReprice: PropTypes.bool,
     nonce: PropTypes.string,
@@ -245,7 +246,7 @@ export default class ConfirmTransactionBase extends Component {
           data,
         } = {},
       } = {},
-      tokenData: {
+      methodData: {
         name,
         params,
       } = {},
@@ -266,7 +267,12 @@ export default class ConfirmTransactionBase extends Component {
           </span>
         </div>
         <div className="confirm-page-container-content__data-box">
-          { JSON.stringify(params, null, 2) }
+          <div className="confirm-page-container-content__data-field-label">
+            { `${t('parameters')}:` }
+          </div>
+          <div>
+            <pre>{ JSON.stringify(params, null, 2) }</pre>
+          </div>
         </div>
         <div className="confirm-page-container-content__data-box-label">
           {`${t('hexData')}:`}
@@ -318,7 +324,7 @@ export default class ConfirmTransactionBase extends Component {
       fromAddress,
       toName,
       toAddress,
-      tokenData,
+      methodData,
       ethTransactionAmount,
       fiatTransactionAmount,
       valid: propsValid,
@@ -336,7 +342,7 @@ export default class ConfirmTransactionBase extends Component {
       warning,
     } = this.props
 
-    const { name } = tokenData
+    const { name } = methodData
     const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
     const { valid, errorMessage } = this.getError()
 

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -21,6 +21,7 @@ const mapStateToProps = (state, props) => {
     fiatTransactionTotal,
     hexGasTotal,
     tokenData,
+    methodData,
     txData,
     tokenProps,
     nonce,
@@ -60,6 +61,7 @@ const mapStateToProps = (state, props) => {
     hexGasTotal,
     txData,
     tokenData,
+    methodData,
     tokenProps,
     isTxReprice,
     currentCurrency,

ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js

@@ -11,7 +11,7 @@ import {
   CONFIRM_TOKEN_METHOD_PATH,
   SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
-import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util'
+import { isConfirmDeployContract } from './confirm-transaction-switch.util'
 import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants'
 
 export default class ConfirmTransactionSwitch extends Component {
@@ -19,19 +19,29 @@ export default class ConfirmTransactionSwitch extends Component {
     confirmTransaction: PropTypes.object,
   }
 
-  redirectToTransaction (txData) {
-    const { id, txParams: { data } } = txData
+  redirectToTransaction () {
+    const {
+      confirmTransaction: {
+        txData,
+        methodData: { name },
+        fetchingMethodData,
+      },
+    } = this.props
+    const { id } = txData
 
     if (isConfirmDeployContract(txData)) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
       return <Redirect to={{ pathname }} />
     }
 
-    if (data) {
-      const tokenData = getTokenData(data)
-      const { name: tokenMethodName } = tokenData || {}
+    if (fetchingMethodData) {
+      return <Loading />
+    }
+
+    if (name) {
+      const methodName = name.toLowerCase()
 
-      switch (tokenMethodName) {
+      switch (methodName.toLowerCase()) {
         case TOKEN_METHOD_TRANSFER: {
           const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
           return <Redirect to={{ pathname }} />
@@ -55,7 +65,7 @@ export default class ConfirmTransactionSwitch extends Component {
     const { confirmTransaction: { txData } } = this.props
 
     if (txData.txParams) {
-      return this.redirectToTransaction(txData)
+      return this.redirectToTransaction()
     } else if (txData.msgParams) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}`
       return <Redirect to={{ pathname }} />

ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js

@@ -1,12 +1,4 @@
-import abi from 'human-standard-token-abi'
-import abiDecoder from 'abi-decoder'
-abiDecoder.addABI(abi)
-
 export function isConfirmDeployContract (txData = {}) {
   const { txParams = {} } = txData
   return !txParams.to
 }
-
-export function getTokenData (data = {}) {
-  return abiDecoder.decodeMethod(data)
-}

ui/app/components/pages/confirm-transaction/confirm-transaction.component.js

@@ -85,8 +85,12 @@ export default class ConfirmTransaction extends Component {
       }
     } else if (unconfirmedTransactions.length) {
       const totalUnconfirmed = unconfirmedTransactions.length
-      const transactionId = unconfirmedTransactions[totalUnconfirmed - 1].id
-      setTransactionToConfirm(transactionId)
+      const transaction = unconfirmedTransactions[totalUnconfirmed - 1]
+      const { id: transactionId, loadingDefaults } = transaction
+
+      if (!loadingDefaults) {
+        setTransactionToConfirm(transactionId)
+      }
     }
   }
 

ui/app/ducks/confirm-transaction.duck.js

@@ -6,6 +6,7 @@ import {
 
 import {
   getTokenData,
+  getMethodData,
   getTransactionAmount,
   getTransactionFee,
   getHexGasTotal,
@@ -25,6 +26,8 @@ const UPDATE_TX_DATA = createActionType('UPDATE_TX_DATA')
 const CLEAR_TX_DATA = createActionType('CLEAR_TX_DATA')
 const UPDATE_TOKEN_DATA = createActionType('UPDATE_TOKEN_DATA')
 const CLEAR_TOKEN_DATA = createActionType('CLEAR_TOKEN_DATA')
+const UPDATE_METHOD_DATA = createActionType('UPDATE_METHOD_DATA')
+const CLEAR_METHOD_DATA = createActionType('CLEAR_METHOD_DATA')
 const CLEAR_CONFIRM_TRANSACTION = createActionType('CLEAR_CONFIRM_TRANSACTION')
 const UPDATE_TRANSACTION_AMOUNTS = createActionType('UPDATE_TRANSACTION_AMOUNTS')
 const UPDATE_TRANSACTION_FEES = createActionType('UPDATE_TRANSACTION_FEES')
@@ -32,11 +35,14 @@ const UPDATE_TRANSACTION_TOTALS = createActionType('UPDATE_TRANSACTION_TOTALS')
 const UPDATE_HEX_GAS_TOTAL = createActionType('UPDATE_HEX_GAS_TOTAL')
 const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS')
 const UPDATE_NONCE = createActionType('UPDATE_NONCE')
+const FETCH_METHOD_DATA_START = createActionType('FETCH_METHOD_DATA_START')
+const FETCH_METHOD_DATA_END = createActionType('FETCH_METHOD_DATA_END')
 
 // Initial state
 const initState = {
   txData: {},
   tokenData: {},
+  methodData: {},
   tokenProps: {
     tokenDecimals: '',
     tokenSymbol: '',
@@ -49,6 +55,7 @@ const initState = {
   ethTransactionTotal: '',
   hexGasTotal: '',
   nonce: '',
+  fetchingMethodData: false,
 }
 
 // Reducer
@@ -78,6 +85,18 @@ export default function reducer ({ confirmTransaction: confirmState = initState
         ...confirmState,
         tokenData: {},
       }
+    case UPDATE_METHOD_DATA:
+      return {
+        ...confirmState,
+        methodData: {
+          ...action.payload,
+        },
+      }
+    case CLEAR_METHOD_DATA:
+      return {
+        ...confirmState,
+        methodData: {},
+      }
     case UPDATE_TRANSACTION_AMOUNTS:
       const { fiatTransactionAmount, ethTransactionAmount } = action.payload
       return {
@@ -119,6 +138,16 @@ export default function reducer ({ confirmTransaction: confirmState = initState
         ...confirmState,
         nonce: action.payload,
       }
+    case FETCH_METHOD_DATA_START:
+      return {
+        ...confirmState,
+        fetchingMethodData: true,
+      }
+    case FETCH_METHOD_DATA_END:
+      return {
+        ...confirmState,
+        fetchingMethodData: false,
+      }
     case CLEAR_CONFIRM_TRANSACTION:
       return initState
     default:
@@ -153,6 +182,19 @@ export function clearTokenData () {
   }
 }
 
+export function updateMethodData (methodData) {
+  return {
+    type: UPDATE_METHOD_DATA,
+    payload: methodData,
+  }
+}
+
+export function clearMethodData () {
+  return {
+    type: CLEAR_METHOD_DATA,
+  }
+}
+
 export function updateTransactionAmounts (amounts) {
   return {
     type: UPDATE_TRANSACTION_AMOUNTS,
@@ -195,6 +237,12 @@ export function updateNonce (nonce) {
   }
 }
 
+export function setFetchingMethodData (isFetching) {
+  return {
+    type: isFetching ? FETCH_METHOD_DATA_START : FETCH_METHOD_DATA_END,
+  }
+}
+
 export function updateGasAndCalculate ({ gasLimit, gasPrice }) {
   return (dispatch, getState) => {
     const { confirmTransaction: { txData } } = getState()
@@ -294,6 +342,17 @@ export function setTransactionToConfirm (transactionId) {
       if (txParams.data) {
         const { tokens: existingTokens } = state
         const { data, to: tokenAddress } = txParams
+
+        try {
+          dispatch(setFetchingMethodData(true))
+          const methodData = await getMethodData(data)
+          dispatch(updateMethodData(methodData))
+          dispatch(setFetchingMethodData(false))
+        } catch (error) {
+          dispatch(updateMethodData({}))
+          dispatch(setFetchingMethodData(false))
+        }
+
         const tokenData = getTokenData(data)
         dispatch(updateTokenData(tokenData))
 

ui/app/helpers/confirm-transaction/util.js

@@ -6,6 +6,9 @@ import ethUtil from 'ethereumjs-util'
 
 abiDecoder.addABI(abi)
 
+import MethodRegistry from 'eth-method-registry'
+const registry = new MethodRegistry({ provider: global.ethereumProvider })
+
 import {
   conversionUtil,
   addCurrencies,
@@ -17,6 +20,18 @@ export function getTokenData (data = {}) {
   return abiDecoder.decodeMethod(data)
 }
 
+export async function getMethodData (data = {}) {
+  const prefixedData = ethUtil.addHexPrefix(data)
+  const fourBytePrefix = prefixedData.slice(0, 10)
+  const sig = await registry.lookup(fourBytePrefix)
+  const parsedResult = registry.parse(sig)
+
+  return {
+    name: parsedResult.name,
+    params: parsedResult.args,
+  }
+}
+
 export function increaseLastGasPrice (lastGasPrice) {
   return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
     multiplicandBase: 16,