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