version 0.8.0 (#195)

* Enhancement/mobile ui (#193) * started implementing mobile notifications, needs more testing * removed mobile warnings * remove unnecessary async keywords * adjust styles to flexbox suit mobile * adjust border to bottom if notifications are to be on top, add touch listener to close notification * make adjustments for mobile notifications * edit paragrapgh width * remove alert * changed conditional styles from inline to using classnames * adjust styles * add check for mobile device in headless mode * add check to not log mobile events to server for the moment * add mobile events to eventCodeToStep function * styled adjustments * remove todo comment * add mobile device checks and eventcodes * add content for mbile specific events * add classes to objects to add style changes, add touchhandler functions * add touch handlers to elements if mobile device * add check for txConfirmedClient as it is already dealt with * content adjustments * add body position fixed so no scroll on IOS when swiping * update snapshots to reflect changes * update snapshots * fixed string concatenation bug * add mobile specific events to server logging * add new assets for mobileWalletFail event * fix bug with notifications and document body being fixed, also fixed bug when notifications are manually dismissed * add timeout to changing of fixed body position * add trust and coinbase images and deep links * updated readme * add husky back in to package.json * use prevent default to prevent page scroll on swipe instead of position fixed * add check to make sure _metamask prop is available, which is needed for mobile wallets that implement connect/enable functionality * update snapshot * add mobileWalletEnable eventCode * add ontouchstart handlers and allow for modals with no images * fix errors from merge * add media-queries back in * move assist styles to iframe.js * fix errors with exponents on non-firefox browsers * Change mobile content so it fits on screen * remove ethers documentation as it is not included in this branch * update to version 0.8.0
blocknative · May 22, 2019 · 662c4be · 662c4be
1 parent 31b44f5
commit 662c4be
Show file tree

Hide file tree

Showing 25 changed files with 641 additions and 277 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.7.5.
+The current version is 0.8.0.
 There are minified and non-minified versions.
 Put this script at the top of your `<head>`
 
 ```html
-<script src="https://assist.blocknative.com/0-7-5/assist.js"></script>
+<script src="https://assist.blocknative.com/0-8-0/assist.js"></script>
 
 <!-- OR... -->
 
-<script src="https://assist.blocknative.com/0-7-5/assist.min.js"></script>
+<script src="https://assist.blocknative.com/0-8-0/assist.min.js"></script>
 ```
 
 ### Initialize the Library

diff --git a/lib/images/coinbase.png b/lib/images/coinbase.png
diff --git a/lib/images/[email protected] b/lib/images/[email protected]
diff --git a/lib/images/mobile-wallet-required-white.png b/lib/images/mobile-wallet-required-white.png
diff --git a/lib/images/[email protected] b/lib/images/[email protected]
diff --git a/lib/images/mobile-wallet-required.png b/lib/images/mobile-wallet-required.png
diff --git a/lib/images/[email protected] b/lib/images/[email protected]
diff --git a/lib/images/trust-original.png b/lib/images/trust-original.png
diff --git a/lib/images/trust-wallet.png b/lib/images/trust-wallet.png
diff --git a/lib/images/trust.png b/lib/images/trust.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.7.5",
+  "version": "0.8.0",
   "description": "Blocknative Assist js library for Dapp developers",
   "main": "lib/assist.min.js",
   "scripts": {
@@ -19,10 +19,7 @@
     "type": "git",
     "url": "git+https://github.com/blocknative/assist.git"
   },
-  "keywords": [
-    "dapp",
-    "ethereum"
-  ],
+  "keywords": ["dapp", "ethereum"],
   "author": "Block Native",
   "license": "MIT",
   "bugs": {
@@ -79,7 +76,5 @@
     "truffle-contract": "^4.0.15",
     "web3": "^1.0.0-beta.37"
   },
-  "eslintIgnore": [
-    "package.json"
-  ]
-}
+  "eslintIgnore": ["package.json"]
+}
diff --git a/src/__integration-tests__/ui-rendering/__snapshots__/index.test.js.snap b/src/__integration-tests__/ui-rendering/__snapshots__/index.test.js.snap
diff --git a/src/__tests__/js/contract/index.test.js b/src/__tests__/js/contract/index.test.js
@@ -108,18 +108,6 @@ multidepRequire.forEachVersion('web3', (version, Web3) => {
               }).toThrowError('This network is not supported')
             })
           })
