version 0.8.1 (#207)

* resize iframe after hiding modal (#198) * update readme with mobile support info and web3 initialization example (#200) * update readme with mobile support info and web3 initialization example * add mobile section * update to version 0.8.1 * change pageY and pageX to screenY and screenX (#204) * add correct click handlers to close button touch start event (#206)
blocknative · May 24, 2019 · bec0928 · bec0928
1 parent 662c4be
commit bec0928
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 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.0.
+The current version is 0.8.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-8-0/assist.js"></script>
+<script src="https://assist.blocknative.com/0-8-1/assist.js"></script>
 
 <!-- OR... -->
 
-<script src="https://assist.blocknative.com/0-8-0/assist.min.js"></script>
+<script src="https://assist.blocknative.com/0-8-1/assist.min.js"></script>
 ```
 
 ### Initialize the Library
@@ -64,7 +64,7 @@ is as follows:
 var bncAssistConfig = {
   dappId: apiKey,       // [String] The API key created on https://account.blocknative.com
 
-  networkId: networkId  // [Integer] The network ID of the Ethereum network your dapp is deployd on.
+  networkId: networkId  // [Integer] The network ID of the Ethereum network your dapp is deployed on.
                         //           See below for instructions on how to setup for local blockchains.
 };
 
@@ -84,7 +84,7 @@ assistInstance.onboard()
   .then(function(state) {
     // User has been successfully onboarded and is ready to transact
     // Will resolve with the current state of the user
-    // This means we can be sure of the follwing user properties:
+    // This means we can be sure of the following user properties:
     //  - They are using a compatible browser
     //  - They have a web3-enabled wallet installed
     //  - The wallet is connected to the config-specified networkId
@@ -132,7 +132,7 @@ var myContract = assistInstance.Contract(new web3.eth.Contract(abi, address))
 
 ### `promiEvent`
 
-If using web3 versions 1.0 and you would like to listen for the events triggered on the `promiEvent` that is normally returned from a transaction call, Assist returns the `promiEvent`, but it is wrapped in an object to prevent it from resolving internally in Assist.
+If using web3 versions 1.0 and you would like to listen for the events triggered on the `promiEvent` that is normally returned from a transaction call, Assist returns the `promiEvent`, but it is wrapped in an object to prevent it from resolving internally in Assist. To get access to the `promiEvent` object you can call your methods like this:
 
 ```javascript
 const { promiEvent } = await decoratedContract.myMethod(param).send(txOptions)
@@ -142,6 +142,26 @@ promiEvent.on('receipt', () => {
 })
 ```
 
+### Initializing `web3` and including it in the `config`
+
+`web3` isn't a required parameter as you might not have access to a web3 provider to instantiate web3 with until after the user has been onboarded and has a wallet installed. We recommend instantiating `web3` at the top level of your dapp once the window object is available like this:
+
+```javascript
+let web3Instance
+
+if (window.ethereum) {
+  web3Instance = new Web3(window.ethereum)
+}
+
+if (window.web3) {
+  web3Instance = new Web3(window.web3.currentProvider)
+}
+```
+
+Pass this instance in to the config (even if it is undefined). If the user didn't have a wallet when first arriving to your dapp, they will go through onboarding which will refresh the page once they have a wallet. On the refresh, the above web3 instantiation code will now get initialized with the provider.
+
+If you _don't_ include your instantiated web3 instance in the config, Assist will grab `web3` from the window object if it is available. However this can cause issues as `web3` isn't always added to the window object (ie on some mobile wallets) and the version of `web3` that is usually attached to the window object is `0.20`. So if you happen to be using `1.0` but didn't pass it in, then you're contracts won't be decorated correctly.
+
 ## API Reference
 
 ### Config
@@ -315,7 +335,14 @@ By default, Assist will create UI elements in your application at certain times
 
 ### Mobile Dapps
 
-Assist doesn't currently support mobile dapp browsers. If your dapp also _doesn't_ support mobile browsers, setting `mobileBlocked: true` in the config will detect mobile user agents and show UI that will direct them to use a desktop browser instead. If your dapp _does_ support mobile devices then Assist will be disabled and your transactions and contracts will work as normal. However if you call the `onboard` function when a user is on a mobile device, Assist will show a mobile not supported UI as onboarding isn't supported on mobile. So it is advised to check if a user is on a mobile device before calling `onboard`. Calling `getState` and referring to the `mobileDevice` property is an easy way of doing that.
+If your dapp _doesn't_ support mobile browsers, setting `mobileBlocked: true` in the config will detect mobile user agents and show UI that will direct them to use a desktop browser instead.
+
+Assist supports mobile onboarding and transaction support. The onboarding UI has a modal for making sure that the user:
+
+- Is on a mobile dapp browser/wallet
+- Is on the correct network
+- Has enabled connection to their wallet (if the wallet is using a modern ethereum provider)
+- Has the minimum balance (if set in the config)
 
 ### Minimum Balance
 

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

diff --git a/src/js/views/dom.js b/src/js/views/dom.js
@@ -135,6 +135,7 @@ export function closeModal() {
     })
   } else {
     hideIframe()
+    resizeIframe({ height: 0, width: 0 })
   }
 
   setTimeout(() => {
@@ -157,7 +158,8 @@ export function openModal(modal, handlers = {}) {
 
   if (state.mobileDevice) {
     closeButton.ontouchstart = () => {
-      onClick && onClick()
+      onClose && onClose()
+      closeModal()
     }
   }
 
@@ -703,8 +705,8 @@ export function handleTouchStart(element) {
     e.stopPropagation()
     e.preventDefault()
     const touch = e.changedTouches[0]
-    element.attributes['data-startY'] = touch.pageY
-    element.attributes['data-startX'] = touch.pageX
+    element.attributes['data-startY'] = touch.screenY
+    element.attributes['data-startX'] = touch.screenX
     element.attributes['data-startTime'] = Date.now()
     element.attributes['data-translateY'] = 0
   }
@@ -717,7 +719,7 @@ export function handleTouchMove(element) {
     const touch = e.changedTouches[0]
     const startY = element.attributes['data-startY']
     const translateY = element.attributes['data-translateY']
-    const distanceY = touch.pageY - startY
+    const distanceY = touch.screenY - startY
 
     const newTranslateY = distanceY + translateY
 
@@ -736,8 +738,8 @@ export function handleTouchEnd(element, type) {
     const startY = element.attributes['data-startY']
     const startX = element.attributes['data-startX']
     const startTime = element.attributes['data-startTime']
-    const distanceY = touch.pageY - startY
-    const distanceX = touch.pageX - startX
+    const distanceY = touch.screenY - startY
+    const distanceX = touch.screenX - startX
     const elapsedTime = Date.now() - startTime
     const validDistance =
       distanceY <= -40 || distanceY >= 40 || distanceX <= -40 || distanceX >= 40