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

1 files changed, 11 insertions, 8 deletions

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,
   }
 }