version 0.8.11 (#306)

* Enhancement/tx stall style (#305) * Change txStall event to a progress type * Update snapshots * update to version 0.8.11
blocknative · Jun 20, 2019 · 465aeee · 465aeee
1 parent 9d0784a
commit 465aeee
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -43,16 +43,16 @@ yarn add bnc-assist
 #### Script Tag
 
 The library uses [semantic versioning](https://semver.org/spec/v2.0.0.html).
-The current version is 0.8.10.
+The current version is 0.8.11.
 There are minified and non-minified versions.
 Put this script at the top of your `<head>`
 
 ```html
-<script src="https://assist.blocknative.com/0-8-10/assist.js"></script>
+<script src="https://assist.blocknative.com/0-8-11/assist.js"></script>
 
 <!-- OR... -->
 
-<script src="https://assist.blocknative.com/0-8-10/assist.min.js"></script>
+<script src="https://assist.blocknative.com/0-8-11/assist.min.js"></script>
 ```
 
 ### Initialize the Library

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bnc-assist",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "description": "Blocknative Assist js library for Dapp developers",
   "main": "lib/assist.min.js",
   "scripts": {

diff --git a/src/__integration-tests__/ui-rendering/__snapshots__/index.test.js.snap b/src/__integration-tests__/ui-rendering/__snapshots__/index.test.js.snap
@@ -435,9 +435,13 @@ exports[`dom-rendering event activeContract-txSpeedUp should trigger correct DOM
 exports[`dom-rendering event activeContract-txStall should trigger correct DOM render [Custom state 0] 1`] = `
 "
     
-  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-failed bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
+  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-progress bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
 		<span class=\\"bn-status-icon \\">
-      
+      <div class=\\"progress-tooltip \\">
+				<div class=\\"progress-tooltip-inner\\">
+					You will be notified when this transaction is completed.
+				</div>
+			</div>
 		</span>
 		<div class=\\"bn-notification-info\\">
 			<p>Your transaction ID: 1235 has stalled</p>
@@ -455,9 +459,13 @@ exports[`dom-rendering event activeContract-txStall should trigger correct DOM r
 exports[`dom-rendering event activeContract-txStall should trigger correct DOM render [Custom state 1] 1`] = `
 "
     
-  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-failed bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
+  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-progress bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
 		<span class=\\"bn-status-icon \\">
-      
+      <div class=\\"progress-tooltip \\">
+				<div class=\\"progress-tooltip-inner\\">
+					You will be notified when this transaction is completed.
+				</div>
+			</div>
 		</span>
 		<div class=\\"bn-notification-info\\">
 			<p>txStall custom msg</p>
@@ -1519,9 +1527,13 @@ exports[`dom-rendering event activeTransaction-txSpeedUp should trigger correct
 exports[`dom-rendering event activeTransaction-txStall should trigger correct DOM render [Custom state 0] 1`] = `
 "
     
-  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-failed bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
+  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-progress bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
 		<span class=\\"bn-status-icon \\">
-      
+      <div class=\\"progress-tooltip \\">
+				<div class=\\"progress-tooltip-inner\\">
+					You will be notified when this transaction is completed.
+				</div>
+			</div>
 		</span>
 		<div class=\\"bn-notification-info\\">
 			<p>Your transaction ID: 1235 has stalled</p>
@@ -1539,9 +1551,13 @@ exports[`dom-rendering event activeTransaction-txStall should trigger correct DO
 exports[`dom-rendering event activeTransaction-txStall should trigger correct DOM render [Custom state 1] 1`] = `
 "
     
-  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-failed bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
+  <div class=\\"\\" id=\\"blocknative-notifications\\" style=\\"transform: translateX(600px); right: 0px; bottom: 0px;\\"><div class=\\"bn-notifications-scroll\\" style=\\"overflow-y: initial; height: auto;\\"><ul class=\\"bn-notifications\\"><li class=\\"bn-notification bn-progress bn-txStall bn-cf7fc5a7-1498-419e-8bf9-654d06af5534 \\" style=\\"transform: translateX(600px);\\">
 		<span class=\\"bn-status-icon \\">
-      
+      <div class=\\"progress-tooltip \\">
+				<div class=\\"progress-tooltip-inner\\">
+					You will be notified when this transaction is completed.
+				</div>
+			</div>
 		</span>
 		<div class=\\"bn-notification-info\\">
 			<p>txStall custom msg</p>

diff --git a/src/js/helpers/utilities.js b/src/js/helpers/utilities.js
@@ -140,12 +140,12 @@ export function eventCodeToType(eventCode) {
     case 'txRequest':
     case 'txPending':
     case 'txSent':
+    case 'txStall':
     case 'txSpeedUp':
     case 'txCancel':
     case 'pending':
       return 'progress'
     case 'txSendFail':
-    case 'txStall':
     case 'txFailed':
     case 'nsfFail':
     case 'txRepeat':
@@ -269,3 +269,12 @@ export function handleWeb3Error(errorObj) {
     reason: message || errorObj
   })
 }
+
+export function truffleContractUsesWeb3v1(contractObj) {
+  return (
+    contractObj.constructor &&
+    contractObj.constructor.web3 &&
+    contractObj.constructor.web3.version &&
+    contractObj.constructor.web3.version.substring(0, 1) === '1'
+  )
+}
diff --git a/src/js/index.js b/src/js/index.js
@@ -14,14 +14,18 @@ import {
   legacyCall,
   legacySend,
   modernSend,
-  modernCall
+  modernCall,
+  truffleSend
 } from './logic/contract-methods'
 import { openWebsocketConnection } from './helpers/websockets'
 import { getUserAgent } from './helpers/browser'
 import { checkUserEnvironment, prepareForTransaction } from './logic/user'
 import sendTransaction from './logic/send-transaction'
 import { configureWeb3 } from './helpers/web3'
-import { getOverloadedMethodKeys } from './helpers/utilities'
+import {
+  getOverloadedMethodKeys,
+  truffleContractUsesWeb3v1
+} from './helpers/utilities'
 import { createIframe, updateStyle } from './helpers/iframe'
 import { validateConfig } from './helpers/validation'
 import {
@@ -220,10 +224,30 @@ function init(config) {
   // CONTRACT FUNCTION //
 
   function Contract(contractObj) {
-    const { validApiKey, supportedNetwork, web3Instance } = state
-
+    const { validApiKey, supportedNetwork, web3Instance, modernWeb3 } = state
     const truffleContract = contractObj.constructor.name === 'TruffleContract'
 
+    // Check using a version of truffle that uses web3 v1.x.x
+    if (truffleContract && !truffleContractUsesWeb3v1(contractObj)) {
+      throw new Error(
+        'Assist only supports truffle contracts using web3 v1.x.x. Please upgrade your truffle-contract dependency to >= verson 4.x.x.\nSee https://www.npmjs.com/package/truffle-contract?activeTab=versions for more information.'
+      )
+    }
+
+    // Set which types of send/call methods to use for this contract
+    let send
+    let call
+    if (truffleContract) {
+      send = truffleSend
+      call = legacyCall
+    } else if (modernWeb3) {
+      send = modernSend
+      call = modernCall
+    } else {
+      send = legacySend
+      call = legacyCall
+    }
+
     if (!validApiKey) {
       const errorObj = new Error('Your API key is not valid')
       errorObj.eventCode = 'initFail'
@@ -290,14 +314,14 @@ function init(config) {
 
         newContractObj[name] = (...args) =>
           constant
-            ? legacyCall(method, name, args, argsLength, truffleContract)
-            : legacySend(method, name, args, argsLength, truffleContract)
+            ? call(method, name, args, argsLength, truffleContract)
+            : send(method, name, args, argsLength)
 
         newContractObj[name].call = (...args) =>
-          legacyCall(method, name, args, argsLength, truffleContract)
+          call(method, name, args, argsLength, truffleContract)
 
         newContractObj[name].sendTransaction = (...args) =>
-          legacySend(method, name, args, argsLength, truffleContract)
+          send(method, name, args, argsLength)
 
         // Add any additional properties onto the method function
         Object.entries(contractObj[name]).forEach(([k, v]) => {
@@ -317,14 +341,14 @@ function init(config) {
 
             newContractObj[name][key] = (...args) =>
               constant
-                ? legacyCall(method, name, args, argsLength, truffleContract)
-                : legacySend(method, name, args, argsLength, truffleContract)
+                ? call(method, name, args, argsLength, truffleContract)
+                : send(method, name, args, argsLength)
 
             newContractObj[name][key].call = (...args) =>
-              legacyCall(method, name, args, argsLength, truffleContract)
+              call(method, name, args, argsLength, truffleContract)
 
             newContractObj[name][key].sendTransaction = (...args) =>
-              legacySend(method, name, args, argsLength, truffleContract)
+              send(method, name, args, argsLength)
 
             // Add any additional properties onto the method function
             Object.entries(method).forEach(([k, v]) => {
@@ -364,8 +388,8 @@ function init(config) {
             const method = contractObj.methods[name]
             methodsObj[name] = (...args) =>
               constant
-                ? modernCall(method, name, args)
-                : modernSend(method, name, args, truffleContract)
+                ? call(method, name, args, truffleContract)
+                : send(method, name, args)
 
             // Add any additional properties onto the method function
             Object.entries(method).forEach(([k, v]) => {
@@ -389,8 +413,8 @@ function init(config) {
           const overloadedMethod = contractObj.methods[overloadedMethodKey]
           methodsObj[overloadedMethodKey] = (...args) =>
             constant
-              ? modernCall(overloadedMethod, name, args)
-              : modernSend(overloadedMethod, name, args, truffleContract)
+              ? call(overloadedMethod, name, args, truffleContract)
+              : send(overloadedMethod, name, args)
 
           // Add any additional properties onto the method function
           Object.entries(overloadedMethod).forEach(([k, v]) => {

diff --git a/src/js/logic/contract-methods.js b/src/js/logic/contract-methods.js
@@ -92,7 +92,7 @@ export function modernCall(method, name, args) {
   return returnObject
 }
 
-export function modernSend(method, name, args, truffleContract) {
+export function modernSend(method, name, args) {
   const originalReturnObject = method(...args)
   const innerMethod = originalReturnObject.send
 
@@ -113,7 +113,7 @@ export function modernSend(method, name, args, truffleContract) {
       inlineCustomMsgs,
       method,
       { methodName: name, parameters: args },
-      truffleContract,
+      false,
       promiEvent
     )
 
@@ -209,21 +209,13 @@ export function legacyCall(method, name, allArgs, argsLength, truffleContract) {
   })
 }
 
-export async function legacySend(
-  method,
-  name,
-  allArgs,
-  argsLength,
-  truffleContract
-) {
+export async function legacySend(method, name, allArgs, argsLength) {
   const { callback, txObject, args, inlineCustomMsgs } = separateArgs(
     allArgs,
     argsLength
   )
 
-  const sendMethod = truffleContract
-    ? method.sendTransaction
-    : promisify(method)
+  const sendMethod = promisify(method)
 
   return sendTransaction(
     'activeContract',
@@ -236,6 +228,31 @@ export async function legacySend(
       methodName: name,
       parameters: args
     },
-    truffleContract
+    false
   )
 }
+
+export function truffleSend(method, name, allArgs, argsLength) {
+  const { callback, txObject, args, inlineCustomMsgs } = separateArgs(
+    allArgs,
+    argsLength
+  )
+
+  const promiEvent = new PromiEventLib.PromiEvent()
+  sendTransaction(
+    'activeContract',
+    txObject,
+    method,
+    callback,
+    inlineCustomMsgs,
+    method,
+    {
+      methodName: name,
+      parameters: args
+    },
+    true,
+    promiEvent
+  )
+
+  return promiEvent
+}
diff --git a/src/js/logic/send-transaction.js b/src/js/logic/send-transaction.js
@@ -201,21 +201,6 @@ function sendTransaction(
           onTxError(transactionId, errorObj, categoryCode)
           handleError({ resolve, reject, callback })(errorObj)
         })
-    } else if (truffleContract) {
-      txPromise
-        .then(async txObj => {
-          const hash = txObj.tx
-          onTxHash(transactionId, hash, categoryCode)
-
-          const receipt = await waitForTransactionReceipt(hash)
-          onTxReceipt(transactionId, categoryCode)
-          resolve({ receipt })
-          callback && callback(null, receipt)
-        })
-        .catch(async errorObj => {
-          onTxError(transactionId, errorObj, categoryCode)
-          handleError({ resolve, reject, callback })(errorObj)
-        })
     } else {
       new Promise(confirmed => {
         /* In web3 v1 instead of resolving the promise returned by sendTransaction