style(line length): Limit prettier line length to 120 chars

150 is a bit too long
7 years ago · f87236495a
43 changed files with 413 additions and 125 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -1,6 +1,6 @@
 {
  "bracketSpacing": true,
-  "printWidth": 150,
+  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
--- a/app/components/Activity/ActivityModal.js
+++ b/app/components/Activity/ActivityModal.js
@ -37,7 +37,13 @@ const ActivityModal = ({
          <Isvg src={x} />
        </span>
      </div>
-      <SpecificModal {...modalProps} network={network} ticker={ticker} currentTicker={currentTicker} toggleCurrencyProps={toggleCurrencyProps} />
+      <SpecificModal
+        {...modalProps}
+        network={network}
+        ticker={ticker}
+        currentTicker={currentTicker}
+        toggleCurrencyProps={toggleCurrencyProps}
+      />
    </div>
  )
 }
--- a/app/components/Activity/InvoiceModal.js
+++ b/app/components/Activity/InvoiceModal.js
@ -20,7 +20,13 @@ const InvoiceModal = ({
  ticker,
  currentTicker,

-  toggleCurrencyProps: { setActivityModalCurrencyFilters, showCurrencyFilters, currencyName, currentCurrencyFilters, onCurrencyFilterClick }
+  toggleCurrencyProps: {
+    setActivityModalCurrencyFilters,
+    showCurrencyFilters,
+    currencyName,
+    currentCurrencyFilters,
+    onCurrencyFilterClick
+  }
 }) => {
  const copyPaymentRequest = () => {
    copy(invoice.payment_request)
@ -51,7 +57,10 @@ const InvoiceModal = ({
              <h1>
                <Value value={invoice.value} currency={ticker.currency} currentTicker={currentTicker} />
              </h1>
-              <section className={styles.currentCurrency} onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}>
+              <section
+                className={styles.currentCurrency}
+                onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}
+              >
                <span>{currencyName}</span>
                <span>
                  <FaAngleDown />
--- a/app/components/Activity/PaymentModal.js
+++ b/app/components/Activity/PaymentModal.js
@ -19,7 +19,13 @@ const PaymentModal = ({
  ticker,
  currentTicker,

-  toggleCurrencyProps: { setActivityModalCurrencyFilters, showCurrencyFilters, currencyName, currentCurrencyFilters, onCurrencyFilterClick }
+  toggleCurrencyProps: {
+    setActivityModalCurrencyFilters,
+    showCurrencyFilters,
+    currencyName,
+    currentCurrencyFilters,
+    onCurrencyFilterClick
+  }
 }) => (
  <div className={styles.container}>
    <header className={styles.header}>
--- a/app/components/Activity/TransactionModal.js
+++ b/app/components/Activity/TransactionModal.js
@ -21,7 +21,13 @@ const TransactionModal = ({
  currentTicker,
  network,

-  toggleCurrencyProps: { setActivityModalCurrencyFilters, showCurrencyFilters, currencyName, currentCurrencyFilters, onCurrencyFilterClick }
+  toggleCurrencyProps: {
+    setActivityModalCurrencyFilters,
+    showCurrencyFilters,
+    currencyName,
+    currentCurrencyFilters,
+    onCurrencyFilterClick
+  }
 }) => (
  <div className={styles.container}>
    <header className={styles.header}>
@ -45,7 +51,9 @@ const TransactionModal = ({

    <div className={styles.amount}>
      <h1>
-        <i className={`${styles.symbol} ${transaction.amount > 0 && styles.active}`}>{transaction.amount > 0 ? '+' : '-'}</i>
+        <i className={`${styles.symbol} ${transaction.amount > 0 && styles.active}`}>
+          {transaction.amount > 0 ? '+' : '-'}
+        </i>
        <Value value={transaction.amount} currency={ticker.currency} currentTicker={currentTicker} />
      </h1>
      <section className={styles.currentCurrency} onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}>
--- a/app/components/Contacts/ContactModal.js
+++ b/app/components/Contacts/ContactModal.js
@ -71,7 +71,10 @@ const ContactModal = ({ isOpen, channel, closeContactModal, channelNodes, closeC
            <div className={styles.pay}>
              <h4>Can Pay</h4>
              <div className={styles.meter}>
-                <div className={styles.amount} style={{ width: `${(channel.local_balance / channel.capacity) * 100}%` }} />
+                <div
+                  className={styles.amount}
+                  style={{ width: `${(channel.local_balance / channel.capacity) * 100}%` }}
+                />
              </div>
              <span>{btc.satoshisToBtc(channel.local_balance)} BTC</span>
            </div>
@ -79,7 +82,10 @@ const ContactModal = ({ isOpen, channel, closeContactModal, channelNodes, closeC
            <div className={styles.pay}>
              <h4>Can Receive</h4>
              <div className={styles.meter}>
-                <div className={styles.amount} style={{ width: `${(channel.remote_balance / channel.capacity) * 100}%` }} />
+                <div
+                  className={styles.amount}
+                  style={{ width: `${(channel.remote_balance / channel.capacity) * 100}%` }}
+                />
              </div>
              <span>{btc.satoshisToBtc(channel.remote_balance)} BTC</span>
            </div>
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@ -79,7 +79,9 @@ class ContactsForm extends React.Component {
        <span
          className={`${styles.connect} hint--left`}
          data-hint={`Connect with ${contactsform.contactCapacity} BTC`}
-          onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactCapacity })}
+          onClick={() =>
+            openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactCapacity })
+          }
        >
          Connect
        </span>
@ -217,7 +219,10 @@ class ContactsForm extends React.Component {
              </span>
              <span className={styles.caption}>
                BTC per contact
-                <i data-hint="You aren't spending anything, just moving money onto the Lightning Network" className="hint--top">
+                <i
+                  data-hint="You aren't spending anything, just moving money onto the Lightning Network"
+                  className="hint--top"
+                >
                  <FaQuestionCircle style={{ verticalAlign: 'top' }} />
                </i>
              </span>
--- a/app/components/Contacts/Network.js
+++ b/app/components/Contacts/Network.js
@ -26,7 +26,15 @@ class Network extends Component {

  render() {
    const {
-      channels: { searchQuery, filterPulldown, filter, selectedChannel, loadingChannelPubkeys, closingChannelIds, channels },
+      channels: {
+        searchQuery,
+        filterPulldown,
+        filter,
+        selectedChannel,
+        loadingChannelPubkeys,
+        closingChannelIds,
+        channels
+      },
      currentChannels,
      balance,
      ticker,
@ -140,7 +148,11 @@ class Network extends Component {
              {btc.satoshisToBtc(balance.channelBalance)}BTC ≈ ${usdAmount ? usdAmount.toLocaleString() : ''}
            </span>
          </section>
-          <section className={`${styles.addChannel} hint--bottom-left`} onClick={openContactsForm} data-hint="Open a channel">
+          <section
+            className={`${styles.addChannel} hint--bottom-left`}
+            onClick={openContactsForm}
+            data-hint="Open a channel"
+          >
            <span className={styles.plusContainer}>
              <Isvg src={plus} />
            </span>
@ -207,7 +219,9 @@ class Network extends Component {
              })}
            {currentChannels.length &&
              currentChannels.map((channelObj, index) => {
-                const channel = Object.prototype.hasOwnProperty.call(channelObj, 'channel') ? channelObj.channel : channelObj
+                const channel = Object.prototype.hasOwnProperty.call(channelObj, 'channel')
+                  ? channelObj.channel
+                  : channelObj
                const pubkey = channel.remote_node_pub || channel.remote_pubkey

                return (
@ -217,7 +231,10 @@ class Network extends Component {
                    onClick={() => channelClicked(channel)}
                  >
                    <section className={styles.channelTitle}>
-                      <span className={`${styles[channelStatus(channelObj)]} hint--right`} data-hint={channelStatus(channelObj)}>
+                      <span
+                        className={`${styles[channelStatus(channelObj)]} hint--right`}
+                        data-hint={channelStatus(channelObj)}
+                      >
                        {closingChannelIds.includes(channel.chan_id) ? (
                          <span className={styles.loading}>
                            <i className={`${styles.spinner} ${styles.closing}`} />
@ -228,7 +245,9 @@ class Network extends Component {
                      </span>
                      <span>{displayNodeName(channel)}</span>
                      {selectedChannel === channel && (
-                        <span onClick={() => blockExplorer.showTransaction(network, channel.channel_point.split(':')[0])}>
+                        <span
+                          onClick={() => blockExplorer.showTransaction(network, channel.channel_point.split(':')[0])}
+                        >
                          <FaExternalLink />
                        </span>
                      )}
@ -243,14 +262,22 @@ class Network extends Component {
                        <section>
                          <h5>Pay Limit</h5>
                          <p>
-                            <Value value={channel.local_balance} currency={ticker.currency} currentTicker={currentTicker} />
+                            <Value
+                              value={channel.local_balance}
+                              currency={ticker.currency}
+                              currentTicker={currentTicker}
+                            />
                            <i> {ticker.currency.toUpperCase()}</i>
                          </p>
                        </section>
                        <section>
                          <h5>Request Limit</h5>
                          <p>
-                            <Value value={channel.remote_balance} currency={ticker.currency} currentTicker={currentTicker} />
+                            <Value
+                              value={channel.remote_balance}
+                              currency={ticker.currency}
+                              currentTicker={currentTicker}
+                            />
                            <i>{ticker.currency.toUpperCase()}</i>
                          </p>
                        </section>
--- a/app/components/Contacts/SubmitChannelForm.js
+++ b/app/components/Contacts/SubmitChannelForm.js
@ -57,8 +57,8 @@ class SubmitChannelForm extends React.Component {
        <header className={styles.header}>
          <h1>Add Funds to Network</h1>
          <p>
-            Adding a connection will help you send and receive money on the Lightning Network. You aren&apos;t spening any money, rather moving the
-            money you plan to use onto the network.
+            Adding a connection will help you send and receive money on the Lightning Network. You aren&apos;t spening
+            any money, rather moving the money you plan to use onto the network.
          </p>
        </header>

@ -78,7 +78,10 @@ class SubmitChannelForm extends React.Component {
              id="amount"
            />
            <div className={styles.currency}>
-              <section className={styles.currentCurrency} onClick={() => setContactsCurrencyFilters(!showCurrencyFilters)}>
+              <section
+                className={styles.currentCurrency}
+                onClick={() => setContactsCurrencyFilters(!showCurrencyFilters)}
+              >
                <span>{currencyName}</span>
                <span>
                  <FaAngleDown />
--- a/app/components/Contacts/SuggestedNodes.js
+++ b/app/components/Contacts/SuggestedNodes.js
@ -21,7 +21,10 @@ const SuggestedNodes = ({ suggestedNodesLoading, suggestedNodes, setNode, openSu

  return (
    <div className={styles.container}>
-      <header>Hmmm, looks like you don&apos;t have any channels yet. Here are some suggested nodes to open a channel with to get started</header>
+      <header>
+        Hmmm, looks like you don&apos;t have any channels yet. Here are some suggested nodes to open a channel with to
+        get started
+      </header>

      <ul className={styles.suggestedNodes}>
        {suggestedNodes.map(node => (
--- a/app/components/Form/Request.js
+++ b/app/components/Form/Request.js
@ -45,9 +45,18 @@ const Request = ({
            <span />
          </div>
          <div className={styles.bottom}>
-            <input type="number" value={amount || ''} onChange={event => setRequestAmount(event.target.value)} id="amount" placeholder="0.00000000" />
+            <input
+              type="number"
+              value={amount || ''}
+              onChange={event => setRequestAmount(event.target.value)}
+              id="amount"
+              placeholder="0.00000000"
+            />
            <div className={styles.currency}>
-              <section className={styles.currentCurrency} onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}>
+              <section
+                className={styles.currentCurrency}
+                onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
+              >
                <span>{currencyName}</span>
                <span>
                  <FaAngleDown />
--- a/app/components/Onboarding/ConnectionDetails.js
+++ b/app/components/Onboarding/ConnectionDetails.js
@ -2,7 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './ConnectionDetails.scss'

-const ConnectionDetails = ({ connectionHost, connectionCert, connectionMacaroon, setConnectionHost, setConnectionCert, setConnectionMacaroon }) => (
+const ConnectionDetails = ({
+  connectionHost,
+  connectionCert,
+  connectionMacaroon,
+  setConnectionHost,
+  setConnectionCert,
+  setConnectionMacaroon
+}) => (
  <div className={styles.container}>
    <div>
      <label htmlFor="connectionHost">Host:</label>
--- a/app/components/Onboarding/Login.js
+++ b/app/components/Onboarding/Login.js
@ -16,7 +16,10 @@ const Login = ({ password, updatePassword, unlockingWallet, unlockWallet, unlock

    <section className={styles.buttons}>
      <div>
-        <span className={`${!unlockingWallet && styles.active} ${styles.button}`} onClick={() => unlockWallet(password)}>
+        <span
+          className={`${!unlockingWallet && styles.active} ${styles.button}`}
+          onClick={() => unlockWallet(password)}
+        >
          {unlockingWallet ? <i className={styles.spinner} /> : 'Unlock'}
        </span>
      </div>
--- a/app/components/Onboarding/NewAezeedPassword.js
+++ b/app/components/Onboarding/NewAezeedPassword.js
@ -28,7 +28,9 @@ const NewAezeedPassword = ({
        value={aezeedPasswordConfirmation}
        onChange={event => updateAezeedPasswordConfirmation(event.target.value)}
      />
-      <p className={`${styles.errorMessage} ${showAezeedPasswordConfirmationError && styles.visible}`}>Passwords do not match</p>
+      <p className={`${styles.errorMessage} ${showAezeedPasswordConfirmationError && styles.visible}`}>
+        Passwords do not match
+      </p>
    </section>
  </div>
 )
--- a/app/components/Onboarding/NewWalletPassword.js
+++ b/app/components/Onboarding/NewWalletPassword.js
@ -28,7 +28,9 @@ const NewWalletPassword = ({
        value={createWalletPasswordConfirmation}
        onChange={event => updateCreateWalletPasswordConfirmation(event.target.value)}
      />
-      <p className={`${styles.errorMessage} ${showCreateWalletPasswordConfirmationError && styles.visible}`}>Passwords do not match</p>
+      <p className={`${styles.errorMessage} ${showCreateWalletPasswordConfirmationError && styles.visible}`}>
+        Passwords do not match
+      </p>
    </section>
  </div>
 )
--- a/app/components/Onboarding/Onboarding.js
+++ b/app/components/Onboarding/Onboarding.js
@ -107,7 +107,12 @@ const Onboarding = ({
        )
      case 3:
        return (
-          <FormContainer title="Welcome back!" description="Enter your wallet password or create a new wallet" back={null} next={null}>
+          <FormContainer
+            title="Welcome back!"
+            description="Enter your wallet password or create a new wallet"
+            back={null}
+            next={null}
+          >
            <Login {...initWalletProps.loginProps} />
          </FormContainer>
        )
--- a/app/components/Onboarding/ReEnterSeed.js
+++ b/app/components/Onboarding/ReEnterSeed.js
@ -17,7 +17,9 @@ const ReEnterSeed = ({ seed, seedInput, updateSeedInput }) => (
              placeholder="word"
              value={seedInput[index] ? seedInput[index].word : ''}
              onChange={event => updateSeedInput({ word: event.target.value, index })}
-              className={`${styles.word} ${seedInput[index] && word === seedInput[index].word ? styles.valid : styles.invalid}`}
+              className={`${styles.word} ${
+                seedInput[index] && word === seedInput[index].word ? styles.valid : styles.invalid
+              }`}
            />
          </section>
        </li>
--- a/app/components/Onboarding/Syncing.js
+++ b/app/components/Onboarding/Syncing.js
@ -23,9 +23,16 @@ class Syncing extends Component {
          <section className={styles.progressContainer}>
            <h1>Syncing to the blockchain...</h1>
            <div className={styles.progressBar}>
-              <div className={styles.progress} style={{ width: Number.isNaN(syncPercentage) ? 0 : `${syncPercentage}%` }} />
+              <div
+                className={styles.progress}
+                style={{ width: Number.isNaN(syncPercentage) ? 0 : `${syncPercentage}%` }}
+              />
            </div>
-            <h4>{Number.isNaN(parseInt(syncPercentage, 10)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}</h4>
+            <h4>
+              {Number.isNaN(parseInt(syncPercentage, 10)) || syncPercentage.toString().length === 0
+                ? ''
+                : `${syncPercentage}%`}
+            </h4>
          </section>
        </div>
      </div>
--- a/app/components/Wallet/ReceiveModal.js
+++ b/app/components/Wallet/ReceiveModal.js
@ -65,7 +65,14 @@ class ReceiveModal extends React.Component {
            </header>

            <div className={styles.qrCodeContainer}>
-              <QRCode value={qrCodeType === 1 ? pubkey : address} renderAs="svg" size={150} bgColor="transparent" fgColor="white" level="L" />
+              <QRCode
+                value={qrCodeType === 1 ? pubkey : address}
+                renderAs="svg"
+                size={150}
+                bgColor="transparent"
+                fgColor="white"
+                level="L"
+              />
            </div>
          </section>
          <section className={styles.right}>
@ -73,7 +80,11 @@ class ReceiveModal extends React.Component {
              <h4>Node Public Key</h4>
              <p>
                <span className={styles.data}>{pubkey}</span>
-                <span onClick={() => copyOnClick(pubkey)} className={`${styles.copy} hint--left`} data-hint="Copy pubkey">
+                <span
+                  onClick={() => copyOnClick(pubkey)}
+                  className={`${styles.copy} hint--left`}
+                  data-hint="Copy pubkey"
+                >
                  <Isvg src={copyIcon} />
                </span>
              </p>
@ -83,7 +94,11 @@ class ReceiveModal extends React.Component {
              <h4>Bitcoin {network.name} Address</h4>
              <p>
                <span className={styles.data}>{address}</span>
-                <span onClick={() => copyOnClick(address)} className={`${styles.copy} hint--left`} data-hint="Copy address">
+                <span
+                  onClick={() => copyOnClick(address)}
+                  className={`${styles.copy} hint--left`}
+                  data-hint="Copy address"
+                >
                  <Isvg src={copyIcon} />
                </span>
              </p>
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@ -29,7 +29,10 @@ const Wallet = ({
  setWalletCurrencyFilters,
  network
 }) => {
-  const usdAmount = btc.satoshisToUsd(parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10), currentTicker.price_usd)
+  const usdAmount = btc.satoshisToUsd(
+    parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10),
+    currentTicker.price_usd
+  )

  const onCurrencyFilterClick = currency => {
    setCurrency(currency)
--- a/app/lnd/index.js
+++ b/app/lnd/index.js
@ -21,7 +21,8 @@ const initWalletUnlocker = callback => {
  const lndConfig = config.lnd()

  const walletUnlockerObj = walletUnlocker(lndConfig.lightningRpc, lndConfig.lightningHost)
-  const walletUnlockerMethodsCallback = (event, msg, data) => walletUnlockerMethods(walletUnlockerObj, mainLog, event, msg, data)
+  const walletUnlockerMethodsCallback = (event, msg, data) =>
+    walletUnlockerMethods(walletUnlockerObj, mainLog, event, msg, data)

  callback(walletUnlockerMethodsCallback)
 }
--- a/app/lnd/lib/lightning.js
+++ b/app/lnd/lib/lightning.js
@ -12,7 +12,12 @@ import config from '../config'
 // https://github.com/ssllabs/research/wiki/SSL-and-TLS-Deployment-Best-Practices#23-use-secure-cipher-suites
 process.env.GRPC_SSL_CIPHER_SUITES =
  process.env.GRPC_SSL_CIPHER_SUITES ||
-  ['ECDHE-ECDSA-AES128-GCM-SHA256', 'ECDHE-ECDSA-AES256-GCM-SHA384', 'ECDHE-ECDSA-AES128-CBC-SHA256', 'ECDHE-ECDSA-CHACHA20-POLY1305'].join(':')
+  [
+    'ECDHE-ECDSA-AES128-GCM-SHA256',
+    'ECDHE-ECDSA-AES256-GCM-SHA384',
+    'ECDHE-ECDSA-AES128-CBC-SHA256',
+    'ECDHE-ECDSA-CHACHA20-POLY1305'
+  ].join(':')

 const lightning = (rpcpath, host) => {
  const lndConfig = config.lnd()
--- a/app/lnd/lib/walletUnlocker.js
+++ b/app/lnd/lib/walletUnlocker.js
@ -12,7 +12,12 @@ import config from '../config'
 // https://github.com/ssllabs/research/wiki/SSL-and-TLS-Deployment-Best-Practices#23-use-secure-cipher-suites
 process.env.GRPC_SSL_CIPHER_SUITES =
  process.env.GRPC_SSL_CIPHER_SUITES ||
-  ['ECDHE-ECDSA-AES128-GCM-SHA256', 'ECDHE-ECDSA-AES256-GCM-SHA384', 'ECDHE-ECDSA-AES128-CBC-SHA256', 'ECDHE-ECDSA-CHACHA20-POLY1305'].join(':')
+  [
+    'ECDHE-ECDSA-AES128-GCM-SHA256',
+    'ECDHE-ECDSA-AES256-GCM-SHA384',
+    'ECDHE-ECDSA-AES128-CBC-SHA256',
+    'ECDHE-ECDSA-CHACHA20-POLY1305'
+  ].join(':')

 const walletUnlocker = (rpcpath, host) => {
  const lndConfig = config.lnd()
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@ -80,7 +80,12 @@ export default function(lnd, log, event, msg, data) {
      // Data looks like
      // [ { channels: [] }, { total_limbo_balance: 0, pending_open_channels: [], pending_closing_channels: [], pending_force_closing_channels: [] } ]
      Promise.all([channelController.listChannels, channelController.pendingChannels].map(func => func(lnd)))
-        .then(channelsData => event.sender.send('receiveChannels', { channels: channelsData[0].channels, pendingChannels: channelsData[1] }))
+        .then(channelsData =>
+          event.sender.send('receiveChannels', {
+            channels: channelsData[0].channels,
+            pendingChannels: channelsData[1]
+          })
+        )
        .catch(error => log.error('channels:', error))
      break
    case 'transactions':
@ -115,7 +120,10 @@ export default function(lnd, log, event, msg, data) {
      // Balance looks like [ { balance: '129477456' }, { balance: '243914' } ]
      Promise.all([walletController.walletBalance, channelController.channelBalance].map(func => func(lnd)))
        .then(balance => {
-          event.sender.send('receiveBalance', { walletBalance: balance[0].total_balance, channelBalance: balance[1].balance })
+          event.sender.send('receiveBalance', {
+            walletBalance: balance[0].total_balance,
+            channelBalance: balance[1].balance
+          })
          return balance
        })
        .catch(error => log.error('balance:', error))
--- a/app/main.dev.js
+++ b/app/main.dev.js
@ -154,7 +154,11 @@ const startLnd = (alias, autopilot) => {
  mainLog.debug(' > cert:', lndConfig.cert)
  mainLog.debug(' > macaroon:', lndConfig.macaroon)

-  const neutrinoArgs = [`--configfile=${lndConfig.configPath}`, `${autopilot ? '--autopilot.active' : ''}`, `${alias ? `--alias=${alias}` : ''}`]
+  const neutrinoArgs = [
+    `--configfile=${lndConfig.configPath}`,
+    `${autopilot ? '--autopilot.active' : ''}`,
+    `${alias ? `--alias=${alias}` : ''}`
+  ]

  const neutrino = spawn(lndConfig.lndPath, neutrinoArgs)
    .on('error', error => {
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@ -221,7 +221,9 @@ const FILTERS = {

 activitySelectors.currentActivity = createSelector(filterSelector, filter => FILTERS[filter.key])

-activitySelectors.nonActiveFilters = createSelector(filtersSelector, filterSelector, (filters, filter) => filters.filter(f => f.key !== filter.key))
+activitySelectors.nonActiveFilters = createSelector(filtersSelector, filterSelector, (filters, filter) =>
+  filters.filter(f => f.key !== filter.key)
+)

 export { activitySelectors }

--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@ -180,7 +180,8 @@ export const fetchChannels = () => async dispatch => {
 }

 // Receive IPC event for channels
-export const receiveChannels = (event, { channels, pendingChannels }) => dispatch => dispatch({ type: RECEIVE_CHANNELS, channels, pendingChannels })
+export const receiveChannels = (event, { channels, pendingChannels }) => dispatch =>
+  dispatch({ type: RECEIVE_CHANNELS, channels, pendingChannels })

 // Send IPC event for opening a channel
 export const openChannel = ({ pubkey, host, local_amt }) => dispatch => {
@ -350,7 +351,10 @@ const ACTION_HANDLERS = {
  [TOGGLE_CHANNEL_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown }),
  [CHANGE_CHANNEL_FILTER]: (state, { channelFilter }) => ({ ...state, filterPulldown: false, filter: channelFilter }),

-  [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys] }),
+  [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({
+    ...state,
+    loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys]
+  }),
  [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({
    ...state,
    loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey)
@ -396,19 +400,26 @@ const channelMatchesQuery = (channel, nodes, searchQuery) => {

 channelsSelectors.channelModalOpen = createSelector(channelSelector, channel => !!channel)

-channelsSelectors.activeChannels = createSelector(channelsSelector, openChannels => openChannels.filter(channel => channel.active))
+channelsSelectors.activeChannels = createSelector(channelsSelector, openChannels =>
+  openChannels.filter(channel => channel.active)
+)

 channelsSelectors.activeChannelPubkeys = createSelector(channelsSelector, openChannels =>
  openChannels.filter(channel => channel.active).map(c => c.remote_pubkey)
 )

-channelsSelectors.nonActiveChannels = createSelector(channelsSelector, openChannels => openChannels.filter(channel => !channel.active))
+channelsSelectors.nonActiveChannels = createSelector(channelsSelector, openChannels =>
+  openChannels.filter(channel => !channel.active)
+)

 channelsSelectors.nonActiveChannelPubkeys = createSelector(channelsSelector, openChannels =>
  openChannels.filter(channel => !channel.active).map(c => c.remote_pubkey)
 )

-channelsSelectors.pendingOpenChannels = createSelector(pendingOpenChannelsSelector, pendingOpenChannels => pendingOpenChannels)
+channelsSelectors.pendingOpenChannels = createSelector(
+  pendingOpenChannelsSelector,
+  pendingOpenChannels => pendingOpenChannels
+)

 channelsSelectors.pendingOpenChannelPubkeys = createSelector(pendingOpenChannelsSelector, pendingOpenChannels =>
  pendingOpenChannels.map(pendingChannel => pendingChannel.channel.remote_node_pub)
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@ -178,7 +178,10 @@ const ACTION_HANDLERS = {

  [SET_NODE]: (state, { node }) => ({ ...state, node }),

-  [UPDATE_MANUAL_FORM_ERRORS]: (state, { errorsObject }) => ({ ...state, showErrors: Object.assign(state.showErrors, errorsObject) }),
+  [UPDATE_MANUAL_FORM_ERRORS]: (state, { errorsObject }) => ({
+    ...state,
+    showErrors: Object.assign(state.showErrors, errorsObject)
+  }),

  [UPDATE_MANUAL_FORM_SEARCH_QUERY]: (state, { manualSearchQuery }) => ({ ...state, manualSearchQuery }),

@ -207,27 +210,33 @@ const contactableFirst = (a, b) => {
  return 0
 }

-contactFormSelectors.filteredNetworkNodes = createSelector(networkNodesSelector, searchQuerySelector, (nodes, searchQuery) => {
-  // If there is no search query default to showing the first 20 nodes from the nodes array
-  // (performance hit to render the entire thing by default)
-  // if (!searchQuery.length) { return nodes.sort(contactableFirst).slice(0, 20) }
+contactFormSelectors.filteredNetworkNodes = createSelector(
+  networkNodesSelector,
+  searchQuerySelector,
+  (nodes, searchQuery) => {
+    // If there is no search query default to showing the first 20 nodes from the nodes array
+    // (performance hit to render the entire thing by default)
+    // if (!searchQuery.length) { return nodes.sort(contactableFirst).slice(0, 20) }

-  // return an empty array if there is no search query
-  if (!searchQuery.length) {
-    return []
-  }
+    // return an empty array if there is no search query
+    if (!searchQuery.length) {
+      return []
+    }

-  // if there is an '@' in the search query we are assuming they are using the format pubkey@host
-  // we can ignore the '@' and the host and just grab the pubkey for our search
-  const query = searchQuery.includes('@') ? searchQuery.split('@')[0] : searchQuery
+    // if there is an '@' in the search query we are assuming they are using the format pubkey@host
+    // we can ignore the '@' and the host and just grab the pubkey for our search
+    const query = searchQuery.includes('@') ? searchQuery.split('@')[0] : searchQuery

-  // list of the nodes
-  const list = filter(nodes, node => node.alias.includes(query) || node.pub_key.includes(query)).sort(contactableFirst)
+    // list of the nodes
+    const list = filter(nodes, node => node.alias.includes(query) || node.pub_key.includes(query)).sort(
+      contactableFirst
+    )

-  // if we don't limit the nodes returned then we take a huge performance hit
-  // rendering thousands of nodes potentially, so we just render 20 for the time being
-  return list.slice(0, 20)
-})
+    // if we don't limit the nodes returned then we take a huge performance hit
+    // rendering thousands of nodes potentially, so we just render 20 for the time being
+    return list.slice(0, 20)
+  }
+)

 contactFormSelectors.showManualForm = createSelector(
  searchQuerySelector,
--- a/app/reducers/invoice.js
+++ b/app/reducers/invoice.js
@ -156,7 +156,11 @@ const ACTION_HANDLERS = {
  [RECEIVE_INVOICES]: (state, { invoices }) => ({ ...state, invoiceLoading: false, invoices }),

  [SEND_INVOICE]: state => ({ ...state, invoiceLoading: true }),
-  [INVOICE_SUCCESSFUL]: (state, { invoice }) => ({ ...state, invoiceLoading: false, invoices: [invoice, ...state.invoices] }),
+  [INVOICE_SUCCESSFUL]: (state, { invoice }) => ({
+    ...state,
+    invoiceLoading: false,
+    invoices: [invoice, ...state.invoices]
+  }),
  [INVOICE_FAILED]: state => ({ ...state, invoiceLoading: false, data: null }),

  [UPDATE_INVOICE]: (state, action) => {
@ -182,12 +186,16 @@ const invoicesSearchTextSelector = state => state.invoice.invoicesSearchText

 invoiceSelectors.invoiceModalOpen = createSelector(invoiceSelector, invoice => !!invoice)

-invoiceSelectors.invoices = createSelector(invoicesSelector, invoicesSearchTextSelector, (invoices, invoicesSearchText) =>
-  invoices.filter(invoice => invoice.memo.includes(invoicesSearchText))
+invoiceSelectors.invoices = createSelector(
+  invoicesSelector,
+  invoicesSearchTextSelector,
+  (invoices, invoicesSearchText) => invoices.filter(invoice => invoice.memo.includes(invoicesSearchText))
 )

-invoiceSelectors.invoices = createSelector(invoicesSelector, invoicesSearchTextSelector, (invoices, invoicesSearchText) =>
-  invoices.filter(invoice => invoice.memo.includes(invoicesSearchText))
+invoiceSelectors.invoices = createSelector(
+  invoicesSelector,
+  invoicesSearchTextSelector,
+  (invoices, invoicesSearchText) => invoices.filter(invoice => invoice.memo.includes(invoicesSearchText))
 )

 export { invoiceSelectors }
--- a/app/reducers/lnd.js
+++ b/app/reducers/lnd.js
@ -56,7 +56,9 @@ export const lndStdout = (event, line) => dispatch => {
  }

  if (line.includes('Catching up block hashes to height')) {
-    trimmed = line.slice(line.indexOf('Catching up block hashes to height') + 'Catching up block hashes to height'.length).trim()
+    trimmed = line
+      .slice(line.indexOf('Catching up block hashes to height') + 'Catching up block hashes to height'.length)
+      .trim()
    height = trimmed.match(/[-]{0,1}[\d.]*[\d]+/g)[0]
  }

@ -118,15 +120,19 @@ const lndSelectors = {}
 const blockHeightSelector = state => state.lnd.blockHeight
 const lndBlockHeightSelector = state => state.lnd.lndBlockHeight

-lndSelectors.syncPercentage = createSelector(blockHeightSelector, lndBlockHeightSelector, (blockHeight, lndBlockHeight) => {
-  const percentage = Math.floor((lndBlockHeight / blockHeight) * 100)
+lndSelectors.syncPercentage = createSelector(
+  blockHeightSelector,
+  lndBlockHeightSelector,
+  (blockHeight, lndBlockHeight) => {
+    const percentage = Math.floor((lndBlockHeight / blockHeight) * 100)

-  if (percentage === Infinity) {
-    return ''
-  }
+    if (percentage === Infinity) {
+      return ''
+    }

-  return percentage
-})
+    return percentage
+  }
+)

 export { lndSelectors }

--- a/app/reducers/network.js
+++ b/app/reducers/network.js
@ -134,7 +134,8 @@ export const fetchDescribeNetwork = () => dispatch => {
 }

 // Receive IPC event for describeNetwork
-export const receiveDescribeNetwork = (event, { nodes, edges }) => dispatch => dispatch({ type: RECEIVE_DESCRIBE_NETWORK, nodes, edges })
+export const receiveDescribeNetwork = (event, { nodes, edges }) => dispatch =>
+  dispatch({ type: RECEIVE_DESCRIBE_NETWORK, nodes, edges })

 export const queryRoutes = (pubkey, amount) => dispatch => {
  dispatch(getQueryRoutes(pubkey))
@ -149,7 +150,8 @@ export const fetchInvoiceAndQueryRoutes = payreq => dispatch => {
  ipcRenderer.send('lnd', { msg: 'getInvoiceAndQueryRoutes', data: { payreq } })
 }

-export const receiveInvoiceAndQueryRoutes = (event, { routes }) => dispatch => dispatch({ type: RECEIVE_INFO_AND_QUERY_ROUTES, routes })
+export const receiveInvoiceAndQueryRoutes = (event, { routes }) => dispatch =>
+  dispatch({ type: RECEIVE_INFO_AND_QUERY_ROUTES, routes })

 // ------------------------------------
 // Action Handlers
@ -163,7 +165,11 @@ const ACTION_HANDLERS = {
    edges
  }),

-  [GET_QUERY_ROUTES]: (state, { pubkey }) => ({ ...state, networkLoading: true, selectedNode: { pubkey, routes: [], currentRoute: {} } }),
+  [GET_QUERY_ROUTES]: (state, { pubkey }) => ({
+    ...state,
+    networkLoading: true,
+    selectedNode: { pubkey, routes: [], currentRoute: {} }
+  }),
  [RECEIVE_QUERY_ROUTES]: (state, { routes }) => ({
    ...state,
    networkLoading: false,
@ -182,7 +188,11 @@ const ACTION_HANDLERS = {
  [RESET_PAY_REQ]: state => ({ ...state, pay_req: '' }),

  [GET_INFO_AND_QUERY_ROUTES]: state => ({ ...state, fetchingInvoiceAndQueryingRoutes: true }),
-  [RECEIVE_INFO_AND_QUERY_ROUTES]: (state, { routes }) => ({ ...state, fetchingInvoiceAndQueryingRoutes: false, payReqRoutes: routes }),
+  [RECEIVE_INFO_AND_QUERY_ROUTES]: (state, { routes }) => ({
+    ...state,
+    fetchingInvoiceAndQueryingRoutes: false,
+    payReqRoutes: routes
+  }),
  [CLEAR_QUERY_ROUTES]: state => ({ ...state, payReqRoutes: [], currentRoute: {} }),

  [UPDATE_SELECTED_PEERS]: (state, { peer }) => {
@ -242,7 +252,9 @@ const currentRouteSelector = state => state.network.currentRoute

 networkSelectors.selectedPeerPubkeys = createSelector(selectedPeersSelector, peers => peers.map(peer => peer.pub_key))

-networkSelectors.selectedChannelIds = createSelector(selectedChannelsSelector, channels => channels.map(channel => channel.chan_id))
+networkSelectors.selectedChannelIds = createSelector(selectedChannelsSelector, channels =>
+  channels.map(channel => channel.chan_id)
+)

 networkSelectors.payReqIsLn = createSelector(payReqSelector, input => {
  if (!input.startsWith('ln')) {
--- a/app/reducers/onboarding.js
+++ b/app/reducers/onboarding.js
@ -157,7 +157,10 @@ export function startLnd(options) {

 export const submitNewWallet = (wallet_password, cipher_seed_mnemonic, aezeed_passphrase) => dispatch => {
  // once the user submits the data needed to start LND we will alert the app that it should start LND
-  ipcRenderer.send('walletUnlocker', { msg: 'initWallet', data: { wallet_password, cipher_seed_mnemonic, aezeed_passphrase } })
+  ipcRenderer.send('walletUnlocker', {
+    msg: 'initWallet',
+    data: { wallet_password, cipher_seed_mnemonic, aezeed_passphrase }
+  })
  dispatch({ type: CREATING_NEW_WALLET })
 }

@ -218,9 +221,15 @@ const ACTION_HANDLERS = {
  [UPDATE_ALIAS]: (state, { alias }) => ({ ...state, alias }),
  [UPDATE_PASSWORD]: (state, { password }) => ({ ...state, password }),
  [UPDATE_CREATE_WALLET_PASSWORD]: (state, { createWalletPassword }) => ({ ...state, createWalletPassword }),
-  [UPDATE_CREATE_WALLET_PASSWORD_CONFIRMATION]: (state, { createWalletPasswordConfirmation }) => ({ ...state, createWalletPasswordConfirmation }),
+  [UPDATE_CREATE_WALLET_PASSWORD_CONFIRMATION]: (state, { createWalletPasswordConfirmation }) => ({
+    ...state,
+    createWalletPasswordConfirmation
+  }),
  [UPDATE_AEZEED_PASSWORD]: (state, { aezeedPassword }) => ({ ...state, aezeedPassword }),
-  [UPDATE_AEZEED_PASSWORD_CONFIRMATION]: (state, { aezeedPasswordConfirmation }) => ({ ...state, aezeedPasswordConfirmation }),
+  [UPDATE_AEZEED_PASSWORD_CONFIRMATION]: (state, { aezeedPasswordConfirmation }) => ({
+    ...state,
+    aezeedPasswordConfirmation
+  }),
  [UPDATE_SEED_INPUT]: (state, { inputSeedObj }) => ({
    ...state,
    seedInput: Object.assign([], state.seedInput, { [inputSeedObj.index]: inputSeedObj })
@ -242,8 +251,16 @@ const ACTION_HANDLERS = {
  [CREATING_NEW_WALLET]: state => ({ ...state, creatingNewWallet: true }),

  [UNLOCKING_WALLET]: state => ({ ...state, unlockingWallet: true }),
-  [WALLET_UNLOCKED]: state => ({ ...state, unlockingWallet: false, unlockWalletError: { isError: false, message: '' } }),
-  [SET_UNLOCK_WALLET_ERROR]: state => ({ ...state, unlockingWallet: false, unlockWalletError: { isError: true, message: 'Incorrect password' } }),
+  [WALLET_UNLOCKED]: state => ({
+    ...state,
+    unlockingWallet: false,
+    unlockWalletError: { isError: false, message: '' }
+  }),
+  [SET_UNLOCK_WALLET_ERROR]: state => ({
+    ...state,
+    unlockingWallet: false,
+    unlockWalletError: { isError: true, message: 'Incorrect password' }
+  }),

  [SET_SIGNUP_CREATE]: state => ({ ...state, signupForm: { create: true, import: false } }),
  [SET_SIGNUP_IMPORT]: state => ({ ...state, signupForm: { create: false, import: true } })
--- a/app/reducers/payform.js
+++ b/app/reducers/payform.js
@ -96,12 +96,27 @@ export function resetPayForm() {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_PAY_AMOUNT]: (state, { amount }) => ({ ...state, amount, showErrors: Object.assign(state.showErrors, { amount: false }) }),
-  [SET_PAY_INPUT]: (state, { payInput }) => ({ ...state, payInput, showErrors: Object.assign(state.showErrors, { payInput: false }) }),
-  [SET_PAY_INVOICE]: (state, { invoice }) => ({ ...state, invoice, showErrors: Object.assign(state.showErrors, { amount: false }) }),
+  [SET_PAY_AMOUNT]: (state, { amount }) => ({
+    ...state,
+    amount,
+    showErrors: Object.assign(state.showErrors, { amount: false })
+  }),
+  [SET_PAY_INPUT]: (state, { payInput }) => ({
+    ...state,
+    payInput,
+    showErrors: Object.assign(state.showErrors, { payInput: false })
+  }),
+  [SET_PAY_INVOICE]: (state, { invoice }) => ({
+    ...state,
+    invoice,
+    showErrors: Object.assign(state.showErrors, { amount: false })
+  }),
  [SET_PAY_CURRENCY_FILTERS]: (state, { showCurrencyFilters }) => ({ ...state, showCurrencyFilters }),

-  [UPDATE_PAY_ERRORS]: (state, { errorsObject }) => ({ ...state, showErrors: Object.assign(state.showErrors, errorsObject) }),
+  [UPDATE_PAY_ERRORS]: (state, { errorsObject }) => ({
+    ...state,
+    showErrors: Object.assign(state.showErrors, errorsObject)
+  }),

  [RESET_FORM]: () => initialState
 }
@ -228,24 +243,29 @@ payFormSelectors.showPayLoadingScreen = createSelector(
  (sendingTransaction, sendingPayment) => sendingTransaction || sendingPayment
 )

-payFormSelectors.payFormIsValid = createSelector(payFormSelectors.isOnchain, payFormSelectors.isLn, payAmountSelector, (isOnchain, isLn, amount) => {
-  const errors = {}
+payFormSelectors.payFormIsValid = createSelector(
+  payFormSelectors.isOnchain,
+  payFormSelectors.isLn,
+  payAmountSelector,
+  (isOnchain, isLn, amount) => {
+    const errors = {}

-  if (!isLn && amount <= 0) {
-    errors.amount = 'Amount must be more than 0'
-  }
+    if (!isLn && amount <= 0) {
+      errors.amount = 'Amount must be more than 0'
+    }

-  if (!isOnchain && !isLn) {
-    errors.payInput = 'Must be a valid BTC address or Lightning Network request'
-  }
+    if (!isOnchain && !isLn) {
+      errors.payInput = 'Must be a valid BTC address or Lightning Network request'
+    }

-  return {
-    errors,
-    amountIsValid: isEmpty(errors.amount),
-    payInputIsValid: isEmpty(errors.payInput),
-    isValid: isEmpty(errors)
+    return {
+      errors,
+      amountIsValid: isEmpty(errors.amount),
+      payInputIsValid: isEmpty(errors.payInput),
+      isValid: isEmpty(errors)
+    }
  }
-})
+)

 export { payFormSelectors }

--- a/app/reducers/ticker.js
+++ b/app/reducers/ticker.js
@ -91,8 +91,10 @@ tickerSelectors.currentTicker = createSelector(
  (crypto, btcTicker, ltcTicker) => (crypto === 'btc' ? btcTicker : ltcTicker)
 )

-tickerSelectors.currentCurrencyFilters = createSelector(currencySelector, currencyFiltersSelector, (currency, filters) =>
-  filters.filter(f => f.key !== currency)
+tickerSelectors.currentCurrencyFilters = createSelector(
+  currencySelector,
+  currencyFiltersSelector,
+  (currency, filters) => filters.filter(f => f.key !== currency)
 )

 tickerSelectors.currencyName = createSelector(currencySelector, infoSelectors.networkSelector, (currency, network) => {
--- a/app/reducers/transaction.js
+++ b/app/reducers/transaction.js
@ -58,7 +58,8 @@ export const fetchTransactions = () => dispatch => {
 }

 // Receive IPC event for payments
-export const receiveTransactions = (event, { transactions }) => dispatch => dispatch({ type: RECEIVE_TRANSACTIONS, transactions })
+export const receiveTransactions = (event, { transactions }) => dispatch =>
+  dispatch({ type: RECEIVE_TRANSACTIONS, transactions })

 export const sendCoins = ({ value, addr, currency }) => dispatch => {
  // backend needs amount in satoshis no matter what currency we are using
@ -134,7 +135,10 @@ const ACTION_HANDLERS = {
          transactions: [transaction, ...state.transactions]
        }
  },
-  [SHOW_SUCCESS_TRANSACTION_SCREEN]: (state, { txid }) => ({ ...state, successTransactionScreen: { show: true, txid } }),
+  [SHOW_SUCCESS_TRANSACTION_SCREEN]: (state, { txid }) => ({
+    ...state,
+    successTransactionScreen: { show: true, txid }
+  }),
  [HIDE_SUCCESS_TRANSACTION_SCREEN]: state => ({ ...state, successTransactionScreen: { show: false, txid: '' } })
 }

--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@ -44,7 +44,13 @@ class Activity extends Component {
    } else if (Object.prototype.hasOwnProperty.call(activity, 'payment_request')) {
      // activity is an LN invoice
      return (
-        <Invoice invoice={activity} ticker={ticker} currentTicker={currentTicker} showActivityModal={showActivityModal} currencyName={currencyName} />
+        <Invoice
+          invoice={activity}
+          ticker={ticker}
+          currentTicker={currentTicker}
+          showActivityModal={showActivityModal}
+          currencyName={currencyName}
+        />
      )
    }
    // activity is an LN payment
@ -85,7 +91,11 @@ class Activity extends Component {
          {searchActive ? (
            <header className={`${styles.header} ${styles.search}`}>
              <section>
-                <input placeholder="Search" value={searchText} onChange={event => updateSearchText(event.target.value)} />
+                <input
+                  placeholder="Search"
+                  value={searchText}
+                  onChange={event => updateSearchText(event.target.value)}
+                />
              </section>
              <section
                onClick={() => {
@ -103,7 +113,11 @@ class Activity extends Component {
              <section>
                <ul className={styles.filters}>
                  {filters.map(f => (
-                    <li key={f.key} className={f.key === filter.key && styles.activeFilter} onClick={() => changeFilter(f)}>
+                    <li
+                      key={f.key}
+                      className={f.key === filter.key && styles.activeFilter}
+                      onClick={() => changeFilter(f)}
+                    >
                      <span>{f.name}</span>

                      <div className={f.key === filter.key && styles.activeBorder} />
@ -120,7 +134,9 @@ class Activity extends Component {
            {currentActivity.map((activityBlock, index) => (
              <li className={styles.activity} key={index}>
                <h2>{activityBlock.title}</h2>
-                <ul>{activityBlock.activity.map((activity, i) => <li key={i}>{this.renderActivity(activity.el)}</li>)}</ul>
+                <ul>
+                  {activityBlock.activity.map((activity, i) => <li key={i}>{this.renderActivity(activity.el)}</li>)}
+                </ul>
              </li>
            ))}
          </ul>
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@ -10,7 +10,10 @@ import checkmarkIcon from 'icons/check_circle.svg'
 import styles from '../Activity.scss'

 const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyName }) => (
-  <div className={`${styles.container} ${!invoice.settled && styles.unpaid}`} onClick={() => showActivityModal('INVOICE', { invoice })}>
+  <div
+    className={`${styles.container} ${!invoice.settled && styles.unpaid}`}
+    onClick={() => showActivityModal('INVOICE', { invoice })}
+  >
    {!invoice.settled && (
      <div className={styles.pendingIcon}>
        <Isvg src={checkmarkIcon} />
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@ -18,7 +18,15 @@ import styles from './App.scss'

 class App extends Component {
  componentWillMount() {
-    const { fetchTicker, fetchInfo, newAddress, fetchChannels, fetchSuggestedNodes, fetchBalance, fetchDescribeNetwork } = this.props
+    const {
+      fetchTicker,
+      fetchInfo,
+      newAddress,
+      fetchChannels,
+      fetchSuggestedNodes,
+      fetchBalance,
+      fetchDescribeNetwork
+    } = this.props

    // fetch price ticker
    fetchTicker()
@ -75,7 +83,11 @@ class App extends Component {

        <div className={styles.content}>{children}</div>

-        {contactsFormProps.contactsform.isOpen ? <AddChannel {...contactsFormProps} /> : <Network {...networkTabProps} />}
+        {contactsFormProps.contactsform.isOpen ? (
+          <AddChannel {...contactsFormProps} />
+        ) : (
+          <Network {...networkTabProps} />
+        )}

        <Form formType={form.formType} formProps={formProps} closeForm={closeForm} />
      </div>
--- a/app/routes/app/containers/AppContainer.js
+++ b/app/routes/app/containers/AppContainer.js
@ -312,7 +312,9 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {

    suggestedNodesProps: {
      suggestedNodesLoading: stateProps.channels.suggestedNodesLoading,
-      suggestedNodes: stateProps.info.data.testnet ? stateProps.channels.suggestedNodes.testnet : stateProps.channels.suggestedNodes.mainnet,
+      suggestedNodes: stateProps.info.data.testnet
+        ? stateProps.channels.suggestedNodes.testnet
+        : stateProps.channels.suggestedNodes.mainnet,

      setNode: dispatchProps.setNode,
      openSubmitChannelForm: () => dispatchProps.setChannelFormType('SUBMIT_CHANNEL_FORM')
@ -404,7 +406,9 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
      setContactsCurrencyFilters: dispatchProps.setContactsCurrencyFilters,
      setCurrencyFilters: dispatchProps.setCurrencyFilters,
      onCurrencyFilterClick: currency => {
-        dispatchProps.updateContactCapacity(btc.convert(stateProps.ticker.currency, currency, stateProps.contactsform.contactCapacity))
+        dispatchProps.updateContactCapacity(
+          btc.convert(stateProps.ticker.currency, currency, stateProps.contactsform.contactCapacity)
+        )
        dispatchProps.setCurrency(currency)
        dispatchProps.setContactsCurrencyFilters(false)
      }
--- a/internals/scripts/CheckBuiltsExist.js
+++ b/internals/scripts/CheckBuiltsExist.js
@ -9,11 +9,17 @@ function CheckBuildsExist() {
  const rendererPath = path.join(__dirname, '..', '..', 'app', 'dist', 'renderer.prod.js')

  if (!fs.existsSync(mainPath)) {
-    throw new Error(chalk.whiteBright.bgRed.bold('The main process is not built yet. Build it by running "npm run build-main"'))
+    throw new Error(
+      chalk.whiteBright.bgRed.bold('The main process is not built yet. Build it by running "npm run build-main"')
+    )
  }

  if (!fs.existsSync(rendererPath)) {
-    throw new Error(chalk.whiteBright.bgRed.bold('The renderer process is not built yet. Build it by running "npm run build-renderer"'))
+    throw new Error(
+      chalk.whiteBright.bgRed.bold(
+        'The renderer process is not built yet. Build it by running "npm run build-renderer"'
+      )
+    )
  }
 }

--- a/test/reducers/channels.spec.js
+++ b/test/reducers/channels.spec.js
@ -51,7 +51,9 @@ describe('reducers', () => {
    })

    it('should correctly receiveChannel', () => {
-      expect(channelsReducer(undefined, { type: RECEIVE_CHANNELS, channels: [1, 2], pendingChannels: [3, 4] })).toMatchSnapshot()
+      expect(
+        channelsReducer(undefined, { type: RECEIVE_CHANNELS, channels: [1, 2], pendingChannels: [3, 4] })
+      ).toMatchSnapshot()
    })

    it('should correctly openingChannel', () => {
--- a/test/reducers/invoice.spec.js
+++ b/test/reducers/invoice.spec.js
@ -74,7 +74,9 @@ describe('reducers', () => {
    })

    it('should correctly receiveFormInvoice', () => {
-      expect(invoiceReducer(undefined, { type: RECEIVE_FORM_INVOICE, formInvoice: { payreq: 'foo' } })).toMatchSnapshot()
+      expect(
+        invoiceReducer(undefined, { type: RECEIVE_FORM_INVOICE, formInvoice: { payreq: 'foo' } })
+      ).toMatchSnapshot()
    })

    it('should correctly getInvoices', () => {
--- a/test/runTests.js
+++ b/test/runTests.js
@ -2,7 +2,8 @@ const spawn = require('cross-spawn')
 const path = require('path')

 const s = `\\${path.sep}`
-const pattern = process.argv[2] === 'e2e' ? `test${s}e2e${s}.+\\.spec\\.js` : `test${s}(?!e2e${s})[^${s}]+${s}.+\\.spec\\.js$`
+const pattern =
+  process.argv[2] === 'e2e' ? `test${s}e2e${s}.+\\.spec\\.js` : `test${s}(?!e2e${s})[^${s}]+${s}.+\\.spec\\.js$`

 const result = spawn.sync(path.normalize('./node_modules/.bin/jest'), [pattern], { stdio: 'inherit' })