diff --git a/README.md b/README.md index bc3eb6b9..25bf6759 100644 --- 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 `` ```html - + - + ``` ### 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 index d85b1c66..b83d0a40 100644 --- 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 index b57a2d6a..a7d8f1c2 100644 --- a/src/__integration-tests__/ui-rendering/__snapshots__/index.test.js.snap +++ b/src/__integration-tests__/ui-rendering/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[`dom-rendering event activeContract-txAwaitingApproval should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txAwaitingApproval should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txConfirmReminder should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txConfirmReminder should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txConfirmed should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txConfirmed should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txConfirmedClient should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txConfirmedClient should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txFailed should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txFailed should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txPending should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txPending should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txRequest should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txRequest should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txSendFail should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txSendFail should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeContract-txSent should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txSent should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txSpeedUp should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txSpeedUp should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txStall should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeContract-txStall should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activePreflight-mobileBlocked should trigger correct DOM render 1`] = ` @@ -528,6 +528,7 @@ exports[`dom-rendering event activePreflight-networkFail should trigger correct

Wrong Network

We’ve detected that you need to be on the local network for this application but you have your wallet set to local. Please switch to the correct network.


+

CHECK MY NETWORK @@ -564,6 +565,7 @@ exports[`dom-rendering event activePreflight-networkFail should trigger correct

Wrong Network

We’ve detected that you need to be on the rinkeby network for this application but you have your wallet set to kovan. Please switch to the correct network.


+

CHECK MY NETWORK @@ -634,6 +636,7 @@ exports[`dom-rendering event activePreflight-newOnboardComplete should trigger c

Ready to Go

You have successfully completed all the steps necessary to use this application. Welcome to the world of blockchain.


+

BACK TO THE APP @@ -698,6 +701,7 @@ exports[`dom-rendering event activePreflight-newOnboardComplete should trigger c

Ready to Go

You have successfully completed all the steps necessary to use this application. Welcome to the world of blockchain.


+

BACK TO THE APP @@ -715,7 +719,7 @@ exports[`dom-rendering event activePreflight-newOnboardComplete should trigger c exports[`dom-rendering event activePreflight-nsfFail should trigger correct DOM render [Custom state 0] 1`] = ` " -

" + " `; exports[`dom-rendering event activePreflight-nsfFail should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activePreflight-txRepeat should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activePreflight-txRepeat should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activePreflight-walletEnable should trigger correct DOM render 1`] = ` @@ -808,6 +812,7 @@ exports[`dom-rendering event activePreflight-walletEnable should trigger correct

Connect to Your Wallet

Connect your wallet to interact with this Dapp


+

CHECK THAT I’M CONNECTED @@ -878,6 +883,7 @@ exports[`dom-rendering event activePreflight-walletFail should trigger correct D

Install a Wallet

A wallet is used to manage everything you need to interact with a blockchain application like this one. Wallets are either built into your browser or an extension added to your browser. They are hyper secure, and can be used for any other blockchain application you may want to use.


+

CHECK THAT I HAVE A WALLET @@ -908,6 +914,7 @@ exports[`dom-rendering event activePreflight-walletLogin should trigger correct

Login to Your Wallet

We’ve detected you are not logged in to your wallet. Please log in to continue using the blockchain enabled features of this application.


+

CHECK THAT I’M LOGGED IN @@ -944,6 +951,7 @@ exports[`dom-rendering event activePreflight-walletLoginEnable should trigger co

Login to Your Wallet

We’ve detected you are not logged in to your wallet. Please log in to continue using the blockchain enabled features of this application.


+

CHECK THAT I’M LOGGED IN @@ -1014,6 +1022,7 @@ exports[`dom-rendering event activePreflight-welcomeUser should trigger correct

Let’s Get You Started

To use this feature you’ll need to be set up and ready to use the blockchain. This onboarding guide will walk you through each step of the process. It won’t take long and at any time you can come back and pick up where you left off.


+

I’M READY @@ -1078,6 +1087,7 @@ exports[`dom-rendering event activePreflight-welcomeUser should trigger correct

Let’s Get You Started

To use this feature you’ll need to be set up and ready to use the blockchain. This onboarding guide will walk you through each step of the process. It won’t take long and at any time you can come back and pick up where you left off.


+

I’M READY @@ -1095,7 +1105,7 @@ exports[`dom-rendering event activePreflight-welcomeUser should trigger correct exports[`dom-rendering event activeTransaction-txAwaitingApproval should trigger correct DOM render [Custom state 0] 1`] = ` " -

" + " `; exports[`dom-rendering event activeTransaction-txAwaitingApproval should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txConfirmReminder should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txConfirmReminder should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txConfirmed should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txConfirmed should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txConfirmedClient should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txConfirmedClient should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txFailed should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txFailed should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txPending should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txPending should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txRequest should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txRequest should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txSendFail should trigger correct DOM render [Custom state 0] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txSendFail should trigger correct DOM render [Custom state 1] 1`] = ` " -
" + " `; exports[`dom-rendering event activeTransaction-txSent should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txSent should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txSpeedUp should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txSpeedUp should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txStall should trigger correct DOM render [Custom state 0] 1`] = ` " -
" `; exports[`dom-rendering event activeTransaction-txStall should trigger correct DOM render [Custom state 1] 1`] = ` " -
" `; exports[`dom-rendering event initialize-mobileBlocked should trigger correct DOM render 1`] = ` @@ -1677,6 +1687,7 @@ exports[`dom-rendering event onboard-networkFail should trigger correct DOM rend

Wrong Network

We’ve detected that you need to be on the local network for this application but you have your wallet set to local. Please switch to the correct network.


+

CHECK MY NETWORK @@ -1713,6 +1724,7 @@ exports[`dom-rendering event onboard-networkFail should trigger correct DOM rend

Wrong Network

We’ve detected that you need to be on the rinkeby network for this application but you have your wallet set to kovan. Please switch to the correct network.


+

CHECK MY NETWORK @@ -1783,6 +1795,7 @@ exports[`dom-rendering event onboard-newOnboardComplete should trigger correct D

Ready to Go

You have successfully completed all the steps necessary to use this application. Welcome to the world of blockchain.


+

BACK TO THE APP @@ -1847,6 +1860,7 @@ exports[`dom-rendering event onboard-newOnboardComplete should trigger correct D

Ready to Go

You have successfully completed all the steps necessary to use this application. Welcome to the world of blockchain.


+

BACK TO THE APP @@ -1877,6 +1891,7 @@ exports[`dom-rendering event onboard-nsfFail should trigger correct DOM render [

Get Some ETH

Blockchain applications sometimes require Ether to perform various functions. You’ll need at least NaN Ether (ETH) for this application.


+

I HAVE ENOUGH ETH @@ -1913,6 +1928,7 @@ exports[`dom-rendering event onboard-nsfFail should trigger correct DOM render [

Get Some ETH

Blockchain applications sometimes require Ether to perform various functions. You’ll need at least 12.3 Ether (ETH) for this application.


+

I HAVE ENOUGH ETH @@ -1949,6 +1965,7 @@ exports[`dom-rendering event onboard-walletEnable should trigger correct DOM ren

Connect to Your Wallet

Connect your wallet to interact with this Dapp


+

CHECK THAT I’M CONNECTED @@ -2019,6 +2036,7 @@ exports[`dom-rendering event onboard-walletFail should trigger correct DOM rende

Install a Wallet

A wallet is used to manage everything you need to interact with a blockchain application like this one. Wallets are either built into your browser or an extension added to your browser. They are hyper secure, and can be used for any other blockchain application you may want to use.


+

CHECK THAT I HAVE A WALLET @@ -2049,6 +2067,7 @@ exports[`dom-rendering event onboard-walletLogin should trigger correct DOM rend

Login to Your Wallet

We’ve detected you are not logged in to your wallet. Please log in to continue using the blockchain enabled features of this application.


+

CHECK THAT I’M LOGGED IN @@ -2085,6 +2104,7 @@ exports[`dom-rendering event onboard-walletLoginEnable should trigger correct DO

Login to Your Wallet

We’ve detected you are not logged in to your wallet. Please log in to continue using the blockchain enabled features of this application.


+

CHECK THAT I’M LOGGED IN @@ -2155,6 +2175,7 @@ exports[`dom-rendering event onboard-welcomeUser should trigger correct DOM rend

Let’s Get You Started

To use this feature you’ll need to be set up and ready to use the blockchain. This onboarding guide will walk you through each step of the process. It won’t take long and at any time you can come back and pick up where you left off.


+

I’M READY @@ -2219,6 +2240,7 @@ exports[`dom-rendering event onboard-welcomeUser should trigger correct DOM rend

Let’s Get You Started

To use this feature you’ll need to be set up and ready to use the blockchain. This onboarding guide will walk you through each step of the process. It won’t take long and at any time you can come back and pick up where you left off.


+

I’M READY @@ -2236,7 +2258,7 @@ exports[`dom-rendering event onboard-welcomeUser should trigger correct DOM rend exports[`dom-rendering event userInitiatedNotify-error should trigger correct DOM render 1`] = ` " -

" + " `; exports[`dom-rendering event userInitiatedNotify-pending should trigger correct DOM render 1`] = ` " -
" `; exports[`dom-rendering event userInitiatedNotify-success should trigger correct DOM render 1`] = ` " -
" + " `; diff --git a/src/css/styles.css b/src/css/styles.css index 31fc9daf..b04f876f 100644 --- 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 index 4d978ce2..9160955c 100644 --- 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 index e0ec3d19..260c07b1 100644 --- 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 index 998390c5..63f5cb39 100644 --- 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 index 0baab627..9f1dd0bd 100644 --- 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 `

@@ -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) {

${heading}

${description}


+ ${customButtons && step === 1 ? createCustomButtons(customButtons) : ''}

{ + 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 `

@@ -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']