4byte fallback (#6551)

* Adds 4byte registry fallback to getMethodData() (#6435)

* Adds fetchWithCache to guard against unnecessary API calls

* Add custom fetch wrapper with abort on timeout

* Use opts and cacheRefreshTime in fetch-with-cache util

* Use custom fetch wrapper with timeout for fetch-with-cache

* Improve contract method data fetching (#6623)

* Remove async call from getTransactionActionKey()

* Stop blocking confirm screen rendering on method data loading, and base screen route on transactionCategory

* Remove use of withMethodData, fix use of knownMethodData, in relation to transaction-list-item.component

* Load data contract method data progressively, making it non-blocking; requires simplifying conf-tx-base lifecycle logic.

* Allow editing of gas price while loading on the confirm screen.

* Fix transactionAction component and its unit tests.

* Fix confirm transaction components for cases of route transitions within metamask.

* Only call toString on id if truthy in getNavigateTxData()

* Fix knownMethodData retrieval and data fetching from fourbyte

2 files changed, 18 insertions, 12 deletions

diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
index c6a05cf0f..5c46c8449 100644
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -94,6 +94,7 @@ export default class ConfirmTransactionBase extends Component {
     advancedInlineGasShown: PropTypes.bool,
     insufficientBalance: PropTypes.bool,
     hideFiatConversion: PropTypes.bool,
+    transactionCategory: PropTypes.string,
   }
 
   state = {
@@ -268,6 +269,7 @@ export default class ConfirmTransactionBase extends Component {
       } = {},
       hideData,
       dataComponent,
+      transactionCategory,
     } = this.props
 
     if (hideData) {
@@ -279,7 +281,7 @@ export default class ConfirmTransactionBase extends Component {
         <div className="confirm-page-container-content__data-box-label">
           {`${t('functionType')}:`}
           <span className="confirm-page-container-content__function-type">
-            { name || t('notFound') }
+            { getMethodName(name) || this.context.tOrKey(transactionCategory) || this.context.t('contractInteraction') }
           </span>
         </div>
         {
@@ -464,6 +466,7 @@ export default class ConfirmTransactionBase extends Component {
 
   handleNextTx (txId) {
     const { history, clearConfirmTransaction } = this.props
+
     if (txId) {
       clearConfirmTransaction()
       history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`)
@@ -473,7 +476,7 @@ export default class ConfirmTransactionBase extends Component {
   getNavigateTxData () {
     const { currentNetworkUnapprovedTxs, txData: { id } = {} } = this.props
     const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs).reverse()
-    const currentPosition = enumUnapprovedTxs.indexOf(id.toString())
+    const currentPosition = enumUnapprovedTxs.indexOf(id ? id.toString() : '')
 
     return {
       totalTx: enumUnapprovedTxs.length,
@@ -530,7 +533,6 @@ export default class ConfirmTransactionBase extends Component {
       valid: propsValid = true,
       errorMessage,
       errorKey: propsErrorKey,
-      actionKey,
       title,
       subtitle,
       hideSubtitle,
@@ -542,6 +544,7 @@ export default class ConfirmTransactionBase extends Component {
       assetImage,
       warning,
       unapprovedTxCount,
+      transactionCategory,
     } = this.props
     const { submitting, submitError } = this.state
 
@@ -557,7 +560,7 @@ export default class ConfirmTransactionBase extends Component {
         toAddress={toAddress}
         showEdit={onEdit && !isTxReprice}
         // In the event that the key is falsy (and inherently invalid), use a fallback string
-        action={this.context.tOrKey(actionKey) || getMethodName(name) || this.context.t('contractInteraction')}
+        action={getMethodName(name) || this.context.tOrKey(transactionCategory) || this.context.t('contractInteraction')}
         title={title}
         titleComponent={this.renderTitleComponent()}
         subtitle={subtitle}
diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 2b087f5cc..6b73b58f0 100644
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -18,7 +18,7 @@ import { isBalanceSufficient, calcGasTotal } from '../send/send.utils'
 import { conversionGreaterThan } from '../../helpers/utils/conversion-util'
 import { MIN_GAS_LIMIT_DEC } from '../send/send.constants'
 import { checksumAddress, addressSlicer, valuesFor } from '../../helpers/utils/util'
-import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../selectors/selectors'
+import { getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet, getKnownMethodData } from '../../selectors/selectors'
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   return {
@@ -27,8 +27,9 @@ const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   }
 }, {})
 
-const mapStateToProps = (state, props) => {
-  const { toAddress: propsToAddress } = props
+const mapStateToProps = (state, ownProps) => {
+  const { toAddress: propsToAddress, match: { params = {} } } = ownProps
+  const { id: paramsTransactionId } = params
   const { showFiatInTestnets } = preferencesSelector(state)
   const isMainnet = getIsMainnet(state)
   const { confirmTransaction, metamask, gas } = state
@@ -43,18 +44,18 @@ const mapStateToProps = (state, props) => {
     hexTransactionFee,
     hexTransactionTotal,
     tokenData,
-    methodData,
     txData,
     tokenProps,
     nonce,
   } = confirmTransaction
-  const { txParams = {}, lastGasPrice, id: transactionId } = txData
+  const { txParams = {}, lastGasPrice, id: transactionId, transactionCategory } = txData
   const {
     from: fromAddress,
     to: txParamsToAddress,
     gasPrice,
     gas: gasLimit,
     value: amount,
+    data,
   } = txParams
   const accounts = getMetaMaskAccounts(state)
   const {
@@ -87,8 +88,7 @@ const mapStateToProps = (state, props) => {
     )
 
   const isTxReprice = Boolean(lastGasPrice)
-
-  const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
+  const transaction = R.find(({ id }) => id === (transactionId || Number(paramsTransactionId)))(selectedAddressTxList)
   const transactionStatus = transaction ? transaction.status : ''
 
   const currentNetworkUnapprovedTxs = R.filter(
@@ -104,6 +104,8 @@ const mapStateToProps = (state, props) => {
     conversionRate,
   })
 
+  const methodData = getKnownMethodData(state, data) || {}
+
   return {
     balance,
     fromAddress,
@@ -119,7 +121,7 @@ const mapStateToProps = (state, props) => {
     hexTransactionAmount,
     hexTransactionFee,
     hexTransactionTotal,
-    txData,
+    txData: Object.keys(txData).length ? txData : transaction || {},
     tokenData,
     methodData,
     tokenProps,
@@ -141,6 +143,7 @@ const mapStateToProps = (state, props) => {
     hideSubtitle: (!isMainnet && !showFiatInTestnets),
     hideFiatConversion: (!isMainnet && !showFiatInTestnets),
     metaMetricsSendCount,
+    transactionCategory,
   }
 }