Merge pull request #4954 from MetaMask/v4.9.0

V4.9.0

13 files changed, 86 insertions, 106 deletions

diff --git a/mascara/example/app.js b/mascara/example/app.js
index 598e2c84c..7b6421fdc 100644
--- a/mascara/example/app.js
+++ b/mascara/example/app.js
@@ -3,7 +3,7 @@ const EthQuery = require('ethjs-query')
 window.addEventListener('load', loadProvider)
 window.addEventListener('message', console.warn)
 
-async function loadProvider() {
+async function loadProvider () {
   const ethereumProvider = window.metamask.createDefaultProvider({ host: 'http://localhost:9001' })
   const ethQuery = new EthQuery(ethereumProvider)
   const accounts = await ethQuery.accounts()
@@ -13,7 +13,7 @@ async function loadProvider() {
 }
 
 
-function logToDom(message, context){
+function logToDom (message, context) {
   document.getElementById(context).innerText = message
   console.log(message)
 }
@@ -35,4 +35,4 @@ function setupButtons (ethQuery) {
     })
     logToDom(txHash, 'cb-value')
   })
-}
\ No newline at end of file
+}
diff --git a/mascara/example/server.js b/mascara/example/server.js
index d39c19600..bdb1efa16 100644
--- a/mascara/example/server.js
+++ b/mascara/example/server.js
@@ -1,8 +1,8 @@
 const express = require('express')
+const path = require('path')
 const createMetamascaraServer = require('../server/')
 const createBundle = require('../server/util').createBundle
 const serveBundle = require('../server/util').serveBundle
-
 //
 // Iframe Server
 //
@@ -23,7 +23,7 @@ const dappServer = express()
 
 // serve dapp bundle
 serveBundle(dappServer, '/app.js', createBundle(require.resolve('./app.js')))
-dappServer.use(express.static(__dirname + '/app/'))
+dappServer.use(express.static(path.join(__dirname, '/app/')))
 
 // start the server
 const dappPort = '9002'
diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
index b81a9fb9b..d86e10d48 100644
--- a/mascara/src/app/first-time/breadcrumbs.js
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -8,7 +8,7 @@ export default class Breadcrumbs extends Component {
     currentIndex: PropTypes.number,
   };
 
