version 0.9.4 (#336)

* Add transaction.to field after it is available (#333) * Configurable Wallet Onboarding (#331) * Add custom buttons for wallet onboarding * Formatting * Add validation for new config property * Update snapshot * Update docs * Make height fixed on icons * Add hover states to buttons * Add link to icons * add links to doc * Revert "Configurable Wallet Onboarding (#331)" (#334) This reverts commit a719996. * Enhancement/configurable wallet on-boarding (#335) * Add custom buttons for wallet onboarding * Formatting * Add validation for new config property * Update snapshot * Update docs * Make height fixed on icons * Add hover states to buttons * Add link to icons * add links to doc * add links to doc * update to version 0.9.4
blocknative · Jul 18, 2019 · e0e95b7 · e0e95b7
1 parent 0dd0991
commit e0e95b7
Show file tree

Hide file tree

Showing 8 changed files with 350 additions and 118 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.3.
+The current version is 0.9.4.
 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-3/assist.js"></script>
+<script src="https://assist.blocknative.com/0-9-4/assist.js"></script>
 
 <!-- OR... -->
 
-<script src="https://assist.blocknative.com/0-9-3/assist.min.js"></script>
+<script src="https://assist.blocknative.com/0-9-4/assist.min.js"></script>
 ```
 
 ### Initialize the Library
@@ -207,6 +207,10 @@ var config = {
   handleNotificationEvent: Function // Called on every tx notification event with a transaction event object
   timeouts: {
     txStall: Number // The number of milliseconds after a transaction has been sent before showing a stall notification if not confirmed in the blockchain
+  },
+  recommendedWallets: {
+    desktop: Array, // Array of Objects that define wallets this dapp supports on desktop to users that don't have a wallet
+    mobile: Array // Array of Objects that define wallets this dapp supports on mobile to users that don't have a wallet
   }
 }
 ```
@@ -471,6 +475,59 @@ By supplying an amount of wei to the `minimumBalance` option of the config, deve
 
 Assist will detect transactions which look to be repeated. We notify users of repeat transactions when we see sequential transactions with the same `to` address and the same `value`.
 
+### Recommended Wallets
+
+If you would like to define which wallets your dapp works with and recommends to users that don't currently have a wallet installed, you can define it in the config for desktop and mobile devices:
+
+```javascript
+{
+  recommendedWallets: {
+    desktop: [
+      {
+        name: 'MetaMask',
+        link: 'https://metamask.io/',
+        icon: 'https://metamask.io/img/metamask.png'
+      }
+      // other desktop wallets your dapp supports here
+    ],
+    mobile: [
+      {
+        name: 'Coinbase',
+        link: 'https://wallet.coinbase.com/',
+        icon: 'https://cdn-images-1.medium.com/max/1200/1*7ywNS48PnonfsvvMu1tTsA.png'
+      }
+      // other mobile wallets your dapp supports here
+    ]
+  }
+}
+```
+
+#### Assist currently only supports the following wallets:
+
+##### Desktop
+- MetaMask
+  - link: https://metamask.io/img/metamask.png
+  - icon: https://metamask.io/img/metamask.png
+- Opera
+  - link: https://www.opera.com/
+  - icon: https://images-na.ssl-images-amazon.com/images/I/71Y2mhDkBNL.png
+
+##### Mobile
+- Opera Touch
+  - link: https://www.opera.com/mobile/touch
+  - icon: https://apps.goodereader.com/wp-content/uploads/icons/1525044654.png
+- Coinbase
+  - link: https://wallet.coinbase.com/
+  - icon: https://cdn-images-1.medium.com/max/1200/1*7ywNS48PnonfsvvMu1tTsA.png
+- Trust
+  - link: https://trustwallet.com/
+  - icon: https://uploads-ssl.webflow.com/5a88babea6e0f90001b39b0d/5a8cf5a81df25e0001d5c78d_logo_solid_square_blue%20(2).png
+- Status
+  - link: https://dev.status.im/get/
+  - icon: https://cdn.investinblockchain.com/wp-content/uploads/2017/12/status-2-300x300.png?x88891
+
+NOTE: above links available at time of writing, but may change.
+
 ## API
 
 ### `init(config)`

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bnc-assist",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "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
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -380,6 +380,42 @@ img.bn-onboard-img {
   vertical-align: middle;
 }
 
+.custom-wallet-buttons {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+}
+
+.custom-wallet-buttons .wallet-buttons {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  margin: 0.5rem 0;
+}
+
+.custom-wallet-buttons .wallet-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  margin: 0.25rem 0.5rem 0.25rem 0;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  color: #333333;
+  transition: background 150ms ease-in-out, color 100ms ease-in-out;
+}
+
+.custom-wallet-buttons .wallet-button:hover {
+  background-color: #cccccc;
+  color: white;
+}
+
+.custom-wallet-buttons .wallet-button .image-container img {
+  width: 2rem;
+  height: 2rem;
+  margin-right: 1rem;
+}
+
 @media (max-width: 768px) {
   .bn-onboard-basic .bn-onboard-sidebar {
     width: 34%;

diff --git a/src/js/helpers/validation.js b/src/js/helpers/validation.js
@@ -61,6 +61,22 @@ export function validateConfig(config) {
       }),
       timeouts: ow.optional.object.exactShape({
         txStall: ow.number
+      }),
+      recommendedWallets: ow.optional.object.exactShape({
+        desktop: ow.optional.array.ofType(
+          ow.object.exactShape({
+            name: ow.string,
+            link: ow.string,
+            icon: ow.string
+          })
+        ).nonEmpty,
+        mobile: ow.optional.array.ofType(
+          ow.object.exactShape({
+            name: ow.string,
+            link: ow.string,
+            icon: ow.string
+          })
+        ).nonEmpty
       })
     })
   )

