Use eth-method-registry to get method data

7 years ago · 9cde5ab11b
parent 7732cd4100
commit 9cde5ab11b
12 changed files with 20008 additions and 42 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -286,6 +286,9 @@
  "enterPasswordContinue": {
    "message": "Enter password to continue"
  },
+  "parameters": {
+    "message": "Parameters"
+  },
  "passwordNotLongEnough": {
    "message": "Password not long enough"
  },
--- a/app/scripts/controllers/transactions/index.js
+++ b/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
  }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/ui/app/components/input-number.js
+++ b/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
      }),
    ]),
  ])
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/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()

--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/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,
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/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 }} />
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
+++ b/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)
-}
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/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)
+      }
    }
  }

--- a/ui/app/ducks/confirm-transaction.duck.js
+++ b/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))

--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/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,