Merge pull request #536 from mrfelton/chore/update-deps-react

Update react to latest v16.x
6 years ago · 79572864f3
33 changed files with 810 additions and 859 deletions
--- a/app/components/Activity/InvoiceModal.js
+++ b/app/components/Activity/InvoiceModal.js
@ -69,7 +69,7 @@ const InvoiceModal = ({
                  <FaAngleDown />
                </span>
              </section>
-              <ul className={showCurrencyFilters && styles.active}>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
                {currentCurrencyFilters.map(filter => (
                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                    {filter.name}
@ -81,7 +81,7 @@ const InvoiceModal = ({
              <p>
                <Moment format="MM/DD/YYYY">{invoice.creation_date * 1000}</Moment>
              </p>
-              <p className={styles.notPaid}>{!invoice.settled && 'Not Paid'}</p>
+              {!invoice.settled && <p className={styles.notPaid}>Not Paid</p>}
            </section>
          </div>

--- a/app/components/Activity/PaymentModal.js
+++ b/app/components/Activity/PaymentModal.js
@ -46,7 +46,7 @@ const PaymentModal = ({

    <div className={styles.amount}>
      <h1>
-        <i className={`${styles.symbol} ${payment.value > 0 && styles.active}`}>-</i>
+        <i className={`${styles.symbol} ${payment.value > 0 ? styles.active : undefined}`}>-</i>
        <Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} />
      </h1>
      <section
@ -57,7 +57,7 @@ const PaymentModal = ({
        <span>
          <FaAngleDown />
        </span>
-        <ul className={showCurrencyFilters && styles.active}>
+        <ul className={showCurrencyFilters ? styles.active : undefined}>
          {currentCurrencyFilters.map(filter => (
            <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
              {filter.name}
--- a/app/components/Activity/TransactionModal.js
+++ b/app/components/Activity/TransactionModal.js
@ -65,7 +65,7 @@ const TransactionModal = ({

    <div className={styles.amount}>
      <h1>
-        <i className={`${styles.symbol} ${transaction.received && styles.active}`}>
+        <i className={`${styles.symbol} ${transaction.received ? styles.active : undefined}`}>
          {transaction.received ? '+' : '-'}
        </i>
        <Value
@ -82,7 +82,7 @@ const TransactionModal = ({
        <span>
          <FaAngleDown />
        </span>
-        <ul className={showCurrencyFilters && styles.active}>
+        <ul className={showCurrencyFilters ? styles.active : undefined}>
          {currentCurrencyFilters.map(filter => (
            <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
              {filter.name}
--- a/app/components/Contacts/ConnectManually.js
+++ b/app/components/Contacts/ConnectManually.js
@ -63,7 +63,9 @@ class ConnectManually extends React.Component {
          </div>
        </section>

-        <section className={`${styles.errorMessage} ${showErrors.manualInput && styles.active}`}>
+        <section
+          className={`${styles.errorMessage} ${showErrors.manualInput ? styles.active : undefined}`}
+        >
          {showErrors.manualInput && (
            <span>{manualFormIsValid && manualFormIsValid.errors.manualInput}</span>
          )}
@ -71,7 +73,7 @@ class ConnectManually extends React.Component {

        <section className={styles.submit}>
          <div
-            className={`${styles.button} ${manualFormIsValid.isValid && styles.active}`}
+            className={`${styles.button} ${manualFormIsValid.isValid ? styles.active : undefined}`}
            onClick={formSubmitted}
          >
            Submit
--- a/app/components/Contacts/ContactModal.js
+++ b/app/components/Contacts/ContactModal.js
@ -61,7 +61,7 @@ const ContactModal = ({
      {channel && (
        <div className={styles.container}>
          <header className={styles.header}>
-            <div className={`${styles.status} ${channel.active && styles.online}`}>
+            <div className={`${styles.status} ${channel.active ? styles.online : undefined}`}>
              <FaCircle style={{ verticalAlign: 'top' }} />
              <span>{channel.active ? 'Online' : 'Offline'}</span>
            </div>
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@ -208,7 +208,9 @@ class ContactsForm extends React.Component {
              </section>

              <section
-                className={`${styles.errorMessage} ${showErrors.manualInput && styles.active}`}
+                className={`${styles.errorMessage} ${
+                  showErrors.manualInput ? styles.active : undefined
+                }`}
              >
                {showErrors.manualInput && (
                  <span>{manualFormIsValid && manualFormIsValid.errors.manualInput}</span>
--- a/app/components/Contacts/Network.js
+++ b/app/components/Contacts/Network.js
@ -180,11 +180,11 @@ class Network extends Component {
              <section>
                <h2 onClick={toggleFilterPulldown} className={styles.filterTitle}>
                  {filter.name}{' '}
-                  <span className={filterPulldown && styles.pulldown}>
+                  <span className={filterPulldown ? styles.pulldown : undefined}>
                    <FaAngleDown />
                  </span>
                </h2>
-                <ul className={`${styles.filters} ${filterPulldown && styles.active}`}>
+                <ul className={`${styles.filters} ${filterPulldown ? styles.active : undefined}`}>
                  {nonActiveFilters.map(f => (
                    <li key={f.key} onClick={() => changeFilter(f)}>
                      {f.name}
@ -208,7 +208,7 @@ class Network extends Component {
            <SuggestedNodes {...suggestedNodesProps} />
          )}

-          <ul className={filterPulldown && styles.fade}>
+          <ul className={filterPulldown ? styles.fade : undefined}>
            {loadingChannelPubkeys.length > 0 &&
              loadingChannelPubkeys.map(loadingPubkey => {
                // TODO(jimmymow): refactor this out. same logic is in displayNodeName above
@ -242,8 +242,9 @@ class Network extends Component {
                return (
                  <li
                    key={index}
-                    className={`${styles.channel} ${selectedChannel === channel &&
-                      styles.selectedChannel}`}
+                    className={`${styles.channel} ${
+                      selectedChannel === channel ? styles.selectedChannel : undefined
+                    }`}
                    onClick={() => channelClicked(channel)}
                  >
                    <section className={styles.channelTitle}>
--- a/app/components/Contacts/SubmitChannelForm.js
+++ b/app/components/Contacts/SubmitChannelForm.js
@ -92,7 +92,7 @@ class SubmitChannelForm extends React.Component {
                  <FaAngleDown />
                </span>
              </section>
-              <ul className={showCurrencyFilters && styles.active}>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
                {currentCurrencyFilters.map(filter => (
                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                    {filter.name}
@ -107,7 +107,7 @@ class SubmitChannelForm extends React.Component {

        <section className={styles.submit}>
          <div
-            className={`${styles.button} ${contactCapacity > 0 && styles.active}`}
+            className={`${styles.button} ${contactCapacity > 0 ? styles.active : undefined}`}
            onClick={formSubmitted}
          >
            Submit
--- a/app/components/Form/Pay.js
+++ b/app/components/Form/Pay.js
@ -88,7 +88,9 @@ class Pay extends Component {
          <section className={styles.destination}>
            <div className={styles.top}>
              <label htmlFor="paymentRequest">Destination</label>
-              <span className={`${styles.description} ${(isOnchain || isLn) && styles.active}`}>
+              <span
+                className={`${styles.description} ${isOnchain || isLn ? styles.active : undefined}`}
+              >
                {isOnchain && (
                  <i>
                    <Isvg src={link} />
@ -114,7 +116,11 @@ class Pay extends Component {
                id="paymentRequest"
                rows="4"
              />
-              <section className={`${styles.errorMessage} ${showErrors.payInput && styles.active}`}>
+              <section
+                className={`${styles.errorMessage} ${
+                  showErrors.payInput ? styles.active : undefined
+                }`}
+              >
                {showErrors.payInput && <span>{errors.payInput}</span>}
              </section>
            </div>
@ -150,7 +156,7 @@ class Pay extends Component {
                    <FaAngleDown />
                  </span>
                </section>
-                <ul className={showCurrencyFilters && styles.active}>
+                <ul className={showCurrencyFilters ? styles.active : undefined}>
                  {currentCurrencyFilters.map(filter => (
                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                      {filter.name}
@ -163,15 +169,19 @@ class Pay extends Component {
            <div className={styles.usdAmount}>{`≈ ${usdAmount || 0} USD`}</div>

            <section
-              className={`${styles.errorMessage} ${styles.amount} ${showErrors.amount &&
-                styles.active}`}
+              className={`${styles.errorMessage} ${styles.amount} ${
+                showErrors.amount ? styles.active : undefined
+              }`}
            >
              {showErrors.amount && <span>{errors.amount}</span>}
            </section>
          </section>

          <section className={styles.submit}>
-            <div className={`${styles.button} ${isValid && styles.active}`} onClick={onPaySubmit}>
+            <div
+              className={`${styles.button} ${isValid ? styles.active : undefined}`}
+              onClick={onPaySubmit}
+            >
              Pay
            </div>
          </section>
--- a/app/components/Form/Request.js
+++ b/app/components/Form/Request.js
@ -62,7 +62,7 @@ const Request = ({
                  <FaAngleDown />
                </span>
              </section>
-              <ul className={showCurrencyFilters && styles.active}>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
                {currentCurrencyFilters.map(filter => (
                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                    {filter.name}
@ -92,7 +92,7 @@ const Request = ({

        <section className={styles.submit}>
          <div
-            className={`${styles.button} ${amount > 0 && styles.active}`}
+            className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
            onClick={onRequestSubmit}
          >
            Request
--- a/app/components/GlobalError/GlobalError.js
+++ b/app/components/GlobalError/GlobalError.js
@ -15,7 +15,7 @@ class GlobalError extends React.Component {
    const { error, clearError } = this.props

    return (
-      <div className={`${styles.container} ${!error && styles.closed}`}>
+      <div className={`${styles.container} ${!error ? styles.closed : undefined}`}>
        <div className={styles.content}>
          <div className={styles.close} onClick={clearError}>
            <MdClose />
--- a/app/components/Onboarding/Autopilot.js
+++ b/app/components/Onboarding/Autopilot.js
@ -6,13 +6,17 @@ import styles from './Autopilot.scss'

 const Autopilot = ({ autopilot, setAutopilot }) => (
  <div className={styles.container}>
-    <section className={`${styles.enable} ${autopilot && styles.active}`}>
+    <section className={`${styles.enable} ${autopilot ? styles.active : undefined}`}>
      <div onClick={() => setAutopilot(true)}>
        {autopilot ? <FaCircle /> : <FaCircleThin />}
        <span className={styles.label}>Enable Autopilot</span>
      </div>
    </section>
-    <section className={`${styles.disable} ${!autopilot && autopilot !== null && styles.active}`}>
+    <section
+      className={`${styles.disable} ${
+        !autopilot && autopilot !== null ? styles.active : undefined
+      }`}
+    >
      <div onClick={() => setAutopilot(false)}>
        {!autopilot && autopilot !== null ? <FaCircle /> : <FaCircleThin />}
        <span className={styles.label}>Disable Autopilot</span>
--- a/app/components/Onboarding/ConnectionDetails.js
+++ b/app/components/Onboarding/ConnectionDetails.js
@ -19,7 +19,7 @@ const ConnectionDetails = ({
      <input
        type="text"
        id="connectionHost"
-        className={`${styles.host} ${startLndHostError && styles.error}`}
+        className={`${styles.host} ${startLndHostError ? styles.error : undefined}`}
        ref={input => input}
        value={connectionHost}
        onChange={event => setConnectionHost(event.target.value)}
@ -27,7 +27,7 @@ const ConnectionDetails = ({
      <p className={styles.description}>
        Hostname and port of the Lnd gRPC interface. Example: localhost:10009
      </p>
-      <p className={`${startLndHostError && styles.visible} ${styles.errorMessage}`}>
+      <p className={`${startLndHostError ? styles.visible : undefined} ${styles.errorMessage}`}>
        {startLndHostError}
      </p>
    </section>
@ -36,13 +36,13 @@ const ConnectionDetails = ({
      <input
        type="text"
        id="connectionCert"
-        className={`${styles.cert} ${startLndCertError && styles.error}`}
+        className={`${styles.cert} ${startLndCertError ? styles.error : undefined}`}
        ref={input => input}
        value={connectionCert}
        onChange={event => setConnectionCert(event.target.value)}
      />
      <p className={styles.description}>Path to the lnd tls cert. Example: /path/to/tls.cert</p>
-      <p className={`${startLndCertError && styles.visible} ${styles.errorMessage}`}>
+      <p className={`${startLndCertError ? styles.visible : undefined} ${styles.errorMessage}`}>
        {startLndCertError}
      </p>
    </section>
@ -51,7 +51,7 @@ const ConnectionDetails = ({
      <input
        type="text"
        id="connectionMacaroon"
-        className={`${styles.macaroon} ${startLndMacaroonError && styles.error}`}
+        className={`${styles.macaroon} ${startLndMacaroonError ? styles.error : undefined}`}
        ref={input => input}
        value={connectionMacaroon}
        onChange={event => setConnectionMacaroon(event.target.value)}
@ -59,7 +59,7 @@ const ConnectionDetails = ({
      <p className={styles.description}>
        Path to the lnd macaroon file. Example: /path/to/admin.macaroon
      </p>
-      <p className={`${startLndMacaroonError && styles.visible} ${styles.errorMessage}`}>
+      <p className={`${startLndMacaroonError ? styles.visible : undefined} ${styles.errorMessage}`}>
        {startLndMacaroonError}
      </p>
    </section>
--- a/app/components/Onboarding/ConnectionType.js
+++ b/app/components/Onboarding/ConnectionType.js
@ -6,13 +6,17 @@ import styles from './ConnectionType.scss'

 const ConnectionType = ({ connectionType, setConnectionType }) => (
  <div className={styles.container}>
-    <section className={`${styles.option} ${connectionType === 'local' && styles.active}`}>
+    <section
+      className={`${styles.option} ${connectionType === 'local' ? styles.active : undefined}`}
+    >
      <div className={`${styles.button}`} onClick={() => setConnectionType('local')}>
        {connectionType === 'local' ? <FaCircle /> : <FaCircleThin />}
        <span className={styles.label}>Default</span>
      </div>
    </section>
-    <section className={`${styles.option} ${connectionType === 'custom' && styles.active}`}>
+    <section
+      className={`${styles.option} ${connectionType === 'custom' ? styles.active : undefined}`}
+    >
      <div className={`${styles.button}`} onClick={() => setConnectionType('custom')}>
        {connectionType === 'custom' ? <FaCircle /> : <FaCircleThin />}
        <span className={styles.label}>Custom</span>
--- a/app/components/Onboarding/Login.js
+++ b/app/components/Onboarding/Login.js
@ -7,7 +7,7 @@ const Login = ({ password, updatePassword, unlockingWallet, unlockWallet, unlock
    <input
      type="password"
      placeholder="Password"
-      className={`${styles.password} ${unlockWalletError.isError && styles.inputError}`}
+      className={`${styles.password} ${unlockWalletError.isError ? styles.inputError : undefined}`}
      ref={input => input && input.focus()}
      value={password}
      onChange={event => updatePassword(event.target.value)}
@ -17,14 +17,14 @@ const Login = ({ password, updatePassword, unlockingWallet, unlockWallet, unlock
        }
      }}
    />
-    <p className={`${unlockWalletError.isError && styles.active} ${styles.error}`}>
+    <p className={`${unlockWalletError.isError ? styles.active : undefined} ${styles.error}`}>
      {unlockWalletError.message}
    </p>

    <section className={styles.buttons}>
      <div>
        <span
-          className={`${!unlockingWallet && styles.active} ${styles.button}`}
+          className={`${!unlockingWallet ? styles.active : undefined} ${styles.button}`}
          onClick={() => unlockWallet(password)}
        >
          {unlockingWallet ? <i className={styles.spinner} /> : 'Unlock'}
--- a/app/components/Onboarding/NewWalletPassword.js
+++ b/app/components/Onboarding/NewWalletPassword.js
@ -15,7 +15,9 @@ const NewWalletPassword = ({
      <input
        type="password"
        placeholder="Password"
-        className={`${styles.password} ${showCreateWalletPasswordConfirmationError && styles.error} 
+        className={`${styles.password} ${
+          showCreateWalletPasswordConfirmationError ? styles.error : undefined
+        } 
        ${passwordMinCharsError && styles.error}`}
        value={createWalletPassword}
        onChange={event => updateCreateWalletPassword(event.target.value)}
@ -26,18 +28,21 @@ const NewWalletPassword = ({
      <input
        type="password"
        placeholder="Confirm Password"
-        className={`${styles.password} ${showCreateWalletPasswordConfirmationError && styles.error} 
+        className={`${styles.password} ${
+          showCreateWalletPasswordConfirmationError ? styles.error : undefined
+        } 
        ${passwordMinCharsError && styles.error}`}
        value={createWalletPasswordConfirmation}
        onChange={event => updateCreateWalletPasswordConfirmation(event.target.value)}
      />
      <p
-        className={`${styles.errorMessage} ${showCreateWalletPasswordConfirmationError &&
-          styles.visible}`}
+        className={`${styles.errorMessage} ${
+          showCreateWalletPasswordConfirmationError ? styles.visible : undefined
+        }`}
      >
        Passwords do not match
      </p>
-      <p className={`${styles.helpMessage} ${passwordMinCharsError && styles.red}`}>
+      <p className={`${styles.helpMessage} ${passwordMinCharsError ? styles.red : undefined}`}>
        Password must be at least 8 characters long
      </p>
    </section>
--- a/app/components/Onboarding/Signup.js
+++ b/app/components/Onboarding/Signup.js
@ -6,13 +6,13 @@ import styles from './Signup.scss'

 const Signup = ({ signupForm, setSignupCreate, setSignupImport }) => (
  <div className={styles.container}>
-    <section className={`${styles.enable} ${signupForm.create && styles.active}`}>
+    <section className={`${styles.enable} ${signupForm.create ? styles.active : undefined}`}>
      <div onClick={setSignupCreate}>
        {signupForm.create ? <FaCircle /> : <FaCircleThin />}
        <span className={styles.label}>Create new wallet</span>
      </div>
    </section>
-    <section className={`${styles.disable} ${signupForm.import && styles.active}`}>
+    <section className={`${styles.disable} ${signupForm.import ? styles.active : undefined}`}>
      <div onClick={setSignupImport}>
        {signupForm.import ? <FaCircle /> : <FaCircleThin />}
        <span className={styles.label}>Import existing wallet</span>
--- a/app/components/Wallet/ReceiveModal.js
+++ b/app/components/Wallet/ReceiveModal.js
@ -56,10 +56,16 @@ class ReceiveModal extends React.Component {
              <h2>{alias && alias.length ? alias : pubkey.substring(0, 10)}</h2>

              <div className={styles.qrCodeOptions}>
-                <div className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>
+                <div
+                  className={qrCodeType === 1 ? styles.active : undefined}
+                  onClick={changeQrCode}
+                >
                  Node Pubkey
                </div>
-                <div className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>
+                <div
+                  className={qrCodeType === 2 ? styles.active : undefined}
+                  onClick={changeQrCode}
+                >
                  Bitcoin Address
                </div>
              </div>
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@ -75,7 +75,7 @@ const Wallet = ({
                      <FaAngleDown />
                    </span>

-                    <ul className={info.showWalletCurrencyFilters && styles.active}>
+                    <ul className={info.showWalletCurrencyFilters ? styles.active : undefined}>
                      {currentCurrencyFilters.map(filter => (
                        <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                          {filter.name}
--- a/app/containers/Root.js
+++ b/app/containers/Root.js
@ -3,6 +3,7 @@ import React from 'react'
 import { Provider, connect } from 'react-redux'
 import { ConnectedRouter } from 'react-router-redux'
 import PropTypes from 'prop-types'
+import { hot } from 'react-hot-loader'

 import {
  setConnectionType,
@ -243,8 +244,10 @@ Root.propTypes = {
  syncingProps: PropTypes.object.isRequired
 }

-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps
-)(Root)
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+    mergeProps
+  )(Root)
+)
--- a/app/index.js
+++ b/app/index.js
@ -16,12 +16,6 @@ render(

 if (module.hot) {
  module.hot.accept('./containers/Root', () => {
-    const NextRoot = require('./containers/Root') // eslint-disable-line global-require
-    render(
-      <AppContainer>
-        <NextRoot store={store} history={history} />
-      </AppContainer>,
-      document.getElementById('root')
-    )
+    render(<Root store={store} history={history} />, document.getElementById('root'))
  })
 }
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@ -155,12 +155,12 @@ class Activity extends Component {
                  {filters.map(f => (
                    <li
                      key={f.key}
-                      className={f.key === filter.key && styles.activeFilter}
+                      className={f.key === filter.key ? styles.activeFilter : undefined}
                      onClick={() => changeFilter(f)}
                    >
                      <span>{f.name}</span>

-                      <div className={f.key === filter.key && styles.activeBorder} />
+                      <div className={f.key === filter.key ? styles.activeBorder : undefined} />
                    </li>
                  ))}
                </ul>
@ -184,7 +184,11 @@ class Activity extends Component {
              </section>
            </header>
          )}
-          <ul className={`${styles.activityContainer} ${filterPulldown && styles.pulldown}`}>
+          <ul
+            className={`${styles.activityContainer} ${
+              filterPulldown ? styles.pulldown : undefined
+            }`}
+          >
            {currentActivity.map((activityBlock, index) => (
              <li className={styles.activity} key={index}>
                <h2>{activityBlock.title}</h2>
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@ -10,7 +10,7 @@ import styles from '../Activity.scss'

 const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyName }) => (
  <div
-    className={`${styles.container} ${!invoice.settled && styles.unpaid}`}
+    className={`${styles.container} ${!invoice.settled ? styles.unpaid : undefined}`}
    onClick={() => showActivityModal('INVOICE', { invoice })}
  >
    <div className={styles.activityTypeIcon}>
--- a/package.json
+++ b/package.json
@ -217,8 +217,9 @@
    "electron-builder": "^20.26.0",
    "electron-devtools-installer": "^2.2.4",
    "electron-updater": "^3.0.3",
-    "enzyme": "^2.9.1",
-    "enzyme-to-json": "^1.5.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
    "eslint": "^5.0.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^2.9.0",
@ -229,31 +230,31 @@
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jest": "^21.17.0",
    "eslint-plugin-json": "^1.2.1",
-    "eslint-plugin-jsx-a11y": "^6.1.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-markdown": "^1.0.0-beta.6",
    "eslint-plugin-prettier": "^2.6.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-react": "^7.10.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "fbjs-scripts": "^0.8.0",
+    "fbjs-scripts": "^0.8.3",
    "file-loader": "^1.1.11",
-    "flow-bin": "^0.77.0",
+    "flow-bin": "^0.78.0",
    "flow-runtime": "^0.17.0",
    "flow-typed": "^2.5.1",
    "html-webpack-plugin": "^3.2.0",
    "http-proxy-middleware": "^0.18.0",
    "husky": "^1.0.0-rc.9",
    "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.1.0",
-    "jsdom": "^11.0.0",
+    "jest": "^23.4.2",
+    "jsdom": "^11.12.0",
    "koa-connect": "^2.0.1",
    "lint-staged": "^7.2.0",
    "lnd-binary": "^0.3.4",
    "minimist": "^1.2.0",
    "node-sass": "^4.9.0",
    "prettier": "^1.13.5",
-    "react-addons-test-utils": "^15.6.0",
-    "react-test-renderer": "^15.6.1",
+    "react-addons-test-utils": "^15.6.2",
+    "react-test-renderer": "^16.4.2",
    "redux-logger": "^3.0.6",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.3",
@ -281,26 +282,26 @@
    "electron-is-dev": "^0.3.0",
    "electron-store": "^2.0.0",
    "font-awesome": "^4.7.0",
-    "history": "^4.6.3",
+    "history": "^4.7.2",
    "javascript-state-machine": "^3.1.0",
    "lodash.get": "^4.4.2",
    "moment": "^2.22.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.2",
    "ps-node": "^0.1.6",
    "qrcode.react": "0.8.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-hot-loader": "3.0.0-beta.6",
-    "react-inlinesvg": "^0.6.2",
-    "react-modal": "^2.2.2",
-    "react-moment": "^0.6.0",
-    "react-redux": "^5.0.5",
-    "react-router": "^4.1.1",
-    "react-router-dom": "^4.1.1",
-    "react-router-redux": "^5.0.0-alpha.6",
-    "redux": "^3.7.1",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-hot-loader": "^4.3.4",
+    "react-inlinesvg": "^0.8.1",
+    "react-modal": "^3.5.1",
+    "react-moment": "^0.7.9",
+    "react-redux": "^5.0.7",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "react-router-redux": "^5.0.0-alpha.9",
+    "redux": "^4.0.0",
    "redux-electron-ipc": "^1.1.13",
-    "redux-thunk": "^2.2.0",
+    "redux-thunk": "^2.3.0",
    "reselect": "^3.0.1",
    "satoshi-bitcoin": "^1.0.4",
    "source-map-support": "^0.5.6",
--- a/test/components/AnimatedCheckmark.spec.js
+++ b/test/components/AnimatedCheckmark.spec.js
@ -1,10 +1,13 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 import Isvg from 'react-inlinesvg'

 import AnimatedCheckmark from '../../app/components/AnimatedCheckmark'
 import checkmarkIcon from '../../app/components/AnimatedCheckmark/checkmark.svg'

+configure({ adapter: new Adapter() })
+
 describe('component.AnimatedCheckmark', () => {
  describe('default', () => {
    it('should render default component', () => {
--- a/test/components/CryptoIcon.spec.js
+++ b/test/components/CryptoIcon.spec.js
@ -1,11 +1,14 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 import Isvg from 'react-inlinesvg'
 import CryptoIcon from '../../app/components/CryptoIcon'

 import skinnyBitcoinIcon from '../../app/icons/skinny_bitcoin.svg'
 import litecoinIcon from '../../app/icons/litecoin.svg'

+configure({ adapter: new Adapter() })
+
 const defaultProps = {
  currency: 'bch',
  styles: {}
--- a/test/components/CurrencyIcon.spec.js
+++ b/test/components/CurrencyIcon.spec.js
@ -1,9 +1,12 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 import FaDollar from 'react-icons/lib/fa/dollar'
 import CryptoIcon from '../../app/components/CryptoIcon'
 import CurrencyIcon from '../../app/components/CurrencyIcon'

+configure({ adapter: new Adapter() })
+
 const defaultProps = {
  currency: '',
  crypto: '',
--- a/test/components/Form.spec.js
+++ b/test/components/Form.spec.js
@ -1,10 +1,13 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'

 import Form from '../../app/components/Form'
 import Pay from '../../app/components/Form/Pay'
 import Request from '../../app/components/Form/Request'

+configure({ adapter: new Adapter() })
+
 const payFormProps = {
  payform: {
    amount: 0,
--- a/test/components/Form/Pay.spec.js
+++ b/test/components/Form/Pay.spec.js
@ -1,8 +1,11 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'

 import Pay from '../../../app/components/Form/Pay'

+configure({ adapter: new Adapter() })
+
 const defaultProps = {
  payform: {
    amount: 0,
--- a/test/components/Form/Request.spec.js
+++ b/test/components/Form/Request.spec.js
@ -1,8 +1,11 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'

 import Request from '../../../app/components/Form/Request'

+configure({ adapter: new Adapter() })
+
 const defaultProps = {
  requestform: {},
  ticker: {},
--- a/test/components/LoadingBolt.spec.js
+++ b/test/components/LoadingBolt.spec.js
@ -1,9 +1,13 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 import Isvg from 'react-inlinesvg'
+
 import LoadingBolt from '../../app/components/LoadingBolt'
 import cloudboltIcon from '../../app/icons/cloudbolt.svg'

+configure({ adapter: new Adapter() })
+
 describe('component.LoadingBolt', () => {
  const el = shallow(<LoadingBolt />)
  it('should show defaults', () => {
--- a/webpack.config.renderer.dev.js
+++ b/webpack.config.renderer.dev.js
@ -44,11 +44,7 @@ export default merge.smart(baseConfig, {

  mode: 'development',

-  entry: [
-    'react-hot-loader/patch',
-    'webpack/hot/only-dev-server',
-    path.join(__dirname, 'app/index.js')
-  ],
+  entry: ['webpack/hot/only-dev-server', path.join(__dirname, 'app/index.js')],

  output: {
    publicPath: `http://localhost:${port}/dist/`
@ -296,14 +292,7 @@ export default merge.smart(baseConfig, {
          })
        )
      )
-      app.use(
-        convert(
-          history({
-            verbose: true,
-            disableDotRule: false
-          })
-        )
-      )
+      app.use(convert(history()))
    },
    // Start the main process as soon as the server is listening.
    on: {
--- a/yarn.lock
+++ b/yarn.lock