-  render() {
+  render () {
     const {total, currentIndex} = this.props
     return (
       <div className="breadcrumbs">
@@ -20,7 +20,7 @@ export default class Breadcrumbs extends Component {
           />
         ))}
       </div>
-    );
+    )
   }
 
 }
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index c5a560638..e270392e1 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -54,7 +54,7 @@ class BuyEtherScreen extends Component {
 
     return (
       <div
-        className='buy-ether__do-it-later'
+        className="buy-ether__do-it-later"
         onClick={() => showAccountDetail(address)}
       >
         Do it later
@@ -64,17 +64,17 @@ class BuyEtherScreen extends Component {
 
   renderCoinbaseLogo () {
     return (
-      <svg width='140px' height='49px' viewBox='0 0 579 126' version='1.1'>
-        <g id='Page-1' stroke='none' strokeWidth={1} fill='none' fillRule='evenodd'>
-          <g id='Imported-Layers' fill='#0081C9'>
-            <path d='M37.752,125.873 C18.824,125.873 0.369,112.307 0.369,81.549 C0.369,50.79 18.824,37.382 37.752,37.382 C47.059,37.382 54.315,39.749 59.52,43.219 L53.841,55.68 C50.371,53.156 45.166,51.579 39.961,51.579 C28.604,51.579 18.193,60.57 18.193,81.391 C18.193,102.212 28.919,111.361 39.961,111.361 C45.166,111.361 50.371,109.783 53.841,107.26 L59.52,120.036 C54.157,123.664 47.059,125.873 37.752,125.873' id='Fill-1' />
-            <path d='M102.898,125.873 C78.765,125.873 65.515,106.786 65.515,81.549 C65.515,56.311 78.765,37.382 102.898,37.382 C127.032,37.382 140.282,56.311 140.282,81.549 C140.282,106.786 127.032,125.873 102.898,125.873 L102.898,125.873 Z M102.898,51.105 C89.491,51.105 82.866,63.093 82.866,81.391 C82.866,99.688 89.491,111.834 102.898,111.834 C116.306,111.834 122.931,99.688 122.931,81.391 C122.931,63.093 116.306,51.105 102.898,51.105 L102.898,51.105 Z' id='Fill-2' />
-            <path d='M163.468,23.659 C157.79,23.659 153.215,19.243 153.215,13.88 C153.215,8.517 157.79,4.1 163.468,4.1 C169.146,4.1 173.721,8.517 173.721,13.88 C173.721,19.243 169.146,23.659 163.468,23.659 L163.468,23.659 Z M154.793,39.118 L172.144,39.118 L172.144,124.138 L154.793,124.138 L154.793,39.118 Z' id='Fill-3' />
-            <path d='M240.443,124.137 L240.443,67.352 C240.443,57.415 234.449,51.263 222.619,51.263 C216.31,51.263 210.473,52.367 207.003,53.787 L207.003,124.137 L189.81,124.137 L189.81,43.376 C198.328,39.906 209.212,37.382 222.461,37.382 C246.28,37.382 257.794,47.793 257.794,65.775 L257.794,124.137 L240.443,124.137' id='Fill-4' />
-            <path d='M303.536,125.873 C292.494,125.873 281.611,123.191 274.986,119.879 L274.986,0.314 L292.179,0.314 L292.179,41.326 C296.28,39.433 302.905,37.856 308.741,37.856 C330.667,37.856 345.494,53.629 345.494,79.656 C345.494,111.676 328.931,125.873 303.536,125.873 L303.536,125.873 Z M305.744,51.263 C301.012,51.263 295.491,52.367 292.179,54.103 L292.179,109.941 C294.703,111.045 299.593,112.149 304.482,112.149 C318.205,112.149 328.301,102.685 328.301,80.918 C328.301,62.305 319.467,51.263 305.744,51.263 L305.744,51.263 Z' id='Fill-5' />
-            <path d='M392.341,125.873 C367.892,125.873 355.589,115.935 355.589,99.215 C355.589,75.555 380.826,71.296 406.537,69.876 L406.537,64.513 C406.537,53.787 399.439,50.001 388.555,50.001 C380.511,50.001 370.731,52.525 365.053,55.207 L360.636,43.376 C367.419,40.379 378.933,37.382 390.29,37.382 C410.638,37.382 422.942,45.269 422.942,66.248 L422.942,119.879 C416.79,123.191 404.329,125.873 392.341,125.873 L392.341,125.873 Z M406.537,81.391 C389.186,82.337 371.835,83.757 371.835,98.9 C371.835,107.89 378.776,113.411 391.868,113.411 C397.389,113.411 403.856,112.465 406.537,111.203 L406.537,81.391 L406.537,81.391 Z' id='Fill-6' />
-            <path d='M461.743,125.873 C451.806,125.873 441.395,123.191 435.244,119.879 L441.08,106.629 C445.496,109.31 454.803,112.149 461.27,112.149 C470.576,112.149 476.728,107.575 476.728,100.477 C476.728,92.748 470.261,89.751 461.586,86.596 C450.228,82.337 437.452,77.132 437.452,61.201 C437.452,47.162 448.336,37.382 467.264,37.382 C477.517,37.382 486.035,39.906 492.029,43.376 L486.665,55.364 C482.88,52.998 475.309,50.317 469.157,50.317 C460.166,50.317 455.118,55.049 455.118,61.201 C455.118,68.93 461.428,71.611 469.788,74.766 C481.618,79.183 494.71,84.072 494.71,100.635 C494.71,115.935 483.038,125.873 461.743,125.873' id='Fill-7' />
-            <path d='M578.625,81.233 L522.155,89.12 C523.89,104.42 533.828,112.149 548.182,112.149 C556.699,112.149 565.848,110.099 571.684,106.944 L576.732,119.879 C570.107,123.349 558.75,125.873 547.078,125.873 C520.262,125.873 505.277,108.679 505.277,81.549 C505.277,55.522 519.789,37.382 543.607,37.382 C565.69,37.382 578.782,51.894 578.782,74.766 C578.782,76.816 578.782,79.025 578.625,81.233 L578.625,81.233 Z M543.292,50.001 C530.042,50.001 521.367,60.097 521.051,77.763 L562.22,72.084 C562.062,57.257 554.649,50.001 543.292,50.001 L543.292,50.001 Z' id='Fill-8' />
+      <svg width="140px" height="49px" viewBox="0 0 579 126" version="1.1">
+        <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+          <g id="Imported-Layers" fill="#0081C9">
+            <path d="M37.752,125.873 C18.824,125.873 0.369,112.307 0.369,81.549 C0.369,50.79 18.824,37.382 37.752,37.382 C47.059,37.382 54.315,39.749 59.52,43.219 L53.841,55.68 C50.371,53.156 45.166,51.579 39.961,51.579 C28.604,51.579 18.193,60.57 18.193,81.391 C18.193,102.212 28.919,111.361 39.961,111.361 C45.166,111.361 50.371,109.783 53.841,107.26 L59.52,120.036 C54.157,123.664 47.059,125.873 37.752,125.873" id="Fill-1" />
+            <path d="M102.898,125.873 C78.765,125.873 65.515,106.786 65.515,81.549 C65.515,56.311 78.765,37.382 102.898,37.382 C127.032,37.382 140.282,56.311 140.282,81.549 C140.282,106.786 127.032,125.873 102.898,125.873 L102.898,125.873 Z M102.898,51.105 C89.491,51.105 82.866,63.093 82.866,81.391 C82.866,99.688 89.491,111.834 102.898,111.834 C116.306,111.834 122.931,99.688 122.931,81.391 C122.931,63.093 116.306,51.105 102.898,51.105 L102.898,51.105 Z" id="Fill-2" />
+            <path d="M163.468,23.659 C157.79,23.659 153.215,19.243 153.215,13.88 C153.215,8.517 157.79,4.1 163.468,4.1 C169.146,4.1 173.721,8.517 173.721,13.88 C173.721,19.243 169.146,23.659 163.468,23.659 L163.468,23.659 Z M154.793,39.118 L172.144,39.118 L172.144,124.138 L154.793,124.138 L154.793,39.118 Z" id="Fill-3" />
+            <path d="M240.443,124.137 L240.443,67.352 C240.443,57.415 234.449,51.263 222.619,51.263 C216.31,51.263 210.473,52.367 207.003,53.787 L207.003,124.137 L189.81,124.137 L189.81,43.376 C198.328,39.906 209.212,37.382 222.461,37.382 C246.28,37.382 257.794,47.793 257.794,65.775 L257.794,124.137 L240.443,124.137" id="Fill-4" />
+            <path d="M303.536,125.873 C292.494,125.873 281.611,123.191 274.986,119.879 L274.986,0.314 L292.179,0.314 L292.179,41.326 C296.28,39.433 302.905,37.856 308.741,37.856 C330.667,37.856 345.494,53.629 345.494,79.656 C345.494,111.676 328.931,125.873 303.536,125.873 L303.536,125.873 Z M305.744,51.263 C301.012,51.263 295.491,52.367 292.179,54.103 L292.179,109.941 C294.703,111.045 299.593,112.149 304.482,112.149 C318.205,112.149 328.301,102.685 328.301,80.918 C328.301,62.305 319.467,51.263 305.744,51.263 L305.744,51.263 Z" id="Fill-5" />
+            <path d="M392.341,125.873 C367.892,125.873 355.589,115.935 355.589,99.215 C355.589,75.555 380.826,71.296 406.537,69.876 L406.537,64.513 C406.537,53.787 399.439,50.001 388.555,50.001 C380.511,50.001 370.731,52.525 365.053,55.207 L360.636,43.376 C367.419,40.379 378.933,37.382 390.29,37.382 C410.638,37.382 422.942,45.269 422.942,66.248 L422.942,119.879 C416.79,123.191 404.329,125.873 392.341,125.873 L392.341,125.873 Z M406.537,81.391 C389.186,82.337 371.835,83.757 371.835,98.9 C371.835,107.89 378.776,113.411 391.868,113.411 C397.389,113.411 403.856,112.465 406.537,111.203 L406.537,81.391 L406.537,81.391 Z" id="Fill-6" />
+            <path d="M461.743,125.873 C451.806,125.873 441.395,123.191 435.244,119.879 L441.08,106.629 C445.496,109.31 454.803,112.149 461.27,112.149 C470.576,112.149 476.728,107.575 476.728,100.477 C476.728,92.748 470.261,89.751 461.586,86.596 C450.228,82.337 437.452,77.132 437.452,61.201 C437.452,47.162 448.336,37.382 467.264,37.382 C477.517,37.382 486.035,39.906 492.029,43.376 L486.665,55.364 C482.88,52.998 475.309,50.317 469.157,50.317 C460.166,50.317 455.118,55.049 455.118,61.201 C455.118,68.93 461.428,71.611 469.788,74.766 C481.618,79.183 494.71,84.072 494.71,100.635 C494.71,115.935 483.038,125.873 461.743,125.873" id="Fill-7" />
+            <path d="M578.625,81.233 L522.155,89.12 C523.89,104.42 533.828,112.149 548.182,112.149 C556.699,112.149 565.848,110.099 571.684,106.944 L576.732,119.879 C570.107,123.349 558.75,125.873 547.078,125.873 C520.262,125.873 505.277,108.679 505.277,81.549 C505.277,55.522 519.789,37.382 543.607,37.382 C565.69,37.382 578.782,51.894 578.782,74.766 C578.782,76.816 578.782,79.025 578.625,81.233 L578.625,81.233 Z M543.292,50.001 C530.042,50.001 521.367,60.097 521.051,77.763 L562.22,72.084 C562.062,57.257 554.649,50.001 543.292,50.001 L543.292,50.001 Z" id="Fill-8" />
           </g>
         </g>
       </svg>
@@ -85,13 +85,13 @@ class BuyEtherScreen extends Component {
     const {goToCoinbase, address} = this.props
 
     return (
-      <div className='buy-ether__action-content-wrapper'>
+      <div className="buy-ether__action-content-wrapper">
         <div>{this.renderCoinbaseLogo()}</div>
-        <div className='buy-ether__body-text'>Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
-        <a className='first-time-flow__link buy-ether__faq-link'>What is Ethereum?</a>
-        <div className='buy-ether__buttons'>
+        <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
+        <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
+        <div className="buy-ether__buttons">
           <button
-            className='first-time-flow__button'
+            className="first-time-flow__button"
             onClick={() => goToCoinbase(address)}
           >
             Buy
@@ -114,23 +114,23 @@ class BuyEtherScreen extends Component {
         return this.renderCoinbaseForm()
       case OPTION_VALUES.SHAPESHIFT:
         return (
-          <div className='buy-ether__action-content-wrapper'>
-            <div className='shapeshift-logo' />
-            <div className='buy-ether__body-text'>
+          <div className="buy-ether__action-content-wrapper">
+            <div className="shapeshift-logo" />
+            <div className="buy-ether__body-text">
               Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
             </div>
-            <ShapeShiftForm btnClass='first-time-flow__button' />
+            <ShapeShiftForm btnClass="first-time-flow__button" />
           </div>
           )
       case OPTION_VALUES.QR_CODE:
         return (
-          <div className='buy-ether__action-content-wrapper'>
+          <div className="buy-ether__action-content-wrapper">
             <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
-            <div className='buy-ether__body-text'>Deposit Ether directly into your account.</div>
-            <div className='buy-ether__small-body-text'>(This is the account address that MetaMask created for you to recieve funds.)</div>
-            <div className='buy-ether__buttons'>
+            <div className="buy-ether__body-text">Deposit Ether directly into your account.</div>
+            <div className="buy-ether__small-body-text">(This is the account address that MetaMask created for you to recieve funds.)</div>
+            <div className="buy-ether__buttons">
               <button
-                className='first-time-flow__button'
+                className="first-time-flow__button"
                 onClick={this.copyToClipboard}
                 disabled={justCopied}
               >
@@ -149,19 +149,19 @@ class BuyEtherScreen extends Component {
     const { selectedOption } = this.state
 
     return (
-      <div className='buy-ether'>
+      <div className="buy-ether">
         <Identicon address={this.props.address} diameter={70} />
-        <div className='buy-ether__title'>Deposit Ether</div>
-        <div className='buy-ether__body-text'>
+        <div className="buy-ether__title">Deposit Ether</div>
+        <div className="buy-ether__body-text">
           MetaMask works best if you have Ether in your account to pay for transaction gas fees and more. To get Ether, choose from one of these methods.
         </div>
-        <div className='buy-ether__content-wrapper'>
-          <div className='buy-ether__content-headline-wrapper'>
-            <div className='buy-ether__content-headline'>Deposit Options</div>
+        <div className="buy-ether__content-wrapper">
+          <div className="buy-ether__content-headline-wrapper">
+            <div className="buy-ether__content-headline">Deposit Options</div>
             {this.renderSkip()}
           </div>
-          <div className='buy-ether__content'>
-            <div className='buy-ether__side-panel'>
+          <div className="buy-ether__content">
+            <div className="buy-ether__side-panel">
               {OPTIONS.map(({ name, value }) => (
                 <div
                   key={value}
@@ -170,16 +170,16 @@ class BuyEtherScreen extends Component {
                   })}
                   onClick={() => this.setState({ selectedOption: value })}
                 >
-                  <div className='buy-ether__side-panel-item-name'>{name}</div>
+                  <div className="buy-ether__side-panel-item-name">{name}</div>
                   {value === selectedOption && (
-                    <svg viewBox='0 0 574 1024' id='si-ant-right' width='15px' height='15px'>
-                      <path d='M10 9Q0 19 0 32t10 23l482 457L10 969Q0 979 0 992t10 23q10 9 24 9t24-9l506-480q10-10 10-23t-10-23L58 9Q48 0 34 0T10 9z' />
+                    <svg viewBox="0 0 574 1024" id="si-ant-right" width="15px" height="15px">
+                      <path d="M10 9Q0 19 0 32t10 23l482 457L10 969Q0 979 0 992t10 23q10 9 24 9t24-9l506-480q10-10 10-23t-10-23L58 9Q48 0 34 0T10 9z" />
                     </svg>
                   )}
                 </div>
               ))}
             </div>
-            <div className='buy-ether__action-content'>
+            <div className="buy-ether__action-content">
               {this.renderContent()}
             </div>
           </div>
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index dc254bb19..6e4dc74bb 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import { withRouter, Switch, Route } from 'react-router-dom'
 import { compose } from 'recompose'
-import classnames from 'classnames'
 
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
@@ -44,28 +43,9 @@ class FirstTimeFlow extends Component {
     noActiveNotices: false,
   };
 
-  renderAppBar () {
-    const { welcomeScreenSeen } = this.props
-
-    return (
-      <div className="alpha-warning__container">
-        <h2 className={classnames({
-            'alpha-warning': welcomeScreenSeen,
-            'alpha-warning-welcome-screen': !welcomeScreenSeen,
-          })}
-        >
-          Please be aware that this version is still under development
-        </h2>
-      </div>
-    )
-  }
-
   render () {
-    const { isPopup } = this.props
-
     return (
       <div className="flex-column flex-grow">
-        { !isPopup && this.renderAppBar() }
         <div className="first-time-flow">
           <Switch>
             <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} />
diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
index 01e1c1998..596f818ca 100644
--- a/mascara/src/app/first-time/loading-screen.js
+++ b/mascara/src/app/first-time/loading-screen.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Spinner from './spinner'
 
-export default function LoadingScreen({ className = '', loadingMessage }) {
+export default function LoadingScreen ({ className = '', loadingMessage }) {
   return (
     <div className={`${className} loading-screen`}>
       <Spinner color="#1B344D" />
diff --git a/mascara/src/app/shapeshift-form/index.js b/mascara/src/app/shapeshift-form/index.js
index 53a63403a..6f3307487 100644
--- a/mascara/src/app/shapeshift-form/index.js
+++ b/mascara/src/app/shapeshift-form/index.js
@@ -79,11 +79,11 @@ export class ShapeShiftForm extends Component {
 
   renderMetadata (label, value) {
     return (
-      <div className='shapeshift-form__metadata-wrapper'>
-        <div className='shapeshift-form__metadata-label'>
+      <div className="shapeshift-form__metadata-wrapper">
+        <div className="shapeshift-form__metadata-label">
           {label}:
         </div>
-        <div className='shapeshift-form__metadata-value'>
+        <div className="shapeshift-form__metadata-value">
           {value}
         </div>
       </div>
@@ -101,7 +101,7 @@ export class ShapeShiftForm extends Component {
     } = tokenExchangeRates[coinPair] || {}
 
     return (
-      <div className='shapeshift-form__metadata'>
+      <div className="shapeshift-form__metadata">
         {this.renderMetadata('Status', limit ? 'Available' : 'Unavailable')}
         {this.renderMetadata('Limit', limit)}
         {this.renderMetadata('Exchange Rate', rate)}
@@ -117,13 +117,13 @@ export class ShapeShiftForm extends Component {
     qrImage.make()
 
     return (
-      <div className='shapeshift-form'>
-        <div className='shapeshift-form__deposit-instruction'>
+      <div className="shapeshift-form">
+        <div className="shapeshift-form__deposit-instruction">
           Deposit your BTC to the address bellow:
         </div>
-        <div className='shapeshift-form__qr-code'>
+        <div className="shapeshift-form__qr-code">
           {isLoading
-            ? <img src='images/loading.svg' style={{ width: '60px' }} />
+            ? <img src="images/loading.svg" style={{ width: '60px' }} />
             : <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
           }
         </div>
@@ -141,14 +141,14 @@ export class ShapeShiftForm extends Component {
 
     return showQrCode ? this.renderQrCode() : (
       <div>
-        <div className='shapeshift-form'>
-          <div className='shapeshift-form__selectors'>
-            <div className='shapeshift-form__selector'>
-              <div className='shapeshift-form__selector-label'>
+        <div className="shapeshift-form">
+          <div className="shapeshift-form__selectors">
+            <div className="shapeshift-form__selector">
+              <div className="shapeshift-form__selector-label">
                 Deposit
               </div>
               <select
-                className='shapeshift-form__selector-input'
+                className="shapeshift-form__selector-input"
                 value={this.state.depositCoin}
                 onChange={this.onCoinChange}
               >
@@ -160,14 +160,14 @@ export class ShapeShiftForm extends Component {
               </select>
             </div>
             <div
-              className='icon shapeshift-form__caret'
+              className="icon shapeshift-form__caret"
               style={{ backgroundImage: 'url(images/caret-right.svg)'}}
             />
-            <div className='shapeshift-form__selector'>
-              <div className='shapeshift-form__selector-label'>
+            <div className="shapeshift-form__selector">
+              <div className="shapeshift-form__selector-label">
                 Receive
               </div>
-              <div className='shapeshift-form__selector-input'>
+              <div className="shapeshift-form__selector-input">
                 ETH
               </div>
             </div>
@@ -177,18 +177,18 @@ export class ShapeShiftForm extends Component {
               'shapeshift-form__address-input-wrapper--error': errorMessage,
             })}
           >
-            <div className='shapeshift-form__address-input-label'>
+            <div className="shapeshift-form__address-input-label">
               Your Refund Address
             </div>
             <input
-              type='text'
-              className='shapeshift-form__address-input'
+              type="text"
+              className="shapeshift-form__address-input"
               onChange={e => this.setState({
                 refundAddress: e.target.value,
                 errorMessage: '',
               })}
             />
-            <div className='shapeshift-form__address-input-error-message'>
+            <div className="shapeshift-form__address-input-error-message">
               {errorMessage}
             </div>
           </div>
diff --git a/mascara/src/background.js b/mascara/src/background.js
index 40a684f3d..d8d1c8c54 100644
--- a/mascara/src/background.js
+++ b/mascara/src/background.js
@@ -37,7 +37,7 @@ const dbController = new DbController({
 
 start().catch(log.error)
 
-async function start() {
+async function start () {
   log.debug('MetaMask initializing...')
   const initState = await loadStateFromPersistence()
   await setupController(initState)
diff --git a/mascara/src/ui.js b/mascara/src/ui.js
index f35a11fc4..f9e7670ea 100644
--- a/mascara/src/ui.js
+++ b/mascara/src/ui.js
@@ -43,7 +43,7 @@ console.log('starting service worker')
 swController.startWorker()
 
 // Setup listener for when the service worker is read
-function connectApp() {
+function connectApp () {
   const connectionStream = SwStream({
     serviceWorker: swController.getWorker(),
     context: name,
diff --git a/mascara/test/helpers.js b/mascara/test/helpers.js
index eede103b4..8fc5c816b 100644
--- a/mascara/test/helpers.js
+++ b/mascara/test/helpers.js
@@ -1,6 +1,6 @@
-function wait(time) {
-  return new Promise(function(resolve, reject) {
-    setTimeout(function() {
+export default function wait (time) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
       resolve()
     }, time * 3 || 1500)
   })
diff --git a/mascara/test/index.js b/mascara/test/index.js
index 0134cdf00..d62e43705 100644
--- a/mascara/test/index.js
+++ b/mascara/test/index.js
@@ -1,9 +1,9 @@
 var fs = require('fs')
 var path = require('path')
-var browserify = require('browserify');
+var browserify = require('browserify')
 var tests = fs.readdirSync(path.join(__dirname, 'lib'))
 var bundlePath = path.join(__dirname, 'test-bundle.js')
-var b = browserify();
+var b = browserify()
 
 // Remove old bundle
 try {
@@ -14,9 +14,9 @@ try {
 
 var writeStream = fs.createWriteStream(bundlePath)
 
-tests.forEach(function(fileName) {
+tests.forEach(function (fileName) {
   b.add(path.join(__dirname, 'lib', fileName))
 })
 
-b.bundle().pipe(writeStream);
+b.bundle().pipe(writeStream)
 
diff --git a/mascara/test/test-ui.js b/mascara/test/test-ui.js
index b9bc42dff..16b2c206a 100644
--- a/mascara/test/test-ui.js
+++ b/mascara/test/test-ui.js
@@ -1,5 +1,3 @@
-const Helper = require('./util/mascara-test-helper.js')
-
 window.addEventListener('load', () => {
   window.METAMASK_SKIP_RELOAD = true
   // inject app container
diff --git a/mascara/test/util/mascara-test-helper.js b/mascara/test/util/mascara-test-helper.js
index 9cf4fa900..0439fbba3 100644
--- a/mascara/test/util/mascara-test-helper.js
+++ b/mascara/test/util/mascara-test-helper.js
@@ -2,27 +2,29 @@ const EventEmitter = require('events')
 const IDB = require('idb-global')
 const KEY = 'metamask-test-config'
 module.exports = class Helper extends EventEmitter {
-  constructor () {
-    super()
-  }
 
   tryToCleanContext () {
     this.unregister()
     .then(() => this.clearDb())
     .then(() => super.emit('complete'))
-    .catch((err) => super.emit('complete'))
+    .catch((err) => {
+      if (err) {
+        super.emit('complete')
+      }
+    })
   }
 
   unregister () {
     return global.navigator.serviceWorker.getRegistration()
     .then((registration) => {
-      if (registration) return registration.unregister()
+      if (registration) {
+ return registration.unregister()
       .then((b) => b ? Promise.resolve() : Promise.reject())
-      else return Promise.resolve()
+} else return Promise.resolve()
     })
   }
   clearDb () {
-    return new Promise ((resolve, reject) => {
+    return new Promise((resolve, reject) => {
       const deleteRequest = global.indexDB.deleteDatabase(KEY)
       deleteRequest.addEventListener('success', resolve)
       deleteRequest.addEventListener('error', reject)
@@ -33,7 +35,7 @@ module.exports = class Helper extends EventEmitter {
     const db = new IDB({
       version: 2,
       key: KEY,
-      initialState: state
+      initialState: state,
     })
     return db.open()
   }