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, 23 insertions, 31 deletions

diff --git a/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
index 25f2402f1..fc0606365 100644
--- a/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -12,18 +12,17 @@ import {
   CONFIRM_TOKEN_METHOD_PATH,
   SIGNATURE_REQUEST_PATH,
 } from '../../helpers/constants/routes'
-import { isConfirmDeployContract } from '../../helpers/utils/transactions.util'
 import {
   TOKEN_METHOD_TRANSFER,
   TOKEN_METHOD_APPROVE,
   TOKEN_METHOD_TRANSFER_FROM,
+  DEPLOY_CONTRACT_ACTION_KEY,
+  SEND_ETHER_ACTION_KEY,
 } from '../../helpers/constants/transactions'
 
 export default class ConfirmTransactionSwitch extends Component {
   static propTypes = {
     txData: PropTypes.object,
-    methodData: PropTypes.object,
-    fetchingData: PropTypes.bool,
     isEtherTransaction: PropTypes.bool,
     isTokenMethod: PropTypes.bool,
   }
@@ -31,31 +30,21 @@ export default class ConfirmTransactionSwitch extends Component {
   redirectToTransaction () {
     const {
       txData,
-      methodData: { name },
-      fetchingData,
-      isEtherTransaction,
-      isTokenMethod,
     } = this.props
-    const { id, txParams: { data } = {} } = txData
+    const { id, txParams: { data } = {}, transactionCategory } = txData
 
-    if (fetchingData) {
-      return <Loading />
-    }
-
-    if (isConfirmDeployContract(txData)) {
+    if (transactionCategory === DEPLOY_CONTRACT_ACTION_KEY) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
       return <Redirect to={{ pathname }} />
     }
 
-    if (isEtherTransaction && !isTokenMethod) {
+    if (transactionCategory === SEND_ETHER_ACTION_KEY) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
       return <Redirect to={{ pathname }} />
     }
 
     if (data) {
-      const methodName = name && name.toLowerCase()
-
-      switch (methodName) {
+      switch (transactionCategory) {
         case TOKEN_METHOD_TRANSFER: {
           const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
           return <Redirect to={{ pathname }} />
diff --git a/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
index 8213f0964..230a931ad 100644
--- a/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
+++ b/ui/app/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
@@ -4,24 +4,27 @@ import {
   TOKEN_METHOD_TRANSFER,
   TOKEN_METHOD_APPROVE,
   TOKEN_METHOD_TRANSFER_FROM,
+  SEND_ETHER_ACTION_KEY,
 } from '../../helpers/constants/transactions'
+import { unconfirmedTransactionsListSelector } from '../../selectors/confirm-transaction'
 
-const mapStateToProps = state => {
-  const {
-    confirmTransaction: {
-      txData,
-      methodData,
-      fetchingData,
-      toSmartContract,
-    },
-  } = state
+const mapStateToProps = (state, ownProps) => {
+  const { metamask: { unapprovedTxs } } = state
+  const { match: { params = {}, url } } = ownProps
+  const urlId = url && url.match(/\d+/) && url.match(/\d+/)[0]
+  const { id: paramsId } = params
+  const transactionId = paramsId || urlId
+
+  const unconfirmedTransactions = unconfirmedTransactionsListSelector(state)
+  const totalUnconfirmed = unconfirmedTransactions.length
+  const transaction = totalUnconfirmed
+    ? unapprovedTxs[transactionId] || unconfirmedTransactions[totalUnconfirmed - 1]
+    : {}
 
   return {
-    txData,
-    methodData,
-    fetchingData,
-    isEtherTransaction: !toSmartContract,
-    isTokenMethod: [TOKEN_METHOD_APPROVE, TOKEN_METHOD_TRANSFER, TOKEN_METHOD_TRANSFER_FROM].includes(methodData.name && methodData.name.toLowerCase()),
+    txData: transaction,
+    isEtherTransaction: transaction && transaction.transactionCategory === SEND_ETHER_ACTION_KEY,
+    isTokenMethod: [TOKEN_METHOD_APPROVE, TOKEN_METHOD_TRANSFER, TOKEN_METHOD_TRANSFER_FROM].includes(transaction && transaction.transactionCategory && transaction.transactionCategory.toLowerCase()),
   }
 }