-          describe('when user is on mobile and mobile is not blocked', () => {
-            beforeEach(() => {
-              updateState({
-                mobileDevice: true,
-                config: { mobileBlocked: false }
-              })
-            })
-            test('it should return the contract unmodified', () => {
-              const decoratedContract = assistInstance.Contract(contract)
-              expect(decoratedContract).toEqual(contract)
-            })
-          })
           describe('when state.web3Instance is falsy', () => {
             beforeEach(() => {
               updateState({ web3Instance: undefined })

diff --git a/src/css/media-queries.css b/src/css/media-queries.css
@@ -0,0 +1,15 @@
+@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
+  #blocknative-notifications {
+    padding: 0;
+  }
+  li.bn-notification {
+    border-width: 0px 2px 0px 0px;
+    position: relative;
+  }
+
+  a#bn-transaction-branding {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+  }
+}
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -95,6 +95,7 @@ video {
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
+  box-sizing: border-box;
 }
 /* HTML5 display-role reset for older browsers */
 article,
@@ -213,7 +214,7 @@ b {
 
 body {
   font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Arial,
-  sans-serif;
+    sans-serif;
 }
 
 .clearfix::after {
@@ -236,6 +237,7 @@ body {
   justify-content: center;
   align-items: center;
   opacity: 0;
+  padding: 1rem;
   transition: opacity 150ms ease-in-out;
 }
 
@@ -328,6 +330,7 @@ img.bn-onboard-img {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
+  margin: 0 auto;
 }
 
 .bn-onboard-close {
@@ -406,6 +409,9 @@ img.bn-onboard-img {
 /* Notifications */
 
 #blocknative-notifications {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
   position: fixed;
   opacity: 0;
   padding: 10px;
@@ -416,22 +422,35 @@ img.bn-onboard-img {
   display: none;
 }
 
+.bn-notifications {
+  display: flex;
+  flex-flow: column nowrap;
+  list-style-type: none;
+  width: 100%;
+}
+
+.bn-notifications-scroll {
+  display: flex;
+  width: 100%;
+}
+
 .bn-notification {
+  display: flex;
+  width: 100%;
+  flex-flow: row nowrap;
   background: #fff;
-  border-left: 2px solid transparent;
   border-radius: 2px;
   padding: 13px 10px;
   text-align: left;
   margin-bottom: 5px;
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
-  width: 320px; /* something to consider (changed from max-width) */
-  margin-left: 10px; /* keeps notification from bumping edge on mobile.*/
   opacity: 0;
   transition: transform 350ms ease-in-out, opacity 300ms linear;
 }
 
-ul.bn-notifications {
-  list-style-type: none;
+.bn-notification-info {
+  margin-left: 10px;
+  max-width: 85%;
 }
 
 .bn-notification.bn-progress {
@@ -452,14 +471,23 @@ ul.bn-notifications {
 
 li.bn-notification.bn-right-border {
   border-width: 0px 2px 0px 0px;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+li.bn-notification.bn-top-border {
+  border-width: 2px 0px 0px 0px;
+}
+
+li.bn-notification.bn-bottom-border {
+  border-width: 0px 0px 2px 0px;
 }
 
 li.bn-notification.bn-right-border .bn-notification-info {
   margin: 0px 10px 0px 5px;
 }
 
 .bn-status-icon {
-  float: left;
   width: 18px;
   height: 18px;
   background-image: url('https://assist.blocknative.com/images/jJu8b0B.png');
@@ -506,9 +534,6 @@ li.bn-notification.bn-right-border .bn-notification-info {
   vertical-align: sub;
 }
 
-.bn-notification-info {
-  margin-left: 30px;
-}
 .bn-notification-meta {
   color: #aeaeae;
   font-size: 0.79em;
@@ -519,7 +544,6 @@ li.bn-notification.bn-right-border .bn-notification-info {
 }
 
 a#bn-transaction-branding {
-  margin: 0 10px;
   padding-top: 10px;
   display: inline-block;
   width: 18px;
@@ -531,12 +555,26 @@ a#bn-transaction-branding {
   -moz-transition: width 0.2s ease-out;
   -o-transition: width 0.2s ease-out;
   transition: width 0.2s ease-out;
+  align-self: flex-end;
+  margin: 0 10px;
 }
 
 a#bn-transaction-branding:hover {
   width: 75px;
 }
 
+a#bn-transaction-branding.align-start {
+  align-self: flex-start;
+}
+
+a#bn-transaction-branding.margin-top {
+  margin: 10px 10px;
+}
+
+a#bn-transaction-branding.mobile-margin {
+  margin: 5px 5px;
+}
+
 /* Retina Settings */
 /* http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/*/
 @media only screen and (-webkit-min-device-pixel-ratio: 2),
@@ -1139,3 +1177,18 @@ input[type='button'].bn-btn-block {
 .bn-btn-danger.bn-btn-outline:hover {
   color: #fff;
 }
+
+/* GENERAL */
+
+.flex-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/js/helpers/iframe.js b/src/js/helpers/iframe.js
@@ -1,5 +1,7 @@
 import { positionElement, updateNotificationsPosition } from '~/js/views/dom'
 import darkModeStyles from '~/css/dark-mode.css'
+import assistStyles from '~/css/styles.css'
+import mediaQueries from '~/css/media-queries.css'
 
 import { updateState, state } from './state'
 
@@ -52,13 +54,16 @@ export function updateStyle({ darkMode, css, notificationsPosition }) {
   }
 }
 
-export function createIframe(browserDocument, assistStyles, style = {}) {
+export function createIframe(browserDocument, style = {}) {
   const initialIframeContent = `
     <html>
       <head>
         <style>
           ${assistStyles}
         </style>
+        <style>
+          ${mediaQueries}
+        </style>
         <style id="dark-mode-style"></style>
         <style id="custom-css-style"></style>
       </head>
@@ -94,7 +99,7 @@ export function hideIframe() {
   state.iframe.style.pointerEvents = 'none'
 }
 
-export function resizeIframe({ height, width, transitionHeight }) {
+export async function resizeIframe({ height, width, transitionHeight }) {
   if (transitionHeight) {
     state.iframe.style.transition = 'height 200ms ease-in-out'
   } else {

diff --git a/src/js/helpers/utilities.js b/src/js/helpers/utilities.js
@@ -23,12 +23,21 @@ export function capitalize(str) {
 }
 
 export function formatNumber(num) {
+  // if already bignumber instance return it
+  if (typeof num === 'object') return num
   const numString = String(num)
   if (numString.includes('+')) {
-    const exponent = numString.split('+')[1]
-    const precision = Number(exponent) + 1
+    let exponent = Number(numString.split('+')[1])
+    // non firefox limits precision to 21
+    if (exponent >= 21) {
+      exponent = 20
+      num = 1e20
+    }
+    const precision = exponent + 1
+
     return num.toPrecision(precision)
   }
+
   return num
 }
 
@@ -132,6 +141,12 @@ export function eventCodeToStep(eventCode) {
       return 'mobile'
     case 'browserFail':
       return 'browser'
+    case 'mobileWalletFail':
+      return 'mobileWallet'
+    case 'mobileNetworkFail':
+      return 'mobileNetwork'
+    case 'mobileWalletEnable':
+      return 'mobileWalletEnable'
     case 'welcomeUser':
       return 0
     case 'walletFail':
@@ -182,7 +197,9 @@ export const timeouts = {
   hideElement: 200,
   showElement: 120,
   autoRemoveNotification: 4000,
-  pollForReceipt: 1000
+  pollForReceipt: 1000,
+  swipeTime: 250,
+  lockScreen: 500
 }
 
 export function stepToImageKey(step) {

diff --git a/src/js/helpers/web3.js b/src/js/helpers/web3.js
@@ -218,7 +218,11 @@ export function getTransactionParams(
   })
 }
 
-export function hasSufficientBalance({ value = 0, gas = 0, gasPrice = 0 }) {
+export async function hasSufficientBalance({
+  value = 0,
+  gas = 0,
+  gasPrice = 0
+}) {
   return new Promise(async resolve => {
     const version = state.web3Version && state.web3Version.slice(0, 3)
 
@@ -263,11 +267,9 @@ export function getAccounts() {
 }
 
 export function checkUnlocked() {
-  return (
-    window.ethereum &&
-    window.ethereum._metamask &&
-    window.ethereum._metamask.isUnlocked()
-  )
+  return window.ethereum._metamask && window.ethereum._metamask.isUnlocked
+    ? window.ethereum._metamask.isUnlocked()
+    : Promise.resolve(true)
 }
 
 export function requestLoginEnable() {

diff --git a/src/js/helpers/websockets.js b/src/js/helpers/websockets.js
@@ -119,8 +119,10 @@ export function handleSocketMessage(msg) {
         })
         break
       case 'confirmed':
-        // handle race condition: https://github.com/blocknative/assist/issues/174
-        if (eventCode === 'txConfirmedClient') return
+        // have already dealt with txConfirmedClient event
+        if (eventCode === 'txConfirmedClient') {
+          return
+        }
 
         txObj = getTxObjFromQueue(transaction.id)