diff --git a/src/js/logic/send-transaction.js b/src/js/logic/send-transaction.js
@@ -161,6 +161,9 @@ export function sendTransaction({
       txPromise = sendMethod(txOptions)
     }
 
+    // to field doesn't get populated until after the transaction has been initiated
+    transactionEventObj.to = txOptions.to
+
     handleEvent({
       eventCode: 'txRequest',
       categoryCode,

diff --git a/src/js/logic/user.js b/src/js/logic/user.js
@@ -214,11 +214,7 @@ function getWeb3Wallet(categoryCode) {
             reject(errorObj)
           }, timeouts.changeUI),
         onClick: () => {
-          if (state.mobileDevice) {
-            window.location = `https://links.trustwalletapp.com/a/key_live_lfvIpVeI9TFWxPCqwU8rZnogFqhnzs4D?&event=openURL&url=${
-              window.location.href
-            }`
-          } else {
+          if (!state.mobileDevice) {
             window.location.reload()
           }
         }

diff --git a/src/js/views/dom.js b/src/js/views/dom.js
@@ -101,7 +101,10 @@ export function createElementString(type, className, innerHTML) {
 
 export function createElement(el, className, children, id) {
   const element = state.iframeDocument.createElement(el)
-  element.className = className || ''
+
+  if (className) {
+    element.className = className
+  }
 
   if (children && typeof children === 'string') {
     element.innerHTML = children
@@ -259,8 +262,52 @@ export function browserLogos() {
   `
 }
 
+function mobileButton(data) {
+  const link = createElement(
+    'A',
+    'bn-btn bn-btn-primary bn-btn-outline text-center flex-column'
+  )
+  link.style = 'margin: 0 10px;'
+  link.href = data.link
+  link.target = '_blank'
+  link.rel = 'noreferrer noopener'
+  link.style = 'margin: 0.25rem;'
+
+  const image = createElement('img')
+  image.src = data.icon
+  image.alt = data.name
+  image.style = 'width: 100%; height: auto;'
+
+  const imageContainer = createElement('span')
+  imageContainer.style = 'width: 79px; height: 79px;'
+  imageContainer.appendChild(image)
+
+  const br = createElement('br')
+  const span = createElement('span', null, data.name)
+
+  link.appendChild(imageContainer)
+  link.appendChild(br)
+  link.appendChild(span)
+
+  return link
+}
+
 function walletLogos() {
   const { trustLogo, coinbaseLogo, operaTouchLogo } = imageSrc
+  const { recommendedWallets } = state.config
+
+  const customButtons = recommendedWallets && recommendedWallets.mobile
+
+  if (customButtons) {
+    const container = createElement('div', 'flex-row btn-row')
+    container.style = 'flex-flow: row wrap;'
+
+    customButtons.forEach(item => {
+      container.appendChild(mobileButton(item))
+    })
+
+    return container.outerHTML
+  }
 
   return `
     <p class="flex-row btn-row">
@@ -398,7 +445,7 @@ export function onboardMain(type, step) {
       : onboardButton[step][type]
 
   const {
-    config: { style },
+    config: { style, recommendedWallets, images },
     currentProvider
   } = state
 
@@ -408,7 +455,6 @@ export function onboardMain(type, step) {
   const defaultImages = imageSrc[step + variant] || imageSrc[step]
 
   const isMetaMask = currentProvider === 'metamask'
-  const { images } = state.config
   const stepKey = stepToImageKey(step)
   const devImages = images && images[stepKey]
   const onboardImages = {
@@ -420,6 +466,8 @@ export function onboardMain(type, step) {
       ((isMetaMask || stepKey) && defaultImages && defaultImages.srcset)
   }
 
+  const customButtons = recommendedWallets && recommendedWallets.desktop
+
   return `
     ${
       onboardImages.src
@@ -434,6 +482,7 @@ export function onboardMain(type, step) {
     <h1 class="h4">${heading}</h1>
     <p>${description}</p>
     <br>
+    ${customButtons && step === 1 ? createCustomButtons(customButtons) : ''}
     <br>
     <p class="bn-onboard-button-section">
       <a href="#"
@@ -443,6 +492,53 @@ export function onboardMain(type, step) {
   `
 }
 
+function createCustomButtons(dataArr) {
+  const container = createElement('div', 'custom-wallet-buttons')
+  container.appendChild(
+    createElement(
+      'p',
+      '',
+      'The following wallets are compatible with this dapp:'
+    )
+  )
+
+  const buttonContainer = createElement('div', 'wallet-buttons')
+
+  dataArr.forEach(item => {
+    buttonContainer.appendChild(button(item))
+  })
+
+  container.appendChild(buttonContainer)
+
+  container.appendChild(
+    createElement(
+      'p',
+      '',
+      'Only have a single wallet active at a time, as having multiple active wallets may result in unexpected behavior.'
+    )
+  )
+
+  return container.outerHTML
+}
+
+function button(data) {
+  const link = createElement('a', 'wallet-button')
+  link.href = data.link
+  link.target = '_blank'
+  link.rel = 'noreferrer noopener'
+
+  const logo = createElement('img')
+  logo.src = data.icon
+  logo.alt = data.name
+
+  const imageContainer = createElement('div', 'image-container', logo)
+
+  link.appendChild(imageContainer)
+  link.appendChild(createElement('span', 'wallet-name', data.name))
+
+  return link
+}
+
 export function onboardModal(type, step) {
   return `
     <div id="bn-user-${type}" class="bn-onboard">
@@ -771,8 +867,11 @@ export function removeTouchHandlers(element, type) {
 
 export function handleTouchStart(element) {
   return e => {
-    e.stopPropagation()
-    e.preventDefault()
+    if (e.target.tagName !== 'A') {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
     const touch = e.changedTouches[0]
     element.attributes['data-startY'] = touch.screenY
     element.attributes['data-startX'] = touch.screenX
@@ -801,8 +900,11 @@ export function handleTouchMove(element) {
 
 export function handleTouchEnd(element, type) {
   return e => {
-    e.stopPropagation()
-    e.preventDefault()
+    if (e.target.tagName !== 'A') {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
     const touch = e.changedTouches[0]
     const startY = element.attributes['data-startY']
     const startX = element.attributes['data-startX']