version 0.9.5 (#343)

* Send correct contract args to event (#338) * Make sure consistent categoryCode for lifecycle of tx (#340) * update to version 0.9.5 * Make sure txOptions are pased in with correct key (#344)
blocknative · Jul 22, 2019 · 0c68b80 · 0c68b80
1 parent e0e95b7
commit 0c68b80
Show file tree

Hide file tree

Showing 14 changed files with 134 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.9.4.
+The current version is 0.9.5.
 There are minified and non-minified versions.
 Put this script at the top of your `<head>`
 
 ```html
-<script src="https://assist.blocknative.com/0-9-4/assist.js"></script>
+<script src="https://assist.blocknative.com/0-9-5/assist.js"></script>
 
 <!-- OR... -->
 
-<script src="https://assist.blocknative.com/0-9-4/assist.min.js"></script>
+<script src="https://assist.blocknative.com/0-9-5/assist.min.js"></script>
 ```
 
 ### Initialize the Library
@@ -371,6 +371,20 @@ Transaction(txObject, callback, {messages: {txPending: () => 'Sending ETH...'}})
 
 The `messages` object _must_ always be the _last_ argument provided to the send method for it to be recognized.
 
+### Click handlers for transaction notifications
+
+You can also add click handler functions to a transaction that will be executed when the user clicks on the notification.
+
+```javascript
+myContract.vote(param1, param2, options, callback, {
+  messages: {txPending: () => `Voting for ${param1} in progress`},
+  clickHandlers: {
+    txPending: () => route('./votes'), // can specify a click handler for specific event codes which takes precedence
+    onclick: () => console.log('this is the global click handler') // or you can specify a onclick function which will run for every event for this transaction that doesn't have a click handler specified
+  }
+})
+```
+
 ### Transaction Events
 
 By defining a function and including it in the config on the `handleNotificationEvent` property you can hook in to all of the transaction events within Assist. The function will be called with a transaction event object which has the following properties:
@@ -594,15 +608,26 @@ var myContract = assistInstance.Contract(address, abi)
 myContract.myMethod().call()
 ```
 
-### `Transaction(txObjectOrHash [, callback] [, inlineCustomMsgs])`
+### `Transaction(txObjectOrHash [, callback] [, notificationOptions])`
 
 #### Parameters
 
 `txObjectOrHash` - `Object` || `String`: Transaction object or transaction hash (**Required**)
 
 `callback` - `Function`: Optional error first style callback if you don't want to use promises
 
-`inlineCustomMsgs` - `Object`: Optional notification message overrides
+`notificationOptions` - `Object`: Optional notification custom options
+
+```javascript
+const notificationOptions = {
+  messages: {
+    txPending: () => 'your bid is pending...
+  },
+  clickHandlers: {
+    txPending: () => route('./open-bids')
+  }
+}
+```
 
 #### Returns
 
@@ -692,7 +717,8 @@ Trigger a custom UI notification
 ```javascript
 options = {
   customTimeout: Number, // Specify how many ms the notification should exist. Set to -1 for no timeout.
-  customCode: String // An identifier for this notify call
+  customCode: String, // An identifier for this notify call
+  onclick: Function // Function to run when user clicks notification
 }
 ```
 

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

diff --git a/src/__integration-tests__/websockets/index.test.js b/src/__integration-tests__/websockets/index.test.js
@@ -192,7 +192,9 @@ describe('assist is connected to a websocket', () => {
     const transaction = {
       status: 'pending',
       nonce: 123,
-      id: 'some-id'
+      id: 'some-id',
+      hash: '0x',
+      originalHash: undefined
     }
     const txObj = {
       transaction,
@@ -221,7 +223,7 @@ describe('assist is connected to a websocket', () => {
     test('the expected event should be emitted', () => {
       expect(handleEventSpy).toHaveBeenCalledWith({
         eventCode: payload.eventCode,
-        categoryCode: 'activeTransaction',
+        categoryCode: 'activeContract',
         transaction: txObj.transaction,
         contract: txObj.contract,
         inlineCustomMsgs: txObj.inlineCustomMsgs
@@ -236,7 +238,7 @@ describe('assist is connected to a websocket', () => {
       test(`emitted event should have eventCode 'txPending'`, () => {
         expect(handleEventSpy).toHaveBeenCalledWith({
           eventCode: 'txPending',
-          categoryCode: 'activeTransaction',
+          categoryCode: 'activeContract',
           transaction: txObj.transaction,
           contract: txObj.contract,
           inlineCustomMsgs: txObj.inlineCustomMsgs
@@ -249,7 +251,8 @@ describe('assist is connected to a websocket', () => {
     const transaction = {
       status: 'confirmed',
       nonce: 123,
-      id: 'some-id'
+      id: 'some-id',
+      hash: '0x'
     }
     const txObj = {
       transaction,
@@ -290,7 +293,7 @@ describe('assist is connected to a websocket', () => {
       test(`correct event should be emitted with tx status 'completed'`, () => {
         expect(handleEventSpy).toHaveBeenCalledWith({
           eventCode: 'txConfirmed',
-          categoryCode: 'activeTransaction',
+          categoryCode: 'activeContract',
           transaction: { ...txObj.transaction, status: 'completed' },
           contract: txObj.contract,
           inlineCustomMsgs: txObj.inlineCustomMsgs
@@ -314,7 +317,7 @@ describe('assist is connected to a websocket', () => {
       test(`correct event should be emitted with tx status 'confirmed'`, () => {
         expect(handleEventSpy).toHaveBeenCalledWith({
           eventCode: 'txConfirmed',
-          categoryCode: 'activeTransaction',
+          categoryCode: 'activeContract',
           transaction: { ...txObj.transaction, status: 'confirmed' },
           contract: txObj.contract,
           inlineCustomMsgs: txObj.inlineCustomMsgs
@@ -328,7 +331,8 @@ describe('assist is connected to a websocket', () => {
     const transaction = {
       status: 'failed',
       nonce: 123,
-      id: 'some-id'
+      id: 'some-id',
+      hash: '0x'
     }
     const txObj = {
       transaction,
@@ -359,7 +363,7 @@ describe('assist is connected to a websocket', () => {
     test(`correct event should be emitted with tx status 'failed'`, () => {
       expect(handleEventSpy).toHaveBeenCalledWith({
         eventCode: 'txFailed',
-        categoryCode: 'activeTransaction',
+        categoryCode: 'activeContract',
         transaction: { ...txObj.transaction, status: 'failed' },
         contract: txObj.contract,
         inlineCustomMsgs: txObj.inlineCustomMsgs

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -223,6 +223,10 @@ body {
   clear: both;
 }
 
+.clickable:hover {
+  cursor: pointer;
+}
+
 /* Onboarding */
 
 .bn-onboard-modal-shade {

diff --git a/src/js/helpers/events.js b/src/js/helpers/events.js
@@ -7,7 +7,7 @@ import { checkForSocketConnection, retryLogEvent } from './websockets'
 import { getItem } from './storage'
 import { removeUnwantedNotifications } from '../views/dom'
 
-export function handleEvent(eventObj, clickHandlers) {
+export function handleEvent(eventObj, modalClickHandlers) {
   const { eventCode, categoryCode, transaction } = eventObj
   const { handleNotificationEvent, headlessMode } = state.config || {}
   const serverEvent =
@@ -19,7 +19,9 @@ export function handleEvent(eventObj, clickHandlers) {
 
   const notificationEvent = eventCode.includes('tx') || eventCode === 'nsfFail'
 
-  let eventToLog = { ...eventObj }
+  const { inlineCustomMessages, clickHandlers, ...event } = eventObj
+
+  let eventToLog = { ...event }
 
   // If dealing with a custom notification the logged event
   // should have it's event and category code changed
@@ -62,7 +64,7 @@ export function handleEvent(eventObj, clickHandlers) {
   if (!headlessMode && showNotification) {
     eventToUI[categoryCode] &&
       eventToUI[categoryCode][eventCode] &&
-      eventToUI[categoryCode][eventCode](eventObj, clickHandlers)
+      eventToUI[categoryCode][eventCode](eventObj, modalClickHandlers)
   }
 }
 

diff --git a/src/js/helpers/utilities.js b/src/js/helpers/utilities.js
@@ -94,10 +94,10 @@ export function separateArgs(allArgs, argsLength) {
   const allArgsCopy = [...allArgs]
   const methodArgs = argsLength ? allArgsCopy.splice(0, argsLength) : []
 
-  const inlineCustomMsgs =
+  const notificationOptions =
     typeof last(allArgsCopy) === 'object' &&
-    last(allArgsCopy).messages &&
-    takeLast(allArgsCopy).messages
+    (last(allArgsCopy).messages || last(allArgsCopy).clickHandlers) &&
+    takeLast(allArgsCopy)
 
   const callback =
     typeof last(allArgsCopy) === 'function' && takeLast(allArgsCopy)
@@ -114,7 +114,7 @@ export function separateArgs(allArgs, argsLength) {
     methodArgs,
     txOptions,
     defaultBlock,
-    inlineCustomMsgs
+    notificationOptions
   }
 }
 

diff --git a/src/js/helpers/websockets.js b/src/js/helpers/websockets.js
@@ -137,10 +137,11 @@ export function handleSocketMessage(msg) {
 
         handleEvent({
           eventCode: eventCode === 'txPool' ? 'txPending' : eventCode,
-          categoryCode: 'activeTransaction',
+          categoryCode: txObj.contract ? 'activeContract' : 'activeTransaction',
           transaction: txObj.transaction,
           contract: txObj.contract,
-          inlineCustomMsgs: txObj.inlineCustomMsgs
+          inlineCustomMsgs: txObj.inlineCustomMsgs,
+          clickHandlers: txObj.clickHandlers
         })
         break
       case 'confirmed':
@@ -165,10 +166,11 @@ export function handleSocketMessage(msg) {
 
         handleEvent({
           eventCode: 'txConfirmed',
-          categoryCode: 'activeTransaction',
+          categoryCode: txObj.contract ? 'activeContract' : 'activeTransaction',
           transaction: txObj.transaction,
           contract: txObj.contract,
-          inlineCustomMsgs: txObj.inlineCustomMsgs
+          inlineCustomMsgs: txObj.inlineCustomMsgs,
+          clickHandlers: txObj.clickHandlers
         })
 
         if (txObj.transaction.status === 'completed') {
@@ -184,10 +186,11 @@ export function handleSocketMessage(msg) {
 
         handleEvent({
           eventCode: 'txFailed',
-          categoryCode: 'activeTransaction',
+          categoryCode: txObj.contract ? 'activeContract' : 'activeTransaction',
           transaction: txObj.transaction,
           contract: txObj.contract,
-          inlineCustomMsgs: txObj.inlineCustomMsgs
+          inlineCustomMsgs: txObj.inlineCustomMsgs,
+          clickHandlers: txObj.clickHandlers
         })
 
         removeTransactionFromQueue(transaction.id)

diff --git a/src/js/index.js b/src/js/index.js
@@ -512,7 +512,7 @@ function init(config) {
 
   // TRANSACTION FUNCTION //
 
-  function Transaction(txOptionsOrHash, callback, inlineCustomMsgs = {}) {
+  function Transaction(txOptionsOrHash, callback, notificationOptions = {}) {
     const {
       validApiKey,
       supportedNetwork,
@@ -551,7 +551,8 @@ function init(config) {
           id,
           status: 'signedTransaction'
         },
-        inlineCustomMsgs
+        inlineCustomMsgs: notificationOptions.messages,
+        clickHandlers: notificationOptions.clickHandlers
       })
 
       // handle txhash
@@ -575,10 +576,11 @@ function init(config) {
       const promiEvent = new PromiEventLib.PromiEvent()
       sendTransaction({
         categoryCode: 'activeTransaction',
-        txOptionsOrHash,
+        txOptions: txOptionsOrHash,
         sendMethod,
         callback,
-        inlineCustomMsgs: inlineCustomMsgs.messages,
+        inlineCustomMsgs: notificationOptions.messages,
+        clickHandlers: notificationOptions.clickHandlers,
         promiEvent
       })
 
@@ -587,10 +589,11 @@ function init(config) {
 
     return sendTransaction({
       categoryCode: 'activeTransaction',
-      txOptionsOrHash,
+      txOptions: txOptionsOrHash,
       sendMethod,
       callback,
-      inlineCustomMsgs: inlineCustomMsgs.messages
+      inlineCustomMsgs: notificationOptions.messages,
+      clickHandlers: notificationOptions.clickHandlers
     })
   }
 }

diff --git a/src/js/logic/contract-methods.js b/src/js/logic/contract-methods.js
@@ -114,14 +114,18 @@ export function modernSend({ contractObj, methodName, args, truffleContract }) {
 
   returnObject.send = (...innerArgs) => {
     const promiEvent = new PromiEventLib.PromiEvent()
-    const { callback, txOptions, inlineCustomMsgs } = separateArgs(innerArgs, 0)
+    const { callback, txOptions, notificationOptions } = separateArgs(
+      innerArgs,
+      0
+    )
 
     sendTransaction({
       categoryCode: 'activeContract',
       txOptions,
       sendMethod: innerMethod,
       callback,
-      inlineCustomMsgs,
+      inlineCustomMsgs: notificationOptions.messages,
+      clickHandlers: notificationOptions.clickHandlers,
       contractObj,
       methodName,
       methodArgs: args,
@@ -225,7 +229,7 @@ export function legacyCall({
         categoryCode: 'activeContract',
         contract: {
           methodName,
-          parameters: args,
+          parameters: methodArgs,
           result: JSON.stringify(result)
         }
       })
@@ -244,7 +248,7 @@ export async function legacySend({
   argsLength,
   truffleContract
 }) {
-  const { callback, txOptions, methodArgs, inlineCustomMsgs } = separateArgs(
+  const { callback, txOptions, methodArgs, notificationOptions } = separateArgs(
     args,
     argsLength
   )
@@ -265,7 +269,8 @@ export async function legacySend({
     txOptions,
     sendMethod,
     callback,
-    inlineCustomMsgs,
+    inlineCustomMsgs: notificationOptions.messages,
+    clickHandlers: notificationOptions.clickHandlers,
     contractObj,
     methodName,
     overloadKey,
@@ -280,7 +285,7 @@ export function truffleSend({
   args,
   argsLength
 }) {
-  const { callback, txOptions, methodArgs, inlineCustomMsgs } = separateArgs(
+  const { callback, txOptions, methodArgs, notificationOptions } = separateArgs(
     args,
     argsLength
   )
@@ -298,7 +303,8 @@ export function truffleSend({
     txOptions,
     sendMethod,
     callback,
-    inlineCustomMsgs,
+    inlineCustomMsgs: notificationOptions.messages,
+    clickHandlers: notificationOptions.clickHandlers,
     contractObj,
     methodName,
     overloadKey,