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

* Get contract method data from 4byte if we can't get it from eth-method-registry

* Clarify token method name fallback code in getMethodData

* Bugfix: don't attempt to translate falsy actionKeys in confirm-transaction-base.component.js

* Rewrite getMethodFrom4Byte with async-await

* Call four byte and method-registry requests in parallel in getMethodData()

2 files changed, 28 insertions, 4 deletions

diff --git a/ui/app/helpers/utils/transactions.util.js b/ui/app/helpers/utils/transactions.util.js
index cb6c9536c..8d96b1487 100644
--- a/ui/app/helpers/utils/transactions.util.js
+++ b/ui/app/helpers/utils/transactions.util.js
@@ -30,6 +30,21 @@ export function getTokenData (data = '') {
   return abiDecoder.decodeMethod(data)
 }
 
+async function getMethodFrom4Byte (fourBytePrefix) {
+  const fourByteResponse = (await fetch(`https://www.4byte.directory/api/v1/signatures/?hex_signature=${fourBytePrefix}`, {
+    referrerPolicy: 'no-referrer-when-downgrade',
+    body: null,
+    method: 'GET',
+    mode: 'cors',
+  })).json()
+
+  if (fourByteResponse.count === 1) {
+    return fourByteResponse.results[0].text_signature
+  } else {
+    return null
+  }
+}
+
 const registry = new MethodRegistry({ provider: global.ethereumProvider })
 
 /**
@@ -43,7 +58,16 @@ const registry = new MethodRegistry({ provider: global.ethereumProvider })
     const fourBytePrefix = prefixedData.slice(0, 10)
 
     try {
-      const sig = await registry.lookup(fourBytePrefix)
+      const fourByteSig = getMethodFrom4Byte(fourBytePrefix).catch((e) => {
+          log.error(e)
+          return null
+      })
+
+      let sig = await registry.lookup(fourBytePrefix)
+
+      if (!sig) {
+        sig = await fourByteSig
+      }
 
       if (!sig) {
         return {}
@@ -57,8 +81,8 @@ const registry = new MethodRegistry({ provider: global.ethereumProvider })
       }
     } catch (error) {
       log.error(error)
-      const contractData = getTokenData(data)
-      const { name } = contractData || {}
+      const tokenData = getTokenData(data)
+      const { name } = tokenData || {}
       return { name }
     }
 
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 5cafe91c9..63e63ce4a 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
@@ -543,7 +543,7 @@ export default class ConfirmTransactionBase extends Component {
         toName={toName}
         toAddress={toAddress}
         showEdit={onEdit && !isTxReprice}
-        action={this.context.t(actionKey) || getMethodName(name) || this.context.t('contractInteraction')}
+        action={actionKey && this.context.t(actionKey) || getMethodName(name) || this.context.t('contractInteraction')}
         title={title}
         titleComponent={this.renderTitleComponent()}
         subtitle={subtitle}