release 0.5.1 (#85)

* added uuid for each transaction, general refactoring (#71) * added uuid for each transaction, general refactoring * update to version 0.5.1 * Filter the state object (#68) * Filtered the state object returned from getState to just the essential pieces of state that would be required by a dapp dev * added missing parameter minimumBalance and reordered parameters in readme * fixed image bug for browser onboarding (#75) * added check to not render iframe if user is on mobile and mobile isn't blocked so that touch events work correctly on mobile (#74) * made txRepeat notification persist when txConfirmReminder notification is shown (#78) * Added inline custom tx messages (#79) * Enhancement/dark mode option (#77) * added darkMode option to config * Added new light blocknative logo, made sure basic modal is set to dark mode as well * fixed focus text color * added new darkmode assets for browser and mobile not supported modals * Enhancement/position notifications (#81) * Added config option to position transaction notifications * subtle tweaks to UI * fixed typo in readme * fixed transaction timer bug (#83)
blocknative · Apr 10, 2019 · b97445a · b97445a
1 parent b22088c
commit b97445a
Show file tree

Hide file tree

Showing 20 changed files with 726 additions and 460 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.5.0.
+The current version is 0.5.1.
 There are minified and non-minified versions.
 Put this script at the top of your `<head>`
 
 ```html
-<script src="https://assist.blocknative.com/0-5-0/assist.js"></script>
+<script src="https://assist.blocknative.com/0-5-1/assist.js"></script>
 
 <!-- OR... -->
 
-<script src="https://assist.blocknative.com/0-5-0/assist.min.js"></script>
+<script src="https://assist.blocknative.com/0-5-1/assist.min.js"></script>
 ```
 
 ### Initialize the Library
@@ -167,19 +167,22 @@ var config = {
       src: String, // Image URL for complete onboard modal
       srcset: String // Image URL(s) for complete onboard modal
     }
+  },
+  style: {
+    darkMode: Boolean, // Set Assist UI to dark mode
+    notificationsPosition: String // Defines which corner transaction notifications will be positioned. Options: 'topLeft', 'topRight', 'bottomRight', 'bottomLeft'. ['bottomRight']
   }
 }
 ```
 
 ### Custom Transaction Messages
 
-The functions provided to the `messages` object in the config, will be
-called with the following object so that a custom message string can be returned:
+Custom transaction messages can be set to override the default messages `Assist` provides. To do this you provide callback functions for each `eventCode` that you want to override. The callback functions must return a `String` and will be called with the following object to provide context information about the transaction:
 
 ```javascript
 {
   transaction: {
-    to: String, // The address the transaction was going to
+    to: String, // The address the transaction is going to
     gas: String, // Gas (wei)
     gasPrice: String, // Gas price (wei)
     hash: String, // The transaction hash
@@ -194,21 +197,39 @@ called with the following object so that a custom message string can be returned
 }
 ```
 
-#### Example
+You can provide a `messages` object to the `config` to set global message overrides. Each callback can parse the context object that is passed to it and decide what to return or just return a standard message for each `eventCode`:
 
 ```javascript
 var config = {
   //...
   messages: {
+    txSent: function(data) {
+      return 'Your transaction has been sent to the network'
+    },
     txConfirmed: function(data) {
       if (data.contract.methodName === 'contribute') {
         return 'Congratulations! You are now a contributor to the campaign'
       }
     }
+    // ....
   }
 }
 ```
 
+Sometimes you want more granular control over the transaction messages and you have all the relevant information you need to create a custom transaction message at the time of calling the method. In that case you can also add custom transactions messages inline with your transaction calls which take precedent over the messages set globally in the config.
+
+#### Example
+
+```javascript
+// 0.2 style send
+myContract.vote(param1, param2, options, callback, {messages: {txPending: () => `Voting for ${param1} in progress`}})
+
+// 1.0 style send
+myContract.vote(param1, param2).send(options, {messages: {txPending: () => `Voting for ${param1} in progress`}})
+```
+
+The `messages` object _must_ always be the _last_ argument provided to the send method for it to be recognized.
+
 ### Ethereum Network Ids
 
 The available ids for the `networkId` property of the config object:
@@ -361,41 +382,18 @@ assistInstance.Transaction(txObject)
 
 ```javascript
 state = {
-  version: String,
-  validApiKey: Boolean,
-  supportedNetwork: Boolean,
-  config: Object,
-  userAgent: String,
-  mobileDevice: Boolean,
-  validBrowser: Boolean,
-  legacyWeb3: Boolean,
-  modernWeb3: Boolean,
-  web3Version: String,
-  web3Instance: Object,
-  currentProvider: String,
-  web3Wallet: Boolean,
-  legacyWallet: Boolean,
-  modernWallet: Boolean,
-  accessToAccounts: Boolean,
-  walletLoggedIn: Boolean,
-  walletEnabled: Boolean,
-  walletEnableCalled: Boolean,
-  walletEnableCanceled: Boolean,
-  accountBalance: String,
-  correctNetwork: Boolean,
-  minimumBalance: String,
-  correctNetwork: Boolean,
-  userCurrentNetworkId: Number,
-  socket: Object,
-  pendingSocketConnection: Boolean,
-  socketConnection: Boolean,
-  accountAddress: String,
-  transactionQueue: Array,
-  transactionAwaitingApproval: Boolean,
-  iframe: Object,
-  iframeDocument: Object,
-  iframeWindow: Object,
-  connectionId: String
+  mobileDevice: Boolean, // User is on a mobile device
+  validBrowser: Boolean, // User is on a valid web3 browser
+  currentProvider: String, // Current provider being used to connect to the network
+  web3Wallet: Boolean, // User has a web3Wallet installed
+  accessToAccounts: Boolean, // Dapp has access to accounts
+  walletLoggedIn: Boolean, // User is logged in to wallet
+  walletEnabled: Boolean, // User has enabled EIP 1102 compliant wallet
+  accountAddress: String, // Address of the user's selected account
+  accountBalance: String, // User account balance
+  minimumBalance: String, // User has the minimum balance specified in the config
+  userCurrentNetworkId: Number, // Network id of the network the user is currently on
+  correctNetwork: Boolean, // User is on the network specified in the config
 }
 ```
 

diff --git a/lib/images/bn-branding-white.png b/lib/images/bn-branding-white.png
diff --git a/lib/images/[email protected] b/lib/images/[email protected]
diff --git a/lib/images/browser-not-supported-white.png b/lib/images/browser-not-supported-white.png
diff --git a/lib/images/[email protected] b/lib/images/[email protected]
diff --git a/lib/images/mobile-not-supported-white.png b/lib/images/mobile-not-supported-white.png
diff --git a/lib/images/[email protected] b/lib/images/[email protected]
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bnc-assist",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Blocknative Assist js library for Dapp developers",
   "main": "lib/assist.min.js",
   "scripts": {
@@ -28,7 +28,8 @@
     "@babel/polyfill": "^7.0.0",
     "babel-eslint": "^10.0.1",
     "bluebird": "^3.5.3",
-    "bowser": "^2.0.0-beta.3"
+    "bowser": "^2.0.0-beta.3",
+    "uuid": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

diff --git a/src/__tests__/helpers/iframe.test.js b/src/__tests__/helpers/iframe.test.js
@@ -2,8 +2,10 @@ import 'jest-dom/extend-expect'
 
 import { createIframe } from '../../js/helpers/iframe'
 import styles from '../../css/styles.css'
+import { updateState } from '../../js/helpers/state'
 
 test('iframe gets rendered to document', () => {
+  updateState({ config: {} })
   createIframe(window.document, styles)
 
   const iframe = document.querySelector('iframe')

diff --git a/src/css/dark-mode.css b/src/css/dark-mode.css
@@ -0,0 +1,50 @@
+.bn-onboard-modal-shade {
+  background: rgba(237, 237, 237, 0.1);
+}
+
+.bn-onboard-modal {
+  background: #152128;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  color: #ededed;
+}
+
+.bn-onboard-basic .bn-onboard-main {
+  background: #152128;
+}
+
+.bn-onboard-basic .bn-onboard-sidebar {
+  background: #2c3943;
+}
+
+.bn-active {
+  color: #ededed;
+}
+
+.bn-notification {
+  background: #152128;
+  box-shadow: -1px -1px 8px 0px rgba(237, 237, 237, 0.1);
+  border: 1px 0px solid rgba(237, 237, 237, 0.1);
+}
+
+.bn-status-icon {
+  transition: background-color 150ms ease-in-out;
+}
+
+.bn-notification:hover .bn-status-icon {
+  background-position: -48px 1px !important;
+  background-color: #152128;
+}
+
+.bn-notification.bn-failed .bn-status-icon:hover,
+.bn-notification.bn-progress .bn-status-icon:hover,
+.bn-notification.bn-complete .bn-status-icon:hover {
+  background-color: #ededed;
+  background-position: -48px 1px !important;
+}